/* ============================================================
   Voidscan: Auth & Dashboard Styles v2
   Extends the main design system
   ============================================================ */

/* Override homepage body lock for app pages */
body:has(.dash-page),
body:has(.auth-page) {
    overflow-y: auto;
    height: auto;
}

/* (autofill override lives in style.css so it also covers the homepage waitlist) */

/* --- Back link --- */
.back-link {
    font-size: 0.82rem;
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--dur);
}

.back-link:hover { color: var(--text); }

/* --- User email in topbar --- */
/* Username/email is shown on the Account page itself: keep it out of the
   top bar (the element stays in the DOM so the JS that fills it won't break). */
.user-email {
    display: none;
}

/* ============================================================
   AUTH PAGE
   ============================================================ */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 28px;
    position: relative;
}


.auth-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 30px 36px;
    position: relative;
    z-index: 1;
    box-shadow:
        7px 7px 18px var(--neu-dark),
        -7px -7px 18px var(--neu-light);
}

.auth-icon {
    height: 38px;
    width: auto;
    margin-bottom: 4px;
}

.auth-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.auth-subtitle {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* Tabs: liquid ink pill switcher */
.auth-tabs {
    display: flex;
    width: 100%;
    border-radius: 100px;
    border: none;
    height: 46px;
    background: var(--bg);
    margin-bottom: 8px;
    position: relative;
    padding: 4px;
    gap: 0;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}

/* Gooey filter layer: separate from text */
.auth-tabs-bg {
    position: absolute;
    inset: 4px;
    border-radius: 100px;
    pointer-events: none;
    z-index: 0;
}

/* The indicator: a fixed-width raised pill that slides as one rigid piece
   (no stretching), with a tiny spring. Matches the Sign In button's relief. */
.tab-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 100px;
    background: var(--bg);
    box-shadow:
        2px 2px 5px var(--neu-dark),
        -2px -2px 5px var(--neu-light);
    /* clean decel slide (no overshoot past the wall); wall-squash fired in JS */
    translate: 0;
    scale: 1;
    transition: translate 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: translate, scale;
}

/* Login active: indicator on the left, squashes against the left wall */
.auth-tabs[data-active="login"] .tab-indicator {
    translate: 0;
    transform-origin: 0% 50%;
}

/* Register active: indicator on the right, squashes against the right wall */
.auth-tabs[data-active="register"] .tab-indicator {
    translate: 100%;
    transform-origin: 100% 50%;
}

.auth-tab {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.35s var(--ease);
    position: relative;
    z-index: 1;
    border-radius: 100px;
}

.auth-tab:hover:not(.active) { color: var(--text-secondary); }
.auth-tab.active { color: var(--text); }
.auth-tab:active { transform: scale(0.97); }

/* Form */
#authForm {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#confirmField {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s var(--ease), opacity 0.3s ease;
    margin: 0;
}

#confirmField.visible {
    max-height: 80px;
    opacity: 1;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.field input {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 100px;
    padding: 11px 20px;
    outline: none;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    transition: box-shadow var(--dur);
}

.field input::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
}

.field input:focus {
    box-shadow:
        inset 3px 3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light),
        0 0 0 2px var(--accent-dim);
}

/* Buttons */
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 12px;
    margin-top: 4px;
    font-size: 0.9rem;
    border-radius: 100px;
}

.btn-small {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: all var(--dur);
}

.btn-small.btn-ghost {
    color: var(--text-dim);
}

.btn-small.btn-ghost:hover {
    color: var(--text);
    border-color: var(--border-hover);
}

.btn-small.btn-danger {
    color: var(--danger);
    border-color: rgba(229, 115, 115, 0.15);
}

.btn-small.btn-danger:hover {
    border-color: var(--danger);
    background: rgba(229, 115, 115, 0.08);
}

/* Messages */
.error-msg {
    font-size: 0.78rem;
    color: var(--danger);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: rgba(229, 115, 115, 0.06);
    border: 1px solid rgba(229, 115, 115, 0.15);
}

