/* ─────────────────────────────────────────────────────────────────────────
   GREEN SHED ADMIN — gs-admin.css
   A hand-written, dependency-free stylesheet for the Green Shed admin panel.
   All public classes are namespaced with the `gs-` prefix.

   Sections
     1. Tokens (light)            7.  Forms
     2. Theme: dark               8.  Buttons
     3. Density                   9.  Tables
     4. Reset & base             10.  Cards / Stats
     5. Layout shell             11.  Tags / Badges / Chips
     6. Typography               12.  Alerts / Toasts
                                 13.  Tabs / Segmented
                                 14.  Modal
                                 15.  Misc (kbd, divider, dropzone)
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Tokens — light (default) ─────────────────────────────────────────── */
:root {
    /* Surfaces — warm paper */
    --gs-bg: oklch(95.5% 0.012 95);
    --gs-surface: oklch(98.5% 0.008 95);
    --gs-surface-2: oklch(92% 0.014 100);
    --gs-surface-sunk: oklch(89% 0.016 100);

    /* Ink — deep forest */
    --gs-text: oklch(22% 0.025 150);
    --gs-text-muted: oklch(45% 0.02 145);
    --gs-text-subtle: oklch(58% 0.015 140);
    --gs-text-onfill: oklch(96% 0.01 95);

    /* Lines */
    --gs-border: oklch(85% 0.018 130);
    --gs-border-strong: oklch(72% 0.022 135);
    --gs-focus-ring: oklch(55% 0.1 145 / 0.45);

    /* Brand — moss */
    --gs-primary: oklch(38% 0.06 150);
    --gs-primary-hover: oklch(32% 0.06 150);
    --gs-primary-soft: oklch(92% 0.03 145);

    /* Accent — copper, used sparingly */
    --gs-accent: oklch(58% 0.1 55);
    --gs-accent-soft: oklch(93% 0.03 70);

    /* Status */
    --gs-danger: oklch(52% 0.15 25);
    --gs-danger-soft: oklch(94% 0.03 25);
    --gs-warning: oklch(60% 0.13 75);
    --gs-warning-soft: oklch(95% 0.04 80);
    --gs-success: oklch(50% 0.1 145);
    --gs-success-soft: oklch(93% 0.04 145);

    /* Type */
    --gs-font-display:
        "Ritual", "Iowan Old Style", "Charter", Georgia, ui-serif, serif;
    --gs-font-ui:
        ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
        Arial, sans-serif;
    --gs-font-mono:
        "Ritual Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Radius */
    --gs-r-xs: 3px;
    --gs-r-sm: 5px;
    --gs-r-md: 7px;
    --gs-r-lg: 12px;
    --gs-r-pill: 999px;

    /* Shadow */
    --gs-shadow-sm:
        0 1px 0 rgba(20, 32, 22, 0.04), 0 1px 2px rgba(20, 32, 22, 0.06);
    --gs-shadow-md:
        0 1px 0 rgba(20, 32, 22, 0.04), 0 6px 18px -6px rgba(20, 32, 22, 0.18);
    --gs-shadow-lg:
        0 1px 0 rgba(20, 32, 22, 0.04), 0 24px 60px -20px rgba(20, 32, 22, 0.35);

    /* Density (comfortable default — overridden in §3) */
    --gs-control-h: 38px;
    --gs-pad-x: 14px;
    --gs-pad-y: 9px;
    --gs-row-gap: 16px;
    --gs-section-gap: 28px;
    --gs-text-size: 14.5px;
    --gs-line: 1.45;

    color-scheme: light;
}

/* 2. Theme — dark ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --gs-bg: oklch(16% 0.018 150);
    --gs-surface: oklch(20% 0.022 150);
    --gs-surface-2: oklch(24% 0.024 148);
    --gs-surface-sunk: oklch(13% 0.018 150);

    --gs-text: oklch(92% 0.012 95);
    --gs-text-muted: oklch(70% 0.018 130);
    --gs-text-subtle: oklch(55% 0.015 135);
    --gs-text-onfill: oklch(15% 0.02 150);

    --gs-border: oklch(28% 0.022 145);
    --gs-border-strong: oklch(40% 0.028 142);
    --gs-focus-ring: oklch(75% 0.09 140 / 0.55);

    --gs-primary: oklch(74% 0.085 140);
    --gs-primary-hover: oklch(80% 0.085 140);
    --gs-primary-soft: oklch(28% 0.04 145);

    --gs-accent: oklch(74% 0.1 70);
    --gs-accent-soft: oklch(28% 0.04 65);

    --gs-danger: oklch(72% 0.15 25);
    --gs-danger-soft: oklch(28% 0.06 25);
    --gs-warning: oklch(78% 0.13 80);
    --gs-warning-soft: oklch(28% 0.06 75);
    --gs-success: oklch(74% 0.09 145);
    --gs-success-soft: oklch(26% 0.045 145);

    --gs-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
    --gs-shadow-md:
        0 1px 0 rgba(0, 0, 0, 0.35), 0 8px 22px -6px rgba(0, 0, 0, 0.55);
    --gs-shadow-lg:
        0 1px 0 rgba(0, 0, 0, 0.35), 0 30px 70px -20px rgba(0, 0, 0, 0.75);

    color-scheme: dark;
}

/* 3. Density ──────────────────────────────────────────────────────────── */
[data-density="compact"] {
    --gs-control-h: 32px;
    --gs-pad-x: 11px;
    --gs-pad-y: 6px;
    --gs-row-gap: 12px;
    --gs-section-gap: 22px;
    --gs-text-size: 13.5px;
}
[data-density="comfortable"] {
    --gs-control-h: 42px;
    --gs-pad-x: 16px;
    --gs-pad-y: 11px;
    --gs-row-gap: 18px;
    --gs-section-gap: 32px;
    --gs-text-size: 15px;
}

/* 4. Reset & base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.gs-app {
    background: var(--gs-bg);
    color: var(--gs-text);
    font-family: var(--gs-font-ui);
    font-size: var(--gs-text-size);
    line-height: var(--gs-line);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.gs-app a {
    color: var(--gs-primary);
    text-decoration: none;
    text-underline-offset: 2px;
}
.gs-app a:hover {
    text-decoration: underline;
}

.gs-app img {
    max-width: 100%;
    height: auto;
}

.gs-app ::selection {
    background: var(--gs-primary-soft);
    color: var(--gs-text);
}

/* 5. Layout shell ─────────────────────────────────────────────────────── */
.gs-shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}

@media (max-width: 760px) {
    .gs-shell {
        grid-template-columns: 1fr;
    }
}

.gs-sidebar {
    background: var(--gs-surface-sunk);
    border-right: 1px solid var(--gs-border);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 760px) {
    .gs-sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--gs-border);
    }
}
.gs-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
    color: var(--gs-text);
}
.gs-sidebar__mark {
    width: 28px;
    height: 28px;
    border-radius: var(--gs-r-sm);
    background: var(--gs-primary);
    color: var(--gs-text-onfill);
    display: grid;
    place-items: center;
    font-family: var(--gs-font-display);
    font-weight: 600;
    font-size: 16px;
}
.gs-sidebar__title {
    font-family: var(--gs-font-display);
    font-size: 18px;
    letter-spacing: 0.005em;
}
.gs-sidebar__group {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-subtle);
    padding: 14px 8px 6px;
}
.gs-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--gs-r-sm);
    color: var(--gs-text-muted);
    cursor: default;
    font-size: 13.5px;
    user-select: none;
}
.gs-nav__item:hover {
    background: var(--gs-surface-2);
    color: var(--gs-text);
    text-decoration: none;
}
.gs-nav__item.is-active {
    background: var(--gs-primary-soft);
    color: var(--gs-primary);
    font-weight: 500;
}
[data-theme="dark"] .gs-nav__item.is-active {
    color: var(--gs-text);
}
.gs-nav__count {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--gs-text-subtle);
    font-variant-numeric: tabular-nums;
}

.gs-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gs-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--gs-border);
    background: color-mix(in oklab, var(--gs-bg) 80%, transparent);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.gs-topbar__crumbs {
    font-size: 13px;
    color: var(--gs-text-muted);
}
.gs-topbar__crumbs strong {
    color: var(--gs-text);
    font-weight: 500;
}
.gs-topbar__search {
    flex: 1;
    max-width: 360px;
    margin-left: auto;
}
.gs-topbar__actions {
    display: flex;
    gap: 8px;
}

.gs-page {
    padding: 28px 32px 64px;
    max-width: 1240px;
    width: 100%;
}

@media (max-width: 560px) {
    .gs-page {
        padding: 22px 18px 48px;
    }
}

.gs-page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--gs-border);
    padding-bottom: 20px;
}
.gs-page__head .gs-eyebrow {
    margin-bottom: 6px;
}

