/* ===== Chokdee Factory — Design System ===== */
:root{
  --green-900:#0C2F22;
  --green-800:#12402F;
  --green-700:#175139;
  --green-600:#1B6B47;
  --green-500:#2E8B5D;
  --green-tint:#E8F3EC;
  --green-tint-2:#D4E9DC;
  --orange:#E97B26;
  --orange-600:#D0661A;
  --orange-tint:#FDEFE3;
  --blue:#3B72C4; --blue-tint:#EAF1FB;
  --red:#D64545;  --red-tint:#FDECEC;
  --purple:#6B5BC4;--purple-tint:#F0EDFB;
  --amber:#C98A16; --amber-tint:#FCF2DC;
  --bg:#F5F3EE;
  --card:#FFFFFF;
  --ink:#1D2B24;
  --ink-2:#4A5C53;
  --ink-3:#8A9992;
  --line:#E7E4DC;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(18,64,47,.05), 0 8px 24px rgba(18,64,47,.06);
  --shadow-lg:0 12px 40px rgba(18,64,47,.14);
  --sidebar-w:248px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
table{border-collapse:collapse;width:100%}
/* default size for inline icons; specific rules below override */
svg{width:18px;height:18px;flex-shrink:0}

/* ===== App shell ===== */
#app{min-height:100vh}
.shell{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:linear-gradient(170deg,var(--green-800) 0%,var(--green-900) 100%);
  color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden;
}
.sidebar::after{
  content:"";position:absolute;inset:auto 0 0 0;height:230px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 160'><g fill='%23ffffff' fill-opacity='0.04'><rect x='10' y='80' width='40' height='80'/><rect x='58' y='60' width='34' height='100'/><rect x='100' y='95' width='46' height='65'/><rect x='154' y='72' width='30' height='88'/><rect x='192' y='104' width='38' height='56'/></g></svg>") no-repeat bottom center/100% auto;
  pointer-events:none;
}
.brand{display:flex;gap:11px;align-items:center;padding:20px 18px 18px;position:relative;z-index:1}
.brand-logo{width:42px;height:42px;border-radius:12px;background:#fff;display:grid;place-items:center;flex:0 0 42px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.brand-logo svg{width:28px;height:28px}
.brand-name{font-size:17px;font-weight:700;line-height:1.15}
.brand-sub{font-size:11px;opacity:.72;line-height:1.3}
.nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px;position:relative;z-index:1;overflow-y:auto;flex:1}
.nav::-webkit-scrollbar{width:0}
.nav-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.45;padding:14px 12px 6px;font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;
  color:rgba(255,255,255,.82);font-size:14.5px;transition:.15s;white-space:nowrap
}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:var(--green-500);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(46,139,93,.35)}
.nav-item i{width:20px;display:grid;place-items:center;flex:0 0 20px}
.nav-item svg{width:18px;height:18px}
.nav-badge{margin-left:auto;background:var(--orange);font-size:11px;padding:1px 7px;border-radius:9px;font-weight:600}
.sidebar-foot{padding:14px 18px 18px;position:relative;z-index:1;font-size:11.5px;opacity:.5;font-style:italic}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:62px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;
  padding:0 22px;position:sticky;top:0;z-index:40
}
.search{
  flex:1;max-width:380px;display:flex;align-items:center;gap:9px;background:var(--bg);
  border:1px solid var(--line);border-radius:11px;padding:8px 13px;color:var(--ink-3);font-size:13.5px
}
.search input{border:none;background:none;outline:none;width:100%;font-size:13.5px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.icon-btn{position:relative;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--bg)}
.dot-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;display:grid;place-items:center;font-weight:600;padding:0 4px}
.user-chip{display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;border-radius:12px}
.user-chip:hover{background:var(--bg)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--green-tint);color:var(--green-700);display:grid;place-items:center;font-weight:700;font-size:13px}
.user-meta{line-height:1.2;text-align:left}
.user-meta b{font-size:13.5px;font-weight:600;display:block}
.user-meta span{font-size:11.5px;color:var(--ink-3)}