.success-msg {
    font-size: 0.78rem;
    color: var(--accent);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--accent-dim);
    border: 1px solid rgba(139, 195, 74, 0.15);
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 96px 24px 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.dash-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    transition: color var(--dur);
}

.dash-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-label-sm {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color var(--dur);
}

.loading-text,
.empty-text {
    font-size: 0.82rem;
    color: var(--text-dim);
    padding: 24px;
    text-align: center;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--bg);
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}

/* Link license form */
.link-form {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.license-input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 100px;
    padding: 11px 18px;
    outline: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    transition: box-shadow var(--dur);
}

.license-input::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
    text-transform: none;
}

.license-input:focus {
    box-shadow:
        inset 3px 3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light),
        0 0 0 2px var(--accent-dim);
}

/* License cards */
.licenses-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.license-card {
    background: var(--bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow:
        6px 6px 16px var(--neu-dark),
        -6px -6px 16px var(--neu-light);
    transition: box-shadow var(--dur), transform var(--dur);
}

.license-card:hover {
    transform: translateY(-2px);
    box-shadow:
        8px 8px 20px var(--neu-dark),
        -8px -8px 20px var(--neu-light);
}

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

.license-product {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-transform: capitalize;
    transition: color var(--dur);
}

.license-status {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
}

.license-status.active {
    color: var(--accent);
    background: var(--accent-dim);
}

.license-status.revoked {
    color: var(--danger);
    background: rgba(229, 115, 115, 0.08);
}

.license-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.license-key {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    transition: color var(--dur);
}

.btn-copy {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--dur);
}

.btn-copy:hover {
    color: var(--text);
}

.btn-copy.copied {
    color: var(--accent);
}

.license-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-dim);
    transition: color var(--dur);
}

/* Machine rows */
.machines-list {
    display: flex;
    flex-direction: column;
    /* each row casts a 14px neumorphic shadow: under ~16px the shadows of two
       neighbours run into each other and the list reads as one dense block */
    gap: 18px;
}

.machine-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    border: none;
    box-shadow:
        5px 5px 14px var(--neu-dark),
        -5px -5px 14px var(--neu-light);
    transition: box-shadow var(--dur), opacity var(--dur);
}

.machine-row:hover { box-shadow: 6px 6px 16px var(--neu-dark), -6px -6px 16px var(--neu-light); }
.machine-row.inactive { opacity: 0.5; }

.machine-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.machine-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    transition: color var(--dur);
}

.machine-detail {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    transition: color var(--dur);
}

.machine-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.machine-actions { flex-shrink: 0; }

/* Verify */
.verify-msg {
    font-size: 0.88rem;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    margin-top: 12px;
    transition: color var(--dur);
    line-height: 1.5;
}

.verify-ok {
    color: var(--accent);
    font-weight: 500;
}

/* Back button (text style) */
.btn-back {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--text-dim);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    transition: color var(--dur);
}

.btn-back:hover { color: var(--text); }

/* Inline resend link inside error message */
.resend-inline {
    font-family: var(--font-body);
    font-size: inherit;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resend-inline:hover { opacity: 0.8; }
.resend-inline:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   APP NAV LINKS
   ============================================================ */
.nav-link-app {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--dur);
}

.nav-link-app:hover { color: var(--text); }
.nav-link-app.active { color: var(--text); }

/* App-page top bar: fully transparent: floats over the content, no blur,
   no fill, no separator (matches the homepage hero nav). */
.nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
}

/* ============================================================
   APP-PAGE BUTTONS: neumorphic raised pills
   style.css styles .btn-primary/.btn-ghost as translucent/blurred for
   the homepage (over the blob). On the solid light app pages we want
   them to match the neumorphic inputs & cards instead.
   ============================================================ */
.btn-primary,
.btn-ghost {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    color: var(--text);
    box-shadow:
        5px 5px 12px var(--neu-dark),
        -5px -5px 12px var(--neu-light);
    transition: box-shadow var(--dur), transform var(--dur), color var(--dur);
}
.btn-primary { color: var(--accent); font-weight: 500; }

.btn-primary:hover,
.btn-ghost:hover {
    background: var(--bg);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow:
        6px 6px 15px var(--neu-dark),
        -6px -6px 15px var(--neu-light);
}
.btn-primary:active,
.btn-ghost:active {
    transform: translateY(0);
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}
.btn-primary:disabled,
.btn-ghost:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow:
        3px 3px 8px var(--neu-dark),
        -3px -3px 8px var(--neu-light);
}

/* ============================================================
   PRESETS PAGE
   ============================================================ */
.presets-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.preset-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}

.preset-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* Row 1: "All Packs" dropdown + search share the full width.
   Row 2: the category pills (forced onto their own line). */
.preset-filters .pack-dropdown { order: 1; flex: 0 0 auto; }
.preset-filters .preset-search { order: 2; flex: 1 1 auto; }
.preset-filters .filter-pills  { order: 3; flex: 1 0 100%; }

.filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}
/* pills stretch to fill the full preset width, in equal-ish shares */
.filter-pills .filter-pill {
    flex: 1 1 auto;
}

.filter-pill {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border: none;
    border-radius: 100px;
    background: var(--bg);
    cursor: pointer;
    box-shadow:
        3px 3px 8px var(--neu-dark),
        -3px -3px 8px var(--neu-light);
    transition: box-shadow var(--dur), color var(--dur);
}

.filter-pill:hover {
    color: var(--text);
    box-shadow:
        4px 4px 10px var(--neu-dark),
        -4px -4px 10px var(--neu-light);
}

.filter-pill.active {
    color: var(--accent);
    font-weight: 600;
    box-shadow:
        inset 2px 2px 4px var(--neu-dark),
        inset -2px -2px 4px var(--neu-light);
}

/* Pack dropdown */
.pack-dropdown {
    position: relative;
}

.pack-dropdown-btn {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.03em;
    height: 34px;
    padding: 0 18px;
    border: none;
    border-radius: 100px;
    background: var(--bg);
    box-shadow:
        4px 4px 10px var(--neu-dark),
        -4px -4px 10px var(--neu-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: box-shadow var(--dur), color var(--dur);
    white-space: nowrap;
}

.pack-dropdown-btn:hover {
    color: var(--accent);
    box-shadow:
        5px 5px 12px var(--neu-dark),
        -5px -5px 12px var(--neu-light);
}

.pack-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 6px;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow:
        7px 7px 18px var(--neu-dark),
        -7px -7px 18px var(--neu-light);
}

.pack-dropdown-menu.open {
    display: flex;
}

.pack-option {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    padding: 8px 14px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all var(--dur);
    white-space: nowrap;
}

.pack-option:hover {
    color: var(--text);
    background: var(--bg);
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}

.pack-option.active {
    color: var(--accent);
}

.preset-search {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 100px;
    height: 34px;
    padding: 0 18px;
    outline: none;
    flex: 1;
    min-width: 160px;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    transition: box-shadow var(--dur);
}

.preset-search::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
}

.preset-search:focus {
    box-shadow:
        inset 3px 3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light),
        0 0 0 2px var(--accent-dim);
}

/* Preset grid: square cards like plugin */
.presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Low, centered card like the VST preset browser: name + "category · pack"
   subtitle stacked and centered, soft neumorphic relief, small accent dot
   on the active one (no corner tags). */
.preset-card {
    background: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: 14px 16px;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-shadow:
        5px 5px 13px var(--neu-dark),
        -5px -5px 13px var(--neu-light);
    transition: transform var(--dur), box-shadow var(--dur);
    position: relative;
    overflow: hidden;
}

.preset-card:hover {
    transform: translateY(-3px);
    box-shadow:
        8px 8px 20px var(--neu-dark),
        -8px -8px 20px var(--neu-light);
}

/* Category + pack become a single centered subtitle line under the name
   (VST style: "category · pack"), instead of tags pinned in the corners. */
.preset-card-header {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
}

.preset-category-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: none;
}

.preset-pack-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.preset-card-header .preset-category-tag + .preset-pack-tag::before {
    content: "· ";
}

.preset-card-name {
    order: 1;                /* name on top, subtitle below */
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    transition: color var(--dur);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}
.preset-card.selected .preset-card-name,
.preset-card.is-active .preset-card-name { color: var(--accent); }

.preset-card-meta {
    order: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    opacity: 0.5;
    margin-top: 2px;
    transition: opacity var(--dur);
}
/* hide the meta line on hover so the action button can take its place */
.preset-card:hover .preset-card-meta { opacity: 0; }

.preset-card:hover .preset-card-meta {
    opacity: 0;
}

.preset-card-actions {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    top: auto;
    display: flex;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--dur);
}

.preset-card:hover .preset-card-actions {
    opacity: 1;
}

.preset-action {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--dur), background var(--dur);
}

.preset-action:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}

.preset-action-danger:hover {
    color: var(--danger);
    background: rgba(229, 115, 115, 0.08);
}

/* --- Selection state --- */
.preset-card.selected {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* --- Selection bar --- */
.selection-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 100px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.selection-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* --- Pack edit button inside dropdown --- */
.pack-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pack-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: color var(--dur), background var(--dur);
}

.pack-edit-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

/* --- Modal overlay --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 24px;
}

.modal-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.modal-card form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-card .field {
    gap: 5px;
}

.modal-card .field input {
    font-size: 0.78rem;
    padding: 7px 16px;
}

.modal-card .btn-primary {
    font-size: 0.78rem;
    padding: 7px 16px;
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.modal-spacer {
    flex: 1;
}

/* --- Add to Pack dropdown (selection bar) --- */
.add-to-pack-dropdown {
    position: relative;
}

.add-to-pack-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 180px;
    background: var(--bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 6px;
    z-index: 50;
    display: none;
    flex-direction: column;
    gap: 2px;
    box-shadow:
        7px 7px 18px var(--neu-dark),
        -7px -7px 18px var(--neu-light);
}

.add-to-pack-menu.open {
    display: flex;
}

/* --- Public badge in dropdown --- */
.pack-public-badge {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: 6px;
    opacity: 0.7;
}

/* --- Toggle row (public switch) --- */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
}

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

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    width: 36px;
    height: 20px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    border: 1px solid var(--border);
    position: relative;
    transition: background var(--dur), border-color var(--dur);
    flex-shrink: 0;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: transform var(--dur), background var(--dur);
}

.toggle-input:checked + .toggle-track {
    background: color-mix(in srgb, var(--accent) 22%, var(--bg));
    box-shadow:
        inset 2px 2px 5px color-mix(in srgb, var(--accent) 30%, var(--neu-dark)),
        inset -2px -2px 5px var(--neu-light);
}

.toggle-input:checked + .toggle-track .toggle-thumb {
    transform: translateX(18px);
    background: var(--accent);
    box-shadow:
        2px 2px 4px var(--neu-dark),
        -1px -1px 3px var(--neu-light);
}

/* --- App footer --- */
.app-footer {
    /* flex, not text-align: the footer now carries several links, and the
       gap keeps them apart without separator glyphs to babysit on mobile */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding: 24px 0 0;
}

.app-footer a {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color var(--dur);
}

