/* ธีมเดียวกับแอป Ginger Box: เขียวเข้ม / ครีม / ส้ม  (การ์ดมุมมน เส้นขอบเขียว) */
:root{--bg:#05170F;--bg2:#0A2617;--card:#0D2B1C;--card2:#081F14;--stroke:#214D33;--cream:#F5EDD9;--label:#9EB8A8;--dim:#597866;
  --orange:#FAA826;--red:#FF544D;--green:#5CE08C;--blue:#66B3FF;--yellow:#FFD661;--side:250px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--cream);font-family:"Noto Sans Thai",-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:800}
h1{font-size:22px}h2{font-size:17px}h3{font-size:14px;color:var(--label);letter-spacing:1px;text-transform:uppercase;font-size:11px}
.logo-row{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:9px;background:url(logo.png) center/cover no-repeat;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--stroke)}
.brand{font-weight:900;letter-spacing:3px;font-size:16px}.sub{font-size:11px;color:var(--label)}
.btn{border:1px solid var(--stroke);background:var(--card);border-radius:10px;padding:9px 14px;cursor:pointer;font-weight:700;transition:.15s}
.btn:hover{border-color:var(--green)}.btn.primary{background:var(--green);color:#062A14;border-color:var(--green)}.btn.ghost{background:transparent}.btn.small{padding:6px 10px;font-size:12px}
.btn.danger{color:var(--red)}
input,select{background:var(--card2);border:1px solid var(--stroke);border-radius:10px;padding:9px 12px;outline:none}
input:focus,select:focus{border-color:var(--green)}
label{display:block;font-size:11px;color:var(--label);margin:12px 0 4px;letter-spacing:1px;text-transform:uppercase}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg))}
.login-card{width:min(400px,92vw);background:linear-gradient(var(--card),var(--card2));border:1px solid var(--stroke);border-radius:18px;padding:26px}
.login-card .btn{width:100%;margin-top:18px}.login-card .msg{min-height:18px;color:var(--orange);font-size:12px;margin-top:8px}
.login-card .foot{font-size:11px;color:var(--dim);margin-top:14px}

/* layout */
.app{display:flex;min-height:100vh}
.side{width:var(--side);background:var(--card2);border-right:1px solid var(--stroke);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.side nav{display:flex;flex-direction:column;gap:4px}
.side nav a{padding:10px 12px;border-radius:10px;color:var(--label);font-weight:600;display:flex;gap:10px;align-items:center}
.side nav a .ic{width:20px;height:20px;display:inline-flex}.side nav a .ic svg{width:20px;height:20px;fill:currentColor}
.sw svg{width:60%;height:60%;fill:currentColor}
.side nav a.on,.side nav a:hover{background:var(--card);color:var(--cream);box-shadow:inset 3px 0 0 var(--green)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.who{font-size:12px;color:var(--label)}.ver{font-size:10px;color:var(--dim)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--stroke);background:rgba(5,23,15,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.crumb{font-weight:800;font-size:16px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search{width:min(360px,40vw)}
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer}
.view{padding:20px;display:flex;flex-direction:column;gap:16px}

/* cards & grid */
.card{background:linear-gradient(var(--card),var(--card2));border:1px solid var(--stroke);border-radius:16px;padding:16px}
.card .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}.card .hd h3{flex:1}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.kpi{display:flex;flex-direction:column;gap:4px}.kpi .v{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}.kpi .l{font-size:11px;color:var(--label);letter-spacing:1px;text-transform:uppercase}.kpi .s{font-size:11px;color:var(--dim)}
.kpi.o .v{color:var(--orange)}.kpi.g .v{color:var(--green)}.kpi.b .v{color:var(--blue)}.kpi.y .v{color:var(--yellow)}

/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;color:var(--label);letter-spacing:1px;text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--stroke);cursor:pointer;white-space:nowrap;user-select:none}
th.sorted::after{content:" ▾";color:var(--green)}th.sorted.asc::after{content:" ▴"}
td{padding:10px;border-bottom:1px solid rgba(33,77,51,.5);vertical-align:middle}
tr.row:hover td{background:rgba(92,224,140,.06);cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums}.muted{color:var(--dim)}.small{font-size:12px}
.empty{color:var(--dim);padding:24px;text-align:center}