.content{padding:22px;max-width:1440px;width:100%;margin:0 auto;flex:1}
.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:23px}
.crumb{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.page-head .spacer{flex:1}

/* ===== Components ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.card-head h3{font-size:15.5px}
.card-head .spacer{flex:1}
.card-body{padding:18px}
.card-body.tight{padding:12px 18px}

.grid{display:grid;gap:14px}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:11px}
.kpi-ico svg{width:20px;height:20px}
.kpi-label{font-size:12.5px;color:var(--ink-2);margin-bottom:3px}
.kpi-val{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kpi-val small{font-size:13px;font-weight:600;color:var(--ink-2);margin-left:3px}
.kpi-sub{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.trend{font-size:11px;font-weight:600;padding:2px 7px;border-radius:7px;display:inline-flex;gap:2px;align-items:center;position:absolute;top:15px;right:14px}
.trend.up{background:var(--green-tint);color:var(--green-600)}
.trend.down{background:var(--red-tint);color:var(--red)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.green{background:var(--green-tint);color:var(--green-600)}
.pill.orange{background:var(--orange-tint);color:var(--orange-600)}
.pill.red{background:var(--red-tint);color:var(--red)}
.pill.blue{background:var(--blue-tint);color:var(--blue)}
.pill.purple{background:var(--purple-tint);color:var(--purple)}
.pill.amber{background:var(--amber-tint);color:var(--amber)}
.pill.grey{background:#EFEDE7;color:var(--ink-2)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 17px;border-radius:12px;font-size:14.5px;font-weight:600;transition:.15s;
  background:var(--green-600);color:#fff;box-shadow:0 3px 10px rgba(27,107,71,.22)
}
.btn:hover{background:var(--green-700)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn.lg{padding:14px 22px;font-size:16px;border-radius:14px;width:100%}
.btn.sm{padding:7px 13px;font-size:13px;border-radius:10px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--bg)}
.btn.orange{background:var(--orange);box-shadow:0 3px 10px rgba(233,123,38,.25)}
.btn.orange:hover{background:var(--orange-600)}
.btn.danger{background:#fff;color:var(--red);border:1px solid #F3D3D3;box-shadow:none}
.btn.danger:hover{background:var(--red-tint)}
.btn[disabled]{opacity:.45;pointer-events:none}

.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.seg button{padding:6px 14px;border-radius:9px;font-size:13.5px;color:var(--ink-2);font-weight:500}
.seg button.on{background:var(--green-600);color:#fff;font-weight:600}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{padding:11px 16px;font-size:14.5px;color:var(--ink-2);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--green-600);border-color:var(--green-600);font-weight:600}

/* Table */
.tbl-wrap{overflow-x:auto}
table.tbl{font-size:13.5px;min-width:520px}
table.tbl th{
  text-align:left;font-weight:600;font-size:12px;color:var(--ink-3);
  padding:11px 14px;background:var(--bg);border-bottom:1px solid var(--line);white-space:nowrap
}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr.clickable{cursor:pointer;transition:.12s}
table.tbl tbody tr.clickable:hover{background:var(--green-tint)}
table.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;letter-spacing:-.02em}

/* List rows */
.lrow{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);transition:.12s}
.lrow:last-child{border-bottom:none}
.lrow.clickable{cursor:pointer}
.lrow.clickable:hover{background:var(--green-tint)}
.lrow .spacer{flex:1}
.thumb{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:21px;flex:0 0 42px;background:var(--bg)}
.lrow b{font-size:14px;font-weight:600;display:block}
.lrow small{font-size:12px;color:var(--ink-3)}

/* Forms */
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field label .req{color:var(--red)}
.inp{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;
  outline:none;transition:.15s;font-size:14.5px
}
.inp:focus{border-color:var(--green-500);box-shadow:0 0 0 3px var(--green-tint)}
select.inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238A9992' stroke-width='2'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea.inp{resize:vertical;min-height:70px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inline-total{background:var(--green-tint);border-radius:12px;padding:11px 14px;font-size:14px;display:flex;align-items:center;gap:8px}
.inline-total b{margin-left:auto;font-size:17px;color:var(--green-700)}

.check{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:#fff;font-size:13.5px;transition:.15s}
.check.on{background:var(--green-tint);border-color:var(--green-500);font-weight:600;color:var(--green-700)}
.check .box{width:19px;height:19px;border-radius:6px;border:1.8px solid var(--ink-3);display:grid;place-items:center;flex:0 0 19px}
.check.on .box{background:var(--green-600);border-color:var(--green-600);color:#fff}
.check .box svg{width:13px;height:13px;opacity:0}
.check.on .box svg{opacity:1}
.check-row{display:flex;gap:9px;flex-wrap:wrap}

.radio-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.radio{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-size:14px;background:#fff;transition:.15s}
.radio .ring{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-3);flex:0 0 18px;display:grid;place-items:center}
.radio.on.pass{background:var(--green-tint);border-color:var(--green-500);color:var(--green-700);font-weight:600}
.radio.on.pass .ring{border-color:var(--green-600)}
.radio.on.hold{background:var(--orange-tint);border-color:var(--orange);color:var(--orange-600);font-weight:600}
.radio.on.hold .ring{border-color:var(--orange)}
.radio.on.reject{background:var(--red-tint);border-color:var(--red);color:var(--red);font-weight:600}
.radio.on.reject .ring{border-color:var(--red)}
.radio.on .ring::after{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}

/* Photo capture */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.photo{
  aspect-ratio:1;border-radius:13px;position:relative;overflow:hidden;
  display:grid;place-items:center;font-size:30px;background:var(--bg);border:1px solid var(--line)
}
.photo .x{position:absolute;top:5px;right:5px;width:21px;height:21px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:12px;line-height:1}
.photo .cap{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);color:#fff;font-size:9.5px;padding:3px 5px;text-align:center}
.photo.add{border:1.5px dashed var(--green-500);background:var(--green-tint);color:var(--green-600);cursor:pointer;flex-direction:column;gap:3px;font-size:12px}
.photo.add svg{width:24px;height:24px}

/* Stepper */
.stepper{display:flex;align-items:center;padding:4px 0;gap:0}
.step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:74px;text-align:center}
.step .bub{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:600;background:#fff;border:1.8px solid var(--line);color:var(--ink-3)}
.step.done .bub{background:var(--green-600);border-color:var(--green-600);color:#fff}
.step.on .bub{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 4px var(--orange-tint)}
.step span{font-size:11.5px;color:var(--ink-3);line-height:1.25}
.step.on span,.step.done span{color:var(--ink);font-weight:500}
.step-line{flex:1;height:2px;background:var(--line);margin-top:-22px;min-width:12px}
.step-line.done{background:var(--green-600)}

/* Bars / charts */
.bars{display:flex;align-items:flex-end;gap:11px;height:170px;padding-top:10px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar-pair{display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center;height:100%}
.bar{width:13px;border-radius:5px 5px 0 0;background:var(--green-500);transition:height .5s}
.bar.b2{background:var(--green-tint-2)}
.bar-col small{font-size:10.5px;color:var(--ink-3);white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);align-items:center}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px}
.donut-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.donut{position:relative;width:150px;height:150px;flex:0 0 150px}
.donut .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.15}
.donut .mid b{font-size:21px;display:block}
.donut .mid small{font-size:11px;color:var(--ink-3)}
.donut-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:9px;font-size:13px}
.donut-legend div{display:flex;align-items:center;gap:8px}
.donut-legend i{width:10px;height:10px;border-radius:3px}
.donut-legend .spacer{flex:1}
.donut-legend b{font-weight:600}

.prog{height:7px;background:var(--bg);border-radius:4px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--green-500);border-radius:4px;transition:width .5s}
.prog i.warn{background:var(--orange)}
.prog i.bad{background:var(--red)}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(12,47,34,.45);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:22px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg);animation:pop .2s}
.modal.wide{max-width:820px}
@keyframes pop{from{transform:translateY(14px) scale(.98);opacity:0}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:#fff;z-index:2;border-radius:22px 22px 0 0}
.modal-head h3{font-size:17px}
.modal-head .spacer{flex:1}
.modal-body{padding:22px}
.modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}

/* Toast */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{
  background:var(--green-800);color:#fff;padding:12px 20px;border-radius:14px;font-size:14px;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:up .25s;max-width:90vw
}
.toast.warn{background:var(--orange-600)}
.toast.err{background:var(--red)}
@keyframes up{from{transform:translateY(16px);opacity:0}}

.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty .ico{font-size:40px;margin-bottom:10px;opacity:.5}

.note{background:var(--blue-tint);border-radius:12px;padding:11px 14px;font-size:13px;color:#2C5596;display:flex;gap:9px}
.note.warn{background:var(--orange-tint);color:var(--orange-600)}

/* Trace tree */
.trace{position:relative;padding-left:6px}
.tnode{position:relative;padding:0 0 4px 30px;border-left:2px solid var(--green-tint-2);margin-left:13px}
.tnode:last-child{border-left-color:transparent}
.tnode::before{
  content:"";position:absolute;left:-8px;top:17px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--green-500)
}
.tnode.rm::before{border-color:var(--orange)}
.tnode.sf::before{border-color:var(--blue)}
.tnode.fg::before{border-color:var(--green-500)}
.tnode.dp::before{border-color:var(--purple)}
.tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-bottom:10px;box-shadow:var(--shadow)}
.tcard b{font-size:14px}
.tcard .meta{font-size:12px;color:var(--ink-3);margin-top:2px}

/* Mobile bottom nav — hidden on desktop */
.mobile-nav{display:none}
.mobile-top{display:none}
.only-mobile{display:none}

/* ===== Responsive: phone ===== */
@media (max-width: 860px){
  .sidebar{display:none}
  .topbar{display:none}
  .only-mobile{display:block}
  .hide-mobile{display:none !important}
  .content{padding:14px 14px 92px}
  .mobile-top{
    display:flex;align-items:center;gap:11px;padding:13px 16px;background:#fff;
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40
  }
  .mobile-top .brand-logo{width:38px;height:38px;flex:0 0 38px;box-shadow:none;background:var(--green-tint)}
  .mobile-top h2{font-size:17px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-top .sub{font-size:11px;color:var(--ink-3);font-weight:400;display:block}
  .back-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg);flex:0 0 34px}
  .mobile-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);
    z-index:50;padding:7px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(18,64,47,.07)
  }
  .mobile-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--ink-3);padding:4px 2px}
  .mobile-nav a svg{width:21px;height:21px}
  .mobile-nav a.on{color:var(--green-600);font-weight:600}
  .page-head h1{font-size:19px}
  .row2,.row3{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-val{font-size:19px}
  .modal{max-height:94vh;border-radius:20px}
  .radio-row{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr !important}
  .step{width:64px}
}

