:root, [data-theme="light"] {
    --bg: #f8f9fa;
    --surface: #fff;
    --border: #dee2e6;
    --text: #212529;
    --text-muted: #6c757d;
    --primary: #0d6efd;
    --primary-hover: #0b5ed7;
    --danger: #dc3545;
    --success: #198754;
    --warning: #ffc107;
    --radius: 6px;
    --hover-row: #f8f9fb;
    --shadow: rgba(0,0,0,0.08);
    --filter-bg: #e7f1ff;
    --filter-border: #b6d4fe;
    --filter-text: #084298;
    --warn-bg: #fff3cd;
    --warn-border: #ffc107;
    --warn-text: #664d03;
    --key-bg: #1e1e1e;
    --key-text: #d4d4d4;
    --tag-bg: #e9ecef;
}

[data-theme="dark"] {
    --bg: #1a1d21;
    --surface: #22262b;
    --border: #373b41;
    --text: #e1e3e6;
    --text-muted: #8b929a;
    --primary: #4da3ff;
    --primary-hover: #3b8de6;
    --danger: #e55b68;
    --success: #3dbb78;
    --warning: #f0c351;
    --hover-row: #282c32;
    --shadow: rgba(0,0,0,0.3);
    --filter-bg: #1c2a3a;
    --filter-border: #2d4a6f;
    --filter-text: #7fb3e0;
    --warn-bg: #332b00;
    --warn-border: #665600;
    --warn-text: #f0c351;
    --key-bg: #111;
    --key-text: #d4d4d4;
    --tag-bg: #373b41;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #1a1d21;
        --surface: #22262b;
        --border: #373b41;
        --text: #e1e3e6;
        --text-muted: #8b929a;
        --primary: #4da3ff;
        --primary-hover: #3b8de6;
        --danger: #e55b68;
        --success: #3dbb78;
        --warning: #f0c351;
        --hover-row: #282c32;
        --shadow: rgba(0,0,0,0.3);
        --filter-bg: #1c2a3a;
        --filter-border: #2d4a6f;
        --filter-text: #7fb3e0;
        --warn-bg: #332b00;
        --warn-border: #665600;
        --warn-text: #f0c351;
        --key-bg: #111;
        --key-text: #d4d4d4;
        --tag-bg: #373b41;
        }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    /* Reserve space for the fixed footer plus breathing room and the fade overlay above
       it. Footer ~44px + fade ~28px + clear air ~24px = 96px. */
    padding-bottom: 96px;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}

header .container { display: flex; justify-content: space-between; align-items: center; }

header h1 { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.header-subtitle { font-size: 12px; color: var(--text-muted); }

/* Footer */
footer {
    /* Pinned to the viewport bottom so version + copyright info is always visible.
       Body has matching padding-bottom so the last row of content isn't covered. */
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 10px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text-muted);
    z-index: 100;
}
/* Smooth fade just above the fixed footer — content gracefully dissolves into the
   footer instead of being clipped by a hard edge. Anchored to the footer via absolute
   positioning (the footer itself is `position: fixed`, which forms a positioning
   context), so `bottom: 100%` puts the fade directly above the footer's top edge. */
footer::before {
    content: ""; position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 32px;
    background: linear-gradient(to bottom, transparent, var(--bg));
    pointer-events: none;
}
footer .container {
    text-align: center; line-height: 1.6;
}
footer a { color: var(--text-muted); text-decoration: underline; }
footer a:hover { color: var(--text); }

#api-key-input {
    display: flex; gap: 8px; align-items: center; font-size: 13px;
}

#api-key-input input {
    width: 280px; padding: 6px 10px; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 13px; font-family: monospace;
}

#api-key-status { font-size: 12px; cursor: default; }
#api-key-status.ok { color: var(--success); }
#api-key-status.error { color: var(--danger); }

.header-separator { width: 1px; height: 20px; background: var(--border); }

/* Tabs */
.tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border);
    margin: 20px 0 0;
}

.tabs button {
    padding: 10px 20px; border: none; background: none; cursor: pointer;
    font-size: 14px; font-weight: 500; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all 0.15s;
}

.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tabs button:hover { color: var(--text); }

.tabs .tab-sep {
    display: inline-flex;
    align-items: center;
    color: var(--border);
    font-weight: 300;
    user-select: none;
    padding: 0 4px;
    margin-bottom: -2px;
}

/* Account tab is identity / self-service, conceptually different from data tabs.
 * Push it to the right edge of the tab strip with a flex spacer + a subtle vertical
 * separator on the left so the visual grouping is obvious. */
.tabs .tab-account {
    margin-left: auto;
    border-left: 1px solid var(--border);
    padding-left: 20px;
}

/* Home tab is the dashboard / landing — also conceptually distinct from the data
 * tabs (Products / Relations / Sales Prices). Mirror the .tab-account treatment with
 * a vertical separator on the right so Home reads as its own group. */
.tabs .tab-home {
    border-right: 1px solid var(--border);
    padding-right: 20px;
    margin-right: 0;
}

.tab-content { display: none; padding: 20px 0; }
.tab-content.active { display: block; }

/* Home / dashboard tab */
.home-welcome { margin: 4px 0 22px; }
.home-welcome h2 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.home-welcome-sub { font-size: 13px; color: var(--text-muted); }

.home-cards {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 28px;
}
.home-card { display: flex; flex-direction: column; }
.home-card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.home-card-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.home-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.home-card-big { font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
/* Truncate long admin names to a single line with ellipsis — the full name is
   always visible in the header dropdown and shown on hover via the title
   attribute, so the card just needs to identify which admin is current. Keeps
   every Home card at the same height regardless of admin-name length. */
.home-admin-name-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card-meta { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.home-card-meta + .home-card-meta { margin-top: 2px; }
.home-card-footer { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg); display: flex; gap: 14px; flex-wrap: wrap; }
/* Access & integrations footer overrides the flex layout with a 2-column grid
   so each "Manage …" link is anchored to its own column. Without this, the
   nudge-right-on-hover animation on the first link shifts the second one
   sideways (flex auto-reflows), which reads as jitter. */
/* Asymmetric columns, but less skewed than before — the keys sub-meta
   ("of N max · last d/m/yyyy") is the longest text on either side and was
   wrapping at 1fr/1.4fr. Nudging toward 1fr/1.1fr gives keys enough room to
   hold the sub-meta on one line while still leaving apps space for the longer
   "Manage connected apps" footer link. Both the body row and the footer share
   the same template so the label and the link remain vertically aligned. */
.home-card-footer.home-access-footer { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; }
/* Match the body's column-2 inner padding (16px) so "Manage connected apps"
   lines up with the "CONNECTED APPS" label above it. Without this, col2's
   link sits flush with the grid-cell edge while the body's col2 content sits
   16px further right (because of .home-access-stat:last-child padding-left). */
.home-access-footer > :nth-child(2) { padding-left: 16px; }
/* Extend the body's column separator down into the footer so it reads as one
   continuous divider from the card body through the footer links, rather than
   stopping abruptly at the footer's top border. */
.home-access-footer > :first-child { border-right: 1px solid var(--border); padding-right: 16px; }

/* Access & integrations card — two stats (API keys + connected apps) on an
   asymmetric grid. Col 2 gets more room because its label ("Connected apps")
   and its footer link ("Manage connected apps") are both longer than the keys
   equivalents. Template must match the footer template to keep the per-column
   vertical alignment.
   flex: 1 lets the grid cells stretch to the bottom of the card body so the
   separator line extends all the way down to meet the footer's border — the
   content inside each cell still sits at the top via align-items:stretch +
   the cells' own flex-direction:column. */
.home-access-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; margin-bottom: 0; flex: 1; }
.home-access-stat { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; }
.home-access-stat:first-child { padding-left: 0; border-right: 1px solid var(--border); }
.home-access-stat:last-child { padding-right: 0; }
.home-access-value { font-size: 20px; font-weight: 600; line-height: 1.2; }
.home-access-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.home-access-sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 4px; min-height: 1em; }
/* Full-width warning slot below the two stats — used for the "key expires soon"
   callout + optional Rotate button. Kept out of the narrow stat columns so the
   message stays readable and the action button has room. */
