:root {
  --ink: #19332d;
  --ink-soft: #456057;
  --paper: #f6f1e7;
  --paper-deep: #ede6d8;
  --card: #fffdf8;
  --leaf: #2d6a4f;
  --leaf-deep: #21503b;
  --moss: #6b8e5a;
  --mint: #e6f0e7;
  --sand: #e5d9c2;
  --line: #ded6c8;
  --coral: #c9533e;
  --coral-soft: #f8e6e0;
  --gold: #b6802c;
  --gold-soft: #f7edcf;
  --blue: #5276a5;
  --shadow: 0 18px 45px rgba(25, 51, 45, .09);
  --font-ui: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans Thai", sans-serif;
  --font-display: "Fraunces", Georgia, "Noto Serif Thai", serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #d89c3d; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 50; top: -100px; left: 20px; padding: 10px 14px; background: var(--ink); color: white; border-radius: 10px; }
.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.side-rail { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 248px; min-height: 100vh; padding: 28px 16px 18px; background: var(--ink); color: #eef1e8; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 34px; color: white; letter-spacing: .12em; }
.brand strong { display: block; font-family: var(--font-display); font-size: 1.18rem; letter-spacing: .11em; line-height: 1; }
.brand small { display: block; margin-top: 5px; color: #a7c3b6; font-size: .52rem; font-weight: 700; letter-spacing: .18em; }
.brand-mark { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 26px; height: 17px; transform: rotate(-8deg); }
.brand-mark i { display: block; border: 2px solid #d4e5ce; border-radius: 11px 2px 11px 2px; }
.brand-mark i:last-child { transform: rotate(180deg); }
.side-nav { display: grid; gap: 4px; }
.nav-label { padding: 25px 12px 7px; color: #88a69a; font-size: .64rem; font-weight: 700; letter-spacing: .13em; }
.nav-item { display: grid; grid-template-columns: 23px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: #c7d8d0; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.nav-item.active { background: #eef2e8; color: var(--ink); box-shadow: 0 5px 16px rgba(0,0,0,.17); }
.nav-icon { font-size: 1.05rem; font-weight: 700; text-align: center; opacity: .9; }
.nav-item b { display: grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; border-radius: 999px; background: rgba(255,255,255,.12); color: white; font-size: .65rem; }
.nav-item.active b { background: var(--ink); color: white; }
.nav-item b.leaf { background: #79ad81; color: #0e351f; }.nav-item b.alert { background: #f09d89; color: #61281e; }
.rail-footer { margin-top: auto; }
.help-card { margin: 18px 6px 14px; padding: 14px; border: 1px solid #446357; border-radius: 14px; background: #234338; }
.help-card .spark { color: #d7e5b7; font-size: 1.1rem; }.help-card p { margin: 7px 0; color: #c7d8d0; font-size: .7rem; line-height: 1.48; }.help-card button { padding: 0; border: 0; background: transparent; color: #e8eedc; font-size: .7rem; font-weight: 700; cursor: pointer; }.help-card button span { margin-left: 5px; }
.profile { display: grid; grid-template-columns: 35px 1fr 12px; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; color: white; text-align: left; cursor: pointer; }.profile:hover { background: rgba(255,255,255,.06); }.profile strong,.profile small { display: block; }.profile strong { font-size: .72rem; }.profile small { margin-top: 2px; color: #9eb9ae; font-size: .63rem; }.avatar { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; background: #e5c985; color: var(--ink); font-size: .64rem; font-weight: 700; }

.workspace { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 0 clamp(24px, 4vw, 60px); border-bottom: 1px solid var(--line); background: rgba(246, 241, 231, .94); backdrop-filter: blur(12px); }
.crumb { display: grid; gap: 3px; }.crumb span:last-child { color: var(--ink-soft); font-size: .77rem; }.eyebrow { margin: 0; color: #70837b; font-size: .64rem; font-weight: 700; letter-spacing: .15em; line-height: 1.2; }.eyebrow.coral { color: var(--coral); }
.topbar-actions { display: flex; align-items: center; gap: 9px; }.demo-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #d5dece; border-radius: 999px; color: var(--leaf); font-size: .58rem; font-weight: 700; letter-spacing: .08em; }.demo-chip i { width: 6px; height: 6px; border-radius: 50%; background: #54a56b; }
.icon-button, .round-button, .menu-toggle { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; transition: transform .18s ease, background .18s ease; }.icon-button:hover,.round-button:hover,.menu-toggle:hover { transform: translateY(-1px); background: white; }.notification { position: relative; }.notification b { position: absolute; top: -5px; right: -4px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: .56rem; }.menu-toggle { display: none; border-radius: 9px; }

.content { max-width: 1580px; margin: auto; padding: 48px clamp(24px, 4vw, 60px) 60px; }.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }.hero-row h1 { max-width: 710px; margin: 7px 0 10px; font-family: var(--font-display); font-size: clamp(2.35rem, 4.7vw, 4.25rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; }.hero-row h1 em { color: var(--leaf); font-style: italic; }.subhead { max-width: 590px; margin: 0; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }.hero-meta { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; color: var(--ink-soft); font-size: .72rem; white-space: nowrap; }.hero-meta button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); cursor: pointer; }

.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }.signal-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; min-height: 128px; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 6px 14px rgba(25,51,45,.025); transition: transform .18s ease, box-shadow .18s ease; }.signal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.signal-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; font-weight: 700; }.ready .signal-icon { background: var(--mint); color: var(--leaf); }.neutral .signal-icon { background: #eaf0f5; color: var(--blue); }.warn .signal-icon { background: var(--gold-soft); color: var(--gold); }.danger .signal-icon { background: var(--coral-soft); color: var(--coral); }.signal-copy { display: grid; gap: 4px; }.signal-copy small { color: var(--ink-soft); font-size: .68rem; }.signal-copy strong { font-size: 1.56rem; line-height: 1; letter-spacing: -.04em; }.signal-copy strong em { font-size: .68rem; font-style: normal; font-weight: 600; letter-spacing: 0; }.signal-copy span { color: #77857e; font-size: .62rem; line-height: 1.35; }.arrow { color: #82938c; font-size: 1.1rem; }

.focus-card { position: relative; display: grid; grid-template-columns: 138px minmax(0, 1fr) auto; align-items: center; gap: 24px; overflow: hidden; min-height: 177px; margin-bottom: 16px; padding: 26px 28px; border-radius: 22px; background: var(--ink); color: white; box-shadow: var(--shadow); }.focus-art { position: relative; width: 120px; height: 100px; }.orb { position: absolute; border-radius: 50%; opacity: .9; }.orb.one { top: 6px; left: 16px; width: 68px; height: 68px; background: #8caa72; }.orb.two { right: 7px; bottom: 0; width: 55px; height: 55px; background: #e1b86b; }.focus-box { position: absolute; top: 27px; left: 37px; display: grid; width: 55px; height: 55px; place-items: center; border: 1px solid #fbf5e7; border-radius: 15px; background: #2c5645; color: #fbf5e7; font-size: 1.7rem; transform: rotate(-9deg); }.focus-copy { position: relative; z-index: 1; }.focus-copy .eyebrow { color: #afcabb; }.focus-copy h2 { margin: 5px 0 5px; font-family: var(--font-display); font-size: clamp(1.45rem,2.2vw,2.05rem); letter-spacing: -.025em; }.focus-copy p:not(.eyebrow) { max-width: 630px; margin: 0; color: #c5d6cd; font-size: .79rem; line-height: 1.55; }.focus-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.focus-tags span { padding: 4px 8px; border: 1px solid #527565; border-radius: 999px; color: #d4e2d4; font-size: .62rem; }.focus-action { position: relative; z-index: 1; display: grid; gap: 8px; min-width: 142px; }.button { min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; font-size: .73rem; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }.button:hover { transform: translateY(-1px); }.button.primary { background: #eff4e8; color: var(--ink); box-shadow: 0 5px 15px rgba(0,0,0,.16); }.button.primary span { margin-left: 7px; }.button.quiet { border-color: #5d7d6e; background: transparent; color: #dbe8dc; }

.workspace-grid { display: grid; grid-template-columns: minmax(560px, 1.45fr) minmax(320px, .8fr); gap: 16px; }.right-stack { display: grid; gap: 16px; }.bottom-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 16px; margin-top: 16px; }.panel { min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 6px 14px rgba(25,51,45,.025); }.packing-panel,.stock-panel,.sync-panel { padding: 22px; }.exception-panel,.channel-panel { padding: 21px; }.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }.panel-head.compact { margin-bottom: 13px; }.panel h2 { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.38rem; letter-spacing: -.02em; }.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--leaf); font-size: .68rem; font-weight: 700; white-space: nowrap; cursor: pointer; }.text-button span { margin-left: 5px; }.round-button { flex: 0 0 auto; color: var(--leaf); }
.queue-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: #f0ece3; }.tab { min-height: 31px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #77847d; font-size: .66rem; font-weight: 700; cursor: pointer; }.tab b { margin-left: 3px; font-size: .59rem; }.tab.active { background: white; color: var(--ink); box-shadow: 0 2px 7px rgba(25,51,45,.09); }.order-list { margin-top: 12px; }.order-row { display: grid; grid-template-columns: 30px minmax(150px,1fr) auto auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid #eee8dc; }.order-row:last-child { border-bottom: 0; }.channel { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; font-size: .7rem; font-weight: 700; }.shopee { background: #fce5df; color: #cf513b; }.lazada { background: #e5ecfc; color: #4b6fbc; }.tiktok { background: #e7f3ef; color: #247f68; }.order-id { min-width: 0; }.order-id strong,.order-id small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.order-id strong { font-size: .69rem; }.order-id small { margin-top: 3px; color: #7a8881; font-size: .61rem; }.status { padding: 5px 7px; border-radius: 999px; font-size: .59rem; font-weight: 700; white-space: nowrap; }.ready-status { background: var(--mint); color: var(--leaf); }.wait-status { background: var(--gold-soft); color: #8a652a; }.row-button { min-width: 55px; min-height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: .62rem; font-weight: 700; cursor: pointer; }.row-button:hover { border-color: var(--leaf); color: var(--leaf); }.row-button span { margin-left: 3px; }.row-button.muted { color: #a06b1a; }.load-more { display: block; width: 100%; margin-top: 9px; padding-top: 13px; border: 0; border-top: 1px solid #eee8dc; background: transparent; color: var(--ink-soft); font-size: .67rem; font-weight: 700; cursor: pointer; }.load-more span { margin-left: 5px; }
.exception-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }.exception-list li { display: grid; grid-template-columns: 29px minmax(0,1fr) auto; gap: 9px; align-items: center; }.exception-symbol { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: var(--coral-soft); color: var(--coral); font-weight: 700; }.exception-symbol.retry { background: var(--gold-soft); color: var(--gold); }.exception-list strong,.exception-list small { display: block; }.exception-list strong { font-size: .66rem; line-height: 1.3; }.exception-list small { margin-top: 3px; color: #77857e; font-size: .58rem; line-height: 1.35; }.exception-list button { padding: 4px; border: 0; background: transparent; color: var(--leaf); font-size: .6rem; font-weight: 700; cursor: pointer; }.channel-summary { display: grid; gap: 10px; }.channel-summary > div { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; }.channel-summary strong,.channel-summary small { display: block; }.channel-summary strong { font-size: .67rem; }.channel-summary small { margin-top: 2px; color: #77857e; font-size: .58rem; }.channel-summary b { padding: 4px 6px; border-radius: 999px; font-size: .56rem; }.healthy { background: var(--mint); color: var(--leaf); }.watch { background: var(--gold-soft); color: #946d26; }
.stock-list { display: grid; gap: 3px; }.stock-row { display: grid; grid-template-columns: 42px minmax(170px,1.3fr) minmax(80px,.7fr) 26px; align-items: center; gap: 12px; min-height: 54px; }.product-thumb { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d8cfbd; border-radius: 11px; color: #725d3b; font-size: 1.45rem; }.tortoise { background: linear-gradient(135deg,#d9b66f,#684b29); }.olive { background: linear-gradient(135deg,#c4cf99,#6d7a4f); }.smoke { background: linear-gradient(135deg,#d7e4e8,#596b76); }.stock-copy strong,.stock-copy small { display: block; }.stock-copy strong { font-size: .67rem; }.stock-copy small { margin-top: 3px; color: #77857e; font-size: .59rem; }.stock-meter { height: 7px; overflow: hidden; border-radius: 99px; background: #ece8df; }.stock-meter span { display: block; height: 100%; border-radius: inherit; }.stock-meter.low span { background: var(--coral); }.stock-meter.medium span { background: var(--gold); }.stock-meter.good span { background: var(--leaf); }.stock-row > b { font-size: .78rem; }.sync-timeline { display: grid; gap: 13px; }.sync-item { display: grid; grid-template-columns: 12px minmax(0,1fr) auto; align-items: center; gap: 8px; }.sync-item > span { display: block; width: 8px; height: 8px; border-radius: 50%; }.sync-item.success > span { background: #59a66d; box-shadow: 0 0 0 4px #e6f0e7; }.sync-item.warning > span { background: #d4993e; box-shadow: 0 0 0 4px #f8efd4; }.sync-item strong,.sync-item small { display: block; }.sync-item strong { font-size: .65rem; }.sync-item small { margin-top: 3px; color: #77857e; font-size: .58rem; }.sync-item time { color: var(--ink-soft); font-size: .58rem; white-space: nowrap; }

.toast { position: fixed; z-index: 60; right: 24px; bottom: 22px; max-width: min(370px, calc(100vw - 48px)); padding: 12px 15px; border: 1px solid #cfe0d1; border-radius: 12px; background: var(--ink); color: white; font-size: .73rem; line-height: 1.45; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .2s ease, transform .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }.mock-dialog { position: relative; width: min(450px, calc(100vw - 32px)); padding: 29px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 25px 90px rgba(0,0,0,.24); }.mock-dialog::backdrop { background: rgba(19,36,31,.44); backdrop-filter: blur(2px); }.mock-dialog h2 { margin: 7px 0; font-family: var(--font-display); font-size: 1.8rem; }.mock-dialog p:not(.eyebrow) { margin: 0 0 18px; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }.dialog-close { position: absolute; top: 14px; right: 15px; display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; background: #efebe0; color: var(--ink); font-size: 1.2rem; cursor: pointer; }

@media (max-width: 1210px) { .signal-grid { grid-template-columns: repeat(2, 1fr); }.workspace-grid,.bottom-grid { grid-template-columns: 1fr; }.right-stack { grid-template-columns: 1fr 1fr; }.content { padding-top: 38px; } }
@media (max-width: 940px) { .app-shell { display: block; }.side-rail { inset: 0 auto 0 0; width: min(280px, calc(100vw - 50px)); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 12px 40px rgba(0,0,0,.24); }.side-rail.open { transform: translateX(0); }.workspace { min-height: 100vh; }.menu-toggle { display: grid; }.topbar { min-height: 65px; padding: 0 20px; }.topbar .crumb { margin-right: auto; margin-left: 12px; }.content { padding: 35px 20px 50px; }.hero-row { align-items: flex-start; }.hero-meta { display: none; }.hero-row h1 { font-size: clamp(2.2rem, 8vw, 3.8rem); }.focus-card { grid-template-columns: 90px 1fr; }.focus-art { width: 77px; transform: scale(.72); transform-origin: left center; }.focus-action { grid-column: 2; justify-self: start; display: flex; }.focus-action .button { min-width: 132px; }.rail-footer { padding-bottom: 8px; } }
@media (max-width: 640px) { .topbar-actions .icon-button:first-of-type { display: none; }.demo-chip { font-size: .5rem; }.signal-grid { display: flex; overflow: auto; margin-right: -20px; padding-right: 20px; scroll-snap-type: x mandatory; }.signal-card { flex: 0 0 min(276px, 80vw); scroll-snap-align: start; }.hero-row { margin-bottom: 24px; }.subhead { font-size: .82rem; }.focus-card { display: block; min-height: 0; padding: 22px; }.focus-art { position: absolute; top: -5px; right: -5px; opacity: .48; transform: scale(.65); transform-origin: top right; }.focus-copy { position: relative; }.focus-copy h2 { max-width: 270px; font-size: 1.63rem; }.focus-copy p:not(.eyebrow) { max-width: 310px; }.focus-tags { max-width: 260px; }.focus-action { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }.focus-action .button { min-width: 0; }.right-stack { grid-template-columns: 1fr; }.packing-panel,.stock-panel,.sync-panel,.exception-panel,.channel-panel { padding: 18px; border-radius: 17px; }.panel-head h2 { font-size: 1.2rem; }.order-row { grid-template-columns: 29px minmax(0,1fr) auto; gap: 8px; }.order-row .status { display: none; }.row-button { grid-column: 3; grid-row: 1; }.order-id { grid-column: 2; }.queue-tabs { overflow: auto; }.tab { white-space: nowrap; }.stock-row { grid-template-columns: 38px minmax(0,1fr) 24px; gap: 8px; }.stock-meter { display: none; }.stock-copy small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.sync-item { grid-template-columns: 10px minmax(0,1fr); }.sync-item time { grid-column: 2; }.toast { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }