@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#f3f5f9; --bg-soft:#eef1f6; --card:#ffffff; --ink:#151b28; --mut:#6b7684; --mut-2:#98a2b3;
  --line:#e6e9ef; --line-soft:#eef0f4;
  --pri:#7c5cff; --pri-ink:#6342e0; --pri-soft:#efe9ff;
  --ok:#0f9d58; --ok-soft:#e8f8ee;
  --warn:#c2760a; --warn-soft:#fef3e2;
  --bad:#e0363a; --bad-soft:#fdeceb;
  --navy:#0f2a5c;
  --sb1:#2b48d4; --sb2:#1e3bbf; --sb3:#17309e;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(20,25,40,.04), 0 1px 1px rgba(20,25,40,.03);
  --shadow-md:0 4px 14px rgba(20,25,40,.06), 0 1px 2px rgba(20,25,40,.04);
  --shadow-lg:0 12px 32px rgba(20,25,40,.10), 0 2px 6px rgba(20,25,40,.05);
}
:root[data-theme="dark"]{
  --bg:#12142b; --bg-soft:#181b3a; --card:#1c1f3f; --ink:#f1f2fb; --mut:#9195c4; --mut-2:#6d72a0;
  --line:#2b2e54; --line-soft:#242850;
  --pri:#9b81ff; --pri-ink:#b09fff; --pri-soft:#2a2460;
  --ok:#34d399; --ok-soft:#123626;
  --warn:#fbbf24; --warn-soft:#3a2c0d;
  --bad:#fb7185; --bad-soft:#3a1420;
  --navy:#c7d2fe;
  --sb1:#1c1e40; --sb2:#151733; --sb3:#0e0f24;
  --shadow-sm:0 1px 2px rgba(0,0,0,.32), 0 1px 1px rgba(0,0,0,.24);
  --shadow-md:0 4px 14px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter","Noto Sans Thai",-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none;transition:color .15s}
a:hover{color:var(--pri-ink)}
main{max-width:1180px;margin:0 auto;padding:26px 28px 60px}
@media(max-width:640px){main{padding:18px 16px 48px}}
h1{font-size:23px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:18px;font-weight:700;margin:0 0 12px}
h3{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--ink)}
.muted{color:var(--mut)}
.good{color:var(--ok)}
.warn{color:var(--warn)}
.bad,.danger{color:var(--bad)}

/* ---------- shell: sidebar + main ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:none;background:linear-gradient(175deg,var(--sb1) 0%,var(--sb2) 55%,var(--sb3) 100%);
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;z-index:30;
  box-shadow:2px 0 18px rgba(20,35,90,.14);
}
.sidebar .brand{font-weight:700;color:#fff;font-size:15.5px;display:flex;align-items:center;gap:10px;padding:4px 8px 22px}
.logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:11px;background:rgba(255,255,255,.16);font-size:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt small{color:rgba(255,255,255,.62);font-weight:500;font-size:11.5px}
.sidebar .nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar .nav a{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.72);font-weight:600;font-size:14.5px;padding:10px 12px;border-radius:var(--radius-sm);transition:all .15s}
.sidebar .nav a .ico{font-size:16px;width:20px;text-align:center;flex:none}
.sidebar .nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.sidebar .nav a.on{color:#1e3bbf;background:#fff;box-shadow:0 3px 10px rgba(10,20,70,.22)}
.sidebar-foot{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;margin-top:10px}
.sidebar-foot .who{font-size:13px;font-weight:600;padding:0 8px 2px;color:#fff}
.sidebar-foot .lnk{font-size:12.5px;padding:0 8px;display:inline-block;margin-bottom:8px;color:rgba(255,255,255,.75)}
.sidebar-foot .lnk:hover{color:#fff}
.sidebar-foot .ver{font-size:11px;color:rgba(255,255,255,.45);padding:0 8px}
.theme-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:2px 0 10px;padding:9px 12px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:var(--radius-sm);
  color:rgba(255,255,255,.85);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left}
.theme-toggle:hover{background:rgba(255,255,255,.14);color:#fff}
.theme-toggle .tt-ico{font-size:15px;width:18px;text-align:center;flex:none}
.theme-toggle .tt-moon{display:none}
:root[data-theme="dark"] .theme-toggle .tt-sun{display:none}
:root[data-theme="dark"] .theme-toggle .tt-moon{display:inline}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
.backdrop{display:none;position:fixed;inset:0;background:rgba(15,20,30,.4);z-index:25}
.topbar{display:none;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.menu-btn{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-sm);width:38px;height:38px;font-size:17px;cursor:pointer}
.topbar-title{font-weight:700;font-size:15px}
@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-lg)}
  .shell.nav-open .sidebar{transform:translateX(0)}
  .shell.nav-open .backdrop{display:block}
  .topbar{display:flex}
}

/* ---------- cards & layout ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.narrow{max-width:440px;margin:64px auto}
.center{text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid2{grid-template-columns:1fr} main{padding:16px 14px 48px}}
.stack>*{display:block;margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.row>label{flex:1;min-width:140px}
label{display:block;font-size:12.5px;font-weight:600;color:var(--mut);margin-bottom:4px;letter-spacing:.01em}

/* ---------- inputs ---------- */
input,select,textarea{
  width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;background:var(--card);color:var(--ink);transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
input.mini{width:68px;padding:6px 8px;text-align:right;margin:0;border-radius:8px}
input.mini.w{width:96px}
input.w{width:150px}
textarea{resize:vertical;font-family:inherit}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border:1.5px solid var(--line);border-radius:99px;
  background:var(--card);color:var(--ink);font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;transition:transform .08s ease, box-shadow .15s, border-color .15s, background .15s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{border-color:var(--mut-2);box-shadow:var(--shadow-md)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn.primary:hover{background:var(--pri-ink);border-color:var(--pri-ink)}
.btn.big{width:100%;padding:13px;font-size:15.5px;margin-top:6px;border-radius:var(--radius-sm)}
.btn.danger{color:var(--bad);border-color:#f3c9c9}
.btn.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.lnk{background:none;border:none;color:var(--pri);cursor:pointer;font:inherit;font-weight:600;padding:0}
.lnk:hover{text-decoration:underline}
.lnk.danger{color:var(--bad)}
.inl{display:inline}

/* ---------- alerts ---------- */
.alert{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px;border:1px solid transparent}
.alert.ok{background:var(--ok-soft);color:#0b7a43;border-color:#c9ecd7}
.alert.warn{background:var(--warn-soft);color:#8a5606;border-color:#f6dcae}

/* ---------- file drop ---------- */
.drop{border:2px dashed var(--line);border-radius:var(--radius-sm);padding:20px;text-align:center;cursor:pointer;background:var(--bg-soft);transition:border-color .15s,background .15s}
.drop:hover{border-color:var(--pri);background:var(--pri-soft)}
.drop span{display:block;font-size:12px;margin-top:4px;color:var(--mut)}

/* ---------- tables ---------- */
table.list{width:100%;border-collapse:collapse}
table.list td,table.list th{padding:9px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
table.list th{color:var(--mut);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
table.small td,table.small th{font-size:12px;padding:5px 7px}
.r{text-align:right}
.tot td{font-weight:700;background:var(--bg-soft)}
.scroll{overflow-x:auto}
table.list tbody tr:hover{background:var(--bg-soft)}

table.lines{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;font-size:13.5px;overflow:hidden;box-shadow:var(--shadow-sm)}
table.lines th{background:var(--bg-soft);padding:10px 8px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);border-bottom:1px solid var(--line)}
table.lines td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.lines tr:last-child td{border-bottom:none}
table.lines tr.nf td{background:var(--bad-soft)}
table.lines tr.short td{background:var(--warn-soft)}
table.lines tbody tr:not(.nf):not(.short):hover{background:var(--bg-soft)}
.eta div{white-space:nowrap;font-size:12px}

/* ---------- tags / status ---------- */
.tag{display:inline-block;padding:3px 11px;border-radius:99px;font-size:12px;font-weight:600;background:#eef2f7;color:var(--mut)}
.s-checked{background:#e4e9ff;color:#3d4dc4}
.s-quoted{background:#fef1cf;color:#96660a}
.s-confirmed{background:#dbeeff;color:#1668b8}
.s-ordered{background:#ede4ff;color:#6b3fc4}
.s-billed{background:#dcf2ff;color:#0b6c9e}
.s-received{background:#d7f6e6;color:#0a8a4c}
.s-shipped{background:#d3f4fa;color:#0f7f96}
.s-done{background:#dbf6e4;color:#187a41}
.s-cancelled{background:#fbe1e1;color:#ad2a2a}

/* ---------- kpi cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:16px 0}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:box-shadow .15s}
.kpi:hover{box-shadow:var(--shadow-md)}
.kpi small{display:block;color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi b{display:block;font-size:25px;font-weight:700;margin:4px 0;letter-spacing:-.01em}
.kpi.good b{color:var(--ok)}
.kpi.bad b{color:var(--bad)}
.bar{height:8px;background:var(--bg-soft);border-radius:99px;overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),#5b7cfa);border-radius:99px}

/* ---------- status flow ---------- */
.flow{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}
.flow form{display:inline}
.step{padding:7px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--card);font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--mut);transition:all .15s}
.step:hover{border-color:var(--mut-2)}
.step.cur{background:var(--pri);color:#fff;border-color:var(--pri);box-shadow:var(--shadow-sm)}
.step.past{background:var(--ok-soft);color:#0b7a43;border-color:transparent}
.step.danger{color:var(--bad);border-color:#f3c9c9}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 16px}
.toolbar form{display:inline}
.head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:10px}

details.card summary{cursor:pointer;font-weight:700;list-style:none}
details.card summary::before{content:"▸ ";color:var(--mut)}
details.card[open] summary::before{content:"▾ "}
.chk{display:flex;align-items:center;gap:6px}
.chk input{width:auto;margin:0}

img.shot{width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:crosshair;box-shadow:var(--shadow-sm)}
#qres table{margin-top:10px}

/* ---------- wizard-style pages ---------- */
.page-h{margin-bottom:2px}
.page-sub{margin:0 0 20px;font-size:14px}
.wizard{display:flex;gap:22px;align-items:start}
.wizard-form{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}
.wizard-side{width:300px;flex:none;display:flex;flex-direction:column;gap:16px}
@media(max-width:860px){.wizard{flex-direction:column}.wizard-side{width:100%}}
.step-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.step-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:14px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--pri-soft);color:var(--pri);font-size:13px;font-weight:700;flex:none}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab-btn{flex:1;padding:9px 10px;border:1.5px solid var(--line);background:var(--card);border-radius:var(--radius-sm);font:inherit;font-weight:600;font-size:13.5px;color:var(--mut);cursor:pointer;transition:all .15s}
.tab-btn.on{background:var(--pri-soft);color:var(--pri);border-color:var(--pri-soft)}
.tab-pane{}
.side-card h3{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.side-card h3 small{font-weight:500;font-size:11.5px}

/* ---------- kind/rate tags (ลูกค้า) ---------- */
.tag.b2b{background:#ede4ff;color:#6b3fc4}
.tag.b2c{background:#dbeeff;color:#1668b8}
.tag.rate-up{background:var(--warn-soft);color:#8a5606}
.tag.rate-down{background:var(--ok-soft);color:#0b7a43}

/* ---------- connect-status hero (MST/EPC/LINE) ---------- */
.conn-status{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--bg-soft);margin-bottom:4px}
.conn-status .dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--mut-2)}
.conn-status.ok .dot{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.conn-status.warn .dot{background:var(--warn);box-shadow:0 0 0 4px var(--warn-soft)}
.conn-status .txt{flex:1;min-width:0}
.conn-status .txt b{display:block;font-size:14.5px}
.conn-status .txt small{color:var(--mut);font-size:12.5px}

/* ---------- numbered instruction steps (เชื่อมต่อ MST/EPC) ---------- */
ol.steps{list-style:none;padding:0;margin:14px 0;counter-reset:stp}
ol.steps li{counter-increment:stp;position:relative;padding:2px 0 16px 34px;font-size:14px;line-height:1.6}
ol.steps li::before{
  content:counter(stp);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:var(--pri-soft);color:var(--pri);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}
ol.steps li::after{content:"";position:absolute;left:11px;top:24px;bottom:2px;width:1.5px;background:var(--line-soft)}
ol.steps li:last-child::after{display:none}

/* ---------- channel pricing grid (ลูกค้า) ---------- */
.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:14px 0}
.channel-grid .ch-field label{margin-bottom:6px}
.channel-grid .ch-field .pct-wrap{position:relative}
.channel-grid .ch-field input{padding-right:30px}
.channel-grid .ch-field .pct-wrap::after{content:"%";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--mut-2);font-size:13px;pointer-events:none}
.card-sub{margin:-4px 0 14px;font-size:13px}

/* ---------- dashboard: colorful stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0}
.stat-card{
  border-radius:var(--radius);padding:18px 20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);min-height:104px;display:flex;flex-direction:column;justify-content:space-between;
}
.stat-card .stat-ico{font-size:20px;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.stat-card small{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:600;display:block}
.stat-card b{font-size:24px;font-weight:700;letter-spacing:-.01em;display:block;margin-top:2px}
.stat-card .stat-sub{color:rgba(255,255,255,.75);font-size:11.5px;margin-top:3px}
.stat-card.c1{background:linear-gradient(135deg,#9b81ff,#7c5cff)}
.stat-card.c2{background:linear-gradient(135deg,#22c1a4,#0f9d58)}
.stat-card.c3{background:linear-gradient(135deg,#ff9f5a,#e0763a)}
.stat-card.c4{background:linear-gradient(135deg,#c05bd8,#8a3fc4)}
.stat-card .bar{background:rgba(255,255,255,.25)}
.stat-card .bar i{background:#fff}

/* ---------- donut + leaderboard ---------- */
.donut-wrap{display:flex;align-items:center;gap:20px;justify-content:center;padding:6px 0}
.donut-wrap .donut-canvas-box{position:relative;width:140px;height:140px;flex:none}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center b{font-size:22px;font-weight:700}
.donut-center small{color:var(--mut);font-size:11px}
.leaderboard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.leaderboard li{display:flex;align-items:center;gap:10px}
.lb-rank{width:26px;height:26px;border-radius:50%;background:var(--pri-soft);color:var(--pri);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.lb-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-val{font-size:13px;font-weight:700;color:var(--mut)}
.job-chip-row{display:flex;flex-wrap:wrap;gap:8px}
.job-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:var(--bg-soft);font-size:12.5px;font-weight:600}

/* ---------- ช่องทางขาย (channels page) ---------- */
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--pri-soft);border:1px solid #dbe2ff;
  border-radius:var(--radius);padding:14px 16px;margin-bottom:18px}
.callout-ico{font-size:18px;flex:none;line-height:1.4}
.callout b{display:block;font-size:14px;margin-bottom:3px}
.callout p{margin:0;font-size:13px;color:var(--mut);line-height:1.6}

.ch-group{padding:16px 18px}
.ch-group-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ch-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:99px;font-size:13.5px;font-weight:700}
.ch-table{width:100%;border-collapse:collapse}
.ch-table th{text-align:left;color:var(--mut);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:0 8px 8px;border-bottom:1px solid var(--line-soft)}
.ch-table th.r,.ch-table td.r{text-align:right}
.ch-table td{padding:7px 8px;vertical-align:middle}
.ch-table tr:not(:last-child) td{border-bottom:1px solid var(--line-soft)}
.ch-table input{margin:0}
.pct-wrap{position:relative}
.pct-wrap input{padding-right:32px;text-align:right}
.pct-wrap::after{content:"%";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--mut-2);font-size:13px;font-weight:600;pointer-events:none}

.sticky-save{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
.sticky-save .btn.big{margin-top:0}

.link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.link-card b{font-size:14.5px}

/* ---------- ใบเสนอราคา ---------- */
.q-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.q-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.q-tools label{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.q-tools input[type=text],.q-tools input[type=number],.q-tools input:not([type]){border:1px solid var(--line);
  border-radius:8px;padding:6px 8px;font:inherit;font-size:13px}
.q-tools .chk{gap:5px}
.q-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:10px;padding:10px 14px;
  font-size:13.5px;margin-bottom:14px}

.sheet{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:32px 34px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);max-width:940px}
.q-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  border-bottom:2px solid #0f2a5c;padding-bottom:14px}
.q-co{font-size:21px;font-weight:800;color:#0f2a5c;letter-spacing:.2px}
.q-co-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.q-title{text-align:right}
.q-title-th{font-size:22px;font-weight:800;color:#0f2a5c}
.q-title-en{font-size:11px;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase}

.q-meta{width:100%;border-collapse:collapse;margin:16px 0 18px}
.q-meta td{width:50%;padding:4px 0;font-size:13.5px;vertical-align:top}
.q-meta td span{display:inline-block;width:92px;color:var(--muted);font-size:12.5px}
.q-meta td b{font-weight:600;color:var(--ink)}

.q-items{width:100%;border-collapse:collapse;font-size:12.5px}
.q-items thead th{background:#0f2a5c;color:#fff;font-weight:600;padding:9px 8px;text-align:center;
  font-size:12px;white-space:nowrap}
.q-items thead th:first-child{border-radius:6px 0 0 0}
.q-items thead th:last-child{border-radius:0 6px 0 0}
.q-items td{padding:7px 8px;border-bottom:1px solid #eef1f5;vertical-align:top}
.q-items tbody tr:nth-child(even){background:#fafbfd}
.q-items .c-no,.q-items .c-qt,.q-items .c-dc,.q-items .c-st{text-align:center;white-space:nowrap}
.q-items .c-up,.q-items .c-am{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.q-items .c-pn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap}
.q-items .c-am{font-weight:600}
.q-items .row-miss{background:#fff5f5!important;color:#b42318}
.q-items .pill{display:inline-block;min-width:34px;padding:2px 7px;border-radius:99px;font-size:11px;font-weight:600}
.q-items .pill.ok{background:#e7f8ef;color:#067647}
.q-items .pill.low{background:#fff4e5;color:#b54708}
.q-items .pill.zero,.q-items .pill.miss{background:#fee4e2;color:#b42318}

.q-foot{display:flex;gap:26px;justify-content:space-between;margin-top:20px;flex-wrap:wrap}
.q-note{flex:1;min-width:250px;font-size:12px;color:var(--muted)}
.q-note b{color:var(--ink);font-size:12.5px}
.q-note ul{margin:6px 0 0;padding-left:16px;line-height:1.7}
.q-sum{border-collapse:collapse;min-width:280px;font-size:13.5px;align-self:flex-start}
.q-sum td{padding:7px 12px;border-bottom:1px solid #eef1f5}
.q-sum td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;min-width:120px}
.q-sum tr.grand td{background:#0f2a5c;color:#fff;font-size:15px;font-weight:800;border:none}
.q-sum tr.grand td:first-child{border-radius:6px 0 0 6px}
.q-sum tr.grand td:last-child{border-radius:0 6px 6px 0}

.q-sign{display:flex;gap:40px;margin-top:40px;font-size:12.5px;color:var(--muted)}
.q-sign>div{flex:1;text-align:center}
.q-sign .line{display:block;border-top:1px dotted #98a2b3;margin:0 10px 6px}

@media print{
  .sidebar,.topbar,.backdrop,.no-print{display:none!important}
  body{background:#fff}
  .shell,.main-col,main{display:block;margin:0;padding:0;max-width:none}
  .sheet{border:none;box-shadow:none;border-radius:0;padding:0;max-width:none}
  .q-items{font-size:11px}
  .q-items thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .q-items tbody tr{page-break-inside:avoid}
  .q-sum tr.grand td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:14mm 12mm}
}

/* ใบเสนอราคา — ส่วนที่เพิ่มรอบ ETA + ชื่อไทย */
.q-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:10px 14px;
  font-size:13.5px;margin-bottom:14px}
.q-info a{color:#1d4ed8;font-weight:600}
.q-items thead th small{display:block;font-weight:400;font-size:9.5px;opacity:.7;letter-spacing:.3px;margin-top:1px}
.q-items .c-ds .en{color:#667085;font-style:italic}
.q-items .c-eta{text-align:center;white-space:nowrap;font-size:11.5px;color:#b42318}
.q-items .c-eta small{font-size:10px;color:#98a2b3;font-style:normal}
.q-items .c-eta .eta-q{color:#667085;font-weight:400}
.q-items .c-eta .tent{color:#98a2b3}
.q-items .row-short{background:#fff7ed!important}
.q-items .row-short .c-pn,.q-items .row-short .c-am,.q-items .row-short .c-qt{color:#b42318;font-weight:600}

/* คลังชื่ออะไหล่ไทย */
.stat-mini{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:150px}
.stat-mini b{display:block;font-size:22px;font-weight:800;color:var(--navy);line-height:1.2}
.stat-mini span{font-size:12px;color:var(--muted)}
.stat-mini.warn{border-color:#fde68a;background:#fffbeb}
.stat-mini.warn b{color:#b54708}
.pn-tbl td{vertical-align:middle}
.pn-tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.pn-tbl .sm{font-size:11.5px;line-height:1.4}
.btn.sm{padding:5px 10px;font-size:12px}
.ta-r{text-align:right}
.q-items thead th.c-eta{color:#fff}   /* หัวตารางสีขาวเสมอ ไม่เอาสีแดงของเนื้อช่อง ETA */

/* ---------- หน้าใบงาน (ลิสต์) ---------- */
.jb-top{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.jb-stats{display:flex;gap:10px;flex-wrap:wrap}
.jb-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 18px;min-width:120px;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
.jb-stat b{display:block;font-size:19px;font-weight:800;color:var(--navy);line-height:1.25;font-variant-numeric:tabular-nums}
.jb-stat span{font-size:11.5px;color:var(--muted)}
.jb-stat.good b{color:#067647}
.jb-search{display:flex;gap:8px;flex:1;min-width:250px;max-width:460px}
.jb-search input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font:inherit;font-size:13.5px;
  background:var(--card)}
.jb-search input:focus{outline:none;border-color:#3d4dc4;box-shadow:0 0 0 3px rgba(61,77,196,.12)}

.jb-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chip{display:inline-block;padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--muted);text-decoration:none;transition:.15s}
.chip:hover{border-color:#94a3d4;color:var(--navy)}
.chip.on{background:#0f2a5c;border-color:#0f2a5c;color:#fff}

.jb-list{display:flex;flex-direction:column;gap:9px}
.jb-card{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:.15s;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.jb-card:hover{border-color:#94a3d4;box-shadow:0 4px 14px rgba(16,24,40,.09);transform:translateY(-1px)}
.jb-main{flex:1;display:flex;align-items:center;gap:16px;padding:14px 16px;text-decoration:none;color:inherit;min-width:0}
.jb-id{font-weight:800;color:#94a3d4;font-size:14px;min-width:38px;font-variant-numeric:tabular-nums}
.jb-who{flex:1;min-width:0}
.jb-who b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.jb-sub{display:flex;gap:9px;flex-wrap:wrap;margin-top:3px;font-size:11.5px;color:var(--muted)}
.jb-sub .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg-soft);border-radius:5px;padding:1px 6px;
  color:#475467}
.jb-sub .mst{color:#6b3fc4;font-weight:600}
.jb-items{text-align:center;min-width:76px}
.jb-items b{display:block;font-size:17px;font-weight:700;color:var(--ink);line-height:1.2}
.jb-items span{font-size:11px;color:var(--muted)}
.jb-items em{display:block;font-style:normal;font-size:10.5px;font-weight:600;margin-top:2px}
.jb-items em.bad{color:#b42318}
.jb-items em.warn{color:#b54708}
.jb-money{text-align:right;min-width:118px}
.jb-money b{display:block;font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.jb-money span{font-size:11.5px;color:var(--muted)}
.jb-money span.good{color:#067647;font-weight:600}
.jb-quote{display:flex;align-items:center;justify-content:center;width:54px;font-size:19px;text-decoration:none;
  background:#f8fafc;border-left:1px solid var(--line);transition:.15s}
.jb-quote:hover{background:#0f2a5c}

.jb-empty{text-align:center;padding:52px 20px;background:var(--card);border:1px dashed var(--line);border-radius:14px}
.jb-empty-ico{font-size:38px;opacity:.45;margin-bottom:8px}
.jb-empty b{display:block;font-size:15px;color:var(--ink)}



/* ขั้นตอนสั่งซื้อในหน้าใบงาน */
.po-box{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.po-out{background:#f0f9f4;border:1px solid #bbf0d0;border-radius:10px;padding:8px 16px;min-width:150px}
.po-out small{display:block;font-size:11px;color:#0b7a43}
.po-out b{font-size:17px;font-weight:800;color:#067647;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card.locked{opacity:.72;background:#fafbfd}
.lock-note{background:#fff7ed;border:1px solid #fed7aa;color:#b54708;border-radius:10px;padding:11px 15px;
  font-size:13.5px;margin:4px 0 0}
.s-po_made{background:#dcf2ff;color:#0b6c9e}

/* หัวกระดาษบริษัทบนใบเสนอราคา */
.q-co-block{max-width:62%}
.q-co-addr{font-size:11.5px;color:#475467;line-height:1.55;margin-top:2px}
.q-branch{font-size:13px;font-weight:600;color:#475467}
.q-co-sub{margin-top:4px}

/* หน้าตั้งค่า */
.set-form{max-width:680px}
.set-row{display:flex;gap:14px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.set-row>span{width:180px;font-size:13px;color:var(--muted);flex-shrink:0}
.set-row input{flex:1;min-width:220px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px}
.set-row input:focus{outline:none;border-color:#3d4dc4;box-shadow:0 0 0 3px rgba(61,77,196,.12)}
.set-preview{background:var(--card);border:1px solid var(--line);border-left:4px solid #0f2a5c;border-radius:10px;padding:16px 20px}

/* หน้า LINE OA */
.line-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.line-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 18px;min-width:150px}
.line-stat b{display:block;font-size:16px;font-weight:800;color:var(--navy);line-height:1.3}
.line-stat span{font-size:11.5px;color:var(--muted)}

/* ใบงานร่างจาก LINE bot */
.from-line{display:inline-block;font-size:10.5px;font-weight:700;background:#e7f8ec;color:#06c755;border-radius:99px;
  padding:1px 8px;margin-left:6px;vertical-align:middle}
.notify-code code{display:inline-block;font-size:17px;font-weight:700;background:var(--bg-soft);border:1px dashed #94a3d4;
  border-radius:10px;padding:10px 18px;letter-spacing:.5px;user-select:all}
.pick-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pick-actions select{border:1px solid var(--line);border-radius:9px;padding:8px 10px;font:inherit;font-size:13px;background:var(--card)}

.q-sum{margin-left:auto}   /* ไม่มีกล่องเงื่อนไขด้านซ้ายแล้ว ยอดรวมยังชิดขวาเหมือนเดิม */
.set-row textarea{flex:1;min-width:220px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font:inherit;font-size:13.5px}

/* ---------- หน้าตรวจสอบอะไหล่: การ์ดด้านขวา (v0.25.1) ---------- */
.tag{white-space:nowrap}
.side-card{padding:18px}
.sc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sc-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--pri-soft);font-size:17px}
.sc-title{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.sc-title b{font-size:15px}
.sc-title small{font-size:11.5px;color:var(--mut)}
.sc-more{font-size:12.5px;font-weight:600;white-space:nowrap}
.sc-input{font-size:14px;resize:vertical;min-height:62px}
.sc-btn{width:100%;margin-top:10px;border-radius:var(--radius-sm)}
.qc-res{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.qc-res:empty{display:none}
.qc-msg{font-size:13px;color:var(--mut);padding:8px 10px;background:var(--bg-soft);border-radius:var(--radius-sm)}
.qc-msg.warn{color:#8a5606;background:var(--warn-soft)}
.qc-item{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;background:var(--card)}
.qc-item.short{background:var(--warn-soft);border-color:#f6dcae}
.qc-item.nf{background:var(--bad-soft);border-color:#f3c9c9}
.qc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.qc-pn{font-size:14px;letter-spacing:.02em}
.qc-badge{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:#eef2f7;color:var(--mut);white-space:nowrap}
.qc-badge.good{background:#e3f4ea;color:#15803d}
.qc-badge.warn{background:var(--card);color:var(--warn)}
.qc-badge.bad{background:var(--card);color:var(--bad)}
.qc-name{font-size:12.5px;margin-top:3px;line-height:1.4}
.qc-price{display:flex;gap:14px;font-size:12.5px;color:var(--mut);margin-top:6px}
.qc-price b{color:var(--ink);font-weight:700}
.qc-eta,.qc-chain{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.5}
.rj-list{display:flex;flex-direction:column;gap:6px}
.rj{display:block;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-sm);color:var(--ink);transition:background .15s,border-color .15s,box-shadow .15s}
.rj:hover{background:var(--bg-soft);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.rj-top{display:flex;align-items:center;gap:8px;min-width:0}
.rj-id{font-weight:700;color:var(--pri);font-size:13px;flex:none}
.rj-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.rj-src{flex:none;font-size:13px}
.rj-bot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.rj-bot .tag{font-size:11.5px;padding:2px 9px}
.rj-amt{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rj-empty{text-align:center;color:var(--mut);font-size:13px;padding:14px 0}

/* ---------- โลโก้แพลตฟอร์ม + หน้าช่องทางขาย + แถวใบงานตรงคอลัมน์ (v0.25.2) ---------- */
.pf-logo{width:22px;height:22px;border-radius:6px;flex:none;display:inline-block;vertical-align:middle}
.pf-logo.sm{width:15px;height:15px;border-radius:4px}
.ch-badge{padding:5px 14px 5px 6px;gap:9px}
.ch-add{display:flex;flex-direction:column;gap:12px}
.ch-add-label{font-size:13px;font-weight:600;color:var(--mut)}
.pf-pick{display:flex;flex-wrap:wrap;gap:8px}
.pf-opt{display:flex;flex-direction:row;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1.5px solid var(--line);border-radius:99px;
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--card);transition:all .15s;margin:0}
.pf-opt:hover{border-color:var(--mut-2)}
.pf-opt input{position:absolute;opacity:0;pointer-events:none;width:0}
.pf-opt img{width:24px;height:24px;border-radius:6px}
.pf-opt:has(input:checked){border-color:var(--pri);background:var(--pri-soft);box-shadow:0 0 0 3px rgba(51,88,244,.12)}
.ch-add-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:12px;align-items:end}
.ch-add-btn{height:auto;padding:8px 28px;font-size:14px;border-radius:var(--radius-sm)}
@media(max-width:640px){.ch-add-row{grid-template-columns:1fr 110px}.ch-add-btn{grid-column:1/-1}}

/* แถวใบงาน: คอลัมน์กว้างคงที่ ตัวเลขทุกแถวตรงกัน */
.jb-main{display:grid;grid-template-columns:40px minmax(0,1fr) 92px 140px 168px;gap:18px;align-items:center}
.jb-items{min-width:0}
.jb-money{min-width:0}
.jb-main > .tag{justify-self:end}
.jb-sub .ch{display:inline-flex;align-items:center;gap:5px}
@media(max-width:860px){
  .jb-main{grid-template-columns:34px minmax(0,1fr) auto;gap:8px 12px}
  .jb-who{grid-column:2/-1;order:0}
  .jb-items{grid-column:2;text-align:left}
  .jb-money{grid-column:3}
  .jb-main > .tag{grid-column:2/-1;justify-self:start}
}
.callout p strong{color:var(--ink);font-weight:700}

/* ---------- customers page ---------- */
.cust-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.cust-form{position:sticky;top:20px}
@media(max-width:1000px){.cust-layout{grid-template-columns:1fr}.cust-form{position:static}}
.cust-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cust-head h3{margin:0}
.cust-count{font-size:12.5px;font-weight:600;color:var(--mut);background:var(--bg-soft);padding:3px 10px;border-radius:99px}
.cust-table th{white-space:nowrap;font-size:12px}
.cust-table td{vertical-align:middle;padding:12px 10px}
.cust-table td:not(.c-name){white-space:nowrap}
.cust-table tr:last-child td{border-bottom:none}
.c-name b{display:block;font-weight:600;line-height:1.35}
.c-meta{display:block;font-size:12.5px;color:var(--mut);margin-top:1px}
.num{font-variant-numeric:tabular-nums}
.cust-table th.r,.cust-table td.r{text-align:right}
.btn.sm{padding:5px 14px;font-size:13px;box-shadow:none}
.cust-form label{margin-bottom:12px}
.cust-form .row{gap:10px}
.cust-form .row>label{min-width:0}
.cust-form .row>label.grow2{flex:2.2}
.cust-form .row>label.pct{flex:1}
.cust-form.editing{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}

/* ---------- job page: stepper / tools / step 1 ---------- */
.stepper-card{padding:16px 20px 12px}
.stepper-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.stepper-top form{display:inline}
.stepper-title{font-size:13px;color:var(--mut);font-weight:600}
.stepper-title b{color:var(--ink);margin-left:4px}
.sm-lnk{font-size:13px}
.cancel-note{background:var(--bad-soft);color:#ad2a2a;border-radius:var(--radius-sm);padding:9px 14px;font-size:13.5px;font-weight:500;margin-bottom:12px}
ol.stepper{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto}
ol.stepper li{flex:1;min-width:84px;position:relative}
ol.stepper li::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line)}
ol.stepper li:first-child::before{display:none}
ol.stepper li.done::before,ol.stepper li.cur::before{background:var(--ok)}
ol.stepper form{display:block}
.stp{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:none;border:none;padding:0 2px;font:inherit;cursor:pointer}
.stp:disabled{cursor:default}
.stp-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--line);color:var(--mut-2);font-size:13px;font-weight:700;transition:all .15s}
.stp-lbl{font-size:12.5px;font-weight:600;color:var(--mut-2);text-align:center;line-height:1.3}
.stp:not(:disabled):hover .stp-dot{border-color:var(--pri);color:var(--pri)}
li.done .stp-dot{background:var(--ok);border-color:var(--ok);color:#fff}
li.done .stp-lbl{color:var(--ink)}
li.cur .stp-dot{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 0 0 4px var(--pri-soft)}
li.cur .stp-lbl{color:var(--pri);font-weight:700}
ol.stepper.is-cancelled{opacity:.55}
.stepper-hint{margin:12px 0 0;font-size:12px;color:var(--mut-2)}

.tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.tools form{display:inline}
.tools-lbl{font-size:12.5px;font-weight:600;color:var(--mut);margin-right:2px}

.s-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.s-title .tag{font-size:12px}
.s1-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.s1-grid{grid-template-columns:1fr}}
.s1-box{border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.s1-box.ok{background:var(--ok-soft);border-color:var(--ok)}
.s1-box.wait{background:var(--bg-soft)}
.s1-k{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px}
.s1-n{width:22px;height:22px;border-radius:50%;background:var(--bg-soft);color:var(--mut);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.s1-box.ok .s1-n{background:var(--ok);color:#fff}
.s1-hint{margin:0;font-size:12.5px;color:var(--mut)}
.s1-done{margin:0;font-weight:600;color:#0b7a43;font-size:14px}
.s1-files{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px;margin-top:4px;padding-top:10px;border-top:1px dashed var(--line);width:100%}
.s1-files span{color:var(--mut);margin-right:4px}
.s1-files a{font-weight:600;padding:3px 10px;border-radius:99px;background:var(--pri-soft)}
.s1-files a:hover{background:#dfe5ff}

/* ---------- ขั้นที่ 3: บอททำ vs คนต้องกดเอง (26 ก.ย. 69) ---------- */
.order-split{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.order-split-col{flex:1;min-width:220px;padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;line-height:1.5}
.order-split-col b{display:block;font-size:12.5px;margin-bottom:4px}
.order-split-col p{margin:0;color:var(--mut)}
.order-split-bot{background:var(--ok-soft);border:1px solid #c9ecd7}
.order-split-bot b{color:#0b7a43}
.order-split-human{background:var(--bad-soft);border:1px solid #f3c9c9}
.order-split-human b{color:var(--bad)}

/* ---------- สมุดยอดขาย + Dashboard ยอดขาย (v0.26) ---------- */
.ch-0{--c:#64748b}.ch-1{--c:#1877f2}.ch-2{--c:#06c755}.ch-3{--c:#f59e0b}.ch-4{--c:#ee4d2d}.ch-5{--c:#111827}
.shop-0{--c:#3358f4}.shop-1{--c:#0891b2}.shop-2{--c:#7c3aed}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:middle}
.stat-card.c5{background:linear-gradient(135deg,#f0626a,#c9303a)}
.stat-grid.six{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat-grid.six .stat-card b{font-size:21px}
.dash-row{display:grid;gap:18px;margin-bottom:18px}
.dash-row.wide{grid-template-columns:2fr 1fr}
.dash-row.three{grid-template-columns:1fr 1.4fr 1fr}
@media(max-width:1000px){.dash-row.wide,.dash-row.three{grid-template-columns:1fr}}
.chart-box{position:relative;height:260px}
.chart-box.tall{height:360px}
.grid2 + .grid2,.grid2 + .card,.card + .grid2{margin-top:18px}
.dash-table td.up{color:var(--ok);font-weight:600}.dash-table td.down{color:var(--bad);font-weight:600}
a.job-chip{text-decoration:none;color:inherit}

.sl-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 10px}
.sl-tabs .chip.empty{opacity:.45}
.sl-year select{font-weight:600}
.sl-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.sl-stat{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c,var(--pri));border-radius:var(--radius-sm);padding:9px 14px;min-width:130px}
.sl-stat small{display:block;color:var(--mut);font-size:12px;font-weight:600}
.sl-stat b{font-size:18px}
.sl-stat.big b{font-size:22px}.sl-stat span{display:block;color:var(--mut);font-size:12px}
.sl-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.sl-filter input[name=q]{flex:1;min-width:220px}
.sl-card{padding:0;overflow:hidden}
.sl-scroll{max-height:72vh;overflow:auto}
table.sl-table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px}
.sl-table th{position:sticky;top:0;background:#f1f4f9;z-index:2;font-weight:600;color:#334155;padding:7px 8px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft);white-space:nowrap}
.sl-table thead tr:nth-child(2) th{top:31px}
.sl-table th.chh{background:color-mix(in srgb,var(--c) 22%,#fff)}
.sl-table td{padding:6px 8px;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);vertical-align:middle;background:var(--card)}
.sl-table tr.g-first td{border-top:1px solid #d5dbe5}
.sl-table td.c{text-align:center}.sl-table td.r,.sl-table th.r{text-align:right}.sl-table th.c{text-align:center}
.sl-table td.nw{white-space:nowrap}.sl-table td.sm{font-size:11.5px;color:#475467;word-break:break-all;max-width:150px}
.sl-table td.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.sl-table td.mut{color:var(--mut-2)}
.sl-table td.cust{min-width:140px;font-weight:500}
.sl-table td.amt.has{font-weight:600;background:#fbfcf7}
.sl-table td.act{white-space:nowrap;text-align:center}
.sl-table tr.sl-po td{background:#dff3fb;color:#0b5d7a;font-weight:700;text-align:center;letter-spacing:.04em;padding:4px}
.sl-table tfoot td{position:sticky;bottom:0;background:var(--bg-soft);font-size:13px;z-index:1}
.src-badge{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:99px;white-space:nowrap}
.src-badge.job{background:var(--ok-soft);color:#0b7a43;text-decoration:none}.src-badge.web{background:var(--pri-soft);color:var(--pri)}
.shop-tag{display:block;font-size:10.5px;color:#0891b2;font-weight:600}
.sl-sync{margin-top:10px;font-size:13px;padding:9px 12px;border-radius:var(--radius-sm)}
.sl-sync.ok{background:var(--ok-soft);color:#0b7a43}.sl-sync.bad{background:var(--bad-soft);color:#a3262a}

.so-form{max-width:980px}
.so-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 14px}
.so-grid .span2{grid-column:span 2}
@media(max-width:760px){.so-grid{grid-template-columns:1fr 1fr}}
.so-lines input{width:100%}
.so-amt{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:760px){.so-amt{grid-template-columns:1fr 1fr}}
.so-amt label{border-left:4px solid var(--c);padding-left:8px;font-weight:600;font-size:13px}
.so-amt input{width:100%;text-align:right}
.sl-filter select{width:auto;flex:0 0 auto;min-width:130px}
.sl-table td.sm{max-width:120px}

/* พื้นที่ทดสอบแยกจากระบบจริง */
:root{--muted:var(--mut)}
.lab-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-bottom:22px;border:1px solid #c4b5fd;border-radius:12px;background:#f5f3ff;color:#5b21b6;font-size:13px}
.lab-banner strong{letter-spacing:.12em;font-size:11px}.lab-banner span{flex:1}.lab-banner a{white-space:nowrap}
[data-theme="dark"] .lab-banner{background:#2e2345;color:#ddd6fe;border-color:#66518a}
@media print{.lab-banner{display:none!important}}

/* โต๊ะทำงานใหม่: งานถัดไปและข้อมูลที่ต้องตรวจ มาก่อนยอดเงิน */
.nav-label{display:block;padding:18px 14px 5px;font-size:10px;font-weight:700;letter-spacing:.08em;opacity:.5}.desk-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:14px 0 26px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--primary,#6d28d9)}.desk-hero h1{font-size:clamp(25px,3vw,36px);letter-spacing:-.04em;line-height:1.35;margin:9px 0}.desk-hero p{color:var(--mut);margin:0;font-size:14px}.desk-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;margin-bottom:24px;color:var(--mut)}.desk-summary a{margin-left:auto}.desk-pill{padding:6px 10px;border-radius:30px;background:#fff7ed;color:#9a3412}.desk-pill.connected{background:#ecfdf5;color:#047857}.desk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.desk-stat{display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:22px;text-decoration:none;color:inherit}.desk-stat span{font-size:13px;color:var(--mut)}.desk-stat strong{font-size:36px;line-height:1.2;font-weight:650;margin:12px 0}.desk-stat small{font-size:11px;color:var(--mut)}.desk-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;align-items:start}.desk-section{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.desk-section h2{margin:0;font-size:18px}.desk-section p{font-size:12px;margin-top:6px}.desk-section a{font-size:12px;white-space:nowrap}.desk-empty{text-align:center;padding:48px 14px}.empty-mark{display:grid;place-items:center;width:56px;height:56px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:18px;margin:0 auto 18px;font-size:28px;color:#7c3aed}.desk-empty h3{font-size:21px}.desk-empty p{font-size:13px;color:var(--mut);line-height:1.9;margin-bottom:20px}.desk-empty .btn{margin:4px}.desk-flow{list-style:none;padding:0;margin:20px 0 0;counter-reset:flow}.desk-flow li{position:relative;padding:0 0 24px 34px;counter-increment:flow}.desk-flow li:last-child{padding-bottom:0}.desk-flow li:before{content:counter(flow);position:absolute;left:0;top:0;border-radius:50%;width:22px;height:22px;text-align:center;background:#ede9fe;color:#6d28d9;font-size:11px;line-height:22px}.desk-flow b{display:block;font-size:13px}.desk-flow small{display:block;font-size:11px;color:var(--mut);margin-top:4px;line-height:1.6}.desk-shortcut{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line,#eee);font-size:13px;text-decoration:none;color:inherit}.desk-aside .card{margin-bottom:18px}.table-wrap{overflow:auto}[data-theme="dark"] .desk-stat{background:#211d2b;border-color:#3b344a}[data-theme="dark"] .desk-pill{background:#3c3022;color:#fdba74}
@media(max-width:1100px){.desk-layout{grid-template-columns:1fr}.desk-aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:650px){.desk-hero{display:block}.desk-hero .btn{margin-top:20px}.desk-stats{grid-template-columns:repeat(2,1fr)}.desk-stat{padding:16px}.desk-aside{display:block}.desk-section{align-items:flex-start}.desk-summary a{margin-left:0}}
/* พื้นที่ทำงานยืดตามจอ ปุ่มไม่แย่งพื้นที่หัวเรื่อง */
.main-col > main{width:100%}
.sidebar{overflow-y:auto}
.sidebar .nav-label{color:rgba(255,255,255,.66);opacity:1}
.desk-hero > div{flex:1;min-width:0}
.desk-hero .btn.big{width:auto;flex:none;white-space:nowrap;padding:13px 22px}
@media(max-width:650px){.desk-hero .btn.big{width:100%}.desk-section{flex-wrap:wrap}}