/* OPTRF Academy landing — Cursor-inspired shell; NeutralFace only on brand title */
@import url('./fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* —— Theme tokens: light gray #181818 · dark gray #141414 —— */
    --ac-bg: #141414;
    --ac-bg-elevated: #181818;
    --ac-surface: #181818;
    --ac-surface-2: #181818;
    --ac-surface-3: #181818;
    --ac-text: #cccccc;
    --ac-text-bright: #e4e4e4;
    --ac-text-2: #9d9d9d;
    --ac-muted: #6e6e6e;
    --ac-border: #3c3c3c;
    --ac-border-strong: #5a5a5a;
    --ac-inactive: #252526;
    --ac-inactive-text: #6e6e6e;
    --ac-cta-bg: transparent;
    --ac-cta-text: var(--ac-text-bright);
    --ac-cta-border: var(--ac-border-strong);
    --ac-active-bg: #2a2a2a;
    --ac-active-text: var(--ac-text-bright);
    --ac-active-border: var(--ac-border-strong);
    --ac-radius: 6px;
    --ac-radius-sm: 4px;
    --ac-font: var(--optrf-font-ui);
    --ac-font-brand: var(--optrf-font-brand);
    --ac-font-mono: var(--optrf-font-mono);
    --ac-max: 440px;
    --ac-gap: 40px;
    --ac-gap-tight: 14px;

    --optrf-bg: var(--ac-bg);
    --optrf-bg-elevated: var(--ac-bg-elevated);
    --optrf-surface: var(--ac-surface);
    --optrf-surface-2: var(--ac-surface-2);
    --optrf-surface-3: var(--ac-surface-3);
    --optrf-text: var(--ac-text);
    --optrf-text-2: var(--ac-text-2);
    --optrf-muted: var(--ac-muted);
    --optrf-border: var(--ac-border);
    --optrf-input: transparent;
    --optrf-accent: var(--ac-text-bright);
    --optrf-accent-hover: var(--ac-text);
    --optrf-accent-soft: rgba(255, 255, 255, 0.06);
    --optrf-header: transparent;
    --optrf-footer: var(--ac-bg);
    --optrf-footer-text: var(--ac-muted);
    --optrf-font: var(--ac-font);
    --optrf-blue: var(--ac-text-bright);
    --optrf-blue-hover: var(--ac-text);
    --optrf-shadow: none;
    --optrf-shadow-lg: none;
}

html[data-theme='dark'],
html[data-theme='light'] {
    --optrf-bg: var(--ac-bg);
    --optrf-bg-elevated: var(--ac-bg-elevated);
    --optrf-surface: var(--ac-surface);
    --optrf-surface-2: var(--ac-surface-2);
    --optrf-surface-3: var(--ac-surface-3);
    --optrf-text: var(--ac-text);
    --optrf-text-2: var(--ac-text-2);
    --optrf-muted: var(--ac-muted);
    --optrf-border: var(--ac-border);
    --optrf-input: transparent;
    --optrf-accent: var(--ac-text-bright);
    --optrf-accent-hover: var(--ac-text);
    --optrf-accent-soft: rgba(255, 255, 255, 0.06);
    --optrf-header: transparent;
    --optrf-footer: var(--ac-bg);
    --optrf-footer-text: var(--ac-muted);
    --optrf-blue: var(--ac-text-bright);
    --optrf-blue-hover: var(--ac-text);
}

/* ---------- Page shell ---------- */
html.academy-ui,
body.academy-ui {
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    font-family: var(--ac-font) !important;
    text-transform: none;
    letter-spacing: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}

body.academy-ui .body-wrap,
body.academy-ui .pa-body,
body.academy-ui .cr-body {
    background: var(--ac-bg) !important;
    color: var(--ac-text) !important;
    min-height: 100vh;
}

/* Kill any triangle / diagonal / skewed chrome — solid fill only */
body.academy-ui .hero-figure,
body.academy-ui .hero-figure-box,
body.academy-ui .hero::before,
body.academy-ui .hero::after,
body.academy-ui .body-wrap::before,
body.academy-ui .body-wrap::after,
body.academy-ui .site-header::before,
body.academy-ui .site-header::after,
body.academy-ui .pa-bg,
body.academy-ui .pa-orb,
body.academy-ui .pa-grid,
body.academy-ui .has-top-divider::before,
body.academy-ui .has-bottom-divider::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html.academy-ui,
body.academy-ui,
body.academy-ui .body-wrap,
body.academy-ui .academy-main,
body.academy-ui main {
    background: #141414 !important;
    background-image: none !important;
}

