@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&family=Orbitron:wght@500;600;700&display=swap');

/* Shared, readable components. Theme worlds add their own character. */
:root, [data-site-theme="starlight"], [data-palette="starlight"] {
    color-scheme: dark;
    --page: #15112d; --surface: #211b3d; --surface-raised: #2a214b;
    --ink: #fbf4ff; --muted: #c3b7dc; --subtle: #b0a0ca;
    --line: #554472; --accent: #c7adff; --accent-ink: #2e1c4c;
    --secondary: #ffc8e7; --danger: #ffaaaa; --success: #9de6d2;
    --ambient: rgba(184, 137, 255, .12); --shadow: rgba(8, 5, 24, .3);
    --display-font: 'Fredoka', 'Trebuchet MS', sans-serif;
    --body-font: 'Nunito', 'Segoe UI', sans-serif; --card-radius: 24px;
}
[data-site-theme="mochi"], [data-palette="mochi"] {
    color-scheme: light;
    --page: #fff4f4; --surface: #fffdfb; --surface-raised: #fbe4ed;
    --ink: #644356; --muted: #805e70; --subtle: #8c6477;
    --line: #d5a6b9; --accent: #a3396a; --accent-ink: #ffffff;
    --secondary: #834995; --danger: #ac293e; --success: #397b67;
    --ambient: rgba(224, 144, 178, .13); --shadow: #efd4dd;
    --display-font: 'Fredoka', 'Trebuchet MS', sans-serif;
    --body-font: 'Nunito', 'Segoe UI', sans-serif; --card-radius: 28px;
}
[data-site-theme="arcade"], [data-palette="arcade"] {
    color-scheme: dark;
    --page: #0d1724; --surface: #132437; --surface-raised: #1b3047;
    --ink: #e6fbff; --muted: #b3cadb; --subtle: #93aebf;
    --line: #3e657a; --accent: #68f0dc; --accent-ink: #102e38;
    --secondary: #fa96d0; --danger: #ffaaaa; --success: #68f0dc;
    --ambient: rgba(104, 240, 220, .07); --shadow: #050b14;
    --display-font: 'Orbitron', 'Consolas', monospace;
    --body-font: 'Nunito', 'Segoe UI', sans-serif; --card-radius: 6px;
}
[data-site-theme="raincheck"], [data-palette="raincheck"] {
    color-scheme: light;
    --page: #ede4d3; --surface: #fbf5e9; --surface-raised: #e3d6be;
    --ink: #383c32; --muted: #716552; --subtle: #7a6a52;
    --line: #bdad90; --accent: #496455; --accent-ink: #fff7e8;
    --secondary: #965039; --danger: #a13232; --success: #38664e;
    --ambient: #49645512; --shadow: #51433025;
    --display-font: Georgia, 'Times New Roman', serif;
    --body-font: 'Nunito', 'Segoe UI', sans-serif; --card-radius: 5px;
}
[data-site-theme="ghostlight"], [data-palette="ghostlight"] {
    color-scheme: dark;
    --page: #211b28; --surface: #302433; --surface-raised: #3d2b40;
    --ink: #f4e3cb; --muted: #c7b1c1; --subtle: #baa4b5;
    --line: #705469; --accent: #f0c58b; --accent-ink: #38263a;
    --secondary: #b9d9bc; --danger: #ffb5a7; --success: #b9d9bc;
    --ambient: #f0c58b10; --shadow: #0d0b144d;
    --display-font: Georgia, 'Times New Roman', serif;
    --body-font: 'Nunito', 'Segoe UI', sans-serif; --card-radius: 18px;
}
html[data-site-theme] {
    --minimal-bg: var(--page); --minimal-surface: var(--surface);
    --minimal-border: var(--line); --minimal-border-hover: var(--subtle);
    --minimal-accent: var(--accent); --minimal-accent-hover: var(--secondary);
    --minimal-success: var(--success); --minimal-error: var(--danger); --minimal-warning: #d8b769;
    --text-primary: var(--ink); --text-secondary: var(--muted); --text-muted: var(--subtle);
    --dark-bg: var(--page); --dark-surface: var(--surface); --dark-surface-hover: var(--surface-raised);
    --dark-border: var(--line); --dark-border-hover: var(--subtle); --dark-accent: var(--accent);
    --dark-accent-hover: var(--secondary); --dark-success: var(--success); --dark-error: var(--danger);
    --abuse-bg: var(--page); --abuse-surface: var(--surface); --abuse-border: var(--line);
    --abuse-text-primary: var(--ink); --abuse-text-secondary: var(--muted); --abuse-text-muted: var(--subtle);
    --abuse-primary: var(--accent); --abuse-success: var(--success); --abuse-error: var(--danger);
    --shadow-sm: 0 2px 6px var(--shadow); --shadow-md: 0 10px 30px var(--shadow); --shadow-lg: 0 20px 60px var(--shadow);
}
html[data-site-theme] body {
    background: var(--page); color: var(--ink);
    font-family: var(--body-font);
    -webkit-font-smoothing: antialiased; line-height: 1.55;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eyebrow { font: 700 10px/1.6 var(--body-font); letter-spacing: .13em; color: var(--accent); }
.brand-mark { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); transform: rotate(-7deg); }
.brand-mark svg { width: 30px; height: 30px; color: var(--accent-ink); }
.brand-mark svg path:last-child { stroke: var(--accent); }
.brand-star { font-size: 17px; color: var(--secondary); align-self: flex-start; margin-top: 4px; }

