.app-svg-icon,
.app-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.app-svg-icon { fill: currentColor; }
/* Shared Rebel design system. Page shells own gutters; cards own internal padding.
   Light/dark values follow the approved Rebel Network palette.
   Type uses the shared system-font stack owned by Rebel.Shared.UI. */
:root {
    color-scheme: dark;


    --app-surface-2: #27292D;
    --app-surface-elevated: #24262B;

    --app-chip-bg: rgba(170, 167, 255, 0.14);
    --app-chip-border: rgba(170, 167, 255, 0.32);
    --app-hero-art-bg: #1D1F22;

    --service-dating: #d72f55;
    --service-escort: #7c3aed;
    --service-chat: #e97945;
    --service-stream: #d83a3a;
    --service-market: #27805b;
    --service-home: #b26720;
    --service-jobs: #5550ad;

    --app-warning-soft: rgba(232, 181, 88, 0.14);
    --app-danger-soft: rgba(240, 131, 139, 0.14);
    --app-info-soft: rgba(124, 198, 220, 0.14);

    --app-card-bg: #1D1F22;
    --app-card-hover: #24262B;
    --app-hover-bg: rgba(255, 255, 255, 0.06);
    --app-field-bg: #1D1F22;
    --app-focus-ring: 0 0 0 3px rgba(170, 167, 255, 0.35);
    --app-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.24);

    --app-page-padding-block: 1rem;
    --app-section-padding-block: clamp(3rem, 6vw, 5rem);
    --app-section-gap: clamp(2.5rem, 5vw, 4.5rem);
    --app-card-padding-compact: 0.8rem;
    --app-grid-gap: 0.9rem;
    --app-grid-gap-compact: 0.65rem;

    --app-radius-sm: 8px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;
    --app-control-height-mobile: 34px;
    --app-auth-form-max: 420px;
    --app-auth-card-max: 920px;
    --app-auth-card-max-mobile: 440px;
    --app-transition: 0.2s ease;

    --z-content: 1;
    --z-header: 100;
    --z-sticky-header: 100;
    --z-mobile-nav: 700;
    --z-dropdown: 300;
    --z-error: 1000;

    /* Compatibility aliases while component styles migrate to semantic tokens. */
    --bg: var(--app-bg);
    --bg2: var(--app-surface);
    --bg3: var(--app-surface-2);
    --border: var(--app-border);
    --text: var(--app-text);
    --muted: var(--app-text-muted);
    --accent: var(--app-primary);
    --accent2: var(--app-accent);
    --glow: var(--app-shadow-soft);
    --card-bg: var(--app-card-bg);
    --card-hover: var(--app-card-hover);
    --radius: var(--app-radius-lg);
    --transition: var(--app-transition);
}

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

    --app-surface-2: #EEEFEC;
    --app-surface-elevated: #FFFFFF;
    --app-chip-bg: rgba(87, 91, 199, 0.08);
    --app-chip-border: rgba(87, 91, 199, 0.28);
    --app-warning-soft: #FBF0DA;
    --app-danger-soft: #FBE9E9;
    --app-info-soft: #E2F2F7;
    --app-card-bg: #FFFFFF;
    --app-card-hover: #F4F4F2;
    --app-hover-bg: #EFEFEB;
    --app-field-bg: #FFFFFF;
    --app-focus-ring: 0 0 0 3px rgba(87, 91, 199, 0.28);
    --app-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: var(--app-font-sans);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
    letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
a { color: var(--app-primary); }

.app-container,
.page-shell {
    width: 100%;
    padding-inline: var(--app-page-padding-inline);
}

.page-shell {
    padding-block: var(--app-section-padding-block);
}

.eyebrow {
    display: inline-block;
    color: var(--app-primary);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.form-control,
.form-select {
    min-height: var(--app-control-height);
    border-color: var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-field-bg);
    color: var(--app-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-primary);
    background: var(--app-field-bg);
    color: var(--app-text);
    box-shadow: var(--app-focus-ring);
}

.form-control::placeholder { color: var(--app-text-muted); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border); }
.text-muted { color: var(--app-text-muted) !important; }

/* ── Gradient mesh (global background) ── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-body {
    position: relative;
    z-index: 1;
}

/* ── Blazor error boundary ── */
.blazor-error-boundary {
    background: var(--app-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Validation ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--app-success); }
.invalid { outline: 1px solid var(--app-danger); }
.validation-message { color: var(--app-danger); font-size: 0.8rem; margin-top: 4px; }

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-flex !important;
    align-items: center;
}

/* ── Focus-ring override ─────────────────────────────────────── */
/* Blazor programmatic focus() triggers :focus (not :focus-visible).
   Kill outlines/shadows on all non-interactive containers for both. */
section:focus, div:focus, main:focus, header:focus, nav:focus,
footer:focus, article:focus, aside:focus, html:focus, body:focus,
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
p:focus, span:focus, ul:focus, ol:focus, li:focus, form:focus,
section:focus-visible, div:focus-visible, main:focus-visible,
header:focus-visible, nav:focus-visible, footer:focus-visible,
article:focus-visible, aside:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ── Theme icon CSS toggle (shared across all pages) ── */
.theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: inline; }

[data-theme="light"] .app-header .app-language-switcher__option--active,
[data-theme="light"] .app-header .app-language-switcher__option--active:hover {
    color: var(--app-primary-dark);
    background: rgba(var(--app-primary-rgb), 0.16);
}
.pt-hide { display: none; }
.contents-form { display: contents; }

/* ── Auth pages ── */
.auth-shell {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: clamp(1.5rem, 4vw, 2.5rem) var(--app-page-padding-inline) 2.5rem;
    min-height: calc(100vh - var(--app-header-height-desktop));
}

/* Split card: brand panel + form panel */
.auth-card {
    width: 100%; max-width: var(--app-auth-form-max);
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    padding: 2rem;
    margin-top: clamp(0.5rem, 3vw, 2rem);
    box-shadow: var(--app-shadow-card);
}
.auth-card-split {
    max-width: var(--app-auth-card-max);
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Brand side */
.auth-side {
    position: relative;
    background: var(--app-button-primary-bg);
    overflow: hidden;
    color: var(--app-button-primary-text);
    min-height: 100%;
}
.auth-side-bg {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}
.auth-side-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    height: 100%;
    padding: 2rem;
    gap: 2rem;
}
.auth-side-brand {
    display: inline-flex; align-items: center; gap: 10px;
    color: #fff; text-decoration: none;
    font-size: 1.15rem; font-weight: 700; letter-spacing: 0;
    align-self: flex-start;
}
.auth-side-mark {
    display: block;
    border-radius: var(--app-radius-md);
    object-fit: cover;
    flex-shrink: 0;
}
.auth-side-body {
    margin-top: auto; margin-bottom: auto;
}
.auth-side-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 0.7rem;
    line-height: 1.15;
}
.auth-side-sub {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.6;
    margin-bottom: 1.6rem;
}
.auth-side-features {
    list-style: none; padding: 0;
    display: flex; flex-direction: column; gap: 0.7rem;
}
.auth-side-features li {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; font-weight: 600;
    opacity: 0.95;
}
.auth-feat-icon {
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.auth-side-foot {
    font-size: 0.72rem;
    opacity: 0.65;
    margin-top: auto;
}

/* Form side */
.auth-form-side {
    padding: 2rem;
    display: flex; flex-direction: column;
}

.auth-title { font-size: 1.6rem; font-weight: 900; letter-spacing: 0; margin-bottom: 0.4rem; }
.auth-sub { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.8rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-field label { font-size: 0.8rem; font-weight: 700; color: var(--text); letter-spacing: 0.2px; }

/* Input with leading icon + optional trailing toggle */
.auth-input-group { position: relative; }
.auth-input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    min-height: var(--app-control-height);
    border-radius: var(--app-radius-md);
    padding: 0.65rem 0.9rem;
    font-size: 0.92rem;
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    outline: none;
    font-family: inherit;
}
.auth-input.has-icon   { padding-left: 2.4rem; }
.auth-input.has-suffix { padding-right: 2.6rem; }
.auth-input:focus {
    border-color: var(--app-primary);
    box-shadow: var(--app-focus-ring);
    background: var(--app-surface);
}
.auth-input::placeholder { color: var(--muted); opacity: 0.6; }

.auth-input-icon {
    position: absolute;
    left: 0.75rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 1.05rem !important; line-height: 1;
    pointer-events: none;
    transition: color 0.15s;
}
.auth-input:focus + .auth-input-icon,
.auth-input-group:focus-within .auth-input-icon { color: var(--accent2); }

.auth-pw-toggle {
    position: absolute;
    right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; padding: 0.35rem;
    color: var(--muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.auth-pw-toggle:hover { color: var(--accent2); background: var(--app-hover-bg); }
.auth-pw-toggle .app-icon { font-size: 1.05rem !important; line-height: 1; }

.auth-remember { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; color: var(--muted); }
.auth-remember input[type=checkbox] { accent-color: var(--accent); }

.auth-submit {
    width: 100%;
    padding: 0.8rem 1rem;
    min-height: var(--app-control-height);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    border: none; border-radius: var(--app-radius-md);
    font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s;
    margin-top: 0.4rem;
    font-family: inherit;
    box-shadow: var(--app-shadow-soft);
}
.auth-submit:hover { box-shadow: var(--app-shadow-card); }
.auth-submit:active { box-shadow: var(--app-shadow-soft); }

.auth-divider {
    display: flex; align-items: center; justify-content: center;
    margin: 1.3rem 0 1rem;
    position: relative;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-divider span {
    padding: 0 0.8rem; font-size: 0.7rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 1px;
}

.auth-links {
    display: flex; flex-direction: column; gap: 0.55rem;
    text-align: center; font-size: 0.85rem; color: var(--muted);
}
.auth-links a { color: var(--muted); text-decoration: none; transition: color 0.15s; }
.auth-links a:hover { color: var(--accent2); }
.auth-links strong { color: var(--accent2); font-weight: 700; }

.auth-error, .auth-success {
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--app-radius-md); padding: 0.7rem 0.95rem;
    font-size: 0.85rem; margin-bottom: 1.1rem;
    font-weight: 500;
}
.auth-error   { background: var(--app-danger-soft); border: 1px solid color-mix(in srgb, var(--app-danger) 35%, var(--app-border)); color: var(--app-danger); }
.auth-success { background: var(--app-success-soft); border: 1px solid color-mix(in srgb, var(--app-success) 35%, var(--app-border)); color: var(--app-success); }
.auth-error .app-icon, .auth-success .app-icon { font-size: 1.15rem !important; flex-shrink: 0; }

@media (max-width: 760px) {
    .auth-card-split {
        grid-template-columns: 1fr;
        max-width: var(--app-auth-card-max-mobile);
    }
    .auth-side {
        min-height: unset;
    }
    .auth-side-content {
        padding: 1.8rem 1.8rem 1.5rem;
        gap: 1rem;
    }
    .auth-side-body { margin: 0; }
    .auth-side-title { font-size: 1.3rem; }
    .auth-side-sub { font-size: 0.85rem; margin-bottom: 0.8rem; }
    .auth-side-features { gap: 0.4rem; }
    .auth-side-features li { font-size: 0.83rem; }
    .auth-feat-icon { width: 26px; height: 26px; font-size: 0.85rem; }
    .auth-side-foot { display: none; }
}

@media (max-width: 480px) {
    .auth-shell { padding-inline: var(--app-page-padding-inline-mobile); }
    .auth-card-split { border-radius: var(--app-radius-lg); margin: 0.5rem 0 0; }
    .auth-form-side { padding: 1.4rem 1rem; }
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--app-control-height);
    padding: 0.55rem 1rem;
    border-radius: var(--app-radius-md);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--app-transition), background var(--app-transition), color var(--app-transition), transform var(--app-transition), box-shadow var(--app-transition);
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-shadow-soft);
}
.btn-primary:hover { background: var(--app-button-primary-bg); color: var(--app-button-primary-text); box-shadow: var(--app-shadow-card); }
.btn-ghost {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
.btn-ghost:hover { border-color: var(--app-primary); background: var(--app-hover-bg); color: var(--app-text); }
.w-full { width: 100%; }


.state-page {
    min-height: calc(100vh - var(--app-header-height-desktop));
    padding: var(--app-section-padding-block) var(--app-page-padding-inline);
    display: grid;
    place-items: center;
}

.state-panel {
    width: 100%;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-card-bg);
    box-shadow: var(--app-shadow-card);
}

.state-kicker {
    display: inline-flex;
    margin-bottom: 0.65rem;
    color: var(--app-primary);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.state-panel h1 {
    margin: 0;
    color: var(--app-text);
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: 0;
}

.state-panel p {
    max-width: 38rem;
    margin: 0.85rem 0 0;
    color: var(--app-text-muted);
    line-height: 1.65;
}

.state-reference {
    margin-top: 1rem;
    padding: var(--app-card-padding-compact);
    display: grid;
    gap: 0.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-2);
}
.state-reference span { color: var(--app-text-muted); font-size: 0.75rem; }
.state-reference code { overflow-wrap: anywhere; }
.state-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.state-btn {
    min-height: var(--app-control-height);
    padding: 0.55rem 1rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-md);
    background: var(--app-surface-2);
    color: var(--app-text);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}
.state-btn--primary { border-color: var(--app-primary); background: var(--app-primary); color: var(--app-on-primary); }

@media (max-width: 600px) {
    .state-page { min-height: calc(100vh - var(--app-header-height-mobile)); padding-inline: var(--app-page-padding-inline-mobile); }
    .state-panel h1 { font-size: 2rem; }
}