.app-footer a:hover {
    color: var(--accent);
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.account-profile-card {
    background: var(--bg);
    border: none;
    border-radius: var(--radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow:
        9px 9px 24px var(--neu-dark),
        -9px -9px 24px var(--neu-light);
}

.account-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.account-value {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    transition: color var(--dur);
}

.account-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin: 0;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Inline variant: the input and its button sit on one row (button bottom-
   aligned). Messages still flow underneath full-width. */
.account-form.account-form--inline {
    flex-flow: row wrap;
    align-items: flex-end;
    gap: 10px;
}
.account-form--inline .field {
    flex: 1 1 200px;
    min-width: 0;
}
/* input and button share the same height and bottom-align cleanly */
.account-form--inline .field input {
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
}
.account-form--inline .btn-form {
    align-self: flex-end;
    flex: 0 0 auto;
    height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.account-form--inline .error-msg,
.account-form--inline .success-msg {
    flex-basis: 100%;
}

.btn-form {
    align-self: flex-start;
    font-size: 0.82rem;
    padding: 10px 24px;
    border-radius: 100px;
}

/* ============================================================
   VIEW CONTAINERS
   ============================================================ */
#presetsView,
#libraryView {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ============================================================
   VIEW SWITCHER: liquid ink pill (same as auth tabs)
   ============================================================ */
.view-switcher {
    display: flex;
    width: 100%;
    border-radius: 100px;
    border: none;
    height: 40px;
    background: var(--bg);
    position: relative;
    padding: 4px;
    gap: 0;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}

.view-switcher-bg {
    position: absolute;
    inset: 4px;
    border-radius: 100px;
    pointer-events: none;
    z-index: 0;
}

/* Indicator: a fixed-width (one third) rigid pill that slides between the
   three positions via translateX, so it's always exactly 1/3 and evenly
   placed. Same relief as the Sign In button; small spring on arrival. */
.view-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / 3);
    border-radius: 100px;
    background: var(--bg);
    /* tight shadow so the raised pill stays cleanly inside the inset rail
       (a big shadow gets clipped by the track edge and looks broken) */
    box-shadow:
        2px 2px 5px var(--neu-dark),
        -2px -2px 5px var(--neu-light);
    /* position via the individual `translate` prop; the squash uses the
       independent `scale` prop so the two never fight. Default travel is a
       clean decel (no overshoot → never crosses a wall). */
    translate: 0;
    scale: 1;
    transition: translate 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: translate, scale;
}
/* arriving at the MIDDLE (no wall): a gentle spring is fine, there's room */
.view-switcher[data-active="library"] .view-indicator {
    transition: translate 0.46s cubic-bezier(0.34, 1.4, 0.5, 1);
}
/* The wall-squash itself is fired in JS (Web Animations API) on switch,
   anchored to whichever wall the pill lands against. */

.view-switcher[data-active="presets"] .view-indicator { translate: 0; }
.view-switcher[data-active="library"] .view-indicator { translate: 100%; }
.view-switcher[data-active="inbox"]   .view-indicator { translate: 200%; }

.view-tab {
    flex: 1 1 0;             /* equal thirds that always fill the switcher width */
    min-width: 0;            /* allow shrinking so the bar never overflows narrow screens */
    font-family: var(--font-body);
    font-size: clamp(0.68rem, 2.2vw, 0.78rem);  /* ease down on small widths, never clip labels */
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.35s var(--ease);
    position: relative;
    z-index: 1;
    border-radius: 100px;
    white-space: nowrap;
    text-align: center;
}

.view-tab:hover:not(.active) { color: var(--text-secondary); }
.view-tab.active { color: var(--text); }
.view-tab:active { transform: scale(0.97); }

.inbox-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--accent, #8BC34A);
    color: #1a1a1a;
    border-radius: 999px;
    line-height: 1.4;
    vertical-align: middle;
}

.blocks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.block-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
}

.block-username {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
    line-height: 1.2;
}

/* ============================================================
   PACK LIBRARY
   ============================================================ */
.library-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.library-search {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 100px;
    height: 34px;
    padding: 0 18px;
    outline: none;
    flex: 1 1 auto;
    min-width: 160px;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    transition: box-shadow var(--dur);
}

.library-search::placeholder {
    color: var(--text-dim);
    opacity: 0.5;
}

.library-search:focus {
    box-shadow:
        inset 3px 3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light),
        0 0 0 2px var(--accent-dim);
}


.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* Pack card in library */
.pack-card {
    background: var(--bg);
    border: none;
    box-shadow:
        6px 6px 16px var(--neu-dark),
        -6px -6px 16px var(--neu-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--dur);
}

.pack-card:hover { border-color: var(--border-hover); }

.pack-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pack-card-name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
    transition: color var(--dur);
}

.pack-card-author {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
}

.pack-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pack-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

/* ============================================================
   STAR RATING
   ============================================================ */
.star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star-rating .star {
    width: 18px;
    height: 18px;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.star-rating .star.filled {
    color: #F9A825;
}

.star-rating .star.hover {
    color: #FDD835;
}

.star-rating-count {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-left: 4px;
    letter-spacing: 0.03em;
}

/* Subscribe button */
.btn-subscribe {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all var(--dur);
    white-space: nowrap;
}

.btn-subscribe:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn-subscribe.subscribed {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ============================================================
   PACK DROPDOWN SEPARATOR + SUBSCRIBED PACKS
   ============================================================ */
.pack-dropdown-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}

.pack-dropdown-section-label {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px 2px;
    cursor: default;
}

.pack-author-badge {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    margin-left: 6px;
    opacity: 0.7;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-body { overflow-x: hidden; }

.admin-badge {
    margin-left: 10px;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.14em;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 100px;
    text-transform: uppercase;
}

.admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    padding: 88px 32px 60px;
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 88px;
    align-self: start;
}

.admin-nav-item {
    text-align: left;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all var(--dur);
}
.admin-nav-item:hover { color: var(--text); background: color-mix(in srgb, var(--bg-elevated) 30%, transparent); }
.admin-nav-item.active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.admin-main { min-width: 0; }

.admin-section { display: none; }
.admin-section.active { display: block; }

.admin-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
/* h1 and h2 look identical here on purpose: only the first section keeps
   the h1, the rest were demoted for a sane heading outline. */
.admin-section-head h1,
.admin-section-head h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}
.admin-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-search,
.admin-select,
.admin-input,
.admin-textarea {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 60%, transparent);
    border: none;
    border-radius: 100px;
    padding: 11px 18px;
    outline: none;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    transition: box-shadow var(--dur);
}
.admin-search { width: 280px; max-width: 100%; }
.admin-select { padding-right: 32px; appearance: none; cursor: pointer; }
.admin-input { width: 100%; }
.admin-textarea { border-radius: 16px; resize: vertical; min-height: 80px; }
.admin-search:focus,
.admin-select:focus,
.admin-input:focus,
.admin-textarea:focus {
    box-shadow:
        inset 3px 3px 6px var(--neu-dark),
        inset -3px -3px 6px var(--neu-light),
        0 0 0 2px var(--accent-dim);
}

/* Stats grid */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.admin-stat-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 24px;
    background: var(--bg);
    border: none;
    box-shadow:
        6px 6px 16px var(--neu-dark),
        -6px -6px 16px var(--neu-light);
    border-radius: 16px;
    transition: box-shadow var(--dur);
}
.admin-stat-card:hover { border-color: var(--border-hover); }
.admin-stat-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.admin-stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}
.admin-stat-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Table */
.admin-table-wrap {
    background: color-mix(in srgb, var(--bg-surface) 30%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    overflow-x: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-table thead th {
    text-align: left;
    padding: 12px 18px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 20%, transparent);
}
.admin-table tbody td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-row { cursor: pointer; transition: background var(--dur); }
.admin-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.admin-row code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }
.admin-row-msg { text-align: center; color: var(--text-dim); padding: 24px; }
.admin-row-msg.is-error { color: #ff7773; }

.admin-pager {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Badges */
.admin-badge-pill {
    display: inline-block;
    padding: 3px 10px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
    border: 1px solid var(--border);
}
.admin-badge-pill.is-ok     { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.admin-badge-pill.is-warn   { color: #d99344; border-color: rgba(217, 147, 68, 0.3); background: rgba(217, 147, 68, 0.08); }
.admin-badge-pill.is-accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.admin-badge-pill.is-mute   { color: var(--text-dim); }

.admin-pill {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 4px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
    border: 1px solid var(--border);
    border-radius: 100px;
}
.admin-mailing-stats { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.admin-spacer { color: var(--text-dim); margin: 0 6px; }

.admin-mute    { color: var(--text-dim); font-size: 0.85rem; }
.admin-loading { color: var(--text-dim); font-size: 0.85rem; }
.admin-error   { color: #ff7773; font-size: 0.85rem; }

/* Drawer */
.admin-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100%);
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 200;
    display: flex;
    flex-direction: column;
}
.admin-drawer.is-open { transform: translateX(0); }
.admin-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.admin-drawer-head h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}
.admin-drawer-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--dur);
}
.admin-drawer-close:hover { color: var(--text); border-color: var(--border-hover); }
.admin-drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
}

.admin-detail {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    padding: 18px 20px;
    background: var(--bg);
    border: none;
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    border-radius: 12px;
}
.admin-field { display: contents; }
.admin-field-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    align-self: center;
}
.admin-field-value { color: var(--text); font-size: 0.88rem; overflow-wrap: anywhere; }
.admin-field-value code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-secondary); }

.admin-field-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-detail-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-detail-h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 4px;
}

.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text);
}
.admin-toggle input { accent-color: var(--accent); }

.admin-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.admin-mini-list li {
    padding: 10px 14px;
    background: color-mix(in srgb, var(--bg-surface) 30%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.admin-mini-list code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text);
}

.admin-key-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.admin-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur);
}
.admin-copy-btn:hover {
    color: var(--accent);
}

.admin-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.btn-danger {
    background: color-mix(in srgb, #ff5d5d 20%, transparent);
    color: #ff7773;
    border: 1px solid rgba(255, 93, 93, 0.4);
}
.btn-danger:hover { background: color-mix(in srgb, #ff5d5d 35%, transparent); color: #fff; }

/* Modal */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.55);
}
.admin-modal[hidden] { display: none; }
.admin-modal-card {
    max-width: 440px;
    width: 100%;
    padding: 28px 28px 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}
.admin-modal-card h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}
.admin-modal-text { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 20px; }
.admin-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Toast */
.admin-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text);
    font-size: 0.85rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    z-index: 400;
    max-width: calc(100% - 32px);
    overflow-wrap: anywhere;
}
.admin-toast.is-success { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.admin-toast.is-error   { border-color: rgba(255, 93, 93, 0.4); color: #ff7773; }

/* Splash */
.admin-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--bg);
    z-index: 500;
}
.admin-splash[hidden] { display: none; }
.admin-splash-text { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 900px) {
    .admin-shell {
        grid-template-columns: 1fr;
        padding: 80px 16px 40px;
        gap: 16px;
    }
    .admin-sidebar {
        flex-direction: row;
        position: static;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .admin-nav-item { white-space: nowrap; flex-shrink: 0; }
    .admin-search { width: 100%; }
    .admin-drawer { width: 100%; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
    /* On narrow windows give the app top bar a solid frosted background so
       page content doesn't show through / overlap text when scrolling. */
    .nav {
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border-bottom: 1px solid var(--border);
    }
    /* Auth page doesn't scroll: keep its top bar seamless (no demarcation). */
    body:has(.auth-page) .nav {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
    }

    .auth-page { padding: 70px 16px 32px; }
    .auth-card { padding: 30px 24px; }   /* keep the 400px cap: don't let it fill the window */

    .dash-page { padding: 76px 16px 40px; gap: 32px; }
    .link-form { flex-direction: column; }
    .license-meta { flex-direction: column; gap: 2px; }
    .machine-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .user-email { display: none; }

    /* keep "All Packs" + search on one row (pills wrap to their own row below) */
    .preset-filters { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .filter-pills { flex-wrap: wrap; }
    .preset-search { max-width: none; }
    .presets-grid { grid-template-columns: repeat(2, 1fr); }
    .preset-card-actions { opacity: 1; }
    .selection-bar { flex-wrap: wrap; }
    .modal-card { max-width: 100%; padding: 24px; }

    /* keep search + sort dropdown on one row on mobile too */
    .library-controls { flex-direction: row; align-items: center; flex-wrap: nowrap; }
    .library-search { max-width: none; flex: 1 1 auto; }
    .library-grid { grid-template-columns: 1fr; }

    .account-field-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   LEGAL PAGE
   Long-form prose on the app shell. Scrolling is unlocked by the
   `body:has(.dash-page)` rule at the top of this file, so the page
   keeps `.dash-page` and only adds prose styling on top.
   ============================================================ */

/* The global reset kills text selection everywhere; a legal page has to
   be copyable in full. */
.legal-page,
.legal-page * { user-select: text; -webkit-user-select: text; }

.legal-page { gap: 28px; }

.legal-head { display: flex; flex-direction: column; gap: 6px; }

.legal-updated {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-dim);
    letter-spacing: 0.06em;
}

/* --- Table of contents --- */
.legal-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 18px 22px;
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
}

.legal-toc a {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    text-decoration: none;
    transition: color var(--dur);
}

.legal-toc a:hover { color: var(--accent); }

/* --- Sections --- */
.legal-sec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* the top bar is fixed at 64px: keep anchor jumps clear of it */
    scroll-margin-top: 84px;
}

.legal-sec h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-top: 8px;
}