body.academy-ui .site-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

body.academy-ui .site-header-inner {
    justify-content: flex-end;
}

body.academy-ui .header-brand,
body.academy-ui .header-logo-image,
body.academy-ui .header-theme-host,
body.academy-ui .optrf-theme-switcher {
    display: none !important;
}

body.academy-ui .site-footer,
body.academy-ui #footer {
    background: transparent !important;
    border: 0 !important;
    padding: 24px 0 32px !important;
    text-align: center;
}

body.academy-ui .site-footer-inner {
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

body.academy-ui .footer-brand,
body.academy-ui .footer-links {
    display: none !important;
}

body.academy-ui .footer-copyright {
    color: var(--ac-muted) !important;
    font-size: 12px;
    font-family: var(--ac-font-mono);
}

body.academy-ui .hero-figure,
body.academy-ui #features,
body.academy-ui #topSponsors,
body.academy-ui #teams,
body.academy-ui #tryEasier,
body.academy-ui #poweredBy,
body.academy-ui #sponsors,
body.academy-ui #pastSponsors,
body.academy-ui #advertisers,
body.academy-ui #supportUs {
    display: none !important;
}

/* ---------- Centered stage ---------- */
.academy-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 56px;
    box-sizing: border-box;
    background: var(--ac-bg) !important;
}

.academy-stage {
    width: min(100%, var(--ac-max));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ac-gap);
    animation: academy-fade-in 0.45s ease both;
}

@keyframes academy-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.academy-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
}

/* Default page titles — Cursor UI font */
.academy-title {
    margin: 0 !important;
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font) !important;
    font-weight: 600 !important;
    font-size: clamp(22px, 4vw, 28px) !important;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

/* NeutralFace ONLY on landing brand title */
body.academy-ui #appTitle.academy-title {
    font-family: var(--ac-font-brand) !important;
    font-weight: 700 !important;
    font-size: clamp(28px, 6vw, 40px) !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.academy-sub,
body.academy-ui #appDescription.academy-sub {
    margin: 0 !important;
    color: var(--ac-text-2) !important;
    font-family: var(--ac-font) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
    line-height: 1.6;
    text-transform: none;
    max-width: 360px;
}

/* ---------- Form blocks ---------- */
.academy-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ac-gap-tight);
}

.academy-label {
    margin: 0;
    color: var(--ac-text-2) !important;
    font-family: var(--ac-font) !important;
    font-weight: 500 !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.academy-input,
body.academy-ui #roomName.form-input,
body.academy-ui .form-input,
body.academy-ui .pa-input,
body.academy-ui .pa-input-code,
body.academy-ui .cr-input,
body.academy-ui .phone-cabinet-name-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    background: var(--ac-surface) !important;
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font-mono) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

body.academy-ui .academy-input:focus,
body.academy-ui #roomName.form-input:focus,
body.academy-ui .form-input:focus,
body.academy-ui .pa-input:focus,
body.academy-ui .cr-input:focus {
    border-color: var(--ac-border-strong) !important;
    background: var(--ac-surface-2) !important;
    box-shadow: none !important;
}

body.academy-ui .academy-input::placeholder,
body.academy-ui #roomName::placeholder,
body.academy-ui .form-input::placeholder {
    color: var(--ac-muted) !important;
    text-transform: none;
}

