:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
img{max-width:100%}
  :root{
    --bg:#F5F8FA; --surface:#FFFFFF; --surface-alt:#EEF3F6; --border:#DCE4EA;
    --text:#16202A; --text-muted:#5C6B78;
    --accent:#1E6E8C; --accent-soft:#DCEEF3; --accent-strong:#154F65;
    --good:#28855B; --good-soft:#DFF3E7;
    --warn:#B9740E; --warn-soft:#FBEBD2;
    --bad:#C53F3F; --bad-soft:#FBE2E2;
    --radius:10px; --radius-sm:7px;
    --shadow:0 1px 2px rgba(20,30,40,.06), 0 6px 16px rgba(20,30,40,.06);
    --font-display:'Kanit','Sarabun',system-ui,sans-serif;
    --font-body:'Sarabun','Noto Sans Thai',system-ui,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0F1417; --surface:#171E23; --surface-alt:#1E262C; --border:#2B353D;
      --text:#E7EEF2; --text-muted:#93A5B0;
      --accent:#5FB3D6; --accent-soft:#1B3540; --accent-strong:#8FCBE6;
      --good:#4FCE8B; --good-soft:#173B29;
      --warn:#F0AE4C; --warn-soft:#3D2E12;
      --bad:#F17272; --bad-soft:#3B1E1E;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0F1417; --surface:#171E23; --surface-alt:#1E262C; --border:#2B353D;
    --text:#E7EEF2; --text-muted:#93A5B0;
    --accent:#5FB3D6; --accent-soft:#1B3540; --accent-strong:#8FCBE6;
    --good:#4FCE8B; --good-soft:#173B29;
    --warn:#F0AE4C; --warn-soft:#3D2E12;
    --bad:#F17272; --bad-soft:#3B1E1E;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg); color:var(--text); font-family:var(--font-body);
    font-size:14px; line-height:1.5; padding-inline:16px; padding-block:16px;
    -webkit-tap-highlight-color:transparent;
  }
  h1,h2,h3,.display{font-family:var(--font-display); text-wrap:balance;}
  .mono{font-family:var(--font-mono);}
  .tabular{font-variant-numeric:tabular-nums;}
  button{font-family:inherit; font-size:inherit;}
  input,select,textarea{font-family:inherit; font-size:14px;}
  a{color:var(--accent);}

  .app{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}

  /* header */
  .topbar{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:14px 16px; display:flex; flex-wrap:wrap; gap:12px 16px;
    align-items:center; justify-content:space-between;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-mark{
    width:34px; height:34px; border-radius:9px; background:linear-gradient(155deg,var(--accent),var(--accent-strong));
    display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; flex:none;
  }
  .brand-text h1{font-size:16px; margin:0; font-weight:600; letter-spacing:.2px;}
  .brand-text p{margin:0; font-size:11.5px; color:var(--text-muted);}
  .loc-picker{display:flex; align-items:center; gap:8px;}
  .loc-picker label{font-size:12px; color:var(--text-muted); white-space:nowrap;}
  select.loc-select{
    padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-alt);
    color:var(--text); min-width:150px;
  }

  /* tabs */
  .tabbar{
    display:flex; gap:4px; overflow-x:auto; padding-bottom:2px; -ms-overflow-style:none; scrollbar-width:thin;
  }
  .tabbar button{
    flex:none; padding:9px 14px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
    color:var(--text-muted); cursor:pointer; font-weight:500; font-size:13px; transition:background .15s,color .15s,border-color .15s;
  }
  .tabbar button.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .tabbar button .badge{
    display:inline-block; margin-inline-start:6px; background:var(--bad); color:#fff; border-radius:999px;
    padding:1px 6px; font-size:10.5px; font-weight:700; vertical-align:1px;
  }
  .tabbar button.active .badge{background:rgba(255,255,255,.35);}

  .panel{display:flex; flex-direction:column; gap:16px;}
  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:16px;
  }
  .card h2{font-size:15px; margin:0 0 12px 0; font-weight:600;}
  .card h2 .sub{display:block; font-family:var(--font-body); font-weight:400; font-size:11.5px; color:var(--text-muted); margin-top:2px;}

  /* stat tiles */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
  .stat{
    background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:12px 14px; display:flex; flex-direction:column; gap:4px;
  }
  .stat .label{font-size:11.5px; color:var(--text-muted);}
  .stat .value{font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:.2px;}
  .stat .value small{font-size:12px; font-weight:500; color:var(--text-muted); font-family:var(--font-body);}
  .stat.warn .value{color:var(--warn);}
  .stat.bad .value{color:var(--bad);}
  .stat.good .value{color:var(--good);}

  /* location value bars */
  .loc-bars{display:flex; flex-direction:column; gap:8px;}
  .loc-bar-row{display:grid; grid-template-columns:110px 1fr 110px; gap:10px; align-items:center; font-size:12.5px;}
  .loc-bar-track{background:var(--surface-alt); border-radius:6px; height:10px; overflow:hidden; border:1px solid var(--border);}
  .loc-bar-fill{height:100%; background:var(--accent); border-radius:6px 0 0 6px;}
  .loc-bar-val{text-align:right; color:var(--text-muted);}

  /* toolbar */
  .toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;}
  .toolbar .filters{display:flex; flex-wrap:wrap; gap:8px; flex:1;}
  input[type=text],input[type=search],input[type=number],input[type=date],select,textarea{
    padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
    color:var(--text); min-width:0;
  }
  input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .btn{
    padding:9px 15px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface);
    color:var(--text); cursor:pointer; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  }
  .btn:hover{background:var(--surface-alt);}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
  .btn.primary:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
  .btn.danger{color:var(--bad); border-color:var(--bad);}
  .btn.danger:hover{background:var(--bad-soft);}
  .btn.sm{padding:6px 10px; font-size:12.5px;}
  .btn[disabled]{opacity:.5; cursor:not-allowed;}

  /* segmented control */
  .segmented{display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:3px; background:var(--surface-alt); gap:2px;}
  .segmented button{border:none; background:transparent; padding:8px 18px; border-radius:999px; color:var(--text-muted); font-weight:600; cursor:pointer;}
  .segmented button.active.in{background:var(--good); color:#fff;}
  .segmented button.active.out{background:var(--bad); color:#fff;}

  /* tables */
  .table-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); max-height:65vh;}
  table{border-collapse:collapse; width:100%; font-size:13px;}
  table th,table td{padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;}
  table thead th{position:sticky; top:0; background:var(--surface-alt); z-index:2; font-weight:600; font-size:12px; color:var(--text-muted);}
  table.matrix th:first-child, table.matrix td:first-child{position:sticky; left:0; background:var(--surface); z-index:1; box-shadow:1px 0 0 var(--border);}
  table.matrix thead th:first-child{z-index:3; background:var(--surface-alt);}
  table tbody tr:hover{background:var(--surface-alt);}
  td.num,th.num{text-align:right; font-variant-numeric:tabular-nums;}
  .cell-ok{color:var(--text);}
  .cell-warn{background:var(--warn-soft); color:var(--warn); font-weight:600; border-radius:5px;}
  .cell-bad{background:var(--bad-soft); color:var(--bad); font-weight:700; border-radius:5px;}

  .pill{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;}
  .pill.in{background:var(--good-soft); color:var(--good);}
  .pill.out{background:var(--bad-soft); color:var(--bad);}
  .pill.warn{background:var(--warn-soft); color:var(--warn);}

  .prod-row{display:flex; gap:12px; align-items:center;}
  .thumb{
    width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--surface-alt); border:1px solid var(--border); flex:none;
  }
  .thumb.ph{display:flex; align-items:center; justify-content:center; color:var(--text-muted);}
  .thumb-sm{width:22px; height:22px; border-radius:5px; object-fit:cover; background:var(--surface-alt); border:1px solid var(--border); flex:none;}
  .color-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted);}
  .color-row .swatch-pair{display:flex; align-items:center; gap:5px;}
  .color-chip{display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 4px; border-radius:999px; background:var(--surface-alt); border:1px solid var(--border); font-size:12px;}
  .color-chip .x{cursor:pointer; color:var(--text-muted); font-weight:700; padding:0 2px; line-height:1;}
  .color-chip .x:hover{color:var(--bad);}
  .color-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px;}
  .color-card{
    border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); padding:10px;
    display:flex; flex-direction:column; gap:6px;
  }
  .color-card .thumb{width:100%; height:70px; border-radius:8px;}
  .color-card .ccode{font-family:var(--font-mono); font-weight:600; font-size:13px;}
  .color-card .cname{font-size:11.5px; color:var(--text-muted);}
  .color-card .actions{display:flex; gap:6px; margin-top:2px;}

  /* product grid */
  .product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;}
  .product-card{
    border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt); padding:12px;
    display:flex; flex-direction:column; gap:8px;
  }
  .product-card .thumb{width:100%; height:110px; border-radius:8px;}
  .product-card .pname{font-weight:600; font-size:13.5px;}
  .product-card .pcode{font-family:var(--font-mono); font-size:11px; color:var(--text-muted);}
  .product-card .prices{display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-muted);}
  .product-card .actions{display:flex; gap:6px; margin-top:2px;}

  /* empty state */
  .empty{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:40px 16px; color:var(--text-muted);
  }
  .empty .icon{
    width:56px; height:56px; border-radius:16px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center;
  }
  .empty h3{color:var(--text); font-size:15px; margin:0;}
  .empty p{margin:0; max-width:340px; font-size:13px;}

  /* modal */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(10,16,20,.45); display:flex; align-items:flex-start; justify-content:center;
    padding:5vh 16px; overflow-y:auto; z-index:50;
  }
  .modal{
    background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
    width:100%; max-width:480px; padding:20px; display:flex; flex-direction:column; gap:14px;
  }
  .modal h2{margin:0; font-size:16px;}
  .field{display:flex; flex-direction:column; gap:5px;}
  .field label{font-size:12px; color:var(--text-muted); font-weight:600;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .modal .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:4px;}
  .img-picker{display:flex; align-items:center; gap:12px;}
  .img-picker .thumb{width:64px; height:64px;}
  .hint{font-size:11.5px; color:var(--text-muted);}
  .warn-box{background:var(--warn-soft); color:var(--warn); border-radius:var(--radius-sm); padding:8px 10px; font-size:12.5px; display:flex; gap:8px; align-items:flex-start;}
  .checkline{display:flex; align-items:center; gap:8px; font-size:12.5px;}

  /* toast */
  .toast-stack{position:fixed; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:100; width:min(90vw,360px);}
  .toast{background:var(--text); color:var(--bg); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; box-shadow:var(--shadow); opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s;}
  .toast.show{opacity:1; transform:translateY(0);}
  .toast.err{background:var(--bad);}
  .toast.ok{background:var(--good);}

  .banner{background:var(--warn-soft); color:var(--warn); border:1px solid var(--warn); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px;}

  [hidden]{display:none!important;}

  @media (max-width:640px){
    .field-row{grid-template-columns:1fr;}
    .topbar{flex-direction:column; align-items:stretch;}
    .loc-picker{justify-content:space-between;}
  }

  /* printable reports */
  #printMount{display:none;}
  .report-head{display:none;}
  .report-head h2{margin:0 0 2px 0; font-size:16px;}
  .report-head .meta{font-size:12px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:4px 16px;}
  .report-foot-note{font-size:11px; color:var(--text-muted); margin-top:10px;}

  @media print{
    body.print-mode > *:not(#printMount){display:none!important;}
    body.print-mode{background:#fff; padding:0;}
    #printMount{display:block!important;}
    #printMount .report-head{display:block; margin-bottom:14px;}
    #printMount table{width:100%; font-size:11.5px;}
    #printMount th,#printMount td{border:1px solid #999; padding:4px 6px;}
    #printMount thead th{background:#eee!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    #printMount .cell-warn{background:#fce6b8!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    #printMount .cell-bad{background:#f9d0d0!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  }

  /* login */
  .login-wrap{min-height:calc(100vh - 32px); display:flex; align-items:center; justify-content:center;}
  .login-card{width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; padding:24px;}
  .login-card .brand{margin-bottom:4px;}
  .login-submit{justify-content:center; padding:11px 15px;}
  .top-right{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
  .user-box{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted);}
  .user-box .email{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  @media (max-width:640px){
    .top-right{justify-content:space-between;}
  }