/* 6. Typography ───────────────────────────────────────────────────────── */
.gs-h1,
.gs-h2,
.gs-h3 {
    font-family: var(--gs-font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--gs-text);
}
.gs-h1 {
    font-size: 34px;
    line-height: 1.1;
}
.gs-h2 {
    font-size: 22px;
    line-height: 1.2;
}
.gs-h3 {
    font-size: 16px;
    line-height: 1.3;
}

.gs-eyebrow {
    font-family: var(--gs-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gs-text-subtle);
}
.gs-lede {
    color: var(--gs-text-muted);
    font-size: 15px;
    max-width: 60ch;
    margin: 6px 0 0;
}
.gs-mono {
    font-family: var(--gs-font-mono);
    font-size: 0.92em;
}

.gs-section {
    margin-top: var(--gs-section-gap);
}
.gs-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

/* 7. Forms ────────────────────────────────────────────────────────────── */
.gs-form {
    display: flex;
    flex-direction: column;
    gap: var(--gs-row-gap);
}
.gs-form__row {
    display: grid;
    gap: var(--gs-row-gap);
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
    .gs-form__row {
        grid-template-columns: 1fr;
    }
}

.gs-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.gs-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gs-text);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.gs-label__optional {
    font-weight: 400;
    font-size: 12px;
    color: var(--gs-text-subtle);
}
.gs-help {
    font-size: 12.5px;
    color: var(--gs-text-muted);
}
.gs-error {
    font-size: 12.5px;
    color: var(--gs-danger);
    display: flex;
    gap: 6px;
    align-items: center;
}

/* common control surface */
.gs-input,
.gs-textarea,
.gs-select {
    font: inherit;
    font-size: 14px;
    color: var(--gs-text);
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-md);
    padding: var(--gs-pad-y) var(--gs-pad-x);
    width: 100%;
    transition:
        border-color 0.12s,
        box-shadow 0.12s,
        background 0.12s;
    appearance: none;
    -webkit-appearance: none;
}
.gs-input,
.gs-select {
    height: var(--gs-control-h);
}
.gs-textarea {
    min-height: calc(var(--gs-control-h) * 2.4);
    resize: vertical;
    line-height: 1.5;
    font-family: var(--gs-font-ui);
}
/* Long-form prose textarea — for the body of a post.
   Display serif, generous leading, comfortable measure. */
.gs-textarea--prose {
    font-family: var(--gs-font-ui);
    font-weight: 400;
    font-size: 16.5px;
    line-height: 1.65;
    min-height: 360px;
    padding: 18px 20px;
}
.gs-textarea--mono {
    font-family: var(--gs-font-mono);
    font-size: 13px;
    line-height: 1.55;
}
.gs-input::placeholder,
.gs-textarea::placeholder {
    color: var(--gs-text-subtle);
}
.gs-input:hover,
.gs-textarea:hover,
.gs-select:hover {
    border-color: var(--gs-border-strong);
}
.gs-input:focus,
.gs-textarea:focus,
.gs-select:focus {
    outline: none;
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}
.gs-input:disabled,
.gs-textarea:disabled,
.gs-select:disabled {
    background: var(--gs-surface-sunk);
    color: var(--gs-text-subtle);
    cursor: not-allowed;
}

.gs-field.is-invalid .gs-input,
.gs-field.is-invalid .gs-textarea,
.gs-field.is-invalid .gs-select {
    border-color: var(--gs-danger);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--gs-danger) 30%, transparent);
}

/* select chevron */
.gs-select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--gs-text-muted) 50%),
        linear-gradient(-45deg, transparent 50%, var(--gs-text-muted) 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

/* input affixes */
.gs-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-md);
    background: var(--gs-surface);
    overflow: hidden;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.gs-input-group:focus-within {
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}
.gs-input-group .gs-input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.gs-input-group .gs-input:focus {
    box-shadow: none;
}
.gs-input-group__addon {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--gs-surface-2);
    color: var(--gs-text-muted);
    font-size: 13px;
    border-right: 1px solid var(--gs-border);
}
.gs-input-group__addon--end {
    border-right: 0;
    border-left: 1px solid var(--gs-border);
}

/* checkbox & radio */
.gs-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: default;
    user-select: none;
    font-size: 14px;
    color: var(--gs-text);
    line-height: 1.4;
}
.gs-check input[type="checkbox"],
.gs-check input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    flex-shrink: 0;
    border: 1px solid var(--gs-border-strong);
    background: var(--gs-surface);
    display: grid;
    place-items: center;
    cursor: default;
    transition:
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.12s;
}
.gs-check input[type="checkbox"] {
    border-radius: var(--gs-r-xs);
}
.gs-check input[type="radio"] {
    border-radius: 50%;
}
.gs-check input:hover {
    border-color: var(--gs-primary);
}
.gs-check input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}
.gs-check input:checked {
    background: var(--gs-primary);
    border-color: var(--gs-primary);
}
.gs-check input[type="checkbox"]:checked::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--gs-text-onfill);
    border-bottom: 2px solid var(--gs-text-onfill);
    transform: rotate(-45deg) translate(1px, -1px);
}
.gs-check input[type="radio"]:checked::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gs-text-onfill);
}
.gs-check__hint {
    display: block;
    font-size: 12.5px;
    color: var(--gs-text-muted);
    margin-top: 2px;
}

/* switch */
.gs-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: default;
    user-select: none;
    font-size: 14px;
}
.gs-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.gs-switch__track {
    width: 36px;
    height: 20px;
    background: var(--gs-surface-sunk);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-r-pill);
    position: relative;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.gs-switch__track::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background: var(--gs-surface);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s;
}
.gs-switch input:checked + .gs-switch__track {
    background: var(--gs-primary);
    border-color: var(--gs-primary);
}
.gs-switch input:checked + .gs-switch__track::after {
    transform: translateX(16px);
    background: var(--gs-text-onfill);
}
.gs-switch input:focus-visible + .gs-switch__track {
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}

/* file / dropzone */
.gs-dropzone {
    border: 1.5px dashed var(--gs-border-strong);
    border-radius: var(--gs-r-lg);
    background: var(--gs-surface);
    padding: 28px 20px;
    text-align: center;
    color: var(--gs-text-muted);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.gs-dropzone:hover,
.gs-dropzone.is-dragover,
.gs-dropzone.drag-over {
    background: var(--gs-primary-soft);
    border-color: var(--gs-primary);
    color: var(--gs-text);
}
.gs-dropzone__title {
    font-family: var(--gs-font-display);
    font-size: 16px;
    color: var(--gs-text);
}

/* tag input */
.gs-tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: var(--gs-control-h);
    padding: 6px 8px;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-md);
}
.gs-tag-input:focus-within {
    border-color: var(--gs-primary);
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}
.gs-tag-input input {
    flex: 1;
    min-width: 100px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--gs-text);
    padding: 4px 4px;
}

/* fieldset look */
.gs-fieldset {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-md);
    padding: 16px 18px 18px;
    background: var(--gs-surface);
}
.gs-fieldset > legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-subtle);
}

/* 8. Buttons ──────────────────────────────────────────────────────────── */
.gs-btn {
    --_bg: var(--gs-surface);
    --_bg-hover: var(--gs-surface-2);
    --_color: var(--gs-text);
    --_border: var(--gs-border-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--gs-control-h);
    padding: 0 calc(var(--gs-pad-x) + 2px);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--_color);
    background: var(--_bg);
    border: 1px solid var(--_border);
    border-radius: var(--gs-r-md);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
        background 0.12s,
        border-color 0.12s,
        box-shadow 0.12s,
        color 0.12s;
    text-decoration: none;
}
.gs-btn:hover {
    background: var(--_bg-hover);
}
.gs-app a.gs-btn {
    color: var(--_color);
}
.gs-btn:active {
    transform: translateY(0.5px);
}
.gs-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gs-focus-ring);
}
.gs-btn:disabled,
.gs-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.gs-btn--primary {
    --_bg: var(--gs-primary);
    --_bg-hover: var(--gs-primary-hover);
    --_color: var(--gs-text-onfill);
    --_border: transparent;
}
.gs-btn--ghost {
    --_bg: transparent;
    --_bg-hover: var(--gs-surface-2);
    --_border: transparent;
    --_color: var(--gs-text-muted);
}
.gs-btn--danger {
    --_bg: transparent;
    --_bg-hover: var(--gs-danger-soft);
    --_color: var(--gs-danger);
    --_border: color-mix(in oklab, var(--gs-danger) 35%, var(--gs-border));
}
.gs-btn--accent {
    --_bg: var(--gs-accent);
    --_bg-hover: color-mix(in oklab, var(--gs-accent) 85%, black);
    --_color: var(--gs-text-onfill);
    --_border: transparent;
}
.gs-btn--sm {
    height: calc(var(--gs-control-h) - 8px);
    font-size: 12.5px;
    padding: 0 10px;
}
.gs-btn--lg {
    height: calc(var(--gs-control-h) + 6px);
    font-size: 14.5px;
    padding: 0 18px;
}