/* Desktop grid helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.grid-sb{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media (max-width:1180px){.grid-sb{grid-template-columns:1fr}}

/* Menu tiles (mobile home) */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tile{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);text-align:left;position:relative
}
.tile:active{transform:scale(.98)}
.tile .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.tile .ti svg{width:21px;height:21px}
.tile b{font-size:15px;font-weight:600}
.tile small{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.tile .arw{position:absolute;top:16px;right:13px;color:var(--ink-3)}

.hero{
  background:linear-gradient(110deg,var(--green-tint) 0%,#F3F8F0 60%,var(--orange-tint) 100%);
  border-radius:16px;padding:15px 17px;margin-bottom:15px;position:relative;overflow:hidden
}
.hero b{font-size:15.5px;display:block}
.hero small{font-size:12.5px;color:var(--ink-2)}
.hero .deco{position:absolute;right:-6px;bottom:-10px;font-size:52px;opacity:.22}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(160deg,var(--green-800),var(--green-900))}
.login-card{background:#fff;border-radius:24px;padding:30px;max-width:420px;width:100%;box-shadow:var(--shadow-lg)}
.login-card .brand-logo{width:56px;height:56px;margin:0 auto 14px;background:var(--green-tint)}
.login-card .brand-logo svg{width:36px;height:36px}
.role-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.role-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;text-align:left;transition:.15s;background:#fff}
.role-btn:hover{border-color:var(--green-500);background:var(--green-tint)}
.role-btn b{font-size:14.5px;display:block}
.role-btn small{font-size:12px;color:var(--ink-3)}

/* demo banner */
.demo-tag{
  position:fixed;right:12px;bottom:12px;z-index:90;background:var(--green-800);color:#fff;
  font-size:11px;padding:6px 12px;border-radius:999px;opacity:.82;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center
}
.demo-tag button{color:#fff;opacity:.75;font-size:11px;text-decoration:underline}
@media (max-width:860px){.demo-tag{bottom:74px;right:8px;font-size:10px;padding:5px 10px}}

/* ===== inline SVG sizing guards ===== */
.note svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.toast svg{width:18px;height:18px;flex:0 0 18px}
.icon-btn svg{width:19px;height:19px}
.search svg{width:17px;height:17px;flex:0 0 17px}
.thumb svg{width:19px;height:19px}
.pill svg{width:13px;height:13px}
.role-btn svg{width:17px;height:17px}
.kpi svg{width:20px;height:20px}
.photo.add svg{width:24px;height:24px}
.lrow > svg, .lrow span > svg{width:18px;height:18px}
table.tbl svg{width:14px;height:14px;vertical-align:-2px}

/* ===== filter bar ===== */
.filterbar{display:flex;gap:10px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.filterbar .search{flex:0 1 300px;margin:0}
.filterbar .inp{padding:8px 12px;font-size:13.5px}
@media (max-width:860px){
  .filterbar{padding:12px 14px}
  .filterbar .search{flex:1 1 100%}
  .filterbar .inp{flex:1 1 40%;min-width:0}
}

/* ===== icon picker ===== */
.icon-pick{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:118px;overflow-y:auto}
.icon-pick .ip{width:36px;height:36px;border-radius:10px;font-size:19px;display:grid;place-items:center;border:1.5px solid transparent;background:var(--bg)}
.icon-pick .ip:hover{background:var(--green-tint)}
.icon-pick .ip.on{background:var(--green-tint);border-color:var(--green-500)}

/* settings toggles get room for a subtitle */
.check{align-items:center}
.check small{display:block}

/* ===== printable documents ===== */
.paper{
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:40px 44px;max-width:820px;margin:0 auto;color:#1D2B24
}
.pr-head{display:flex;gap:24px;align-items:flex-start;border-bottom:2px solid var(--green-800);padding-bottom:16px;margin-bottom:20px}
.pr-co{font-size:20px;font-weight:700;color:var(--green-800)}
.pr-sub{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.pr-right{margin-left:auto;text-align:right}
.pr-title{font-size:19px;font-weight:700}
.pr-no{font-size:14px;font-weight:600;margin-top:3px;font-family:ui-monospace,Menlo,monospace}
.pr-box{background:var(--bg);border-radius:10px;padding:12px 15px;margin-bottom:16px;font-size:13.5px}
.pr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.pr-tbl th{background:var(--green-tint);text-align:left;padding:9px 11px;border:1px solid var(--line);font-weight:600;font-size:12.5px}
.pr-tbl td{padding:9px 11px;border:1px solid var(--line)}
.pr-tbl .num{text-align:right}
.pr-tbl tr.pr-total td{background:var(--green-tint);font-weight:700}
.pr-sign{display:flex;gap:60px;margin-top:46px;font-size:13px}
.pr-sign>div{flex:1;text-align:center}
.pr-line{border-bottom:1px dotted var(--ink-3);margin-bottom:8px;height:42px}
.pr-labels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pr-label{border:1.5px dashed var(--ink-3);border-radius:10px;padding:14px;display:flex;gap:13px;align-items:center;break-inside:avoid}
.pr-label svg{width:96px !important;height:96px !important;flex:0 0 96px}
.lb-info{min-width:0}
.lb-name{font-size:15px;font-weight:700;line-height:1.25}
.lb-code{font-size:13px;font-weight:600;margin:3px 0 6px}
.lb-row{font-size:11.5px;color:var(--ink-2);line-height:1.6}
.lb-co{font-size:10.5px;color:var(--ink-3);margin-top:6px}
@media (max-width:860px){.paper{padding:22px 18px}.pr-head{flex-direction:column;gap:12px}.pr-right{text-align:left;margin-left:0}.pr-labels{grid-template-columns:1fr}}

@media print{
  .sidebar,.topbar,.mobile-top,.mobile-nav,.demo-tag,.no-print,.toasts{display:none !important}
  body{background:#fff}
  .content{padding:0;max-width:none}
  .paper{border:none;box-shadow:none;border-radius:0;max-width:none;padding:0}
  .pr-label{break-inside:avoid}
  @page{margin:14mm}
}

/* เลขเอกสารไม่ตัดบรรทัด (อ่านง่ายบนจอนำเสนอ) */
.tbl td.mono { white-space: nowrap; font-size: 12.5px; }