/* ========================================================================== 
   Accounts, themes, profile, store, admin, and subscriptions
   ========================================================================== */

:root[data-theme="aurora"],
:root:not([data-theme]) {
    --bg-primary: #050e14;
    --bg-secondary: #071923;
    --bg-tertiary: #0b2630;
    --text-primary: #e9fff9;
    --text-secondary: #9fcac4;
    --text-dim: #638782;
    --accent-cyan: #5ef5dd;
    --accent-magenta: #ff67bc;
    --accent-yellow: #ffe477;
    --accent-green: #73ff9f;
    --accent-red: #ff6680;
    --accent-orange: #ffad5c;
    --accent-purple: #a88aff;
    --glow-cyan: 0 0 10px #5ef5dd, 0 0 28px #5ef5dd38;
    --glow-magenta: 0 0 10px #ff67bc, 0 0 28px #ff67bc38;
    --border-arcade: 1px solid #1d5960;
}

:root[data-theme="aurora"] body,
:root:not([data-theme]) body {
    background-color: #030a0f;
    background-image:
        linear-gradient(116deg, transparent 0 12%, rgba(80, 255, 190, 0.13) 20%, transparent 34%),
        linear-gradient(72deg, transparent 0 47%, rgba(229, 75, 179, 0.10) 56%, transparent 70%),
        linear-gradient(180deg, #06151d 0%, #03090e 70%);
}

:root[data-theme="midnight"] {
    --bg-primary: #080a12;
    --bg-secondary: #111421;
    --bg-tertiary: #1c2030;
    --text-primary: #f2f4ff;
    --text-secondary: #afb6d0;
    --text-dim: #747c99;
    --accent-cyan: #8ed8ff;
    --accent-magenta: #ff769e;
    --accent-yellow: #ffe080;
    --accent-green: #7be8b5;
    --accent-purple: #b89dff;
    --glow-cyan: 0 0 12px #8ed8ff55;
    --glow-magenta: 0 0 12px #ff769e55;
    --border-arcade: 1px solid #39415b;
}

:root[data-theme="midnight"] body {
    background-image: linear-gradient(145deg, #131624 0%, #080a12 52%, #101522 100%);
}

:root[data-theme="neon"] {
    --bg-primary: #100611;
    --bg-secondary: #1a0a1e;
    --bg-tertiary: #28122d;
    --text-primary: #fff4ff;
    --text-secondary: #e4b7df;
    --text-dim: #a777a1;
    --accent-cyan: #3df5ff;
    --accent-magenta: #ff3baa;
    --accent-yellow: #f8ff5c;
    --accent-green: #5dff93;
    --accent-purple: #c46cff;
    --glow-cyan: 0 0 10px #3df5ff, 0 0 25px #3df5ff42;
    --glow-magenta: 0 0 10px #ff3baa, 0 0 25px #ff3baa42;
    --border-arcade: 1px solid #70436d;
}

:root[data-theme="neon"] body {
    background-image:
        linear-gradient(124deg, transparent 0 24%, rgba(61, 245, 255, 0.10) 36%, transparent 48%),
        linear-gradient(55deg, #160719 0%, #08070e 56%, #1c081c 100%);
}

:root[data-theme="high-contrast"] {
    --bg-primary: #000;
    --bg-secondary: #080808;
    --bg-tertiary: #181818;
    --text-primary: #fff;
    --text-secondary: #f2f2f2;
    --text-dim: #bfbfbf;
    --accent-cyan: #00ffff;
    --accent-magenta: #ff55cc;
    --accent-yellow: #ffff00;
    --accent-green: #00ff66;
    --accent-red: #ff3355;
    --accent-purple: #cc88ff;
    --glow-cyan: none;
    --glow-magenta: none;
    --border-arcade: 2px solid #fff;
}

:root[data-theme="high-contrast"] body { background: #000; }

.account-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 7.5rem;
    min-height: 2.25rem;
    margin-left: auto;
    margin-right: 1rem;
    padding: 0.35rem 0.65rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--text-dim);
    border-radius: 4px;
    font: 700 0.7rem var(--font-display);
    letter-spacing: 0;
    cursor: pointer;
}

.account-nav-button:hover,
.account-nav-button:focus-visible,
.account-nav-button.signed-in {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    outline: none;
}

.account-nav-icon { font-size: 1rem; }

.account-notifications {
    position: fixed;
    z-index: 1000;
    top: 4rem;
    right: 1rem;
    display: grid;
    gap: 0.5rem;
    width: min(25rem, calc(100vw - 2rem));
    pointer-events: none;
}

.account-notice {
    padding: 0.85rem 1rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border-left: 4px solid var(--accent-cyan);
    box-shadow: 0 8px 28px #0008;
    font-size: 0.85rem;
    animation: account-notice-in 180ms ease-out;
}

.account-notice.error { border-color: var(--accent-red); }
.account-notice.success { border-color: var(--accent-green); }
.account-notice.leaving { opacity: 0; transform: translateX(1rem); transition: 180ms ease; }

@keyframes account-notice-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

.account-scene {
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.account-surface {
    width: min(100%, 48rem);
    min-height: min(34rem, 100%);
    padding: clamp(1rem, 3vw, 2rem);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 46%, var(--bg-tertiary));
    border-radius: 6px;
    box-shadow: 0 18px 60px #0009;
}

.account-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bg-tertiary);
}

