:root { --bg:#0b0f14; --panel:#121820; --edge:#243040; --text:#e6edf3;
        --muted:#8b98a5; --accent:#27a145; --err:#f85149;
        --field:#0d1319; --btn:#1a2230; --hover:#121a24; --warn:#e3b341; }
body.light { --bg:#f4f6f9; --panel:#ffffff; --edge:#d7dde6; --text:#131a24;
        --muted:#5b6774; --err:#b62324;
        --field:#f0f3f7; --btn:#e6eaf1; --hover:#eef1f6; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
       font:15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif; }
body.appmode { overflow:hidden; display:flex; flex-direction:column; }
body.appmode header { flex:none; }
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, textarea { width:100%; padding:10px 12px; border-radius:8px;
        border:1px solid var(--edge); background:var(--field); color:var(--text);
        font:inherit; }
textarea { min-height:74px; resize:vertical; }
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:var(--warn); 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; flex:1; display:flex; flex-direction:column; min-height:0; }
.topbar { display:flex; align-items:center; gap:12px; padding:12px 28px;
          border-bottom:1px solid var(--edge); flex:none; }
.topbar button { margin-top:0; }
.navtab { border:none; background:none; color:var(--muted); font-size:.95rem;
          padding:8px 14px; border-radius:8px; }
.navtab:hover { background:var(--hover); filter:none; color:var(--text); }
.navtab.on { background:var(--accent); color:#fff; }
.shell { display:flex; flex:1; min-height:0; }
#side { width:300px; border-right:1px solid var(--edge); display:flex;
        flex-direction:column; min-height:0; }
.railwrap { flex:1; overflow-y:auto; padding:14px 10px; }
.railitem { display:flex; justify-content:space-between; gap:8px; padding:8px 12px;
            border-radius:8px; cursor:pointer; font-size:.9rem; align-items:center; }
.railitem:hover { background:var(--hover); }
.railitem.on { background:var(--accent); color:#fff; }
.railitem .cnt { color:var(--muted); flex:none; }
.railitem.on .cnt { color:#d6f5df; }
.railhead { padding:10px 12px 4px; font-size:.72rem; color:var(--muted);
            text-transform:uppercase; letter-spacing:.5px; }
.userbox { border-top:1px solid var(--edge); padding:14px 16px; }
.urow { display:flex; align-items:center; }
.urow b { font-size:.95rem; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; max-width:140px; }
.ulinks { display:flex; gap:4px; margin-top:10px; flex-wrap:wrap; }
button.ghost { margin:0; padding:6px 8px; border:none; background:none;
               color:var(--text); font-size:.82rem; font-weight:500;
               display:inline-flex; align-items:center; gap:6px; border-radius:8px; }
button.ghost:hover { background:var(--hover); filter:none; }
button.ghost svg { width:14px; height:14px; }
#content { flex:1; padding:14px 22px; overflow-y:auto; min-height:0; }
#content .card { margin:6vh auto; }
#content .card.wide { max-width:1100px; margin:14px auto; }
.card.wide h2.sub {
  margin:38px 0 14px; padding-top:26px; border-top:1px solid var(--edge);
  color:var(--text); font-size:1rem; }
.card.wide h1 + h2.sub { border-top:none; padding-top:0; margin-top:22px; }
#profilepanel h2.sub { margin:38px 0 14px; padding-top:26px;
  border-top:1px solid var(--edge); color:var(--text); font-size:1rem; }
#profilepanel .muted + h2.sub, #profilepanel h1 + h2.sub {
  border-top:none; padding-top:0; margin-top:22px; }

/* ---- tables ---- */
.utable { width:100%; border-collapse:collapse; margin-top:8px; font-size:.88rem; }
.utable td, .utable th { padding:7px 10px; border-bottom:1px solid var(--edge);
                         text-align:left; }
.utable th { color:var(--muted); font-weight:600; font-size:.75rem;
             text-transform:uppercase; letter-spacing:.4px; }
.utable button { margin:0 6px 0 0; padding:4px 10px; font-size:.76rem; }
.utable tr.rowlink { cursor:pointer; }
.utable tr.rowlink:hover td { background:var(--hover); }

/* ---- badges & chips ---- */
.badge { display:inline-block; font-size:.68rem; border:1px solid var(--edge);
         border-radius:99px; padding:1px 9px; color:var(--muted);
         white-space:nowrap; vertical-align:1px; }
