:root {
  color-scheme: light;
  --background: #f4f5f7;
  --foreground: #17181d;
  --card: rgba(255,255,255,.9);
  --secondary: #eef0f4;
  --muted: #6f727d;
  --border: rgba(16,24,40,.09);
  --blue: #1769e8;
  --blue-deep: #0b53bc;
  --danger: #d63a36;
  --shadow: 0 24px 70px rgba(21,31,52,.1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100vh; margin: 0; color: var(--foreground); font-family: var(--font); -webkit-font-smoothing: antialiased;
  background: radial-gradient(circle at 8% -10%, rgba(55,124,255,.15), transparent 28rem), radial-gradient(circle at 100% 90%, rgba(102,79,255,.09), transparent 28rem), var(--background);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(67,139,246,.28); outline-offset: 1px; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app-shell { width: min(1380px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 14px; color: white; background: linear-gradient(145deg,#4964ff,#0878ed 68%,#65b9ff); box-shadow: 0 9px 22px rgba(24,102,232,.24); }
.brand-mark svg { width: 27px; height: 27px; fill: currentColor; }
.brand strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.03em; }
.brand span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; letter-spacing: .14em; }
.workspace-button { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 0 15px; border: 1px solid var(--border); border-radius: 14px; color: var(--foreground); background: var(--card); box-shadow: 0 8px 24px rgba(20,29,47,.06); }
.workspace-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.workspace-button.connected { color: #087b45; border-color: rgba(8,123,69,.2); background: rgba(29,190,104,.08); }
.main-tabs { display: grid; grid-template-columns: repeat(3,1fr); width: min(520px,100%); min-height: 50px; margin: 0 auto 18px; padding: 5px; border: 1px solid var(--border); border-radius: 16px; background: rgba(230,232,237,.84); backdrop-filter: blur(18px); }
.tab-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 18px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; font-size: 15px; font-weight: 550; transition: .18s ease; }
.tab-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-button.active { color: var(--foreground); background: white; box-shadow: 0 3px 12px rgba(20,24,35,.1); }
.tab-panel { animation: panel-in .24s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(3px); } }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 720; letter-spacing: .15em; }
.eyebrow.blue { color: #76b7ff; }
.surface { border: 1px solid var(--border); border-radius: 26px; background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(24px); }

.quote-console { color-scheme: dark; padding: clamp(18px,3vw,30px); overflow: hidden; border: 1px solid rgba(126,169,255,.2); border-radius: 28px; color: #f5f8ff; background: radial-gradient(circle at 8% -10%,rgba(35,126,255,.34),transparent 34rem),radial-gradient(circle at 95% 15%,rgba(48,204,255,.12),transparent 28rem),linear-gradient(145deg,#07162e 0%,#0a2247 48%,#081a37 100%); box-shadow: 0 32px 90px rgba(5,22,52,.3); }
.quote-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 4px 4px 23px; }
.quote-header h1 { margin: 7px 0 0; font-size: clamp(30px,4vw,45px); line-height: 1.05; font-weight: 610; letter-spacing: -.055em; }
.quote-header p { margin: 9px 0 0; color: rgba(224,233,250,.64); font-size: 15px; }
.head-actions { display: flex; gap: 9px; flex: none; }
.dark-select, .dark-button { min-height: 46px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: #f6f9ff; background: rgba(255,255,255,.075); }
.dark-select { min-width: 164px; padding: 0 36px 0 13px; }
.dark-button { padding: 0 15px; }
.console-block { margin-top: 13px; padding: clamp(18px,2.6vw,25px); border: 1px solid rgba(255,255,255,.095); border-radius: 21px; background: rgba(6,21,46,.54); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); backdrop-filter: blur(18px); }
.block-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.block-heading.split { justify-content: space-between; gap: 20px; }
.heading-group { display: flex; align-items: center; gap: 12px; }
.step { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid rgba(111,181,255,.28); border-radius: 11px; color: #86c5ff; background: rgba(68,151,255,.1); font-size: 11px; font-weight: 760; letter-spacing: .08em; }
.block-heading h2 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.block-heading p { margin: 4px 0 0; color: rgba(220,230,247,.56); font-size: 13px; }
.settings-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; align-items: end; }
.carton-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; }
.freight-settings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 15px; }
.one-field { width: min(360px,100%); }
.field { display: block; min-width: 0; }
.field > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.field > div { position: relative; }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: 0 13px; border: 0; border-radius: 14px; color: var(--foreground); background: var(--secondary); box-shadow: inset 0 0 0 1px var(--border); font-size: 16px; }
.field textarea { min-height: 112px; padding: 13px; resize: vertical; }
.field small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.field > div > small { position: absolute; right: 13px; top: 50%; margin: 0; transform: translateY(-50%); color: var(--blue-deep); font-size: 11px; font-weight: 700; pointer-events: none; }
.field > div > input { padding-right: 58px; }
.field.dark > span { color: rgba(238,244,255,.84); }
.field.dark input, .field.dark select { color: #f7f9ff; background: rgba(121,164,226,.105); box-shadow: inset 0 0 0 1px rgba(171,201,255,.13); }
.field.dark input:focus, .field.dark select:focus { background: rgba(134,180,246,.16); }
.field.dark > div > small { color: #79baff; }
.toggle-pair { display: grid; grid-template-columns: 1fr 1fr; grid-column: span 2; min-height: 50px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(121,164,226,.075); }
.toggle-pair label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; }
.toggle-pair label + label { border-left: 1px solid rgba(255,255,255,.09); }
.toggle-pair strong, .toggle-pair small { display: block; }
.toggle-pair strong { font-size: 13px; }
.toggle-pair small { margin-top: 2px; color: rgba(220,230,247,.48); font-size: 10px; }
.toggle-pair input { width: 39px; height: 23px; margin: 0; accent-color: #52a5ff; }
.mode-pill { padding: 7px 11px; border: 1px solid rgba(102,177,255,.19); border-radius: 999px; color: #99ceff; background: rgba(55,139,255,.1); font-size: 12px; white-space: nowrap; }
.freight-snapshot { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 18px; padding: 6px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(2,13,31,.46); }
.freight-snapshot > div { min-height: 68px; padding: 12px 13px; border-radius: 12px; }
.freight-snapshot span { display: block; color: rgba(219,229,247,.52); font-size: 11px; }
.freight-snapshot strong { display: block; margin-top: 6px; font-size: 16px; font-variant-numeric: tabular-nums; }
.freight-snapshot .take-larger { background: linear-gradient(135deg,rgba(30,105,218,.58),rgba(29,154,225,.34)); }
.light-button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 12px; color: #082046; background: #f4f8ff; font-weight: 650; }
.table-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,.085); border-radius: 15px; background: rgba(3,14,33,.42); }
.quote-table { width: 100%; min-width: 1240px; border-collapse: collapse; }
.quote-table th { height: 46px; padding: 0 9px; border-bottom: 1px solid rgba(255,255,255,.075); color: rgba(224,234,251,.62); background: rgba(108,160,235,.095); font-size: 11px; text-align: left; letter-spacing: .03em; }
.quote-table td { height: 66px; padding: 8px 9px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px; font-variant-numeric: tabular-nums; }
.quote-table tr:last-child td { border-bottom: 0; }
.quote-table input { width: 112px; height: 42px; padding: 0 11px; border: 0; border-radius: 11px; color: #f7f9ff; background: rgba(121,164,226,.105); box-shadow: inset 0 0 0 1px rgba(171,201,255,.13); }
.quote-table .tier { color: #79baff; font-size: 12px; font-weight: 760; letter-spacing: .08em; }
.quote-table .basis { display: block; width: 138px; overflow: hidden; color: rgba(223,233,250,.68); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.quote-table .sell { color: #8bd0ff; font-weight: 650; }
.quote-table .total { color: #d9efff; font-weight: 650; }
.formula-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 3px 0; color: rgba(219,229,247,.48); font-size: 11px; }
.formula-note strong { color: #ffc56e; font-weight: 600; }

.translation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.translation-grid .surface { padding: clamp(22px,4vw,34px); }
.translation-grid h1 { margin: 6px 0 24px; font-size: clamp(30px,5vw,45px); line-height: 1.08; font-weight: 610; letter-spacing: -.055em; }
.form-stack { display: grid; gap: 16px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.primary-button, .outline-button, .icon-button, .text-button { min-height: 46px; padding: 0 18px; border-radius: 13px; border: 0; font-weight: 650; }
.primary-button { color: white; background: linear-gradient(135deg,#2678f2,#155fcf); box-shadow: 0 10px 24px rgba(23,105,232,.2); }
.primary-button.compact { min-height: 44px; }
.outline-button { color: var(--foreground); border: 1px solid var(--border); background: white; }
.text-button { color: var(--muted); background: transparent; }
.form-surface > .primary-button { margin-top: 20px; }
.helper { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.output-surface { display: flex; min-height: 510px; flex-direction: column; }
.output-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.output-heading h2 { margin: 5px 0 0; font-size: 25px; }
.english-output { flex: 1; margin: 22px 0 14px; padding: 22px; overflow: auto; border-radius: 18px; color: var(--foreground); white-space: pre-wrap; background: var(--secondary); font-family: var(--font); font-size: 15px; line-height: 1.75; }
.english-output.empty { display: grid; place-items: center; color: var(--muted); text-align: center; }

.connect-empty { display: grid; min-height: 530px; place-content: center; justify-items: center; padding: 44px; text-align: center; }
.cloud-icon { display: grid; width: 70px; height: 70px; margin-bottom: 20px; place-items: center; border-radius: 22px; color: var(--blue); background: rgba(34,116,242,.1); }
.cloud-icon svg { width: 31px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.connect-empty h1, .library-toolbar h1 { margin: 6px 0 0; font-size: clamp(30px,5vw,45px); line-height: 1.08; font-weight: 610; letter-spacing: -.055em; }
.connect-empty p { max-width: 580px; margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.connect-empty .primary-button { margin-top: 24px; }
.library-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 4px 18px; }
.toolbar-actions { display: flex; gap: 9px; }
.icon-button { width: 46px; padding: 0; color: var(--foreground); border: 1px solid var(--border); background: white; font-size: 24px; }
.sync-label { display: block; width: fit-content; margin-top: 11px; color: #087b45; font-size: 13px; }
.sync-label.syncing { color: var(--blue-deep); }
.sync-label.error { color: var(--danger); }
.library-search { display: flex; align-items: center; gap: 10px; min-height: 58px; margin-bottom: 18px; padding: 0 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); box-shadow: 0 14px 36px rgba(20,29,47,.07); }
.library-search > span { color: var(--blue); font-size: 28px; }
.library-search input { width: 100%; height: 56px; padding: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.library-search button { border: 0; color: var(--muted); background: transparent; }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.product-card { padding: 21px; border: 1px solid var(--border); border-radius: 22px; background: var(--card); box-shadow: 0 16px 38px rgba(20,29,47,.065); }
.product-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asi-code { color: var(--blue-deep); font-size: 12px; font-weight: 720; letter-spacing: .06em; }
.delete-product { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 17px; }
.delete-product:hover { color: var(--danger); background: rgba(214,58,54,.08); }
.product-card h2 { margin: 9px 0 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
.product-cn { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0; }
.tag-list span { padding: 5px 8px; border-radius: 8px; color: var(--blue-deep); background: rgba(31,111,236,.08); font-size: 12px; }
.source-box { display: grid; gap: 8px; margin-top: 16px; padding: 14px; border-radius: 15px; background: var(--secondary); }
.source-box div { display: flex; justify-content: space-between; gap: 12px; }
.source-box span { color: var(--muted); font-size: 13px; }
.source-box strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.product-notes { margin: 13px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 17px; }
.product-actions a, .product-actions button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 12px; text-decoration: none; }
.library-state { display: grid; min-height: 360px; place-content: center; justify-items: center; padding: 36px; border: 1px dashed var(--border); border-radius: 24px; color: var(--muted); text-align: center; background: rgba(127,132,146,.035); }
.library-state strong { color: var(--foreground); font-size: 18px; }
.library-state p { max-width: 460px; margin: 7px 0 17px; line-height: 1.55; }
.library-state.error strong { color: var(--danger); }

.dialog { width: min(92vw,560px); max-height: calc(100vh - 30px); padding: 0; overflow: visible; border: 0; border-radius: 24px; background: transparent; }
.dialog::backdrop { background: rgba(8,14,28,.44); backdrop-filter: blur(7px); }
.dialog-card { position: relative; max-height: calc(100vh - 30px); padding: 26px; overflow-y: auto; border: 1px solid rgba(255,255,255,.55); border-radius: 24px; background: rgba(255,255,255,.97); box-shadow: 0 28px 90px rgba(8,18,40,.24); }
.dialog-card.wide { width: min(92vw,720px); }
.dialog-card.small { width: min(92vw,460px); }
.dialog h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; }
.dialog h2 + p { margin: 8px 35px 22px 0; color: var(--muted); line-height: 1.55; }
.dialog-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--muted); background: var(--secondary); font-size: 23px; line-height: 1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.connected-panel { padding: 17px; border-radius: 17px; background: var(--secondary); }
.connected-panel > span { color: #087b45; font-size: 13px; }
.connected-panel > strong { display: block; margin: 12px 0 4px; font-size: 22px; overflow-wrap: anywhere; }
.connected-panel p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.danger { color: var(--danger); }
.danger-fill { background: var(--danger); box-shadow: none; }
.product-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.product-form-grid .full { grid-column: 1/-1; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 26px 4px 0; color: var(--muted); font-size: 12px; }
.toast { position: fixed; z-index: 30; top: max(18px,env(safe-area-inset-top)); left: 50%; max-width: min(90vw,460px); padding: 12px 16px; border-radius: 14px; color: white; background: rgba(17,21,31,.92); box-shadow: 0 16px 50px rgba(0,0,0,.22); opacity: 0; transform: translate(-50%,-14px); pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.error { background: rgba(177,42,39,.95); }

@media (max-width: 900px) {
  .translation-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .carton-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .freight-settings { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .freight-snapshot { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .app-shell { width: min(100% - 22px,1380px); padding-top: max(10px,env(safe-area-inset-top)); }
  .topbar { min-height: 54px; margin-bottom: 10px; }
  .brand-mark { width: 40px; height: 40px; border-radius: 13px; }
  .workspace-button { width: 44px; padding: 0; justify-content: center; }
  .workspace-button span { display: none; }
  .main-tabs { min-height: 52px; margin-bottom: 10px; }
  .tab-button { padding: 0 6px; gap: 5px; font-size: 13px; }
  .tab-button svg { width: 15px; }
  .quote-console { padding: 13px; border-radius: 22px; }
  .quote-header { align-items: flex-start; flex-direction: column; padding: 4px 3px 17px; }
  .quote-header h1 { font-size: 32px; }
  .quote-header p { max-width: 330px; font-size: 13px; line-height: 1.55; }
  .head-actions { width: 100%; }
  .dark-select { flex: 1; min-width: 0; }
  .console-block { padding: 17px 14px; border-radius: 18px; }
  .block-heading { align-items: flex-start; }
  .block-heading p { line-height: 1.45; }
  .settings-grid, .carton-grid, .freight-settings { grid-template-columns: 1fr; }
  .toggle-pair { grid-column: auto; }
  .freight-snapshot { grid-template-columns: 1fr 1fr; }
  .ladder-block { padding-right: 0; padding-left: 0; }
  .ladder-block .block-heading { padding: 0 14px; }
  .table-scroll { border-right: 0; border-left: 0; border-radius: 0; }
  .formula-note { align-items: flex-start; flex-direction: column; padding: 12px 14px 0; line-height: 1.5; }
  .surface { border-radius: 22px; }
  .translation-grid .surface { padding: 22px 17px; }
  .translation-grid h1, .connect-empty h1, .library-toolbar h1 { font-size: 31px; }
  .two-cols, .product-form-grid { grid-template-columns: 1fr; }
  .product-form-grid .full { grid-column: auto; }
  .output-surface { min-height: 390px; }
  .connect-empty { min-height: 470px; padding: 30px 20px; }
  .library-toolbar { align-items: flex-start; padding-top: 14px; }
  .primary-button.compact { width: 44px; overflow: hidden; padding: 0; font-size: 0; }
  .primary-button.compact::first-letter { font-size: 20px; }
  .product-card { padding: 18px; }
  .product-actions { grid-template-columns: 1fr; }
  .dialog-card { padding: 23px 18px; }
  .site-footer { flex-direction: column; gap: 5px; padding-bottom: max(8px,env(safe-area-inset-bottom)); }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --background:#0d0e12; --foreground:#f4f5f7; --card:rgba(25,26,31,.92); --secondary:#25262c; --muted:#aaacb5; --border:rgba(255,255,255,.1); --blue:#86a7ff; --blue-deep:#abc1ff; --shadow:0 24px 70px rgba(0,0,0,.35); }
  .main-tabs { background: rgba(35,36,42,.88); }
  .tab-button.active, .outline-button, .icon-button { background: #24252b; }
  .dialog-card { background: rgba(28,29,35,.98); border-color: rgba(255,255,255,.1); }
  .workspace-button.connected, .sync-label { color: #76dfa7; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }