/* #48 */

/* #49 */
.dot {
    display: inline-block;
    width: var(--dot-size, 0.5rem);
    height: var(--dot-size, 0.5rem);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dot-color, var(--text-muted));
    border: var(--dot-border, 0) solid var(--dot-color, var(--text-muted));
}
/* #50 */
.dot--ok     { --dot-color: var(--success); }
.dot--info   { --dot-color: var(--primary); }
.dot--warn   { --dot-color: var(--accent); }
.dot--err    { --dot-color: var(--secondary); }
.dot--muted  { --dot-color: var(--text-muted); }
/* #51 */
.dot--xs { --dot-size: 0.375rem; }
.dot--sm { --dot-size: 0.4375rem; }
.dot--md { --dot-size: 0.5rem; }
.dot--lg { --dot-size: 0.625rem; }
.dot--xl { --dot-size: 0.75rem; }
/* #52 */
.dot--pulse   { animation: priority-pulse 2s ease-in-out infinite; }
.dot--outline { background: transparent; --dot-border: 0.09375rem; }
.dot--glow    { box-shadow: 0 0 0.375rem var(--dot-color); }

/* #53 */
.bar {
    position: relative;
    height: var(--bar-h, 0.25rem);
    background: var(--border);
    overflow: hidden;
}
.bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--bar-color, var(--success));
    transition: width 0.3s ease-out;
}
.bar--gantt {
    --bar-h: 1.5rem;
    background: var(--bg-elevated);
    flex: 1;
    min-width: 12.5rem;
}
.bar--gantt .bar-fill {
    top: 0.25rem;
    height: 1rem;
    transition: opacity 0.15s;
}
@media (min-width: 48em) {
    .bar--gantt { min-width: 18.75rem; }
}
@media (hover: hover) {
    .bar--gantt .bar-fill:hover { opacity: 0.7; }
}
.bar--gantt .bar-fill[data-status="pending"],
.bar--gantt .bar-fill[data-status="in_progress"] { --bar-color: var(--accent); }
.bar--gantt .bar-fill[data-status="completed"]   { --bar-color: var(--primary); }
.bar--gantt .bar-fill[data-status="delayed"],
.bar--gantt .bar-fill[data-status="overdue"]     { --bar-color: var(--secondary); }

/* #54 */
.dot[data-status="pending"],
.dot[data-status="open"]         { --dot-color: var(--text-muted); background: transparent; --dot-border: 0.09375rem; }
.dot[data-status="in_progress"],
.dot[data-status="submitted"]    { --dot-color: var(--accent); }
.dot[data-status="completed"],
.dot[data-status="accepted"],
.dot[data-status="approved"]     { --dot-color: var(--success); }
.dot[data-status="delayed"],
.dot[data-status="rejected"],
.dot[data-status="blocked"]      { --dot-color: var(--secondary); }
.dot[data-status="rework"]       { --dot-color: var(--accent); }
/* #55 */
.dot[data-priority="critical"]   { --dot-color: var(--secondary); animation: priority-pulse 2s ease-in-out infinite; box-shadow: 0 0 0.375rem var(--secondary); }
.dot[data-priority="high"]       { --dot-color: var(--primary); }
.dot[data-priority="normal"]     { --dot-color: var(--text-muted); }

/* #56 */
.icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

/* #57 */
/* #58 */

/* #59 */
.fm-field {
    position: relative;
    margin-bottom: var(--space-md);
}
.fm-field .form-input,
.fm-field .form-textarea,
.fm-field .form-select {
    width: 100%;
    padding: 1.25rem 0.75rem 0.5rem;
    min-height: 3rem;
}
.fm-field .form-textarea { padding-top: 1.5rem; min-height: 4.5rem; }
.fm-field > label {
    position: absolute;
    left: 0.75rem;
    top: 0.9375rem;
    pointer-events: none;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
    transition: top 0.15s var(--ease-out),
                font-size 0.15s var(--ease-out),
                color 0.15s var(--ease-out),
                letter-spacing 0.15s var(--ease-out);
    background: transparent;
}
/* #60 */
.fm-field .form-input:focus ~ label,
.fm-field .form-input:not(:placeholder-shown) ~ label,
.fm-field .form-textarea:focus ~ label,
.fm-field .form-textarea:not(:placeholder-shown) ~ label,
.fm-field input[type="date"] ~ label {
    top: 0.25rem;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
}

/* #61 */
.seg-toggle {
    display: inline-flex;
    border: 0.0625rem solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-surface);
}
.seg-toggle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.seg-toggle label {
    padding: 0.4375rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    cursor: pointer;
    border-right: 0.0625rem solid var(--border);
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.seg-toggle label:last-of-type { border-right: 0; }
.seg-toggle label:hover { color: var(--text-primary); }
.seg-toggle input:checked + label {
    background: var(--primary);
    color: var(--bg-base);
}
/* #62 */
.seg-toggle input[value="critical"]:checked + label { background: var(--secondary); }

/* #63 */
.form-prefilled {
    margin-bottom: var(--space-md);
    border: 0.0625rem solid var(--border);
    background: var(--bg-surface);
    border-radius: 0.1875rem;
}
.form-prefilled > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}
.form-prefilled > summary::-webkit-details-marker { display: none; }
.form-prefilled-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.625rem;
    flex-shrink: 0;
}
.form-prefilled-value {
    flex: 1;
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-prefilled-edit {
    color: var(--primary);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 0.0625rem dotted var(--primary);
}
.form-prefilled[open] > summary .form-prefilled-edit {
    opacity: 0.4;
}
.form-prefilled-body {
    padding: 0 var(--space-md) var(--space-sm);
    border-top: 0.0625rem solid var(--border);
}

/* #64 */
.micro {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    color: var(--micro-color);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
}

/* #65 */ below. */
/* #66 */
summary.section-title {
    display: list-item;
    list-style: none;
    cursor: pointer;
}
/* #67 */
.section-title::before {
    content: "§";
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0.6;
}
.section-title::after {
    content: "";
    flex: 1;
    height: 0.0625rem;
    background: var(--border);
}

/* #68 */

.section {
    margin-bottom: var(--space-2xl);
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    border-bottom: 0.0625rem solid var(--border);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-lg);
}

/* #69 */

.table {
    width: 100%;
    border-collapse: collapse;
    /* #70 */
    font-size: 0.75rem;
}
@media (min-width: 48em) {
    .table { font-size: 0.875rem; }
}

/* #71 */
.table th {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    text-align: left;
    /* #72 */
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 0.0625rem solid var(--border);
    white-space: nowrap;
    font-weight: 400;
}
@media (min-width: 48em) {
    .table th { padding: var(--space-xs) var(--space-md); }
}

.table td {
    /* #73 */
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 0.0625rem solid var(--border);
    vertical-align: top;
}
@media (min-width: 48em) {
    .table td { padding: var(--space-sm) var(--space-md); }
}

@media (hover: hover) { .table tbody tr { transition: background var(--dur-fast) var(--ease-out); } .table tbody tr:hover td { background: var(--bg-elevated); } }

/* #74 */

.badge {
    --pill-color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1875rem 0.625rem;
    min-height: 1.25rem;
    border: 0.0625rem solid currentColor;
    border-radius: 624.938rem;
    color: var(--pill-color);
    background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.badge-draft    { --pill-color: var(--text-muted); }
.badge-submitted{ --pill-color: var(--accent); }
.badge-approved { --pill-color: var(--success); }
.badge-rejected { --pill-color: var(--secondary); }
.badge-rework   { --pill-color: var(--accent); }

/* #75 */
.role-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.125rem 0.5rem; border: 0.0625rem solid; margin: 0.0625rem 0.125rem; white-space: nowrap; }
.role-badge::before { margin-right: 0.25rem; font-weight: 700; }
.role-admin { color: var(--secondary); border-color: var(--secondary); }
.role-admin::before { content: "A"; }
.role-inspector { color: var(--primary); border-color: var(--primary); }
.role-inspector::before { content: "I"; }
.role-foreman { color: var(--success); border-color: var(--success); }
.role-foreman::before { content: "F"; }
.role-worker { color: var(--text-secondary); border-color: var(--text-secondary); }
.role-worker::before { content: "W"; }

/* #76 */

.empty {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.875rem;
    padding: var(--space-2xl) 0;
    text-align: center;
}

/* #77 */

.form-section {
    background: var(--bg-surface);
    border: 0.09375rem solid var(--border);
    /* #78 */
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
    max-width: 40rem;
}
@media (min-width: 48em) {
    .form-section { padding: var(--space-xl); }
}

.form-title {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border-bottom: 0.09375rem solid var(--text-primary);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: 1rem; /* #79 */
    border: 0.09375rem solid var(--border);
    border-radius: 0; /* #80 */
    -webkit-appearance: none; /* #81 */
    background: var(--bg-base);
    color: var(--text-primary);
    opacity: 1; /* #82 */
    min-height: 2.75rem; /* #83 */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    padding-right: 1.75rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

/* #84 */
/* #85 */
@media (pointer: coarse) {
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 3rem;
    }
}

.form-textarea {
    min-height: 5rem;
    resize: vertical;
}

/* ─── Native control theming ──────────────────────────────────────
   Browser-rendered widgets that ignored our `--bg-base` shell:
   file pickers, date/time/datetime-local/month/week/color inputs,
   <input type="search"> X-button, autofill backgrounds.
   `color-scheme: dark` (tokens.css) covers calendar popups + scrollbars;
   the rules below match the surrounding chrome to .form-input.
*/
input[type="file"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="search"],
input[type="color"] {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-sans);
    font-size: 1rem;
    border: 0.09375rem solid var(--border);
    border-radius: 0;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 2.75rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="file"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="search"]:focus,
input[type="color"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}
@media (pointer: coarse) {
    input[type="file"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="search"],
    input[type="color"] { min-height: 3rem; }
}

