/* MiniSwarm — dark data-dense, calm. IBM Plex Sans Thai + Plex Mono */
:root{
  --bg:#0B0E14; --surface:#131926; --surface2:#1A2233; --border:#232D42;
  --text:#E7ECF5; --muted:#97A3B7; --faint:#5C6A80;
  --accent:#F5B14C; --accent-ink:#201502; --info:#60A5FA;
  --ok:#34D399; --ok-bg:rgba(52,211,153,.12);
  --warn:#FBBF24; --warn-bg:rgba(251,191,36,.12);
  --bad:#F87171; --bad-bg:rgba(248,113,113,.12);
  --r:14px; --r-s:9px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --nav-h:64px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 16px/1.55 "IBM Plex Sans Thai",system-ui,sans-serif;
  min-height:100dvh; touch-action:manipulation;
}
.num{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- shell ---------- */
header.top{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:var(--sp-3);
  padding:calc(env(safe-area-inset-top) + 12px) var(--sp-4) 12px;
  background:rgba(11,14,20,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
header.top .mark{width:30px;height:30px;flex:none;color:var(--accent)}
header.top h1{font-size:17px;font-weight:700;margin:0;letter-spacing:.01em}
header.top .sub{font-size:12.5px;color:var(--muted);margin-top:-2px}
main{
  max-width:1080px; margin:0 auto;
  padding:var(--sp-4) var(--sp-4) calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
}
@media (min-width:1024px){
  body{display:grid; grid-template-columns:220px 1fr}
  header.top{grid-column:1/3}
  nav.tabs{position:sticky; top:64px; align-self:start; flex-direction:column; height:auto;
    border-top:none; border-right:1px solid var(--border); background:transparent; padding:var(--sp-4)}
  nav.tabs button{flex-direction:row; justify-content:flex-start; gap:10px; padding:11px 14px; border-radius:var(--r-s)}
  main{grid-column:2; padding-bottom:var(--sp-6); width:100%}
}

/* ---------- bottom nav ---------- */
nav.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(15,19,28,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--border);
}
nav.tabs button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:44px; background:none; border:none; color:var(--muted); cursor:pointer;
  font:500 11.5px/1 "IBM Plex Sans Thai",sans-serif; transition:color .18s;
}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button.on{color:var(--accent)}
nav.tabs button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px}

/* ---------- cards / layout ---------- */
.grid{display:grid; gap:var(--sp-3)}
.kpis{grid-template-columns:1fr 1fr}
@media(min-width:768px){.kpis{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:var(--sp-4);
}
.card h3{margin:0 0 var(--sp-3); font-size:13.5px; font-weight:600; color:var(--muted);
  text-transform:none; letter-spacing:.02em; display:flex; align-items:center; gap:8px}
.card h3 svg{width:16px;height:16px;color:var(--faint)}
.kpi .v{font-size:30px; font-weight:600; line-height:1.1}
.kpi .d{font-size:12.5px; color:var(--muted); margin-top:4px}
.kpi.hero{grid-column:1/-1; display:flex; align-items:center; gap:var(--sp-5)}
@media(min-width:768px){.kpi.hero{grid-column:span 2}}
section.view{animation:in .22s ease-out}
@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ section.view,.card,.pred{animation:none !important; transition:none !important} }

h2.vt{font-size:15px; font-weight:700; margin:var(--sp-5) 0 var(--sp-3); color:var(--text)}
h2.vt:first-child{margin-top:0}
.muted{color:var(--muted); font-size:13.5px}
.faint{color:var(--faint)}

/* ---------- badges & chips ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; line-height:1.4; white-space:nowrap}
.badge svg{width:13px;height:13px}
.b-ok{color:var(--ok); background:var(--ok-bg)}
.b-warn{color:var(--warn); background:var(--warn-bg)}
.b-bad{color:var(--bad); background:var(--bad-bg)}
.b-info{color:var(--info); background:rgba(96,165,250,.12)}
.b-plain{color:var(--muted); background:var(--surface2)}
.chip{display:inline-block; padding:2px 9px; border-radius:999px; background:var(--surface2);
  color:var(--muted); font-size:12px; border:1px solid var(--border)}

/* ---------- predictions list ---------- */
.pred{margin-bottom:var(--sp-3)}
.pred summary{list-style:none; cursor:pointer; display:block; padding:var(--sp-4); border-radius:var(--r)}
.pred summary::-webkit-details-marker{display:none}
.pred summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pred .row1{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.pred .title{font-weight:600; font-size:15px; line-height:1.45}
.pred .meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center}
.pred .body{padding:0 var(--sp-4) var(--sp-4); border-top:1px dashed var(--border); padding-top:var(--sp-3); margin:0 2px}
.cmp{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); align-items:flex-start}
.cmp:last-child{border-bottom:none}
.cmp .ref{font-size:13.5px; line-height:1.5}
.cmp .why{color:var(--muted); font-size:12.5px; margin-top:3px}
.arr{transition:transform .18s; margin-left:auto; color:var(--faint); flex:none}
details[open] .arr{transform:rotate(180deg)}

/* ---------- charts ---------- */
.bt-row{display:grid; grid-template-columns:minmax(110px,150px) 1fr 52px; gap:10px; align-items:center; padding:7px 0}
.bt-row .lbl{font-size:12.5px; color:var(--muted); line-height:1.3}
.bt-bar{height:10px; background:var(--surface2); border-radius:999px; overflow:hidden}
.bt-bar i{display:block; height:100%; border-radius:999px; background:var(--accent); transition:width .5s ease-out}
.bt-row .pc{font-size:13px; text-align:right}
.ring{flex:none}
.vchips{display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--sp-2)}

