/* Exovo Portal — design system + shell.
   Implements the hi-fi Portal handoff. Brand tokens come from Exovo.Ui (tokens.css, --op-*),
   the same system the WebClient operator console uses, so the two read as one product.
   Chrome (header + admin sidebar) is dark; content surfaces are light. Default density = compact. */

/* ── Portal-local derived tokens (WCAG 2.2 AA) ─────────────────────────── */
/* Contrast-safe steps derived from the shared --op-* palette. tokens.css is shared with the
   WebClient and stays untouched; text that sits on light/soft surfaces uses these instead:
   accent 3.29:1 → accentDk 5.50:1; success/warning on their soft tints 4.38/4.39:1 → ≥4.5:1;
   hairline input borders 1.25:1 → ≥3:1 (1.4.11). */
:root {
    --portal-success-text: color-mix(in srgb, var(--op-success) 85%, black);
    --portal-warning-text: color-mix(in srgb, var(--op-warning) 85%, black);
    --portal-neutral-text: color-mix(in srgb, var(--op-muted) 85%, black);
    --portal-input-border: color-mix(in srgb, var(--op-muted) 40%, var(--op-mutedSoft));
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body { margin: 0; font-family: var(--op-sans); font-size: 13px; color: var(--op-ink); background: var(--op-bg); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--op-accentDk); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--op-sans); font-size: 25px; font-weight: 600; letter-spacing: -0.015em; margin: 0; color: var(--op-ink); }
h2 { font-family: var(--op-sans); font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--op-ink); }
/* FocusOnNavigate (Routes.razor) moves focus to the page <h1> after navigation — a programmatic,
   non-interactive focus, so suppress the UA outline. Real keyboard focus on interactive controls
   is unaffected (they keep their own :focus styles). */
h1:focus, h1:focus-visible { outline: none; }

/* Visually-hidden utility — screen-reader-only text (live regions, table header labels). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link — hidden until keyboard-focused, then floats over the sticky header. */
.portal-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--op-surface); color: var(--op-accentDk); font-weight: 600; padding: 10px 16px; border-radius: 0 0 9px 0; border: 1px solid var(--op-hairline); }
.portal-skip:focus { left: 0; }

@keyframes portal-pulse { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }

/* Reduced motion: stop the live-dot pulse and collapse decorative transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .portal-card--hover:hover { transform: none; }
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.portal-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--op-bg); }

/* Dark chrome header (58px) */
.portal-header { height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 18px; padding: 0 18px 0 20px; background: var(--op-chrome); border-bottom: 1px solid var(--op-chromeAlt); position: sticky; top: 0; z-index: 20; }
.portal-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.portal-brand:hover { text-decoration: none; }
.portal-wordmark { font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; }
.portal-kicker { font-family: var(--op-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--op-chromeIcon); border: 1px solid rgba(139,145,154,0.33); border-radius: 999px; padding: 2px 8px; }
.portal-spacer { flex: 1; }

/* Customer top-nav (within the dark header) */
.portal-nav { display: flex; gap: 4px; align-items: center; }
.portal-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 8px; color: var(--op-chromeIcon); font-size: 13.5px; font-weight: 500; }
.portal-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.portal-nav a.active { color: #fff; background: rgba(5,151,212,0.18); }

.portal-userbox { display: flex; align-items: center; gap: 9px; padding: 4px 6px 4px 4px; border-radius: 999px; background: var(--op-chromeAlt); color: #fff; font-size: 12.5px; }
.portal-userbox span { color: #fff; }
.portal-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--op-accentDk); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.portal-live-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-family: var(--op-mono); color: var(--op-chromeIcon); white-space: nowrap; }

/* Sign-out — subtle control that sits on the dark chrome (both customer + admin headers) */
.portal-signout-form { display: inline-flex; }
.portal-signout { background: none; border: none; color: var(--op-chromeIcon); font-family: var(--op-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 6px 11px; border-radius: 8px; transition: background .12s, color .12s; }
.portal-signout:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* ── Body ──────────────────────────────────────────────────────────────── */
.portal-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 22px 48px; }
.portal-muted { color: var(--op-muted); }
.portal-mono { font-family: var(--op-mono); font-variant-numeric: tabular-nums; }

/* Admin: dark sidebar + content */
.portal-admin-body { display: flex; flex: 1; min-height: 0; }
.portal-sidebar { width: 224px; flex-shrink: 0; background: var(--op-chrome); border-right: 1px solid var(--op-chromeAlt); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.portal-sidebar-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-chromeIcon); padding: 6px 12px 8px; }
.portal-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--op-chromeIcon); font-size: 13px; font-weight: 500; border-left: 2px solid transparent; transition: background .12s; }
.portal-sidebar a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.portal-sidebar a.active { color: #fff; background: rgba(5,151,212,0.16); border-left-color: var(--op-accent); font-weight: 600; }
.portal-nav-count { margin-left: auto; font-family: var(--op-mono); font-size: 11px; color: var(--op-chromeIcon); font-variant-numeric: tabular-nums; }
.portal-sidebar a.active .portal-nav-count { color: #fff; }
.portal-sidebar-spacer { flex: 1; }
.portal-sidebar-foot { margin: 0 6px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.04); }
.portal-sidebar-foot .lbl { font-size: 11px; color: var(--op-chromeIcon); margin-bottom: 6px; font-family: var(--op-mono); letter-spacing: 0.04em; }
.portal-sidebar-foot .val { font-size: 12px; color: #fff; font-weight: 500; }
.portal-admin-main { flex: 1; min-width: 0; overflow-y: auto; }
.portal-dashboard-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.portal-two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.portal-support-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.portal-admin-main > * { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 22px 22px 48px; }

/* ── Page head ─────────────────────────────────────────────────────────── */
.portal-page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--op-hairline); }
.portal-page-head > div { min-width: 0; }
.portal-kick { font-family: var(--op-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--op-muted); margin-bottom: 6px; }
.portal-page-head p { margin: 6px 0 0; color: var(--op-muted); font-size: 13.5px; }
.portal-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.portal-card { background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(10,12,16,0.03); }
.portal-card + .portal-card { margin-top: 14px; }
.portal-card--hover { transition: box-shadow .15s, border-color .15s, transform .15s; }
.portal-card--hover:hover { box-shadow: 0 4px 16px rgba(10,12,16,0.08); border-color: var(--op-mutedSoft); transform: translateY(-3px); }
.portal-card--accent { border-top: 2px solid var(--op-accent); }
.portal-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.portal-card > h2 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--op-ink); margin: 0 0 12px; }

/* Panel card (sectioned header bar) */
.portal-panel { background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 12px; overflow: hidden; overflow-x: auto; box-shadow: 0 1px 2px rgba(10,12,16,0.03); }
.portal-panel-head { padding: 12px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--op-hairline); background: var(--op-surfaceAlt); }
.portal-panel-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--op-ink); }

/* ── KPI tiles + grid ──────────────────────────────────────────────────── */
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.portal-tile { background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(10,12,16,0.03); }
.portal-tile-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-muted); display: flex; align-items: center; gap: 8px; }
.portal-tile-value, .portal-stat { font-family: var(--op-mono); font-size: 30px; font-weight: 500; color: var(--op-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.portal-tile-sub, .portal-stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-muted); }
.portal-stat-label { margin-top: 6px; }

/* ── Tables ────────────────────────────────────────────────────────────── */
.portal-table { width: 100%; border-collapse: collapse; font-family: var(--op-sans); }
.portal-panel > .portal-table { min-width: 680px; }
.portal-table th { text-align: left; padding: 8px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--op-muted); border-bottom: 1px solid var(--op-hairline); background: var(--op-surfaceAlt); white-space: nowrap; }
.portal-table td { padding: 9px 14px; font-size: 12.5px; color: var(--op-ink2); border-bottom: 1px solid var(--op-hairlineSoft); vertical-align: middle; }
.portal-table tbody tr { transition: background .12s; }
.portal-table tbody tr:hover td { background: var(--op-surfaceAlt); }
.portal-table tbody tr:last-child td { border-bottom: none; }