/* chips, pills, swatches */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;border:1px solid var(--stroke);background:var(--card2)}
.pill.g{color:var(--green);border-color:rgba(92,224,140,.4);background:rgba(92,224,140,.1)}.pill.o{color:var(--orange);border-color:rgba(250,168,38,.4);background:rgba(250,168,38,.1)}
.pill.r{color:var(--red);border-color:rgba(255,84,77,.4);background:rgba(255,84,77,.1)}.pill.b{color:var(--blue);border-color:rgba(102,179,255,.4);background:rgba(102,179,255,.1)}
.sw{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:16px}
.sw.sm{width:14px;height:14px;font-size:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 12px;border-radius:999px;border:1px solid var(--stroke);background:var(--card2);cursor:pointer;font-size:12px;font-weight:700}
.chip.on{background:var(--green);color:#062A14;border-color:var(--green)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--stroke);overflow-x:auto}
.tabs a{padding:10px 14px;color:var(--label);font-weight:700;border-bottom:2px solid transparent;white-space:nowrap}.tabs a.on{color:var(--green);border-bottom-color:var(--green)}

/* car header */
.carhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.carhead .sw{width:56px;height:56px}
.carhead .plate{font-size:26px;font-weight:900;letter-spacing:1px}
.carhead .meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--label);font-size:12px}
.carhead .meta b{color:var(--cream)}

/* due list */
.due{display:flex;flex-direction:column;gap:8px}
.due .it{background:var(--card2);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center}
.due .dot{width:10px;height:10px;border-radius:50%}
.bar{height:5px;border-radius:3px;background:var(--stroke);overflow:hidden;grid-column:1/-1}.bar i{display:block;height:100%}
.lv0{color:var(--green)}.lv1{color:var(--orange)}.lv2{color:var(--red)}
.bg0{background:var(--green)}.bg1{background:var(--orange)}.bg2{background:var(--red)}

/* map */
#map{height:520px;border-radius:14px;border:1px solid var(--stroke);background:#0a1a12}
.mini-marker{width:44px;height:44px;transform-origin:50% 50%}
.play{display:flex;align-items:center;gap:10px;margin-top:10px}.play input[type=range]{flex:1;accent-color:var(--green)}
.legend{display:flex;gap:10px;font-size:11px;color:var(--label);align-items:center;flex-wrap:wrap}
.maptype{position:absolute;top:10px;left:10px;z-index:5;display:flex;gap:4px;background:rgba(5,23,15,.85);border:1px solid var(--stroke);border-radius:10px;padding:3px}
.maptype span{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;color:var(--label)}.maptype span.on{background:var(--green);color:#062A14}
.mapwrap{position:relative}.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-right:4px}

/* findings */
.find{border-left:4px solid var(--stroke);background:var(--card2);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.find.l2{border-left-color:var(--red)}.find.l1{border-left-color:var(--orange)}.find.l0{border-left-color:var(--blue)}
.find .t{font-weight:800}.find .d{font-size:12px;color:var(--label);margin-top:2px}.find .a{font-size:12px;color:var(--green);margin-top:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.stats div{background:var(--card2);border-radius:10px;padding:8px 10px}.stats .l{font-size:10px;color:var(--label);letter-spacing:1px;text-transform:uppercase}.stats .v{font-weight:800;font-size:15px}
canvas.chart{width:100%;height:160px;display:block}
.big-level{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800}
.big-level .ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;border:3px solid currentColor}

/* feed */
.post{display:grid;grid-template-columns:1fr auto;gap:10px}.photos{display:flex;gap:6px;flex-wrap:wrap}.photos img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--stroke)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:10px 16px;font-weight:700;opacity:0;transition:.2s;pointer-events:none;z-index:100}
.toast.on{opacity:1}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--stroke);border-top-color:var(--green);border-radius:50%;animation:sp 1s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}

@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .side{position:fixed;left:calc(-1 * var(--side));z-index:60;transition:.2s}.nav-open .side{left:0;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .burger{display:block}.search{width:100%}.top{flex-wrap:wrap}.crumb{order:-1;width:100%}
  .g4,.g3,.g2{grid-template-columns:1fr}.view{padding:12px}#map{height:380px}
  table{font-size:12px}td,th{padding:7px 6px}.hide-m{display:none}
}