/* File input — turn the OS-native button into an inline "ВИБРАТИ ФАЙЛ"
   chip that matches .btn styling, while keeping native semantics
   (label-for, file-list rendering) intact. */
input[type="file"] { padding: 0.375rem var(--space-md); cursor: pointer; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    margin: 0 var(--space-md) 0 calc(var(--space-md) * -0.5);
    padding: 0.5rem var(--space-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 0.09375rem solid var(--border);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Date/time picker indicator (the calendar/clock icon) — invert so it
   reads on dark; native popup itself is themed by `color-scheme: dark`. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
    opacity: 0.7;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* <input type="color"> — the OS color swatch is paint-only; minimum
   we can do is shrink the inner padding so the chip renders cleanly. */
input[type="color"] { padding: 0.25rem; height: 2.75rem; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0.09375rem solid var(--border); }

/* Number-input spinner — keep it readable on dark. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { filter: invert(0.7); opacity: 0.7; }

/* <select> dropdown options — Chromium pulls these from the OS, but
   Firefox honors background-color set on <option>. Setting both keeps
   the panel from flashing white in FF. */
select.form-select option,
.form-select option { background: var(--bg-elevated); color: var(--text-primary); }

/* Range slider — match track to surrounding chrome. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.25rem;
    background: var(--border);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background: var(--primary);
    border: none;
    border-radius: 0;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background: var(--primary);
    border: none;
    border-radius: 0;
    cursor: pointer;
}

/* Autofill — Chrome paints a yellow/blue inset on autofilled fields.
   Override with our base bg and a long inner shadow trick. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 100rem var(--bg-base) inset;
    box-shadow: 0 0 0 100rem var(--bg-base) inset;
    transition: background-color 99999s ease-in-out 0s;
    caret-color: var(--text-primary);
}

.form-row {
    display: grid;
    /* #86 */
    grid-template-columns: 1fr;
    gap: var(--space-md);
}
@media (min-width: 48em) {
    .form-row { grid-template-columns: 1fr 1fr; }
}

.form-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* #87 */

.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    user-select: none;
}

/* #88 */
input[type="checkbox"]:not(.checkbox-native) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 0.09375rem solid var(--border);
    background: var(--bg-base);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    vertical-align: middle;
    margin: 0;
}

input[type="checkbox"]:not(.checkbox-native):hover {
    border-color: var(--text-secondary);
}

input[type="checkbox"]:not(.checkbox-native):checked {
    background: var(--primary);
    border-color: var(--primary);
}

input[type="checkbox"]:not(.checkbox-native):checked::after {
    content: '';
    position: absolute;
    left: 0.3125rem;
    top: 0.0625rem;
    width: 0.3125rem;
    height: 0.625rem;
    border: solid #fff;
    border-width: 0 0.125rem 0.125rem 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:not(.checkbox-native):focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

input[type="checkbox"]:not(.checkbox-native):disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-check-label {
    font-size: 0.8125rem;
    color: var(--text-primary);
}

/* #89 */

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
}

.toggle input {
    appearance: none;
    -webkit-appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    background: var(--border);
    border: 0.09375rem solid var(--border);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.toggle input::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--text-secondary);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.toggle input:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.toggle input:checked::after {
    transform: translateX(1rem);
    background: #fff;
}

.toggle input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1875rem var(--focus-ring);
}

.toggle-label {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

/* #90 */

.action-bar {
    display: flex;
    align-items: center;
    /* #91 */
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
@media (min-width: 48em) {
    .action-bar { flex-wrap: nowrap; }
}

/* #92 */
.popover {
    display: none;
    position: absolute;
    z-index: 50;
    right: 0;
    top: 100%;
    background: var(--bg-elevated);
    border: 0.0625rem solid var(--border);
    padding: var(--space-sm);
    min-width: 16.25rem;
}
.popover.open { display: block; }
/* Native <details> disclosure for the users-page role editor — no JS. */
.role-edit { position: relative; }
.role-edit > summary { list-style: none; cursor: pointer; }
.role-edit > summary::-webkit-details-marker { display: none; }
.role-edit[open] > .popover { display: block; }
.popover-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 0.0625rem solid var(--border);
}
.popover-row:last-child { border: none; }
.popover-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 0.0625rem solid var(--border);
}
.popover-actions select {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    min-height: 1.5rem;
    padding: 0.125rem 1.25rem 0.125rem 0.375rem;
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-base);
    border: 0.09375rem solid var(--border);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2378716c'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
}
.popover-actions select:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 0.1875rem var(--focus-ring); }
.btn-destructive {
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    padding: 0 0.25rem;
    letter-spacing: 0.0625rem;
}
.btn-outline-primary {
    font-family: var(--font-mono);
    font-size: var(--micro-size);
    background: none;
    color: var(--primary);
    border: 0.0625rem solid var(--primary);
    padding: 0.125rem 0.5rem;
    cursor: pointer;
    letter-spacing: 0.0625rem;
    font-weight: 600;
    white-space: nowrap;
}
.btn-outline-primary:hover { background: var(--primary); color: var(--bg-base); }