:root { --bg:#0b0f14; --panel:#121820; --edge:#243040; --text:#e6edf3;
        --muted:#8b98a5; --accent:#8b5cf6; --err:#f85149;
        --field:#0d1319; --btn:#1a2230; --hover:#121a24; }
body.light { --bg:#f4f6f9; --panel:#ffffff; --edge:#d7dde6; --text:#131a24;
        --muted:#5b6774; --err:#b62324;
        --field:#f0f3f7; --btn:#e6eaf1; --hover:#eef1f6; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
header { padding:16px 28px; border-bottom:1px solid var(--edge); }
.logo { height:44px; display:block; }
.card { max-width:480px; margin:8vh auto; background:var(--panel);
        border:1px solid var(--edge); border-radius:14px; padding:30px; }
h1 { font-size:1.35rem; margin:0 0 6px; }
h2.sub { font-size:.95rem; margin:18px 0 6px; color:var(--muted);
         text-transform:uppercase; letter-spacing:.4px; }
label { display:block; margin:14px 0 4px; font-size:.85rem; color:var(--muted); }
input, select { width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--edge);
        background:var(--field); color:var(--text); }
button { margin-top:16px; margin-right:8px; padding:10px 18px; border-radius:8px;
         border:1px solid var(--edge); background:var(--btn); color:var(--text);
         font-weight:600; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button:hover { filter:brightness(1.08); }
a { color:var(--accent); }
.muted { color:var(--muted); }
.small { font-size:.8rem; }
.err { color:var(--err); font-size:.85rem; }
.stale { color:#e3b341; font-weight:600; }
.hidden { display:none !important; }
.spacer { flex:1; }
.role { font-size:.68rem; color:var(--muted); text-transform:uppercase;
        letter-spacing:.6px; margin-left:8px; }

/* ---- app shell ---- */
.app { padding:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 28px;
          border-bottom:1px solid var(--edge); }
.topbar select { width:auto; min-width:220px; }
.topbar button { margin-top:0; }
.shell { display:flex; min-height:calc(100vh - 150px); }
#side { width:270px; border-right:1px solid var(--edge); display:flex;
        flex-direction:column; }
.railwrap { flex:1; overflow-y:auto; padding:14px 10px; }
.railitem { display:flex; justify-content:space-between; padding:8px 12px;
            border-radius:8px; cursor:pointer; font-size:.9rem; }
.railitem:hover { background:var(--hover); }
.railitem.on { background:var(--accent); color:#fff; }
.railitem .cnt { color:var(--muted); }
.railitem.on .cnt { color:#e6ddff; }
.userbox { border-top:1px solid var(--edge); padding:14px 16px; }
.urow { display:flex; align-items:center; }
.urow b { font-size:.95rem; }
.theme { font-size:1.05rem; text-decoration:none; color:var(--muted); }
.theme:hover { color:var(--text); }
.ulinks { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
.ulinks a { font-size:.85rem; text-decoration:none; }
.ulinks a:hover { text-decoration:underline; }
#content { flex:1; padding:14px 22px; }
#content .card { margin:6vh auto; }
.objrow { display:flex; align-items:center; gap:12px; padding:9px 12px;
          border-bottom:1px solid var(--edge); font-size:.92rem; }
.objrow:hover { background:var(--hover); }
.objrow .kind { font-size:.72rem; color:var(--muted); border:1px solid var(--edge);
                border-radius:99px; padding:1px 9px; }
.objrow .tfbtn { margin:0 0 0 auto; padding:5px 13px; font-size:.8rem; }

/* ---- modals ---- */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
         align-items:center; justify-content:center; z-index:40; }
.mbox { width:min(880px, 92vw); max-height:86vh; overflow:auto; background:var(--panel);
        border:1px solid var(--edge); border-radius:14px; padding:22px; }
.mhead { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mhead button { margin-top:0; padding:6px 14px; font-size:.8rem; }
#tf_code { background:var(--field); border:1px solid var(--edge); border-radius:10px;
           padding:16px; font:12.5px/1.5 ui-monospace, Menlo, monospace;
           white-space:pre; overflow-x:auto; }
#tf_notes p { margin:8px 0 0; }
#tf_notes .warn { color:#e3b341; font-weight:600; }
#bundle_types label { display:flex; gap:8px; align-items:center; margin:8px 0;
                      font-size:.9rem; color:var(--text); }
#bundle_types input { width:auto; }