.home-access-warning { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Ghost-link style for "go to X" actions inside home cards. Borderless, brand colour,
   chevron arrow that nudges right on hover. Modern alternative to a generic outlined button. */
.home-card-link {
    display: inline-flex; align-items: center; gap: 3px;
    background: transparent; border: none; padding: 4px 0;
    color: var(--primary); font-weight: 600; font-size: 13px;
    cursor: pointer; font-family: inherit;
    transition: gap 0.15s, color 0.15s;
    /* The hover state widens `gap` by 2px for the "go" cue; without nowrap that
       extra 2px can tip a borderline-fitting label (e.g. "Manage connected apps")
       over the column boundary and wrap mid-text. Letting the chevron poke 2px
       past the column edge is cosmetically invisible — the card's body overflow
       is already visible. */
    white-space: nowrap;
}
.home-card-link:hover { gap: 5px; color: var(--primary-hover, var(--primary)); }
/* Nudge the SVG down 2px so its visual centre lines up with the text x-height
   (flex `align-items: center` centres the geometric box, which sits noticeably too high).
   No horizontal hover transform — the gap widening already provides a subtle "go" cue
   without making the chevron jump. */
.home-card-link svg { transition: transform 0.15s; transform: translateY(2px); }
.home-card-link:hover svg { transform: translateY(2px); }
.home-card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* Links inside the key dialog info banners — make them stand out clearly against the
   tinted backgrounds (so they're not just an underline on same-colored text). The
   broken-state banner uses a danger tint, the readonly banner a primary tint, and
   both render the link in brand blue with a bold weight + clear underline. */
#my-key-readonly-banner a,
#my-key-broken-banner a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#my-key-readonly-banner a:hover,
#my-key-broken-banner a:hover { opacity: 0.8; }

/* Name suggestion pills shown below the name input in create mode */
.name-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.name-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px; font-size: 12px;
    background: var(--bg); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: all 0.15s;
    font-family: inherit; line-height: 1.4;
}
.name-pill:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: var(--primary); color: var(--primary);
}
.name-suggestions-hint {
    width: 100%; font-size: 11px; color: var(--text-muted); opacity: 0.7;
    margin-bottom: -3px; padding-left: 2px;
}

/* Empty-state placeholder rendered inside the .token-tags area when no admins are
   selected -- softer than a chip, italicised, muted grey. */
.token-empty-placeholder {
    display: inline-block;
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    width: 100%;
}

.home-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }
.home-actions {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 28px;
}
.home-action-tile {
    display: block; text-align: left; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
    color: var(--text); cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    font-family: inherit; font-size: 13px;
}
.home-action-tile:hover { border-color: var(--primary); background: var(--hover-row); transform: translateY(-1px); }
.home-action-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.home-action-sub { font-size: 12px; color: var(--text-muted); }

.home-help {
    font-size: 12px; color: var(--text-muted);
    text-align: center; padding: 14px;
    border-top: 1px dashed var(--border);
}
.home-help a { color: var(--text-muted); text-decoration: underline; }
.home-help a:hover { color: var(--text); }

/* Cards & Tables */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}

/* Domain-suggestion card: highlighted with a left accent stripe so it stands
   out as an actionable banner above the main org list. The header gets a
   softer tinted background to hint at "suggestion" without being alarming. */
