/* ============================================================
   HerpCopilot Monitor — shared design system
   Used by both public/server.html and public/dashserver.html
   ============================================================ */

/* ============================ Tokens ============================ */
:root {
    color-scheme: light;

    --bg: oklch(0.985 0.004 240);
    --surface: oklch(1 0 0);
    --surface-2: oklch(0.972 0.005 240);
    --surface-hover: oklch(0.965 0.007 250);
    --border: oklch(0.912 0.006 240);
    --border-strong: oklch(0.85 0.009 240);

    --ink: oklch(0.27 0.02 255);
    --ink-2: oklch(0.46 0.018 255);
    --ink-3: oklch(0.58 0.014 255);

    --accent: oklch(0.55 0.17 255);
    --accent-ink: oklch(0.99 0 0);
    --accent-weak: oklch(0.95 0.035 255);
    --accent-ring: oklch(0.55 0.17 255 / 0.4);

    --ok: oklch(0.6 0.15 150);
    --ok-bg: oklch(0.95 0.05 150);
    --ok-ink: oklch(0.41 0.1 150);

    --bad: oklch(0.58 0.21 25);
    --bad-bg: oklch(0.957 0.045 25);
    --bad-ink: oklch(0.47 0.18 25);
    --bad-row: oklch(0.978 0.022 25);
    --bad-row-hover: oklch(0.965 0.032 25);

    --warn: oklch(0.7 0.14 65);
    --warn-bg: oklch(0.95 0.06 75);
    --warn-ink: oklch(0.5 0.1 65);

    --info: oklch(0.5 0.16 255);
    --info-bg: oklch(0.95 0.035 255);
    --info-ink: oklch(0.42 0.15 255);

    --line-brand: oklch(0.72 0.18 150);

    --shadow-sm: 0 1px 2px oklch(0.2 0.02 255 / 0.06),
        0 1px 3px oklch(0.2 0.02 255 / 0.05);
    --shadow-md: 0 4px 12px oklch(0.2 0.02 255 / 0.08),
        0 2px 4px oklch(0.2 0.02 255 / 0.05);
    --shadow-lg: 0 12px 32px oklch(0.2 0.02 255 / 0.14);

    --radius: 10px;
    --radius-sm: 7px;
    --radius-pill: 999px;

    --font-sans: "Segoe UI", system-ui, -apple-system, "Sarabun",
        "Leelawadee UI", Tahoma, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas,
        "Liberation Mono", monospace;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --z-sticky: 100;
    --z-toast: 600;

    --maxw: 1320px;
}

[data-theme="dark"] {
    color-scheme: dark;

    --bg: oklch(0.185 0.012 260);
    --surface: oklch(0.225 0.014 260);
    --surface-2: oklch(0.255 0.016 260);
    --surface-hover: oklch(0.285 0.018 260);
    --border: oklch(0.315 0.016 260);
    --border-strong: oklch(0.4 0.02 260);

    --ink: oklch(0.96 0.005 260);
    --ink-2: oklch(0.76 0.013 260);
    --ink-3: oklch(0.63 0.014 260);

    --accent: oklch(0.72 0.14 258);
    --accent-ink: oklch(0.16 0.02 260);
    --accent-weak: oklch(0.32 0.06 258);
    --accent-ring: oklch(0.72 0.14 258 / 0.5);

    --ok: oklch(0.78 0.15 152);
    --ok-bg: oklch(0.32 0.06 152);
    --ok-ink: oklch(0.87 0.13 152);

    --bad: oklch(0.72 0.18 25);
    --bad-bg: oklch(0.34 0.09 25);
    --bad-ink: oklch(0.86 0.13 28);
    --bad-row: oklch(0.26 0.04 25);
    --bad-row-hover: oklch(0.3 0.055 25);

    --warn: oklch(0.82 0.13 78);
    --warn-bg: oklch(0.35 0.07 70);
    --warn-ink: oklch(0.88 0.12 82);

    --info: oklch(0.72 0.13 258);
    --info-bg: oklch(0.32 0.07 258);
    --info-ink: oklch(0.85 0.1 258);

    --line-brand: oklch(0.78 0.16 152);

    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
    --shadow-md: 0 4px 14px oklch(0 0 0 / 0.4);
    --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55);
}

/* ============================ Base ============================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.tabular {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================ Top bar ============================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--surface) 85%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border);
}

.topbar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px 28px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 650;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-sm);
}

.brand__mark svg {
    width: 19px;
    height: 19px;
}

.brand__sub {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    margin-left: 2px;
}

.live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.live__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 var(--ok);
}

.live__dot.is-beat {
    animation: beat 1s var(--ease-out);
}

@keyframes beat {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 70%, transparent);
    }
    70% {
        box-shadow: 0 0 0 7px color-mix(in oklab, var(--ok) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.live.is-stale .live__dot {
    background: var(--warn);
}

.topbar__spacer {
    flex: 1 1 24px;
}

/* ---- summary stat chips (also act as filters) ---- */
.stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px 7px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    transition:
        border-color 0.15s,
        background 0.15s,
        transform 0.12s var(--ease-out);
}

