:root { color-scheme: dark;
            --bg:#0d1117; --panel:#161b22; --panel-2:#0d1117; --border:#30363d;
            --text:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --green:#3fb950;
            --radius:10px; --gap:1rem;
        }
        * { box-sizing: border-box; }
        html, body { height:100%; }
        body { background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:0.9rem; margin:0; overflow:hidden; }
        a { color:var(--accent); text-decoration:none; }
        a:hover { text-decoration:underline; }
        /* scrollbars: subtle, only when scrolling */
        *::-webkit-scrollbar { width:9px; height:9px; }
        *::-webkit-scrollbar-thumb { background:#21262d; border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
        *::-webkit-scrollbar-thumb:hover { background:#30363d; }
        *::-webkit-scrollbar-track { background:transparent; }
        .sidebar { width:230px; height:100vh; background:var(--panel); position:fixed; top:0; left:0; padding:1rem 0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
        .brand { padding:0 1rem 1rem; border-bottom:1px solid var(--border); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.5rem; }
        .brand h5 { color:#f0f6fc; font-weight:700; margin:0; font-size:1rem; }
        .brand h5 span { color:var(--accent); }
        .balance-card { margin:0 0.75rem 0.5rem; padding:0.6rem; background:rgba(63,185,80,0.08); border:1px solid rgba(63,185,80,0.15); border-radius:var(--radius); text-align:center; }
        .balance-card .label { font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
        .balance-card .amount { font-size:1.15rem; font-weight:700; color:var(--green); }
        .balance-card .tokens { font-size:0.72rem; color:var(--muted); }
        .nav { flex:1; min-height:0; overflow-y:auto; padding:0.25rem 0; display:flex; flex-direction:column; }
        .nav-section-title { padding:0.6rem 1rem 0.25rem; font-size:0.62rem; color:#484f58; text-transform:uppercase; letter-spacing:0.07em; font-weight:600; }
        .nav-topic { margin-bottom:0.15rem; }
        .nav-topic-head { padding:0.45rem 1rem 0.3rem; font-size:0.7rem; color:var(--text); font-weight:600; cursor:pointer; user-select:none; display:flex; align-items:center; gap:0.4rem; }
        .nav-topic-head:hover { color:var(--accent); }
        .nav-topic-body { display:block; }
        .nav-topic-body.collapsed { display:none; }
        .nav-sub { padding:0.35rem 1rem 0.1rem; font-size:0.6rem; color:#484f58; text-transform:uppercase; letter-spacing:0.05em; }
        .nav-link { color:var(--muted); padding:0.42rem 1rem; font-size:0.85rem; border-left:3px solid transparent; display:flex; align-items:center; gap:0.55rem; cursor:pointer; user-select:none; transition:background .12s, color .12s; }
        .nav-link:hover { color:var(--text); background:rgba(88,166,255,0.05); }
        .nav-link.active { color:var(--accent); background:rgba(88,166,255,0.1); border-left-color:var(--accent); }
        .sidebar-footer { padding:0.65rem 1rem; border-top:1px solid var(--border); font-size:0.78rem; line-height:1.6; }
        .sidebar-footer a { color:var(--muted); }
        .sidebar-footer a:hover { color:var(--text); }
        /* App shell: main fills viewport, sections scroll internally (no page scroll) */
        .main { margin-left:230px; height:100vh; padding:1.5rem; overflow:hidden; display:flex; flex-direction:column; }
        .section { display:none; flex:1; min-height:0; }
        .section.active { display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
        /* Chat: section stays fixed; only the conversation scrolls */
        #section-chat.section.active { overflow:hidden; }
        /* Most sections: a scrollable body */
        .section-scroll { flex:1; min-height:0; overflow-y:auto; padding-right:0.25rem; }
        h4 { color:#f0f6fc; margin:0 0 1rem; font-size:1.1rem; }
        h6 { color:#f0f6fc; margin:0 0 0.75rem; }
        .card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin-bottom:var(--gap); }
        .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap); margin-bottom:var(--gap); }
        .stat { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius); padding:0.75rem; }
        .stat .label { font-size:0.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
        .stat .value { font-size:1.3rem; font-weight:700; color:#f0f6fc; }
        .stat .sub { font-size:0.75rem; color:var(--muted); }
        table { width:100%; border-collapse:collapse; font-size:0.82rem; }
        th, td { text-align:left; padding:0.5rem 0.6rem; border-bottom:1px solid var(--border); vertical-align:top; }
        th { color:var(--muted); font-weight:600; position:sticky; top:0; background:var(--panel); z-index:1; }
        .pill { display:inline-block; padding:1px 7px; border-radius:999px; background:#222a3d; color:#9fb3ff; font-size:0.72rem; }
        .muted { color:var(--muted); }
        .stale { color:#f0883e; font-size:0.8rem; }
        .filter { background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:0.4rem 0.6rem; font-size:0.82rem; margin-bottom:0.75rem; }
        .filter:focus, textarea:focus, input:focus, select:focus { outline:1px solid var(--accent); outline-offset:0; }
        code { font-family:ui-monospace,monospace; color:#d2a8ff; }
        textarea { width:100%; min-height:280px; background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0.6rem; font-family:ui-monospace,monospace; font-size:0.82rem; }
        .btn { background:#21262d; color:var(--text); border:1px solid var(--border); border-radius:6px; padding:0.35rem 0.7rem; font-size:0.8rem; cursor:pointer; transition:background .12s; }
        .btn:hover { background:var(--border); }
        .btn-primary { border-color:var(--accent); color:var(--accent); }
        .btn-primary:hover { background:rgba(88,166,255,0.12); }
        .btn-danger { border-color:#f85149; color:#f85149; }
        .loading { color:var(--muted); padding:0.75rem 0; }
        .badge { display:inline-block; padding:1px 7px; border-radius:999px; font-size:0.7rem; }
        .badge-ok { background:rgba(63,185,80,0.15); color:var(--green); }
        .badge-warn { background:rgba(240,136,62,0.15); color:#f0883e; }
        .badge-info { background:rgba(88,166,255,0.15); color:var(--accent); }
        .badge-sec { background:var(--border); color:var(--muted); }
        .doc-tabs { display:flex; gap:0.4rem; margin-bottom:0.75rem; flex-wrap:wrap; }
        .doc-tab { padding:0.35rem 0.7rem; border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:0.8rem; color:var(--muted); transition:all .12s; }
        .doc-tab:hover { color:var(--text); }
        .doc-tab.active { color:var(--accent); border-color:var(--accent); background:rgba(88,166,255,0.1); }
        /* Chat: only the conversation scrolls inside the section */
        #section-chat { gap:0.75rem; }
        #section-chat .card { display:flex; flex-direction:column; min-height:0; flex:1; }
        #section-chat .chat-container { flex:1; min-height:0; }
        .chat-container { flex:1; min-height:0; overflow-y:auto; padding:0.5rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-2); }
        .chat-msg { margin-bottom:0.6rem; display:flex; gap:0.5rem; }
        .chat-msg .bubble { padding:0.45rem 0.7rem; border-radius:10px; max-width:80%; font-size:0.85rem; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
        .chat-msg.user .bubble { background:rgba(88,166,255,0.1); border:1px solid rgba(88,166,255,0.2); margin-left:auto; }
        .chat-msg.assistant .bubble { background:rgba(63,185,80,0.08); border:1px solid rgba(63,185,80,0.15); }
        .chat-input-row { display:flex; gap:0.5rem; }
        .chat-input-row .filter { margin-bottom:0; flex:1; }
        .empty-state { color:var(--muted); text-align:center; padding:2rem 1rem; font-size:0.85rem; }
        /* Network statistics grid (DASH-5) */
        .stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:0.6rem; margin-top:0.5rem; }
        .stat { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:0.6rem 0.7rem; }
        .stat-v { font-size:1.05rem; font-weight:600; color:var(--fg); }
        .stat-l { font-size:0.72rem; color:var(--muted); margin-top:0.15rem; }
        /* Pricing: keep filter + heading fixed, only the long table scrolls */
        #pricing-table-wrap { max-height:52vh; overflow:auto; border:1px solid var(--border); border-radius:8px; }
        #pricing-table-wrap table { margin:0; }
        #history-wrap { max-height:30vh; overflow:auto; }
        /* Kanban: keep the runs table contained so the stats stay visible */
        #kanban-runs { max-height:46vh; overflow:auto; }
        /* Kanban: vertical stack of columns (pipeline top-to-bottom) */
        .kanban-board { display:flex; flex-direction:column; gap:0.75rem; align-items:stretch; overflow-y:auto; padding-bottom:0.5rem; min-height:0; flex:1; }
        .kanban-col { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; max-height:340px; min-width:0; flex:0 0 auto; transition:min-width .15s, opacity .15s; }
        .kanban-col.collapsed .kanban-col-body { display:none; }
        .kanban-col-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border); font-size:0.82rem; font-weight:600; color:#f0f6fc; cursor:pointer; user-select:none; }
        .kanban-col-head .count { background:var(--border); color:var(--muted); border-radius:999px; padding:0 0.5rem; font-size:0.7rem; font-weight:600; }
        .kanban-col-head .ktokens { color:var(--muted); font-size:0.7rem; font-weight:500; margin-left:auto; margin-right:0.4rem; }
        .kanban-control { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin:0.5rem 0 0.75rem; padding:0.5rem 0.6rem; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
        .kanban-control .kb-ctl-left, .kanban-control .kb-ctl-right { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
        .kanban-control .kb-runner { color:var(--muted); font-size:0.8rem; }
        .kanban-control .btn-toggle { border:1px solid var(--border); background:transparent; color:var(--muted); }
        .kanban-control .btn-toggle.on { background:#238636; border-color:#238636; color:#fff; }
        .kanban-control select.filter { min-width:160px; }
        .kb-ctl-label { color:var(--muted); font-size:0.78rem; padding-right:0.2rem; }
        .modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
        .modal-box { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); width:min(1000px,96vw); max-height:92vh; overflow:auto; box-shadow:0 10px 40px rgba(0,0,0,.5); }
        .modal-head { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 1rem; border-bottom:1px solid var(--border); }
        .modal-head h4 { margin:0; }
        .modal-body { padding:1rem; }
        .kb-edit-table { width:100%; border-collapse:collapse; }
        .kb-edit-table tr { border-bottom:1px solid var(--border); }
        .kb-edit-table td { padding:0.45rem 0.4rem; vertical-align:top; }
        .kb-edit-table td.kb-fld { width:22%; color:var(--muted); font-size:0.78rem; padding-top:0.7rem; }
        .kb-edit-table td.kb-val { width:70%; }
        .kb-edit-table input, .kb-edit-table textarea, .kb-edit-table select { width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:0.4rem 0.5rem; font-size:0.85rem; box-sizing:border-box; }
        .kb-edit-table td.kb-val textarea { width:100%; }
        #kb-card-edit-body, #kb-edit-prompt { min-height:300px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.8rem; line-height:1.4; }
        .modal-foot { display:flex; gap:0.5rem; justify-content:flex-end; padding:0.7rem 1rem; border-top:1px solid var(--border); }
        .modal-box.compact { width:min(680px,96vw); }
        .modal-body.compact-body { padding:0.6rem 0.8rem; }
        .kb-card-grid { display:flex; flex-direction:column; gap:0.35rem; }
        .kb-card-row { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
        .kb-card-cell { display:flex; flex-direction:column; gap:0.15rem; }
        .kb-card-cell label.kb-fld { font-size:0.72rem; color:var(--muted); white-space:nowrap; }
        .kb-card-cell input, .kb-card-cell select { width:100%; padding:0.2rem 0.35rem; font-size:0.78rem; background:var(--bg); color:var(--fg); border:1px solid transparent; border-radius:4px; box-sizing:border-box; }
        .kb-card-cell input:hover, .kb-card-cell select:hover { border-color:var(--border); }
        .kb-card-cell input:focus, .kb-card-cell select:focus { border-color:var(--accent); background:var(--panel-2); outline:none; }
        .kb-card-cell textarea { width:100%; min-height:50px; padding:0.2rem 0.35rem; font-size:0.78rem; background:var(--bg); color:var(--fg); border:1px solid transparent; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; line-height:1.4; resize:vertical; box-sizing:border-box; }
        .kb-card-cell textarea:hover { border-color:var(--border); }
        .kb-card-cell textarea:focus { border-color:var(--accent); background:var(--panel-2); outline:none; }
        .kb-card-full { grid-column:1 / -1; }
        .kb-card-body-row { margin-top:0.3rem; }
        .model-search { cursor:pointer; }
        .model-search:focus { background:var(--panel-2); }
        .model-dropdown { position:fixed; z-index:2000; }
        .model-dropdown-item { padding:0.3rem 0.6rem; cursor:pointer; font-size:0.78rem; border-bottom:1px solid var(--border); }
        .model-dropdown-item:hover { background:var(--panel-2); }
        .kanban-col-body { flex:1; min-height:0; overflow-y:auto; padding:0.5rem; display:flex; flex-direction:column; gap:0.4rem; }
        .kanban-card { background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:0.5rem 0.6rem; font-size:0.8rem; line-height:1.35; cursor:grab; }
        .kanban-card.dragging { opacity:0.4; border-style:dashed; }
        .kanban-col.drop-target { outline:2px dashed var(--accent,#ffd23f); outline-offset:-3px; }
        .kb-ctl-label { color:var(--muted); font-size:0.78rem; padding-right:0.2rem; }
        .kanban-card:active { cursor:grabbing; }
        .kanban-col.drag-over { outline:2px dashed var(--accent); outline-offset:-2px; background:rgba(88,166,255,0.06); }
        .kanban-card .t { color:var(--text); }
        .kanban-card .m { color:var(--muted); font-size:0.72rem; margin-top:0.2rem; }
        .kb-col-title:focus { outline:none; }
        .kb-col-prompt { border-top:1px solid var(--border); padding:0.35rem 0.5rem; font-size:0.72rem; color:var(--muted); background:rgba(88,166,255,0.04); font-style:italic; line-height:1.35; }
        /* Idle column header: red to signal inactivity */
        .kanban-col-head.idle { color:#f85149; }
        .kanban-col-head.idle .count { background:rgba(248,81,73,0.15); color:#f85149; }
        /* Card selection checkbox */
        .kanban-card .cb { float:right; margin-right:0.3rem; margin-top:0.1rem; accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }
        .kanban-card.selected { border-color:var(--accent); background:rgba(88,166,255,0.06); }
        /* Column header action icons */
        .col-actions { display:flex; gap:0.3rem; align-items:center; }
        .col-actions button { background:none; border:none; color:var(--muted); cursor:pointer; padding:0.15rem 0.3rem; border-radius:4px; font-size:0.9rem; line-height:1; }
        .col-actions button:hover { color:var(--text); background:rgba(255,255,255,0.05); }
        .col-actions .del-btn:hover { color:#f85149; background:rgba(248,81,73,0.1); }
        .col-actions .edit-btn:hover { color:var(--accent); background:rgba(88,166,255,0.1); }
        /* Batch action bar */
        #kb-batch-bar { display:none; align-items:center; gap:0.5rem; padding:0.45rem 0.7rem; background:rgba(88,166,255,0.1); border:1px solid var(--accent); border-radius:6px; margin-bottom:0.5rem; font-size:0.8rem; }
        #kb-batch-bar.visible { display:flex; }
        #kb-batch-bar .bb-count { color:var(--accent); font-weight:600; }
        #kb-batch-bar .bb-actions { display:flex; gap:0.35rem; }
        #kb-batch-bar .bb-actions button { background:#21262d; border:1px solid var(--border); color:var(--text); border-radius:5px; padding:0.25rem 0.55rem; font-size:0.78rem; cursor:pointer; }
        #kb-batch-bar .bb-actions button:hover { background:var(--border); }
        #kb-batch-bar .bb-actions .bb-del:hover { border-color:#f85149; color:#f85149; }
        #kb-batch-bar .bb-actions .bb-edit:hover { border-color:var(--accent); color:var(--accent); }
        #kb-batch-bar .bb-clear { margin-left:auto; color:var(--muted); cursor:pointer; background:none; border:none; font-size:0.78rem; }
        #kb-batch-bar .bb-clear:hover { color:var(--text); }
        /* Collapsed: empty columns become a thin vertical strip */
        .kanban-col.collapsed { min-width:34px; max-width:34px; }
        .kanban-col.collapsed .kanban-col-body { display:none; }
        .kanban-col.collapsed .kanban-col-head { writing-mode:vertical-rl; transform:rotate(180deg); justify-content:flex-end; padding:0.5rem 0.25rem; white-space:nowrap; }
        .kanban-col.collapsed .kanban-col-head .count { display:none; }
        .kanban-col.collapsed:hover { min-width:240px; max-width:240px; }
        .kanban-col.collapsed:hover .kanban-col-head { writing-mode:horizontal-tb; transform:none; padding:0.5rem 0.7rem; }
        .kanban-col.collapsed:hover .kanban-col-body { display:flex; }
        .kanban-col.collapsed:hover .kanban-col-head .count { display:inline-block; }

        /* ---- Hamburger + mobile drawer (hidden on desktop) ---- */
        .hamburger { display:none; position:fixed; top:0.6rem; left:0.6rem; z-index:1200;
            background:var(--panel); color:var(--text); border:1px solid var(--border);
            border-radius:8px; width:42px; height:42px; font-size:1.2rem; cursor:pointer;
            align-items:center; justify-content:center; }
        .nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
            z-index:1100; }

        @media (max-width:860px) {
            body { overflow:auto; }
            .hamburger { display:flex; }
            .d-flex { display:block; }
            .sidebar { position:fixed; top:0; left:0; z-index:1150; width:260px; height:100vh;
                transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.5); }
            body.nav-open .sidebar { transform:translateX(0); }
            body.nav-open .nav-overlay { display:block; }
            .main { margin-left:0; padding:3.5rem 0.85rem 1rem; height:auto; min-height:100vh;
                overflow:visible; }
            .section { flex:none; }
            .section.active { overflow:visible; }
            .grid { grid-template-columns:1fr; }
            .brand h5 { font-size:0.95rem; }
        }

        @media (min-width:861px) and (max-width:1100px) {
            .sidebar { width:200px; }
            .main { margin-left:200px; }
        }