.academy-type-row {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.academy-type,
label.academy-type {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: var(--ac-inactive);
    color: var(--ac-inactive-text);
    font-family: var(--ac-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.academy-type:hover {
    color: var(--ac-text);
    border-color: var(--ac-border-strong);
}

.academy-type.is-active {
    background: var(--ac-active-bg);
    color: var(--ac-active-text);
    border-color: var(--ac-active-border);
}

.academy-cta,
body.academy-ui #joinRoomButton,
body.academy-ui .pa-btn,
body.academy-ui .cr-submit,
body.academy-ui .button-primary,
body.academy-ui .button.button-primary,
body.academy-ui .btn-primary,
body.academy-ui .login-btn {
    width: 100% !important;
    height: 44px !important;
    margin-top: 8px;
    border: 1px solid var(--ac-cta-border) !important;
    border-radius: var(--ac-radius) !important;
    background: var(--ac-cta-bg) !important;
    color: var(--ac-cta-text) !important;
    font-family: var(--ac-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

body.academy-ui .academy-cta:hover,
body.academy-ui #joinRoomButton:hover,
body.academy-ui .pa-btn:hover,
body.academy-ui .cr-submit:hover,
body.academy-ui .button-primary:hover,
body.academy-ui .login-btn:hover {
    background: var(--ac-surface-2) !important;
    color: var(--ac-text-bright) !important;
    border-color: var(--ac-text-2) !important;
    transform: none;
}

body.academy-ui .button-secondary,
body.academy-ui .button.button-secondary,
body.academy-ui .pa-link,
body.academy-ui .cr-copy {
    background: transparent !important;
    color: var(--ac-text-2) !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--ac-font) !important;
}

body.academy-ui .button-secondary:hover,
body.academy-ui .cr-copy:hover {
    background: var(--ac-surface-2) !important;
    color: var(--ac-text-bright) !important;
    border-color: var(--ac-border-strong) !important;
}

/* ---------- Landing panels ---------- */
body.academy-ui .dashboard-section {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

body.academy-ui .dashboard-container,
body.academy-ui .dashboard-shell,
body.academy-ui .cta-inner,
body.academy-ui .section-inner {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.academy-ui .hero {
    background: var(--ac-bg) !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.academy-ui .hero-inner,
body.academy-ui .hero-copy {
    display: none !important;
}

body.academy-ui .dashboard-create,
body.academy-ui #createRoomPanel {
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--ac-gap);
}

body.academy-ui #createRoomPanel .section-title,
body.academy-ui #joinDescription {
    display: none !important;
}

body.academy-ui .form-group-desktop {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ac-gap-tight) !important;
    width: 100%;
}

body.academy-ui .room-input-wrapper {
    width: 100%;
    position: relative;
}

body.academy-ui #genRoomButton,
body.academy-ui #customizeRoomButton,
body.academy-ui #scheduleMeetingBtn,
body.academy-ui #lastRoomContainer {
    display: none !important;
}

body.academy-ui .phone-gate,
body.academy-ui .pa-panel,
body.academy-ui .pa-panel--embed,
body.academy-ui .phone-cabinet,
body.academy-ui .dashboard-account {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center;
}

body.academy-ui .pa-steps,
body.academy-ui .pa-icon-wrap,
body.academy-ui .pa-orb-host {
    display: none !important;
}

body.academy-ui .pa-title {
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    margin: 0 0 12px !important;
    text-transform: none;
}

body.academy-ui .pa-sub,
body.academy-ui .pa-hint,
body.academy-ui .pa-label {
    color: var(--ac-text-2) !important;
    font-family: var(--ac-font) !important;
    font-size: 13px !important;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
}

body.academy-ui .pa-field {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 44px;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    background: var(--ac-surface) !important;
    overflow: hidden;
    box-shadow: none !important;
}

body.academy-ui .pa-field-prefix {
    color: var(--ac-text-2) !important;
    padding-left: 14px;
    font-family: var(--ac-font-mono);
    font-size: 13px;
}

body.academy-ui .pa-field > .pa-input {
    text-align: left !important;
    height: 100% !important;
}

body.academy-ui .pa-btn-orb {
    display: none !important;
}

body.academy-ui .pa-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
}

body.academy-ui .pa-link {
    background: transparent !important;
    border: 0 !important;
    color: var(--ac-muted) !important;
    font-size: 12px;
    padding: 0;
}

body.academy-ui .phone-cabinet-head {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

body.academy-ui .phone-cabinet-label {
    color: var(--ac-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

body.academy-ui .phone-cabinet-number,
body.academy-ui .phone-cabinet-name-text {
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font-mono);
    font-size: 13px;
}

body.academy-ui .phone-rooms-title {
    color: var(--ac-text-2) !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.academy-ui .phone-rooms-list,
body.academy-ui .phone-rooms-item {
    background: var(--ac-surface-2) !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    color: var(--ac-text-2) !important;
}

body.academy-ui .phone-rooms-item-name {
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font-mono);
}

body.academy-ui .phone-guest-hint {
    color: var(--ac-muted) !important;
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Customize / login / waiting ---------- */
body.academy-ui .cr-header,
body.academy-ui .pa-top {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.academy-ui .cr-page {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: var(--ac-bg) !important;
}

body.academy-ui .cr-card,
body.academy-ui .login-card,
body.academy-ui .waiting-card,
body.academy-ui .content-card,
body.academy-ui .legal-card {
    width: min(100%, var(--ac-max)) !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    text-align: center;
}

body.academy-ui .cr-title,
body.academy-ui .login-card h1,
body.academy-ui .waiting-card h1 {
    color: var(--ac-text-bright) !important;
    font-family: var(--ac-font) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    margin-bottom: 28px !important;
    text-transform: none;
}

body.academy-ui .cr-label {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    color: var(--ac-text-2) !important;
    font-weight: 500 !important;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.academy-ui .cr-toggle-grid {
    gap: 12px;
    margin: 24px 0;
}

body.academy-ui .cr-toggle {
    background: var(--ac-surface-2) !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    color: var(--ac-text) !important;
    text-transform: none;
    letter-spacing: 0;
}

body.academy-ui .cr-mode {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
    width: 100%;
}

body.academy-ui .cr-mode-option {
    background: var(--ac-inactive) !important;
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius) !important;
    color: var(--ac-inactive-text) !important;
}

body.academy-ui .cr-mode-option:has(input:checked),
body.academy-ui label.academy-type.is-active {
    background: var(--ac-active-bg) !important;
    color: var(--ac-active-text) !important;
    border-color: var(--ac-active-border) !important;
}

body.academy-ui .cr-preview-row {
    flex-direction: column;
    gap: 12px;
}

body.academy-ui .cr-home img {
    filter: brightness(0) invert(0.8);
    opacity: 0.9;
}

body.academy-ui .pulse {
    animation: none;
}

/* Neutralize old dashboard layout when authenticated (was breaking after leave-room) */
body.academy-ui.is-phone-authenticated main,
body.academy-ui.is-phone-authenticated .academy-main,
body.academy-ui.phone-session-pending .academy-main,
body.academy-ui.is-phone-guest .academy-main {
    min-height: 100vh !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 80px 20px 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ac-bg) !important;
    box-sizing: border-box !important;
}

body.academy-ui.is-phone-authenticated .academy-stage,
body.academy-ui.phone-session-pending .academy-stage,
body.academy-ui.is-phone-guest .academy-stage {
    width: min(100%, var(--ac-max)) !important;
    max-width: var(--ac-max) !important;
    margin: 0 auto !important;
    gap: var(--ac-gap) !important;
}

body.academy-ui.is-phone-authenticated .dashboard-section,
body.academy-ui.is-phone-authenticated .dashboard-container,
body.academy-ui.is-phone-authenticated .dashboard-shell,
body.academy-ui.is-phone-authenticated .cta.section,
body.academy-ui.is-phone-authenticated .cta-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.academy-ui.is-phone-authenticated .dashboard-account,
body.academy-ui.is-phone-authenticated .phone-cabinet {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.academy-ui.is-phone-authenticated .phone-cabinet-head {
    border-bottom: 1px solid var(--ac-border) !important;
    padding-bottom: 16px !important;
}

body.academy-ui.is-phone-authenticated .dashboard-create,
body.academy-ui.is-phone-authenticated #createRoomPanel {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ac-gap) !important;
}

body.academy-ui.is-phone-authenticated .site-header .container,
body.academy-ui.is-phone-authenticated .site-footer .container {
    max-width: none !important;
}

@media (max-width: 480px) {
    .academy-main,
    body.academy-ui.is-phone-authenticated .academy-main {
        padding: 64px 16px 40px !important;
    }

    .academy-stage {
        gap: 32px;
    }

    .academy-title {
        font-size: 26px !important;
    }
}