.account-surface-header h2 {
    margin-top: 0.25rem;
    color: var(--accent-cyan);
    font: 800 clamp(1.25rem, 3vw, 1.8rem) var(--font-display);
    letter-spacing: 0;
}

.account-kicker {
    color: var(--text-dim);
    font-size: 0.65rem;
}

.account-icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--text-dim);
    border-radius: 4px;
    cursor: pointer;
}

.account-icon-button:hover,
.account-icon-button:focus-visible {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    outline: none;
}

.account-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 1.2rem 0;
    border: 1px solid var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.account-tab {
    min-height: 2.7rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 0;
    border-right: 1px solid var(--bg-tertiary);
    font: 700 0.72rem var(--font-display);
    letter-spacing: 0;
    cursor: pointer;
}

.account-tab:last-child { border-right: 0; }
.account-tab.active { color: var(--bg-primary); background: var(--accent-cyan); }
.account-tab:focus-visible { outline: 2px solid var(--accent-yellow); outline-offset: -3px; }

.account-form {
    display: grid;
    gap: 1rem;
    width: min(100%, 30rem);
    margin: 2rem auto 0;
}

.account-form label,
.profile-name-form label,
.admin-project-editor label,
.subscription-plan-picker label {
    display: grid;
    gap: 0.4rem;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 700;
}

.account-surface input,
.account-surface select,
.account-surface textarea {
    min-width: 0;
    min-height: 2.65rem;
    padding: 0.62rem 0.7rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--text-dim);
    border-radius: 3px;
    font: 0.85rem var(--font-main);
}

.account-surface textarea {
    resize: vertical;
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}

.account-surface input:focus,
.account-surface select:focus,
.account-surface textarea:focus {
    border-color: var(--accent-cyan);
    outline: 2px solid color-mix(in srgb, var(--accent-cyan) 26%, transparent);
}

.account-surface button:not(.account-icon-button):not(.account-tab) {
    min-height: 2.55rem;
    padding: 0.5rem 0.9rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--text-dim);
    border-radius: 4px;
    font: 700 0.7rem var(--font-display);
    letter-spacing: 0;
    cursor: pointer;
}

.account-surface button:not(.account-icon-button):not(.account-tab):hover,
.account-surface button:not(.account-icon-button):not(.account-tab):focus-visible {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    outline: none;
}

.account-surface button:disabled { opacity: 0.46; cursor: not-allowed; }

.account-surface .account-primary-command {
    color: #03100e !important;
    background: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

.account-surface .account-danger-command {
    color: var(--accent-red) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--accent-red) 60%, var(--bg-tertiary)) !important;
}

.account-form-error {
    min-height: 1.3rem;
    margin-top: 1rem;
    color: var(--accent-red);
    font-size: 0.78rem;
    text-align: center;
}

.account-form-error.is-success { color: var(--accent-green); }
.account-loading { padding: 3rem 1rem; color: var(--text-dim); text-align: center; }
.account-empty { padding: 1.5rem; color: var(--text-dim); text-align: center; }
.account-surface .hidden { display: none !important; }

.account-session { display: grid; gap: 1.5rem; padding-top: 2rem; }
.account-identity { display: flex; align-items: center; gap: 1rem; }
.account-identity > div { display: grid; gap: 0.3rem; min-width: 0; }
.account-identity strong { overflow-wrap: anywhere; color: var(--accent-cyan); font-size: 1.2rem; }
.account-identity span { color: var(--text-dim); font-size: 0.7rem; }

.account-mini-avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
    border: 2px solid var(--accent-cyan);
    border-radius: 6px;
    background: linear-gradient(145deg, var(--accent-green), var(--accent-purple));
}

.account-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--bg-tertiary); }
.account-stats div { display: grid; gap: 0.3rem; padding: 1rem; }
.account-stats div + div { border-left: 1px solid var(--bg-tertiary); }
.account-stats dt { color: var(--text-dim); font-size: 0.62rem; }
.account-stats dd { color: var(--accent-yellow); font-size: 1.1rem; }
.account-command-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.profile-surface,
.admin-surface { width: min(100%, 70rem); }

.profile-balance {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.7rem;
    color: var(--text-dim);
    font-size: 0.65rem;
}

.profile-balance strong { color: var(--accent-yellow); font-size: 1.2rem; }
.profile-view { padding-top: 1rem; }

.avatar-editor {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bg-tertiary);
}

.avatar-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 9rem;
    aspect-ratio: 1;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, var(--avatar-bg-a), var(--avatar-bg-b));
    border: 6px solid var(--avatar-border);
    border-radius: 8px;
    box-shadow: inset 0 0 30px #0006, 0 0 22px color-mix(in srgb, var(--avatar-border) 32%, transparent);
}

.avatar-preview::before {
    content: '';
    position: absolute;
    inset: 13%;
    border: 1px solid #fff7;
    transform: rotate(45deg);
}

.avatar-preview[data-avatar-border*="pulse"] { border-style: double; border-width: 8px; }
.avatar-preview[data-avatar-border*="prism"] { border-color: var(--accent-magenta); outline: 3px solid var(--accent-cyan); }
.avatar-foreground { position: relative; z-index: 1; color: var(--avatar-fg); font: 900 4.5rem var(--font-display); text-shadow: 0 2px 0 #000, 0 0 12px #fff8; }
.profile-name-form { display: flex; align-items: end; gap: 0.75rem; }
.profile-name-form label { flex: 1; }

.profile-security-form {
    display: grid;
    gap: 1rem;
    width: min(100%, 30rem);
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bg-tertiary);
}

.profile-security-form h3 { color: var(--text-dim); font-size: 0.7rem; }

.profile-security-form label {
    display: grid;
    gap: 0.4rem;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-weight: 700;
}

.avatar-slots { display: grid; gap: 1.25rem; padding-top: 1.5rem; }
.avatar-slot h3 { margin-bottom: 0.65rem; color: var(--text-dim); font-size: 0.7rem; }
.avatar-choice-row { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.35rem; }

.account-surface .avatar-choice {
    display: grid;
    grid-template-columns: 2rem minmax(5rem, auto);
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    text-align: left;
}