.gs-btn--icon {
    width: var(--gs-control-h);
    padding: 0;
}

.gs-btn-group {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
}
.gs-btn-group form {
    margin: 0;
}

/* 9. Tables ───────────────────────────────────────────────────────────── */
.gs-table-wrap {
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-lg);
    background: var(--gs-surface);
    overflow: hidden;
    box-shadow: var(--gs-shadow-sm);
}
@media (max-width: 760px) {
    .gs-table-wrap {
        overflow-x: auto;
    }
}
.gs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.gs-table thead th {
    text-align: left;
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-subtle);
    padding: 12px 16px;
    background: var(--gs-surface-2);
    border-bottom: 1px solid var(--gs-border);
    white-space: nowrap;
}
.gs-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gs-border);
    color: var(--gs-text);
    vertical-align: middle;
}
.gs-table tbody tr:last-child td {
    border-bottom: 0;
}
.gs-table tbody tr:hover td {
    background: color-mix(in oklab, var(--gs-primary-soft) 35%, transparent);
}
.gs-table__title {
    font-weight: 700;
    color: var(--gs-text);
}
.gs-table__sub {
    display: block;
    color: var(--gs-text-subtle);
    font-size: 12.5px;
    margin-top: 2px;
}
.gs-table__num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.gs-table__actions {
    text-align: right;
    white-space: nowrap;
}
.gs-table__sort {
    cursor: default;
}
.gs-table__sort::after {
    content: " ↕";
    color: var(--gs-text-subtle);
    font-size: 10px;
}
.gs-table__sort.is-asc::after {
    content: " ↑";
    color: var(--gs-text);
}
.gs-table__sort.is-desc::after {
    content: " ↓";
    color: var(--gs-text);
}

/* 10. Cards / Stats ───────────────────────────────────────────────────── */
.gs-card {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-lg);
    padding: 20px;
    box-shadow: var(--gs-shadow-sm);
}
.gs-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.gs-card__title {
    font-family: var(--gs-font-display);
    font-size: 17px;
    margin: 0;
    color: var(--gs-text);
}
.gs-card__sub {
    font-size: 12.5px;
    color: var(--gs-text-subtle);
    margin: 2px 0 0;
}

.gs-stat {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-lg);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.gs-stat__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-subtle);
}
.gs-stat__value {
    font-family: var(--gs-font-display);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--gs-text);
}
.gs-stat__delta {
    font-size: 12.5px;
    color: var(--gs-text-muted);
}
.gs-stat__delta--up {
    color: var(--gs-success);
}
.gs-stat__delta--down {
    color: var(--gs-danger);
}

.gs-grid {
    display: grid;
    gap: 16px;
}
.gs-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
.gs-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 880px) {
    .gs-grid--3,
    .gs-grid--4 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .gs-grid--3,
    .gs-grid--4 {
        grid-template-columns: 1fr;
    }
}

/* 11. Tags / Badges / Chips ───────────────────────────────────────────── */
.gs-tag,
.gs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 3px 9px;
    border-radius: var(--gs-r-pill);
    background: var(--gs-surface-2);
    color: var(--gs-text-muted);
    border: 1px solid var(--gs-border);
    white-space: nowrap;
}
.gs-tag--primary {
    background: var(--gs-primary-soft);
    color: var(--gs-primary);
    border-color: transparent;
}
.gs-tag--accent {
    background: var(--gs-accent-soft);
    color: var(--gs-accent);
    border-color: transparent;
}
.gs-tag--success {
    background: var(--gs-success-soft);
    color: var(--gs-success);
    border-color: transparent;
}
.gs-tag--warning {
    background: var(--gs-warning-soft);
    color: var(--gs-warning);
    border-color: transparent;
}
.gs-tag--danger {
    background: var(--gs-danger-soft);
    color: var(--gs-danger);
    border-color: transparent;
}

[data-theme="dark"] .gs-tag--primary,
[data-theme="dark"] .gs-tag--accent,
[data-theme="dark"] .gs-tag--success,
[data-theme="dark"] .gs-tag--warning,
[data-theme="dark"] .gs-tag--danger {
    color: var(--gs-text);
}

.gs-tag__x {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.55;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}
.gs-tag__x:hover {
    opacity: 1;
}

.gs-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gs-text-subtle);
}
.gs-dot--success {
    background: var(--gs-success);
}
.gs-dot--warning {
    background: var(--gs-warning);
}
.gs-dot--danger {
    background: var(--gs-danger);
}

