/* ============================================================
   APP AI Insider — Design System
   ============================================================ */
:root{
  --pri:#2563eb; --pri-600:#2563eb; --pri-700:#1d4ed8; --pri-500:#3b82f6;
  --pri-50:#eef4ff; --pri-100:#dbe7ff; --pri-150:#c6d9ff;
  --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --faint:#94a3b8;
  --line:#e7ecf4; --line-2:#eef2f8;
  --bg:#f5f7fc; --surface:#ffffff; --surface-2:#fafbfe;
  --green:#16a34a; --green-bg:#e9f9ef; --green-600:#15803d;
  --orange:#f59e0b; --orange-d:#d97706; --orange-bg:#fef3e2;
  --red:#ef4444; --red-d:#dc2626; --red-bg:#feecec;
  --purple:#7c3aed; --purple-bg:#f1ecfe;
  --teal:#0d9488; --teal-bg:#e6f7f5;
  --pink:#db2777; --pink-bg:#fdeaf3;
  --yellow:#eab308; --yellow-bg:#fdf7dd;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(37,99,235,.05);
  --shadow:0 8px 24px -12px rgba(30,58,138,.16),0 2px 8px -4px rgba(15,23,42,.05);
  --shadow-lg:0 24px 60px -18px rgba(30,58,138,.28);
  --font:"Prompt","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--pri);text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em}
::selection{background:var(--pri-100)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d3dcec;border-radius:20px;border:2px solid transparent;background-clip:content-box}
.tnum{font-variant-numeric:tabular-nums}
.hide{display:none!important}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9999;transition:opacity .25s}
#boot .b{display:flex;flex-direction:column;align-items:center;gap:12px}
#boot .logo-a{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;display:grid;place-items:center;font-weight:700;font-size:26px}
#boot .t{font-weight:700;color:var(--pri);letter-spacing:.01em}
#boot .s{font-size:12.5px;color:var(--muted)}
#boot .r{width:38px;height:38px;border:3px solid var(--pri-100);border-top-color:var(--pri);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:18px 22px 40px;min-width:0}