/* Landing on an anchor tints the heading briefly so the target is obvious */
.legal-sec:target h2 { color: var(--accent); }

.legal-sec p,
.legal-sec li {
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.legal-sec ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 1.1rem;
}

.legal-sec li::marker { color: var(--text-dim); }

.legal-sec a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-hover);
    transition: color var(--dur), text-decoration-color var(--dur);
}

.legal-sec a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

@media (max-width: 768px) {
    .legal-toc { padding: 14px 16px; gap: 8px 12px; }
    .legal-sec p, .legal-sec li { font-size: 0.82rem; }
}

/* ============================================================
   DOWNLOAD + SUCCESS PAGES
   Public, no login. Scrolling comes from .dash-page (see the
   body:has() rule at the top of this file). The composition
   borrows from the vitrine (home.css): display-font headline,
   mono kickers, raised neumorphic cards, inset chips.
   ============================================================ */

.dl-page,
.dl-page * { user-select: text; -webkit-user-select: text; }

.dl-page {
    max-width: 860px;
    gap: 52px;
    padding-top: 112px;
}

/* --- Hero: kicker, display headline, version chip --- */
.dl-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}

.dl-kicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.dl-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 6vw, 3.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--text);
}

.dl-sub {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 44ch;
}

/* Version reads as a deliberate badge: inset neumorphic chip */
.dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding: 9px 20px;
    border-radius: 100px;
    background: var(--bg);
    box-shadow:
        inset 2px 2px 5px var(--neu-dark),
        inset -2px -2px 5px var(--neu-light);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
}

.dl-chip-v { color: var(--accent); font-weight: 600; }
.dl-chip-v::before { content: "v"; opacity: 0.7; }

/* --- One card, centered: it is the whole point of the page --- */
.dl-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.dl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    width: min(430px, 100%);
    padding: clamp(30px, 4.5vw, 44px) clamp(26px, 4vw, 40px);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow:
        9px 9px 22px var(--neu-dark),
        -9px -9px 22px var(--neu-light);
    transition: box-shadow var(--dur), transform var(--dur);
}

/* An author `display` beats the UA rule behind the `hidden` attribute, so the
   card would stay visible when download.js hides it. Restate it here. */
.dl-card[hidden],
.dl-alt[hidden] { display: none; }

.dl-card:hover {
    transform: translateY(-2px);
    box-shadow:
        11px 11px 26px var(--neu-dark),
        -11px -11px 26px var(--neu-light);
}

.dl-os {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.dl-specs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.dl-specs li {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--bg);
    box-shadow:
        inset 2px 2px 4px var(--neu-dark),
        inset -2px -2px 4px var(--neu-light);
    white-space: nowrap;
}

.dl-btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 15px 28px;
}

/* One quiet line under the button, not a section of its own */
.dl-hint {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    margin-top: -6px;
}

/* The other platform: one line, unmissable if you want it, silent if you
   do not. Revealed by download.js once the visitor's OS is known. */
.dl-alt {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.dl-alt a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-hover);
    transition: color var(--dur), text-decoration-color var(--dur);
}

.dl-alt a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* --- Success page: two quiet lines under the download --- */
.sx-notes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.sx-notes p {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-dim);
}

.sx-notes a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-hover);
    transition: color var(--dur), text-decoration-color var(--dur);
}

.sx-notes a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .dl-page { gap: 40px; padding-top: 96px; }
    .dl-actions { gap: 20px; }
}

/* Keep a short phrase from being split across lines */
.nowrap { white-space: nowrap; }