.domain-suggestions-card {
    border-left: 3px solid var(--primary);
}
.domain-suggestions-header {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}
.domain-suggestion-row {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 20px; padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.12s;
}
.domain-suggestion-row:last-child { border-bottom: none; }
.domain-suggestion-row:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.domain-suggestion-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.domain-suggestion-icon {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
.domain-suggestion-text { min-width: 0; }
.domain-suggestion-name { font-weight: 600; font-size: 14px; color: var(--text); }
.domain-suggestion-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.domain-suggestion-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.domain-suggestion-dismiss {
    background: none; border: none; padding: 4px 2px;
    color: var(--text-muted); font-size: 13px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.domain-suggestion-dismiss:hover { color: var(--text); }

.card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: var(--bg); gap: 12px; flex-wrap: wrap;
}

.card-header h2 { font-size: 15px; font-weight: 600; }

.card-header-actions {
    display: flex; gap: 10px; align-items: center; font-size: 13px; flex-wrap: wrap;
}
.card-header-actions label { font-weight: 500; color: var(--text-muted); }
.card-header-actions select, .card-header-actions input {
    padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; background: var(--surface); color: var(--text);
    color-scheme: light;
    transition: border-color 0.15s;
}
.card-header-actions select:hover, .card-header-actions input:hover {
    border-color: var(--text-muted);
}
/* Date-picker calendar indicator + clear button follow the theme. Without
   color-scheme: dark the native widget renders in light mode on dark UI,
   which produces a bright calendar icon against a dark input background. */
[data-theme="dark"] .card-header-actions input,
[data-theme="dark"] .card-header-actions select,
[data-theme="dark"] .history-strip-select { color-scheme: dark; background: var(--bg); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card-header-actions input,
    :root:not([data-theme="light"]) .card-header-actions select,
    :root:not([data-theme="light"]) .history-strip-select { color-scheme: dark; background: var(--bg); }
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fixed-layout { table-layout: fixed; }
th { text-align: left; padding: 6px 12px; font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
td { padding: 6px 12px; border-top: 1px solid var(--border); }
tr:hover td { background: var(--hover-row); }
tr.clickable-row { cursor: pointer; }

/* ============================================================
   BADGES & TAGS
   ------------------------------------------------------------
   .badge        — pill badges with semantic colors
   .badge-tag    — compact rounded-rect badges (Discount scope/status)
   .inline-tag   — tiny inline labels appended next to text
   .type-tag     — product type label tags (colored variants)
   .count-badge  — section header counts
   ============================================================ */

/* Pill badges */
.badge {
    display: inline-block; padding: 3px 9px; border-radius: 10px;
    font-size: 11px; font-weight: 600; margin: 1px 0;
    background: var(--tag-bg); color: var(--text);
}
.badge-success { background: #d1e7dd; color: #0f5132; }
.badge-role-regular { background: #e2e3e5; color: #41464b; }
.badge-role-unrestricted { background: #cfe2ff; color: #084298; }
.badge-role-admin { background: #dc3545; color: #fff; }
[data-theme="dark"] .badge-role-regular { background: #3a3d41; color: #c8c9ca; }
[data-theme="dark"] .badge-role-unrestricted { background: #1c2f4a; color: #7fb3e0; }
[data-theme="dark"] .badge-role-admin { background: #c0392b; color: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge-role-regular { background: #3a3d41; color: #c8c9ca; }
    :root:not([data-theme="light"]) .badge-role-unrestricted { background: #1c2f4a; color: #7fb3e0; }
    :root:not([data-theme="light"]) .badge-role-admin { background: #c0392b; color: #fff; }
}
.badge-danger  { background: #f8d7da; color: #842029; }
.badge-warning { background: #fff3cd; color: #664d03; }
.badge-info    { background: #cff4fc; color: #055160; }
.badge-neutral { background: var(--tag-bg); color: var(--text); }
/* Neutral chip used for administration listings — matches admin portal styling so the
 * two portals share the same visual language for "this is just a tag, not a state". */
.badge-admin-tag { background: var(--tag-bg); color: var(--text); font-weight: 400; margin: 2px 2px; }
/* Subtle marker for the chip representing the user's/key's default administration —
 * inset border in the brand colour, no background change so the chip stays the same
 * size and visual weight. Tooltipped to explain the meaning. */
.badge-admin-tag.is-default { box-shadow: inset 0 0 0 1px var(--primary); }
.badge-admin-tag.is-via-org { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent); }
.badge-admin-tag.is-via-org.is-default { box-shadow: inset 0 0 0 1px var(--primary); }

/* Compact rounded-rect badges (Discount scope/status) */
.badge-tag {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
    background: var(--tag-bg); color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-tag.is-active { color: var(--text); }
.badge-tag.is-muted  { opacity: 0.7; }
.badge-send-sent   { background: #d1e7dd; color: #0a3622; }
.badge-send-unsent { background: #e2e3e5; color: #6c757d; }
[data-theme="dark"] .badge-send-sent   { background: #16351f; color: #8bd3a0; }
[data-theme="dark"] .badge-send-unsent { background: #3a3d41; color: #9499a0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge-send-sent   { background: #16351f; color: #8bd3a0; }
    :root:not([data-theme="light"]) .badge-send-unsent { background: #3a3d41; color: #9499a0; }
}

/* Alert toggle chips */
.alert-chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s; user-select: none;
}
.alert-chip:hover { border-color: var(--text-muted); color: var(--text); }
.alert-chip.active {
    border-color: var(--chip-color, var(--primary));
    background: color-mix(in srgb, var(--chip-color, var(--primary)) 15%, transparent);
    color: var(--chip-color, var(--primary));
}
.alert-chip.active:hover {
    background: color-mix(in srgb, var(--chip-color, var(--primary)) 25%, transparent);
}
.billing-alert-admin-row + .billing-alert-admin-row { border-top: 1px solid var(--border); }
input[id^="custom-alert-input"]::-webkit-inner-spin-button,
input[id^="custom-alert-input"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Inline tags — tiny labels appended next to text (CUSTOMER/SUPPLIER, DEFAULT, ...) */
.inline-tag {
    display: inline-block;
    font-size: 9px; padding: 1px 4px; border-radius: 3px;
    margin-left: 4px;
    position: relative; top: -1px;
    letter-spacing: 0.3px; font-weight: 600;
    background: var(--tag-bg); color: var(--text-muted);
}
.inline-tag.is-primary {
    background: var(--primary); color: #fff;
}
.inline-tag.is-success {
    background: #d1e7dd; color: #0f5132;
}
[data-theme="dark"] .inline-tag.is-success { background: #1e3a2c; color: #7ed4a4; }

/* Product type tags */
.type-tag {
    display: inline-block;
    font-size: 9px; padding: 1px 5px; border-radius: 3px;
    margin-left: 6px; vertical-align: middle;
    text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
}
.type-deposit  { background: #f59e0b22; color: #f59e0b; border: 1px solid #f59e0b44; }
.type-freetext { background: #a855f722; color: #a855f7; border: 1px solid #a855f744; }
.type-textline { background: #6b728022; color: #6b7280; border: 1px solid #6b728044; }
.type-client   { background: #0ea5e922; color: #0ea5e9; border: 1px solid #0ea5e944; }
.type-partner  { background: #10b98122; color: #10b981; border: 1px solid #10b98144; }

/* Organization Kind badge in modal headers. Matches the admin portal's
   .kind-badge-trigger exactly (display / sizing / font metrics) except for
   the y offset - tenant h3 optical baseline is ~4px above admin's, so the
   badge lands at top:-2px here vs top:+2px in admin. No cursor or chevron
   since members can't change the kind from the tenant side. */
.type-tag.kind-badge {
    display: inline-flex !important; align-items: center; gap: 3px;
    font-family: inherit;
    font-size: 11px !important; line-height: 1.4 !important;
    padding: 4px 9px !important;
    text-transform: uppercase; letter-spacing: 0.4px !important; font-weight: 700 !important;
    position: relative; top: -1px;
}

.count-badge { font-size: 12px; font-weight: 500; color: var(--text-muted); }

/* Modern toggle switch */
.switch {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 12px; color: var(--text-muted);
    user-select: none;
}
.switch input { display: none; }
.switch .slider {
    position: relative; width: 28px; height: 16px;
    background: var(--border); border-radius: 8px;
    transition: background 0.15s;
}
.switch .slider::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; background: #fff; border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: #4a90e2; }
.switch input:checked + .slider::after { transform: translateX(12px); }
.switch:hover .slider { opacity: 0.85; }
.switch input:checked ~ .switch-label { color: var(--text); }
.switch.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Mode toggle (pill segmented control) */
.mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.mode-toggle button {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mode-toggle button:hover { background: var(--hover-row); color: var(--text); }
.mode-toggle button.active {
    background: var(--primary);
    color: #fff;
}
.mode-toggle button + button { border-left: 1px solid var(--border); }

/* Typeahead dropdown */
.typeahead-dropdown {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
}
.typeahead-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover, .typeahead-item.active { background: var(--hover-row); }
.typeahead-item .ta-primary { color: var(--text); font-weight: 500; }
.typeahead-item .ta-secondary { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.typeahead-empty { padding: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* Sales Prices column hiding */
#tab-prices.mode-product .col-product { display: none; }
#tab-prices.mode-relation .col-relation { display: none; }

/* Sales Prices search box — wider than the default to fit the long placeholder */
#tab-prices .search-box input { width: 360px; }
#tab-prices .search-box input:focus { width: 440px; }

/* Buttons */
.btn {
    padding: 6px 14px; border: none; border-radius: var(--radius);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #bb2d3b; }
.btn-sm { padding: 3px 8px; font-size: 12px; }
a.btn { text-decoration: none; }
.btn-outline { background: none; border: 1px solid var(--border); color: var(--text); transition: all 0.15s; }
.btn-outline:hover { background: var(--hover-row); border-color: var(--text-muted); }

/* Rotate button — distinct primary tint, more emphasis than the neutral outline
 * buttons but lighter than the danger Revoke. Matches the admin portal styling. */
.btn-rotate {
    background: rgba(13,110,253,0.08);
    border: 1px solid rgba(13,110,253,0.45);
    color: var(--primary);
    transition: all 0.15s;
    font-weight: 600;
}
.btn-rotate:hover {
    background: rgba(13,110,253,0.16);
    border-color: var(--primary);
}

/* Create button — outlined "+ Create x" used as the primary action on list cards.
 * Neutral at rest (matches .btn-outline) so it doesn't fight the page-level
 * navigation or the brand colour above it. The brand colour appears only on hover
 * as a clear "this is interactive" cue. Pattern: GitHub "New" dropdown, Linear. */
.btn-create {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    gap: 6px;
}
.btn-create:hover {
    background: var(--hover-row);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-create svg { flex-shrink: 0; }

/* Usage stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    text-align: center;
    transition: all 0.15s;
}
.stat-card.clickable {
    cursor: pointer;
}
.stat-card.clickable:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.stat-card .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}
.stat-card .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.usage-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
    flex-wrap: wrap;
}
.usage-filters label {
    font-weight: 500;
    color: var(--text-muted);
}
.usage-filters input, .usage-filters select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    color-scheme: light;
    transition: border-color 0.15s;
}
.chart-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 20px;
}
.chart-container h3 { margin: 0 0 12px 0; font-size: 14px; }
.refresh-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.refresh-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.refresh-bar select, .refresh-bar .btn {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 11px;
    height: 24px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s;
}
@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Modal pagination */
.modal-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-pagination:empty {
    display: none;
}
.modal-pagination span {
    display: inline-flex;
    align-items: center;
}
.modal-pagination button {
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.modal-pagination button:hover:not(:disabled) {
    color: var(--text);
    background: var(--hover-row);
}
.modal-pagination button:disabled {
    opacity: 0.3;
    cursor: default;
}
.modal-pagination button.page-current {
    color: var(--primary);
    font-weight: 700;
    background: var(--hover-row);
}

/* Modal sortable headers — same style as main table headers */
.sortable-modal { cursor: pointer; user-select: none; white-space: nowrap; position: relative; padding-right: 22px !important; }
.sortable-modal:hover { color: var(--primary); }
.sortable-modal::before, .sortable-modal::after {
    content: ''; position: absolute; right: 6px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
}
.sortable-modal::before { top: calc(50% - 5px); border-bottom: 4px solid var(--text-muted); opacity: 0.3; }
.sortable-modal::after { top: calc(50% + 2px); border-top: 4px solid var(--text-muted); opacity: 0.3; }
.sortable-modal.asc::before { opacity: 0.9; border-bottom-color: var(--primary); }
.sortable-modal.asc::after { opacity: 0.15; }
.sortable-modal.desc::after { opacity: 0.9; border-top-color: var(--primary); }
.sortable-modal.desc::before { opacity: 0.15; }

/* Detail panels */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}
.detail-grid div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-grid strong {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.body-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 12px;
    max-height: 300px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin-top: 4px;
}

/* JSON syntax highlighting */
.json-key { color: #9cdcfe; }
.json-string { color: #ce9178; }
.json-number { color: #b5cea8; }
.json-bool { color: #569cd6; }
.json-null { color: #808080; }

/* Modal */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 1000; justify-content: center; align-items: flex-start; padding-top: 80px;
}
.modal-overlay.active { display: flex; }
/* Confirm dialog must always stack above any other modal it interrupts */
#confirm-modal { z-index: 1500; }
/* Created-key modal must stack above the create dialog so the value is visible */
#my-key-created-modal { z-index: 1500; }

/* Key display widget — same shape as the admin portal: a dark rounded box with the
 * literal key value, an absolute-positioned copy button in the top-right that briefly
 * flashes a checkmark + outline on success. */
.key-display-wrapper { position: relative; margin: 8px 0; }
.key-display {
    background: var(--key-bg); color: var(--key-text); padding: 12px 46px 12px 16px;
    border-radius: var(--radius); font-family: monospace; font-size: 13px;
    word-break: break-all; user-select: all;
    transition: outline 0.15s, background 0.15s;
}
.key-display.copied {
    outline: 2px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--key-bg));
    transition: outline 0.3s, background 0.3s;
}
.key-display.fade-out {
    outline: 2px solid transparent;
    background: var(--key-bg);
    transition: outline 0.6s, background 0.6s;
}
.key-copy-btn {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; cursor: pointer;
    color: var(--key-text); opacity: 0.5; padding: 4px;
    display: flex; align-items: center; gap: 4px;
    transition: opacity 0.4s, color 0.4s;
}
.key-copy-btn:hover { opacity: 1; }

/* In-modal validation error banner — used by save handlers in place of bottom-right toasts */
.form-error {
    background: rgba(220,53,69,0.08); border: 1px solid rgba(220,53,69,0.35);
    color: var(--danger); border-radius: 4px; padding: 10px 12px; margin-bottom: 14px;
    font-size: 13px; white-space: pre-line;
}
.form-error:empty { display: none; }

/* Inline button spinner */
.btn-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; vertical-align: -2px;
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Spinner shown next to the "Waiting for you to click the email link" text. */
.login-waiting-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid var(--border); border-top-color: var(--primary, currentColor);
    border-radius: 50%; vertical-align: -2px;
    margin-right: 8px;
    animation: btn-spin 0.9s linear infinite;
}

.modal {
    background: var(--surface); border-radius: var(--radius);
    width: 500px; max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
/* Forms that wrap the body + footer sit between .modal (flex column) and
   .modal-body. Make the form a flex column too so the overflow-auto body
   still gets the remaining space and the footer pins to the bottom. */
.modal > form {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.modal-header h3 { font-size: 16px; }
.modal-meta {
    margin-left: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.modal-meta::before {
    content: '·';
    margin-right: 8px;
    opacity: 0.5;
}
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); }
.modal-body { padding: 20px; font-size: 13px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.form-group input, .form-group select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 13px;
    background: var(--surface); color: var(--text);
    color-scheme: light; transition: border-color 0.15s;
}
/* Toggle switch — matches the admin portal pattern used for "Send welcome email".
   Inline inside a form-group as an opt-in toggle instead of a raw checkbox. */
.toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 20px; transition: background 0.2s; }
.toggle-switch .slider::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.toggle-switch input:checked + .slider { background: var(--primary); }
.toggle-switch input:checked + .slider::before { transform: translateX(16px); }
.toggle-switch input:focus-visible + .slider { box-shadow: 0 0 0 2px var(--primary); }
.toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.toggle-row.is-disabled { cursor: not-allowed; opacity: 0.55; }
.toggle-row.is-disabled .toggle-switch { cursor: not-allowed; }
.toggle-row small { color: var(--text-muted); font-weight: normal; }
.form-group input:hover, .form-group select:hover,
.usage-filters input:hover, .usage-filters select:hover,
.refresh-bar select:hover, .refresh-bar .btn:hover {
    border-color: var(--text-muted);
    background: var(--hover-row);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .usage-filters input,
[data-theme="dark"] .usage-filters select,
[data-theme="dark"] .refresh-bar select,
[data-theme="dark"] .admin-select-group select,
[data-theme="dark"] .admin-default-row select { color-scheme: dark; background: var(--bg); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .form-group input,
    :root:not([data-theme="light"]) .form-group select,
    :root:not([data-theme="light"]) .usage-filters input,
    :root:not([data-theme="light"]) .usage-filters select,
    :root:not([data-theme="light"]) .refresh-bar select,
    :root:not([data-theme="light"]) .admin-select-group select,
    :root:not([data-theme="light"]) .admin-default-row select { color-scheme: dark; background: var(--bg); }
}
.form-group small { color: var(--text-muted); font-size: 12px; }
.form-group select:disabled { opacity: 0.6; cursor: not-allowed; }
.form-group .input-sm { width: auto; min-width: 160px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* Toast */
.toast {
    position: fixed; bottom: 20px; right: 20px; padding: 12px 20px;
    border-radius: var(--radius); color: white; font-size: 13px;
    z-index: 2000; opacity: 0; transition: opacity 0.3s;
    max-width: 400px;
}
.toast.show { opacity: 1; }
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
/* JS sets className to "toast <type>" (space-separated, two classes), so the
   variant rules also need a `.toast.<type>` form. Without these the body of
   the toast renders unstyled (white text on no background). */
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info {
    background: var(--primary);
    display: flex; align-items: center; gap: 10px;
}
.toast.info::before {
    content: '';
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    flex: 0 0 auto;
}

/* Key display */
.key-display-wrapper { position: relative; margin: 8px 0; }
.key-display {
    background: var(--key-bg); color: var(--key-text); padding: 12px 46px 12px 16px;
    border-radius: var(--radius); font-family: monospace; font-size: 13px;
    word-break: break-all; user-select: all;
    transition: outline 0.15s, background 0.15s;
}
.key-display.copied {
    outline: 2px solid var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--key-bg));
    transition: outline 0.3s, background 0.3s;
}
.key-display.fade-out {
    outline: 2px solid transparent;
    background: var(--key-bg);
    transition: outline 0.6s, background 0.6s;
}
.key-copy-btn {
    position: absolute; top: 10px; right: 10px;
    background: none; border: none; cursor: pointer;
    color: var(--key-text); opacity: 0.5; padding: 4px;
    display: flex; align-items: center; gap: 4px;
    transition: opacity 0.4s, color 0.4s;
}
.key-copy-btn:hover { opacity: 1; }

/* Empty state */
.empty { text-align: center; padding: 40px; color: var(--text-muted); }
.text-muted { color: var(--text-muted); font-size: 13px; }

/* Filter bar */
.filter-bar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--filter-bg); border: 1px solid var(--filter-border); border-radius: var(--radius);
    padding: 8px 14px; margin-bottom: 12px; font-size: 13px; color: var(--filter-text);
}

/* Search box */
.search-box {
    position: relative; display: inline-flex; align-items: center;
}
.search-box .search-icon {
    position: absolute; left: 9px; color: var(--text-muted);
    pointer-events: none; display: flex;
    width: 14px; height: 14px;
}
.search-box input {
    padding: 5px 10px 5px 28px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; background: var(--surface); color: var(--text);
    width: 200px; outline: none; transition: width 0.2s, border-color 0.15s, box-shadow 0.15s;
}
.search-box input:focus {
    width: 260px; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box input { padding-right: 26px; }

.search-clear {
    position: absolute; right: 6px; background: none; border: none;
    color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1;
    padding: 0 4px; display: none;
}
.search-clear:hover { color: var(--text); }
.search-box input:not(:placeholder-shown) ~ .search-clear { display: block; }

/* Sortable headers */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; position: relative; padding-right: 22px !important; }
th.sortable:hover { color: var(--primary); }
th.sortable::before, th.sortable::after {
    content: ''; position: absolute; right: 6px;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
}
th.sortable::before { top: calc(50% - 5px); border-bottom: 4px solid var(--text-muted); opacity: 0.3; }
th.sortable::after { top: calc(50% + 2px); border-top: 4px solid var(--text-muted); opacity: 0.3; }
th.sortable.asc::before { opacity: 0.9; border-bottom-color: var(--primary); }
th.sortable.asc::after { opacity: 0.15; }
th.sortable.desc::after { opacity: 0.9; border-top-color: var(--primary); }
th.sortable.desc::before { opacity: 0.15; }

/* Role warning */
.role-warning {
    background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius);
    padding: 8px 12px; margin-top: 6px; font-size: 12px; color: var(--warn-text); line-height: 1.4;
}

/* Token select */
.token-select {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 4px 6px; position: relative; cursor: text;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    min-height: 38px; background: var(--surface);
}
.token-select:focus-within { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }

/* Let the token-input keep its own styled border inside form-group */
.form-group .token-select input.token-input { width: 100%; }
.form-group .token-select input:not(.token-input) { border: none; padding: 4px 2px; background: transparent; box-shadow: none; width: auto; }
.form-group .token-select input:not(.token-input):focus { box-shadow: none; border: none; }

/* Combined admin select group */
.admin-select-group {
    border: 1px solid var(--border); border-radius: var(--radius);
}
.admin-select-group .token-select {
    border: none; border-radius: 0;
}
.admin-select-group .token-select:focus-within { box-shadow: inset 0 0 0 1px var(--primary); }

.admin-default-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-top: 1px solid var(--border);
    background: var(--bg); font-size: 13px;
}
.admin-default-row label { font-weight: 500; color: var(--text-muted); white-space: nowrap; margin-bottom: 0; }
.admin-default-row select {
    flex: 1; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 13px; background: var(--surface); color: var(--text);
}

.token-tags { display: contents; }

.token-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--tag-bg); border-radius: 4px; padding: 2px 6px 2px 8px;
    font-size: 12px; white-space: nowrap;
}
.token-tag-remove {
    background: none; border: none; cursor: pointer; font-size: 14px;
    color: var(--text-muted); line-height: 1; padding: 0 2px;
}
.token-tag-remove:hover { color: var(--danger); }

.token-input {
    border: 1px solid var(--border); outline: none; font-size: 13px;
    width: 100%; min-width: 120px; box-sizing: border-box;
    padding: 6px 8px 6px 28px; background: var(--bg); border-radius: 4px;
    color: var(--text); margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.token-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(13,110,253,0.12);
}
.token-input::placeholder { color: var(--text-muted); opacity: 0.7; }

.token-dropdown {
    display: none;
    /* Fixed positioning so the panel escapes any overflow:auto ancestor
       (.modal-body would otherwise clip absolute children). positionTokenDropdown
       in JS sets top/left/width on open and re-positions on scroll/resize. */
    position: fixed;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 200px; overflow-y: auto; z-index: 1000;
    box-shadow: 0 4px 12px var(--shadow);
}
.token-dropdown.open { display: block; }

.token-option {
    padding: 8px 12px; cursor: pointer; font-size: 13px;
    display: flex; justify-content: space-between; align-items: center;
}
.token-option:hover { background: var(--bg); }
.token-option .detail { color: var(--text-muted); font-size: 12px; }
.token-option.no-results { color: var(--text-muted); cursor: default; }
.token-option.no-results:hover { background: transparent; }

/* Login overlay */
.login-overlay {
    position: fixed; inset: 0; background: var(--bg);
    display: flex; justify-content: center; align-items: center;
    z-index: 3000;
}
.login-overlay.hidden { display: none; }

.login-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px; width: 380px;
    box-shadow: 0 4px 24px var(--shadow);
    text-align: center;
}
.login-card h2 { font-size: 20px; margin-bottom: 6px; }
.login-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }
.login-card .form-group { text-align: left; }
.login-card .form-group input { text-align: center; font-size: 14px; padding: 12px; }
.login-card .btn { padding: 12px; font-size: 15px; }
.login-error, .login-banner-error {
    color: var(--danger);
    font-size: 13px; font-weight: 600;
    text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.login-error { margin-bottom: 12px; }
.login-banner-error { margin-top: 14px; margin-bottom: 18px; }
.login-error:empty, .login-banner-error:empty { display: none; }
.login-error a, .login-banner-error a {
    color: inherit; text-decoration: underline; font-weight: 700;
}
.login-error a:hover, .login-banner-error a:hover { opacity: 0.8; }
.login-error::before, .login-banner-error::before {
    content: ""; display: inline-block;
    width: 14px; height: 14px; flex-shrink: 0;
    background-color: var(--danger);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/contain no-repeat;
}
.login-success {
    color: #0f5132; background: #d1e7dd; border: 1px solid #badbcc;
    font-size: 13px; padding: 8px 10px; border-radius: var(--radius); margin-bottom: 12px;
}
[data-theme="dark"] .login-success { color: #7ed4a4; background: #1e3a2c; border-color: #2d4a3a; }
.login-success a { color: inherit; text-decoration: underline; font-weight: 600; }
.login-success a:hover { opacity: 0.85; }
.login-divider {
    margin: 16px 0; font-size: 13px; color: var(--text-muted); text-align: center;
}
.login-divider a { color: var(--text-muted); text-decoration: underline; }
.login-divider a:hover { color: var(--text); }

/* Theme toggle */
.theme-toggle {
    background: none; border: none; cursor: pointer;
    font-size: 18px; padding: 4px 6px; color: var(--text); line-height: 1;
    opacity: 0.6; transition: opacity 0.15s;
}
.theme-toggle:hover { opacity: 1; }

.filters select { color: var(--text); }

/* Portal-specific styles */
.admin-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.admin-switcher label {
    font-weight: 500;
    color: var(--text-muted);
}
.admin-switcher select {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    min-width: 200px;
    transition: border-color 0.15s;
}
.admin-switcher select:hover {
    border-color: var(--text-muted);
}

.detail-section {
    margin-bottom: 16px;
}
.detail-section h4 {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 16px;
}
.detail-grid div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.detail-grid strong {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.detail-grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}

.sub-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.sub-tabs button {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}
.sub-tabs button:hover { color: var(--text); }
.sub-tabs button.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.sub-tab-content { display: none; }
.sub-tab-content.active { display: block; }

/* Vertical separator between logical groups of sub-tabs — same treatment as
   the main tab-strip's tab-group-end / tab-group-start on the admin portal. */
.sub-tabs .sub-tab-group-end { border-right: 1px solid var(--border); padding-right: 20px; }
.sub-tabs .sub-tab-group-start { padding-left: 20px; }

/* Collapsible details sections — chevron rotates when open. */
.portal-details-chevron { transition: transform 0.15s; }
.portal-details[open] .portal-details-chevron { transform: rotate(90deg); }
.portal-details summary:hover { color: var(--text); }

.btn-refresh {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: var(--radius);
    transition: all 0.15s;
}
.btn-refresh:hover {
    color: var(--primary);
    background: var(--hover-row);
}
.btn-history {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: var(--radius);
    transition: all 0.15s;
}
.btn-history:hover {
    color: var(--primary);
    background: var(--hover-row);
}
.btn-history.active {
    color: var(--primary);
    background: var(--hover-row);
}
.btn-history.active:hover {
    color: var(--primary);
    background: var(--hover-row);
    opacity: 0.85;
}
.history-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--hover-row);
    color: var(--text-muted);
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}
.history-strip a {
    color: var(--primary);
    text-decoration: none;
}
.history-strip a:hover {
    text-decoration: underline;
}
.history-strip-select {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 1px 4px;
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    margin: 0 2px;
}
.history-strip-select:hover {
    border-color: var(--primary);
}

/* Generic muted icon button. Hover → danger red for destructive row actions. */
.btn-icon {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: var(--radius);
    transition: all 0.15s;
}
.btn-icon:hover {
    color: var(--danger);
    background: var(--hover-row);
}

/* Kebab action menu — ported from admin portal. Per-row compact ⋯ button
   opens a fixed-position dropdown of actions. */
.kebab-menu { position: relative; display: inline-block; }
.kebab-btn { background: color-mix(in srgb, var(--surface) 70%, var(--hover-row) 30%); border: 1px solid var(--border); color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; width: 28px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0; letter-spacing: 1px; }
.kebab-btn:hover { background: var(--hover-row); color: var(--text); border-color: color-mix(in srgb, var(--border) 100%, var(--text) 20%); }
.kebab-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 150px; background: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2); z-index: 1600; padding: 4px; display: none; }
.kebab-dropdown.open { display: block; }
.kebab-dropdown button { display: block; width: 100%; text-align: left; padding: 5px 10px; background: transparent; border: none; color: var(--text); font-size: 12px; line-height: 1.5; cursor: pointer; border-radius: 4px; }
.kebab-dropdown button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.kebab-dropdown button.danger { color: var(--danger); }
.kebab-dropdown button.danger:hover { background: var(--danger); color: #fff; }
.kebab-dropdown .sep { height: 1px; background: color-mix(in srgb, var(--border) 70%, transparent); margin: 3px 6px; }
/* Form controls inside tables (tfoot invite rows, etc.) need explicit styling
   since they're outside form-group. */
table select,
table input[type="text"],
table input[type="email"],
table input[type="number"] {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface, var(--bg, #fff));
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
}
table select { cursor: pointer; }
/* tfoot invite-row: normal cell padding. Inputs + selects inherit the table
   form-control styling above. Small misalignment between header text (at
   12px from cell edge) and input text (at 12 + 8 = 20px) is accepted as a
   trade-off for clean input chrome; the columns still read as aligned. */
table tfoot .invite-row td { padding: 6px 12px; }
/* Match the Invite button's height to the adjacent form-group inputs so they
   share a baseline. form-group inputs/selects come out at ~34px; the default
   btn padding renders shorter, which looks misaligned in the flex row. */
.invite-row-wrap .invite-btn { height: 34px; padding: 0 14px; }
/* Email rendered in code tag for monospaced alignment in member tables.
   Negative left margin pulls the pill so its text starts at the td's padding
   edge, matching the header text position. */
table code.email {
    background: var(--hover-row);
    padding: 1px 6px;
    margin-left: -6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.declaration-text {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    font-size: 12px;
    max-height: 150px;
    overflow: auto;
    white-space: pre-wrap;
    margin-top: 4px;
}

.filter-hint {
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
    color: var(--filter-text);
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    text-align: center;
}

/* Twemoji country-flag polyfill. Windows 11's Segoe UI Emoji has no country
   flag glyphs (Microsoft deliberately omits them), and Chrome/Edge on Windows
   don't render flag emojis either. This @font-face only serves the
   regional-indicator range, so native text rendering is untouched. Self-hosted
   (~76 KB); source: https://github.com/talkjs/country-flag-emoji-polyfill */
@font-face {
    font-family: 'Twemoji Country Flags';
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
    src: url('../../shared/fonts/TwemojiCountryFlags.woff2') format('woff2');
    font-display: swap;
}
body {
    font-family: 'Twemoji Country Flags', system-ui, -apple-system, Segoe UI,
        Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

/* =============================================================================
   IP & geo restrictions (api key edit modal). Theme-aware: every colour comes
   from the existing token set so light + dark mode just work. Layout mirrors
   the rest of the modal's form-group spacing so the section feels native, not
   bolted-on like the first iteration.
   ============================================================================= */

.restrictions-section {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.restrictions-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.restrictions-section > summary::-webkit-details-marker { display: none; }
.restrictions-section > summary::before {
    content: '▸';
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 120ms ease;
    display: inline-block;
}
.restrictions-section[open] > summary::before { transform: rotate(90deg); }
.restrictions-section .restrictions-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hover-row);
}
.restrictions-section .restrictions-status[data-state="active"] {
    color: var(--filter-text);
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
}
.restrictions-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.restrictions-intro {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 2px;
}
.restriction-block { display: flex; flex-direction: column; gap: 8px; }
.restriction-block h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.restriction-block h4 .opt {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-muted);
}
.restriction-block small.help {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Chip-style entry for IPs and countries. Single visual model used everywhere. */
.restriction-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    padding: 6px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    align-items: center;
}
.restriction-chips:empty::before {
    content: attr(data-empty);
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 0 4px;
}
.restriction-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 8px;
    border-radius: 4px;
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
    color: var(--filter-text);
    font-size: 12px;
    line-height: 1.2;
}
.restriction-chip code {
    background: transparent;
    color: inherit;
    font-size: 12px;
    padding: 0;
}
.restriction-chip .chip-meta {
    font-size: 10px;
    color: var(--filter-text);
    opacity: 0.65;
    margin-left: 2px;
}
.restriction-chip .chip-x {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 0 4px;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    opacity: 0.6;
}
.restriction-chip .chip-x:hover { opacity: 1; background: rgba(0,0,0,0.08); }

.restriction-add-row { display: flex; gap: 6px; }
.restriction-add-row input,
.country-search-wrap input {
    flex: 1;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s;
}
.restriction-add-row input:hover,
.country-search-wrap input:hover { border-color: var(--text-muted); }
.restriction-add-row input:focus,
.country-search-wrap input:focus {
    outline: none;
    border-color: var(--primary);
}
[data-theme="dark"] .restriction-add-row input,
[data-theme="dark"] .country-search-wrap input { color-scheme: dark; background: var(--bg); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .restriction-add-row input,
    :root:not([data-theme="light"]) .country-search-wrap input { color-scheme: dark; background: var(--bg); }
}

/* Country mode pills. Replaces the old "Off / Allow / Block" select + Save flow. */
.geo-mode {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.geo-mode label {
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    user-select: none;
    border-right: 1px solid var(--border);
}
.geo-mode label:last-child { border-right: 0; }
.geo-mode label:hover { color: var(--text); background: var(--hover-row); }
.geo-mode input[type="radio"] { display: none; }
.geo-mode input[type="radio"]:checked + span,
.geo-mode label:has(input:checked) {
    background: var(--primary);
    color: #fff;
}

.country-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.country-presets .preset-label {
    font-size: 12px;
    color: var(--text-muted);
}
.preset-pill {
    background: var(--hover-row);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
}
.preset-pill:hover { background: var(--filter-bg); border-color: var(--filter-border); color: var(--filter-text); }

.country-search-wrap { position: relative; }
.country-suggestions {
    /* Fixed so the panel escapes .modal-body's overflow:auto clipping.
       positionTokenDropdown sets top/left/width in viewport coords. */
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px var(--shadow);
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
}
.country-suggestion {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.country-suggestion:hover { background: var(--hover-row); }
.country-suggestion .code {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: auto;
    font-family: ui-monospace, monospace;
}

/* Expiry-cap badge — sits inline with the date input so the cause/effect of
   "add a restriction → cap is lifted" is one glance instead of a scroll. */
.expires-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.expires-cap-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--hover-row);
    color: var(--text-muted);
    white-space: nowrap;
}
.expires-cap-badge[data-state="unlocked"] {
    background: var(--filter-bg);
    border-color: var(--filter-border);
    color: var(--filter-text);
    font-weight: 600;
}

/* Blocked-attempts list inside its own collapsible section. */
.blocked-list { display: flex; flex-direction: column; }
.blocked-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.blocked-row:first-child { border-top: 0; }
.blocked-row .blocked-meta {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blocked-row .blocked-meta code {
    background: transparent;
    color: var(--text);
    font-size: 12px;
    padding: 0;
}
.blocked-row .blocked-extra {
    color: var(--text-muted);
    font-size: 11px;
    margin-left: 6px;
}
.blocked-row .blocked-trust {
    padding: 2px 10px;
    font-size: 11px;
    flex-shrink: 0;
}
.blocked-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 0;
}

/* =============================================================================
   API key modal polish — mirrored from admin portal so tenants get the same
   restriction-editing UX. CSS tokens already match between the two themes;
   only the rules themselves need to be duplicated.
   ============================================================================= */

/* Modal section divider for grouping form-groups inside a single-scroll modal. */
.modal-section-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.modal-section-header:first-child { margin-top: 0; }

/* Tabbed modal layout */
.modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin: 8px -20px 16px;
    padding: 0 20px;
    flex-shrink: 0;
}
.modal-tab {
    background: transparent;
    border: 0;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 120ms, border-color 120ms;
    position: relative;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.modal-tab svg { opacity: 0.7; }
.modal-tab.is-active svg { opacity: 1; }
.modal-tab-panel { display: none; }
.modal-tab-panel.is-active { display: block; }

.modal.is-wide { width: 640px; }

.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
.form-row-2col > .form-group { margin-bottom: 0; }

.tab-empty-note {
    padding: 12px 14px;
    background: var(--hover-row);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.tab-empty-note strong { color: var(--text); }

/* Restriction labels with required/active/satisfied states */
.restriction-block h4 .opt.is-required {
    color: var(--warn-text);
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.restriction-block h4 .opt.is-satisfied {
    color: var(--success);
    font-weight: 500;
}
.restriction-block h4 .opt.is-active {
    color: var(--primary);
    font-weight: 500;
}

.expires-cap-badge[data-state="required"] {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
    color: var(--warn-text);
    font-weight: 600;
}
.expires-cap-badge { cursor: help; }

/* Combined geo mode + country search bar */
.geo-mode-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.geo-mode-bar .geo-mode {
    border: none;
    border-radius: 0;
    flex-shrink: 0;
}
.geo-mode-bar .geo-mode label:first-of-type {
    border-top-left-radius: calc(var(--radius) - 1px);
    border-bottom-left-radius: calc(var(--radius) - 1px);
}
.geo-mode-bar .country-search-wrap {
    flex: 1;
    border-left: 1px solid var(--border);
    position: relative;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}
.geo-mode-bar .country-search-wrap .token-tags { display: contents; }
.geo-mode-bar .country-search-wrap input.geo-mode-input {
    flex: 1 1 140px;
    min-width: 80px;
    border: none;
    background: transparent;
    padding: 4px 6px;
    color: var(--text);
    outline: none;
    font-size: 13px;
}
[data-theme="dark"] .geo-mode-bar { background: var(--bg); }

/* Group preset chips */
.token-tag-preset {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    padding: 2px 6px 2px 10px;
}
.token-tag-preset strong { font-weight: 600; }
.token-tag-preset .chip-meta {
    font-size: 10px; color: var(--text-muted); opacity: 0.85; margin-left: 2px;
}

/* Pin pill inside the IP input bar */
.pin-pill {
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 120ms;
}
.pin-pill:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.pin-pill .pin-pill-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}
.pin-pill.is-active {
    background: var(--filter-bg);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 500;
}
.pin-pill.is-active .pin-pill-mark {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
/* Right-aligned grouping inside the IP input bar so the current-IP quick-add
   and the auto-lock pill sit side-by-side at the end of the row. */
.bar-pill-group {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bar-pill-group:empty { display: none; }
.bar-pill-group .pin-pill { margin-left: 0; }
/* Compact .current-ip-pill variant when rendered inside the input bar. */
.bar-pill-group .current-ip-pill {
    padding: 2px 10px;
    font-size: 11px;
    line-height: 1.5;
}
.bar-pill-group .current-ip-pill code { font-size: 11px; }
.bar-pill-group .current-ip-pill .pin-pill-mark { width: 14px; height: 14px; }

/* Quick-pick pills (blocked attempts) below the IP input */
.blocked-quickpicks { margin-top: 6px; }
.current-ip-pill {
    background: var(--filter-bg);
    border-color: var(--filter-border);
    color: var(--filter-text);
    font-weight: 500;
}
.current-ip-pill:hover {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}
.current-ip-pill .pin-pill-mark {
    border-color: currentColor;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
}
.blocked-pill {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--warn-text);
}
.blocked-pill:hover {
    background: color-mix(in srgb, var(--warning) 22%, transparent);
    border-color: color-mix(in srgb, var(--warning) 55%, transparent);
    color: var(--warn-text);
}
/* "Used" IP pills: IPs the key is already authenticating from. Green accent
   signals "known-good" vs the yellow blocked-pill which is "unknown". */
.used-pill {
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    color: var(--success);
}
.used-pill:hover {
    background: color-mix(in srgb, var(--success) 22%, transparent);
    border-color: color-mix(in srgb, var(--success) 55%, transparent);
    color: var(--success);
}

/* Date input + × clear inside one bordered shell */
.date-input-wrap {
    display: inline-flex;
    /* align-items: center + explicit child height avoids the subpixel
       drift `stretch` introduces when the row lands on a fractional y. */
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.date-input-wrap:focus-within { border-color: var(--primary); }
.date-input-wrap input[type="date"] {
    border: 0;
    background: transparent;
    padding: 0 0 0 8px;
    outline: none;
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
}
.date-input-wrap .date-clear-btn { height: 30px; }
[data-theme="dark"] .date-input-wrap { background: var(--bg); }
.date-input-wrap input[type="date"]::-webkit-datetime-edit { padding: 0; margin: 0; }
.date-input-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; margin: 0; }
.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
    padding: 0;
    margin-left: 4px;
    margin-right: 0;
    cursor: pointer;
}
/* Breathing room after the calendar icon when no date is set. When the × is
   visible (JS clears the inline display:none) it already provides the buffer. */
.date-input-wrap:has(.date-clear-btn[style*="none"]) input[type="date"]::-webkit-calendar-picker-indicator {
    margin-right: 8px;
}
.date-input-wrap input[type="date"]::-webkit-clear-button { display: none; }
.date-input-wrap input[type="date"]::-webkit-inner-spin-button { display: none; }
.date-clear-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 6px 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.date-clear-btn:hover { color: var(--danger); background: var(--hover-row); }

/* .restriction-tag-input invalid + name suggestions hint inline */
.restriction-tag-input.is-invalid { border-color: var(--danger); }
.restriction-tag-input.is-invalid:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
}

/* Thin divider between the tab content and the modal's post-tab sections
   (billing impact, heads-up banner, etc.). */
.modal-divider {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 18px -4px 14px;
}

/* The .token-input class originally styled the administration search input
   (its own border, magnifying-glass icon, 100% width). Inside the restriction
   chip bars and the geo-mode bar, those defaults would show a misleading
   search icon and force the input to take a full row — pushing the pin pill
   onto a second line. Strip those presets so the input inherits the parent
   bar's styling. */
.restriction-tag-input input.token-input,
.geo-mode-bar input.token-input,
.admin-select-group .token-select input.token-input {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    margin-top: 0;
    background-image: none;
    width: auto;
    flex: 1 1 160px;
    min-width: 80px;
    color: var(--text);
}
.restriction-tag-input input.token-input:focus,
.geo-mode-bar input.token-input:focus,
.admin-select-group .token-select input.token-input:focus {
    box-shadow: none;
    border: 0;
}
.form-group .restriction-tag-input input.token-input,
.form-group .geo-mode-bar input.token-input,
.form-group .admin-select-group .token-select input.token-input { width: auto; }