/*!
 * HlsKitt — admin design system.
 * @author Kitt Apps <https://kittapps.com>
 * @copyright Copyright (c) Kitt Apps. All rights reserved.
 *
 * Hand-written, no build step. Mirrors the ForumKitt control panel: flat
 * surfaces, 1px hairlines, one "sunken" grey step for chrome, 13px working
 * size, 32px controls, deep-navy brand colour. One sidebar instead of two.
 *
 * Sections: 1 tokens · 2 base · 3 utilities · 4 shell · 5 page header, tabs,
 * toc · 6 buttons · 7 badges · 8 cards · 9 forms · 10 tables · 11 stats ·
 * 12 rows & lists · 13 alerts · 14 overlays · 15 feedback · 16 media & misc ·
 * 17 auth & error pages
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    --tk-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tk-font-display: var(--tk-font-sans);
    --tk-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Consolas, monospace;

    --tk-canvas: #eceef2;
    --tk-surface: #ffffff;
    --tk-surface-raised: #ffffff;
    --tk-surface-sunken: #f4f5f7;
    --tk-surface-inverse: #1a2030;

    --tk-fg: #1a2030;
    --tk-fg-muted: #4d586b;
    --tk-fg-subtle: #8792a4;
    --tk-fg-inverse: #ffffff;

    --tk-line: #d8dce3;
    --tk-line-strong: #c3cad4;

    --tk-primary: #1e3a5f;
    --tk-primary-fg: #ffffff;
    --tk-accent: #2f6fa8;

    --tk-success: #15803d;
    --tk-warning: #b45309;
    --tk-danger: #be123c;
    --tk-info: #0369a1;

    --tk-radius-control: 0.1875rem;
    --tk-radius-card: 0.25rem;
    --tk-radius-panel: 0.25rem;
    --tk-radius-pill: 999px;

    --tk-shadow-card: none;
    --tk-shadow-raised: 0 1px 2px rgb(26 32 48 / 0.06);
    --tk-shadow-overlay: 0 10px 32px -10px rgb(26 32 48 / 0.28);

    --tk-nav-bg: #232a36;
    --tk-nav-fg: #e8ecf2;
    --tk-nav-fg-muted: #8e99ab;
    --tk-nav-line: #2f3746;
    --tk-nav-hover: #2c3442;
    --tk-nav-active-bg: #f4f5f7;
    --tk-nav-active-fg: #232a36;

    --tk-nav-panel-bg: #f4f5f7;
    --tk-nav-panel-fg: #1a2030;
    --tk-nav-panel-fg-muted: #4d586b;
    --tk-nav-panel-line: #d8dce3;
    --tk-nav-panel-hover: #e5e8ee;

    --tk-chart-1: #2563eb;
    --tk-chart-2: #0d9488;
    --tk-chart-3: #d97706;
    --tk-chart-4: #be185d;

    --tk-nav-rail-width: 3.25rem;
    --tk-nav-width: 15.5rem;
    --tk-nav-width-collapsed: var(--tk-nav-rail-width);

    --tk-topbar-height: 3.25rem;
    --tk-row-py: 0.375rem;
    --tk-row-px: 0.625rem;

    --tk-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

:root {
    --tk-primary-hover: color-mix(in oklab, var(--tk-primary) 88%, #000);
    --tk-primary-active: color-mix(in oklab, var(--tk-primary) 78%, #000);
    --tk-primary-soft: color-mix(in oklab, var(--tk-primary) 9%, var(--tk-surface));
    --tk-accent-soft: color-mix(in oklab, var(--tk-accent) 10%, var(--tk-surface));

    --tk-success-soft: color-mix(in oklab, var(--tk-success) 11%, var(--tk-surface));
    --tk-warning-soft: color-mix(in oklab, var(--tk-warning) 13%, var(--tk-surface));
    --tk-danger-soft: color-mix(in oklab, var(--tk-danger) 10%, var(--tk-surface));
    --tk-info-soft: color-mix(in oklab, var(--tk-info) 11%, var(--tk-surface));

    --tk-nav-panel-active-bg: color-mix(in oklab, var(--tk-primary) 12%, var(--tk-nav-panel-bg));
    --tk-nav-panel-active-fg: color-mix(in oklab, var(--tk-primary) 85%, #000);

    /* Primary used as TEXT (links, tinted labels). Equal to primary in light;
       lifted in dark so navy text stays readable on near-black. */
    --tk-primary-text: var(--tk-primary);
    --tk-focus: var(--tk-primary);

    --tk-field-bg: var(--tk-surface-sunken);
    --tk-field-bg-focus: var(--tk-surface);
    --tk-field-line: var(--tk-line);
    --tk-field-disabled-bg: var(--tk-canvas);

    --tk-field-height: 2rem;
    --tk-field-font-size: 0.8125rem;
    --tk-field-px: 0.625rem;
    --tk-field-measure: 24rem;
    --tk-field-textarea-min: 4rem;

    color-scheme: light;
}

.dark {
    --tk-canvas: #0d111a;
    --tk-surface: #141a26;
    --tk-surface-raised: #19212f;
    --tk-surface-sunken: #10161f;
    --tk-surface-inverse: #e9edf5;

    --tk-fg: #e9edf5;
    --tk-fg-muted: #9aa5bb;
    --tk-fg-subtle: #6c778d;
    --tk-fg-inverse: #10161f;

    --tk-line: #232c3b;
    --tk-line-strong: #303b4e;

    --tk-nav-bg: #161d29;
    --tk-nav-line: #242d3b;
    --tk-nav-hover: #1e2734;
    --tk-nav-active-bg: #10161f;
    --tk-nav-active-fg: #e9edf5;

    --tk-nav-panel-bg: #10161f;
    --tk-nav-panel-fg: #e9edf5;
    --tk-nav-panel-fg-muted: #9aa5bb;
    --tk-nav-panel-line: #232c3b;
    --tk-nav-panel-hover: #1a2231;

    --tk-chart-1: #3b82f6;
    --tk-chart-4: #db2777;

    --tk-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.5);
    --tk-shadow-overlay: 0 10px 32px -10px rgb(0 0 0 / 0.7);

    --tk-primary-hover: color-mix(in oklab, var(--tk-primary) 86%, #fff);
    --tk-primary-active: color-mix(in oklab, var(--tk-primary) 74%, #fff);
    --tk-primary-soft: color-mix(in oklab, var(--tk-primary) 18%, var(--tk-surface));
    --tk-accent-soft: color-mix(in oklab, var(--tk-accent) 18%, var(--tk-surface));

    --tk-success-soft: color-mix(in oklab, var(--tk-success) 18%, var(--tk-surface));
    --tk-warning-soft: color-mix(in oklab, var(--tk-warning) 20%, var(--tk-surface));
    --tk-danger-soft: color-mix(in oklab, var(--tk-danger) 18%, var(--tk-surface));
    --tk-info-soft: color-mix(in oklab, var(--tk-info) 18%, var(--tk-surface));

    --tk-nav-panel-active-bg: color-mix(in oklab, var(--tk-primary) 30%, var(--tk-nav-panel-bg));
    --tk-nav-panel-active-fg: color-mix(in oklab, var(--tk-primary) 45%, #fff);

    --tk-primary-text: color-mix(in oklab, var(--tk-primary) 45%, #fff);
    --tk-focus: color-mix(in oklab, var(--tk-primary) 55%, #fff);

    color-scheme: dark;
}

/* Status hues are dark-on-light; in dark mode their TEXT is lifted a step so
   badges, alerts and toasts stay legible (the fills keep the source mix). */
.dark {
    --tk-success-text: color-mix(in oklab, var(--tk-success) 70%, #fff);
    --tk-warning-text: color-mix(in oklab, var(--tk-warning) 70%, #fff);
    --tk-danger-text: color-mix(in oklab, var(--tk-danger) 70%, #fff);
    --tk-info-text: color-mix(in oklab, var(--tk-info) 70%, #fff);
}

/* ==========================================================================
   2. Base / reset
   ========================================================================== */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--tk-line); }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--tk-font-sans);
    -webkit-tap-highlight-color: transparent;
}
@media (max-width: 1023.98px) { html { scrollbar-gutter: stable; } }

body {
    min-height: 100dvh;
    background-color: var(--tk-canvas);
    color: var(--tk-fg);
    font-family: var(--tk-font-sans);
    font-size: 0.8125rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: 600; }
code, kbd, samp, pre { font-family: var(--tk-font-mono); font-size: 1em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, select, optgroup, textarea {
    font: inherit; letter-spacing: inherit; color: inherit;
    background-color: transparent; border-radius: 0; opacity: 1;
}
button, [role='button'], summary, label[for], select { cursor: pointer; }
button:disabled { cursor: default; }
::placeholder { opacity: 1; color: var(--tk-fg-subtle); }
textarea { resize: vertical; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
dialog { color: inherit; }

:focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; }

::selection { background: color-mix(in oklab, var(--tk-primary) 22%, transparent); }

.tk-scrollbar { scrollbar-width: thin; scrollbar-color: var(--tk-line-strong) transparent; }
.tk-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.tk-scrollbar::-webkit-scrollbar-thumb { background-color: var(--tk-line-strong); border-radius: 999px; }
.tk-scrollbar::-webkit-scrollbar-track { background: transparent; }

[dir='rtl'] .i-chevron-right, [dir='rtl'] .i-chevron-left,
[dir='rtl'] .i-chevrons-left, [dir='rtl'] .i-chevrons-right,
[dir='rtl'] .i-arrow-left, [dir='rtl'] .i-arrow-right { transform: rotate(180deg); }

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--tk-font-mono); }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }

.text-fg { color: var(--tk-fg); }
.muted { color: var(--tk-fg-muted); }
.subtle { color: var(--tk-fg-subtle); }
.text-success { color: var(--tk-success-text, var(--tk-success)); }
.text-warning { color: var(--tk-warning-text, var(--tk-warning)); }
.text-danger { color: var(--tk-danger-text, var(--tk-danger)); }
.text-info { color: var(--tk-info-text, var(--tk-info)); }
.text-primary { color: var(--tk-primary-text); }
.text-11 { font-size: 0.6875rem; }
.text-12 { font-size: 0.75rem; line-height: 1rem; }
.text-13 { font-size: 0.8125rem; }
.text-14 { font-size: 0.875rem; line-height: 1.25rem; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.ta-center { text-align: center; }
.ta-end { text-align: end; }

.link { color: var(--tk-primary-text); text-underline-offset: 3px; }
.link:hover { text-decoration: underline; }
.hint { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.kbd { display: inline-flex; align-items: center; height: 1.125rem; padding-inline: 0.3125rem; border: 1px solid var(--tk-line); border-bottom-width: 2px; border-radius: var(--tk-radius-control); background: var(--tk-surface); font-family: var(--tk-font-mono); font-size: 0.6875rem; color: var(--tk-fg-muted); }
code.inline, .code-inline { padding: 0.0625rem 0.3125rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken); font-family: var(--tk-font-mono); font-size: 0.75rem; }

.push-end { margin-inline-start: auto; }
.inline-form { display: inline-flex; }
.row { display: flex; align-items: center; gap: 0.5rem; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Vertical stacks use flex gap, so hidden inputs (CSRF) and sr-only elements never add space. */
.stack-1, .stack-2, .stack-3, .stack-4, .stack-6 { display: flex; flex-direction: column; }
.stack-1 { gap: 0.25rem; } .stack-2 { gap: 0.5rem; } .stack-3 { gap: 0.75rem; } .stack-4 { gap: 1rem; } .stack-6 { gap: 1.5rem; }
:is(.stack-1, .stack-2, .stack-3, .stack-4, .stack-6) > :is(.btn:not(.btn--block), .check, .badge, .inline-form) { align-self: flex-start; }
.mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }

/* Page widths: forms/settings 64rem, narrow tab panels 42rem, lists: none. */
.w-form { max-width: 64rem; }
.w-narrow { max-width: 42rem; }

/* Layout grids */
.grid-2, .grid-3, .grid-stats, .split { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.grid-stats { gap: 0.75rem; }
@media (min-width: 640px) { .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grid-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .split { grid-template-columns: minmax(0, 1fr) 18rem; }
    .split--wide { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.grid-2 > *, .grid-3 > *, .split > * { min-width: 0; }

/* Visibility helpers */
.show-sm, .show-lg { display: none !important; }
@media (min-width: 640px) { .show-sm { display: inline-flex !important; } .hide-sm { display: none !important; } }
@media (min-width: 1024px) { .hide-lg { display: none !important; } .show-lg { display: inline-flex !important; } }

/* ==========================================================================
   4. App shell — one sidebar, topbar, main, footer
   ========================================================================== */
.shell { display: flex; min-height: 100dvh; background: var(--tk-canvas); }
@media (min-width: 1024px) { .shell { height: 100dvh; overflow: hidden; } }

.column { position: relative; display: flex; flex-direction: column; flex: 1 1 0%; min-width: 0; }
@media (min-width: 1024px) { .column { overflow-y: auto; scrollbar-gutter: stable; } }

.main { flex: 1 1 0%; padding: 1rem; }
@media (min-width: 1024px) { .main { padding-inline: 1.25rem; } }

/* ---- Sidebar ---- */
.sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
    display: flex; flex-direction: column; flex-shrink: 0;
    height: 100dvh; width: var(--tk-nav-width);
    background: var(--tk-nav-panel-bg);
    border-inline-end: 1px solid var(--tk-nav-panel-line);
    transition: width 200ms var(--tk-ease), transform 200ms var(--tk-ease);
}
@media (max-width: 1023.98px) {
    .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 200ms var(--tk-ease), visibility 0s linear 200ms; }
    [dir='rtl'] .sidebar { transform: translateX(100%); }
    .sb-open .sidebar { transform: translateX(0); visibility: visible; transition: transform 200ms var(--tk-ease); }
}
@media (min-width: 1024px) { .sidebar { position: relative; } }

.backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.4); }
.backdrop:not(.is-open) { display: none; }
@media (min-width: 1024px) { .backdrop { display: none !important; } }

.sb__head {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    height: var(--tk-topbar-height); padding-inline: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--tk-nav-panel-line);
}
.sb__brand { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; border-radius: var(--tk-radius-control); }
.sb__mark {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2rem; height: 2rem; overflow: hidden; border-radius: var(--tk-radius-control);
    background: var(--tk-nav-bg); color: var(--tk-nav-fg); font-size: 0.875rem; font-weight: 600;
}
.sb__mark img { width: 100%; height: 100%; object-fit: cover; }
.sb__name { font-size: 0.8125rem; font-weight: 600; color: var(--tk-nav-panel-fg); }

.sb__icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    padding: 0.25rem; border-radius: var(--tk-radius-control); color: var(--tk-nav-panel-fg-muted);
    transition: color 0.15s var(--tk-ease), background-color 0.15s var(--tk-ease);
}
.sb__icon-btn svg { width: 1rem; height: 1rem; }
.sb__icon-btn:hover { background: var(--tk-nav-panel-hover); color: var(--tk-nav-panel-fg); }
.sb__collapse { display: none; }
@media (min-width: 1024px) { .sb__collapse { display: inline-flex; } .sb__close { display: none; } }

.sb__nav { position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; padding-block: 0.25rem 0.5rem; }
.navgroup { padding-top: 0.75rem; }
.navgroup:first-child { padding-top: 0.5rem; }
.navgroup__label { padding: 0 0.75rem 0.25rem calc(0.75rem + 2px); font-size: 0.6875rem; color: var(--tk-nav-panel-fg-muted); white-space: nowrap; }

.navitem {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-inline-start: 2px solid transparent;
    font-size: 0.8125rem; color: var(--tk-nav-panel-fg-muted); white-space: nowrap;
    transition: color 0.15s var(--tk-ease), background-color 0.15s var(--tk-ease), border-color 0.15s var(--tk-ease);
}
.navitem svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.navitem:hover { background: var(--tk-nav-panel-hover); color: var(--tk-nav-panel-fg); }
.navitem.is-active {
    border-inline-start-color: var(--tk-primary);
    background: var(--tk-nav-panel-active-bg);
    color: var(--tk-nav-panel-active-fg); font-weight: 500;
}
.dark .navitem.is-active { border-inline-start-color: var(--tk-nav-panel-active-fg); }
.navitem:focus-visible { outline-offset: -2px; }
.navitem__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.navitem__count {
    margin-inline-start: auto; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    height: 17px; min-width: 17px; padding-inline: 0.25rem;
    border-radius: var(--tk-radius-control);
    background: color-mix(in oklab, var(--tk-fg) 11%, var(--tk-nav-panel-bg)); color: var(--tk-nav-panel-fg);
    font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.navitem__count--danger { background: var(--tk-danger); color: #fff; }
.navitem__hint { margin-inline-start: auto; flex-shrink: 0; font-size: 0.6875rem; color: var(--tk-nav-panel-fg-muted); }

.sb__user {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    padding: 0.5rem 0.625rem; border-top: 1px solid var(--tk-nav-panel-line);
}
.sb__user-link { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; border-radius: var(--tk-radius-control); }
.sb__user-text { flex: 1; min-width: 0; }
.sb__user-name { font-size: 0.8125rem; font-weight: 500; color: var(--tk-nav-panel-fg); }
.sb__user-role { font-size: 0.6875rem; color: var(--tk-nav-panel-fg-muted); }
.sb__logout { padding: 0.375rem; }
.sb__logout:hover { color: var(--tk-danger-text, var(--tk-danger)); }

/* Collapsed (desktop only) = the ForumKitt rail: icons in 36px chips. */
@media (min-width: 1024px) {
    .sb-collapsed .sidebar { width: var(--tk-nav-width-collapsed); }
    .sb-collapsed .sb__name, .sb-collapsed .sb__collapse, .sb-collapsed .navgroup__label,
    .sb-collapsed .navitem__label, .sb-collapsed .navitem__hint,
    .sb-collapsed .sb__user-text, .sb-collapsed .sb__logout { display: none; }
    .sb-collapsed .sb__head { justify-content: center; padding: 0; }
    .sb-collapsed .sb__brand { flex: 0 0 auto; }
    .sb-collapsed .sb__nav { padding-top: 0.5rem; }
    .sb-collapsed .navgroup { padding-top: 0; }
    .sb-collapsed .navgroup + .navgroup::before {
        content: ''; display: block; width: 1.5rem; height: 1px; margin: 0.375rem auto; background: var(--tk-nav-panel-line);
    }
    .sb-collapsed .navitem {
        justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0.125rem auto; padding: 0;
        border: 0; border-radius: var(--tk-radius-control);
    }
    .sb-collapsed .navitem svg { width: 18px; height: 18px; }
    .sb-collapsed .navitem__count {
        position: absolute; top: -2px; inset-inline-end: -2px;
        height: 15px; min-width: 15px; padding-inline: 0.125rem; font-size: 0.5625rem;
    }
    .sb-collapsed .sb__user { justify-content: center; padding-inline: 0; }
    .sb-collapsed .sb__user-link { flex: 0 0 auto; }
}

/* ---- Topbar ---- */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    height: var(--tk-topbar-height); padding-inline: 0.75rem;
    background: var(--tk-surface); border-bottom: 1px solid var(--tk-line);
}
@media (min-width: 640px) { .topbar { padding-inline: 1rem; } }

.topbar .topbar__expand { display: none; }
@media (min-width: 1024px) { .sb-collapsed .topbar .topbar__expand { display: inline-flex; } }

.topbar__search { position: relative; display: none; width: 100%; max-width: 20rem; }
@media (min-width: 640px) { .topbar__search { display: block; } }
.topbar__search svg {
    position: absolute; top: 50%; inset-inline-start: 0.625rem; transform: translateY(-50%);
    width: 0.875rem; height: 0.875rem; color: var(--tk-fg-subtle); pointer-events: none;
}
.topbar__search input {
    width: 100%; height: 2rem; padding-inline: 2rem 0.75rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control);
    background: var(--tk-surface-sunken); color: var(--tk-fg); font-size: 0.8125rem;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.topbar__search input:focus-visible { outline: none; border-color: var(--tk-primary); background: var(--tk-surface); }
.dark .topbar__search input:focus-visible { border-color: var(--tk-focus); }
.topbar__search input::-webkit-search-cancel-button { display: none; }

.topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 0.25rem; }
.topbar__end > .btn--primary { margin-inline-end: 0.25rem; }

.topbar__account {
    display: flex; align-items: center; gap: 0.375rem; padding: 0.125rem;
    border-radius: var(--tk-radius-control); transition: background-color 0.15s;
}
.topbar__account:hover { background: var(--tk-surface-sunken); }
.topbar__account:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-focus) 30%, transparent); }
.topbar__account-name { display: none; font-size: 0.8125rem; font-weight: 500; color: var(--tk-fg); max-width: 10rem; }
@media (min-width: 640px) { .topbar__account-name { display: block; } }
.topbar__account-chev { width: 1rem; height: 1rem; color: var(--tk-fg-subtle); }

.theme-toggle .i-sun { display: none; }
.dark .theme-toggle .i-sun { display: block; }
.dark .theme-toggle .i-moon { display: none; }

.main:focus { outline: none; }
.skip-link { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 120; padding: 0.5rem 0.75rem; border-radius: var(--tk-radius-control); background: var(--tk-primary); color: var(--tk-primary-fg); font-weight: 500; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---- Banner stack (global alerts at the top of main) ---- */
.banners { display: grid; gap: 0.5rem; margin-bottom: 1rem; }

/* ---- Footer ---- */
.footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    padding: 0.625rem 1rem; border-top: 1px solid var(--tk-line);
    font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-subtle);
}
.footer__ver { margin-inline-start: auto; }

/* ==========================================================================
   5. Page header, sticky save bar, sibling strip, underline tabs, TOC
   ========================================================================== */
.page-header { margin-bottom: 1rem; }
.page-header__row { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .page-header__row { flex-direction: row; align-items: flex-start; } }
.page-header--narrow .page-header__row { max-width: 64rem; }
.page-header__text { min-width: 0; }
.page-header__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .page-header__actions { margin-inline-start: auto; } }
.page-header__control { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--tk-fg-muted); }

.crumbs { margin-bottom: 0.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-subtle); }
.crumbs a { transition: color 0.15s; }
.crumbs a:hover { color: var(--tk-fg); }
.crumbs__sep { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.crumbs__current, .crumbs__plain { color: var(--tk-fg-muted); }

.page-title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--tk-fg); }
@media (min-width: 640px) { .page-title { font-size: 1.125rem; line-height: 1.75rem; } }
.page-title__badge { margin-inline-start: 0.5rem; vertical-align: 0.125rem; }
.page-desc { margin-top: 0.125rem; max-width: 48rem; font-size: 0.8125rem; color: var(--tk-fg-muted); }

.page-header--sticky {
    position: sticky; top: var(--tk-topbar-height); z-index: 20;
    margin: -1rem -1rem 0.5rem;
    padding: 1rem 1rem 0.5rem;
    background: var(--tk-canvas);
    transition: box-shadow 0.15s var(--tk-ease);
}
@media (min-width: 1024px) { .page-header--sticky { margin-inline: -1.25rem; padding-inline: 1.25rem; } }
.page-header--sticky.is-stuck { box-shadow: 0 1px 0 var(--tk-line); }

.unsaved { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--tk-warning-text, var(--tk-warning)); }
.unsaved::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; }

.scroll-mt, .fcard[id], .psection[id] { scroll-margin-top: 9rem; }

/* Sibling-page strip: a segmented control on a sunken band. */
.segbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    max-width: 64rem; margin-bottom: 1rem; padding: 0.5rem 1.25rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface-sunken);
}
.segbar--full { max-width: none; }
.segbar--filters { max-width: none; padding-inline: 0.625rem; }
.segbar__note { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--tk-warning-text, var(--tk-warning)); }
.segbar__note svg { width: 0.875rem; height: 0.875rem; }
@media (max-width: 639.98px) { .segbar { padding-inline: 0.5rem; } }

.segtabs { position: relative; display: inline-flex; height: 2rem; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); }
.segtabs__item {
    display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; padding-inline: 0.75rem;
    border-inline-end: 1px solid var(--tk-line); white-space: nowrap;
    font-size: 0.75rem; line-height: 1rem; font-weight: 500;
    background: var(--tk-surface-sunken); color: var(--tk-fg-muted); transition: color 0.15s;
}
.segtabs__item svg { width: 0.875rem; height: 0.875rem; }
.segtabs__item:last-child { border-inline-end: 0; }
.segtabs__item:hover { color: var(--tk-fg); }
.segtabs__item.is-current { background: var(--tk-surface); color: var(--tk-fg); }
.segtabs__item:focus-visible { outline-offset: -2px; }
.segtabs__count { font-variant-numeric: tabular-nums; color: var(--tk-fg-subtle); }

/* In-page underline tabs */
.tabs-root { display: flex; flex-direction: column; gap: 1rem; }
.tabs { position: relative; display: flex; align-items: center; gap: 0.25rem; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--tk-line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
    display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid transparent; white-space: nowrap;
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--tk-fg-muted);
    transition: color 0.15s, border-color 0.15s;
}
.tabs__tab svg { width: 1rem; height: 1rem; }
.tabs__tab:hover { color: var(--tk-fg); }
.tabs__tab[aria-selected='true'], .tabs__tab.is-current { border-bottom-color: var(--tk-primary); color: var(--tk-fg); }
.dark .tabs__tab[aria-selected='true'], .dark .tabs__tab.is-current { border-bottom-color: var(--tk-focus); }
.tabs__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tk-focus) 30%, transparent); }
.tabs__count { display: inline-flex; align-items: center; justify-content: center; height: 1.125rem; min-width: 1.125rem; padding-inline: 0.3125rem; border-radius: var(--tk-radius-pill); background: var(--tk-surface-sunken); font-size: 0.6875rem; font-weight: 600; color: var(--tk-fg-muted); font-variant-numeric: tabular-nums; }
.tabs__tab--danger[aria-selected='true'] { border-bottom-color: var(--tk-danger); }
.js [data-tab-panel]:not(.is-active) { display: none; }

/* "On this page" column */
.with-toc { display: grid; align-items: start; gap: 1rem; max-width: 64rem; }
@media (min-width: 768px) { .with-toc { grid-template-columns: minmax(0, 1fr) 12rem; } }
.with-toc > * { min-width: 0; }
.toc { display: none; }
@media (min-width: 768px) { .toc { display: block; position: sticky; top: 8rem; } }
.toc__label { margin-bottom: 0.375rem; padding-inline-start: 0.75rem; font-size: 0.6875rem; color: var(--tk-fg-subtle); }
.toc__label--gap { margin-top: 1.25rem; }
.toc__link {
    display: block; padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border-inline-start: 2px solid var(--tk-line);
    font-size: 0.8125rem; color: var(--tk-fg-muted); transition: color 0.15s, border-color 0.15s;
}
.toc__link:hover { color: var(--tk-fg); }
.toc__link.is-active { border-inline-start-color: var(--tk-primary); font-weight: 500; color: var(--tk-fg); }
.dark .toc__link.is-active { border-inline-start-color: var(--tk-focus); }
.toc__link--out { display: flex; align-items: center; gap: 0.25rem; }
.toc__link--out svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.related-inline { font-size: 0.75rem; color: var(--tk-fg-muted); }
.related-inline a { color: var(--tk-primary-text); }
.related-inline a:hover { text-decoration: underline; }
@media (min-width: 768px) { .related-inline { display: none; } }

/* Page section (heading outside a card) */
.psection > * + * { margin-top: 0.75rem; }
.psection__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.psection__title { font-size: 0.9375rem; font-weight: 600; color: var(--tk-fg); }
.psection__desc { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--tk-fg-muted); }
.psection__actions { margin-inline-start: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.subhead { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--tk-fg); }
.subhead + .hint { margin-top: 0.125rem; }

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.btn {
    display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem;
    white-space: nowrap; border-radius: var(--tk-radius-control); font-weight: 500;
    outline: none; user-select: none; cursor: pointer; text-decoration: none;
    transition: color 0.15s var(--tk-ease), background-color 0.15s var(--tk-ease), border-color 0.15s var(--tk-ease), opacity 0.15s;
    height: 2.5rem; padding-inline: 1rem; font-size: 0.875rem; line-height: 1.25rem;
}
.btn svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; }
.btn:disabled, .btn[aria-disabled='true'], .btn.is-disabled { pointer-events: none; opacity: 0.5; }
.btn:focus-visible { outline: 2px solid var(--tk-focus); outline-offset: 2px; }

.btn--sm { height: 2rem; padding-inline: 0.75rem; font-size: 0.75rem; line-height: 1rem; }
.btn--sm svg { width: 0.875rem; height: 0.875rem; }
.btn--lg { height: 2.75rem; padding-inline: 1.25rem; }
.btn--icon-sm { width: 2rem; height: 2rem; padding: 0; }
.btn--icon-sm svg { width: 1rem; height: 1rem; }
.btn--icon { width: 2.5rem; height: 2.5rem; padding: 0; }
.btn--icon svg { width: 18px; height: 18px; }
.btn--xs-icon { width: 1.5rem; height: 1.5rem; padding: 0; }
.btn--xs-icon svg { width: 0.875rem; height: 0.875rem; }

.btn--primary { background: var(--tk-primary); color: var(--tk-primary-fg); }
.btn--primary:hover { background: var(--tk-primary-hover); }
.btn--primary:active { background: var(--tk-primary-active); }

.btn--secondary { border: 1px solid var(--tk-line); background: var(--tk-surface); color: var(--tk-fg); }
.btn--secondary:hover { background: var(--tk-surface-sunken); }

.btn--ghost { color: var(--tk-fg-muted); }
.btn--ghost:hover { background: var(--tk-surface-sunken); color: var(--tk-fg); }

.btn--subtle { background: var(--tk-surface-sunken); color: var(--tk-fg); }
.btn--subtle:hover { background: var(--tk-line); }

.btn--danger { background: var(--tk-danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.1); }
.btn--danger:active { filter: brightness(0.95); }

.btn--danger-ghost { color: var(--tk-danger-text, var(--tk-danger)); }
.btn--danger-ghost:hover { background: var(--tk-danger-soft); }

.btn--row { color: var(--tk-fg-muted); }
.btn--row:hover, .btn--row[aria-expanded='true'] { background: var(--tk-primary); color: var(--tk-primary-fg); }

.btn--link { color: var(--tk-primary-text); text-underline-offset: 4px; }
.btn--link:hover { text-decoration: underline; }
.btn--bare { height: auto; padding-inline: 0; }

.btn--block { width: 100%; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading svg:first-child { animation: hk-spin 0.8s linear infinite; }

.btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* ==========================================================================
   7. Badges and counters
   ========================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap;
    border-radius: 999px; font-weight: 500;
    padding: 0.25rem 0.625rem; font-size: 0.75rem; line-height: 1rem;
    background: var(--tk-surface-sunken); color: var(--tk-fg-muted);
}
.badge svg { width: 0.75rem; height: 0.75rem; }
.badge--sm { padding: 0.125rem 0.375rem; font-size: 0.6875rem; line-height: 1rem; gap: 0.3125rem; }
.badge__dot { width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 999px; background: currentColor; }
.badge__dot.is-pulsing { animation: hk-pulse-dot 1.6s var(--tk-ease) infinite; }

.badge--neutral { background: var(--tk-surface-sunken); color: var(--tk-fg-muted); }
.badge--outline { background: transparent; border: 1px solid var(--tk-line); color: var(--tk-fg-muted); }
.badge--primary { background: var(--tk-primary-soft); color: var(--tk-primary-text); }
.badge--success { background: var(--tk-success-soft); color: var(--tk-success-text, var(--tk-success)); }
.badge--warning { background: var(--tk-warning-soft); color: var(--tk-warning-text, var(--tk-warning)); }
.badge--danger { background: var(--tk-danger-soft); color: var(--tk-danger-text, var(--tk-danger)); }
.badge--info { background: var(--tk-info-soft); color: var(--tk-info-text, var(--tk-info)); }
.badge--solid { background: var(--tk-primary); color: var(--tk-primary-fg); }
.dark .badge--neutral { border: 1px solid var(--tk-line); }

.counter {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; min-width: 20px; padding-inline: 0.375rem;
    border-radius: var(--tk-radius-control); background: var(--tk-danger); color: #fff;
    font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. Cards
   ========================================================================== */
.fcard, .rcard, .card, .dpanel {
    overflow: hidden; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card);
    background: var(--tk-surface); box-shadow: var(--tk-shadow-card);
}
.fcard--visible { overflow: visible; }
.fcard__head {
    display: flex; align-items: center; gap: 0.75rem; min-height: 2.5rem; padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
}
.fcard__head > .btn, .fcard__head > .seg, .fcard__head > .btn-group { margin-block: -0.25rem; }
.fcard__titles { flex: 1; min-width: 0; }
.fcard__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--tk-fg); }
.fcard__title svg { width: 1rem; height: 1rem; color: var(--tk-fg-subtle); }
.fcard__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.fcard__meta { flex-shrink: 0; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.fcard__body { padding: 1rem; }
.fcard__body > * + * { margin-top: 0.625rem; }
.fcard__body--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.fcard__body--grid > * + * { margin-top: 0; }
@media (min-width: 640px) { .fcard__body--grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fcard__body--flush { padding: 0; }
.fcard__body--flush > * + * { margin-top: 0; }
.fcard__body--rows { padding: 0.25rem 1rem; }
.fcard__body--rows > * + * { margin-top: 0; border-top: 1px solid var(--tk-line); }
.fcard__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem;
    border-top: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
}
.fcard__foot-note { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.fcard--danger { border-color: color-mix(in oklab, var(--tk-danger) 40%, transparent); }
.fcard--danger .fcard__title { color: var(--tk-danger-text, var(--tk-danger)); }
/* In the 6-column grid a field is full width unless it declares a span. */
.fcard__body--grid > * { grid-column: 1 / -1; }

@media (min-width: 640px) {
    .span-6, .span-full { grid-column: span 6 / span 6; }
    .span-5 { grid-column: span 5 / span 5; }
    .span-4 { grid-column: span 4 / span 4; }
    .span-3, .span-half { grid-column: span 3 / span 3; }
    .span-2 { grid-column: span 2 / span 2; }
    .span-1 { grid-column: span 1 / span 1; }
    .span-third { grid-column: span 3 / span 3; }
}
@media (min-width: 1024px) { .span-third { grid-column: span 2 / span 2; } }
.fcard__body--grid > .span-break { grid-column: 1 / -1; }

.card__head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tk-line); }
.card__title { font-size: 0.95rem; font-weight: 600; }
.card__desc { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.card__body { padding: 1.25rem; }
.card__foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--tk-line); }

/* Summary strip (detail page header card) */
.summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.25rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface); }
.summary__main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.summary__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-weight: 500; font-size: 0.875rem; }
.summary__sub { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.summary__facts { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.summary__facts dt { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-subtle); }
.summary__facts dd { font-size: 0.8125rem; color: var(--tk-fg); font-variant-numeric: tabular-nums; }

/* Dashboard panel */
.dpanel { display: flex; flex-direction: column; }
.dpanel__head {
    display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; min-height: 2.75rem; padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
}
.dpanel__tile, .tone-tile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.75rem; height: 1.75rem; border-radius: var(--tk-radius-control);
}
.dpanel__tile svg, .tone-tile svg { width: 18px; height: 18px; }
.dpanel__title { min-width: 0; font-size: 0.8125rem; font-weight: 600; color: var(--tk-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpanel__actions { margin-inline-start: auto; display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.dpanel__actions > .btn { margin-block: -0.25rem; }
.dpanel__body { flex: 1; }
.dpanel__body--pad { padding: 1rem; }
.tone-primary { background: var(--tk-primary-soft); color: var(--tk-primary-text); }
.tone-success { background: var(--tk-success-soft); color: var(--tk-success-text, var(--tk-success)); }
.tone-info { background: var(--tk-info-soft); color: var(--tk-info-text, var(--tk-info)); }
.tone-danger { background: var(--tk-danger-soft); color: var(--tk-danger-text, var(--tk-danger)); }
.tone-warning { background: var(--tk-warning-soft); color: var(--tk-warning-text, var(--tk-warning)); }
.tone-accent { background: var(--tk-accent-soft); color: var(--tk-accent); }
.tone-neutral { background: var(--tk-surface-sunken); color: var(--tk-fg-muted); }

/* Overview tiles */
.tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tiles--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); padding: 0.75rem; background: var(--tk-surface); }
.tile__label { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.tile__value { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--tk-fg); }
.tile__value.is-success { color: var(--tk-success-text, var(--tk-success)); }
.tile__value.is-danger { color: var(--tk-danger-text, var(--tk-danger)); }
.tile__value.is-warning { color: var(--tk-warning-text, var(--tk-warning)); }
.tile__value.is-muted { color: var(--tk-fg-subtle); }
.tile__caption { margin-top: 0.375rem; font-size: 0.6875rem; color: var(--tk-fg-subtle); }

/* ==========================================================================
   9. Forms
   ========================================================================== */
.form { max-width: 64rem; }
.field { min-width: 0; }
.field > * + * { margin-top: 0.375rem; }
.field__label { display: inline-block; font-size: 0.8125rem; font-weight: 500; color: var(--tk-fg); user-select: none; }
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.field__label-aside { font-size: 0.75rem; color: var(--tk-fg-subtle); }
.field__req { color: var(--tk-danger-text, var(--tk-danger)); }
.field__optional { font-weight: 400; color: var(--tk-fg-subtle); }
.field__control { min-width: 0; }
.field__hint { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.field__hint a { color: var(--tk-primary-text); }
.field__hint a:hover { text-decoration: underline; }
.field__error { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--tk-danger-text, var(--tk-danger)); }
.field--inline > :first-child { padding-top: 0; }
@media (min-width: 640px) {
    .field--inline { display: flex; align-items: flex-start; gap: 1rem; }
    .field--inline > * + * { margin-top: 0; }
    .field--inline > :first-child { width: 11rem; flex-shrink: 0; padding-top: 0.375rem; text-align: end; }
    .field--inline > :last-child { flex: 1; }
}
.pair { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pair { grid-template-columns: 1fr 1fr; } .pair--num { grid-template-columns: minmax(0, 1fr) 9rem; gap: 0.625rem 0.75rem; } }
.sep { height: 1px; background: var(--tk-line); border: 0; }

.input {
    display: block; width: 100%; max-width: var(--tk-field-measure);
    height: var(--tk-field-height); padding-inline: var(--tk-field-px);
    border: 1px solid var(--tk-field-line); border-radius: var(--tk-radius-control);
    background: var(--tk-field-bg); color: var(--tk-fg);
    font-size: var(--tk-field-font-size); line-height: 1.25rem; box-shadow: none;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.input::placeholder { color: var(--tk-fg-subtle); }
.input:focus, .input:focus-visible { outline: none; background: var(--tk-field-bg-focus); border-color: var(--tk-primary); }
.dark .input:focus, .dark .input:focus-visible { border-color: var(--tk-focus); }
.input[aria-invalid='true'], .input[aria-invalid='true']:focus { border-color: var(--tk-danger); }
.input:disabled, .input[data-disabled] { cursor: not-allowed; background: var(--tk-field-disabled-bg); opacity: 0.6; }
.input[readonly] { background: var(--tk-field-disabled-bg); }
.input[readonly]:focus { border-color: var(--tk-line-strong); }
.input[data-width='full'], textarea.input { max-width: none; }
.input--mono { font-family: var(--tk-font-mono); font-size: 0.75rem; }
.input--num { max-width: 9rem; font-variant-numeric: tabular-nums; }
.input--code { height: 2.75rem; max-width: 16rem; text-align: center; font-family: var(--tk-font-mono); font-size: 1.125rem; letter-spacing: 0.5em; }
.toolbar .input:not(:disabled), .segbar .input:not(:disabled) { background: var(--tk-surface); }
textarea.input { height: auto; min-height: var(--tk-field-textarea-min); padding-block: 0.375rem; line-height: 1.25rem; }
input[type='number'].input::-webkit-inner-spin-button { opacity: 0.5; }
input[type='search'].input::-webkit-search-cancel-button { display: none; }

.input-group { display: flex; width: 100%; max-width: var(--tk-field-measure); }
.input-group > .input { max-width: none; min-width: 0; flex: 1; }
.input-group__addon {
    display: inline-flex; align-items: center; flex-shrink: 0; padding-inline: 0.625rem;
    border: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
    font-size: 0.75rem; color: var(--tk-fg-muted); white-space: nowrap;
}
.input-group__addon:first-child { border-inline-end: 0; border-start-start-radius: var(--tk-radius-control); border-end-start-radius: var(--tk-radius-control); }
.input-group__addon:last-child { border-inline-start: 0; border-start-end-radius: var(--tk-radius-control); border-end-end-radius: var(--tk-radius-control); }
.input-group > .input:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
.input-group > .input:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > .btn { height: var(--tk-field-height); border-radius: 0; }
.input-group > .btn:last-child { border-start-end-radius: var(--tk-radius-control); border-end-end-radius: var(--tk-radius-control); margin-inline-start: -1px; }
.input-group--num { max-width: 12rem; }
.input-group--full { max-width: none; }

.select { position: relative; width: 100%; max-width: var(--tk-field-measure); }
.select > select.input { appearance: none; -webkit-appearance: none; max-width: none; padding-inline-end: 2rem; cursor: pointer; text-overflow: ellipsis; }
.select__chev { position: absolute; top: 50%; inset-inline-end: var(--tk-field-px); transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--tk-fg-subtle); pointer-events: none; }
.select > select.input.is-placeholder, .select > select.input:has(option[value='']:checked) { color: var(--tk-fg-subtle); }
.select > select.input option { color: var(--tk-fg); }
.select--w32 { width: 8rem; } .select--w36 { width: 9rem; } .select--w40 { width: 10rem; }
.select--w44 { width: 11rem; } .select--w48 { width: 12rem; } .select--full { max-width: none; }

.checkbox {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1rem; height: 1rem; cursor: pointer;
    border: 1px solid var(--tk-line-strong); border-radius: 0.25rem;
    background: var(--tk-surface) center / 0.75rem 0.75rem no-repeat;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.checkbox:checked, .checkbox:indeterminate { border-color: var(--tk-primary); background-color: var(--tk-primary); }
.checkbox:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.checkbox:indeterminate { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.checkbox:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-focus) 30%, transparent); }
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }
.check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 400; color: var(--tk-fg); cursor: pointer; }
.check:has(:disabled) { cursor: not-allowed; opacity: 0.6; }
.check__desc { color: var(--tk-fg-subtle); font-size: 0.75rem; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding-top: 0.25rem; }
.checks--chips { gap: 0.375rem; }
.checks--chips .check { height: 2rem; padding-inline: 0.625rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface); font-variant-numeric: tabular-nums; }
.checks--chips .check:has(:checked) { border-color: color-mix(in oklab, var(--tk-primary) 55%, transparent); background: var(--tk-primary-soft); }