/* Shared public workspace. */
.site-home .container { width: min(1180px, 100%); max-width: 1180px; padding: 0 32px; margin: 0 auto; }
.site-home .site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 20px; border-bottom: 1px dashed var(--line); }
.site-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 500 29px var(--display-font); letter-spacing: -.7px; }
.site-nav-note { font: 600 12px var(--body-font); color: var(--muted); }
.site-nav-note span { color: var(--secondary); margin-left: 9px; font-size: 20px; }
.site-home .header { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 10px; position: relative; padding: 36px 0 30px; margin: 0; text-align: left; border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.site-home .header:hover { box-shadow: none; }
.site-home .header h1 { font-family: var(--display-font); font-size: clamp(38px, 5.6vw, 64px); letter-spacing: -.025em; line-height: 1.08; font-weight: 500; margin: 18px 0 19px; max-width: 690px; }
.site-home .header h1 em { font-style: normal; color: var(--accent); }
.site-home .header p { max-width: 435px; margin: 0; font-size: 15px; color: var(--muted); }
.site-home .header .eyebrow { color: var(--accent); font-size: 10px; }
.hero-illustration { min-width: 0; text-align: center; }
.world-art { display: block; width: 100%; height: auto; overflow: visible; }
.mascot-caption { color: var(--subtle); font: 10px 'Consolas', monospace; }
.site-home .login-section-banner { text-align: left; padding: 0; margin: 26px 0 0; }
.site-home .login-modal-button-banner, .site-home .login-button-modal { display: inline-flex; align-items: center; gap: 14px; padding: 13px 22px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: 14px; box-shadow: 0 4px 0 var(--line); font-size: 14px; font-weight: 800; }
.site-home .login-modal-button-banner:hover, .site-home .login-button-modal:hover { transform: translateY(-1px); background: var(--secondary); box-shadow: none; }
.login-hint { display: block; color: var(--subtle); font-size: 11px; margin-top: 14px; }
.club-strip { display: flex; justify-content: space-between; gap: 14px; padding: 12px 1px; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); margin: 14px 0 30px; color: var(--muted); font-size: 10px; }
.site-home .dashboard-layout { width: 100%; max-width: none; display: block; margin: 0; }
.site-home .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; width: 100%; min-width: 0; }
.site-home .card { background: var(--surface); border-color: var(--line); box-shadow: 0 5px 0 var(--shadow); border-radius: var(--card-radius); padding: 25px 27px; margin-bottom: 0; min-width: 0; }
.site-home .card:hover { transform: none; border-color: var(--line); box-shadow: none; }
.site-home .card h3 { font: 500 21px var(--display-font); margin-bottom: 20px; gap: 10px; }
.site-home .card h3 small { margin-left: auto; font: 600 10px var(--body-font); color: var(--subtle); }
.section-symbol { display: inline-grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; background: var(--ambient); color: var(--accent); border-radius: 10px; font-size: 21px; }
.site-home .cat-emoji { display: none; }
.site-home .system-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
.site-home .stat-box { padding: 0 25px; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none; min-width: 0; }
.site-home .stat-box:nth-child(odd) { padding-left: 0; }
.site-home .stat-box:nth-child(even) { border-right: 0; }
.site-home .stat-box:hover { transform: none; }
.site-home .stat-value { color: var(--accent); font-weight: 700; font-size: clamp(20px, 2.9vw, 30px); letter-spacing: -.04em; text-align: left; line-height: 1.3; }
.site-home .stat-label { color: var(--muted); font-size: 11px; text-transform: none; letter-spacing: 0; text-align: left; margin-top: 7px; }
.site-home .endpoint-display { background: var(--page); border: 1px solid var(--line); padding: 17px 20px; border-radius: 8px; }
.site-home .endpoint-label { color: var(--subtle); text-transform: uppercase; font: 10px "Consolas", monospace; letter-spacing: .1em; margin-bottom: 10px; }
.site-home .endpoint-url { color: var(--accent); background: transparent; font-size: 14px; overflow-wrap: anywhere; white-space: normal; padding: 0; min-width: 0; }
.site-home code.endpoint-url { border: 0; box-shadow: none; }
.site-home .endpoint-url-container { gap: 15px; display: flex; justify-content: space-between; align-items: center; }
.site-home .copy-button { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; flex-shrink: 0; padding: 6px 12px; }
.site-home .endpoint-description { color: var(--muted); font-size: 12px; margin-top: 13px; }
.site-home .provider-section { margin-top: 18px; border: 0; padding: 0; background: transparent; }
.site-home .provider-header { display: flex; flex-direction: row; align-items: center; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 13px 0; }
.site-home .provider-icon { display: flex; align-items: center; width: 23px; height: 23px; margin: 0; }
.site-home .provider-name { color: var(--ink); font-size: 14px; }
.site-home .key-stats-display { color: var(--muted); background: transparent; border: 0; box-shadow: none; white-space: normal; overflow-wrap: anywhere; font-size: 10px; padding: 0; }
.site-home .cosmic-model-count { color: var(--muted); background: transparent; border: 0; box-shadow: none; padding: 0; }
.site-home .provider-models { padding: 17px 0; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.site-home .homepage-model-card { color: var(--ink); background: var(--page); border: 1px solid var(--line); border-radius: 9px; box-shadow: none; }
.site-home .homepage-model-card:hover { border-color: var(--accent); transform: none; box-shadow: none; }
.site-home .homepage-model-name, .site-home .homepage-stat-value { color: var(--ink); }
.site-home .homepage-stat-label, .site-home .homepage-model-footer { color: var(--muted); }
.site-home .homepage-model-stats, .site-home .homepage-model-footer { background: transparent; border-color: var(--line); }
.site-home .homepage-model-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-home .homepage-stat-item { background: transparent; padding: 6px 0; border: 0; box-shadow: none; }
.site-home .homepage-stat-value { font-size: 15px; }
.site-home .homepage-stat-label { font-size: 9px; }
.site-home .homepage-status-online { color: var(--success); background: var(--surface-raised); border-color: var(--line); }
.site-home .homepage-footer-tooltip { color: var(--ink); background: var(--surface-raised); border-color: var(--line); }
.site-home .refresh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 15px; margin: 30px 0; padding: 20px 0; color: var(--muted); font-size: 11px; border-top: 1px solid var(--line); }
.site-home footer.refresh { background: transparent; box-shadow: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); }
.site-home .manual-refresh-btn { background: transparent; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); box-shadow: none; margin: 0; font-size: 11px; padding: 7px 12px; }
.site-home .auth-modal, .site-home .auth-modal-content { animation: none; }
.site-home .auth-modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(440px, calc(100vw - 32px)); }
.site-home .auth-modal-header { background: var(--surface); border-bottom-color: var(--line); }
.site-home .auth-modal-header h3 { color: var(--ink); font-size: 20px; }
.site-home .auth-description { color: var(--muted); }
.site-home .token-input-modal { background: var(--page); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.site-home .token-input-modal:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ambient); }
.site-home .close-button { color: var(--muted) !important; border-color: var(--line) !important; }
.site-home .close-button:hover { color: var(--ink) !important; background: var(--surface-raised) !important; }
.site-home .user-stats-section, .site-home .analytics-card, .site-home .user-stat-box { background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.site-home .user-stat-value, .site-home .streak-number { color: var(--accent); }
.site-home .models-empty, .site-home .models-loading { color: var(--muted); }
.site-home .preview-label { padding: 10px 16px; background: var(--surface-raised); color: var(--muted); text-align: center; font: 10px "Consolas", monospace; letter-spacing: .08em; }

/* Bring the existing admin screens along through semantic tokens. */
html[data-site-theme] .admin-container { background: var(--page); }
html[data-site-theme] :is(.admin-sidebar, .service-section, .stat-card, .table-container, .form-container, .modal-content, .login-container) { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-site-theme] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background-color: var(--page); color: var(--ink); border-color: var(--line); }
html[data-site-theme] :is(th, .table-header, .modal-header) { background-color: var(--surface-raised); color: var(--ink); border-color: var(--line); }
html[data-site-theme] :is(td, .form-group label, .form-label) { color: var(--ink); border-color: var(--line); }
html[data-site-theme] .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-site-theme] .login-button { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .site-home .provider-logo { filter: brightness(0) invert(.9); }
html[data-site-theme] .nav-item.active { color: var(--accent); background: var(--ambient); border-color: var(--accent); }
html[data-site-theme] .admin-main { min-width: 0; }
@media (max-width: 900px) {
    .site-home .stats-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .site-home .container { padding: 0 20px; }
    .site-home .site-nav { min-height: 73px; }
    .site-nav-note { font-size: 9px; }
    .site-home .header { grid-template-columns: 1fr; text-align: center; padding: 20px 0 15px; }
    .hero-illustration { grid-row: 1; width: min(250px, 80%); margin: 0 auto 8px; }
    .mascot-caption { display: none; }
    .site-home .header h1 { max-width: none; font-size: 42px; margin: 12px 0; }
    .site-home .header p { font-size: 14px; max-width: 360px; margin: auto; }
    .site-home .header .eyebrow { font-size: 9px; }
    .site-home .login-section-banner { margin: 20px 0 10px; text-align: center; }
    .site-home .login-modal-button-banner { width: auto; }
    .club-strip { justify-content: center; font-size: 10px; margin-top: 12px; }
    .club-strip span:not(:first-child) { display: none; }
    .site-home .card h3 { font-size: 18px; flex-wrap: wrap; }
    .site-home .card h3 small { font-size: 9px; }
    .site-home .card { padding: 20px; }
    .site-home .system-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
    .site-home .stat-box { padding: 0 0 0 18px; }
    .site-home .stat-box:nth-child(odd) { padding-left: 0; }
    .site-home .stat-box:nth-child(even) { border: 0; }
    .site-home .endpoint-display { padding: 13px; }
    .site-home .endpoint-url { font-size: 11px; }
    .site-home .copy-icon { display: none; }
    .site-home .provider-header { flex-wrap: wrap; gap: 8px; }
    .site-home .provider-key-stats { width: 100%; }
    .site-home .user-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html[data-site-theme] .admin-container { flex-direction: column; }
    html[data-site-theme] .admin-sidebar { width: 100%; }
    html[data-site-theme] .admin-nav { display: flex; flex-wrap: wrap; }
    html[data-site-theme] .nav-item { padding: 10px 12px; }
    html[data-site-theme] .admin-main { padding: 20px; }
    html[data-site-theme] .table-container { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}