/* EZ Inventory app theme — brand v3 "Plasma × Dometrain".
   Dometrain's structural language (floating top nav, generous rounding,
   gradient-as-accent, soft surface hierarchy, Poppins/JetBrains Mono)
   mapped onto the Plasma palette. Structural rules live in
   docs/cymansys-style-guide.md — change tokens, not structure.
   Fonts are bundled locally (MAUI runs offline; no third-party requests). */

@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-var.woff2") format("woff2-variations");
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("fonts/SpaceGrotesk.ttf") format("truetype-variations");
    font-weight: 300 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --void: light-dark(#F3F6F9, #0A0F16);
    --panel: light-dark(#FFFFFF, #10161F);
    --panel-2: light-dark(#E9EFF5, #151D28);
    --edge: light-dark(#D9E2EB, #1D2A38);
    --edge-2: light-dark(#BFCDDB, #2C3D4F);
    --slab-3: light-dark(#A9BCCD, #3C5268);
    --paper: light-dark(#101823, #EDF2F7);
    --steel: light-dark(#4A5D70, #8FA6BB);
    --steel-dim: light-dark(#7A8C9E, #5F7284);
    --plasma-a: #FF5A1F;
    --plasma-b: #FF2E7E;
    --plasma-grad: linear-gradient(135deg, #FF5A1F, #FF2E7E);
    --good: light-dark(#148A4E, #35C77B);
    --warn: light-dark(#9A6500, #F5B32B);
    --critical: light-dark(#D03030, #FF4D4D);
    --ink: light-dark(#0A0F16, #FFFFFF); /* headings, active pills — near-black on light, pure white on dark */
    --info: light-dark(#2F7FD6, #6FB3FF); /* transfer badge, inventory-value KPI */
    /* Elevation: faint ink on light, black on dark. A token must not reference
       itself in its own light-dark() — that is invalid and the property vanishes. */
    --shadow-chrome: light-dark(rgba(16, 24, 35, 0.10), rgba(0, 0, 0, 0.35)); /* floating nav */
    --shadow-pop: light-dark(rgba(16, 24, 35, 0.14), rgba(0, 0, 0, 0.45)); /* popovers, cards that float */
    --shadow-deep: light-dark(rgba(16, 24, 35, 0.18), rgba(0, 0, 0, 0.55)); /* modals, hero panels */
    --scrim: light-dark(rgba(16, 24, 35, 0.55), rgba(4, 7, 12, 0.85)); /* modal / lightbox backdrop */
    --font-display: "Poppins", "Space Grotesk", system-ui, sans-serif;
    --font-body: "Poppins", "Space Grotesk", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --radius: 12px;
    --radius-sm: 10px;
    --radius-lg: 16px;
    --measure: 1600px;
    --search-min: 280px;
}

/* Theme switch. Tokens are light-dark() pairs resolved by color-scheme: dark is
   the brand default; theme.js (loaded in <head>) sets data-theme="light" on <html> (before first
   paint) when the user chose the light theme (localStorage "ez.theme"). */
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--void);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Soft plasma glow behind the page, Dometrain-hero style — decorative only, both themes. */
body {
    background-image:
        radial-gradient(52rem 26rem at 85% -8%, color-mix(in srgb, var(--plasma-b) 7%, transparent), transparent 70%),
        radial-gradient(40rem 22rem at -10% 4%, color-mix(in srgb, var(--plasma-a) 5%, transparent), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }

a { color: inherit; text-decoration: none; }

/* ---------- Shell: floating rounded top bar ---------- */

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 14px 20px 6px;
    background: linear-gradient(to bottom, var(--void) 60%, transparent);
}

.topbar-inner {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 18px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 32px var(--shadow-chrome);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 30px; width: auto; }
/* Two logo files (paper vs ink wordmark); the theme picks one. */
.brand .logo-light { display: none; }
:root[data-theme="light"] .brand .logo-dark { display: none; }
:root[data-theme="light"] .brand .logo-light { display: block; }

.top-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    /* Overflow stays visible here so the Settings popover isn't clipped; the
       compact breakpoint turns it into a horizontal scroller. */
    scrollbar-width: none;
}
.top-links::-webkit-scrollbar { display: none; }

.top-link {
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--steel);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 120ms ease, background 120ms ease;
}

.top-link:hover { color: var(--paper); background: var(--panel-2); }

.top-link.active {
    color: var(--ink);
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent);
}

.topbar-foot { display: flex; gap: 6px; flex-shrink: 0; }

/* Hamburger + drawer backdrop only exist on the compact breakpoint. */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

/* Settings dropdown: a top-link that opens a menu-pop of the "add things" screens. */
.tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--steel-dim);
    padding: 4px 10px;
    border: 1px solid var(--edge);
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-dev { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* Plan chip: the tenant's effective plan, one click from Plan & billing. */
.tag-plan { color: var(--steel); margin-right: 10px; transition: color 120ms ease, border-color 120ms ease; }
.tag-plan:hover { color: var(--paper); border-color: var(--edge-2); }

/* Language pill: EN | FR beside the avatar, mono like the chips. A signed-in user's copy
   (.topbar-lang-member, set by the layout's AuthorizeView — no :has(), which older Android
   WebViews and Firefox < 121 lack) hides ≤960px, where the account menu holds the same
   segment and the row is already tight; the signed-out copy stays, the gate has no menu. */
.topbar-lang { margin-right: 10px; flex-shrink: 0; }
.topbar-lang .seg-opt { padding: 2px 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; }
/* A switch in flight: aria-disabled rather than disabled, so keyboard focus stays put. */
.seg-opt[aria-disabled="true"] { cursor: progress; }

/* ---------- User menu (topbar avatar + session dropdown) ---------- */

.user-menu { position: relative; display: flex; align-items: center; }

.avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--panel-2);
    border: 1px solid var(--edge-2);
    color: var(--paper);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.avatar-btn:hover .avatar,
.avatar-btn[aria-expanded="true"] .avatar {
    border-color: color-mix(in srgb, var(--plasma-a) 55%, transparent);
}

.avatar-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 2px; }

.menu-backdrop { position: fixed; inset: 0; z-index: 60; }

.menu-pop {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 61;
    min-width: 220px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px var(--shadow-pop);
}

.menu-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--edge);
    margin-bottom: 6px;
}

.menu-name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.menu-email { color: var(--steel-dim); font-size: 12px; word-break: break-all; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--steel);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.menu-item:hover { color: var(--paper); background: var(--panel-2); }
.menu-item-exit { color: var(--critical); }
.menu-item-exit:hover { color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, transparent); }

/* Account hub: two columns (Workspace | You) under a name row with a larger avatar. */
.menu-hub { min-width: 0; }
.menu-hub .menu-head { flex-direction: row; align-items: center; gap: 10px; }
.menu-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avatar-lg { width: 36px; height: 36px; font-size: 12px; }
.menu-cols { display: flex; gap: 6px; }
.menu-col { display: flex; flex-direction: column; min-width: 200px; }
.menu-col-workspace { min-width: 262px; }
.menu-col + .menu-col { border-left: 1px solid var(--edge); padding-left: 6px; }
.menu-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--steel-dim);
    padding: 10px 12px 4px;
}
.menu-div { height: 1px; background: var(--edge); margin: 6px 0; }
.nav-ic { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.menu-text { flex: 1; min-width: 0; }
.menu-sub { display: block; font-size: 11.5px; font-weight: 400; color: var(--steel-dim); margin-top: 1px; white-space: nowrap; }
.menu-hint { font-family: var(--font-mono); font-size: 11px; color: var(--steel-dim); }
.menu-item.active { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent); }
/* Plan row: title + source line, then a compact SKU meter. */
.menu-item-plan { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 12px; }
.menu-item-plan .menu-row { display: flex; align-items: center; gap: 10px; color: var(--paper); }
.menu-meter { display: block; height: 4px; margin: 0; }
.menu-meter .meter-fill { display: block; height: 100%; background: var(--info); }
.menu-meter-count { font-size: 11px; color: var(--steel-dim); }
/* Theme: segmented Dark | Light, not a row you have to read. */
.menu-item-theme { cursor: default; }
.menu-item-theme:hover { background: none; color: var(--steel); }
.seg { display: inline-flex; padding: 2px; border: 1px solid var(--edge-2); border-radius: 999px; gap: 2px; }
.seg-opt {
    padding: 3px 10px;
    border: none;
    border-radius: 999px;
    background: none;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--steel-dim);
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}
.seg-opt:hover { color: var(--paper); }
.seg-opt.on { color: var(--ink); background: var(--panel-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent); }
.seg-opt:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 1px; }

/* ---------- Info hints (tap-to-toggle metric definitions) ---------- */

.info-hint { position: relative; display: inline-flex; align-items: center; }

.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--steel-dim);
    cursor: pointer;
    transition: color 120ms ease;
}