.switch {
    appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
    width: 2.25rem; height: 1.35rem; cursor: pointer;
    border: 1px solid transparent; border-radius: 999px; background: var(--tk-line-strong);
    transition: background-color 0.15s var(--tk-ease);
}
.switch::before {
    content: ''; display: block; width: 1rem; height: 1rem; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transform: translateX(0.125rem); transition: transform 0.15s var(--tk-ease); pointer-events: none;
}
.switch:checked { background: var(--tk-primary); }
.dark .switch:checked { background: color-mix(in oklab, var(--tk-primary) 80%, #fff); }
.switch:checked::before { transform: translateX(1.1rem); }
[dir='rtl'] .switch::before { transform: translateX(-0.125rem); }
[dir='rtl'] .switch:checked::before { transform: translateX(-1.1rem); }
.switch:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-focus) 30%, transparent); }
.switch:disabled { cursor: not-allowed; opacity: 0.5; }

.switchfield { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.switchfield--described { align-items: flex-start; }
.switchfield--described .switch { margin-top: 0.125rem; }
.switchfield:has(:disabled) { cursor: not-allowed; }
.switchfield__text { min-width: 0; }
.switchfield__label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--tk-fg); }
.switchfield__desc { display: block; margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }

/* Segmented control */
.seg { display: inline-flex; height: 2rem; max-width: 100%; overflow: hidden; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); }
.seg--block { display: flex; width: 100%; }
.seg__opt {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; cursor: pointer;
    padding-inline: 0.75rem; border-inline-end: 1px solid var(--tk-line); white-space: nowrap;
    font-size: 0.75rem; line-height: 1rem; font-weight: 500;
    background: var(--tk-surface); color: var(--tk-fg-muted); transition: color 0.15s, background-color 0.15s;
}
.seg__opt svg { width: 0.875rem; height: 0.875rem; }
.seg__opt:last-child { border-inline-end: 0; }
.seg__opt:hover { color: var(--tk-fg); }
.seg__opt[aria-checked='true'], .seg__opt[aria-pressed='true'], .seg__opt.is-current, .seg__opt:has(:checked) { background: var(--tk-surface-sunken); color: var(--tk-fg); }
.seg__opt:has(:focus-visible) { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tk-focus) 35%, transparent); }
.segbar .seg__opt { background: var(--tk-surface-sunken); }
.segbar .seg__opt[aria-checked='true'], .segbar .seg__opt[aria-pressed='true'], .segbar .seg__opt.is-current, .segbar .seg__opt:has(:checked) { background: var(--tk-surface); }

/* Radio cards */
.choices { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choices--1 { grid-template-columns: minmax(0, 1fr) !important; }
.choice {
    position: relative; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface);
    cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.choice:hover { border-color: color-mix(in oklab, var(--tk-primary) 40%, transparent); }
.choice:has(:checked) { border-color: var(--tk-primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-primary) 25%, transparent); }
.dark .choice:has(:checked) { border-color: var(--tk-focus); box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-focus) 25%, transparent); }
.choice:has(:disabled) { cursor: not-allowed; opacity: 0.55; }
.choice__radio { flex-shrink: 0; margin-top: 0.1875rem; width: 0.875rem; height: 0.875rem; accent-color: var(--tk-primary); cursor: inherit; }
.choice__body { min-width: 0; flex: 1; }
.choice__title { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--tk-fg); }
.choice__title svg { width: 0.875rem; height: 0.875rem; color: var(--tk-fg-muted); }
.choice__title .badge { margin-inline-start: auto; }
.choice__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }

/* Colour field */
.colorfield > * + * { margin-top: 0.5rem; }
.colorfield__row { display: flex; align-items: center; gap: 0.5rem; max-width: var(--tk-field-measure); }
.colorfield__row .input { flex: 1; min-width: 0; }
.colorfield__swatch {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2rem; height: 2rem; overflow: hidden; cursor: pointer;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control);
}
.colorfield__swatch.is-auto { border-style: dashed; border-color: var(--tk-line-strong); background: transparent !important; }
.colorfield__swatch.is-auto::after { content: 'Auto'; font-size: 0.625rem; font-weight: 600; color: var(--tk-fg-subtle); }
.colorfield__swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.colorfield__clear {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); color: var(--tk-fg-muted); background: var(--tk-surface);
}
.colorfield__clear:hover { color: var(--tk-fg); }
.colorfield__clear svg { width: 1rem; height: 1rem; }
.colorfield__presets { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.colorfield__presets button { width: 1.5rem; height: 1.5rem; cursor: pointer; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); transition: transform 0.15s; }
.colorfield__presets button:hover { transform: scale(1.1); }
.colorfield__presets button.is-selected { box-shadow: 0 0 0 1px var(--tk-surface), 0 0 0 3px var(--tk-primary); }

/* Read-only value with a copy button (URLs, tokens, embed code) */
.copyfield { display: flex; width: 100%; max-width: var(--tk-field-measure); }
.copyfield--full { max-width: none; }
.copyfield > .input { max-width: none; flex: 1; min-width: 0; border-start-end-radius: 0; border-end-end-radius: 0; background: var(--tk-surface-sunken); }
.copyfield > .btn { height: var(--tk-field-height); margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }

/* Image field */
.imagefield__preview {
    display: grid; place-items: center; height: 4rem; width: 100%; max-width: 14rem; overflow: hidden;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken);
    font-size: 0.75rem; color: var(--tk-fg-subtle);
}
.imagefield__preview img { width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 0.375rem; }
.imagefield__actions { margin-top: 0.5rem; display: flex; gap: 0.375rem; }
.imagefield__actions input[type='file'] { display: none; }

/* Dropzone (upload) */
.dropzone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
    padding: 2.5rem 1.5rem; text-align: center; cursor: pointer;
    border: 1px dashed var(--tk-line-strong); border-radius: var(--tk-radius-card); background: var(--tk-surface-sunken);
    transition: border-color 0.15s, background-color 0.15s;
}
.dropzone:hover { border-color: color-mix(in oklab, var(--tk-primary) 45%, transparent); }
.dropzone.is-over { border-color: var(--tk-primary); border-style: solid; background: var(--tk-primary-soft); }
.dropzone input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dropzone__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--tk-radius-card); background: var(--tk-surface); border: 1px solid var(--tk-line); color: var(--tk-fg-muted); }
.dropzone__icon svg { width: 1.25rem; height: 1.25rem; }
.dropzone__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--tk-fg); }
.dropzone__desc { margin-top: 0.125rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.dropzone__files { font-size: 0.75rem; color: var(--tk-fg); font-weight: 500; }

/* ==========================================================================
   10. Data table family
   ========================================================================== */
/* position:relative keeps absolutely-positioned children (sr-only labels) inside the scroll box. */
.dtable-wrap { position: relative; width: 100%; overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.dtable thead tr { border-bottom: 1px solid var(--tk-line); background: var(--tk-surface-sunken); }
.dtable th {
    height: 2rem; padding-inline: var(--tk-row-px); border-inline-end: 1px solid var(--tk-line);
    text-align: start; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--tk-fg-muted);
}
.dtable th:last-child { border-inline-end: 0; }
.dtable__sort { display: inline-flex; align-items: center; gap: 0.25rem; transition: color 0.15s; }
.dtable__sort:hover, .dtable__sort.is-sorted { color: var(--tk-fg); }
.dtable__sort svg { width: 0.75rem; height: 0.75rem; }
.dtable__sort:not(.is-sorted) svg { opacity: 0.4; }
.dtable tbody tr { border-bottom: 1px solid var(--tk-line); }
.dtable tbody tr:last-child { border-bottom: 0; }
.dtable tbody tr:nth-child(even) { background: color-mix(in oklab, var(--tk-surface-sunken) 40%, transparent); }
.dtable tbody tr:hover { background: var(--tk-primary-soft); }
.dtable tbody tr.is-selected { background: var(--tk-primary-soft); }
.dtable td {
    padding: var(--tk-row-py) var(--tk-row-px); vertical-align: middle; color: var(--tk-fg);
    border-inline-end: 1px solid color-mix(in oklab, var(--tk-line) 70%, transparent);
}
.dtable td:last-child { border-inline-end: 0; }
.dtable .dtable__check { width: 2rem; padding: 0 0 0 var(--tk-row-px); }
.dtable .dtable__check .checkbox { display: block; }
.dtable th.dtable__act, .dtable td.dtable__act { width: 2rem; padding: 0 var(--tk-row-px) 0 0; text-align: end; border-inline-end: 0; }
.dtable td.muted, .dtable .cell-muted { color: var(--tk-fg-muted); }
.dtable td.ta-end, .dtable th.ta-end, .dtable td.ta-center, .dtable .cell-num { white-space: nowrap; }
.dtable .cell-primary { min-width: 16rem; }
.dtable .cell-date { font-size: 0.75rem; color: var(--tk-fg-muted); white-space: nowrap; }
.dtable .cell-code { font-family: var(--tk-font-mono); font-size: 0.75rem; }
.w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-32 { width: 8rem; }
.w-36 { width: 9rem; } .w-44 { width: 11rem; } .w-56 { width: 14rem; }
.hide-below-sm, .hide-below-md, .hide-below-lg, .hide-below-xl { display: none; }
@media (min-width: 640px) { .hide-below-sm { display: table-cell; } }
@media (min-width: 768px) { .hide-below-md { display: table-cell; } }
@media (min-width: 1024px) { .hide-below-lg { display: table-cell; } }
@media (min-width: 1280px) { .hide-below-xl { display: table-cell; } }

/* Primary cell: thumb/avatar + name link + badges, sub-line below */
.cell { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.cell__text { min-width: 0; flex: 1; }
.cell__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; }
.cell__link { font-weight: 500; color: var(--tk-fg); transition: color 0.15s; }
a.cell__link:hover { color: var(--tk-primary-text); }
.cell__link.truncate-2 { overflow-wrap: anywhere; }
.cell__sub { margin-top: 0.0625rem; max-width: 26rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell__mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken); color: var(--tk-fg-muted); }
.cell__mark svg { width: 0.875rem; height: 0.875rem; }
.cell__two { line-height: 1.1; }
.cell__two small { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: var(--tk-fg-subtle); }

.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }

.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem var(--tk-row-px);
    border-bottom: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
}
.toolbar__search { position: relative; width: 100%; }
@media (min-width: 640px) { .toolbar__search { max-width: 20rem; } }
.toolbar__search svg { position: absolute; top: 50%; inset-inline-start: 0.625rem; transform: translateY(-50%); width: 0.875rem; height: 0.875rem; color: var(--tk-fg-subtle); pointer-events: none; }
.toolbar__search input {
    width: 100%; height: 2rem; padding-inline: 2rem 0.75rem; border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-control); background: var(--tk-surface); color: var(--tk-fg); font-size: 0.8125rem;
}
.toolbar__search input:focus-visible { outline: none; border-color: var(--tk-primary); }
.dark .toolbar__search input:focus-visible { border-color: var(--tk-focus); }
.toolbar__search input::-webkit-search-cancel-button { display: none; }
.toolbar .select { width: 100%; }
@media (min-width: 640px) {
    .toolbar .select { width: auto; }
    .toolbar .select--w48 { width: 12rem; } .toolbar .select--w44 { width: 11rem; } .toolbar .select--w40 { width: 10rem; }
    .toolbar .select--w36 { width: 9rem; } .toolbar .select--w32 { width: 8rem; }
}
.toolbar__clear { color: var(--tk-fg-muted); }
.toolbar__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
.toolbar__count { font-size: 0.75rem; color: var(--tk-fg-muted); }

.pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem var(--tk-row-px);
    border-top: 1px solid var(--tk-line); background: var(--tk-surface-sunken);
}
.pager__info { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.pager__info b { font-weight: 500; color: var(--tk-fg); }
.pager__links { margin-inline-start: auto; display: flex; align-items: center; gap: 0.25rem; }
.pager__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); color: var(--tk-fg-muted); background: var(--tk-surface);
    transition: color 0.15s, background-color 0.15s;
}
.pager__btn svg { width: 1rem; height: 1rem; }
.pager__btn:hover { background: var(--tk-surface-sunken); color: var(--tk-fg); }
.pager__btn.is-disabled { pointer-events: none; opacity: 0.4; }
.pager__num {
    display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; min-width: 1.75rem; padding-inline: 0.5rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface);
    font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--tk-fg-muted); font-variant-numeric: tabular-nums;
    transition: color 0.15s, background-color 0.15s;
}
.pager__num:hover { background: var(--tk-surface-sunken); color: var(--tk-fg); }
.pager__num.is-current { border-color: transparent; background: var(--tk-primary); color: var(--tk-primary-fg); }
.pager__gap { padding-inline: 0.375rem; font-size: 0.875rem; color: var(--tk-fg-subtle); }

.bulkbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem var(--tk-row-px);
    border-bottom: 1px solid var(--tk-line); background: var(--tk-primary-soft);
}
.bulkbar__count { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--tk-primary-text); }
.bulkbar__actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* ==========================================================================
   11. Stat cards, trend chips, sparklines, glance bar
   ========================================================================== */
.stat { display: block; padding: 0.75rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface); }
a.stat { transition: border-color 0.15s; }
a.stat:hover { border-color: var(--tk-line-strong); }
.stat__top { display: flex; align-items: center; gap: 0.5rem; }
.stat__icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.stat__icon.tone-primary, .stat__icon.tone-success, .stat__icon.tone-info, .stat__icon.tone-danger,
.stat__icon.tone-warning, .stat__icon.tone-accent, .stat__icon.tone-neutral { background: none; }
.stat__label { flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.stat__value { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--tk-fg); }
.stat__value small { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--tk-fg-subtle); }
.stat__foot { margin-top: 0.5rem; display: flex; align-items: flex-end; gap: 0.5rem; min-height: 1rem; }
.stat__caption { font-size: 0.6875rem; color: var(--tk-fg-subtle); }
.spark { margin-inline-start: auto; flex-shrink: 0; width: 5rem; height: 1.75rem; overflow: visible; }

.trend { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; line-height: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.trend svg { width: 0.75rem; height: 0.75rem; }
.trend--flat { background: var(--tk-surface-sunken); color: var(--tk-fg-muted); }
.trend--good { background: var(--tk-success-soft); color: var(--tk-success-text, var(--tk-success)); }
.trend--bad { background: var(--tk-danger-soft); color: var(--tk-danger-text, var(--tk-danger)); }

.glance { overflow: hidden; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-line); }
.glance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; }
.glance__tile { display: block; padding: 0.625rem 1rem; background: var(--tk-surface); transition: background-color 0.15s; }
a.glance__tile:hover { background: var(--tk-surface-sunken); }
.glance__top { display: flex; align-items: center; gap: 0.5rem; }
.glance__top svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--tk-fg-subtle); }
.glance__label { min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.glance__top .glance__chev { margin-inline-start: auto; opacity: 0; transition: opacity 0.15s; }
.glance__tile:hover .glance__chev { opacity: 1; }
.glance__value { display: block; margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tk-fg); }
.glance__value small { font-size: 0.75rem; line-height: 1rem; font-weight: 400; color: var(--tk-fg-subtle); }
@media (max-width: 639.98px) {
    .glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glance__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Dashboard grid: 12 columns from md */
.dash { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
.dash > * { min-width: 0; }
.dash > * > .dpanel, .dash > * > .stat { height: 100%; }
@media (min-width: 640px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash > .dash__full { grid-column: 1 / -1; } }
@media (min-width: 768px) {
    .dash { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .dash > * { grid-column: span 12; }
    .dash > .md-6 { grid-column: span 6; }
}
@media (min-width: 1280px) {
    .dash > .xl-3 { grid-column: span 3; }
    .dash > .xl-4 { grid-column: span 4; }
    .dash > .xl-6 { grid-column: span 6; }
    .dash > .xl-8 { grid-column: span 8; }
}

/* ==========================================================================
   12. Rows and lists: status rows, link rows, action rows, media rows,
       key/value details, activity timeline
   ========================================================================== */
.statusrow { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; border-bottom: 1px solid var(--tk-line); }
.statusrow:last-child { border-bottom: 0; }
.statusrow__label { font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.statusrow__value { margin-inline-start: auto; flex-shrink: 0; }

.linkrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.8125rem; color: var(--tk-fg); transition: background-color 0.15s; }
.linkrow + .linkrow { border-top: 1px solid var(--tk-line); }
.linkrow:hover { background: var(--tk-surface-sunken); }
.linkrow > svg:first-child { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--tk-fg-subtle); }
.linkrow__count { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.linkrow__count.is-danger { color: var(--tk-danger-text, var(--tk-danger)); }
.linkrow__count.is-warning { color: var(--tk-warning-text, var(--tk-warning)); }
.linkrow__count.is-muted { color: var(--tk-fg-muted); }
.linkrow > svg:last-child { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--tk-fg-subtle); }

.actionrows { padding: 0.5rem; }
.actionrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--tk-radius-control); font-size: 0.8125rem; font-weight: 500; color: var(--tk-fg); transition: background-color 0.15s; }
.actionrow:hover { background: var(--tk-surface-sunken); }
.actionrow svg { width: 1rem; height: 1rem; color: var(--tk-fg-subtle); flex-shrink: 0; }
.actionrow svg:last-child { margin-inline-start: auto; width: 0.875rem; height: 0.875rem; }

.mediarow { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; }
.mediarow + .mediarow { border-top: 1px solid var(--tk-line); }
.mediarow__body { min-width: 0; flex: 1; }
.mediarow__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--tk-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediarow__sub { font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mediarow__link { flex-shrink: 0; font-size: 0.75rem; font-weight: 600; color: var(--tk-primary-text); }
.mediarow__link:hover { text-decoration: underline; }

.inline-empty { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; font-size: 0.8125rem; color: var(--tk-fg-muted); }
.inline-empty svg { width: 1rem; height: 1rem; color: var(--tk-success-text, var(--tk-success)); }

/* Key/value details */
.kv { font-size: 0.8125rem; }
.kv__row { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.5rem; }
.kv__row + .kv__row { border-top: 1px solid var(--tk-line); }
.kv__key { flex-shrink: 0; width: 38%; max-width: 11rem; color: var(--tk-fg-muted); }
.kv__val { flex: 1; min-width: 0; color: var(--tk-fg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.kv__val.mono { font-size: 0.75rem; }
.kv--cols { display: grid; gap: 0 1.5rem; }
@media (min-width: 768px) { .kv--cols { grid-template-columns: 1fr 1fr; } .kv--cols .kv__row:nth-child(2) { border-top: 0; } }
.fcard__body > .kv { margin-block: -0.5rem; }

/* Activity timeline */
.timeline { position: relative; }
.timeline__item { position: relative; display: flex; gap: 0.75rem; padding-bottom: 1rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:not(:last-child)::before {
    content: ''; position: absolute; top: 1.75rem; bottom: 0.25rem; inset-inline-start: calc(0.75rem - 0.5px);
    width: 1px; background: var(--tk-line);
}
.timeline__icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--tk-surface-sunken); color: var(--tk-fg-muted);
    box-shadow: 0 0 0 3px var(--tk-surface);
}
.timeline__icon svg { width: 0.75rem; height: 0.75rem; }
/* tone-* comes earlier in the file, so restate it with higher specificity */
.timeline__icon.tone-primary { background: var(--tk-primary-soft); color: var(--tk-primary-text); }
.timeline__icon.tone-success { background: var(--tk-success-soft); color: var(--tk-success-text, var(--tk-success)); }
.timeline__icon.tone-info { background: var(--tk-info-soft); color: var(--tk-info-text, var(--tk-info)); }
.timeline__icon.tone-danger { background: var(--tk-danger-soft); color: var(--tk-danger-text, var(--tk-danger)); }
.timeline__icon.tone-warning { background: var(--tk-warning-soft); color: var(--tk-warning-text, var(--tk-warning)); }
.timeline__icon.tone-accent { background: var(--tk-accent-soft); color: var(--tk-accent); }
.timeline__body { min-width: 0; flex: 1; padding-top: 0.125rem; }
.timeline__title { font-size: 0.8125rem; color: var(--tk-fg); }
.timeline__title b, .timeline__title strong { font-weight: 500; }
.timeline__meta { margin-top: 0.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-subtle); }
.timeline__detail { margin-top: 0.375rem; padding: 0.375rem 0.625rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken); font-family: var(--tk-font-mono); font-size: 0.75rem; color: var(--tk-fg-muted); overflow-wrap: anywhere; }

/* ==========================================================================
   13. Alerts / callouts
   ========================================================================== */
