: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-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; }
        /* 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 column board: horizontal scroll; empty columns collapse to a thin strip */
        .kanban-board { display:flex; gap:0.75rem; align-items:flex-start; overflow-x: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:100%; min-width:240px; flex:0 0 auto; transition:min-width .15s, opacity .15s; }
        .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-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:active { cursor:grabbing; }
        .kanban-card.dragging { opacity:0.5; }
        .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; }
        /* 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; }

        @media (max-width:720px) {
            .sidebar { width:64px; padding:0.75rem 0; }
            .sidebar .brand h5 span, .nav-link, .nav-section-title, .balance-card, .sidebar-footer { font-size:0; }
            .nav-link { justify-content:center; }
            .main { margin-left:64px; padding:1rem; }
        }