/* ---------- forms ---------- */
label.lb{display:block; font-size:13px; font-weight:600; color:var(--muted); margin:var(--sp-4) 0 6px}
input[type=text],textarea{
  width:100%; background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-s); padding:12px 14px; font:400 16px/1.5 "IBM Plex Sans Thai",sans-serif;
}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
textarea{min-height:88px; resize:vertical}
select{
  background:var(--surface2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--r-s); padding:10px 12px; font:400 14.5px "IBM Plex Sans Thai",sans-serif;
  min-height:44px; flex:none; cursor:pointer;
}
select:focus-visible{outline:2px solid var(--accent); outline-offset:0}
.qrow{margin-top:10px; padding:12px; border:1px solid var(--border); border-radius:var(--r-s); background:var(--surface2)}
.qrow input{background:var(--bg)}
.qrow .qopts{flex:1}

/* ---------- projects ---------- */
a.card.proj{display:flex; gap:14px; align-items:center; text-decoration:none; color:var(--text);
  margin-bottom:12px; transition:border-color .15s, transform .12s}
a.card.proj:active{transform:scale(.985)}
a.card.proj:hover{border-color:var(--faint)}
a.card.proj:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.picon{width:46px; height:46px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center}
.picon svg{width:24px; height:24px}
.picon.clips{background:rgba(245,177,76,.14); color:var(--accent)}
.picon.generic{background:rgba(96,165,250,.13); color:var(--info)}
.picon.off{background:var(--surface2); color:var(--faint)}
.rchip{border-color:rgba(245,177,76,.35); color:var(--accent)}
.phero{display:flex; gap:14px; align-items:center; margin-top:12px}
.backbar{display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none;
  font-size:13.5px; min-height:44px; padding-right:12px}
.backbar:hover{color:var(--text)}
.chip.pick{cursor:pointer; min-height:38px}
.chip.pick.on{border-color:var(--accent); color:var(--accent)}
.help{font-size:12.5px; color:var(--faint); margin-top:5px}
.seg{display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-s); padding:3px; gap:3px}
.seg button{flex:1; min-height:40px; border:none; border-radius:7px; background:none; color:var(--muted);
  font:600 14px "IBM Plex Sans Thai",sans-serif; cursor:pointer; transition:background .15s,color .15s}
.seg button.on{background:var(--accent); color:var(--accent-ink)}
.seg button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  padding:0 22px; border:none; border-radius:var(--r-s); background:var(--accent); color:var(--accent-ink);
  font:700 15.5px "IBM Plex Sans Thai",sans-serif; cursor:pointer; width:100%;
  transition:transform .12s ease-out, opacity .15s;
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45; cursor:default}
.btn:focus-visible{outline:2px solid #fff; outline-offset:2px}
.btn.sec{background:var(--surface2); color:var(--text); border:1px solid var(--border)}

/* progress / skeleton */
.prog{margin-top:var(--sp-4)}
.pbar{height:8px; background:var(--surface2); border-radius:999px; overflow:hidden; position:relative}
.pbar i{position:absolute; inset:0; width:38%; border-radius:999px; background:var(--accent);
  animation:slide 1.3s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)} 100%{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){.pbar i{animation:none; width:100%}}
.skel{border-radius:var(--r-s); background:linear-gradient(100deg,var(--surface2) 40%,#222c42 50%,var(--surface2) 60%);
  background-size:200% 100%; animation:sh 1.4s infinite}
@keyframes sh{to{background-position:-200% 0}}
.errbox{background:var(--bad-bg); border:1px solid rgba(248,113,113,.3); color:var(--bad);
  padding:12px 14px; border-radius:var(--r-s); font-size:14px; margin-top:var(--sp-3)}

/* ---------- personas ---------- */
.pgrid{grid-template-columns:1fr}
@media(min-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.pgrid{grid-template-columns:1fr 1fr 1fr}}
.pcard{display:flex; flex-direction:column; gap:9px}
.phead{display:flex; align-items:center; gap:12px}
.avatar{width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:19px; color:var(--accent-ink)}
.pname{font-weight:700; font-size:15.5px}
.psub{font-size:12.5px; color:var(--muted)}
.parch{font-size:13px; color:var(--text); background:var(--surface2); border-left:3px solid var(--accent);
  padding:8px 11px; border-radius:0 var(--r-s) var(--r-s) 0; line-height:1.5}
.ptraits{display:flex; gap:6px; flex-wrap:wrap}
.rule{padding:var(--sp-3) 0; border-bottom:1px solid var(--border); font-size:14px; line-height:1.6}
.rule:last-child{border-bottom:none}
.rule .ev{color:var(--faint); font-size:12.5px; margin-top:4px}

/* ---------- login ---------- */
.login{position:fixed; inset:0; z-index:100; background:rgba(7,9,14,.9); display:flex;
  align-items:center; justify-content:center; padding:var(--sp-4)}
.login .card{width:100%; max-width:360px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--nav-h) + 20px);
  background:var(--surface2); border:1px solid var(--border); color:var(--text); padding:10px 18px;
  border-radius:999px; font-size:14px; z-index:90; animation:in .2s ease-out}
a{color:var(--info)}
::selection{background:rgba(245,177,76,.3)}