feat(theme): portal.css token aliases + legacy component layer so reconciled pages render on theme tokens

static/portal.css

@@ -72,3 +72,106 @@ a.wt-select-card .unav { flex: 0 0 auto; color: var(--color-accent); opacity: .7
 .slot-state.busy { color: #f5a623; border-color: color-mix(in srgb, #f5a623 40%, transparent); }
 .slot-state.down { color: var(--color-bad); border-color: color-mix(in srgb, var(--color-bad) 40%, transparent); }
 .slot-next { color: #f5a623; font-size: .74rem; margin-top: .35rem; }
+
+/* ---------------------------------------------------------------------------
+   Legacy token aliases — the admin-heavy pages (ops/media/access) keep their
+   own page-specific widget CSS (vbadge, slot, vtable, mbadge, sw/fld/setgrid,
+   segmented, pager, clist, crow, modal…) which references the portal's old
+   token names. Map those onto the theme tokens so the THEME still drives every
+   colour/value — change the theme and these pages follow.
+   --------------------------------------------------------------------------- */
+:root {
+  --bg: var(--color-bg);
+  --surface: var(--color-surface);
+  --surface2: var(--color-surface-2);
+  --border: var(--color-border);
+  --text: var(--color-text);
+  --muted: var(--color-muted);
+  --accent: var(--color-accent);
+  --accent2: var(--color-accent-2);
+  --ok: var(--color-good);
+}
+
+/* dashboard — minecraft server status dot */
+.mcdot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.4rem; }
+.mcdot.run { background:var(--color-good); box-shadow:0 0 6px color-mix(in srgb,var(--color-good) 50%,transparent); }
+.mcdot.off { background:var(--color-muted); }
+.mcdot.warn { background:#f5c518; }
+.mcdot.err { background:var(--color-bad); }
+
+/* theme tag variants used by the access pages */
+.wt-tag.open { color:var(--color-good); border-color:color-mix(in srgb,var(--color-good) 40%,transparent); background:color-mix(in srgb,var(--color-good) 10%,transparent); }
+.wt-tag.muted { color:var(--color-muted); }
+
+/* destructive button (access-edit confirm) */
+.wt-btn--danger { background:var(--color-bad); border-color:transparent; color:#fff; font-weight:650; }
+.wt-btn--danger:hover { filter:brightness(1.08); }
+
+/* ---------------------------------------------------------------------------
+   Legacy component classes — the reconciled admin/dashboard templates still use
+   the portal's original class names (.card/.btn/.stat/.grid/.filter/.ucard…)
+   together with their own page-local widget CSS. Defined here on the THEME
+   tokens (via the aliases above) so they render in the shared design language
+   without touching that markup/JS. (Public/core pages already use .wt-*.)
+   Follow-up: migrate these pages to .wt-* and delete this block.
+   --------------------------------------------------------------------------- */
+.lead { color:var(--muted); font-size:1.05rem; max-width:46rem; }
+
+.filter { margin:1.4rem 0 .2rem; position:relative; max-width:22rem; }
+.filter input { padding-left:2.2rem; }
+.filter .mag { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--muted); }
+
+.grid { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); margin-top:1rem; }
+
+.card {
+  display:flex; flex-direction:column; min-height:7.25rem; height:100%; position:relative;
+  background:color-mix(in srgb, var(--surface) 70%, transparent);
+  border:1px solid var(--border); border-radius:1rem; padding:1.1rem 1.15rem;
+  text-decoration:none; color:inherit;
+  transition:border-color .18s ease, transform .18s ease, background .18s ease;
+}
+a.card:hover, .card:hover { border-color:var(--accent); transform:translateY(-3px);
+  background:color-mix(in srgb, var(--surface) 92%, transparent); }
+.card.hidden { display:none; }
+.card .head { display:flex; align-items:center; gap:.65rem; }
+.card .ico { flex:0 0 auto; width:2.1rem; height:2.1rem; border-radius:.6rem; display:grid; place-items:center;
+  font-weight:700; font-size:1rem; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); overflow:hidden; }
+.card .ico img { width:100%; height:100%; object-fit:contain; }
+.card .name { font-weight:600; letter-spacing:-.01em; line-height:1.25; }
+.card .sub { color:var(--muted); font-size:.86rem; margin-top:.6rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.card .go { color:var(--accent); font-size:.8rem; margin-top:.7rem; opacity:.85; }
+
+.btn { display:inline-block; background:var(--accent); color:var(--color-accent-ink); font-weight:600;
+  text-decoration:none; padding:.6rem 1.15rem; border-radius:.7rem; border:0; cursor:pointer; font:inherit; font-size:.95rem; }
+.btn:hover { filter:brightness(1.08); }
+.btn.secondary { background:var(--surface2); color:var(--text); border:1px solid var(--border); }
+
+table { width:100%; border-collapse:collapse; }
+th, td { border:1px solid var(--border); padding:.45rem .55rem; text-align:left; }
+th { color:var(--muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; }
+
+.flash { background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid var(--accent);
+  color:var(--accent); border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; }
+.err { background:color-mix(in srgb, #f5a623 14%, transparent); border:1px solid #f5a623;
+  color:#f5a623; border-radius:.7rem; padding:.65rem .95rem; margin:1rem 0; font-size:.9rem; }
+.muted { color:var(--muted); }
+
+.stat { background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--border); border-radius:1rem; padding:1.3rem; }
+.stat .n { font-size:2.1rem; font-weight:800; letter-spacing:-.02em; }
+
+.ucards { display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); margin-top:.6rem; }
+.ucard { position:relative; display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--border);
+  border-radius:.8rem; background:color-mix(in srgb,var(--surface) 70%,transparent); cursor:pointer; min-width:0;
+  transition:border-color .15s, background .15s; }
+.ucard:hover { border-color:var(--accent); }
+.ucard input { position:absolute; opacity:0; pointer-events:none; }
+.ucard:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
+.ucard .uini { flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:.5rem; display:grid; place-items:center;
+  font-weight:700; font-size:.85rem; background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--accent); }
+.ucard .ubody { min-width:0; flex:1; }
+.ucard .uname { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.ucard .usub { color:var(--muted); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.ucard .uchk { flex:0 0 auto; width:1.25rem; height:1.25rem; border:1.5px solid var(--border); border-radius:.35rem;
+  display:grid; place-items:center; color:transparent; font-size:.8rem; font-weight:700; }
+.ucard:has(input:checked) .uchk { background:var(--accent); border-color:var(--accent); color:var(--color-accent-ink); }
+.ucard.hidden { display:none; }