/* ── Pills ─────────────────────────────────────────────────────────────── */
.portal-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-family: var(--op-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; background: rgba(107,114,128,0.12); color: var(--portal-neutral-text); }
.portal-pill--online, .portal-pill--active, .portal-pill--ok { background: var(--op-successSoft); color: var(--portal-success-text); }
.portal-pill--open { background: var(--op-accentSoft); color: var(--op-accentDk); }
.portal-pill--stale, .portal-pill--suspended, .portal-pill--pending { background: var(--op-warningSoft); color: var(--portal-warning-text); }
.portal-pill--offline, .portal-pill--revoked { background: var(--op-errorSoft); color: var(--op-error); }
.portal-pill--closed, .portal-pill--unassigned, .portal-pill--neutral { background: rgba(107,114,128,0.12); color: var(--portal-neutral-text); }
.portal-pill .portal-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.portal-pill--online .portal-dot, .portal-pill--active .portal-dot, .portal-pill--open .portal-dot { animation: portal-pulse 2.4s infinite; }
.portal-statusdot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--op-success); box-shadow: 0 0 0 3px rgba(21,128,61,0.13); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--op-sans); font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; background: var(--op-accentDk); color: #fff; transition: background .14s, border-color .14s; }
.portal-btn:hover { background: color-mix(in srgb, var(--op-accentDk) 82%, black); text-decoration: none; }
.portal-btn--ghost { background: var(--op-surface); color: var(--op-ink2); border: 1px solid var(--op-hairline); }
.portal-btn--ghost:hover { background: var(--op-surface); border-color: var(--op-mutedSoft); }
.portal-btn--dark { background: var(--op-chrome); color: #fff; }
.portal-btn--dark:hover { background: var(--op-chromeAlt); }
.portal-btn--danger { background: var(--op-surface); color: var(--op-error); border: 1px solid rgba(185,28,28,0.33); }
.portal-btn--subtle { background: var(--op-accentSoft); color: var(--op-accentDk); }
.portal-btn--sm { padding: 7px 12px; font-size: 12.5px; }
.portal-btn--full { width: 100%; }
.portal-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.portal-linkbtn { background: none; border: none; color: var(--op-accentDk); font-family: var(--op-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; padding: 2px 4px; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.portal-linkbtn:hover { text-decoration: underline; }
.portal-linkbtn--danger { color: var(--op-error); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.portal-field { display: block; margin-bottom: 14px; }
.portal-field > label, .portal-field label { display: block; font-family: var(--op-sans); font-size: 12.5px; font-weight: 600; color: var(--op-ink2); margin-bottom: 7px; }
.portal-input, .portal-select, .portal-textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--portal-input-border); border-radius: 9px; font-family: var(--op-sans); font-size: 13.5px; color: var(--op-ink); background: var(--op-surface); outline: none; transition: border-color .14s, box-shadow .14s; }
.portal-input:focus, .portal-select:focus, .portal-textarea:focus { border-color: var(--op-accentDk); box-shadow: 0 0 0 3px var(--op-accentSoft); }
.portal-textarea { resize: vertical; line-height: 1.5; }
.portal-field-hint { font-size: 11.5px; color: var(--op-muted); margin-top: 6px; }
.portal-toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.portal-toolbar .portal-field { margin: 0; }

/* ── Secret key (masked + reveal/copy) ─────────────────────────────────── */
.portal-secret { display: inline-flex; align-items: center; gap: 10px; background: var(--op-surfaceAlt); border: 1px solid var(--op-hairline); border-radius: 9px; padding: 6px 10px; font-family: var(--op-mono); font-size: 13px; color: var(--op-ink); font-variant-numeric: tabular-nums; }
.portal-secret { max-width: 100%; overflow: hidden; vertical-align: middle; }
.portal-secret-mask, .portal-secret-full { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-secret--big { padding: 10px 14px; font-size: 15px; }
.portal-secret-actions { display: inline-flex; gap: 6px; }
.portal-secret-actions button { background: none; border: none; cursor: pointer; color: var(--op-muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; min-width: 24px; min-height: 24px; }
.portal-secret-actions button:hover { color: var(--op-ink2); }

/* ── Health timeline ───────────────────────────────────────────────────── */
.portal-health { display: flex; gap: 2px; align-items: flex-end; height: 38px; }
.portal-health span { flex: 1; min-width: 2px; height: 100%; border-radius: 2px; background: var(--op-hairline); }
.portal-health span.up { background: var(--op-success); }
.portal-health span.partial { background: var(--op-warning); }
.portal-health span.down { background: var(--op-error); }
.portal-health span.none { background: var(--op-hairlineSoft); opacity: 0.5; }
.portal-health-axis { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; font-family: var(--op-mono); color: var(--op-muted); }

/* ── Definition list ───────────────────────────────────────────────────── */
.portal-deflist { display: grid; grid-template-columns: 150px 1fr; gap: 14px 20px; align-items: center; margin: 0; }
.portal-deflist dt { color: var(--op-muted); font-weight: 500; font-size: 12.5px; }
.portal-deflist dd { margin: 0; color: var(--op-ink); font-size: 13.5px; }
@media (max-width: 560px) { .portal-deflist { grid-template-columns: 1fr; gap: 4px 0; } .portal-deflist dd { margin-bottom: 10px; } }
.portal-section-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-muted); }

/* ── Banners ───────────────────────────────────────────────────────────── */
.portal-banner { background: var(--op-successSoft); color: var(--portal-success-text); border: 1px solid rgba(21,128,61,0.25); padding: 12px 14px; border-radius: 9px; margin-bottom: 16px; }
.portal-error { background: var(--op-errorSoft); color: var(--op-error); border: 1px solid rgba(185,28,28,0.25); padding: 12px 14px; border-radius: 9px; margin-bottom: 16px; }

/* ── Empty state ───────────────────────────────────────────────────────── */
.portal-empty { text-align: center; padding: 40px 24px; color: var(--op-muted); }
.portal-empty-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 14px; background: var(--op-accentSoft); color: var(--op-accent); display: flex; align-items: center; justify-content: center; }
.portal-empty-title { font-size: 15px; font-weight: 600; color: var(--op-ink); margin-bottom: 6px; }

/* ── Footer (customer) ─────────────────────────────────────────────────── */
.portal-footer { padding: 16px 20px; border-top: 1px solid var(--op-hairline); color: var(--op-muted); font-size: 12px; font-family: var(--op-mono); display: flex; gap: 8px; align-items: center; }

/* ── Auth (full-bleed dark gradient, centered card) ────────────────────── */
.portal-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: radial-gradient(120% 90% at 50% -10%, var(--op-chromeAlt) 0%, var(--op-chrome) 55%); }
.portal-auth-inner, .portal-auth-wrap { width: 100%; max-width: 420px; margin: 0 auto; }
.portal-auth-brand { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 26px; }
.portal-auth-mark { width: 34px; height: 34px; border-radius: 8px; background: var(--op-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--op-sans); font-weight: 800; font-size: 19px; }
.portal-auth-wordmark { font-family: var(--op-sans); font-weight: 600; font-size: 22px; letter-spacing: 0.04em; color: #fff; text-transform: uppercase; }
.portal-auth-kicker { font-family: var(--op-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--op-chromeIcon); border: 1px solid rgba(139,145,154,0.33); border-radius: 999px; padding: 3px 9px; }
.portal-auth-card { background: var(--op-surface); border: 1px solid var(--op-hairline); border-radius: 14px; padding: 30px; transition: box-shadow .15s; }
.portal-auth-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.portal-auth-card h1 { font-size: 21px; font-weight: 600; color: var(--op-ink); margin: 0 0 6px; }
.portal-auth-card p { color: var(--op-muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 22px; }
.portal-auth-foot { text-align: center; margin-top: 18px; color: var(--op-chromeIcon); font-size: 12px; font-family: var(--op-mono); }
.portal-auth-icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.portal-auth-icon--accent { background: var(--op-accentSoft); color: var(--op-accent); }
.portal-auth-icon--success { background: var(--op-successSoft); color: var(--op-success); }
.portal-auth-chip { margin-top: 18px; padding: 10px 12px; border-radius: 9px; background: var(--op-surfaceAlt); border: 1px solid var(--op-hairline); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--op-muted); font-family: var(--op-mono); }

/* ── Secret key reveal/copy state (driven by portal.js) ────────────────── */
.portal-secret .portal-secret-full { display: none; }
.portal-secret.revealed .portal-secret-mask { display: none; }
.portal-secret.revealed .portal-secret-full { display: inline; }
.portal-secret-copy .check-ic { display: none; }
.portal-secret-copy.copied .copy-ic { display: none; }
.portal-secret-copy.copied .check-ic { display: inline-flex; color: var(--op-success); }

/* ── Hero status band (customer system) ────────────────────────────────── */
.portal-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; padding: 0; overflow: hidden; }
.portal-hero-main { padding: 20px; border-right: 1px solid var(--op-hairlineSoft); }
.portal-hero-side { padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
@media (max-width: 760px) { .portal-hero { grid-template-columns: 1fr; } .portal-hero-main { border-right: none; border-bottom: 1px solid var(--op-hairlineSoft); } }
.portal-hero-id { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.portal-hero-icon { width: 46px; height: 46px; border-radius: 11px; background: var(--op-chrome); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portal-hero-fqdn { font-family: var(--op-mono); font-size: 16px; color: var(--op-ink); font-variant-numeric: tabular-nums; }
.portal-hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }
.portal-facts { display: flex; flex-wrap: wrap; gap: 24px 30px; }
.portal-fact .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-muted); margin-bottom: 6px; }
.portal-fact .val { font-family: var(--op-mono); font-size: 16px; color: var(--op-ink); font-variant-numeric: tabular-nums; }