.info-btn:hover,
.info-btn[aria-expanded="true"] { color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper)); }

.info-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 1px; }

.info-pop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 61;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px var(--shadow-pop);
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    cursor: auto;
}

.info-pop-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.info-pop-text { font-size: 12.5px; font-weight: 400; color: var(--steel); line-height: 1.5; }

/* Edge tiles: anchor the popover so it stays inside the viewport. */
.grid-kpis .panel:first-child .info-pop,
.panel-title .info-pop { left: 0; transform: none; }
.grid-kpis .panel:last-child .info-pop { left: auto; right: 0; transform: none; }

/* ---------- Profile page claim rows ---------- */

.profile-rows {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px 18px;
    margin: 0;
    align-items: baseline;
}

.profile-rows dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}

.profile-rows dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.content {
    width: 100%;
    /* Side padding sits outside the measure so panel edges line up exactly
       with the topbar pill (which is --measure wide inside the same gutters). */
    max-width: calc(var(--measure) + 40px);
    margin: 0 auto;
    padding: 26px 20px 56px;
    min-width: 0;
}

/* ---------- Page chrome ---------- */

.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.page-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.page-sub { color: var(--steel); font-size: 13.5px; margin-top: 5px; }

/* ---------- Panels / cards ---------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    padding: 22px;
}

.panel-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 16px;
}

.grid { display: grid; gap: 16px; }
.grid-kpis { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- KPI tiles ---------- */