.badge.conf-verified-official { color:var(--accent); border-color:var(--accent); }
.badge.conf-vendor-published { color:#58a6ff; border-color:#58a6ff; }
.badge.conf-partner-estimate { color:var(--warn); border-color:var(--warn); }
.badge.conf-inferred { color:var(--muted); }
.badge.custom { color:var(--warn); border-color:var(--warn); }
.chip { display:inline-block; font-size:.72rem; font-weight:700; border-radius:99px;
        padding:2px 11px; text-transform:uppercase; letter-spacing:.4px; }
.chip.migrate     { background:#1d3a5f; color:#79b8ff; }
.chip.retain      { background:#1e3a2a; color:#7ee2a0; }
.chip.consolidate { background:#3d2f14; color:#e3b341; }
.chip.adopt       { background:#33244d; color:#c297ff; }
.chip.sunset      { background:#4b1f22; color:#ff9b9b; }
body.light .chip.migrate     { background:#dbe9ff; color:#0b5cad; }
body.light .chip.retain      { background:#dcf5e4; color:#116632; }
body.light .chip.consolidate { background:#fdf1d2; color:#7a5b00; }
body.light .chip.adopt       { background:#ecdcff; color:#5a2ea6; }
body.light .chip.sunset      { background:#ffdedc; color:#8f1d1d; }
.status { font-size:.72rem; font-weight:700; text-transform:uppercase;
          letter-spacing:.4px; }
.status.proposed { color:var(--muted); }
.status.under_review { color:var(--warn); }
.status.approved { color:var(--accent); }
.status.locked { color:#58a6ff; }

/* ---- catalog detail ---- */
.facthead { display:flex; align-items:center; gap:10px; padding:12px 4px;
            border-top:1px solid var(--edge); cursor:pointer; user-select:none; }
.facthead:hover { background:var(--hover); }
.facthead b { font-size:.92rem; }
.facthead .arrow { color:var(--muted); font-size:.8rem; width:14px; flex:none; }
.factbody { padding:2px 6px 16px 24px; font-size:.9rem; }
.factbody .summary { margin:0 0 8px; }
.factbody .details { color:var(--muted); white-space:pre-wrap; font-size:.86rem; }
.factbody .srcs { margin-top:8px; font-size:.78rem; }
.matrix { width:100%; border-collapse:collapse; margin:10px 0; font-size:.82rem; }
.matrix td, .matrix th { border:1px solid var(--edge); padding:6px 9px;
                         text-align:left; vertical-align:top; }
.matrix th { background:var(--field); font-size:.72rem; text-transform:uppercase;
             letter-spacing:.4px; color:var(--muted); }

/* ---- project detail ---- */
.sidecols { display:flex; gap:18px; margin-top:12px; align-items:flex-start; }
.sidecol { flex:1; min-width:0; background:var(--field); border:1px solid var(--edge);
           border-radius:12px; padding:14px 16px; }
.sidecol h3 { margin:0 0 4px; font-size:.95rem; }
.approw { display:flex; align-items:center; gap:10px; padding:8px 6px;
          border-bottom:1px solid var(--edge); font-size:.88rem; }
.approw:last-child { border-bottom:none; }
.approw .meta { color:var(--muted); font-size:.76rem; }
.approw button { margin:0 0 0 auto; padding:3px 9px; font-size:.72rem; flex:none; }
.pillrow { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 0; }
.statgrid { display:flex; gap:14px; margin:14px 0 4px; flex-wrap:wrap; }
.stat { flex:1; min-width:150px; background:var(--field); border:1px solid var(--edge);
        border-radius:12px; padding:12px 16px; }
.stat b { font-size:1.35rem; display:block; }
.stat span { color:var(--muted); font-size:.78rem; }

/* ---- 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(760px, 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; }

.spinner { display:inline-block; width:13px; height:13px; margin-right:6px;
           border:2px solid var(--edge); border-top-color:var(--accent);
           border-radius:50%; vertical-align:-2px;
           animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
button:disabled { opacity:.55; cursor:default; }
/* Chrome will not fire a native title tooltip on a disabled button, so the
   tooltip lives on this wrapper instead. */
.tipwrap { display:inline-block; }
.btnlink { display:inline-block; padding:7px 13px; border-radius:7px;
           background:var(--accent); border:1px solid var(--accent);
           color:#fff; text-decoration:none; font-weight:600; }
.btnlink:hover { filter:brightness(1.08); }
.filterbar { display:flex; gap:10px; align-items:center; margin-bottom:6px; }
.filterbar input, .filterbar select { width:auto; }
.filterbar input { min-width:260px; }
.filterbar button { margin-top:0; }