/* 12. Alerts ──────────────────────────────────────────────────────────── */
.gs-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--gs-r-md);
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border);
    color: var(--gs-text);
    font-size: 13.5px;
    margin-bottom: 16px;
}
.gs-alert__icon {
    font-family: var(--gs-font-display);
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 12px;
    background: var(--gs-text-muted);
    color: var(--gs-text-onfill);
    margin-top: 1px;
}
.gs-alert__title {
    font-weight: 600;
    margin: 0 0 2px;
}
.gs-alert__body {
    margin: 0;
    color: var(--gs-text-muted);
}

.gs-alert--info {
    background: var(--gs-primary-soft);
    border-color: transparent;
}
.gs-alert--info .gs-alert__icon {
    background: var(--gs-primary);
}
.gs-alert--success {
    background: var(--gs-success-soft);
    border-color: transparent;
}
.gs-alert--success .gs-alert__icon {
    background: var(--gs-success);
}
.gs-alert--warning {
    background: var(--gs-warning-soft);
    border-color: transparent;
}
.gs-alert--warning .gs-alert__icon {
    background: var(--gs-warning);
}
.gs-alert--danger {
    background: var(--gs-danger-soft);
    border-color: transparent;
}
.gs-alert--danger .gs-alert__icon {
    background: var(--gs-danger);
}

[data-theme="dark"] .gs-alert--info,
[data-theme="dark"] .gs-alert--success,
[data-theme="dark"] .gs-alert--warning,
[data-theme="dark"] .gs-alert--danger {
    color: var(--gs-text);
}

/* 13. Tabs / Segmented ────────────────────────────────────────────────── */
.gs-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--gs-border);
    margin-bottom: 18px;
}
.gs-tabs__tab {
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--gs-text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: default;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.gs-tabs__tab:hover {
    color: var(--gs-text);
}
.gs-tabs__tab.is-active {
    color: var(--gs-text);
    border-bottom-color: var(--gs-primary);
}

.gs-segmented {
    display: inline-flex;
    background: var(--gs-surface-sunk);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-md);
    padding: 3px;
    gap: 2px;
}
.gs-segmented__seg {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--gs-text-muted);
    padding: 6px 12px;
    border-radius: calc(var(--gs-r-md) - 2px);
    cursor: default;
}
.gs-segmented__seg.is-active {
    background: var(--gs-surface);
    color: var(--gs-text);
    box-shadow: var(--gs-shadow-sm);
}

/* 14. Modal ───────────────────────────────────────────────────────────── */
.gs-modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, var(--gs-bg) 60%, black 40% / 60%);
    display: grid;
    place-items: center;
    z-index: 50;
    padding: 20px;
}
.gs-modal {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-lg);
    box-shadow: var(--gs-shadow-lg);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
}
.gs-modal__head {
    padding: 18px 20px 0;
}
.gs-modal__body {
    padding: 12px 20px 20px;
    color: var(--gs-text-muted);
    font-size: 14px;
}
.gs-modal__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--gs-border);
    background: var(--gs-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* 15. Misc ────────────────────────────────────────────────────────────── */
.gs-kbd {
    font-family: var(--gs-font-mono);
    font-size: 11.5px;
    padding: 2px 6px;
    border: 1px solid var(--gs-border);
    border-bottom-width: 2px;
    border-radius: var(--gs-r-xs);
    background: var(--gs-surface);
    color: var(--gs-text-muted);
}
.gs-divider {
    height: 1px;
    background: var(--gs-border);
    margin: 16px 0;
    border: 0;
}
.gs-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gs-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gs-spacer {
    flex: 1;
}

/* Color swatch (used in pattern library) */
.gs-swatch {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gs-swatch__chip {
    height: 64px;
    border-radius: var(--gs-r-md);
    border: 1px solid var(--gs-border);
}
.gs-swatch__name {
    font-size: 12px;
    color: var(--gs-text);
    font-weight: 500;
}
.gs-swatch__token {
    font-family: var(--gs-font-mono);
    font-size: 11px;
    color: var(--gs-text-subtle);
}

/* placeholder image (for media library) */
.gs-placeholder-img {
    background: repeating-linear-gradient(
        135deg,
        var(--gs-surface-2) 0 8px,
        var(--gs-surface) 8px 16px
    );
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-r-sm);
    display: grid;
    place-items: center;
    font-family: var(--gs-font-mono);
    font-size: 11px;
    color: var(--gs-text-subtle);
    aspect-ratio: 4 / 3;
}