.account-surface .avatar-choice.selected { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.avatar-choice-swatch { width: 2rem; height: 2rem; border-radius: 3px; background: var(--swatch-color); }
.avatar-choice-swatch.foreground { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.avatar-choice-swatch.border { background: transparent; border: 4px solid var(--swatch-color); }

.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.account-surface .theme-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem !important; padding: 1rem !important; }
.account-surface .theme-option.selected { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; }
.theme-swatches { display: flex; gap: 0.3rem; }
.theme-swatches i { display: block; width: 1.4rem; height: 2.2rem; background: #5ef5dd; }
.theme-swatches i:nth-child(2) { background: #ff67bc; }
.theme-swatches i:nth-child(3) { background: #071923; }
.theme-midnight .theme-swatches i:first-child { background: #8ed8ff; }
.theme-midnight .theme-swatches i:nth-child(2) { background: #ff769e; }
.theme-midnight .theme-swatches i:nth-child(3) { background: #111421; }
.theme-neon .theme-swatches i:first-child { background: #3df5ff; }
.theme-neon .theme-swatches i:nth-child(2) { background: #ff3baa; }
.theme-neon .theme-swatches i:nth-child(3) { background: #1a0a1e; }
.theme-high-contrast .theme-swatches i:first-child { background: #fff; }
.theme-high-contrast .theme-swatches i:nth-child(2) { background: #ffff00; }
.theme-high-contrast .theme-swatches i:nth-child(3) { background: #000; border: 1px solid #fff; }
.account-theme-select { width: min(15rem, 55%); }

.store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.store-item { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; min-width: 0; padding: 0.8rem; background: var(--bg-primary); border: 1px solid var(--bg-tertiary); border-radius: 4px; }
.store-item-preview { width: 3rem; aspect-ratio: 1; border: 5px solid color-mix(in srgb, var(--store-color) 62%, #fff); border-radius: 5px; background: var(--store-color); }
.store-item > div { display: grid; gap: 0.25rem; min-width: 0; }
.store-item h3 { overflow-wrap: anywhere; font-size: 0.8rem; }
.store-item span { color: var(--text-dim); font-size: 0.62rem; }

.admin-surface { min-height: calc(100vh - 8rem); }
.admin-view { padding-top: 1rem; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-section-heading h3 { color: var(--accent-cyan); font-size: 0.9rem; }
.admin-section-heading p { margin-top: 0.3rem; color: var(--text-dim); font-size: 0.68rem; }
.admin-policy-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.admin-policy-table h4 { grid-column: 1 / -1; margin-top: 1rem; padding: 0.7rem 0; color: var(--accent-magenta); border-bottom: 1px solid var(--bg-tertiary); font-size: 0.75rem; }
.admin-policy-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; border-bottom: 1px solid var(--bg-tertiary); color: var(--text-secondary); font-size: 0.75rem; }
.admin-policy-row select { width: 8rem; min-height: 2.2rem; }
.admin-data-list { display: grid; gap: 0.5rem; }
.admin-data-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem; background: var(--bg-primary); border: 1px solid var(--bg-tertiary); border-radius: 4px; }
.admin-data-row > div:first-child { display: grid; gap: 0.25rem; min-width: 0; }
.admin-data-row strong { overflow-wrap: anywhere; color: var(--text-primary); font-size: 0.8rem; }
.admin-data-row span { overflow-wrap: anywhere; color: var(--text-dim); font-size: 0.62rem; }
.admin-data-row > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
.admin-project-layout { display: grid; grid-template-columns: minmax(14rem, 0.75fr) minmax(20rem, 1.25fr); gap: 1.25rem; }
.admin-project-list { display: grid; gap: 0.4rem; max-height: 34rem; overflow: auto; }
.account-surface .admin-project-button { display: grid; gap: 0.3rem; width: 100%; text-align: left; }
.admin-project-button span { color: var(--text-dim); font-size: 0.62rem; }
.admin-project-editor { display: grid; gap: 0.8rem; align-content: start; padding-left: 1.25rem; border-left: 1px solid var(--bg-tertiary); }
.admin-project-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }

.subscription-surface { width: min(100%, 42rem); }
.subscription-content { display: grid; gap: 1.5rem; padding-top: 2rem; }
.subscription-status-band { display: grid; gap: 0.5rem; padding: 1.5rem; border-block: 1px solid var(--bg-tertiary); text-align: center; }
.subscription-status-band span { color: var(--text-dim); font-size: 0.65rem; }
.subscription-status-band strong { color: var(--accent-cyan); font-size: 2rem; }
.subscription-status-band small { min-height: 1rem; color: var(--text-secondary); }
.subscription-plan-picker { width: min(100%, 24rem); margin: 0 auto; }
.subscription-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; }

@media (max-width: 760px) {
    .region-title { padding-inline: 0.75rem; }
    .account-nav-button { min-width: 2.5rem; margin-right: 0.5rem; }
    .account-nav-button [data-account-nav-label] { display: none; }
    .account-surface { min-height: 100%; padding: 1rem; }
    .profile-tabs,
    .admin-tabs { grid-auto-flow: row; grid-template-columns: 1fr; }
    .account-tab { border-right: 0; border-bottom: 1px solid var(--bg-tertiary); }
    .account-tab:last-child { border-bottom: 0; }
    .avatar-editor { grid-template-columns: 1fr; justify-items: center; }
    .profile-name-form { width: 100%; }
    .theme-options,
    .store-grid,
    .admin-policy-table { grid-template-columns: 1fr; }
    .admin-project-layout { grid-template-columns: 1fr; }
    .admin-project-editor { padding-top: 1rem; padding-left: 0; border-top: 1px solid var(--bg-tertiary); border-left: 0; }
    .admin-project-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .account-scene { padding: 0; }
    .account-surface { border-inline: 0; border-radius: 0; }
    .account-surface-header h2 { font-size: 1.2rem; }
    .profile-name-form,
    .admin-section-heading,
    .admin-data-row { align-items: stretch; flex-direction: column; }
    .admin-data-row > div:last-child { justify-content: stretch; }
    .admin-data-row > div:last-child button { flex: 1; }
    .account-stats { grid-template-columns: 1fr; }
    .account-stats div + div { border-top: 1px solid var(--bg-tertiary); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .account-notice { animation: none; }
}