.kpi { display: flex; flex-direction: column; gap: 7px; }
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}
.kpi-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--ink);
}
/* The headline KPI (inventory value) is a fact, not a status: info blue, never the
   accent gradient — next to the red loss tile that read as a second warning. */
.kpi-value.hot { color: var(--info); }
.kpi-value.bad { color: var(--critical); }
.kpi-note { font-size: 12px; color: var(--steel-dim); }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: var(--radius); }
.panel .table-wrap { border: none; border-radius: 0; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

table.data th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel-dim);
    padding: 10px 14px;
    border-bottom: 1px solid var(--edge-2);
    background: var(--panel);
    white-space: nowrap;
}

table.data td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--edge);
    vertical-align: middle;
}

table.data tr:last-child td { border-bottom: none; }
@media (hover: hover) { table.data tr:hover td { background: var(--panel-2); } }
/* Master-detail selection (Warehouses page): mirrors the active nav pill. */
table.data tr.row-selected td {
    background: var(--panel-2);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--plasma-a) 45%, transparent),
                inset 0 -1px 0 color-mix(in srgb, var(--plasma-a) 45%, transparent);
}

/* Disclosure rows (Warehouses page): a warehouse expands in place so its
   locations appear directly under the row that was clicked. The chevron and the
   count column are the two signals that there is something nested to open. */
.disclose {
    display: inline-block;
    color: var(--steel-dim);
    font-size: 15px;
    line-height: 1;
    transition: transform 140ms ease, color 140ms ease;
}
table.data tr:hover .disclose { color: var(--steel); }
.disclose.open { transform: rotate(90deg); color: var(--plasma-a); }
td.disclose-cell, th.disclose-cell { width: 30px; padding-right: 0; }