.alert {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem;
    border: 1px solid; border-radius: var(--tk-radius-card); font-size: 0.875rem; line-height: 1.25rem;
}
.alert > svg { margin-top: 0.125rem; width: 1rem; height: 1rem; flex-shrink: 0; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: 600; }
.alert__title + .alert__text { margin-top: 0.125rem; opacity: 0.9; }
.alert a { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.alert__actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; margin-block: -0.25rem; }
.alert__actions .btn { text-decoration: none; }
@media (max-width: 639.98px) {
    .alert { flex-wrap: wrap; }
    .alert__body { flex-basis: calc(100% - 1.75rem); }
    .alert__actions { flex-basis: 100%; flex-wrap: wrap; margin-block: 0; padding-inline-start: 1.75rem; }
}
.alert__close { flex-shrink: 0; margin: -0.125rem -0.25rem 0 0; padding: 0.25rem; border-radius: var(--tk-radius-control); opacity: 0.7; }
.alert__close:hover { opacity: 1; background: color-mix(in oklab, currentColor 10%, transparent); }
.alert__close svg { width: 0.875rem; height: 0.875rem; }
.alert--info { border-color: color-mix(in oklab, var(--tk-info) 25%, transparent); background: var(--tk-info-soft); color: var(--tk-info-text, var(--tk-info)); }
.alert--success { border-color: color-mix(in oklab, var(--tk-success) 25%, transparent); background: var(--tk-success-soft); color: var(--tk-success-text, var(--tk-success)); }
.alert--warning { border-color: color-mix(in oklab, var(--tk-warning) 25%, transparent); background: var(--tk-warning-soft); color: var(--tk-warning-text, var(--tk-warning)); }
.alert--danger { border-color: color-mix(in oklab, var(--tk-danger) 25%, transparent); background: var(--tk-danger-soft); color: var(--tk-danger-text, var(--tk-danger)); }
.alert--neutral { border-color: var(--tk-line); background: var(--tk-surface-sunken); color: var(--tk-fg-muted); }
.alert--compact { padding: 0.625rem 0.75rem; gap: 0.625rem; font-size: 0.75rem; line-height: 1rem; }
.alert--compact > svg { margin-top: 0; width: 0.875rem; height: 0.875rem; }
.alert--compact.alert--info { border-color: color-mix(in oklab, var(--tk-info) 20%, transparent); }
.alert--compact.alert--success { border-color: color-mix(in oklab, var(--tk-success) 20%, transparent); }
.alert--compact.alert--warning { border-color: color-mix(in oklab, var(--tk-warning) 20%, transparent); }
.alert--compact.alert--danger { border-color: color-mix(in oklab, var(--tk-danger) 20%, transparent); }
.alert--compact .alert__text { opacity: 0.9; }

/* ==========================================================================
   14. Overlays: dialog, confirm, menu, popover, tooltip, toasts
   ========================================================================== */
.dialog:not([open]) { display: none; }
.dialog {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50; margin: 0; padding: 0;
    display: flex; flex-direction: column; width: calc(100vw - 2rem); max-width: 32rem; max-height: calc(100dvh - 2rem);
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-panel);
    background: var(--tk-surface-raised); color: var(--tk-fg); box-shadow: var(--tk-shadow-overlay); outline: none;
}
.dialog > form { display: flex; flex-direction: column; min-height: 0; }
.dialog--sm { max-width: 24rem; } .dialog--lg { max-width: 42rem; } .dialog--xl { max-width: 56rem; }
.dialog::backdrop, .confirm::backdrop { background: rgb(0 0 0 / 0.45); backdrop-filter: blur(2px); }
.dialog__head { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 3rem 1rem 1.25rem; border-bottom: 1px solid var(--tk-line); }
.dialog__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; color: var(--tk-fg); }
.dialog__desc { font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.dialog__body { min-height: 0; max-height: 65vh; overflow-y: auto; padding: 1rem 1.25rem; }
.dialog__body > * + * { margin-top: 0.75rem; }
.dialog__body .input, .dialog__body .select { max-width: none; }
.dialog__foot { display: flex; flex-direction: column-reverse; gap: 0.5rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--tk-line); }
@media (min-width: 640px) { .dialog__foot { flex-direction: row; justify-content: flex-end; } }
.dialog__foot-start { margin-inline-end: auto; }
.dialog__close {
    position: absolute; top: 1rem; inset-inline-end: 1rem; padding: 0.25rem; border-radius: var(--tk-radius-control);
    color: var(--tk-fg-subtle); transition: color 0.15s, background-color 0.15s;
}
.dialog__close svg { width: 1rem; height: 1rem; }
.dialog__close:hover { background: var(--tk-surface-sunken); color: var(--tk-fg); }
.dialog__text { font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }

.confirm:not([open]) { display: none; }
.confirm {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 90; margin: 0;
    width: calc(100vw - 2rem); max-width: 28rem; padding: 1.25rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-panel); background: var(--tk-surface-raised);
    color: var(--tk-fg); box-shadow: var(--tk-shadow-overlay);
}
.confirm__title { font-size: 1rem; line-height: 1.5rem; font-weight: 600; }
.confirm__desc { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.confirm__desc:empty { display: none; }
.confirm__actions { margin-top: 1.25rem; display: flex; flex-direction: column-reverse; gap: 0.5rem; }
@media (min-width: 640px) { .confirm__actions { flex-direction: row; justify-content: flex-end; } }

.dropdown { position: relative; display: inline-block; }
.menu {
    position: absolute; top: calc(100% + 6px); z-index: 50; min-width: 12rem; max-width: calc(100vw - 1rem); overflow: hidden; padding: 0.25rem 0;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface-raised);
    box-shadow: var(--tk-shadow-overlay); font-size: 0.8125rem; text-align: start;
}
.menu--end { inset-inline-end: 0; } .menu--start { inset-inline-start: 0; }
.menu.is-floating { position: fixed; top: 0; left: 0; inset-inline-end: auto; }
.menu form { display: contents; }
.menu__item {
    display: flex; width: 100%; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.625rem;
    border-radius: 0; cursor: pointer; user-select: none; text-align: start; white-space: nowrap;
    font-size: 0.8125rem; line-height: 1.25rem; font-weight: 400; color: var(--tk-fg); outline: none;
}
.menu__item svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--tk-fg-subtle); }
.menu__item:hover, .menu__item:focus-visible { background: var(--tk-primary-soft); }
.menu__item--danger { color: var(--tk-danger-text, var(--tk-danger)); }
.menu__item--danger:hover, .menu__item--danger:focus-visible { background: var(--tk-danger-soft); }
.menu__item[aria-disabled='true'], .menu__item:disabled { pointer-events: none; opacity: 0.5; }
.menu__item-aside { margin-inline-start: auto; padding-inline-start: 1rem; font-size: 0.75rem; color: var(--tk-fg-subtle); }
.menu__label { padding: 0.375rem 0.625rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase; color: var(--tk-fg-subtle); overflow: hidden; text-overflow: ellipsis; }
.menu__sep { height: 1px; margin-block: 0.25rem; background: var(--tk-line); }
.menu__head { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--tk-line); margin: -0.25rem 0 0.25rem; }
.menu__head-name { font-size: 0.8125rem; font-weight: 500; color: var(--tk-fg); }
.menu__head-sub { font-size: 0.75rem; color: var(--tk-fg-muted); overflow: hidden; text-overflow: ellipsis; }
.popover { width: 18rem; padding: 0.75rem; }

.tooltip {
    position: fixed; top: 0; left: 0; z-index: 110; pointer-events: none; max-width: 18rem;
    padding: 0.375rem 0.625rem; border-radius: var(--tk-radius-control);
    background: var(--tk-surface-inverse); color: var(--tk-fg-inverse);
    font-size: 0.75rem; line-height: 1rem; font-weight: 500; box-shadow: var(--tk-shadow-overlay);
}
.tooltip::after { content: ''; position: absolute; border: 4px solid transparent; }
.tooltip[data-side='top']::after { top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-top-color: var(--tk-surface-inverse); border-bottom: 0; }
.tooltip[data-side='bottom']::after { bottom: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border-bottom-color: var(--tk-surface-inverse); border-top: 0; }
.tooltip[data-side='right']::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--tk-surface-inverse); border-left: 0; }
.tooltip[data-side='left']::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--tk-surface-inverse); border-right: 0; }

/* CSS-only tooltip fallback: data-tip="…" (no JS, not for inputs/imgs) */
[data-tip] { position: relative; }
[data-tip]::after, [data-tip]::before { position: absolute; left: 50%; z-index: 50; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0s, visibility 0s; }
[data-tip]::after {
    content: attr(data-tip); bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap;
    padding: 0.375rem 0.625rem; border-radius: var(--tk-radius-control); background: var(--tk-surface-inverse); color: var(--tk-fg-inverse);
    font-size: 0.75rem; line-height: 1rem; font-weight: 500; box-shadow: var(--tk-shadow-overlay);
}
[data-tip]::before { content: ''; bottom: calc(100% + 2px); transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--tk-surface-inverse); border-bottom: 0; }
[data-tip]:hover::after, [data-tip]:hover::before, [data-tip]:focus-visible::after, [data-tip]:focus-visible::before { opacity: 1; visibility: visible; transition-delay: 250ms; }

