:root{--ink:#182033;--muted:#6d7483;--line:#e5e8ed;--canvas:#f4f6f8;--panel:#fff;--nav:#172033;--green:#159f6d;--green-soft:#e8f7f1;--amber:#d89a24;--amber-soft:#fff4d8;--blue:#3578d4;--blue-soft:#edf4ff;--rose:#d8566f;--rose-soft:#fff0f3;--shadow:0 12px 36px #1d263812;--radius:18px}*{box-sizing:border-box}html{background:var(--canvas)}body{color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;margin:0;font-family:Noto Sans Thai,Leelawadee UI,Tahoma,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh}.sidebar{z-index:40;color:#eef2f7;background:linear-gradient(#172033,#202a3d);flex-direction:column;width:244px;padding:24px 16px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:12px;padding:2px 8px 28px;display:flex}.brand-mark{color:#241b08;background:linear-gradient(145deg,#f2c462,#d69a27);border-radius:13px;justify-content:center;align-items:center;width:42px;height:42px;font-weight:900;display:inline-flex;box-shadow:inset 0 1px #ffffff8c}.brand-mark.small{border-radius:10px;width:32px;height:32px}.brand span:last-child,.sidebar-user span:nth-child(2){gap:2px;display:grid}.brand strong{letter-spacing:.2px;font-size:16px}.brand small,.sidebar-user small{color:#96a1b5;font-size:11px}.sidebar-nav{gap:6px;display:grid}.nav-item{color:#aeb7c7;border-radius:13px;align-items:center;gap:12px;min-height:60px;padding:9px 12px;transition:all .18s;display:flex}.nav-item:hover{color:#fff;background:#ffffff0e}.nav-item.active{color:#fff;background:#ffffff1a;box-shadow:inset 3px 0 #e1aa40}.nav-icon{width:21px;height:21px}.nav-item span{gap:1px;display:grid}.nav-item strong{font-size:14px}.nav-item small{color:#8390a4;font-size:10px}.sidebar-user{border-top:1px solid #ffffff1a;grid-template-columns:36px 1fr 8px;align-items:center;gap:10px;margin-top:auto;padding:14px 10px 2px;display:grid}.avatar{color:#23310d;background:#a5bd68;border-radius:50%;place-items:center;width:36px;height:36px;font-weight:800;display:grid}.sidebar-user strong{font-size:12px}.online-dot{background:#39d889;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #39d8891f}.workspace{min-height:100vh;margin-left:244px}.topbar{z-index:30;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffeb;justify-content:space-between;align-items:center;gap:20px;height:74px;padding:0 32px;display:flex;position:sticky;top:0}.mobile-brand{align-items:center;gap:8px;display:none}.global-search{border:1px solid var(--line);color:#818999;background:#f8f9fb;border-radius:12px;align-items:center;gap:9px;width:min(440px,45vw);height:42px;padding:0 14px;display:flex}.global-search input{width:100%;color:var(--ink);background:0 0;border:0;outline:0;font-size:13px}.search-glyph{font-size:23px;line-height:1;transform:rotate(-15deg)}.topbar-actions{align-items:center;gap:10px;display:flex}.pilot-chip,.date-chip,.subtle-chip{border-radius:999px;font-weight:700}.pilot-chip{color:#80601c;background:var(--amber-soft);letter-spacing:1px;padding:5px 9px;font-size:9px}.date-chip{color:#555d6c;background:#f2f4f7;padding:8px 12px;font-size:11px}.main-content{max-width:1580px;margin:0 auto;padding:30px 32px 70px}.page-header{justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:24px;display:flex}.page-header h1{letter-spacing:-.7px;margin:2px 0 4px;font-size:clamp(25px,3vw,34px);line-height:1.2}.page-header>div>p:last-child{color:var(--muted);margin:0;font-size:13px}.eyebrow{color:#9a7228;letter-spacing:1.5px;margin:0;font-size:9px;font-weight:900}.page-actions{gap:9px;display:flex}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px;display:grid}.metric-card{border-radius:var(--radius);color:#fff;min-height:150px;box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden}.metric-card:after{content:"";border:22px solid #ffffff1c;border-radius:50%;width:120px;height:120px;position:absolute;bottom:-53px;right:-44px}.metric-card.tone-green{background:linear-gradient(135deg,#20b77d,#098b60)}.metric-card.tone-orange{background:linear-gradient(135deg,#efa83a,#d98319)}.metric-card.tone-blue{background:linear-gradient(135deg,#438de8,#286dcc)}.metric-card.tone-rose{background:linear-gradient(135deg,#ee6b81,#d64664)}.metric-card p{opacity:.9;margin:2px 0 10px;font-size:12px;font-weight:700}.metric-card>strong{margin-bottom:10px;font-size:clamp(25px,3vw,34px);line-height:1;display:block}.metric-card small{opacity:.78;font-size:10px}.metric-icon{background:#ffffff29;border-radius:50%;width:36px;height:36px;padding:8px;position:absolute;top:17px;right:18px}.metric-icon svg{width:100%;height:100%}.dashboard-grid{grid-template-columns:1.15fr 1.15fr .9fr;gap:16px;display:grid}.panel{border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);border:1px solid #eaecf0}.span-2{grid-column:span 2}.panel-heading{justify-content:space-between;align-items:center;gap:14px;padding:20px 22px 15px;display:flex}.panel-heading h2,.form-title h2,.batch-card h2{margin:2px 0 0;font-size:16px}.text-link{color:#956f26;font-size:11px;font-weight:800}.text-link:hover{color:#5d4213}.subtle-chip{color:#767e8d;background:#f4f5f7;padding:6px 10px;font-size:10px}.count-badge{color:#9e374a;background:var(--rose-soft);border-radius:999px;place-items:center;min-width:24px;height:24px;padding:0 6px;font-size:10px;font-weight:900;display:grid}.stock-bars{gap:14px;padding:0 22px 20px;display:grid}.stock-bar-row{grid-template-columns:minmax(150px,1fr) 2.2fr 86px;align-items:center;gap:16px;display:grid}.stock-name,.stock-number{display:grid}.stock-name strong{white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.stock-name small,.stock-number small{color:#969dab;font-size:9px}.stock-number{text-align:right}.stock-number strong{font-size:13px}.bar-track,.progress-track{background:#edf0f3;border-radius:99px;height:7px;overflow:hidden}.bar-track span,.progress-track span{border-radius:inherit;background:linear-gradient(90deg,#d9b45d,#efc868);height:100%;display:block}.bar-track span.low{background:linear-gradient(90deg,#dc536b,#f27b8f)}.alert-list{gap:8px;padding:0 18px 17px;display:grid}.alert-row{background:#f8f9fb;border-radius:12px;grid-template-columns:8px 1fr;align-items:start;gap:10px;padding:11px 12px;display:grid}.alert-row.critical{background:var(--rose-soft)}.alert-row.warning{background:var(--amber-soft)}.alert-row.info{background:var(--blue-soft)}.alert-dot{background:#5585cc;border-radius:50%;width:7px;height:7px;margin-top:5px}.critical .alert-dot{background:var(--rose)}.warning .alert-dot{background:var(--amber)}.alert-row div{gap:2px;display:grid}.alert-row strong{font-size:11px}.alert-row small{color:#747c8a;font-size:9px;line-height:1.45}.empty-state{color:#8991a0;text-align:center;padding:28px;font-size:12px}.batch-list,.round-list{gap:10px;padding:0 20px 18px;display:grid}.batch-row{border-bottom:1px solid #f0f1f3;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:10px 0;display:grid}.batch-row:last-child{border:0}.batch-token{color:#89621a;background:var(--amber-soft);border-radius:11px;place-items:center;width:38px;height:38px;font-size:8px;font-weight:900;display:grid}.batch-row div{gap:2px;display:grid}.batch-row strong{font-size:11px}.batch-row small{color:#9299a6;font-size:9px}.status{white-space:nowrap;border-radius:999px;width:fit-content;padding:5px 8px;font-size:9px;font-weight:900;display:inline-flex}.status-planned,.status-pending,.status-open{color:#8b681c;background:var(--amber-soft)}.status-in_progress{color:#2463a8;background:var(--blue-soft)}.status-completed,.status-packed{color:#137552;background:var(--green-soft)}.round-card{border:1px solid #edf0f3;border-radius:13px;grid-template-columns:58px 1fr 38px;align-items:center;gap:12px;padding:12px;display:grid}.round-time{display:grid}.round-time strong{font-size:16px}.round-time small{color:#989fac;font-size:8px}.round-progress{gap:6px;display:grid}.round-progress>div:first-child{justify-content:space-between;font-size:9px;display:flex}.round-progress strong{font-size:10px}.progress-track span{background:var(--green)}.round-percent{color:#6e7685;font-size:10px;font-weight:800}.button{border:0;border-radius:11px;justify-content:center;align-items:center;gap:7px;min-height:39px;padding:9px 15px;font-size:11px;font-weight:900;transition:all .15s;display:inline-flex}.button:hover{filter:brightness(.98);transform:translateY(-1px)}.button:disabled{cursor:not-allowed;opacity:.45;transform:none}.button.primary{color:#302309;background:linear-gradient(135deg,#f3ca6a,#dba43b)}.button.dark{color:#fff;background:#263247}.button.success{color:#fff;background:var(--green)}.button.secondary{color:#4e5665;border:1px solid var(--line);background:#fff}.button.tiny{color:#fff;background:#263247;min-height:30px;padding:6px 10px;font-size:9px}.form-grid{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;display:grid}.operation-form{align-content:start;gap:13px;padding:20px;display:grid}.formula-form{border:1px solid var(--line);background:var(--surface-soft);border-radius:18px;max-width:760px;margin:28px auto 4px}.form-title{align-items:center;gap:11px;margin-bottom:3px;display:flex}.form-title p{color:var(--muted);margin:2px 0 0;font-size:10px}.form-icon{border-radius:11px;place-items:center;width:38px;height:38px;padding:9px;font-size:16px;font-weight:900;display:grid}.form-icon svg{width:20px;height:20px}.form-icon.green{color:var(--green);background:var(--green-soft)}.form-icon.amber{color:#956d1c;background:var(--amber-soft)}.form-icon.blue{color:var(--blue);background:var(--blue-soft)}.operation-form label{color:#626a79;gap:5px;font-size:10px;font-weight:800;display:grid}.operation-form input,.operation-form select,.operation-form textarea{width:100%;min-height:40px;color:var(--ink);background:#fbfcfd;border:1px solid #dfe3e8;border-radius:10px;outline:0;padding:9px 11px;font-size:11px}.operation-form textarea{resize:vertical;line-height:1.5}.form-error{color:#9a3030;background:#fff0f0;border-radius:10px;margin:0;padding:10px 12px;font-size:11px;font-weight:800}.operation-form input:focus,.operation-form select:focus,.operation-form textarea:focus{border-color:#d1a44a;box-shadow:0 0 0 3px #d1a44a1f}.field-grid{gap:10px;display:grid}.field-grid.two{grid-template-columns:1fr 1fr}.field-grid.three,.production-forms{grid-template-columns:repeat(3,1fr)}.compact-form{min-height:346px}.packing-forms{grid-template-columns:1.45fr .75fr}.dropzone{text-align:center;cursor:pointer;background:#f8fafb;border-radius:13px;align-content:center;justify-items:center;min-height:132px;padding:20px;border:1.5px dashed #cdd3dc!important}.dropzone svg{width:27px;height:27px;color:var(--blue)}.dropzone strong{color:var(--ink);font-size:12px}.dropzone input{background:0 0;min-height:auto;padding:6px;font-size:9px}details summary{cursor:pointer;color:#7a8290;font-size:10px;font-weight:800}details[open] summary{margin-bottom:8px}.table-panel{overflow:hidden}.responsive-table{overflow-x:auto}table{border-collapse:collapse;width:100%}th{color:#858d9b;text-align:left;letter-spacing:.4px;background:#fafbfc;padding:11px 18px;font-size:9px}td{border-top:1px solid #eef0f2;padding:13px 18px;font-size:11px}td:first-child{min-width:210px}td:first-child strong,td:first-child small{display:block}td:first-child small,td small{color:#989fac;font-size:9px}.type-chip,.health{border-radius:7px;padding:4px 7px;font-size:8px;font-weight:900;display:inline-flex}.type-fg{color:#176c50;background:var(--green-soft)}.type-rm{color:#8a651d;background:var(--amber-soft)}.type-pm{color:#2e66a6;background:var(--blue-soft)}.health.good{color:#147452;background:var(--green-soft)}.health.low{color:#a5384d;background:var(--rose-soft)}.batch-board,.round-board{gap:14px;display:grid}.batch-card{padding:21px}.batch-card-top{justify-content:space-between;gap:16px;display:flex}.batch-card-top small{color:#9198a5;font-size:9px}.batch-metrics{background:#edf0f3;border:1px solid #edf0f3;border-radius:13px;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:18px;display:grid;overflow:hidden}.batch-metrics>div{background:#fbfcfd;gap:3px;padding:14px;display:grid}.batch-metrics span{color:#868e9b;font-size:9px}.batch-metrics strong{font-size:16px}.batch-metrics small{color:#999fac;font-size:8px}.pack-round{overflow:hidden}.pack-round-header{border-bottom:1px solid #edf0f3;grid-template-columns:78px 1fr 58px;align-items:center;gap:17px;padding:20px 22px;display:grid}.time-block{color:#8b6217;background:var(--amber-soft);border-radius:15px;align-content:center;place-items:center;height:64px;display:grid}.time-block strong{font-size:20px;line-height:1}.time-block small{margin-top:4px;font-size:8px}.pack-round-header h2{margin:3px 0;font-size:16px}.pack-round-header p:last-child{color:var(--muted);margin:0;font-size:10px}.completion-ring{--progress:0deg;background:conic-gradient(var(--green) var(--progress), #edf0f3 0);border-radius:50%;place-items:center;width:54px;height:54px;display:grid;position:relative}.completion-ring:before{content:"";background:#fff;border-radius:50%;position:absolute;inset:5px}.completion-ring span{z-index:1;font-size:9px;font-weight:900;position:relative}.task-list{padding:0 22px 18px}.task-head,.task-row{grid-template-columns:minmax(220px,2fr) 1fr .7fr .8fr;align-items:center;gap:14px;display:grid}.task-head{color:#9299a6;padding:11px 0;font-size:9px}.task-row{border-top:1px solid #edf0f3;min-height:58px;font-size:10px}.task-row>div:first-child{align-items:center;gap:9px;display:flex}.task-row>div:first-child>span:last-child{gap:1px;display:grid}.task-row small{color:#9299a6;font-size:8px}.channel-mark{color:#fff;background:#222;border-radius:9px;place-items:center;width:28px;height:28px;font-size:10px;font-weight:900;display:grid}.channel-mark.shopee{background:#ef623f}.channel-mark.tiktok,.channel-mark.tiktok-affiliate{background:#1c2432}.liff-workboard{max-width:720px;margin:0 auto}.liff-session{color:#356d5a;background:var(--green-soft);border-radius:999px;margin:-10px 0 14px;padding:6px 9px;font-size:9px;font-weight:800;display:inline-flex}.liff-hero{color:#fff;min-height:170px;box-shadow:var(--shadow);background:linear-gradient(135deg,#1c2a43,#263b5a);border-radius:22px;padding:24px;position:relative;overflow:hidden}.liff-hero:after{content:"";border:28px solid #ffffff0d;border-radius:50%;width:190px;height:190px;position:absolute;top:-80px;right:-65px}.liff-hero div{color:#aeb9c9;align-items:center;gap:8px;font-size:10px;display:flex}.live-dot{background:#35d78b;border-radius:50%;width:7px;height:7px}.liff-hero>strong{margin-top:21px;font-size:43px;line-height:1;display:block}.liff-hero>p{color:#b9c3d2;margin:7px 0 0;font-size:11px}.quick-work-grid{gap:10px;margin:14px 0;display:grid}.quick-work{border:1px solid var(--line);min-height:78px;box-shadow:var(--shadow);background:#fff;border-radius:16px;grid-template-columns:42px 1fr 18px;align-items:center;gap:12px;padding:15px;display:grid}.quick-work>svg{border-radius:12px;width:42px;height:42px;padding:10px}.quick-work.blue>svg{color:var(--blue);background:var(--blue-soft)}.quick-work.green>svg{color:var(--green);background:var(--green-soft)}.quick-work.amber>svg{color:#9c721f;background:var(--amber-soft)}.quick-work span{gap:2px;display:grid}.quick-work strong{font-size:12px}.quick-work small{color:#8a929f;font-size:9px}.quick-work b{color:#8f96a2}.mobile-alerts{padding-bottom:12px}.mobile-alerts .alert-row{margin:0 15px 8px}.line-login-state{gap:10px;padding:24px;display:grid}.line-login-state p{color:var(--muted);margin:0;font-size:11px;line-height:1.65}.line-login-state .button{width:fit-content;margin-top:4px}.line-readiness-grid{grid-template-columns:.65fr 1.35fr;gap:16px;margin-bottom:16px;display:grid}.line-readiness-summary{align-content:center;justify-items:start;min-height:170px;padding:22px;display:grid}.line-readiness-summary>strong{margin-top:15px;font-size:38px;line-height:1}.line-readiness-summary>p{color:var(--muted);margin:5px 0 0;font-size:10px}.line-status{border-radius:99px;padding:6px 9px;font-size:9px;font-weight:900;display:inline-flex}.line-status.ready{color:#137552;background:var(--green-soft)}.line-status.pending{color:#8b681c;background:var(--amber-soft)}.line-endpoints{align-content:center;gap:7px;min-height:170px;padding:22px;display:grid}.line-endpoints small{color:var(--muted);font-size:9px}.line-endpoints strong{overflow-wrap:anywhere;font-size:12px}.line-endpoints small:not(:first-child){margin-top:10px}.line-config-panel{margin-bottom:16px}.line-config-list{gap:8px;padding:0 22px 20px;display:grid}.line-config-list>div{background:#f8f9fb;border-radius:12px;grid-template-columns:9px 1fr auto;align-items:center;gap:11px;min-height:54px;padding:10px 12px;display:grid}.line-config-list span:nth-child(2){gap:2px;display:grid}.line-config-list strong{font-size:11px}.line-config-list small{color:var(--muted);font-size:9px}.line-config-list b{color:#8b681c;font-size:9px}.config-dot{background:var(--amber);border-radius:50%;width:8px;height:8px}.config-dot.ready{background:var(--green)}.config-dot.ready~b{color:var(--green)}.rich-menu-panel{margin-bottom:16px;padding:22px}.rich-menu-content{grid-template-columns:minmax(230px,.75fr) minmax(420px,1.25fr);align-items:center;gap:24px;margin-top:18px;display:grid}.rich-menu-copy{justify-items:start;gap:13px;display:grid}.rich-menu-copy p{color:var(--muted);margin:0;font-size:11px;line-height:1.65}.rich-menu-copy small{color:#8892a1;font-size:9px;line-height:1.55}.rich-menu-preview{width:100%;height:auto;box-shadow:var(--shadow);border:1px solid #243b5c;border-radius:14px;display:block}.line-account-grid{grid-template-columns:.8fr 1.2fr}.tiny-button{min-height:30px;padding:5px 9px;font-size:9px}code{color:#365272;background:var(--blue-soft);border-radius:5px;padding:3px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.mobile-nav{display:none}@media (max-width:1120px){.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.span-2,.alert-panel{grid-column:span 2}.production-forms{grid-template-columns:1fr 1fr}.production-forms form:last-child{grid-column:span 2}}@media (max-width:760px){.sidebar{display:none}.workspace{margin-left:0}.topbar{height:62px;padding:0 16px}.mobile-brand{display:flex}.global-search,.date-chip{display:none}.main-content{padding:20px 14px 92px}.page-header{align-items:flex-start}.page-header h1{font-size:25px}.page-header>div>p:last-child{font-size:11px;line-height:1.55}.metric-grid{grid-template-columns:1fr 1fr;gap:10px}.metric-card{min-height:136px;padding:17px}.metric-card>strong{font-size:25px}.dashboard-grid{grid-template-columns:1fr}.span-2,.alert-panel{grid-column:span 1}.stock-bar-row{grid-template-columns:1fr 72px}.bar-track{grid-area:2/1/auto/-1}.form-grid,.production-forms,.packing-forms{grid-template-columns:1fr}.production-forms form:last-child{grid-column:span 1}.compact-form{min-height:auto}.field-grid.three,.batch-metrics{grid-template-columns:1fr 1fr}.pack-round-header{grid-template-columns:66px 1fr}.completion-ring,.task-head{display:none}.task-row{grid-template-columns:1fr auto;gap:7px 12px;padding:12px 0}.task-row>span:nth-child(2),.task-row>strong{color:#7e8694;font-size:9px}.line-readiness-grid,.line-account-grid,.rich-menu-content{grid-template-columns:1fr}.mobile-nav{z-index:60;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fffffff0;border:1px solid #e1e4eae6;border-radius:18px;grid-auto-columns:1fr;grid-auto-flow:column;height:66px;padding:7px 10px;display:grid;position:fixed;bottom:9px;left:10px;right:10px;box-shadow:0 15px 40px #151d2c33}.mobile-nav a{color:#858d9c;align-content:center;place-items:center;gap:2px;font-size:8px;font-weight:800;display:grid}.mobile-nav svg{width:20px;height:20px}.mobile-nav a.active{color:#9a7020}.liff-workboard .page-header .page-actions{display:none}}@media (max-width:430px){.metric-grid{grid-template-columns:1fr}.metric-card{min-height:125px}.field-grid.two,.field-grid.three{grid-template-columns:1fr}.page-actions{display:none}}