/* OmnibusCloud Portal — custom public-zone styles.
   The chrome (appbar, page scaffolding, cards) is MudBlazor (ThemeFactory, themed by
   PortalTheme); this file holds only what MudBlazor doesn't cover: the brand-lime override,
   the shared footer, the CSS-:target login wall, the card grid, the inline code block, the
   legal two-column layout, and the project page (5.1). Built on the inherited M3 tokens from
   _content/OutWit.Shared.Blazor.Shell/css/m3-tokens.css (--ow-navy #2B3C59, --ow-lime,
   --md-sys-color-*). */

/* Soften the inherited brand lime: the shared token (m3-tokens.css) is the raw neon
   #50FE30, but the design uses the lime tonally (mixed with white, dark-green text), not
   as a saturated fill — so full-strength reads as acid. Keep the hue, drop the saturation.
   Loaded after m3-tokens.css, so this wins and cascades to every var(--ow-lime, …) usage.
   Keep in sync with PortalTheme.LimeSoft (the MudTheme Secondary). */
:root { --ow-lime: #6AD147; --ow-mute: #5B6478; --ow-navy: #2e3c5d; }

html, body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--md-sys-color-surface, #F5F7FA);
    color: var(--md-sys-color-on-surface, #0F1626);
    -webkit-font-smoothing: antialiased;
}

/* Safety net: never let stray content widen the page (which on a phone pushed the fixed app-bar
   content — the account avatar — off the right edge). Individual wide elements scroll internally. */
body { overflow-x: hidden; }

/* Unified content width for BOTH zones (public pages + the authed AppShell) — the design's main
   column is 1040px. One value here so the two zones never differ; !important caps MudContainer's
   own MaxWidth preset. Change in one place to retune. */
.portal-w { max-width: 1040px !important; }
/* The ONE narrow width for form-like surfaces (settings/account/profile/group console/manage) —
   same 760px the wizard uses, so page widths stop jumping between screens. List/table surfaces
   (dashboard, my-projects, gallery, admin) deliberately keep the full 1040px. */
.az-narrow { max-width: 760px; margin: 0 auto; }

a { color: inherit; }

/* The brand cloud SVG is dark-navy (for light backgrounds); render it white on the
   dark (navy) appbar. */
.brand-logo-appbar { filter: brightness(0) invert(1); }

.brand-accent { color: var(--ow-lime, #50FE30); }

/* Text-align utility the pages rely on (MudBlazor doesn't ship it, so it was a no-op — hero +
   section headers across many pages were silently left-aligned). */
.text-center { text-align: center; }

/* ---- Rich footer (shared, in PublicShell — 5.8.1) ---- */
.foot { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 40px 28px 22px; background: #fff; }
.foot-cols { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-logo { font-weight: 700; font-size: 18px; }
.foot-tag { font-size: 13px; color: rgba(15, 22, 38, .6); line-height: 1.5; margin: 10px 0 0; max-width: 280px; }
.foot-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15, 22, 38, .5); margin: 0 0 12px; }
.foot-col a { display: block; font-size: 14px; color: var(--md-sys-color-on-surface, #0F1626); text-decoration: none; padding: 4px 0; }
.foot-col a:hover { color: var(--ow-navy, #2e3c5d); }
.foot-col a.io-link { color: var(--ow-navy, #2e3c5d); font-weight: 500; }

/* How-it-works closing CTA panel — a dark navy panel in BOTH themes. Defined here (not in the
   page's scoped CSS) because it sits on a <MudPaper>, which never receives the [b-xxx] scope
   attribute, so a scoped rule would not match. Uses a literal navy in light; a dark override
   (alongside .netbar) keeps it from lightening to periwinkle in dark mode. */
.hiw-cta { background: var(--ow-navy, #2e3c5d); color: #fff; border-radius: 16px; }
.foot-bottom { max-width: 1120px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(15, 22, 38, .55); }
.foot-bottom-l { display: flex; gap: 16px; align-items: center; }
.foot-bottom-l a { color: rgba(15, 22, 38, .55); text-decoration: none; }
.foot-bottom-r { display: flex; gap: 10px; align-items: center; }
.social-mini { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--md-sys-color-surface-variant, #E4EAF2); color: var(--ow-navy, #2e3c5d); text-decoration: none; transition: background .15s, color .15s; }
.social-mini svg, .social-mini .mud-icon-root { width: 19px; height: 19px; }
.social-mini:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 16%, var(--md-sys-color-surface-variant, #E4EAF2)); }
/* Footer collapse: the 4-col grid (2fr 1fr 1fr 1fr) has no min-width and overflows narrow
   phones (iPhone 12 Pro 390px etc.). Stack the brand full-width and wrap the link columns. */
@media (max-width: 600px) {
    .foot-cols { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
    .foot-brand { grid-column: 1 / -1; }
    .foot-col { min-width: 0; }
}
@media (max-width: 380px) {
    .foot-cols { grid-template-columns: 1fr; }
}

/* Admin-only build-version badge (bottom-right, every page). Unobtrusive + click-through;
   gated to admins by PortalVersionBadge — regular/anonymous users never see it. */
.portal-version-badge {
    position: fixed;
    right: 9px;
    bottom: 7px;
    z-index: 1100;
    pointer-events: none;
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--ow-mute, #5B6478);
    background: color-mix(in oklab, var(--md-sys-color-surface, #fff) 72%, transparent);
    border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea);
    padding: 3px 8px;
    border-radius: 999px;
}

/* ---- Lime CTA (login wall + style-guide empty state) ---- */
.btn-lime {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 12px 24px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ow-lime, #50FE30) 62%, #fff);
    color: #114b06;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s;
}
.btn-lime:hover { background: color-mix(in oklab, var(--ow-lime, #50FE30) 74%, #fff); }

.btn-ghost {
    padding: 12px 24px;
    border-radius: 999px;
    color: var(--ow-navy, #2e3c5d);
    text-decoration: none;
    font-weight: 500;
}
.btn-ghost:hover { background: var(--md-sys-color-surface-variant, #E4EAF2); }

/* Ghost-navy pill — the design's secondary CTA (transparent, navy text, thin navy ring, 999px).
   Pairs with .btn-lime for the navy=configure / lime=participate button discipline. */
.btn-ghost-navy {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 22px; border-radius: 999px;
    background: transparent; color: var(--ow-navy, #2e3c5d);
    border: 1px solid color-mix(in oklab, var(--ow-navy, #2e3c5d) 28%, #fff);
    font-weight: 500; text-decoration: none; transition: background .15s;
}
.btn-ghost-navy:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 6%, #fff); }

/* ---- Public/authed appbar (compact navy bar; design chrome) ---- */
.portal-appbar .mud-toolbar { min-height: 58px; }
/* Quiet nav links — muted slate-blue, soft white-wash rounded hover (the design's low-emphasis nav). */
.appbar-nav-link.mud-button-root {
    color: rgba(255, 255, 255, .80); font-size: 13px; font-weight: 500;
    border-radius: 8px; padding: 6px 12px; text-transform: none; min-width: 0;
}
.appbar-nav-link.mud-button-root:hover { background: rgba(255, 255, 255, .10); color: #fff; }
/* Sign-in = filled tonal-lime pill, dark-green text, no border, no icon (the design's primary chrome CTA). */
.appbar-signin.mud-button-root {
    background: color-mix(in oklab, var(--ow-lime, #50FE30) 30%, #fff); color: #143906;
    border-radius: 999px; font-weight: 500; padding: 6px 18px; text-transform: none; box-shadow: none;
    white-space: nowrap; flex: none;
}
.appbar-signin .mud-button-label { white-space: nowrap; }
.appbar-signin.mud-button-root:hover { background: color-mix(in oklab, var(--ow-lime, #50FE30) 44%, #fff); box-shadow: none; }
/* Brand wordmark weight (design = 500, not 700). */
.appbar-brand { font-weight: 500; font-size: 1.05rem; }
/* Hide the network-capacity pill on phones — it's wide enough to shove the account menu off the
   right edge of the app-bar. (Own rule, not Mud's d-none, so it's deterministic in the bundle.) */
@media (max-width: 599.98px) { .appbar-netpill { display: none !important; } }

/* ---- Card grid (gallery / landing peek / project) ---- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ---- Inline code block (download alt-install) ---- */
.code-line { background: #0f1320; color: #e8ecf3; border-radius: 8px; padding: 9px 12px; font-family: Consolas, monospace; font-size: 13px; margin: 6px 0; }

/* ---- Login wall (5.10) — CSS :target modal ---- */
.loginwall { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.loginwall:target { display: flex; }
.loginwall-backdrop { position: absolute; inset: 0; background: rgba(15, 19, 32, .45); backdrop-filter: blur(5px); }
.loginwall-card { position: relative; width: min(400px, 92vw); background: #fff; border-radius: 14px; padding: 28px 26px 22px; text-align: center; box-shadow: 0 16px 48px -18px rgba(15, 19, 32, .22); }
.loginwall-close { position: absolute; top: 14px; right: 16px; color: rgba(15, 22, 38, .4); text-decoration: none; font-size: 15px; }
.loginwall-ico { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; margin: 0 auto 16px; }
.loginwall-card h2 { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.loginwall-card > p { font-size: 14px; color: var(--ow-mute, #5B6478); line-height: 1.5; margin: 0 0 20px; }
.loginwall-cta { display: flex; justify-content: center; }
.loginwall-tertiary { display: flex; justify-content: center; gap: 14px; font-size: 13px; margin: 16px 0 0; }
.loginwall-tertiary a { color: var(--ow-navy, #2e3c5d); text-decoration: none; }
.loginwall-foot { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 18px -26px -22px; padding: 13px 26px; background: var(--md-sys-color-surface, #F5F7FA); border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 0 0 14px 14px; }

/* ---- Legal template (5.13) ---- */
.legal-head { padding: 28px 0 24px; border-bottom: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.legal-layout { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding-top: 28px; }
.legal-toc { position: sticky; top: 20px; align-self: start; background: var(--md-sys-color-surface, #F5F7FA); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 16px; }
.toc-l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(15, 22, 38, .5); margin: 0 0 10px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 8px; }
.legal-toc li { counter-increment: toc; font-size: 13px; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero) "  "; color: rgba(15, 22, 38, .35); }
.legal-toc a { color: rgba(15, 22, 38, .7); text-decoration: none; }
.legal-toc a:hover { color: var(--ow-navy, #2e3c5d); }
.legal-body h2 { font-size: 18px; font-weight: 500; letter-spacing: -.005em; margin: 36px 0 10px; scroll-margin-top: 20px; }
.legal-body h2:first-of-type { margin-top: 8px; }
.legal-body p, .legal-body ul { font-size: 15px; line-height: 1.6; color: rgba(15, 22, 38, .8); margin: 0 0 12px; }
.legal-body ul { padding-left: 22px; }
.legal-body a { color: var(--ow-navy, #2e3c5d); }
.legal-disclaimer { display: flex; align-items: flex-start; gap: 8px; background: var(--md-sys-color-surface, #F5F7FA); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--ow-mute, #5B6478); margin-bottom: 20px; }
@media (max-width: 720px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }

/* ---- Project page (5.1) ---- */
.pp { margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* Share popover (VM-toggled) — readonly link + copy button, anchored below the Share button. */
.pp-share-wrap { position: relative; display: inline-flex; }
.pp-share-backdrop { position: fixed; inset: 0; z-index: 1290; }
.pp-share-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1300; display: flex; gap: 8px; align-items: center; padding: 12px; min-width: 320px; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 19, 32, .25); }
.pp-share-pop .field-input { flex: 1; font-size: 12px; padding: 8px 10px; }
.pp-share-pop .btn-lime { flex: none; }
html.portal-dark .pp-share-pop { background: #1E2433; border-color: #2A3147; }
.pp-card { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; }

/* hero */
.pp-hero { overflow: hidden; }
.pp-cover { position: relative; aspect-ratio: 16 / 8; display: flex; align-items: flex-end; }
.pp-cover.is-cancelled { filter: grayscale(.5); }
.pp-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 18px -6px rgba(15, 19, 32, .5); border: 0; cursor: pointer; text-decoration: none; transition: transform .15s, background .15s; }
.pp-play:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
/* In-place hero player — fills the cover, which keeps its 16/8 aspect ratio. */
.pp-hero-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.pp-cover-meta { display: flex; align-items: center; gap: 8px; padding: 14px; }
.pp-cat { font-size: 12px; font-weight: 600; color: #fff; background: rgba(15, 19, 32, .42); border-radius: 999px; padding: 4px 11px; backdrop-filter: blur(3px); }
.pp-head { padding: 20px 24px 22px; }
.pp-title { font-size: clamp(22px, 3.4vw, 30px); font-weight: 500; letter-spacing: -.015em; line-height: 1.16; margin: 0 0 8px; }
.pp-tagline { font-size: 15px; color: rgba(15, 22, 38, .68); line-height: 1.5; margin: 0 0 18px; }
.pp-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding-top: 16px; margin-top: 2px; }
.pp-author-name { font-size: 14px; font-weight: 600; margin: 0; }
.pp-author-role { font-size: 13px; color: rgba(15, 22, 38, .55); margin: 0; }

/* action / result / cancel card */
.pp-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; }
.pp-action-l { flex: 1; min-width: 220px; }
.pp-action-r { display: flex; gap: 10px; align-items: center; }
.pp-count { font-size: 24px; font-weight: 500; margin: 0; }
.pp-count-sub { font-size: 13px; color: rgba(15, 22, 38, .6); margin: 4px 0 12px; }

.pp-bar { height: 8px; border-radius: 999px; background: var(--md-sys-color-surface-variant, #E4EAF2); overflow: hidden; }
.pp-bar-fill { height: 100%; border-radius: 999px; background: color-mix(in oklab, var(--ow-lime, #6AD147) 55%, var(--ow-navy, #2e3c5d)); transition: width .3s; }
.pp-bar-fill.done { background: var(--ow-navy, #2e3c5d); }
.pp-bar-fill.muted { background: color-mix(in oklab, var(--ow-mute, #5B6478) 50%, var(--md-sys-color-surface-variant, #E4EAF2)); }

.pp-result { padding: 20px 24px; }
.pp-result-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.pp-result-info { flex: 1; min-width: 220px; }
.pp-result-head { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 4px; }
.pp-result-meta { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; }
.pp-result-ctas { display: flex; gap: 10px; align-items: center; }

.pp-thanks { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); font-size: 14px; color: rgba(15, 22, 38, .72); line-height: 1.5; }

.pp-cancel { padding: 20px 24px; background: color-mix(in oklab, #d9685a 5%, #fff); }
.pp-cancel-head { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 4px; }
.pp-cancel-meta { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 14px; }
.pp-cancel-reason { font-size: 14px; font-style: italic; color: rgba(15, 22, 38, .78); line-height: 1.6; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; }
.pp-bar-caption { display: flex; justify-content: space-between; font-size: 12px; color: rgba(15, 22, 38, .55); margin: 8px 0 0; }

/* stat tiles */
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.pp-stats.is-cancelled { opacity: .7; }
.pp-stat { padding: 18px 20px; text-align: center; }
.pp-stat-v { font-size: 18px; font-weight: 600; margin: 0; }
.pp-stat-l { font-size: 12px; color: rgba(15, 22, 38, .55); margin: 4px 0 0; }

/* in-page tab nav */
.pp-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.pp-tab { padding: 10px 14px; font-size: 14px; text-decoration: none; color: rgba(15, 22, 38, .6); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pp-tab.on { color: var(--ow-navy, #2e3c5d); font-weight: 600; border-bottom-color: var(--ow-navy, #2e3c5d); }
.pp-tab:hover { color: var(--ow-navy, #2e3c5d); }

/* sections */
.pp-sec { padding: 20px 24px; scroll-margin-top: 80px; }
.pp-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(15, 22, 38, .5); margin: 0 0 16px; }
.pp-sec-empty { font-size: 14px; color: rgba(15, 22, 38, .5); margin: 0; }
.pp-story p { font-size: 15px; line-height: 1.65; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 12px; }
.pp-story p:last-child { margin-bottom: 0; }

/* updates timeline */
.pp-up { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--md-sys-color-surface-variant, #E4EAF2); }
.pp-up:first-of-type { border-top: 0; }
.pp-up-day { flex: 0 0 44px; text-align: center; }
/* Regular days = a plain number; only the finale update gets a tonal disc (design). */
.pp-up-num { color: var(--md-sys-color-on-surface, #0F1626); font-size: 18px; font-weight: 500; line-height: 1; margin: 0 auto; }
.pp-up-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: rgba(15, 22, 38, .45); margin-top: 3px; }
.pp-up.finale .pp-up-num, .pp-up.finale-cancel .pp-up-num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.pp-up.finale .pp-up-num { background: color-mix(in oklab, var(--ow-lime, #50FE30) 30%, #fff); color: #166a0a; }
.pp-up.finale-cancel .pp-up-num { background: color-mix(in oklab, #d9685a 22%, #fff); color: #b34a3c; }
.pp-up-body { flex: 1; min-width: 0; }
.pp-up-title { font-size: 14px; font-weight: 600; margin: 4px 0 4px; }
.pp-up-text { font-size: 13px; color: rgba(15, 22, 38, .65); line-height: 1.55; }
.pp-up-text p { margin: 0; }

/* contributor wall */
.pp-wall { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-cv { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; }
.pp-cvm { background: var(--md-sys-color-surface-variant, #E4EAF2) !important; color: rgba(15, 22, 38, .6); }

@media (max-width: 560px) {
    .pp-action, .pp-result-main { flex-direction: column; align-items: stretch; }
    .pp-action-r, .pp-result-ctas { justify-content: stretch; }
}

/* ================================================================================
   Account zone (Profile 5.4 + Settings 5.5) — ported from the design mockups, with
   design tokens mapped to the portal's m3 vars (--navy→--ow-navy, --lime→--ow-lime,
   --surf→surface, --ov→outline-variant, --on→on-surface, --mute→--ow-mute).
   ================================================================================ */
.az-title { font-size: 22px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 5px; }
.az-sub { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 18px; line-height: 1.55; }
.az-card { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 18px 20px; margin: 0 0 12px; }
.az-section-title { font-size: 15px; font-weight: 500; margin: 0 0 5px; }
.az-section-sub { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 16px; line-height: 1.55; }

/* identity header card */
.id-head { display: flex; align-items: center; gap: 18px; }
.id-avatar { position: relative; flex: none; }
.id-avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.id-av-edit { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--ow-navy, #2e3c5d); color: #fff; display: grid; place-items: center; font-size: 14px; border: 2px solid #fff; cursor: pointer; }
.id-av-file { display: none; }
.id-av-remove { position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; border-radius: 50%; background: #C2383C; color: #fff; display: grid; place-items: center; border: 2px solid #fff; cursor: pointer; padding: 0; }
.id-name { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.id-email { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.id-from { font-size: 11px; background: var(--md-sys-color-surface, #F5F7FA); color: var(--ow-mute, #5B6478); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); font-weight: 500; }
.id-since { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; }

/* edit fields + privacy chips */
.field { margin: 0 0 16px; }
.field:last-of-type { margin-bottom: 0; }
.field-row { display: flex; justify-content: space-between; align-items: center; margin: 0 0 7px; gap: 10px; }
.field-row label { font-size: 13px; font-weight: 500; }
/* "from account" badge (design 5.19) — shown on fields prefilled from the signed-in account. */
.cx-from-acc { font-size: 11px; background: var(--md-sys-color-surface, #F5F7FA); color: var(--ow-mute, #5B6478); padding: 2px 9px; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.cx-from-acc .mud-icon-root { width: 13px; height: 13px; }
.field-input.prefilled { background: var(--md-sys-color-surface, #F5F7FA); }
.req { color: var(--ow-navy, #2e3c5d); margin-left: 3px; }
.always-vis { font-size: 11px; color: var(--ow-mute, #5B6478); font-style: italic; }
.priv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: 11px; border-radius: 999px; cursor: pointer; font-weight: 500; border: 1px solid; background: transparent; font-family: inherit; }
.priv-chip.visible { color: #1E5A1E; background: color-mix(in oklab, var(--ow-lime, #50FE30) 16%, #fff); border-color: color-mix(in oklab, var(--ow-lime, #50FE30) 38%, #fff); }
.priv-chip.hidden { color: var(--ow-mute, #5B6478); background: var(--md-sys-color-surface, #F5F7FA); border-color: var(--md-sys-color-outline-variant, #dfe3ea); }
.field-hint { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 6px 0 0; line-height: 1.5; }
.field-input { width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; background: #fff; color: var(--md-sys-color-on-surface, #0F1626); outline: none; box-sizing: border-box; line-height: 1.55; }
.field-input:focus { border-color: var(--ow-navy, #2e3c5d); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ow-navy, #2e3c5d) 12%, transparent); }
textarea.field-input { min-height: 62px; resize: vertical; }
.card-foot { padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); display: flex; justify-content: flex-end; gap: 8px; }

/* ---- Contacts (5.19) — message form + direct channels (reuses .az-card / .field) ---- */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.cx-h { font-size: 14px; font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.cx-h-ico { width: 18px; height: 18px; color: var(--ow-navy, #2e3c5d); }
.cx-side { background: var(--md-sys-color-surface, #F5F7FA); }
.cx-h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ow-mute, #5B6478); font-weight: 500; margin: 0 0 12px; }
.cx-ch { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); text-decoration: none; }
.cx-ch:first-of-type { border-top: none; padding-top: 0; }
.cx-ch-ico { width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; flex: none; }
.cx-ch-ico .mud-icon-root { width: 17px; height: 17px; }
.cx-ch-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-ch-t { font-size: 13px; font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); }
.cx-ch-v { font-size: 12px; color: var(--ow-mute, #5B6478); line-height: 1.5; word-break: break-word; }
.cx-ch:hover .cx-ch-t { color: var(--ow-navy, #2e3c5d); }
/* Success state */
.cx-success { text-align: center; padding: 32px 24px; }
.cx-success-ico { color: var(--ow-lime, #6AD147); display: grid; place-items: center; margin: 0 0 10px; }
.cx-success-h { font-size: 18px; font-weight: 500; margin: 0 0 6px; color: var(--md-sys-color-on-surface, #0F1626); }
.cx-success-t { font-size: 14px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; line-height: 1.55; }
.cx-success-ref { font-size: 13px; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 14px; }
.cx-success-ref code { font-size: 13px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 8%, #fff); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 2px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
select.field-input { cursor: pointer; appearance: auto; }
.cx-turnstile { margin: 0 0 14px; min-height: 65px; }
html.portal-dark .cx-success-ref code { background: #252C3D; border-color: #2A3147; }
html.portal-dark .cx-ch-ico { background: #252C3D; border-color: #2A3147; color: #BBD0F0; }
@media (max-width: 640px) { .cx-grid { grid-template-columns: 1fr; } }

/* amber "Phase 3" preview cards */
.future-card { background: var(--md-sys-color-surface, #F5F7FA); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 18px 20px; margin: 0 0 12px; }
.future-head { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; }
.future-head .az-section-title { margin: 0; color: color-mix(in oklab, var(--md-sys-color-on-surface, #0F1626) 70%, #fff); }
.future-badge { background: color-mix(in oklab, #E29A2E 18%, #fff); color: #7A4C0A; font-size: 10px; padding: 3px 10px; border-radius: 999px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 5px; }
.future-card .az-section-sub { color: color-mix(in oklab, var(--ow-mute, #5B6478) 80%, #fff); margin-bottom: 14px; }
.ff-toggle, .pay-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; opacity: .68; }
.pay-row { align-items: center; margin: 0 0 8px; }
.pay-row:last-child { margin-bottom: 0; }
.ff-info, .pmt-info { flex: 1; min-width: 0; }
.ff-label, .pmt-label { font-size: 14px; font-weight: 500; margin: 0 0 3px; }
.ff-hint, .pmt-sub { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; line-height: 1.5; }
.pmt-ico { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 8%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; font-size: 18px; flex: none; }
.btn-connect { background: transparent; color: var(--ow-mute, #5B6478); padding: 7px 14px; border-radius: 999px; font-size: 12px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); font-weight: 500; flex: none; }

/* a static (CSS-only) switch used by the preview cards */
.css-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--md-sys-color-outline-variant, #dfe3ea); flex: none; margin-top: 2px; border: none; padding: 0; cursor: pointer; }
.css-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.css-switch.on { background: var(--ow-navy, #2e3c5d); }
.css-switch.on::after { left: 16px; }

/* Settings rows */
.settings-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ow-mute, #5B6478); background: color-mix(in oklab, var(--ow-mute, #5B6478) 10%, #fff); border-radius: 8px; padding: 5px 10px; margin: 0 0 14px; line-height: 1.4; }
.radio-row { display: flex; align-items: flex-start; gap: 13px; padding: 11px 4px; }
.radio-row + .radio-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.rmark { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--md-sys-color-outline-variant, #dfe3ea); flex: none; display: grid; place-items: center; background: #fff; margin-top: 2px; }
.radio-row.on .rmark { border-color: var(--ow-navy, #2e3c5d); }
.radio-row.on .rmark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ow-navy, #2e3c5d); }
.rinfo { flex: 1; min-width: 0; }
.rlabel { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.rhint { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; line-height: 1.5; }
.sub-row { display: flex; align-items: center; gap: 14px; padding: 11px 4px; }
.sub-row + .sub-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.sub-thumb { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; flex: none; }
.sub-thumb.open { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 86%, #fff); color: rgba(255, 255, 255, .8); }
.sub-thumb.closed { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); }
.sub-info { flex: 1; min-width: 0; }
.sub-name { font-size: 14px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-meta { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 2px 0 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; }
.setting-row + .setting-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.s-label { font-size: 14px; font-weight: 500; margin: 0; }
.s-hint { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 2px 0 0; line-height: 1.5; }
.seg { display: inline-flex; background: var(--md-sys-color-surface, #F5F7FA); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; padding: 3px; gap: 2px; flex: none; }
.seg-btn { background: transparent; color: var(--ow-mute, #5B6478); padding: 6px 13px; border: none; border-radius: 999px; font-size: 12px; font-family: inherit; font-weight: 500; cursor: pointer; }
.seg-btn.on { background: #fff; color: var(--ow-navy, #2e3c5d); box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant, #dfe3ea); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; }
.acct-row + .acct-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.acct-info { flex: 1; min-width: 0; }

/* ================================================================================
   Contributor dashboard (5.7) — ported from the design mock-dashboard, tokens mapped.
   ================================================================================ */
.dash-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
.dash-sb { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 15px 16px; }
.dash-sb-num { font-size: 24px; font-weight: 500; margin: 0; line-height: 1; }
.dash-sb-lbl { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 6px 0 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.dash-sb-sub { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 6px 0 0; display: flex; align-items: center; gap: 4px; }
.dash-sb-sub.up { color: #1E5A1E; font-weight: 500; }

/* section header */
.dash-section-act { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; gap: 14px; }
.dash-stitle { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--md-sys-color-on-surface, #0F1626); }
.dash-stitle .mud-icon-root { color: var(--ow-mute, #5B6478); }
.dash-count { color: var(--ow-mute, #5B6478); font-weight: 400; font-size: 13px; margin-left: 6px; }
.dash-add-btn { background: transparent; color: var(--ow-navy, #2e3c5d); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.dash-add-btn:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 5%, #fff); }

/* rows */
.dash-dev-row, .dash-camp-row, .dash-grp-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; text-decoration: none; color: inherit; }
.dash-dev-row + .dash-dev-row, .dash-camp-row + .dash-camp-row, .dash-grp-row + .dash-grp-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.dash-camp-row:hover, .dash-grp-row:hover { background: var(--md-sys-color-surface, #F5F7FA); border-radius: 8px; }

/* devices */
.dash-dev-icon { width: 38px; height: 38px; border-radius: 8px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; flex: none; }
.dash-dev-info { flex: 1; min-width: 0; }
.dash-dev-name { font-size: 14px; font-weight: 500; margin: 0; }
.dash-dev-spec { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 2px 0 0; }
.dash-dev-status { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex: none; }
.dash-status-line { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.dash-status-line.on { color: #1E5A1E; }
.dash-status-line.idle { color: var(--ow-mute, #5B6478); }
.dash-status-line.off { color: color-mix(in oklab, var(--ow-mute, #5B6478) 70%, #fff); }
.dash-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dash-status-line.on .dash-status-dot { background: #5DAD56; box-shadow: 0 0 0 3px color-mix(in oklab, #5DAD56 25%, transparent); }
.dash-status-line.idle .dash-status-dot { background: var(--md-sys-color-outline-variant, #dfe3ea); }
.dash-status-line.off .dash-status-dot { background: transparent; border: 1.5px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.dash-status-task { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 0; }

/* campaigns + groups */
.dash-camp-thumb { width: 60px; height: 34px; border-radius: 6px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 86%, #fff); display: grid; place-items: center; color: rgba(255, 255, 255, .85); flex: none; }
.dash-camp-thumb.cat-arch { background: color-mix(in oklab, #E29A2E 60%, var(--ow-navy, #2e3c5d)); }
.dash-camp-thumb.cat-other { background: color-mix(in oklab, #4680F9 45%, var(--ow-navy, #2e3c5d)); }
.dash-grp-icon { width: 40px; height: 40px; border-radius: 8px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; flex: none; }
.dash-camp-info { flex: 1; min-width: 0; }
.dash-camp-title { font-size: 14px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.dash-camp-meta { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 2px 0 0; }
.dash-camp-right { text-align: right; flex: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.dash-camp-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }

/* Admin section (D-125): tab bar + Downloads filters/pagination + nav badge */
.atabs { display: flex; gap: 18px; border-bottom: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); margin: 0 0 22px; }
.atab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 2px; font-size: 14px; font-weight: 500; color: var(--ow-mute, #5B6478); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.atab:hover { color: var(--ow-navy, #2e3c5d); }
.atab.on { color: var(--ow-navy, #2e3c5d); border-bottom-color: var(--ow-navy, #2e3c5d); }
.atab-cnt { font-size: 11px; font-weight: 600; background: #A15C07; color: #fff; border-radius: 999px; padding: 1px 7px; }
.nav-admin-badge { font-size: 10px; font-weight: 700; background: var(--ow-lime, #50FE30); color: #0F1626; border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
.pt-head { margin: 0 0 18px; }
.dm-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0 0 14px; }
.dm-fgroup { display: flex; gap: 6px; flex-wrap: wrap; }
.dm-fgroup + .dm-fgroup { padding-left: 18px; border-left: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.dm-fpill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ow-mute, #5B6478); background: transparent; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.dm-fpill:hover { border-color: var(--ow-navy, #2e3c5d); color: var(--ow-navy, #2e3c5d); }
.dm-fpill.on { background: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); color: #fff; }
.dm-fcnt { font-size: 10.5px; opacity: .75; }
.dm-vfilter { font-size: 13px; padding: 6px 12px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; min-width: 130px; background: transparent; color: inherit; }
.dm-dim { opacity: .55; }
.dm-pgn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 2px; font-size: 12.5px; color: var(--ow-mute, #5B6478); flex-wrap: wrap; }
.dm-pgn-pages { display: flex; gap: 4px; }
.dm-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; font-size: 12.5px; font-weight: 500; color: var(--ow-mute, #5B6478); background: transparent; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; cursor: pointer; }
.dm-pg.on { background: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); color: #fff; }
.dm-pg:disabled { opacity: .4; cursor: default; }
.dm-export-note { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 0; }

/* Campaign manage view (5.20): header, status pill, result composer */
.mg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.mg-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ow-mute, #5B6478); margin: 0 0 4px; }
.mg-pill { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: color-mix(in oklab, var(--ow-lime, #50FE30) 30%, #fff); color: #1E5A1E; border-radius: 999px; padding: 1px 8px; }
.mg-pill.done { background: var(--md-sys-color-surface, #F5F7FA); color: var(--ow-mute, #5B6478); }
.mg-mailhint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; }
.mg-future { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #A15C07; background: color-mix(in oklab, #A15C07 8%, transparent); border: 1px solid color-mix(in oklab, #A15C07 30%, transparent); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; }
.mg-seg { display: inline-flex; gap: 0; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; overflow: hidden; margin: 0 0 12px; }
.mg-seg-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ow-mute, #5B6478); background: transparent; border: none; padding: 7px 16px; cursor: pointer; }
.mg-seg-btn.on { background: var(--ow-navy, #2e3c5d); color: #fff; }
.mg-embed { position: relative; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0F1626; margin: 4px 0 6px; }
.mg-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mg-save { margin-top: 18px; }

/* Result list (D-133): count badge, type cards, list rows with order arrows */
.rl-count { font-size: 11.5px; font-weight: 600; color: var(--ow-mute, #5B6478); background: var(--md-sys-color-surface, #F5F7FA); border-radius: 999px; padding: 2px 9px; margin-left: 8px; vertical-align: 2px; }
.rl-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.rl-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px 16px; background: transparent; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; cursor: pointer; color: var(--ow-navy, #2e3c5d); }
.rl-type:hover { border-color: var(--ow-navy, #2e3c5d); }
.rl-type-t { font-size: 14px; font-weight: 600; color: var(--md-sys-color-on-surface, #0F1626); }
.rl-type-d { font-size: 12px; color: var(--ow-mute, #5B6478); line-height: 1.45; }
.rl-list { display: flex; flex-direction: column; margin: 2px 0 4px; }
.rl-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.rl-row + .rl-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.rl-ord { display: flex; flex-direction: column; gap: 2px; }
.rl-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 6px; background: transparent; color: var(--ow-mute, #5B6478); cursor: pointer; }
.rl-btn:hover:not(:disabled) { color: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); }
.rl-btn:disabled { opacity: .35; cursor: default; }
.rl-thumb { width: 52px; height: 40px; border-radius: 8px; overflow: hidden; flex: none; background: var(--md-sys-color-surface, #F5F7FA); display: grid; place-items: center; color: var(--ow-mute, #5B6478); }
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rl-info { flex: 1; min-width: 0; }
.rl-t { font-size: 14px; font-weight: 500; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-s { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-hero { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in oklab, var(--ow-lime, #50FE30) 30%, #fff); color: #1E5A1E; border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.rl-acts { display: flex; gap: 4px; }
.rl-acts .rl-btn { width: 30px; height: 30px; border-radius: 8px; }
.rl-addmore { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rl-addnote { font-size: 12px; color: var(--ow-mute, #5B6478); }

/* Public result hero (D-133) */
.pp-result-heroembed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0F1626; margin: 0 0 10px; }
.pp-result-heroembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pp-result-heroimgwrap { display: block; border-radius: 12px; overflow: hidden; margin: 0 0 10px; }
.pp-result-heroimg { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.pp-result-herofile { margin: 0 0 12px; }
.pp-result-herocap { font-size: 13px; color: var(--ow-mute, #5B6478); margin: -4px 0 12px; }

/* Broadcast tab (5.22): recipient counter, schedule editor, scheduled/sent lists */
.bc-rcpt { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; }
.bc-rcpt-skip { color: #A15C07; }
.bc-schedule { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: color-mix(in oklab, #A15C07 8%, transparent); border: 1px solid color-mix(in oklab, #A15C07 30%, transparent); border-radius: 10px; }
.bc-dt { font-size: 13px; padding: 6px 10px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; background: transparent; color: inherit; }
.bc-sec { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ow-navy, #2e3c5d); margin: 22px 0 8px; }
.bc-count { color: var(--ow-mute, #5B6478); font-weight: 400; }
.bc-list { display: flex; flex-direction: column; }
.bc-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; }
.bc-row + .bc-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.bc-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--md-sys-color-surface, #F5F7FA); display: grid; place-items: center; color: var(--ow-mute, #5B6478); flex: none; }
.bc-ico.sch { background: color-mix(in oklab, #A15C07 12%, transparent); color: #A15C07; }
.bc-info { flex: 1; min-width: 0; }
.bc-t { font-size: 14px; font-weight: 500; margin: 0 0 2px; }
.bc-m { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; }
.bc-pill { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: color-mix(in oklab, #A15C07 14%, transparent); color: #A15C07; border-radius: 999px; padding: 1px 8px; }
.bc-acts { display: flex; gap: 4px; }
.bc-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; background: transparent; color: var(--ow-mute, #5B6478); cursor: pointer; }
.bc-btn:hover { color: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); }
.bc-sent { font-size: 12px; color: var(--ow-mute, #5B6478); flex: none; }
.dash-mach-btn { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; font-weight: 600; color: var(--ow-navy, #2e3c5d); background: transparent; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.dash-mach-btn:hover { border-color: var(--ow-navy, #2e3c5d); }
.dash-mach-btn.none { color: #A15C07; border-color: color-mix(in oklab, #A15C07 40%, transparent); }
.dash-countdown { font-size: 12px; color: var(--ow-mute, #5B6478); display: flex; align-items: center; gap: 5px; }
.dash-contrib { font-size: 13px; font-weight: 500; }
.dash-contrib-sub { font-size: 11px; color: var(--ow-mute, #5B6478); }
.dash-admin-badge { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 12%, #fff); color: var(--ow-navy, #2e3c5d); font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }

/* dashboard onboarding empty-state (5.12) — new user with no machines */
.dash-welcome { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 5%, #fff); border: 1px solid color-mix(in oklab, var(--ow-navy, #2e3c5d) 12%, #fff); border-radius: 12px; padding: 13px 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--md-sys-color-on-surface, #0F1626); }
.dash-welcome .mud-icon-root { color: var(--ow-navy, #2e3c5d); flex: none; }
.dash-empty-card { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; padding: 42px 32px; text-align: center; margin: 0 0 16px; }
.dash-empty-ico { width: 72px; height: 72px; border-radius: 18px; background: color-mix(in oklab, var(--ow-lime, #6AD147) 14%, #fff); color: #143906; display: grid; place-items: center; margin: 0 auto 18px; }
.dash-empty-h { font-size: 18px; font-weight: 500; margin: 0 0 8px; line-height: 1.3; }
.dash-empty-s { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 auto 24px; line-height: 1.55; max-width: 380px; }
.dash-cta-pair { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.dash-cta-lime { background: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); color: #143906; padding: 11px 22px; border-radius: 999px; font-weight: 500; font-size: 14px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
.dash-cta-navy { background: transparent; color: var(--ow-navy, #2e3c5d); padding: 10px 22px; border-radius: 999px; font-weight: 500; font-size: 14px; border: 1px solid var(--ow-navy, #2e3c5d); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; }
.dash-preview-h { font-size: 11px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .08em; margin: 0 4px 10px; font-weight: 500; }
.dash-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; opacity: .45; }
.dash-pp-card { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 15px 16px; }
.dash-pp-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0 0 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; }
.dash-pp-num { font-size: 22px; font-weight: 500; margin: 0; line-height: 1; }
.dash-pp-sub { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 5px 0 0; }
.dash-preview-note { font-size: 11px; color: var(--ow-mute, #5B6478); text-align: center; margin: 8px 0 0; font-style: italic; }

@media (max-width: 640px) {
    .dash-summary, .dash-preview-grid { grid-template-columns: 1fr; }
}

/* ================================================================================
   Gallery featured carousel (5.6 / D-41) — ported from the design, tokens mapped.
   ================================================================================ */
.gcar-wrap { position: relative; margin: 0 0 22px; }
.gcar-featured { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 360px; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.gcar-media { position: relative; display: grid; place-items: center; min-height: 260px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 86%, #fff); color: rgba(255, 255, 255, .85); }
.gcar-media.cat-arch { background: color-mix(in oklab, #E29A2E 55%, var(--ow-navy, #2e3c5d)); }
.gcar-media.cat-other { background: color-mix(in oklab, #4680F9 45%, var(--ow-navy, #2e3c5d)); }
.gcar-media-icon { width: 56px; height: 56px; }
.gcar-badge { position: absolute; top: 14px; left: 14px; background: color-mix(in oklab, var(--ow-lime, #6AD147) 38%, #fff); color: #143906; font-size: 11px; padding: 4px 11px; border-radius: 999px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .06em; }
.gcar-counter { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 11px; padding: 4px 11px; border-radius: 999px; font-weight: 500; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.gcar-body { padding: 24px 26px; display: flex; flex-direction: column; }
.gcar-eyebrow { font-size: 11px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.gcar-eyebrow-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ow-mute, #5B6478); }
.gcar-title { font-size: 22px; font-weight: 500; margin: 0 0 10px; line-height: 1.25; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcar-tag { font-size: 14px; color: var(--ow-mute, #5B6478); margin: 0 0 18px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcar-auth { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.gcar-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 12px; flex: none; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 14%, #fff); color: var(--ow-navy, #2e3c5d); }
.gcar-name { font-size: 13px; font-weight: 500; margin: 0; }
.gcar-sub { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0; }
.gcar-meta { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.gcar-meta-item { display: flex; flex-direction: column; gap: 2px; }
.gcar-meta-v { font-size: 15px; font-weight: 500; margin: 0; line-height: 1; }
.gcar-meta-l { font-size: 11px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.gcar-cta { background: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); color: #143906; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-left: auto; white-space: nowrap; flex: none; }
.gcar-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); color: var(--ow-navy, #2e3c5d); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.gcar-arrow:hover { background: var(--md-sys-color-surface, #F5F7FA); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.gcar-arrow.prev { left: -14px; }
.gcar-arrow.next { right: -14px; }
.gcar-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 22px; }
.gcar-dots { display: flex; align-items: center; gap: 7px; }
.gcar-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1.5px solid var(--md-sys-color-outline-variant, #dfe3ea); cursor: pointer; padding: 0; }
.gcar-dot.on { width: 8px; height: 8px; background: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); }
.gcar-progress { flex: 1; max-width: 200px; height: 2px; background: var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; overflow: hidden; }
.gcar-progress-fill { height: 100%; width: 0; background: color-mix(in oklab, var(--ow-lime, #6AD147) 55%, var(--ow-navy, #2e3c5d)); animation: gcar-fill 6s linear forwards; }
.gcar-progress-fill.paused { animation-play-state: paused; }
@keyframes gcar-fill { from { width: 0; } to { width: 100%; } }
.gcar-pause { background: transparent; color: var(--ow-mute, #5B6478); border: none; cursor: pointer; padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; }
@media (max-width: 720px) {
    .gcar-featured { grid-template-columns: 1fr; }
    /* The metrics + CTA can't share one row on a phone — let them wrap and drop the "Open project"
       pill onto its own full-width line below the metrics (no cramped 2-line button). */
    .gcar-meta { flex-wrap: wrap; }
    .gcar-cta { margin-left: 0; width: 100%; margin-top: 4px; }
}

/* ================================================================================
   Create-project wizard (5.2) — chrome + steps 1-2, ported from the design (tokens mapped).
   ================================================================================ */
.wz { max-width: 760px; margin: 0 auto; }
.wz-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 4px 16px; gap: 14px; }
.wz-head-label { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0 0 2px; }
.wz-head-title { font-size: 18px; font-weight: 500; margin: 0; }
.wz-cancel { background: transparent; color: var(--ow-mute, #5B6478); padding: 7px 12px; border-radius: 999px; font-size: 13px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.wz-cancel:hover { color: var(--md-sys-color-on-surface, #0F1626); background: var(--md-sys-color-surface, #F5F7FA); }

.wz-stp { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; padding: 5px; margin: 0 0 22px; }
.wz-stpi { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 999px; font-size: 13px; color: var(--ow-mute, #5B6478); background: transparent; border: none; cursor: pointer; }
.wz-stpi:disabled { cursor: default; }
.wz-stpn { width: 20px; height: 20px; border-radius: 50%; background: var(--md-sys-color-outline-variant, #dfe3ea); color: var(--ow-mute, #5B6478); display: grid; place-items: center; font-size: 11px; font-weight: 500; flex: none; }
.wz-stpi.on { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 12%, #fff); color: var(--ow-navy, #2e3c5d); font-weight: 500; }
.wz-stpi.on .wz-stpn { background: var(--ow-navy, #2e3c5d); color: #fff; }
.wz-stpi.done { color: var(--md-sys-color-on-surface, #0F1626); }
.wz-stpi.done .wz-stpn { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 75%, #fff); color: #fff; }

.wz-headblock { padding: 0 4px; margin: 0 0 16px; }
.wz-h1 { font-size: 22px; font-weight: 500; margin: 0 0 7px; line-height: 1.3; }
.wz-sub { font-size: 14px; color: var(--ow-mute, #5B6478); margin: 0; line-height: 1.6; }

.wz-cards { display: flex; flex-direction: column; gap: 10px; }
.wz-tc { display: flex; gap: 16px; align-items: flex-start; text-align: left; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 18px 20px; cursor: pointer; position: relative; width: 100%; }
.wz-tc:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 4%, #fff); }
.wz-tc.sel { border: 2px solid var(--ow-navy, #2e3c5d); padding: 17px 19px; }
.wz-chk { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--ow-navy, #2e3c5d); color: #fff; display: grid; place-items: center; }
.wz-tc-ico { width: 52px; height: 52px; border-radius: 12px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; flex: none; }
.wz-tc-body { flex: 1; min-width: 0; padding-right: 30px; }
.wz-tct { font-size: 15px; font-weight: 500; margin: 0 0 5px; display: block; }
.wz-tcd { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; line-height: 1.55; display: block; }
.wz-tcp { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-tcpi { font-size: 12px; color: var(--ow-mute, #5B6478); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); background: var(--md-sys-color-surface, #F5F7FA); }
.wz-tcpi b { font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); }
/* "Your own category" card (folksonomy) — dashed border says "this one you fill in". */
.wz-tc-custom { border-style: dashed; }
.wz-tc-custom.sel { border-style: solid; }
/* Category line in the Promise step (fixed by the template card; go back to step 1 to change). */
.wz-cat-fixed { font-size: 15px; font-weight: 500; margin: 4px 0 0; }
/* Tool chips (folksonomy second axis) — optional, click again to unset. */
.wz-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-tool-chip { font-size: 13px; font-weight: 500; color: var(--ow-navy, #2e3c5d); background: transparent; cursor: pointer; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 7px 16px; border-radius: 999px; }
.wz-tool-chip:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 5%, #fff); }
.wz-tool-chip.sel { border-color: var(--ow-navy, #2e3c5d); background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 9%, #fff); }
.wz-tool-input { min-width: 200px; }

.wz-banner { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 7%, #fff); border: 1px solid color-mix(in oklab, var(--ow-navy, #2e3c5d) 18%, #fff); border-radius: 12px; padding: 13px 16px; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; }
.wz-banner-ico { color: var(--ow-navy, #2e3c5d); flex: none; margin-top: 1px; }
.wz-banner-t { font-weight: 500; margin: 0 0 3px; font-size: 14px; }
.wz-banner-s { color: var(--ow-mute, #5B6478); margin: 0; font-size: 13px; line-height: 1.55; }

.wz-from-tpl { font-size: 11px; color: var(--ow-mute, #5B6478); background: var(--md-sys-color-surface, #F5F7FA); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 2px 9px; border-radius: 999px; margin-left: auto; font-weight: 500; }
.wz-dates { display: flex; align-items: center; gap: 12px; }
.wz-dates > .mud-input-control { flex: 1; }
.wz-date-arrow { color: var(--ow-mute, #5B6478); flex: none; }
.wz-compute { display: flex; align-items: center; gap: 10px; }
.wz-compute > .mud-input-control { flex: 1; max-width: 220px; }
.wz-compute-unit { font-size: 14px; color: var(--ow-mute, #5B6478); font-weight: 500; }
.wz-warn { color: #B23B3B; }

.wz-foot { display: flex; align-items: center; gap: 8px; padding: 18px 4px 0; margin-top: 18px; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.wz-foot-right { margin-left: auto; display: flex; gap: 8px; }
.wz-btn-draft { background: transparent; color: var(--ow-mute, #5B6478); padding: 9px 14px; border-radius: 999px; font-size: 13px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wz-btn-draft:hover { color: var(--md-sys-color-on-surface, #0F1626); background: var(--md-sys-color-surface, #F5F7FA); }
.wz-btn-back { background: transparent; color: var(--ow-navy, #2e3c5d); padding: 9px 18px; border-radius: 999px; font-size: 14px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.wz-btn-back:disabled { opacity: .45; cursor: default; }
.wz-btn-next { background: var(--ow-navy, #2e3c5d); color: #fff; padding: 10px 22px; border-radius: 999px; font-size: 14px; border: none; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.wz-btn-next:disabled { opacity: .4; cursor: default; }

/* steps 3-4 */
.wz-banner-go { background: color-mix(in oklab, var(--ow-lime, #6AD147) 14%, #fff); border: 1px solid color-mix(in oklab, var(--ow-lime, #6AD147) 40%, #fff); }
.wz-banner-go .wz-banner-ico-go { color: #1E5A1E; flex: none; margin-top: 1px; }
.wz-banner-go .wz-banner-t { color: #0A2F0A; }
.wz-banner-go .wz-banner-s { color: #244A24; }
.wz-review { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 6px 18px; margin: 0 0 20px; }
.wz-rev-row { display: flex; gap: 16px; padding: 12px 0; }
.wz-rev-row + .wz-rev-row { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.wz-rev-k { font-size: 12px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; width: 130px; flex: none; padding-top: 1px; }
.wz-rev-v { font-size: 14px; flex: 1; min-width: 0; }
.wz-checks { display: flex; flex-direction: column; gap: 12px; margin: 0 0 6px; }
.wz-check { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.wz-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ow-navy, #2e3c5d); flex: none; cursor: pointer; }

/* ================================================================================
   Creator dashboard "My projects" (5.14) — status-grouped campaign list.
   ================================================================================ */
.my-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 0 6px; }
.my-create { background: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); color: #143906; padding: 9px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.my-section { margin: 22px 0 0; }
.my-section-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.my-section-h .mud-icon-root { color: var(--ow-mute, #5B6478); }
.my-count { color: var(--ow-mute, #5B6478); font-weight: 400; text-transform: none; letter-spacing: 0; }
.pr-list { display: flex; flex-direction: column; gap: 10px; }
.pr-row { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; overflow: hidden; }
.pr-rejbanner { background: color-mix(in oklab, #E5484D 10%, #fff); border-bottom: 1px solid color-mix(in oklab, #E5484D 22%, #fff); padding: 11px 16px; display: flex; gap: 10px; align-items: flex-start; }
.pr-rejbanner .mud-icon-root { color: #C2383C; flex: none; margin-top: 1px; }
.pr-rejb-h { font-size: 13px; font-weight: 500; color: #7A2326; margin: 0 0 2px; }
.pr-rejb-t { font-size: 12.5px; color: #8A3A3D; margin: 0; line-height: 1.5; }
.pr-main { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.pr-thumb { width: 44px; height: 44px; border-radius: 8px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 80%, #fff); color: rgba(255, 255, 255, .85); display: grid; place-items: center; flex: none; }
.pr-thumb.cat-arch { background: color-mix(in oklab, #E29A2E 55%, var(--ow-navy, #2e3c5d)); }
.pr-thumb.cat-other { background: color-mix(in oklab, #4680F9 45%, var(--ow-navy, #2e3c5d)); }
.pr-info { flex: 1; min-width: 0; }
.pr-title { font-size: 14px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-meta { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 4px 0 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pr-pill { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; }
.pr-pill.draft { background: color-mix(in oklab, var(--ow-mute, #5B6478) 14%, #fff); color: var(--ow-mute, #5B6478); }
.pr-pill.rejected, .pr-pill.cancelled { background: color-mix(in oklab, #E5484D 16%, #fff); color: #B23B3B; }
.pr-pill.pending { background: color-mix(in oklab, #E29A2E 20%, #fff); color: #8A5A12; }
.pr-pill.active { background: color-mix(in oklab, var(--ow-lime, #6AD147) 28%, #fff); color: #1E5A1E; }
.pr-pill.completed { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 14%, #fff); color: var(--ow-navy, #2e3c5d); }
.pr-action { font-size: 13px; font-weight: 500; color: var(--ow-navy, #2e3c5d); text-decoration: none; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); padding: 7px 14px; border-radius: 999px; flex: none; }
.pr-action:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 5%, #fff); }
/* Cancel-campaign action on Active rows (A8) — coral outline pill, sits next to "Manage". */
.pr-cancel { font-size: 13px; font-weight: 500; color: #C2383C; background: transparent; cursor: pointer; border: 1px solid color-mix(in oklab, #E5484D 35%, #fff); padding: 7px 14px; border-radius: 999px; flex: none; }
.pr-cancel:hover { background: color-mix(in oklab, #E5484D 9%, #fff); }
/* "Mark completed" (M4) — the positive twin of .pr-cancel. */
.pr-complete { font-size: 13px; font-weight: 500; color: #1E6B24; background: transparent; cursor: pointer; border: 1px solid color-mix(in oklab, #3CB94A 40%, #fff); padding: 7px 14px; border-radius: 999px; flex: none; }
.pr-complete:hover { background: color-mix(in oklab, #3CB94A 10%, #fff); }
/* Cancel dialog reason field (reuses the .mp dialog frame). */
.cc-reason { text-align: left; margin: 0 0 16px; }
.cc-reason-lbl { display: block; font-size: 12.5px; font-weight: 500; color: var(--ow-mute, #5B6478); margin: 0 0 6px; }
.cc-reason-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--md-sys-color-on-surface, #0F1626); background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.cc-reason-input:focus { outline: none; border-color: color-mix(in oklab, #E5484D 45%, #fff); }
.my-empty { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; padding: 42px 32px; text-align: center; margin: 16px 0 0; }
.my-empty-ico { width: 64px; height: 64px; border-radius: 16px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 8%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; margin: 0 auto 16px; }
.my-empty-h { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
.my-empty-s { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 auto 22px; max-width: 360px; line-height: 1.55; }

/* ================================================================================
   Moderation queue (5.15) — admin/moderator review of Pending campaigns.
   ================================================================================ */
.mod-stats { display: flex; gap: 10px; margin: 0 0 18px; }
.mod-stat { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 14px 18px; min-width: 120px; }
.mod-stat-num { font-size: 24px; font-weight: 500; margin: 0; line-height: 1; }
.mod-stat-num.warn { color: #C2700E; }
.mod-stat-lbl { font-size: 11px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; margin: 6px 0 0; }
.mod-empty { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; padding: 40px 32px; text-align: center; color: var(--ow-mute, #5B6478); }
.mod-empty .mud-icon-root { color: #1E5A1E; margin-bottom: 10px; }
.mod-empty p { margin: 0; font-size: 14px; }
.mod-queue { display: flex; flex-direction: column; gap: 10px; }
.qr { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; }
.qr-thumb { width: 44px; height: 44px; border-radius: 8px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 80%, #fff); color: rgba(255, 255, 255, .85); display: grid; place-items: center; flex: none; }
.qr-thumb.cat-arch { background: color-mix(in oklab, #E29A2E 55%, var(--ow-navy, #2e3c5d)); }
.qr-thumb.cat-other { background: color-mix(in oklab, #4680F9 45%, var(--ow-navy, #2e3c5d)); }
.qr-info { flex: 1; min-width: 180px; }
.qr-title { font-size: 14px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-meta { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 3px 0 0; }
.qr-time { text-align: right; flex: none; }
.qr-time-v { font-size: 13px; font-weight: 500; }
.qr-time-v.overdue { color: #C2383C; }
.qr-time-l { display: block; font-size: 11px; color: var(--ow-mute, #5B6478); }
.qr-actions { display: flex; gap: 8px; flex: none; }
.qr-btn-approve { background: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); color: #143906; padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; border: none; cursor: pointer; }
.qr-btn-rejecto { background: transparent; color: #B23B3B; border: 1px solid color-mix(in oklab, #E5484D 35%, #fff); padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; cursor: pointer; }
.qr-reject { display: flex; gap: 8px; align-items: center; flex: 1 1 100%; }
.qr-reject-input { flex: 1; }
.qr-btn-reject { background: #C2383C; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; border: none; cursor: pointer; flex: none; }
.qr-btn-cancel { background: transparent; color: var(--ow-mute, #5B6478); border: none; padding: 8px 12px; font-size: 13px; cursor: pointer; flex: none; }
.qr-btn-approve:disabled, .qr-btn-rejecto:disabled, .qr-btn-reject:disabled { opacity: .5; cursor: default; }

/* ================================================================================
   Rich-text editor (CC-3) — wizard Story step.
   ================================================================================ */
.rte { border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; overflow: hidden; background: #fff; }
.rte-toolbar { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-bottom: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); background: var(--md-sys-color-surface, #F5F7FA); }
.rte-btn { min-width: 30px; height: 28px; padding: 0 7px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--md-sys-color-on-surface, #0F1626); display: inline-flex; align-items: center; justify-content: center; font-family: inherit; }
.rte-btn:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 8%, #fff); }
.rte-sep { width: 1px; height: 18px; background: var(--md-sys-color-outline-variant, #dfe3ea); margin: 0 4px; }
.rte-area { min-height: 160px; padding: 12px 14px; font-size: 14px; line-height: 1.6; outline: none; color: var(--md-sys-color-on-surface, #0F1626); }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--ow-mute, #5B6478); }
.rte-area h2 { font-size: 18px; font-weight: 500; margin: 12px 0 6px; }
.rte-area h3 { font-size: 15px; font-weight: 500; margin: 10px 0 5px; }
.rte-area p { margin: 0 0 8px; }
.rte-area ul, .rte-area ol { margin: 0 0 8px; padding-left: 22px; }
.rte-area a { color: var(--ow-navy, #2e3c5d); }
.rte-area img, .pp-story img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; display: block; }
.rte-file { display: none; }
.rte-img-btn { cursor: pointer; }

/* Wizard cover upload (CC-4) */
.wz-cover-file { display: none; }
.wz-cover-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border: 1.5px dashed var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 10px; background: var(--md-sys-color-surface, #F5F7FA); color: var(--ow-mute, #5B6478); font-size: 13px; cursor: pointer; }
.wz-cover-drop:hover { border-color: var(--ow-navy, #2e3c5d); color: var(--ow-navy, #2e3c5d); background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 4%, #fff); }
.wz-cover { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.wz-cover-img { display: block; width: 100%; max-height: 280px; object-fit: cover; }
.wz-cover-remove { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; background: rgba(15, 22, 38, .7); color: #fff; border: none; padding: 6px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.wz-cover-remove:hover { background: rgba(15, 22, 38, .9); }

/* Card covers (CC-4) — featured carousel + dashboard thumb; cards in the UI RCL self-scope theirs. */
.gcar-media { overflow: hidden; }
.gcar-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dash-camp-thumb { position: relative; overflow: hidden; }
.dash-camp-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================================================================================
   Pending-review preview (5.1.4) — reuses the project-page pp-* classes + these.
   ================================================================================ */
.prev-back { background: transparent; border: none; color: var(--ow-mute, #5B6478); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; padding: 6px 0; margin-bottom: 6px; }
.prev-back:hover { color: var(--ow-navy, #2e3c5d); }
.prev-banner { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in oklab, #E29A2E 14%, #fff); border: 1px solid color-mix(in oklab, #E29A2E 35%, #fff); border-radius: 12px; padding: 13px 16px; margin: 0 0 16px; }
.prev-banner .mud-icon-root { color: #8A5A12; flex: none; margin-top: 1px; }
.prev-banner.rejected { background: color-mix(in oklab, #E5484D 12%, #fff); border-color: color-mix(in oklab, #E5484D 30%, #fff); }
.prev-banner.rejected .mud-icon-root { color: #C2383C; }
.prev-banner-t { font-weight: 500; margin: 0; font-size: 14px; }
.prev-banner-s { margin: 4px 0 0; font-size: 13px; color: var(--ow-mute, #5B6478); line-height: 1.5; }
.prev-pill { background: color-mix(in oklab, #E29A2E 20%, #fff); color: #8A5A12; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; }
.prev-meta { display: flex; gap: 24px; flex-wrap: wrap; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 14px 18px; margin: 14px 0; }
.prev-meta-item { display: flex; flex-direction: column; gap: 3px; }
.prev-meta-item span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ow-mute, #5B6478); font-weight: 500; }
.prev-meta-item b { font-size: 14px; font-weight: 500; }
.prev-actions { margin: 16px 0; }
.prev-withdraw { background: transparent; color: #B23B3B; border: 1px solid color-mix(in oklab, #E5484D 35%, #fff); padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; cursor: pointer; }
.prev-withdraw:hover { background: color-mix(in oklab, #E5484D 6%, #fff); }
.prev-withdraw:disabled { opacity: .5; cursor: default; }
.qr-title-link { text-decoration: none; color: inherit; }
.qr-title-link:hover { text-decoration: underline; }

/* ================================================================================
   Closed groups (5.3.x) — list + create form + admin console.
   ================================================================================ */
.grp-list { display: flex; flex-direction: column; gap: 10px; }
.grp-row { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 14px 16px; cursor: pointer; width: 100%; text-align: left; }
.grp-row:hover { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 4%, #fff); }
.grp-ico { width: 44px; height: 44px; border-radius: 10px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); display: grid; place-items: center; flex: none; }
.grp-info { flex: 1; min-width: 0; }
.grp-name { font-size: 15px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-meta { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 4px 0 0; display: flex; align-items: center; gap: 9px; }
.grp-badge { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: color-mix(in oklab, var(--ow-mute, #5B6478) 14%, #fff); color: var(--ow-mute, #5B6478); }
.grp-badge.owner { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 14%, #fff); color: var(--ow-navy, #2e3c5d); }
.grp-chev { color: var(--ow-mute, #5B6478); flex: none; }
.grp-form-wrap { max-width: 760px; margin: 0 auto; }
.grp-form { padding: 22px; }
.grp-form-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* admin console */
.grp-admin { max-width: 760px; margin: 0 auto; }
.grp-ico.lg { width: 56px; height: 56px; border-radius: 14px; }
.grp-admin-head { display: flex; gap: 16px; align-items: flex-start; margin: 4px 0 18px; }
.grp-admin-name { font-size: 22px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 8px; }
.grp-edit { background: transparent; border: none; color: var(--ow-mute, #5B6478); cursor: pointer; display: inline-flex; padding: 2px; border-radius: 6px; }
.grp-edit:hover { color: var(--ow-navy, #2e3c5d); background: var(--md-sys-color-surface, #F5F7FA); }
.grp-admin-meta { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 4px 0 0; }
.grp-admin-desc { font-size: 14px; margin: 8px 0 0; line-height: 1.55; }
.grp-sec-h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.grp-sec-h .mud-icon-root { color: var(--ow-mute, #5B6478); }
.grp-sec-s { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 0 12px; line-height: 1.5; }
.grp-invite, .grp-members, .grp-machines-stub, .grp-danger { padding: 18px; margin-bottom: 12px; }
.grp-invite-row { display: flex; gap: 8px; flex-wrap: wrap; }
.grp-invite-link { flex: 1; min-width: 200px; padding: 9px 12px; font-size: 13px; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 8px; background: var(--md-sys-color-surface, #F5F7FA); color: var(--ow-mute, #5B6478); }
.grp-invite-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--ow-navy, #2e3c5d); color: #fff; border: none; padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.grp-invite-btn.ghost { background: transparent; color: var(--ow-navy, #2e3c5d); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.grp-invite-btn:disabled { opacity: .5; cursor: default; }
.grp-member { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.grp-member + .grp-member { border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.grp-member-info { flex: 1; min-width: 0; }
.grp-member-name { font-size: 14px; font-weight: 500; margin: 0; display: flex; align-items: center; gap: 8px; }
.grp-member-sub { font-size: 12px; color: var(--ow-mute, #5B6478); margin: 2px 0 0; }
.grp-run { display: flex; align-items: center; gap: 8px; flex: none; }
.grp-run-lbl { font-size: 12px; color: var(--ow-mute, #5B6478); font-weight: 500; }
.grp-run-lbl.on { color: var(--md-sys-color-on-surface, #1A1C1E); }
.grp-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; border: none; padding: 0; background: var(--md-sys-color-outline-variant, #dfe3ea); cursor: pointer; flex: none; transition: background .15s ease; }
.grp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s ease; }
.grp-switch.on { background: var(--ow-navy, #2e3c5d); }
.grp-switch.on::after { left: 16px; }
.grp-switch:disabled { opacity: .5; cursor: default; }
.grp-danger { border-color: color-mix(in oklab, #E5484D 25%, #fff); background: color-mix(in oklab, #E5484D 4%, var(--md-sys-color-surface-container-lowest, #fff)); }
.grp-danger-h { margin-bottom: 14px; }
.grp-danger-h .mud-icon-root { color: #C2483F; }
.grp-mdots { background: transparent; border: none; color: var(--ow-mute, #5B6478); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; padding: 0; }
.grp-mdots:hover { background: var(--md-sys-color-surface, #F5F7FA); }
.pp-resultstrip { padding: 18px; margin-top: 12px; }
.pp-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pp-result-imgwrap { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.pp-result-img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10; }
.pp-result-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.pp-result-link { display: flex; align-items: center; gap: 8px; padding: 9px 4px; font-size: 14px; color: var(--ow-navy, #2e3c5d); text-decoration: none; border-top: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.pp-result-link:hover { text-decoration: underline; }
.pp-result-host { font-size: 12px; color: var(--ow-mute, #5B6478); margin-left: auto; }
.grp-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.grp-danger-t { font-size: 14px; font-weight: 500; margin: 0; }
.grp-danger-s { font-size: 12.5px; color: var(--ow-mute, #5B6478); margin: 3px 0 0; }
.grp-danger-btn { background: transparent; color: #B23B3B; border: 1px solid color-mix(in oklab, #E5484D 35%, #fff); padding: 8px 16px; border-radius: 999px; font-weight: 500; font-size: 13px; cursor: pointer; flex: none; }
.grp-danger-btn:hover { background: color-mix(in oklab, #E5484D 6%, #fff); }
.grp-danger-btn:disabled { opacity: .5; cursor: default; }
.grp-danger-q { font-size: 14px; font-weight: 500; margin: 0 0 12px; }
.grp-danger-acts { display: flex; gap: 8px; justify-content: flex-end; }
.grp-del-btn { background: #C2383C; color: #fff; border: none; padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 13px; cursor: pointer; }
.grp-del-btn:disabled { opacity: .5; cursor: default; }
.grp-mach-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }

/* Machine picker dialog (5.17) */
.mp { text-align: center; padding: 6px 4px; }
.mp-ico { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in oklab, var(--ow-lime, #6AD147) 28%, #fff); color: #143906; display: grid; place-items: center; margin: 0 auto 12px; }
.mp-ico.coral { background: color-mix(in oklab, #E5484D 18%, #fff); color: #B23B3B; }
.mp-h { font-size: 18px; font-weight: 500; margin: 0 0 6px; }
.mp-s { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0 auto 14px; max-width: 360px; line-height: 1.5; }
.mp-scope { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 10%, #fff); color: var(--ow-navy, #2e3c5d); font-size: 12px; font-weight: 500; padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.mp-list { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 0 0 12px; }
.mp-row { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 10px; padding: 11px 13px; cursor: pointer; width: 100%; }
.mp-row.on { border-color: var(--ow-navy, #2e3c5d); background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 4%, #fff); }
.mp-ck { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--md-sys-color-outline-variant, #dfe3ea); display: grid; place-items: center; flex: none; color: #fff; }
.mp-row.on .mp-ck { background: var(--ow-navy, #2e3c5d); border-color: var(--ow-navy, #2e3c5d); }
.mp-mi { color: var(--ow-mute, #5B6478); flex: none; }
.mp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-name { font-size: 14px; font-weight: 500; }
.mp-spec { font-size: 12px; color: var(--ow-mute, #5B6478); }
.mp-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ow-mute, #5B6478); flex: none; }
.mp-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b2; }
.mp-stat.online .mp-dot { background: #2FBF4A; }
.mp-stat.idle .mp-dot { background: #E29A2E; }
.mp-stat.offline .mp-dot { background: #9aa3b2; }
.mp-selrow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ow-mute, #5B6478); margin: 0 0 14px; }
.mp-deselect { background: transparent; border: none; color: var(--ow-navy, #2e3c5d); font-size: 12px; cursor: pointer; font-weight: 500; }
.mp-acts { display: flex; gap: 8px; justify-content: center; }
.mp-leave { padding: 6px 4px; }

/* ================================================================================
   Dark theme for the custom-CSS surfaces (the design's navy-tinted dark, NOT black).
   Driven by html.portal-dark (window.portalTheme.applyClass), alongside MudThemeProvider's
   own dark palette. Redefining the m3 + --ow-* tokens fixes everything that's tokenised;
   the literal #fff backgrounds + a few literal text colours are overridden below.
   (Loose end: some deeply scoped literal colours still want a full literal→token sweep.)
   ================================================================================ */
.portal-dark {
    --md-sys-color-surface: #161B27;
    --md-sys-color-surface-variant: #1E2433;
    --md-sys-color-on-surface: #E8ECF3;
    --md-sys-color-outline-variant: #2A3147;
    --ow-mute: #8E96AB;
    --ow-navy: #7894C7; /* navy primary lightens on dark for readable accents (design) */
}
/* Surfaces hardcoded #fff in light → elevated navy-tinted dark. */
.portal-dark .foot,
.portal-dark .az-card,
.portal-dark .pp-card,
.portal-dark .future-card,
.portal-dark .loginwall-card,
.portal-dark .field-input,
.portal-dark .ff-toggle,
.portal-dark .pay-row,
.portal-dark .legal-toc,
.portal-dark .rmark { background: #1E2433; }
.portal-dark .pp-cancel-reason { background: #1E2433; }
.portal-dark .pr-row,
.portal-dark .cc-reason-input { background: #1E2433; }
.portal-dark .seg-btn.on { background: #252C3D; }
/* Cancel action/dialog accents on the dark surface — lighter coral so they read, not glow. */
html.portal-dark .pr-cancel { color: #FFB3AF; border-color: color-mix(in oklab, #E5484D 30%, #161B27); }
html.portal-dark .pr-cancel:hover { background: color-mix(in oklab, #E5484D 14%, #161B27); }
html.portal-dark .pr-complete { color: #A7E3AC; border-color: color-mix(in oklab, #3CB94A 30%, #161B27); }
html.portal-dark .pr-complete:hover { background: color-mix(in oklab, #3CB94A 14%, #161B27); }
/* Literal muted/dark text that wouldn't otherwise flip. */
.portal-dark .foot-tag,
.portal-dark .foot-col h4,
.portal-dark .foot-bottom,
.portal-dark .foot-bottom-l a { color: var(--ow-mute, #8E96AB); }
html.portal-dark .legal-body p,
html.portal-dark .legal-body ul,
html.portal-dark .legal-toc a { color: #C7CEDB; }
html.portal-dark .gc-progress .pct { color: #9FB4D6; }
html.portal-dark .gc-tag,
html.portal-dark .gc-author,
html.portal-dark .gc-meta-row,
html.portal-dark .gc-progress .left,
html.portal-dark .pcard-meta { color: var(--ow-mute, #8E96AB); }
/* StatusPill: tonal chips on the dark surface-base with lighter ink (design dark, point 6).
   html-prefixed so these beat the component's scoped .pill rules. */
html.portal-dark .pill.is-active    { background: color-mix(in oklab, var(--ow-lime, #6AD147) 22%, #161B27); color: #A8FF8E; }
html.portal-dark .pill.is-completed { background: color-mix(in oklab, #7894C7 22%, #161B27); color: #BBD0F0; }
html.portal-dark .pill.is-cancelled { background: color-mix(in oklab, #FF8A85 20%, #161B27); color: #FFB3AF; }
html.portal-dark .pill.is-pending   { background: color-mix(in oklab, #F0B560 20%, #161B27); color: #F3C98A; }
html.portal-dark .pill.is-draft     { background: #252C3D; color: #9CA6B7; }

/* Public-page scoped surfaces (literal #fff in their *.razor.css) — overridden globally for dark
   (html-prefixed so these beat the page-scoped rules). */
html.portal-dark .hero-panel,
html.portal-dark .hiw-hero { background: radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--ow-lime, #6AD147) 9%, #1E2433), #161B27 62%); border-color: #2A3147; }
html.portal-dark .step,
html.portal-dark .dl-card,
html.portal-dark .hiw-faq .mud-expand-panel { background: #1E2433; border-color: #2A3147; }
html.portal-dark .callout { background: color-mix(in oklab, #7894C7 9%, #161B27); border-color: #2A3147; }
/* Project cards (literal #fff in PeekCard.razor.css / ProjectCard.razor.css) — html-prefixed to
   beat the scoped rule (a bare .portal-dark .gc/.pcard ties on specificity and loses on order). */
html.portal-dark .pcard,
html.portal-dark .gc { background: #1E2433; border-color: #2A3147; }
/* Gallery featured carousel (global .gcar-*): the card is white in light → dark-elevate the body
   panel + readable title, and re-tint the bottom meta divider. The .gcar-media tile keeps its
   category tint (it's meant to be a colour block). */
html.portal-dark .gcar-featured { background: #1E2433; border-color: #2A3147; }
html.portal-dark .gcar-title { color: #E8ECF3; }
html.portal-dark .gcar-meta { border-top-color: #2A3147; }
html.portal-dark .gcar-arrow { background: #252C3D; border-color: #2A3147; color: #BBD0F0; }
html.portal-dark .gcar-arrow:hover { background: #2A3147; }
/* Gallery filter pills + sort select are page-scoped (Gallery.razor.css) but the scope attribute
   keeps these plain elements reachable; a global html.portal-dark rule out-specifies the scoped one.
   In light the active pill / sort slot are white — dark them so they don't glow. */
html.portal-dark .filter-group { background: #1A2130; border-color: #2A3147; }
html.portal-dark .fpill.on { background: #252C3D; color: #E8ECF3; box-shadow: 0 0 0 1px #2A3147; }
/* The sort slot's scoped rule is `.sort ::deep .sort-sel .mud-input-slot` (specificity 0,4,0), so the
   dark override must include `.sort` too (0,4,1) to win. */
html.portal-dark .sort .sort-sel .mud-input-slot { background: #252C3D; border-color: #2A3147; color: #E8ECF3; }
/* Project page: many .pp-* text styles hardcode rgba(15,22,38,.x) dark ink (not a token), so they
   vanish on the dark card surfaces. Remap the muted/secondary ones to the dark muted tone. */
html.portal-dark .pp-tagline,
html.portal-dark .pp-author-role,
html.portal-dark .pp-count-sub,
html.portal-dark .pp-thanks,
html.portal-dark .pp-bar-caption,
html.portal-dark .pp-stat-l,
html.portal-dark .pp-tab,
html.portal-dark .pp-sec-h,
html.portal-dark .pp-sec-empty,
html.portal-dark .pp-up-lbl,
html.portal-dark .pp-up-text,
html.portal-dark .pp-cancel-reason { color: var(--ow-mute, #8E96AB); }
/* Keep the active tab accented (the group rule above would otherwise mute it). */
html.portal-dark .pp-tab.on { color: var(--ow-navy, #7894C7); border-bottom-color: var(--ow-navy, #7894C7); }
html.portal-dark .pp-cancel-reason { background: #161B27; }
html.portal-dark .pp-cvm { color: #C7CEDB; }
/* Authed-zone cards (dashboard stat tiles, my-projects/groups empty states, moderation queue) were
   styled white for light mode and never got dark overrides — they showed as white panels in dark,
   and their (now-light) text vanished on the white. Dark-elevate them. */
html.portal-dark .dash-sb,
html.portal-dark .my-empty,
html.portal-dark .mod-stat,
html.portal-dark .mod-empty,
html.portal-dark .qr { background: #1E2433; border-color: #2A3147; }
/* Account danger zone (a scoped light-red card) → a dark red-tinted panel with a readable title. */
html.portal-dark .az-danger { background: color-mix(in oklab, #D9534F 12%, #161B27); border-color: color-mix(in oklab, #D9534F 30%, #161B27); }
html.portal-dark .az-danger-title { color: #E5736F; }
/* Download page (5.8.2 / CC-9): white card surfaces + navy-tinted accents need dark elevation. */
html.portal-dark .dl-rail,
html.portal-dark .dl-card,
html.portal-dark .dl-empty,
html.portal-dark .dl-ver,
html.portal-dark .dl-code-line { background: #1E2433; border-color: #2A3147; }
html.portal-dark .dl-ver,
html.portal-dark .dl-code-line { color: #E8ECF3; }
html.portal-dark .dl-rail-item { border-color: #2A3147; }
html.portal-dark .dl-rail-ico { background: #1E2433; border-color: #2A3147; color: #BBD0F0; }
html.portal-dark .dl-rail-item.on .dl-rail-ico { background: #2E3A52; border-color: #3A496A; color: #DCE8FF; }
html.portal-dark .dl-rail-count { background: #161B27; border-color: #2A3147; }
/* Navy-tinted accent tiles (color-mix over #fff in light) → elevated dark navy. */
html.portal-dark .dl-version,
html.portal-dark .dl-req-ico,
html.portal-dark .dl-step-n { background: #252C3D; border-color: #2A3147; color: #BBD0F0; }
html.portal-dark .dl-dlcount { color: #BBD0F0; }
/* "What's next" lime banner → dark lime-tinted panel with readable text. */
html.portal-dark .dl-feed { background: color-mix(in oklab, #7894C7 10%, #161B27); border-color: color-mix(in oklab, #7894C7 24%, #161B27); }
html.portal-dark .dl-feed-h { color: #E6EAF2; }
html.portal-dark .dl-feed-t { color: #9AA3B5; }
html.portal-dark .dl-feed-copy { color: #C7CEDB; border-color: color-mix(in oklab, #7894C7 32%, #161B27); }
html.portal-dark .dl-feed-copy:hover { background: color-mix(in oklab, #7894C7 14%, #161B27); }
html.portal-dark .dl-code-line { background: #10141F; border-color: #2A3147; color: #C7CEDB; }
html.portal-dark .dl-next { background: color-mix(in oklab, var(--ow-lime, #50FE30) 10%, #161B27); border-color: #2A3147; }
html.portal-dark .dl-next-h { color: #D6F5CF; }
html.portal-dark .dl-next-t { color: #9FD897; }
html.portal-dark .dl-next a { color: #BBF0B5; }
/* Admin Download-metrics (CC-9): elevate the card/table surfaces on dark. */
html.portal-dark .dm-card,
html.portal-dark .dm-table-wrap,
html.portal-dark .dm-empty { background: #1E2433; border-color: #2A3147; }
html.portal-dark .dm-table th { background: #252C3D; border-color: #2A3147; }
html.portal-dark .dm-table td { border-color: #2A3147; }
html.portal-dark .dm-table tbody tr:hover { background: #252C3D; }
html.portal-dark .dm-table th:hover,
html.portal-dark .dm-table th.on { color: #BBD0F0; }
html.portal-dark .dm-fmt,
html.portal-dark .dm-badge.pruned,
html.portal-dark .dm-export { background: #252C3D; }
html.portal-dark .dm-ghost { background: #1E2433; border-color: #2A3147; color: #BBD0F0; }
html.portal-dark .dm-ghost:hover { background: #252C3D; }
/* Network-capacity band: its base background is the (now dark-lightened) --ow-navy, which glows on
   dark. Pin it to an elevated dark navy panel; the white text + lime accents stay readable. The
   cold-start .empty variant (near-white in light) also needs darkening for its on-surface text. */
html.portal-dark .netbar,
html.portal-dark .hiw-cta { background: linear-gradient(135deg, #222A3C 0%, #161B27 100%); }
html.portal-dark .hiw-cta { border: 1px solid #2A3147; }
/* The footer "investors & partners" link is navy-highlighted; in dark the --ow-navy token
   lightens to a saturated periwinkle that over-stands-out. Soften it to the muted-link tone so
   it reads like a subtle highlight, matching how it looks in the light theme. */
html.portal-dark .foot-col a.io-link { color: #BBD0F0; }
html.portal-dark .netbar.empty { background: #1E2433; border-color: #2A3147; }
/* Inventory cells use color-mix(--ow-navy 86%, #000) too — same lightened-token glow. Pin them to
   a dark navy inset (slightly darker than the panel); the rgba-white grid lines keep the tiles read. */
html.portal-dark .netcell { background: #1A2130; }
html.portal-dark .dl-next { background: color-mix(in oklab, var(--ow-lime, #6AD147) 12%, #161B27); border-color: color-mix(in oklab, var(--ow-lime, #6AD147) 28%, #161B27); }
html.portal-dark .dl-next-h { color: #BBF0B5; }
html.portal-dark .dl-next-t { color: #9FD49F; }
html.portal-dark .hero-eyebrow,
html.portal-dark .hiw-hero-eyebrow { background: color-mix(in oklab, #7894C7 12%, #161B27); border-color: #2A3147; color: #BBD0F0; }
/* Create wizard (5.2), rich-text editor, preview page, machine picker, my-groups rows and the
   new-user dashboard onboarding were styled white-for-light and never dark-elevated — in dark the
   inherited on-surface text goes light on the still-white panel (unreadable, not just glowing). */
html.portal-dark .wz-stp,
html.portal-dark .wz-tc,
html.portal-dark .wz-review,
html.portal-dark .rte,
html.portal-dark .mp-row,
html.portal-dark .grp-row,
html.portal-dark .dash-empty-card,
html.portal-dark .dash-pp-card,
html.portal-dark .prev-meta { background: #1E2433; border-color: #2A3147; }
html.portal-dark .wz-tc:hover,
html.portal-dark .grp-row:hover { background: #252C3D; }
html.portal-dark .wz-tc.sel { border-color: #7894C7; }
html.portal-dark .wz-cat-fixed { color: #E6EAF2; }
html.portal-dark .wz-tool-chip { color: #C7CEDB; border-color: color-mix(in oklab, #7894C7 30%, #161B27); }
html.portal-dark .wz-tool-chip:hover { background: color-mix(in oklab, #7894C7 12%, #161B27); }
html.portal-dark .wz-tool-chip.sel { border-color: #7894C7; background: color-mix(in oklab, #7894C7 18%, #161B27); }
html.portal-dark .wz-tc-ico { background: #252C3D; color: #BBD0F0; }
html.portal-dark .wz-tcpi { background: #161B27; border-color: #2A3147; }
html.portal-dark .wz-stpn { background: #252C3D; color: #9CA6B7; }
html.portal-dark .wz-stpi.on { background: #252C3D; color: #BBD0F0; }
html.portal-dark .wz-stpi.on .wz-stpn { background: #7894C7; color: #0F1626; }
html.portal-dark .wz-stpi.done .wz-stpn { background: #3A496A; color: #DCE8FF; }
html.portal-dark .wz-banner { background: color-mix(in oklab, #7894C7 10%, #161B27); border-color: #2A3147; }
html.portal-dark .wz-banner-ico { color: #BBD0F0; }
html.portal-dark .wz-banner-go { background: color-mix(in oklab, var(--ow-lime, #6AD147) 12%, #161B27); border-color: color-mix(in oklab, var(--ow-lime, #6AD147) 28%, #161B27); }
html.portal-dark .wz-banner-go .wz-banner-ico-go { color: #9FD897; }
html.portal-dark .wz-banner-go .wz-banner-t { color: #D6F5CF; }
html.portal-dark .wz-banner-go .wz-banner-s { color: #9FD897; }
html.portal-dark .rte-toolbar { background: #161B27; border-bottom-color: #2A3147; }
html.portal-dark .rte-btn:hover { background: #252C3D; }
html.portal-dark .rte-sep { background: #2A3147; }
html.portal-dark .mp-row.on { background: #252C3D; border-color: #7894C7; }
html.portal-dark .dash-welcome { background: color-mix(in oklab, #7894C7 10%, #161B27); border-color: #2A3147; }
html.portal-dark .dash-welcome .mud-icon-root { color: #BBD0F0; }
/* Amber/red banners: darken the tint AND lift their literal dark-red/amber text to readable tones. */
html.portal-dark .prev-banner { background: color-mix(in oklab, #E29A2E 14%, #161B27); border-color: color-mix(in oklab, #E29A2E 30%, #161B27); }
html.portal-dark .prev-banner .mud-icon-root { color: #F3C98A; }
html.portal-dark .prev-banner.rejected { background: color-mix(in oklab, #E5484D 14%, #161B27); border-color: color-mix(in oklab, #E5484D 30%, #161B27); }
html.portal-dark .prev-banner.rejected .mud-icon-root { color: #FFB3AF; }
html.portal-dark .pr-rejbanner { background: color-mix(in oklab, #E5484D 12%, #161B27); border-bottom-color: color-mix(in oklab, #E5484D 28%, #161B27); }
html.portal-dark .pr-rejbanner .mud-icon-root { color: #FFB3AF; }
html.portal-dark .pr-rejb-h { color: #FFD9D7; }
html.portal-dark .pr-rejb-t { color: #F0AFAC; }

/* ================================================================================
   Live network-capacity band (D-119/D-120) + cold-start (D-121) + header pill (D-122).
   Ported from portal-design v3.3; the design's <i> font-icons are MudIcon (.mud-icon-root) here.
   ================================================================================ */
.netbar { margin: 0 0 28px; border-radius: 18px; background: linear-gradient(135deg, var(--ow-navy, #2e3c5d) 0%, color-mix(in oklab, var(--ow-navy, #2e3c5d) 80%, #000) 100%); color: #fff; padding: 28px 30px 24px; }
.netbar-top { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; }
.netbar-live { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: color-mix(in oklab, var(--ow-lime, #6AD147) 72%, #fff); font-weight: 500; }
.netbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ow-lime, #6AD147); box-shadow: 0 0 0 0 color-mix(in oklab, var(--ow-lime, #6AD147) 55%, transparent); animation: netpulse 2s infinite; }
@keyframes netpulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ow-lime, #6AD147) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* row-gap only kicks in when the two scores wrap (narrow / mobile), where the vline that
   separates them side-by-side is hidden — without it the CPU number collides with the GPU label. */
.netbar-hero { display: flex; align-items: stretch; flex-wrap: wrap; row-gap: 18px; }
.netbar-score { flex: 1; min-width: 190px; padding: 0 2px; }
.netbar-score-h { font-size: 11px; color: rgba(255, 255, 255, .6); display: flex; align-items: center; gap: 6px; margin: 0 0 9px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.netbar-big { font-size: clamp(30px, 6.2vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; display: block; }
.netbar-big small { font-size: .5em; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .5); margin-left: 3px; }
.netbar-vline { width: 1px; background: rgba(255, 255, 255, .14); margin: 0 24px; align-self: stretch; }
.netbar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 22px 0 0; background: rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; }
.netcell { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 86%, #000); padding: 14px 16px; }
.netcell-v { font-size: 22px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; }
.netcell-v small { font-size: 12px; color: rgba(255, 255, 255, .55); font-weight: 400; }
.netcell-l { font-size: 11px; color: rgba(255, 255, 255, .62); margin: 8px 0 0; display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.netbar-score-h .mud-icon-root, .netcell-l .mud-icon-root { width: 14px; height: 14px; color: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); }
@media (max-width: 560px) { .netbar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .netbar-vline { display: none; } }

/* cold-start (launch) state */
.netbar.empty { background: color-mix(in oklab, var(--ow-navy, #2e3c5d) 5%, #fff); color: var(--md-sys-color-on-surface, #0F1626); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.netbar.empty .netbar-live { color: var(--ow-mute, #5B6478); }
.netbar.empty .netbar-dot { background: var(--ow-mute, #5B6478); animation: none; box-shadow: none; }
.netbar-launch { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.netbar-launch-ico { width: 50px; height: 50px; border-radius: 14px; background: color-mix(in oklab, var(--ow-lime, #6AD147) 22%, #fff); color: #143906; display: grid; place-items: center; flex: none; }
.netbar-launch-body { flex: 1; min-width: 230px; }
.netbar-launch-h { font-size: 19px; font-weight: 500; color: var(--md-sys-color-on-surface, #0F1626); margin: 0 0 5px; line-height: 1.25; }
.netbar-launch-t { font-size: 13px; color: var(--ow-mute, #5B6478); margin: 0; line-height: 1.55; }
.netbar-launch-cta { background: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); color: #143906; padding: 11px 20px; border-radius: 999px; font-weight: 500; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; flex: none; }

/* shared header pill (D-122) — on the navy app-bar, every page except the landing */
.netpill { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: #E4EAF2; font-weight: 500; white-space: nowrap; margin-right: 8px; }
.netpill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ow-lime, #6AD147); box-shadow: 0 0 6px color-mix(in oklab, var(--ow-lime, #6AD147) 70%, transparent); flex: none; }
.netpill .mud-icon-root { width: 13px; height: 13px; color: color-mix(in oklab, var(--ow-lime, #6AD147) 62%, #fff); }
.netpill b { color: #fff; font-weight: 500; }
.netpill .u { color: #9aa3b5; font-size: 10px; letter-spacing: .02em; }
.netpill-sep { width: 1px; height: 11px; background: rgba(255, 255, 255, .18); flex: none; }
.netpill.empty { color: #9aa3b5; }
.netpill.empty .netpill-dot { background: #9aa3b5; box-shadow: none; }

/* ---- Blazor error UI (kept from scaffold; the #blazor-error-ui div lives in App.razor) ---- */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ===== Admin Download-metrics page (CC-9) — sortable, exportable build table ===== */
.dm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dm-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dm-actions-row { display: inline-flex; align-items: center; gap: 8px; }
.dm-export { display: inline-flex; align-items: center; gap: 7px; background: var(--ow-navy, #0F1B2D); color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity .15s; }
.dm-export:hover { opacity: .88; }
.dm-export .mud-icon-root { color: var(--ow-lime, #50FE30); }
.dm-ghost { display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--ow-navy, #0F1B2D); border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; }
.dm-ghost:hover { background: var(--md-sys-color-surface-variant, #f4f6fa); }
.dm-ghost:disabled { opacity: .5; cursor: default; }

.dm-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; }
/* One anatomy for every summary card: caption on top, big number, optional sub — nothing
   top-pinned vs centered anymore. Fixed min-height keeps caption-only cards level with sub'd ones. */
.dm-card { display: flex; flex-direction: column; justify-content: flex-start; background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 12px; padding: 12px 16px; min-width: 128px; min-height: 86px; }
.dm-card-total { border-color: color-mix(in oklab, var(--ow-navy, #0F1B2D) 22%, #fff); }
.dm-card-cap { font-size: 11px; color: var(--ow-mute, #5B6478); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin: 0 0 6px; }
.dm-card-num { font-size: 24px; font-weight: 500; margin: 0; line-height: 1; }
.dm-card-sub { font-size: 11px; color: var(--ow-mute, #5B6478); margin: 6px 0 0; }

.dm-table-wrap { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; overflow-x: auto; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dm-table th { padding: 11px 14px; text-align: left; background: var(--md-sys-color-surface-variant, #f4f6fa); color: var(--ow-mute, #5B6478); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; user-select: none; white-space: nowrap; border-bottom: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); }
.dm-table th:hover, .dm-table th.on { color: var(--ow-navy, #0F1B2D); }
.dm-table th.dm-num { text-align: right; }
.dm-sort { font-size: 11px; }
.dm-table td { padding: 10px 14px; border-bottom: 1px solid var(--md-sys-color-outline-variant, #eceff4); vertical-align: middle; }
.dm-table tbody tr:last-child td { border-bottom: none; }
.dm-table tbody tr:hover { background: var(--md-sys-color-surface-variant, #f7f9fc); }
.dm-product { font-weight: 500; }
.dm-table .dm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--ow-mute, #5B6478); }
.dm-num { text-align: right; }
.dm-dl { font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-date { color: var(--ow-mute, #5B6478); white-space: nowrap; }
.dm-fmt { display: inline-block; background: var(--md-sys-color-surface-variant, #eef1f6); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-family: ui-monospace, monospace; }
.dm-badge { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 500; }
.dm-badge.ok { background: color-mix(in oklab, #1E5A1E 12%, #fff); color: #1E5A1E; }
.dm-badge.pruned { background: var(--md-sys-color-surface-variant, #eef1f6); color: var(--ow-mute, #5B6478); }
.dm-empty { background: #fff; border: 1px solid var(--md-sys-color-outline-variant, #dfe3ea); border-radius: 14px; padding: 40px 32px; text-align: center; color: var(--ow-mute, #5B6478); }
.dm-empty .mud-icon-root { color: #1E5A1E; margin-bottom: 10px; }
.dm-empty p { margin: 0; font-size: 14px; }