/* ── Ticket meta strip ─────────────────────────────────────────────────── */
.portal-metastrip { display: flex; flex-wrap: wrap; }
.portal-metastrip > div { padding: 14px 20px; flex: 1 1 auto; min-width: 140px; border-right: 1px solid var(--op-hairlineSoft); }
.portal-metastrip > div:last-child { border-right: none; }
.portal-metastrip .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-muted); margin-bottom: 6px; }
.portal-metastrip .val { font-size: 13.5px; color: var(--op-ink); font-weight: 500; }

/* ── Ticket conversation (chat bubbles) ────────────────────────────────── */
.portal-chat { padding: 4px 2px 8px; }
.portal-bubble-row { display: flex; margin-bottom: 14px; }
.portal-bubble-row.mine { justify-content: flex-end; }
.portal-bubble-col { max-width: 76%; }
.portal-bubble-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.portal-bubble-row.mine .portal-bubble-head { justify-content: flex-end; }
.portal-bubble-name { font-size: 12.5px; font-weight: 600; color: var(--op-ink); }
.portal-bubble-time { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); }
.portal-bubble { padding: 12px 15px; border-radius: 12px; border-top-left-radius: 4px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; background: var(--op-surface); color: var(--op-ink2); border: 1px solid var(--op-hairline); }
.portal-bubble-row.mine .portal-bubble { background: var(--op-accentDk); color: #fff; border: none; border-top-left-radius: 12px; border-top-right-radius: 4px; }

/* ── Info note (inline hint with icon) ─────────────────────────────────── */
.portal-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--op-muted); }
.portal-note--warn { background: var(--op-warningSoft); color: var(--op-ink2); border-radius: 9px; padding: 11px 14px; align-items: flex-start; gap: 10px; }
.portal-note--warn .ic { color: var(--op-warning); display: flex; margin-top: 1px; }

@media (max-width: 900px) {
    .portal-page-head { align-items: flex-start; flex-direction: column; }
    .portal-head-actions { margin-left: 0; flex-wrap: wrap; }
    .portal-dashboard-layout,
    .portal-two-col,
    .portal-support-grid { grid-template-columns: 1fr; }
    .portal-admin-body { flex-direction: column; }
    .portal-sidebar { width: auto; flex-direction: row; overflow-x: auto; padding: 10px; }
    .portal-sidebar-label,
    .portal-sidebar-spacer,
    .portal-sidebar-foot { display: none; }
}

@media (max-width: 640px) {
    .portal-header { gap: 10px; padding: 0 12px; overflow-x: auto; }
    .portal-nav { margin-left: 0; }
    .portal-userbox span:not(.portal-avatar) { display: none; }
    .portal-main,
    .portal-admin-main > * { padding: 18px 14px 36px; }
    .portal-grid { grid-template-columns: 1fr; }
    .portal-auth { padding: 34px 16px; }
    .portal-auth-card { padding: 24px; }
}