.toasts {
    position: fixed; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem;
    width: 100%; max-width: 24rem; padding: 1rem; pointer-events: none;
}
.toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 1rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface-raised);
    box-shadow: var(--tk-shadow-overlay); touch-action: pan-y;
    animation: hk-toast-in 150ms var(--tk-ease);
}
.toast.is-leaving { opacity: 0; transform: translateX(1.5rem); transition: opacity 150ms, transform 150ms; }
.toast__icon { margin-top: 0.125rem; width: 18px; height: 18px; flex-shrink: 0; }
.toast--success .toast__icon { color: var(--tk-success-text, var(--tk-success)); }
.toast--error .toast__icon, .toast--danger .toast__icon { color: var(--tk-danger-text, var(--tk-danger)); }
.toast--warning .toast__icon { color: var(--tk-warning-text, var(--tk-warning)); }
.toast--info .toast__icon { color: var(--tk-info-text, var(--tk-info)); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--tk-fg); overflow-wrap: anywhere; }
.toast__desc { margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toast__link { cursor: pointer; }
.toast__close { margin: -0.25rem; flex-shrink: 0; padding: 0.25rem; border-radius: var(--tk-radius-control); color: var(--tk-fg-subtle); transition: color 0.15s, background-color 0.15s; }
.toast__close svg { width: 1rem; height: 1rem; }
.toast__close:hover { background: var(--tk-surface-sunken); color: var(--tk-fg); }

/* ==========================================================================
   15. Feedback: avatar, skeleton, progress, empty state, spinner
   ========================================================================== */
.avatar { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar__img {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px;
    background: var(--tk-surface-sunken); font-weight: 600; color: var(--tk-fg-muted); user-select: none;
    width: 2rem; height: 2rem; font-size: 0.75rem; line-height: 1rem;
}
.dark .avatar__img { box-shadow: inset 0 0 0 1px var(--tk-line); }
.sb__user .avatar__img { background: color-mix(in oklab, var(--tk-fg) 9%, var(--tk-nav-panel-bg)); }
.avatar__img img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs .avatar__img { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar--sm .avatar__img { width: 2rem; height: 2rem; font-size: 0.75rem; line-height: 1rem; }
.avatar--md .avatar__img { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.avatar--lg .avatar__img { width: 3rem; height: 3rem; font-size: 1rem; line-height: 1.5rem; }
.avatar--xl .avatar__img { width: 5rem; height: 5rem; font-size: 1.5rem; line-height: 2rem; }
.avatar__online { position: absolute; right: 0; bottom: 0; width: 0.625rem; height: 0.625rem; border-radius: 999px; border: 2px solid var(--tk-surface); background: var(--tk-success); }

.skeleton { display: block; border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken); animation: tk-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.dark .skeleton { background: var(--tk-line); }
.skeleton--line { height: 0.75rem; }
.skeleton--row { height: 2rem; }

.progress { position: relative; height: 0.5rem; width: 100%; overflow: hidden; border-radius: 999px; background: var(--tk-surface-sunken); }
.dark .progress { background: var(--tk-line); }
.progress--sm { height: 0.25rem; }
.progress__bar { height: 100%; width: 0; border-radius: 999px; background: var(--tk-primary); transition: width 500ms var(--tk-ease); }
.dark .progress__bar { background: color-mix(in oklab, var(--tk-primary) 70%, #fff); }
.progress__bar.is-success { background: var(--tk-success); }
.progress__bar.is-warning { background: var(--tk-warning); }
.progress__bar.is-danger { background: var(--tk-danger); }
.progress__bar.is-info { background: var(--tk-info); }
.progress--indeterminate .progress__bar { width: 35% !important; animation: hk-indeterminate 1.3s var(--tk-ease) infinite; }
.progress--striped .progress__bar {
    background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25%, transparent 50%, rgb(255 255 255 / 0.18) 50%, rgb(255 255 255 / 0.18) 75%, transparent 75%, transparent);
    background-size: 0.75rem 0.75rem; animation: hk-stripes 0.8s linear infinite;
}
.progressfield { min-width: 0; }
.progressfield__meta { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.progressfield__label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tk-fg); font-weight: 500; }
.progressfield__value { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.progressfield__caption { margin-top: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.progressfield--inline .progressfield__meta { margin-bottom: 0.25rem; }
.progressfield--inline { min-width: 7rem; }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem 1.5rem; text-align: center; }
.empty--compact { padding: 2rem 1.5rem; }
.empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--tk-radius-card); background: var(--tk-surface-sunken); color: var(--tk-fg-subtle); }
.dark .empty__icon { border: 1px solid var(--tk-line); }
.empty__icon svg { width: 1.25rem; height: 1.25rem; }
.empty__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--tk-fg); }
.empty__desc { margin: 0.25rem auto 0; max-width: 24rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

.spinner { width: 1rem; height: 1rem; animation: hk-spin 0.8s linear infinite; color: var(--tk-fg-subtle); }

@keyframes tk-pulse { 50% { opacity: 0.5; } }
@keyframes hk-spin { to { transform: rotate(360deg); } }
@keyframes hk-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes hk-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@keyframes hk-stripes { to { background-position: 0.75rem 0; } }
@keyframes hk-toast-in { from { opacity: 0; transform: translateY(0.5rem); } }
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   16. Media & misc: code block, video thumbnail, player frame
   ========================================================================== */
.codeblock { position: relative; }
.codeblock__caption { margin-bottom: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.codeblock__caption b { font-weight: 500; color: var(--tk-fg); }
.codeblock__caption code { font-size: 0.75rem; }
.codeblock__pre {
    overflow-x: auto; padding: 0.625rem 2.75rem 0.625rem 0.75rem;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken);
    font-family: var(--tk-font-mono); font-size: 0.75rem; line-height: 1.625; color: var(--tk-fg); white-space: pre;
}
.codeblock--wrap .codeblock__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.codeblock__copy { position: absolute; bottom: auto; top: 0.25rem; inset-inline-end: 0.25rem; }
.codeblock__caption + .codeblock__pre + .codeblock__copy { top: calc(1rem + 0.375rem + 0.25rem); }
.is-copied svg { color: var(--tk-success-text, var(--tk-success)); }

.thumb {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 4rem; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-sunken); color: var(--tk-fg-subtle);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 1rem; height: 1rem; }
.thumb__time {
    position: absolute; inset-inline-end: 2px; bottom: 2px; padding: 0 0.1875rem; border-radius: 2px;
    background: rgb(0 0 0 / 0.72); color: #fff; font-family: var(--tk-font-mono); font-size: 0.5625rem; line-height: 0.875rem;
}
.thumb--md { width: 7rem; }
.thumb--lg { width: 12rem; }

.player-frame { overflow: hidden; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: #000; aspect-ratio: 16 / 9; }
.player-frame > video, .player-frame > iframe, .player-frame > .plyr, .player-frame > .video-js { display: block; width: 100%; height: 100%; border: 0; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch { width: 6rem; }
.swatch__chip { height: 2.5rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); }
.swatch__name { margin-top: 0.25rem; font-size: 0.6875rem; color: var(--tk-fg-muted); font-family: var(--tk-font-mono); }

/* ==========================================================================
   17. Auth layout and error pages
   ========================================================================== */
.auth { display: flex; flex-direction: column; min-height: 100dvh; background: var(--tk-canvas); }
.auth__head { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 72rem; margin-inline: auto; padding: 1.25rem 1rem; }
@media (min-width: 640px) { .auth__head { padding-inline: 1.5rem; } }
.auth__brand { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tk-fg); border-radius: var(--tk-radius-control); }
.auth__brand img { width: 2rem; height: 2rem; border-radius: var(--tk-radius-control); }
.auth__back { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--tk-fg-muted); transition: color 0.15s; }
.auth__back:hover { color: var(--tk-fg); }
.auth__back svg { width: 1rem; height: 1rem; }
.auth__tools { margin-inline-start: auto; display: flex; align-items: center; gap: 0.25rem; }
.auth__back + .auth__tools { margin-inline-start: 0.5rem; }
.auth__main { display: flex; flex: 1; align-items: flex-start; justify-content: center; padding: 2rem 1rem 3rem; }
@media (min-width: 640px) { .auth__main { padding-inline: 1.5rem; padding-top: 3rem; } }
.auth__box { width: 100%; max-width: 28rem; }
.auth__heading { margin-bottom: 1.5rem; text-align: center; }
.auth__title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -0.025em; color: var(--tk-fg); }
.auth__desc { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.auth__card { padding: 1.5rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-card); background: var(--tk-surface); box-shadow: var(--tk-shadow-raised); }
.auth__card > * + * { margin-top: 1rem; }
.auth__card .field > * + * { margin-top: 0.375rem; }
.auth__card .field__label { font-size: 0.875rem; line-height: 1.25rem; }
.auth__card .field__req { display: none; }
.auth__card .field__error { font-size: 0.875rem; line-height: 1.25rem; }
.auth__card .input {
    max-width: none; height: 2.5rem; padding-inline: 0.75rem; font-size: 0.875rem; background: var(--tk-surface);
}
.auth__card .input:focus { box-shadow: 0 0 0 2px color-mix(in oklab, var(--tk-focus) 25%, transparent); }
.auth__card .input--code { height: 3rem; font-size: 1.125rem; letter-spacing: 0.5em; text-align: center; font-family: var(--tk-font-mono); }
.auth__card .input--recovery { letter-spacing: 0.08em; }
.auth__card .check { font-size: 0.875rem; }
.auth__card .alert { font-size: 0.8125rem; }
.auth__link { font-size: 0.75rem; font-weight: 500; color: var(--tk-primary-text); }
.auth__link:hover { text-decoration: underline; }
.auth__alt { text-align: center; font-size: 0.875rem; }
.auth__alt button, .auth__alt a { color: var(--tk-primary-text); }
.auth__alt button:hover, .auth__alt a:hover { text-decoration: underline; }
.auth__foot { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.auth__foot a { font-weight: 600; color: var(--tk-primary-text); }
.auth__foot a:hover { text-decoration: underline; }
.auth__legal { padding: 1rem; text-align: center; font-size: 0.75rem; color: var(--tk-fg-subtle); }
.auth__demo { max-width: 28rem; margin: 0 auto 1rem; }

.errorbox { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.errorbox__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--tk-radius-card); }
.errorbox__icon svg { width: 1.5rem; height: 1.5rem; }
.errorbox__code { font-family: var(--tk-font-mono); font-size: 0.6875rem; color: var(--tk-fg-subtle); letter-spacing: 0.05em; }
.errorbox__title { margin-top: 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; color: var(--tk-fg); }
.errorbox__text { margin-top: 0.25rem; }
.errorbox__text { font-size: 0.875rem; line-height: 1.25rem; color: var(--tk-fg-muted); }
.errorbox__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.errorbox__ref { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--tk-fg-muted); }

/* Style guide helpers (dev/styleguide only) */
.sg-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.75rem; }
.sg-nav a { color: var(--tk-primary-text); }
.sg-nav a:hover { text-decoration: underline; }
.sg-block { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sg-label { width: 100%; font-size: 0.6875rem; color: var(--tk-fg-subtle); }

/* ---- Views chart (Ui::viewsChart) ---- */
.lib-chart__sum { margin-bottom: 0.75rem; font-size: 0.8125rem; color: var(--tk-fg-muted); }
.lib-chart__box { display: flex; gap: 0.5rem; height: 11rem; }
.lib-chart__y { display: flex; flex-direction: column; justify-content: space-between; width: 2.25rem; margin-block: -0.375rem; text-align: end; font-size: 0.6875rem; line-height: 0.75rem; color: var(--tk-fg-subtle); font-variant-numeric: tabular-nums; }
.lib-chart__plot { position: relative; flex: 1; min-width: 0; color: var(--tk-chart-1); border-radius: 2px; }
.lib-chart__plot:focus-visible { outline-offset: 4px; }
.lib-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lib-chart__grid { fill: none; stroke: var(--tk-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lib-chart__area { fill: currentColor; opacity: 0.1; }
.lib-chart__line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lib-chart__end, .lib-chart__dot { position: absolute; left: 100%; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 2px var(--tk-surface); transform: translate(-50%, -50%); pointer-events: none; }
.lib-chart__x { display: flex; justify-content: space-between; margin-top: 0.375rem; padding-inline-start: 2.75rem; font-size: 0.6875rem; color: var(--tk-fg-subtle); }
.lib-chart__cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--tk-line-strong); pointer-events: none; }
.lib-chart__tip { position: absolute; top: -0.5rem; z-index: 2; padding: 0.375rem 0.5rem; border: 1px solid var(--tk-line); border-radius: var(--tk-radius-control); background: var(--tk-surface-raised); box-shadow: var(--tk-shadow-overlay); white-space: nowrap; pointer-events: none; font-size: 0.75rem; line-height: 1rem; color: var(--tk-fg-muted); }
.lib-chart__tip b { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--tk-fg); font-variant-numeric: tabular-nums; }