/* ---------- sidebar ---------- */
.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px 14px;z-index:50;overflow-y:auto}
.brand{display:flex;align-items:center;gap:9px;padding:2px 6px 16px}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#4f46e5);display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;flex:0 0 34px}
.brand .nm{font-weight:700;font-size:15.5px;color:var(--ink);white-space:nowrap}
.brand .nm .ai{color:var(--pri)}
/* business switcher */
.bizswitch{margin:0 0 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--muted);transition:background .12s}
.bizswitch:hover{background:var(--pri-50);border-color:var(--pri-100)}
.bizswitch .meta{min-width:0;flex:1}
.bizswitch .t1{font-weight:600;color:var(--ink);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bizswitch .t2{font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13.5px;flex:0 0 30px}
.bic.sm{width:24px;height:24px;border-radius:7px;font-size:11px;flex:0 0 24px}

.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav .it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:#5b6b81;font-weight:500;font-size:13px;cursor:pointer;border:none;background:none;text-align:left;width:100%;font-family:var(--font);position:relative;transition:background .12s,color .12s}
.nav .it svg{width:17px;height:17px;flex:0 0 17px;opacity:.85}
.nav .it:hover{background:var(--surface-2);color:var(--ink)}
.nav .it.on{background:var(--pri-50);color:var(--pri);font-weight:600}
.nav .it.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 4px 4px 0;background:var(--pri)}
.nav .it .cnt{margin-left:auto;background:var(--pri-100);color:var(--pri-700);font-size:10.5px;font-weight:600;border-radius:20px;padding:0 7px}
.side-pro{margin-top:10px;background:linear-gradient(160deg,#eef4ff,#f6f2ff);border:1px solid #e2e9fb;border-radius:14px;padding:12px}
.side-pro .hd{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:13px}
.side-pro .hd .ic{width:26px;height:26px;border-radius:8px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.side-pro .hd .pro{margin-left:auto;background:var(--purple);color:#fff;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.04em}
.side-pro p{margin:8px 0 10px;font-size:11.5px;color:var(--muted);line-height:1.45}
.side-pro .ask{width:100%;border:none;background:var(--pri);color:#fff;font-family:var(--font);font-weight:600;font-size:12.5px;border-radius:10px;padding:9px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.side-pro .ask:hover{background:var(--pri-700)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 22px}
.gsearch{flex:0 1 340px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:7px 12px;color:var(--faint)}
.gsearch input{border:none;background:none;outline:none;flex:1;font-family:var(--font);font-size:12.5px;color:var(--ink);min-width:0}
.gsearch .kbd{font-size:10px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted);font-weight:600}
.topbar .sp{flex:1}
.lang{display:flex;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:2px;font-size:12px;font-weight:600}
.lang button{border:none;background:none;padding:4px 9px;border-radius:8px;cursor:pointer;color:var(--muted);font-family:var(--font);font-weight:600;font-size:12px}
.lang button.on{background:#fff;color:var(--pri);box-shadow:var(--shadow-sm)}
.icbtn{position:relative;width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:#475569}
.icbtn:hover{background:var(--surface-2)}
.icbtn .dot{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;min-width:17px;height:17px;border-radius:20px;display:grid;place-items:center;padding:0 4px;border:2px solid #fff}
.avatar{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 6px;border-radius:12px}
.avatar:hover{background:var(--surface-2)}
.avatar .pic{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#93c5fd,#c4b5fd);position:relative;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.avatar .pic::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.avatar .nm{font-weight:600;font-size:12.5px;line-height:1.2}
.avatar .rl{font-size:10.5px;color:var(--muted)}

/* ---------- page head ---------- */
.pagehead{display:flex;align-items:flex-start;gap:14px;margin:4px 0 16px;flex-wrap:wrap}
.pagehead .tt h1{font-size:21px;font-weight:700}
.pagehead .tt h1 .bc{color:var(--muted);font-weight:500}
.pagehead .tt .sub{color:var(--muted);font-size:12.5px;margin-top:2px}
.pagehead .sp{flex:1}
.pagehead .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------- buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:8px 14px;font-family:var(--font);font-weight:600;font-size:12.5px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-2);transition:all .12s;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn.pri:hover{background:var(--pri-700)}
.btn.soft{background:var(--pri-50);border-color:var(--pri-100);color:var(--pri)}
.btn.soft:hover{background:var(--pri-100)}
.btn.danger{background:var(--red-bg);border-color:#fbd5d5;color:var(--red-d)}
.btn.sm{padding:5px 10px;font-size:11.5px;border-radius:8px}
.btn.block{width:100%;justify-content:center}
.btn svg{width:14px;height:14px}
.btn:disabled{opacity:.55;cursor:default}
.input,.select,textarea.input{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 11px;font-family:var(--font);font-size:12.5px;color:var(--ink);outline:none;transition:border .12s}
.input:focus,.select:focus,textarea.input:focus{border-color:var(--pri-500);box-shadow:0 0 0 3px var(--pri-50)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
label.fl{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin:0 0 5px}
label.fl .req{color:var(--red)}
.fhint{font-size:10.5px;color:var(--faint);margin-top:4px}
.frow{display:grid;gap:14px}
.frow.c2{grid-template-columns:1fr 1fr}
.frow.c3{grid-template-columns:1fr 1fr 1fr}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.card-h h3{font-size:13.5px;font-weight:600}
.card-h .sub{font-size:11px;color:var(--muted);font-weight:400}
.card-h .sp{flex:1}
.card-h .lnk{font-size:11.5px;font-weight:600;color:var(--pri);cursor:pointer;white-space:nowrap}
.card-b{padding:14px 16px}
.card-b.tight{padding:8px 10px}
.card-b.flush{padding:0}

/* grid helpers */
.grid{display:grid;gap:14px;margin-bottom:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.layout-rail{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}

/* ---------- stat card ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat .top{display:flex;align-items:center;gap:8px}
.stat .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px}
.stat .lb{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.3}
.stat .val{font-size:22px;font-weight:700;margin-top:6px;letter-spacing:-.02em;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.stat .val .unit{font-size:12px;color:var(--faint);font-weight:500}
.stat .foot{font-size:10.5px;color:var(--faint);margin-top:2px}
.stat .spark{margin-top:6px}
.delta{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:2px}
.delta.up{color:var(--green)}
.delta.down{color:var(--red)}
.delta.flat{color:var(--faint)}
.ic.blue{background:var(--pri-50);color:var(--pri)}
.ic.green{background:var(--green-bg);color:var(--green)}
.ic.orange{background:var(--orange-bg);color:var(--orange-d)}
.ic.red{background:var(--red-bg);color:var(--red-d)}
.ic.purple{background:var(--purple-bg);color:var(--purple)}
.ic.teal{background:var(--teal-bg);color:var(--teal)}
.ic.pink{background:var(--pink-bg);color:var(--pink)}
.ic.yellow{background:var(--yellow-bg);color:#a16207}
.ic.gray{background:#f1f5f9;color:#475569}
.ic.dark{background:#0f172a;color:#fff}

/* ---------- badges & chips ---------- */
.bd{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 9px;white-space:nowrap}
.bd.blue{background:var(--pri-50);color:var(--pri)}
.bd.green{background:var(--green-bg);color:var(--green-600)}
.bd.orange{background:var(--orange-bg);color:var(--orange-d)}
.bd.red{background:var(--red-bg);color:var(--red-d)}
.bd.purple{background:var(--purple-bg);color:var(--purple)}
.bd.gray{background:#f1f5f9;color:#475569}
.bd.teal{background:var(--teal-bg);color:var(--teal)}
.bd.pink{background:var(--pink-bg);color:var(--pink)}
.bd.yellow{background:var(--yellow-bg);color:#a16207}
.bd.out{background:#fff;border:1px solid var(--line);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:500;color:var(--ink-2)}
.chip .x{cursor:pointer;color:var(--faint);font-weight:600;font-size:12px;line-height:1}
.chip .x:hover{color:var(--red)}
.chip.add{color:var(--pri);border-style:dashed;cursor:pointer;background:#fff}
.chip.add:hover{background:var(--pri-50)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chipbox{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}

/* score pill */
.score{display:inline-grid;place-items:center;min-width:34px;height:24px;border-radius:8px;font-weight:700;font-size:12px;padding:0 6px}
.score.hi{background:var(--green-bg);color:var(--green-600)}
.score.md{background:var(--orange-bg);color:var(--orange-d)}
.score.lo{background:#f1f5f9;color:#64748b}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font-size:10.5px;font-weight:600;color:var(--muted);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2);position:sticky;top:0}
.tbl th .sort{cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{cursor:pointer;transition:background .1s}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.sel{background:var(--pri-50)}
.tbl .cnm{font-weight:600;color:var(--ink)}
.tbl .csub{font-size:10.5px;color:var(--faint)}
.tbl .num{font-weight:600}
.ck{width:15px;height:15px;accent-color:var(--pri);cursor:pointer}
.pgn{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.pgn .sp{flex:1}
.pgn .pages{display:flex;gap:4px;align-items:center}
.pgn .pg{min-width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;padding:0 4px}
.pgn .pg.on{background:var(--pri);border-color:var(--pri);color:#fff}
.pgn .pg:hover:not(.on){background:var(--surface-2)}
.pgn select{border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-family:var(--font);font-size:11.5px;color:var(--muted);background:#fff}

/* platform mark */
.pmk{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:11px;flex:0 0 24px;vertical-align:middle}
.pmk svg{width:14px;height:14px}
.pmk.sm{width:19px;height:19px;border-radius:6px}
.pmk.sm svg{width:11px;height:11px}
.pmk.lg{width:38px;height:38px;border-radius:11px}
.pmk.lg svg{width:21px;height:21px}
.pstack{display:inline-flex;align-items:center}
.pstack .pmk{margin-right:-5px;border:2px solid #fff}

/* ---------- filter bar ---------- */
.filters{display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px}
.filters .f label{display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin-bottom:4px}
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* ---------- progress ---------- */
.pbar{height:6px;border-radius:20px;background:var(--line-2);overflow:hidden;flex:1}
.pbar>i{display:block;height:100%;border-radius:20px;background:var(--pri)}
.pbar.green>i{background:var(--green)}
.pbar.orange>i{background:var(--orange)}
.pbar.red>i{background:var(--red)}
.pbar.purple>i{background:var(--purple)}
.pline{display:flex;align-items:center;gap:9px;font-size:11.5px}
.pline .pl{width:120px;color:var(--muted);flex:0 0 auto}
.pline .pv{font-weight:600;min-width:34px;text-align:right}

/* ---------- kv rows ---------- */
.kv{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12px}
.kv .k{color:var(--muted);flex:0 0 108px;font-size:11.5px}
.kv .v{font-weight:500;min-width:0}
.kv.line{border-bottom:1px dashed var(--line-2)}

/* ---------- list rows ---------- */
.lrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12px}
.lrow:last-child{border-bottom:none}
.lrow .grow{flex:1;min-width:0}
.lrow .t1{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .t2{font-size:10.5px;color:var(--faint)}
.lrow .rt{text-align:right;flex:0 0 auto}

/* ---------- alerts ---------- */
.alert{display:flex;gap:10px;border-radius:12px;padding:11px 13px;font-size:12px;border:1px solid transparent;align-items:flex-start}
.alert svg{flex:0 0 16px;width:16px;height:16px;margin-top:1px}
.alert.info{background:var(--pri-50);border-color:var(--pri-100);color:#1e40af}
.alert.warn{background:var(--orange-bg);border-color:#fde4bd;color:#92400e}
.alert.err{background:var(--red-bg);border-color:#fbd5d5;color:#991b1b}
.alert.ok{background:var(--green-bg);border-color:#c9eed6;color:#166534}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs .tab{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;gap:6px}
.tabs .tab.on{background:#fff;border-color:var(--pri);color:var(--pri);box-shadow:0 0 0 3px var(--pri-50)}
.tabs .tab:hover:not(.on){background:var(--surface-2)}
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:12px}
.tabs2 .tab{border:none;background:none;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--font);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs2 .tab.on{color:var(--pri);border-bottom-color:var(--pri)}

/* ---------- wizard steps ---------- */
.wsteps{display:flex;align-items:center;gap:0;margin:14px 0 18px;flex-wrap:wrap}
.wsteps .ws{display:flex;align-items:center;gap:9px;cursor:pointer;padding:4px 2px}
.wsteps .ws .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#eef1f7;color:var(--faint);border:1px solid var(--line)}
.wsteps .ws .t{font-size:12.5px;font-weight:600;color:var(--faint);white-space:nowrap}
.wsteps .ws.on .n{background:var(--pri);border-color:var(--pri);color:#fff}
.wsteps .ws.on .t{color:var(--ink)}
.wsteps .ws.done .n{background:var(--green-bg);border-color:#c9eed6;color:var(--green-600)}
.wsteps .ws.done .t{color:var(--ink-2)}
.wsteps .lnc{flex:1;height:1px;background:var(--line);margin:0 12px;min-width:24px}

/* ---------- kanban ---------- */
.kb-wrap{overflow-x:auto;padding-bottom:6px}
.kanban{display:flex;gap:10px;align-items:flex-start;min-width:max-content}
.kcol{width:172px;flex:0 0 172px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px}
.kcol .kh{display:flex;align-items:center;gap:6px;padding:2px 3px 8px}
.kcol .kh .t{font-weight:600;font-size:12px}
.kcol .kh .c{margin-left:auto;font-size:10.5px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 7px;font-weight:600}
.kcol .kv-sum{font-size:11px;font-weight:600;color:var(--muted);padding:0 3px 8px}
.kcol .kv-sum.lost{color:var(--red-d)}
.kcol .kv-sum.won{color:var(--green-600)}
.kcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px 10px;margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow-sm);transition:box-shadow .12s,border .12s}
.kcard:hover{box-shadow:var(--shadow)}
.kcard.sel{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-50)}
.kcard .nm{font-weight:600;font-size:12px;line-height:1.3}
.kcard .ind{font-size:10px;color:var(--faint);margin-bottom:5px}
.kcard .meta{display:flex;align-items:center;gap:5px;margin:4px 0}
.kcard .val{font-weight:700;font-size:12px;margin:3px 0}
.kcard .fup{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);margin-top:5px}
.kcard .fup .av{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#93c5fd,#c4b5fd)}
.kcard .tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.kcard .tags .tg{font-size:9px;font-weight:600;background:var(--pri-50);color:var(--pri);border-radius:5px;padding:1px 6px}
.kcard .tags .tg:nth-child(2){background:var(--purple-bg);color:var(--purple)}
.kmore{text-align:center;font-size:11px;color:var(--muted);padding:5px;cursor:pointer;border-radius:8px}
.kmore:hover{background:#fff}
.kcol.dragover{outline:2px dashed var(--pri-500);outline-offset:-2px}

/* ---------- stepper (timeline horizontal) ---------- */
.stepper{display:flex;align-items:flex-start;margin-top:6px}
.stepper .st{flex:1;text-align:center;position:relative;font-size:10.5px;color:var(--faint)}
.stepper .st .dot{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line);margin:0 auto 5px;position:relative;z-index:2;display:grid;place-items:center}
.stepper .st .dot svg{width:9px;height:9px}
.stepper .st::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line)}
.stepper .st:first-child::before{display:none}
.stepper .st.done .dot{background:var(--green);border-color:var(--green);color:#fff}
.stepper .st.done::before{background:var(--green)}
.stepper .st.cur .dot{background:var(--pri);border-color:var(--pri)}
.stepper .st.cur::before{background:var(--green)}
.stepper .st.cur .t{color:var(--pri);font-weight:600}
.stepper .st .t{font-weight:500;color:var(--ink-2)}
.stepper .st .d{font-size:9.5px;color:var(--faint)}

/* ---------- activity log ---------- */
.tl{position:relative;padding-left:16px}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.tl .ev{position:relative;padding:0 0 12px}
.tl .ev::before{content:"";position:absolute;left:-16px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--pri-150);border:2px solid #fff;box-shadow:0 0 0 1px var(--pri-150)}
.tl .ev.g::before{background:var(--green)}
.tl .ev .tm{font-size:10px;color:var(--faint)}
.tl .ev .tx{font-size:12px;font-weight:500}
.tl .ev .sb{font-size:11px;color:var(--muted)}

/* ---------- source card (data sources) ---------- */
.srccard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:12px 13px}
.srccard .hd{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.srccard .hd .tt{font-weight:600;font-size:12.5px;line-height:1.2}
.srccard .hd .cat{font-size:10px;color:var(--faint)}
.srccard .hd .st{margin-left:auto}
.srccard .rw{display:flex;justify-content:space-between;font-size:10.5px;padding:2.5px 0;color:var(--muted)}
.srccard .rw b{color:var(--ink-2);font-weight:600;text-align:right}
.srccard .rw .ok{color:var(--green-600)}

/* ---------- detail rail ---------- */
.rail{position:sticky;top:64px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 80px);overflow-y:auto;padding-right:2px}

/* ---------- toasts ---------- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{background:#0f172a;color:#fff;border-radius:12px;padding:10px 16px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:tin .25s ease;max-width:340px}
.toast.ok{background:#065f46}
.toast.err{background:#991b1b}
@keyframes tin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- modal / drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:200;animation:fin .18s ease}
@keyframes fin{from{opacity:0}to{opacity:1}}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:210;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);width:min(560px,94vw);max-height:88vh;display:flex;flex-direction:column;animation:min .2s ease}
@keyframes min{from{transform:translate(-50%,-46%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
.modal .mh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.modal .mh h3{font-size:14.5px}
.modal .mb{padding:16px 18px;overflow-y:auto}
.modal .mf{padding:13px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.xbtn{margin-left:auto;width:28px;height:28px;border-radius:8px;border:none;background:var(--surface-2);cursor:pointer;color:var(--muted);font-size:14px;display:grid;place-items:center}
.xbtn:hover{background:var(--line-2);color:var(--ink)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,94vw);background:#fff;z-index:210;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:din .22s ease}
@keyframes din{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.drawer .dh{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer .db{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.drawer .df{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px}
.drawer .df textarea{flex:1;resize:none;height:44px}
.msg{max-width:86%;border-radius:13px;padding:9px 13px;font-size:12.5px;line-height:1.55;white-space:pre-wrap}
.msg.ai{background:#fff;border:1px solid var(--line);align-self:flex-start;box-shadow:var(--shadow-sm)}
.msg.me{background:var(--pri);color:#fff;align-self:flex-end}
.msg.thinking i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--faint);margin-right:3px;animation:bl 1s infinite}
.msg.thinking i:nth-child(2){animation-delay:.15s}.msg.thinking i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- dropdown menu ---------- */
.menu{position:absolute;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);padding:6px;z-index:120;min-width:200px;animation:min2 .15s ease}
@keyframes min2{from{transform:translateY(-4px);opacity:0}to{transform:none;opacity:1}}
.menu .mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:500;cursor:pointer;color:var(--ink-2)}
.menu .mi:hover{background:var(--pri-50)}
.menu .sep{height:1px;background:var(--line-2);margin:5px 4px}
.menu .mh2{font-size:10.5px;font-weight:700;color:var(--faint);padding:6px 10px 3px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- notif ---------- */
.notif-it{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer}
.notif-it:hover{background:var(--surface-2)}
.notif-it .ic{width:30px;height:30px;border-radius:9px;flex:0 0 30px;display:grid;place-items:center}
.notif-it .t1{font-size:12px;font-weight:600;line-height:1.35}
.notif-it .t2{font-size:10.5px;color:var(--muted)}
.notif-it .tm{font-size:10px;color:var(--faint);white-space:nowrap}

/* ---------- accordion ---------- */
.acc{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:9px;overflow:hidden}
.acc .ah{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;font-weight:600;font-size:13px}
.acc .ah:hover{background:var(--surface-2)}
.acc .ab{padding:2px 16px 14px;font-size:12.5px;color:var(--ink-2);display:none;line-height:1.7}
.acc.open .ab{display:block}
.acc .chev{margin-left:auto;transition:transform .15s;color:var(--faint)}
.acc.open .chev{transform:rotate(180deg)}

/* ---------- ad preview ---------- */
.adprev{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;font-size:11px}
.adprev .ph{display:flex;align-items:center;gap:7px;padding:8px 10px}
.adprev .ph .nm{font-weight:600;font-size:11px}
.adprev .ph .sp2{font-size:9.5px;color:var(--faint)}
.adprev .art{background:linear-gradient(150deg,#0f172a,#1e3a8a);color:#fff;padding:18px 14px;min-height:110px;display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative}
.adprev .art .big{font-size:15px;font-weight:700;line-height:1.35}
.adprev .art .sm2{font-size:10px;opacity:.85}
.adprev .art .cta2{align-self:flex-start;background:#fff;color:#0f172a;font-weight:600;font-size:10px;border-radius:7px;padding:4px 10px;margin-top:4px}
.adprev .pf{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--muted);font-size:10px;border-top:1px solid var(--line-2)}

/* ---------- radar hero (AI insight) ---------- */
.hero-ai{background:linear-gradient(135deg,#f6f9ff, #f4f1ff);border:1px solid #e4eafc;border-radius:16px;padding:16px 18px;display:grid;grid-template-columns:minmax(0,1fr) 170px 170px;gap:18px;align-items:center;margin-bottom:14px}
.hero-ai .aibadge{display:inline-flex;align-items:center;gap:7px;background:var(--pri);color:#fff;font-size:11px;font-weight:700;border-radius:8px;padding:3px 9px;margin-bottom:8px}
.hero-ai p{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.hero-ai .osc{text-align:center}
.hero-ai .osc .n{font-size:34px;font-weight:700;color:var(--ink)}
.hero-ai .osc .n small{font-size:14px;color:var(--faint);font-weight:500}

/* insight card */
.inscard .irow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;padding:5.5px 0;border-bottom:1px dashed var(--line-2);font-size:11.5px;align-items:start}
.inscard .irow:last-child{border-bottom:none}
.inscard .irow .ik{color:var(--muted)}
.inscard .irow .iv{font-weight:500}

/* ---------- misc ---------- */
.divider{height:1px;background:var(--line-2);margin:10px 0}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.small{font-size:11px}
.fw6{font-weight:600}.fw7{font-weight:700}
.mt0{margin-top:0}.mt6{margin-top:6px}.mt10{margin-top:10px}.mt14{margin-top:14px}
.mb0{margin-bottom:0}.mb6{margin-bottom:6px}.mb10{margin-bottom:10px}.mb14{margin-bottom:14px}
.flex{display:flex;align-items:center;gap:8px}
.flexw{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.right{text-align:right}
.center{text-align:center}
.legend{display:flex;flex-direction:column;gap:6px;font-size:10.5px}
.legend .li{display:flex;align-items:center;gap:6px}
.legend .sw{width:8px;height:8px;border-radius:3px;flex:0 0 8px}
.legend .lv{margin-left:auto;font-weight:600}
.legend .lp{color:var(--faint);font-size:9.5px;min-width:34px;text-align:right}
.donut-wrap{display:flex;align-items:center;gap:11px}
.emptybox{border:1.5px dashed var(--line);border-radius:13px;padding:22px;text-align:center;color:var(--faint);font-size:12px}
.robot{filter:drop-shadow(0 8px 16px rgba(37,99,235,.25))}
.checkrow{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12px}
.checkrow .ok2{color:var(--green);flex:0 0 16px}
.checkrow .no2{color:#cbd5e1;flex:0 0 16px}
.gcheck{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:12px;font-weight:500;cursor:pointer;background:#fff}
.gcheck input{accent-color:var(--pri)}
.gcheck.on{border-color:var(--pri-150);background:var(--pri-50)}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:2px}
.seg button{border:none;background:none;font-family:var(--font);font-size:12px;font-weight:600;color:var(--muted);border-radius:8px;padding:5px 14px;cursor:pointer}
.seg button.on{background:var(--pri);color:#fff}
.avail{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#93c5fd,#c4b5fd);display:inline-grid;place-items:center;color:#fff;font-size:9px;font-weight:700;border:1.5px solid #fff}
.map-ph{position:relative;border-radius:12px;overflow:hidden;background:#eef3f8;height:230px;border:1px solid var(--line)}
.map-dot{position:absolute;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;box-shadow:0 4px 10px rgba(15,23,42,.25);border:2px solid #fff}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- responsive ---------- */
@media (max-width:1420px){
  .g5,.g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-ai{grid-template-columns:1fr 150px 150px}
}
@media (max-width:1180px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-rail{grid-template-columns:1fr}
  .rail{position:static;max-height:none}
  .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;transform:translateX(-105%);transition:transform .2s}
  .sidebar.open{transform:none}
  .g2,.g3,.g5,.g6{grid-template-columns:1fr}
  .frow.c2,.frow.c3{grid-template-columns:1fr}
  .hero-ai{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .gsearch{flex:1}
}
@media print{.sidebar,.topbar,#toasts{display:none}.shell{grid-template-columns:1fr}}