.disclose-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    margin: -4px -6px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

table.data tr.row-detail:hover td { background: var(--panel); }
table.data tr.row-detail > td {
    padding: 4px 14px 18px 44px;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--plasma-a) 45%, transparent);
}

/* Header for the nested block inside a disclosure row. */
.detail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0;
}
.detail-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.detail-sub { font-size: 12px; color: var(--steel-dim); }

/* The nested table sits on --void so it reads as contained by its parent row
   rather than as a continuation of the outer table. */
.detail-body {
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    background: var(--void);
    overflow-x: auto;
}
.detail-body table.data th { background: var(--void); }
.detail-body .empty { padding: 26px 16px; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* table.data th out-specifies th.num, so numeric headers need their own rule
   to sit right-aligned over their data. */
table.data th.num { text-align: right; }
/* Codes (SKUs, lots) never break mid-value; the table-wrap scrolls instead. */
.mono { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.dim { color: var(--steel); }
.neg { color: var(--critical); font-weight: 600; }

/* ---------- Badges: Dometrain dot-pill ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid var(--edge-2);
    color: var(--steel);
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge-receipt { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge-shipment { color: var(--steel); border-color: var(--edge-2); }
.badge-transfer { color: var(--info); border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.badge-adjustment { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-count { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-scrap { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.badge-inactive { color: var(--steel-dim); }
.badge-active { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }

/* Chip rows: several dot-pills in one table cell (e.g. warehouses per product). */
.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }

/* ---------- Forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}

input.in, select.in, textarea.in {
    background: var(--void);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-sm);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

input.in:focus, select.in:focus, textarea.in:focus {
    border-color: var(--plasma-a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--plasma-a) 18%, transparent);
}

input.in::placeholder { color: var(--steel-dim); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* Single-form pages (Receive): one centered column, wider than the old 640px card, with
   the page head inside it so the title shares the card's left edge. The card itself
   breathes more: taller inputs, more room between fields and in the two-column rows. */
.form-page { max-width: 760px; margin: 0 auto; }
.form-card { padding: 30px 32px 26px; }
.form-card .field { margin-bottom: 20px; gap: 8px; }
.form-card .form-row { gap: 20px; }
.form-card input.in, .form-card select.in, .form-card textarea.in { padding: 12px 15px; font-size: 15px; }
.form-card .actions { margin-top: 6px; }
@media (max-width: 640px) {
    .panel.form-card { padding: 22px 18px 20px; }
    .form-card .form-row { gap: 0; }
    .form-card input.in, .form-card select.in, .form-card textarea.in { font-size: 16px; }
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--edge-2);
    background: var(--panel-2);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; }

.btn-hot {
    background: var(--plasma-grad);
    border: none;
    color: #FFF;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--plasma-b) 30%, transparent);
}
.btn-hot:hover { filter: brightness(1.08); box-shadow: 0 8px 26px color-mix(in srgb, var(--plasma-b) 40%, transparent); }

/* Dometrain secondary = outline in the accent color. */
.btn-ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--plasma-a) 50%, transparent);
    color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper));
}
.btn-ghost:hover { background: color-mix(in srgb, var(--plasma-a) 10%, transparent); filter: none; }

.btn-sm { padding: 5px 13px; font-size: 12px; font-weight: 500; }

.btn-danger { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Toolbar / filters ---------- */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .in { width: auto; min-width: 200px; border-radius: 999px; }
.toolbar .in-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--steel); }
.toolbar .in-label .in { min-width: 150px; }
.toolbar .tz-note { font-size: 12px; margin-left: auto; }

/* Standard search input: full pill, one width everywhere (style guide §2 forms). */
.in-search { min-width: var(--search-min, 280px); }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13.5px;
    margin-bottom: 15px;
    border: 1px solid;
}
.alert-error { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); background: color-mix(in srgb, var(--critical) 8%, transparent); }
.alert-ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }

/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8dvh 16px 16px;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.modal {
    width: 100%;
    max-width: 560px;
    max-height: 84dvh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: 0 24px 64px var(--shadow-deep);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.modal-title { font-size: 18px; font-weight: 700; color: var(--ink); }

.modal-close {
    background: none;
    border: none;
    color: var(--steel);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    border-radius: 999px;
}
.modal-close:hover { color: var(--paper); background: var(--panel-2); }

.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Tenant bootstrap gate ---------- */

/* A brand-new user's first token has no tenant claim, so every page behind this
   would render its "403" error state for the length of the bootstrap round-trip.
   Above the tour layer: nothing should paint before the workspace exists. */
.setup-gate {
    position: fixed;
    inset: 0;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    z-index: 300;
}

.setup-gate-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 380px;
}

.setup-gate-card h3 { font-size: 18px; font-weight: 700; color: var(--ink); }

/* ---------- First-login tour ---------- */

/* Sits above the modal layer: the tour can open over any page, including one
   that already has a modal on screen. */
.tour-backdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    z-index: 200;
    backdrop-filter: blur(4px);
}

.tour-card {
    width: 100%;
    max-width: 480px;
    max-height: 88dvh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: 0 24px 64px var(--shadow-deep);
}

.tour-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.tour-count {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-dim);
}

.tour-title { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.25; }

.tour-body { display: flex; flex-direction: column; gap: 10px; }
.tour-body p { font-size: 14px; color: var(--steel); line-height: 1.6; }
.tour-body a { color: color-mix(in srgb, var(--plasma-a) 70%, var(--paper)); font-weight: 600; }

.tour-dots { display: flex; gap: 6px; margin: 20px 0 18px; }

.tour-dot {
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--edge-2);
}
.tour-dot.on { background: var(--plasma-grad); }

.tour-foot { display: flex; align-items: center; gap: 10px; }
/* Skip stays quiet and pinned left; Back/Next own the right edge. */
.tour-skip { margin-right: auto; background: none; border-color: transparent; color: var(--steel-dim); }
.tour-skip:hover { color: var(--steel); background: var(--panel-2); filter: none; }

/* ---------- Charts ---------- */

.chart-wrap { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-bar { cursor: pointer; }
.chart-bar:hover { filter: brightness(1.25); }

.chart-axis-label {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--steel-dim);
}

.chart-value-label {
    font-family: var(--font-mono);
    font-size: 10px;
    fill: var(--steel);
}

.chart-tip {
    position: absolute;
    transform: translate(-50%, -120%);
    background: var(--void);
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--paper);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px var(--shadow-pop);
}
.chart-tip .tip-label { color: var(--steel); }

/* ---------- Usage meters ---------- */

.meter { margin-bottom: 14px; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.meter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--steel);
}
.meter-count { font-size: 12.5px; color: var(--paper); }

.meter-track {
    height: 8px;
    border-radius: 999px;
    background: var(--void);
    border: 1px solid var(--edge);
    overflow: hidden;
}
.meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--slab-3);
    transition: width 300ms ease;
}
.meter-fill.meter-warn { background: var(--warn); }
.meter-fill.meter-critical { background: var(--plasma-grad); }

/* ---------- Pricing cards ---------- */

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 16px;
}

.plan-card { display: flex; flex-direction: column; gap: 11px; }
.plan-card .btn { margin-top: auto; }

.plan-current {
    border-color: transparent;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        var(--plasma-grad) border-box;
    border: 1px solid transparent;
}

.plan-name {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--steel);
}

.plan-amount {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
}

.plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    color: var(--steel);
}
.plan-features b { color: var(--paper); font-weight: 600; }

/* ---------- Misc ---------- */

.empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--steel-dim);
    font-size: 13.5px;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--edge-2);
    border-top-color: var(--plasma-a);
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pager (shared Pager.razor) ---------- */