.stat:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
}

.stat:active {
    transform: translateY(1px);
}

.stat[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
    color: var(--ink);
}

.stat__num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.stat__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.stat--online .stat__dot {
    background: var(--ok);
}
.stat--offline .stat__dot {
    background: var(--bad);
}
.stat--total .stat__dot {
    background: var(--ink-3);
}

/* ---- controls ---- */
.controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.search svg {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 16px;
    color: var(--ink-3);
    pointer-events: none;
}

.search input {
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 30px 9px 34px;
    width: 220px;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        width 0.2s var(--ease-out);
}

.search input::placeholder {
    color: var(--ink-2);
}

.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.search__clear {
    position: absolute;
    right: 6px;
    display: none;
    place-items: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1;
}

.search__clear:hover {
    background: var(--surface-hover);
    color: var(--ink);
}

.search.has-value .search__clear {
    display: grid;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
}

.icon-btn:hover {
    background: var(--surface-hover);
    color: var(--ink);
    border-color: var(--border-strong);
}

.icon-btn svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .moon {
    display: none;
}
[data-theme="dark"] .theme-toggle .sun {
    display: none;
}
[data-theme="dark"] .theme-toggle .moon {
    display: block;
}

/* ============================ Layout ============================ */
main {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

/* ============================ Table ============================ */
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0;
    white-space: nowrap;
}

thead th.sortable button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    padding: 12px 16px;
    text-align: left;
}

thead th.sortable button:hover {
    color: var(--ink);
    background: var(--surface-hover);
}

th.num button,
td.num {
    text-align: right;
    justify-content: flex-end;
}

.sort-ind {
    width: 12px;
    height: 12px;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    flex: none;
}

th[aria-sort] .sort-ind {
    opacity: 1;
    color: var(--accent);
}
th[aria-sort="descending"] .sort-ind {
    transform: rotate(180deg);
}

th:not(.sortable) {
    padding: 12px 16px;
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--ink-2);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr {
    transition: background 0.12s;
}

tbody tr:hover {
    background: var(--surface-hover);
}

tbody tr.row-offline {
    background: var(--bad-row);
}
tbody tr.row-offline:hover {
    background: var(--bad-row-hover);
}

tbody tr.row-enter {
    animation: rowIn 0.4s var(--ease-out);
}

@keyframes rowIn {
    from {
        background: var(--accent-weak);
    }
}

/* ---- server name cell ---- */
.server {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}

.server__code {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 7px;
    flex: none;
    letter-spacing: -0.01em;
}

.server__name {
    color: var(--ink);
    font-weight: 550;
    line-height: 1.3;
}

/* ---- status pill ---- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}

.status--online {
    background: var(--ok-bg);
    color: var(--ok-ink);
}
.status--online .status__dot {
    background: var(--ok);
}

.status--offline {
    background: var(--bad-bg);
    color: var(--bad-ink);
}
.status--offline .status__dot {
    background: var(--bad);
    animation: blink 1.6s steps(1, end) infinite;
}

@keyframes blink {
    50% {
        opacity: 0.25;
    }
}

.reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}

.reason {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--warn-bg);
    color: var(--warn-ink);
    white-space: nowrap;
}

/* ---- generic badge (e.g. command result state) ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--border);
}

.badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.badge--ok {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border-color: transparent;
}
.badge--bad {
    background: var(--bad-bg);
    color: var(--bad-ink);
    border-color: transparent;
}
.badge--info {
    background: var(--info-bg);
    color: var(--info-ink);
    border-color: transparent;
}
.badge--warn {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-color: transparent;
}
.badge--warn .badge__dot {
    animation: blink 1.4s steps(1, end) infinite;
}

/* ---- data / idle cells ---- */
.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.muted {
    color: var(--ink-3);
}

.idle--warn {
    color: var(--warn-ink);
    font-weight: 600;
}
.idle--bad {
    color: var(--bad-ink);
    font-weight: 600;
}

.when__time {
    color: var(--ink);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
.when__date {
    color: var(--ink-2);
    font-size: 11.5px;
    font-family: var(--font-mono);
}
.when--never {
    color: var(--ink-2);
    font-style: italic;
}

.data-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}
.data-val.is-zero {
    color: var(--bad-ink);
}
.data-val.is-empty {
    color: var(--ink-3);
    font-weight: 400;
}

.db-tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
}

/* ---- expandable JSON cell ---- */
.json-cell {
    max-width: 460px;
}

.json-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    background: none;
    border: none;
    padding: 0;
    color: var(--ink-2);
    text-align: left;
}

.json-toggle:hover {
    color: var(--ink);
}

.json-toggle .chev {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform 0.18s var(--ease-out);
    color: var(--ink-3);
}

.json-cell.is-open .json-toggle .chev {
    transform: rotate(90deg);
}

.json-preview {
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.json-pre {
    display: none;
    margin: 8px 0 0;
    padding: 11px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

.json-cell.is-open .json-pre {
    display: block;
}

/* ---- row actions ---- */
.actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 500;
    transition:
        background 0.14s,
        color 0.14s,
        border-color 0.14s,
        opacity 0.14s;
}

.act svg {
    width: 14px;
    height: 14px;
    flex: none;
}

.act--line:hover:not(:disabled) {
    border-color: var(--line-brand);
    color: var(--line-brand);
    background: color-mix(in oklab, var(--line-brand) 12%, var(--surface));
}

.act--icon {
    width: 30px;
    padding: 0;
    justify-content: center;
}

.act--danger:hover:not(:disabled) {
    border-color: var(--bad);
    color: var(--bad-ink);
    background: var(--bad-bg);
}

.act:disabled {
    opacity: 0.55;
    cursor: default;
}

.act.is-loading {
    color: var(--ink-3);
    pointer-events: none;
}

.act.is-loading .act__icon {
    animation: spin 0.7s linear infinite;
}

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

/* ============================ Skeleton ============================ */
.skeleton td {
    padding: 16px;
}

.sk {
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-hover) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* ============================ Empty state ============================ */
.empty {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 72px 24px;
    color: var(--ink-2);
}

.empty.is-shown {
    display: flex;
}

.empty__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--surface-2);
    color: var(--ink-3);
    margin-bottom: 6px;
}

.empty__icon svg {
    width: 26px;
    height: 26px;
}

.empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.empty__hint {
    font-size: 13px;
    max-width: 42ch;
}

/* ============================ Toasts ============================ */
.toasts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 40px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.32s var(--ease-out);
}

.toast.is-out {
    animation: toastOut 0.25s var(--ease-out) forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
}
@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(14px);
    }
}

.toast__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}
.toast--ok .toast__icon {
    color: var(--ok);
}
.toast--err .toast__icon {
    color: var(--bad);
}

.toast__body {
    flex: 1;
    font-size: 13px;
    color: var(--ink);
}
.toast__title {
    font-weight: 600;
}
.toast__msg {
    color: var(--ink-2);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
}

/* ============================ Responsive ============================ */
@media (max-width: 860px) {
    .topbar__inner {
        padding: 14px 16px;
    }
    .topbar__spacer {
        display: none;
    }
    .controls {
        width: 100%;
    }
    .search {
        flex: 1;
    }
    .search input {
        width: 100%;
    }
    main {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================ Connection banner ============================ */
.alert-banner {
    display: none;
    align-items: center;
    gap: 11px;
    max-width: var(--maxw);
    margin: 0 auto 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bad-bg);
    color: var(--bad-ink);
    border: 1px solid color-mix(in oklab, var(--bad) 40%, transparent);
    font-size: 13.5px;
    font-weight: 500;
}

.alert-banner.is-shown {
    display: flex;
}

.alert-banner svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.alert-banner__strong {
    font-weight: 700;
}

/* ============================ Alert-channel chips ============================ */
.channels {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.chan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--ink-3);
    white-space: nowrap;
}

.chan svg {
    width: 11px;
    height: 11px;
}

.chan--line {
    color: var(--line-brand);
    border-color: color-mix(in oklab, var(--line-brand) 40%, var(--border));
}

.chan--email {
    color: var(--info-ink);
    border-color: color-mix(in oklab, var(--info) 35%, var(--border));
}

/* ============================ Inline confirm ============================ */
.actions__main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.actions .confirm {
    display: none;
}

.actions.is-confirming .actions__main {
    display: none;
}

.actions.is-confirming .confirm {
    display: inline-flex;
}

.confirm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.confirm__text {
    font-size: 12px;
    font-weight: 600;
    color: var(--bad-ink);
    white-space: nowrap;
}

.act--confirm {
    border-color: var(--bad);
    color: var(--bad-ink);
    background: var(--bad-bg);
}

/* ============================ Help dialog ============================ */
dialog.help {
    width: min(680px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

dialog.help::backdrop {
    background: oklch(0.2 0.02 255 / 0.5);
    backdrop-filter: blur(3px);
}

dialog.help[open] {
    animation: dialogIn 0.26s var(--ease-out);
}

@keyframes dialogIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }
}

.help__inner {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.help__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.help__title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0;
}

.help__close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
}

.help__close:hover {
    background: var(--surface-hover);
    color: var(--ink);
    border-color: var(--border-strong);
}

.help__close svg {
    width: 18px;
    height: 18px;
}

.help__body {
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.help__section h3 {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.help__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help__row {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 13.5px;
    line-height: 1.5;
}

.help__term {
    color: var(--ink);
    font-weight: 600;
}

.help__def {
    color: var(--ink-2);
}

.help__def b {
    color: var(--ink);
    font-weight: 600;
}

kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 560px) {
    .help__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ============================ Pagination ============================ */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.pager__info {
    font-size: 12.5px;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.pager__controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 13px;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.pager__btn svg {
    width: 16px;
    height: 16px;
}

.pager__btn:hover:not(:disabled) {
    background: var(--surface-hover);
    color: var(--ink);
    border-color: var(--border-strong);
}

.pager__btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.pager__page {
    font-size: 12.5px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    padding: 0 8px;
    white-space: nowrap;
}