.pager {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
    color: var(--steel);
    font-size: 12.5px;
}
.pager-sum { white-space: nowrap; }
.pager-pages { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.pager-btn {
    min-width: 34px;
    padding: 5px 10px;
    border-radius: 999px;
    background: transparent;
    font-weight: 500;
}
.pager-btn:hover:not(:disabled) { background: var(--panel-2); }
.pager-btn:disabled { opacity: 0.35; cursor: default; }
.pager-num { font-family: var(--font-mono); }
/* Active page mirrors the active nav pill: panel fill + inset accent ring. */
.pager-num.active {
    color: var(--ink);
    background: var(--panel-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--plasma-a) 55%, transparent);
}
.pager-size { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.pager-size .in { width: auto; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--critical);
    color: var(--ink);
    padding: 10px 16px;
    z-index: 1000;
}

/* ---------- Compact / touch (iPad, phone) ---------- */

/* iPad Pro 11" portrait (834px) is past the hamburger breakpoint but not wide
   enough for brand + five links + two env tags + avatar in one pill. */
@media (max-width: 960px) {
    .topbar-foot { display: none; }
    .topbar-lang-member { display: none; }
}

/* Phones and portrait tablets: brand + avatar + round hamburger on one row; the
   links drop down inside the pill as full-width rows when the menu is open.
   Mirrors the site header. */
@media (max-width: 820px) {
    .topbar { padding: 10px 10px 4px; }
    .topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 6px 10px;
        padding: 6px 8px 6px 14px;
        border-radius: var(--radius);
        z-index: 1;
    }
    .brand { grid-row: 1; grid-column: 1; }
    .brand img { height: 26px; }
    .user-menu { grid-row: 1; grid-column: 2; }
    .topbar-lang { grid-row: 1; grid-column: 2; } /* signed out: the avatar's cell, pinned */

    .nav-toggle {
        grid-row: 1;
        grid-column: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--edge);
        border-radius: 999px;
        background: transparent;
        color: var(--paper);
        cursor: pointer;
        transition: background 120ms ease, border-color 120ms ease;
    }
    .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--panel-2); border-color: var(--edge-2); }
    .nav-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--plasma-a) 55%, transparent); outline-offset: 2px; }
    .nav-toggle .bars {
        position: relative;
        display: block;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: background 120ms ease;
    }
    .nav-toggle .bars::before, .nav-toggle .bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 160ms ease, top 160ms ease;
    }
    .nav-toggle .bars::before { top: -6px; }
    .nav-toggle .bars::after { top: 6px; }
    .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
    .nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

    /* Drawer: hidden until the toggle opens it. Sits under the pill (z 1) inside
       the header's stacking context, above the fixed backdrop (z 0). */
    .top-links {
        display: none;
        grid-row: 2;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 4px -8px 0 -14px;
        padding: 8px 6px 2px;
        border-top: 1px solid var(--edge);
    }
    .topbar.is-open .top-links { display: flex; }
    .topbar.is-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 0; }

    .top-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 15px;
        border-radius: var(--radius-sm);
    }
    /* Avatar keeps its size; the button around it grows to a 44px target. */
    .avatar-btn { min-width: 44px; min-height: 44px; }
    .avatar { width: 30px; height: 30px; }
    .user-menu .menu-pop { top: calc(100% + 6px); max-width: calc(100vw - 20px); }
    .user-menu .menu-item { min-height: 44px; }
    /* The hub stacks: Workspace above You, one column wide. */
    .menu-cols { flex-direction: column; }
    .menu-col, .menu-col-workspace { min-width: 0; }
    .menu-col + .menu-col { border-left: none; border-top: 1px solid var(--edge); padding-left: 0; padding-top: 6px; }
    .seg-opt { min-height: 32px; }

    .content { padding: 18px 10px 40px; }

    /* Touch targets: 44px controls; 16px inputs so iOS doesn't zoom on focus. */
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    input.in, select.in, textarea.in { min-height: 44px; font-size: 16px; }
    .pager-btn { min-width: 40px; min-height: 40px; }
    .pager-size .in { min-height: 40px; }
    .disclose-btn { min-width: 40px; min-height: 40px; }
    table.data td { padding: 12px 12px; }
    table.data th { padding: 10px 12px; }
    /* The nested locations block can't afford a 44px indent at 390px. */
    table.data tr.row-detail > td { padding: 4px 10px 14px 16px; }
    /* Tour: card takes the width it can get, buttons reach 44px touch targets. */
    .tour-card { padding: 20px 16px; max-height: 92dvh; }
    .tour-title { font-size: 17px; }
    .tour-foot .btn { min-height: 44px; }
}

/* Phones: filters stack full-width, modals go edge to edge, titles step down. */
@media (max-width: 640px) {
    .page-title { font-size: 23px; }
    .page-head { margin-bottom: 18px; }
    .toolbar .in, .toolbar .in-label .in, .in-search { width: 100%; min-width: 0; }
    .toolbar .in-label { width: 100%; }
    .toolbar .tz-note { margin-left: 0; }
    .tag-plan { display: none; }
    .modal-backdrop { padding: 4dvh 8px 8px; }
    .modal { padding: 20px 16px; max-height: 92dvh; }
    .modal-foot { flex-wrap: wrap; }
    .modal-foot .btn { flex: 1 1 auto; }
    .panel { padding: 16px 14px; }
}

/* Special accounts: segment pill in the account menu, complimentary note on Plan. */
.menu-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-pill { font-size: 11px; }
.plan-complimentary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
table.data.accounts td { white-space: nowrap; }
table.data.accounts td.email { white-space: normal; word-break: break-all; min-width: 160px; }
table.data.accounts .actions { flex-wrap: nowrap; }
table.data.accounts th, table.data.accounts td { padding-left: 10px; padding-right: 10px; }
/* Actions stay reachable when the wide table scrolls. */
table.data.accounts th:last-child, table.data.accounts td:last-child {
  position: sticky; right: 0; background: var(--panel);
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .45);
}
table.data.accounts tr:hover td:last-child { background: var(--panel-2); }
table.data.report td, table.data.report th { white-space: nowrap; }
.admin-forbidden { padding: 28px 12px; }

/* ---------- Feedback widget (floating button + face picker) ---------- */

/* Sits above page content, below the account-menu backdrop (60) and modals (100),
   so an open menu or dialog covers it; clears the phone safe area. */
.fab-feedback {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--edge-2);
    background: var(--panel);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px var(--shadow-pop);
    transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
}
.fab-feedback:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--plasma-a) 55%, transparent); }
.fab-feedback:focus-visible { outline: 2px solid var(--plasma-a); outline-offset: 2px; }
.fab-feedback.is-sent { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }

.face-picker { display: flex; justify-content: space-between; gap: 6px; margin: 4px 0 6px; }
.face {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--edge-2);
    background: var(--void);
    color: var(--steel);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.face:hover { color: var(--paper); transform: translateY(-1px); }
.face.is-selected {
    color: var(--plasma-a);
    border-color: color-mix(in srgb, var(--plasma-a) 60%, transparent);
    background: color-mix(in srgb, var(--plasma-a) 10%, transparent);
}
.face:focus-visible { outline: 2px solid var(--plasma-a); outline-offset: 2px; }
.face-legend {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel-dim);
    margin-bottom: 16px;
}

.feedback-thanks { display: flex; align-items: center; gap: 14px; padding: 8px 0 4px; }
.feedback-thanks-mark {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    color: var(--good);
    border: 1px solid color-mix(in srgb, var(--good) 45%, transparent);
    background: color-mix(in srgb, var(--good) 10%, transparent);
    font-size: 18px;
}
.feedback-thanks-title { font-weight: 700; color: var(--ink); margin-bottom: 2px; }

/* Admin › Feedback list. */
.kpi-value.warn { color: var(--warn); }
.kpi-value.good { color: var(--good); }
.feedback-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
table.data.feedback td { vertical-align: top; }
table.data.feedback td.comment { white-space: pre-wrap; min-width: 240px; max-width: 520px; }
table.data.feedback td.email { word-break: break-all; min-width: 140px; }

@media (max-width: 820px) {
    .fab-feedback .fab-label { display: none; }
    .fab-feedback { padding: 0; width: 48px; height: 48px; justify-content: center; right: 14px; }
}

/* ---------- Product expiry + bulk edit (Phase 8) ---------- */
.badge-expired { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, transparent); }
.badge-soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
td.expires { white-space: nowrap; }
td.expires .badge { margin-left: 8px; }
.alert-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.in-expiry { min-width: 150px; }

/* KPI tile that is also a link: same panel, pointer, no underline. */
a.kpi-link { text-decoration: none; color: inherit; cursor: pointer; }
a.kpi-link:hover { border-color: var(--edge-2); }
.kpi-value.warn { color: var(--warn); }

/* Sortable header: a bare button styled like the header text. */
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.th-sort.on { color: var(--ink); }

/* Selection column + the bulk bar that appears above the table. */
table.data th.sel, table.data td.sel { width: 32px; padding-right: 0; }
table.data td.sel input, table.data th.sel input { width: 16px; height: 16px; accent-color: var(--plasma-a); cursor: pointer; }
table.data tr.is-selected td { background: color-mix(in srgb, var(--plasma-a) 6%, transparent); }
.bulk-bar {
    position: sticky;
    top: 8px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--plasma-a) 45%, transparent);
    background: color-mix(in srgb, var(--plasma-a) 8%, var(--panel));
    box-shadow: 0 10px 28px var(--shadow-pop);
}
.bulk-count { font-size: 13px; color: var(--paper); }
.bulk-bar .actions { margin-left: auto; }
@media (max-width: 640px) {
    .bulk-bar .actions { margin-left: 0; }
    .bulk-bar .actions .btn { flex: 1 1 auto; }
}

/* ---------- Ideas board (Phase 3) ---------- */
/* Tokens only (docs/cymansys-style-guide.md): light-dark() pairs resolve the theme. */


.ideas-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.idea-form { position: sticky; top: 92px; }
.idea-form .field:last-of-type { margin-bottom: 10px; }
.idea-form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.idea-posted { color: var(--good); font-size: 13px; }
.field-error { color: var(--critical); font-size: 12.5px; }
.field-hint { font-size: 11.5px; text-align: right; }

.ideas-toolbar { justify-content: space-between; }

.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--edge); }
.tab {
    padding: 6px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--steel);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.tab:hover { color: var(--paper); }
.tab.is-active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 4px var(--shadow-chrome); }

.idea-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
}
.idea-card.is-mine { border-color: color-mix(in srgb, var(--plasma-a) 35%, var(--edge)); }

.vote { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.vote-btn {
    width: 34px;
    height: 28px;
    border: 1px solid var(--edge-2);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    color: var(--steel);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}
.vote-btn:hover { color: var(--paper); border-color: var(--slab-3); }
.vote-score { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); padding: 3px 0; }
.vote.is-up .vote-up { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); }
.vote.is-down .vote-down { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 50%, transparent); background: color-mix(in srgb, var(--critical) 12%, transparent); }
.vote.is-up .vote-score { color: var(--good); }
.vote.is-down .vote-score { color: var(--critical); }

.idea-body { min-width: 0; }
.idea-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.idea-title { font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.idea-desc { margin: 8px 0 0; color: var(--paper); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }
.idea-author { color: var(--steel); font-weight: 500; }
.idea-yours { color: var(--plasma-a); border-color: color-mix(in srgb, var(--plasma-a) 40%, transparent); }
.idea-delete { padding: 3px 10px; }
.ideas-more { text-align: center; padding: 8px 0 20px; }

@media (max-width: 900px) {
    .ideas-layout { grid-template-columns: 1fr; }
    .idea-form { position: static; }
}

@media (max-width: 480px) {
    .idea-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .vote-btn { width: 30px; }
}