:root { --aim-lab-enabled: 0; --aim-lab-page-margin-top: 160px; --aim-lab-page-padding: 12px; --aim-lab-hero-padding: 12px 14px; --aim-lab-hero-radius: 22px; --aim-lab-panel-radius: 18px; --aim-lab-bg-size: contain; --aim-lab-bg-position: center top; --aim-lab-enabled: 0; --license-page-margin-top: 160px; /* core */ --core-bg: #0b0d12; --core-bg-deep: #05070b; --core-overlay: rgba(6, 8, 14, 0.62); --core-shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.24); --core-shadow-panel: 0 24px 56px rgba(2, 4, 10, 0.34); /* theme bridge */ --web-panel: #101722; --web-panel-alt: #151e2d; --web-border: #d29011; --web-text: #f2e7a6; --web-text-soft: #cdbc80; --web-accent: #25d7e8; --web-success: #32e29f; --web-warning: #ffbf47; --web-danger: #ff6f7d; --web-focus: #f1bb54; /* surface */ --surface-page: rgba(5, 8, 14, 0.18); --surface-page-line: rgba(210, 144, 17, 0.72); --surface-panel: rgba(9, 14, 24, 0.88); --surface-panel-strong: rgba(8, 12, 20, 0.94); --surface-card: rgba(13, 20, 33, 0.78); --surface-card-strong: rgba(14, 22, 36, 0.9); --surface-border-soft: rgba(210, 144, 17, 0.2); /* text */ --text-strong: var(--web-text); --text-soft: rgba(255, 240, 180, 0.82); --text-muted: rgba(255, 240, 180, 0.62); --text-cyan: #d9fbff; --text-success: #e0ffee; --text-danger: #fff0f3; /* action */ --action-primary-start: rgba(241, 187, 84, 0.68); --action-primary-end: rgba(109, 61, 8, 0.84); --action-primary-line: rgba(255, 214, 124, 0.84); --action-primary-shadow: 0 18px 30px rgba(84, 48, 6, 0.28); /* hero */ --hero-title-fill: linear-gradient(180deg, #fffef9 0%, #fff6d4 16%, #ffd76b 35%, #fff0b9 52%, #efb247 74%, #fff4d8 100%); /* motion */ --motion-fast: 160ms ease; --motion-base: 180ms ease; /* layout */ --layout-page-width: min(1480px, calc(100vw - 28px)); --layout-shell-radius: 28px; --layout-hero-radius: 24px; --layout-panel-radius: 22px; --layout-card-radius: 16px; --layout-page-gap: 12px; --layout-main-gap: 12px; --layout-panel-padding: 14px; --layout-left-rail: minmax(280px, 320px); --layout-right-rail: minmax(220px, 248px); --layout-panel-min-height: 560px; --layout-question-min-height: 410px; --layout-button-min-height: 44px; --layout-button-min-width: 172px; --layout-chip-min-height: var(--intro-name-entry-input-min-height); --layout-copy-size: 14px; --layout-subtitle-size: 15px; --layout-title-size: clamp(4.35rem, 6.9vw, 6.2rem); /* web v1 token map */ --web-v1-bg: var(--core-bg); --web-v1-bg-deep: var(--core-bg-deep); --web-v1-overlay: var(--core-overlay); --web-v1-panel: var(--surface-panel); --web-v1-panel-strong: var(--surface-panel-strong); --web-v1-card: var(--surface-card); --web-v1-card-strong: var(--surface-card-strong); --web-v1-page-surface: var(--surface-page); --web-v1-page-line: var(--surface-page-line); --web-v1-border-soft: var(--surface-border-soft); --web-v1-text: var(--text-strong); --web-v1-text-soft: var(--text-soft); --web-v1-text-muted: var(--text-muted); --web-v1-text-cyan: var(--text-cyan); --web-v1-text-success: var(--text-success); --web-v1-text-danger: var(--text-danger); --web-v1-accent: var(--web-accent); --web-v1-focus: var(--web-focus); --web-v1-success: var(--web-success); --web-v1-warning: var(--web-warning); --web-v1-danger: var(--web-danger); --web-v1-border: var(--web-border); --web-v1-action-primary-start: var(--action-primary-start); --web-v1-action-primary-end: var(--action-primary-end); --web-v1-action-primary-line: var(--action-primary-line); --web-v1-action-primary-shadow: var(--action-primary-shadow); --web-v1-title-fill: var(--hero-title-fill); --web-v1-shadow-soft: var(--core-shadow-soft); --web-v1-shadow-panel: var(--core-shadow-panel); --web-v1-page-width: var(--layout-page-width); --web-v1-shell-radius: var(--layout-shell-radius); --web-v1-hero-radius: var(--layout-hero-radius); --web-v1-panel-radius: var(--layout-panel-radius); --web-v1-card-radius: var(--layout-card-radius); --web-v1-page-gap: var(--layout-page-gap); --web-v1-main-gap: var(--layout-main-gap); --web-v1-panel-padding: var(--layout-panel-padding); --web-v1-left-rail: var(--layout-left-rail); --web-v1-right-rail: var(--layout-right-rail); --web-v1-panel-min-height: var(--layout-panel-min-height); --web-v1-question-min-height: var(--layout-question-min-height); --web-v1-button-min-height: var(--layout-button-min-height); --web-v1-button-min-width: var(--layout-button-min-width); --web-v1-chip-min-height: var(--layout-chip-min-height); --web-v1-copy-size: var(--layout-copy-size); --web-v1-subtitle-size: var(--layout-subtitle-size); --web-v1-title-size: var(--layout-title-size); --web-v1-motion-fast: var(--motion-fast); --web-v1-motion-base: var(--motion-base); --web-v1-start-background: var(--web-start-background); --web-v1-start-overlay: var(--web-start-overlay); --web-v1-start-headline: var(--web-start-headline); --web-v1-start-subline: var(--web-start-subline); --web-v1-start-cta: var(--web-start-cta); --web-v1-link-panel: var(--web-link-panel); --web-v1-link-input: var(--web-link-input); --web-v1-link-cta: var(--web-link-cta); --web-v1-link-validation: var(--web-link-validation); --web-v1-completion-overlay: var(--web-completion-overlay); --web-v1-completion-headline: var(--web-completion-headline); --web-v1-completion-text: var(--web-completion-text); --web-v1-completion-highlight: var(--web-completion-highlight); } * { box-sizing: border-box; } .hidden { display: none !important; } .app-shell { position: relative; min-height: 100vh; } .intro-layer { position: relative; min-height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr); align-items: end; padding: 24px; overflow: hidden; isolation: isolate; } .intro-backdrop { position: absolute; inset: 0; background: var(--web-v1-start-background); } .intro-background { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-background) 22%, transparent), color-mix(in srgb, var(--web-v1-start-overlay) 80%, var(--web-v1-start-background))), radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--web-v1-start-cta) 18%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-background) 8%, transparent), color-mix(in srgb, var(--web-v1-start-background) 18%, transparent)), url("../assets/welcome.jpg") var(--intro-bg-welcome-position) / var(--intro-bg-welcome-size) no-repeat; opacity: 0; transform: translate3d(0, 0, 0) scale(1); filter: brightness(0.18) saturate(0.86); transition: opacity 2200ms linear, transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1), filter 2200ms linear; will-change: opacity, transform, filter; } .intro-shell { position: relative; z-index: 1; min-height: 100vh; width: min(100%, 1400px); margin: 0 auto; display: grid; align-items: end; justify-items: center; padding: clamp(28px, 6vh, 72px) 0 clamp(34px, 8vh, 88px); } .intro-start-panel { width: min(100%, 580px); display: grid; justify-items: stretch; opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); pointer-events: none; } .intro-panel { width: min(520px, 100%); display: grid; gap: 14px; padding: 32px 34px; align-self: center; justify-self: center; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 32%, transparent); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 88%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 72%, var(--web-v1-bg-deep))), color-mix(in srgb, var(--web-v1-link-panel) 78%, var(--web-v1-bg-deep)); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 8%, transparent); backdrop-filter: blur(16px); } .intro-panel-name { max-width: 520px; } .intro-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-start-subline) 68%, transparent); } .intro-name-title { margin: 0; line-height: 0.92; text-transform: uppercase; color: var(--web-v1-start-headline); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: 0.05em; } .intro-copy { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--web-v1-start-subline) 76%, transparent); } .intro-field-label { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-start-subline) 68%, transparent); } .intro-input { width: 100%; min-height: 56px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 34%, var(--web-v1-link-cta)); border-radius: 10px; background: color-mix(in srgb, var(--web-v1-link-input) 92%, var(--web-v1-bg-deep)); color: var(--web-v1-completion-text); font: inherit; font-size: 18px; letter-spacing: 0.03em; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent); } .intro-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 34%, transparent); } .intro-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-link-cta) 82%, transparent); outline-offset: 2px; border-color: color-mix(in srgb, var(--web-v1-link-cta) 72%, transparent); } .intro-error { margin: -4px 0 0; font-size: 13px; line-height: 1.4; color: var(--web-v1-link-validation); } .intro-cta { padding-right: 17px; position: relative; min-height: 78px; width: 100%; padding: 0 34px; border: 1px solid color-mix(in srgb, var(--web-v1-start-cta) 42%, transparent); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-cta) 20%, var(--web-v1-start-overlay)), color-mix(in srgb, var(--web-v1-start-background) 90%, var(--web-v1-start-overlay) 10%)); color: color-mix(in srgb, var(--web-v1-start-headline) 96%, white); font: inherit; font-size: clamp(1.16rem, 2vw, 1.42rem); font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42); box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42), 0 12px 28px color-mix(in srgb, var(--web-v1-start-cta) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 10%, transparent), inset 0 -16px 28px rgba(0, 0, 0, 0.3); transition: transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1), border-color 420ms ease, box-shadow 420ms ease, color 420ms ease, background 420ms ease; } .intro-cta::before { content: ""; position: absolute; inset: 1px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 214, 124, 0.18), transparent 22%, transparent 72%, rgba(255, 168, 58, 0.12)), linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.05)); pointer-events: none; } .intro-cta::after { content: ""; position: absolute; inset: auto 28px 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 214, 124, 0.52), transparent); pointer-events: none; } .intro-cta:hover:not(:disabled), .intro-cta:focus-visible { transform: translate3d(0, -20px, 0); border-color: color-mix(in srgb, var(--web-v1-start-cta) 68%, transparent); color: color-mix(in srgb, var(--web-v1-start-headline) 92%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-cta) 28%, var(--web-v1-start-overlay)), color-mix(in srgb, var(--web-v1-start-background) 84%, var(--web-v1-start-cta) 16%)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.48), 0 18px 36px color-mix(in srgb, var(--web-v1-start-cta) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-start-headline) 14%, transparent), inset 0 -14px 28px rgba(0, 0, 0, 0.26); } .intro-cta:focus-visible { outline: none; } .intro-cta:disabled { cursor: default; } body[data-app-view="intro_blackout"], body[data-app-view="intro_reveal"], body[data-app-view="intro_hold"], body[data-app-view="intro_ready"], body[data-app-view="name_entry"] { background: #000; } body[data-app-view="intro_blackout"]::before, body[data-app-view="intro_reveal"]::before, body[data-app-view="intro_hold"]::before, body[data-app-view="intro_ready"]::before { opacity: 0; } body[data-app-view="name_entry"]::before { opacity: 0.2; } body[data-app-view="intro_reveal"] .intro-background, body[data-app-view="intro_hold"] .intro-background, body[data-app-view="intro_ready"] .intro-background, body[data-app-view="name_entry"] .intro-background { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: brightness(0.94) saturate(1.04); } body[data-app-view="intro_ready"] .intro-background { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-start-background) 8%, transparent), color-mix(in srgb, var(--web-v1-start-overlay) 32%, transparent)), radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--web-v1-start-cta) 14%, transparent), transparent 24%), url("../assets/welcome.jpg") var(--intro-bg-welcome-position) / var(--intro-bg-welcome-size) no-repeat; filter: brightness(1.04) saturate(1.06) contrast(1.01); } body[data-app-view="intro_ready"] .intro-start-panel { opacity: 1; transform: translate3d(0, 0, 0) scale(1); pointer-events: auto; transition: opacity 3000ms ease, transform 2200ms cubic-bezier(0.18, 0.82, 0.22, 1); } body[data-app-view="name_entry"] .intro-panel-name { display: grid; } body { margin: 0; font-family: Segoe UI, Arial, sans-serif; color: var(--web-v1-text); background: var(--web-v1-bg); min-height: 100vh; position: relative; --view-title-size: var(--web-v1-title-size); --view-panel-padding: var(--web-v1-panel-padding); --view-main-gap: var(--web-v1-main-gap); --view-panel-min-height: var(--web-v1-panel-min-height); --view-question-min-height: var(--web-v1-question-min-height); --view-chip-min-height: var(--web-v1-chip-min-height); --view-copy-size: var(--web-v1-copy-size); --view-subtitle-size: var(--web-v1-subtitle-size); --view-button-min-height: var(--web-v1-button-min-height); --view-button-min-width: var(--web-v1-button-min-width); } body[data-view="exam"] { --view-title-size: clamp(3.1rem, 5.2vw, 4.05rem); --view-panel-padding: 14px; --view-main-gap: 12px; --view-panel-min-height: 0px; --view-question-min-height: 0px; --view-chip-min-height: var(--intro-name-entry-cta-min-height); --view-copy-size: 13px; --view-subtitle-size: 14px; --view-button-min-height: 46px; --view-button-min-width: 160px; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--web-v1-focus) 18%, transparent), transparent 32%), radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--web-v1-accent) 8%, transparent), transparent 24%), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-bg-deep) 10%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 44%, transparent)); opacity: 0.42; } .page { width: var(--web-v1-page-width); margin: var(--license-page-margin-top) auto 12px; padding: var(--license-page-padding); border: 1px solid var(--web-v1-page-line); border-radius: var(--web-v1-shell-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 14%, transparent), color-mix(in srgb, var(--web-v1-panel) 4%, transparent)), var(--web-v1-page-surface); backdrop-filter: blur(2px); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.36); position: relative; overflow: hidden; } .page::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--web-v1-focus) 8%, transparent), transparent 28%), radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent), transparent 22%); opacity: 0.9; } .hero { position: relative; margin-bottom: 0; padding: var(--license-hero-padding); border: 1px solid color-mix(in srgb, var(--web-v1-border) 84%, transparent); border-radius: var(--license-hero-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 96%, var(--web-v1-bg-deep)) 0%, color-mix(in srgb, var(--web-v1-panel) 88%, var(--web-v1-bg-deep)) 58%, color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-panel) 10%) 100%), radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--web-v1-focus) 18%, transparent), transparent 34%), radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--web-v1-accent) 8%, transparent), transparent 24%), var(--web-v1-panel); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32), 0 10px 22px color-mix(in srgb, var(--web-v1-border) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 8%, transparent), inset 0 -12px 28px rgba(0, 0, 0, 0.14); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-focus) 8%, transparent), color-mix(in srgb, var(--web-v1-focus) 2%, transparent) 20%, transparent 46%), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 14%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent)); opacity: 0.96; } .hero::after { content: none; } .hero-shell, .status-strip, .panel, .question-panel, .feedback-panel, .answer-item, .module-item, .step-card, .chip, button { transition: border-color var(--web-v1-motion-base), box-shadow var(--web-v1-motion-base), background var(--web-v1-motion-base), transform var(--web-v1-motion-base), opacity var(--web-v1-motion-base); } .hero-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(380px, 500px); gap: 16px; padding: 16px 18px; margin-bottom: 0; border: none; border-radius: var(--license-panel-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 96%, var(--web-v1-bg-deep)) 0%, color-mix(in srgb, var(--web-v1-panel) 88%, var(--web-v1-bg-deep)) 56%, color-mix(in srgb, var(--web-v1-bg-deep) 96%, var(--web-v1-panel) 4%) 100%), radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--web-v1-focus) 16%, transparent), transparent 30%), radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--web-v1-accent) 4%, transparent), transparent 28%), linear-gradient(112deg, color-mix(in srgb, var(--web-v1-text) 8%, transparent), transparent 34%, color-mix(in srgb, var(--web-v1-border) 12%, transparent) 76%, color-mix(in srgb, var(--web-v1-bg-deep) 20%, transparent)); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), 0 8px 18px color-mix(in srgb, var(--web-v1-border) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 14%, transparent), inset 0 -12px 24px rgba(0, 0, 0, 0.2); overflow: hidden; isolation: isolate; } .hero-shell::before { content: none; } .hero-copy, .hero-context, .status-strip, .section-title, .module-sidebar-heading, .rail-copy, .focus-card, .list-label, .main-stage, .progress-copy, .progress-subtitle, .step-list, .actionbar-copy, .actionbar-buttons { position: relative; z-index: 1; } .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .hero-eyebrow, .eyebrow, .section-title, .module-sidebar-heading, .list-label, .detail-box-title, .question-progress, .focus-card-label, .actionbar-label, .status-strip-title, .hero-context-label { font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--web-v1-text-soft) 68%, transparent); text-transform: uppercase; letter-spacing: 0.1em; } .hero-eyebrow { margin-bottom: 4px; font-size: 11px; line-height: 1; letter-spacing: 0.24em; } .hero-title-row { display: block; margin-bottom: 2px; } .hero-title { margin: 0; font-size: clamp(2.2rem, 4vw, 3.35rem); line-height: 0.9; letter-spacing: 0.1em; font-weight: 900; color: var(--web-v1-text); display: inline-block; background: var(--web-v1-title-fill); background-size: 100% 180%; background-position: 50% 8%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--web-v1-border) 34%, transparent); paint-order: stroke fill; text-shadow: 0 1px 0 color-mix(in srgb, var(--web-v1-text) 32%, white), 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 16px color-mix(in srgb, var(--web-v1-focus) 8%, transparent); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34)); } .hero-mode { display: none; } .hero-subtitle { margin: 0; max-width: none; font-size: clamp(0.95rem, 1.5vw, 1.12rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.18em; color: color-mix(in srgb, var(--web-v1-text-soft) 78%, transparent); text-transform: uppercase; } .status-strip { display: grid; grid-template-columns: 1fr; align-self: stretch; align-content: center; gap: 8px; min-height: 88px; padding: 11px 12px; border-radius: 12px; border-color: color-mix(in srgb, var(--web-v1-border) 32%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 9%, transparent), transparent 24%, transparent 76%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 5%, transparent); } .status-strip-title { margin-bottom: 0; padding-top: 0; max-width: 8ch; line-height: 1.15; color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); } .chip-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; } .chip { min-height: 58px; padding: 9px 11px; border-radius: 10px; border-color: color-mix(in srgb, var(--web-v1-text) 5%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 12px 20px rgba(0, 0, 0, 0.16); opacity: 1; } .chip.accent { border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-border) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-border) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 4%, transparent); } .chip.neutral { border-color: color-mix(in srgb, var(--web-v1-text-soft) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-text-soft) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-text-soft) 10%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-success) 16%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-success) 74%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.warning { border-color: color-mix(in srgb, var(--web-v1-warning) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-warning) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-warning) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip.danger { border-color: color-mix(in srgb, var(--web-v1-danger) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .chip-label { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .chip-value { font-size: 14px; font-weight: 800; line-height: 1.24; } .chip.chip-primary { min-height: 60px; padding: 10px 12px; opacity: 1; } .chip.chip-primary.success { border-color: color-mix(in srgb, var(--web-v1-success) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-success) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-success) 12%, transparent), transparent 56%); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--web-v1-success) 88%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 16px 28px rgba(10, 38, 25, 0.24); } .chip.chip-primary.danger { border-color: color-mix(in srgb, var(--web-v1-danger) 56%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-danger) 12%, transparent), transparent 56%); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--web-v1-danger) 92%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 16px 28px rgba(48, 12, 18, 0.26); } .chip.chip-primary .chip-label { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .chip.chip-primary .chip-value { font-size: 14px; font-weight: 800; line-height: 1.24; } .main-grid { display: grid; gap: 14px; grid-template-columns: var(--web-v1-left-rail) minmax(0, 1fr) var(--web-v1-right-rail); grid-template-areas: "left main right"; align-items: start; } .panel-rail { grid-area: left; display: grid; align-content: start; gap: 6px; } .panel-stage { grid-area: main; padding: 14px; } .panel-progress { grid-area: right; display: grid; align-content: start; gap: 10px; } .panel { padding: var(--view-panel-padding); border-radius: var(--license-panel-radius); border-color: color-mix(in srgb, var(--web-v1-border) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))), var(--web-v1-panel); box-shadow: var(--web-v1-shadow-panel), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent); } .panel::before { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-text-soft) 6%, transparent)), repeating-linear-gradient(0deg, color-mix(in srgb, var(--web-v1-text) 1.2%, transparent) 0, color-mix(in srgb, var(--web-v1-text) 1.2%, transparent) 1px, transparent 1px, transparent 108px); opacity: 0.62; } .panel::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--web-v1-border) 5%, transparent); border-radius: 6px; } .section-title { margin-bottom: 6px; padding: 0 0 6px; display: flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--web-v1-text) 80%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--web-v1-border) 16%, transparent); } .section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 32%, transparent), transparent 80%); } .rail-copy, .progress-copy { margin-bottom: 7px; max-width: 30ch; font-size: 11px; line-height: 1.4; color: var(--web-v1-text-muted); } .progress-copy { margin-bottom: 4px; max-width: none; font-size: 11px; line-height: 1.4; } .list-label { margin-bottom: 6px; color: rgba(208, 192, 151, 0.72); } .module-list { display: grid; gap: 6px; max-height: none; overflow: visible; padding: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 14%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 84%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 4%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent), inset 0 14px 20px rgba(0, 0, 0, 0.12); } .module-item { min-height: 88px; display: grid; align-content: start; gap: 4px; min-height: 68px; padding: 10px 11px 9px; border: 1px solid transparent; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-neutral { border-color: color-mix(in srgb, var(--web-v1-text-soft) 26%, transparent); } .module-item.status-warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-warning) 18%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-warning) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-success) 16%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-success) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.status-danger { border-color: color-mix(in srgb, var(--web-v1-danger) 36%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-danger) 18%)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-danger) 72%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item.active { border-color: color-mix(in srgb, var(--web-v1-border) 56%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-border) 20%)); box-shadow: inset 5px 0 0 color-mix(in srgb, var(--web-v1-border) 94%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 8%, transparent), 0 16px 24px rgba(26, 16, 6, 0.28); } .module-item:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 46%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-border) 74%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .module-item-title { font-size: 12px; font-weight: 800; line-height: 1.26; margin-bottom: 0; } .module-item-status-row { display: flex; align-items: center; gap: 6px; margin-bottom: 0; } .status-pill { min-height: 20px; padding: 2px 7px; border-radius: 4px; background: color-mix(in srgb, var(--web-v1-bg-deep) 74%, transparent); letter-spacing: 0.1em; font-size: 10px; line-height: 1.15; } .module-item-attempts { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .module-item-meta { display: none; } .module-item.active .module-item-meta { display: none; } color: color-mix(in srgb, var(--web-v1-text) 78%, transparent); } .main-stage { display: grid; gap: 10px; } .inner-card { display: grid; position: relative; gap: 10px; padding: 10px; border-radius: 10px; border-color: rgba(214, 170, 89, 0.22); background: linear-gradient(180deg, rgba(21, 27, 35, 0.99), rgba(10, 14, 20, 0.98)), linear-gradient(90deg, rgba(214, 170, 89, 0.05), transparent 30%, transparent 76%, rgba(113, 134, 151, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 20px 34px rgba(0, 0, 0, 0.28); } .inner-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 34%, transparent 72%, rgba(255, 92, 18, 0.04)); opacity: 0.55; } .stage-title, .question-title, #feedback-title { margin-bottom: 4px; font-size: 25px; letter-spacing: -0.03em; } .stage-body { max-width: 64ch; font-size: 14px; line-height: 1.48; color: var(--web-v1-text-soft); } .main-stage[data-stage-view="module_intro"] { gap: 10px; } .main-stage[data-stage-view="module_intro"] .inner-card { min-height: 0; padding: 18px 18px 14px; border-color: rgba(255, 92, 18, 0.14); background: linear-gradient(180deg, rgba(5, 6, 8, 0.99), rgba(1, 2, 4, 0.99)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 34px rgba(0, 0, 0, 0.38); } .main-stage[data-stage-view="module_intro"] .stage-title { font-size: 32px; } .main-stage[data-stage-view="module_intro"] .stage-body { max-width: 62ch; font-size: 17px; line-height: 1.46; } .main-stage[data-stage-view="completion"] { gap: 12px; } .main-stage[data-stage-view="completion"] .inner-card { padding: 14px 16px; border-color: rgba(113, 134, 151, 0.16); background: linear-gradient(180deg, rgba(18, 24, 32, 0.97), rgba(10, 14, 20, 0.95)), linear-gradient(90deg, rgba(113, 134, 151, 0.04), transparent 26%); } .main-stage[data-stage-view="completion"] .stage-title { font-size: 28px; } .main-stage[data-stage-view="completion"] .stage-body { max-width: 58ch; color: rgba(221, 213, 189, 0.82); } /* HOMESTAGE: dark panel override for the Intro / Home START box Purpose: remove cold/blue tint and apply dark ROAR panel look Keep text colors intact and avoid layout shifts. */ .main-stage[data-stage-view="home"] .inner-card, body[data-view="home"] .main-stage .inner-card { min-height: 0; /* match padding used in other stage-specific cards to avoid layout shifts */ padding: 18px 18px 14px; border-color: rgba(255, 92, 18, 0.18); background: linear-gradient(180deg, rgba(5, 6, 8, 0.98), rgba(1, 2, 4, 0.99)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 18px 34px rgba(0, 0, 0, 0.38); } .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; gap: 6px; padding: 7px 9px; border-radius: 6px; border-color: color-mix(in srgb, var(--web-v1-text-soft) 14%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 72%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 58%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-text-soft) 4%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="module_intro"] .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 7px 9px; border-color: color-mix(in srgb, var(--web-v1-text-soft) 16%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel) 76%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 62%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 22%); } #stage-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; } .detail-line { min-height: 40px; display: flex; align-items: center; padding: 7px 9px; border-radius: 4px; border-color: color-mix(in srgb, var(--web-v1-text) 2%, transparent); background: color-mix(in srgb, var(--web-v1-panel) 82%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="module_intro"] .detail-line { min-height: 40px; padding: 6px 8px; border-color: color-mix(in srgb, var(--web-v1-text) 3%, transparent); background: color-mix(in srgb, var(--web-v1-panel-strong) 90%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-border) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .main-stage[data-stage-view="exam"] .detail-box, .main-stage[data-stage-view="result"] .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 10px; border-color: rgba(113, 134, 151, 0.12); background: rgba(10, 13, 18, 0.54); } .main-stage[data-stage-view="exam"] .detail-line, .main-stage[data-stage-view="result"] .detail-line { min-height: 42px; padding: 7px 9px; } .main-stage[data-stage-view="module_intro"] .detail-box-title { color: rgba(181, 194, 206, 0.76); } .briefing-scoreboard-box { display: grid; gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-text-soft) 4%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 20px 34px rgba(0, 0, 0, 0.24); } .panel-progress .briefing-scoreboard-box { margin-top: 4px; padding: 10px; gap: 8px; border-color: color-mix(in srgb, var(--web-v1-border) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent), 0 18px 28px rgba(0, 0, 0, 0.22); } .briefing-scoreboard-header { display: grid; gap: 4px; } .briefing-scoreboard-intro { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--web-v1-text-soft) 76%, transparent); max-width: 64ch; } .briefing-scoreboard-list { display: grid; gap: 8px; } .panel-progress .briefing-scoreboard-intro { font-size: 10px; line-height: 1.25; color: color-mix(in srgb, var(--web-v1-text-soft) 64%, transparent); } .panel-progress .briefing-scoreboard-list { gap: 1px; } .briefing-scoreboard-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 11px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-text) 4%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep))); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .panel-progress .briefing-scoreboard-row { grid-template-columns: 40px minmax(0, 1fr); gap: 7px; align-items: start; padding: 7px 9px; border-radius: 7px; } .briefing-scoreboard-row.tone-success { border-color: color-mix(in srgb, var(--web-v1-success) 34%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-success) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-row.tone-warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-warning) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-row.tone-danger { border-color: color-mix(in srgb, var(--web-v1-danger) 36%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-danger) 82%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .briefing-scoreboard-rank { font-size: 10px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(207, 192, 151, 0.66); } .briefing-scoreboard-player { min-width: 0; font-size: 13px; font-weight: 900; line-height: 1.08; color: var(--web-v1-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel-progress .briefing-scoreboard-player { white-space: normal; } .briefing-scoreboard-status { justify-self: start; } .panel-progress .briefing-scoreboard-status, .panel-progress .briefing-scoreboard-attempts { grid-column: 2; justify-self: start; } .briefing-scoreboard-attempts { justify-self: end; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .panel-progress .briefing-scoreboard-attempts { font-size: 10px; letter-spacing: 0.05em; } .question-panel, .feedback-panel { display: grid; padding: 10px 12px; border-radius: 8px; } .question-panel { gap: 10px; border-color: color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-bg-deep) 78%, var(--web-v1-panel) 22%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.26); } .question-helper { margin-top: 0; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--web-v1-text-muted); } .answer-list { display: grid; gap: 6px; } .answer-item { padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--web-v1-text) 4%, transparent); border-radius: 6px; cursor: pointer; border-color: color-mix(in srgb, var(--web-v1-text) 4%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .answer-item:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-border) 68%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } .answer-item.active { border-color: color-mix(in srgb, var(--web-v1-accent) 82%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-accent) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-accent) 20%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-accent) 12%, transparent), transparent 60%); color: color-mix(in srgb, var(--web-v1-text) 92%, white); box-shadow: inset 5px 0 0 color-mix(in srgb, var(--web-v1-accent) 96%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 10px 20px rgba(4, 34, 39, 0.28); } .answer-item.correct { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-success) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-success) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-success) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-success) 8%, transparent); } .answer-item.wrong { background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-danger) 20%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 80%, var(--web-v1-danger) 20%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-danger) 8%, transparent); } .feedback-panel { gap: 12px; border-color: color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-panel) 18%)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 5%, transparent), transparent 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 16px 28px rgba(0, 0, 0, 0.24); } #feedback-badge { padding: 5px 9px; border-radius: 4px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(8, 11, 15, 0.82); } .progress-subtitle { margin-bottom: 0; font-size: 14px; font-weight: 900; line-height: 1.2; color: var(--web-v1-text); max-width: none; } .step-list { display: grid; position: relative; gap: 6px; padding-left: 14px; } .step-list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 42%, transparent), color-mix(in srgb, var(--web-v1-text-soft) 12%, transparent)); } .step-card { position: relative; padding: 8px 9px 8px 12px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 70%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card::before { content: ""; position: absolute; left: -14px; top: 13px; width: 8px; height: 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--web-v1-text-soft) 32%, transparent); background: color-mix(in srgb, var(--web-v1-bg-deep) 98%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--web-v1-bg-deep) 92%, transparent); } .step-card.active { border-color: color-mix(in srgb, var(--web-v1-border) 42%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-border) 18%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-border) 18%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-border) 88%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 8%, transparent); } .step-card.active::before { border-color: color-mix(in srgb, var(--web-v1-border) 80%, transparent); background: color-mix(in srgb, var(--web-v1-border) 90%, transparent); } .step-card.done { border-color: color-mix(in srgb, var(--web-v1-text-soft) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-text-soft) 10%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 90%, var(--web-v1-text-soft) 10%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.done::before { border-color: color-mix(in srgb, var(--web-v1-text-soft) 52%, transparent); background: color-mix(in srgb, var(--web-v1-text-soft) 74%, transparent); } .step-card.warning { border-color: color-mix(in srgb, var(--web-v1-warning) 34%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-warning) 16%, var(--web-v1-card-strong)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-warning) 16%)); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-warning) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.warning::before { border-color: color-mix(in srgb, var(--web-v1-warning) 72%, transparent); background: color-mix(in srgb, var(--web-v1-warning) 86%, transparent); } .step-card.upcoming { border-color: color-mix(in srgb, var(--web-v1-text-soft) 18%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .step-card.blocked { border-color: color-mix(in srgb, var(--web-v1-danger) 38%, transparent); box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-danger) 84%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-danger) 8%, transparent); } .step-card.blocked::before { border-color: color-mix(in srgb, var(--web-v1-danger) 76%, transparent); background: color-mix(in srgb, var(--web-v1-danger) 90%, transparent); } .step-card:hover { transform: none; border-color: color-mix(in srgb, var(--web-v1-border) 34%, transparent); } .step-title { display: flex; gap: 6px; margin-bottom: 3px; } .step-index { min-width: 24px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--web-v1-bg-deep) 78%, transparent); color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); font-size: 11px; } .step-name { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .step-detail { font-size: 11px; line-height: 1.3; color: color-mix(in srgb, var(--web-v1-text-soft) 72%, transparent); } .step-card.active .step-detail { color: color-mix(in srgb, var(--web-v1-text) 82%, transparent); } .actionbar { display: flex; align-items: center; gap: 8px; position: sticky; bottom: 8px; z-index: 3; margin-top: 10px; padding: 10px 12px; border-radius: 10px; border-color: color-mix(in srgb, var(--web-v1-border) 44%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 80%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 6%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.28); } .actionbar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 8%, transparent), transparent 32%, transparent 68%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); } .actionbar-copy { display: grid; align-content: center; flex: 0 1 18ch; min-width: 0; } .actionbar-label { display: none; } .actionbar-summary { font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--web-v1-text-muted); } .actionbar-buttons { display: flex; flex: 1 1 auto; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; } .actionbar-buttons button { flex: 0 0 auto; } button { min-height: var(--view-button-min-height); padding: 9px 14px; border-radius: 6px; border-color: color-mix(in srgb, var(--web-v1-border) 26%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep))); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); } button.secondary { border-color: color-mix(in srgb, var(--web-v1-text-soft) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-bg-deep) 40%, transparent), color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 72%, var(--web-v1-bg-deep))); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-text-soft) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); min-width: 132px; } button.primary { border-color: var(--web-v1-action-primary-line); background: linear-gradient(180deg, var(--web-v1-action-primary-start), var(--web-v1-action-primary-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%); color: #fff4d1; box-shadow: inset 4px 0 0 rgba(234, 201, 123, 0.5), inset 0 0 0 1px rgba(255, 236, 191, 0.14), var(--web-v1-action-primary-shadow); flex: 0 1 228px; min-width: 192px; max-width: 280px; } button:hover:not(:disabled) { transform: none; border-color: rgba(214, 170, 89, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.015), 0 10px 18px rgba(0, 0, 0, 0.18); } button.primary:hover:not(:disabled) { border-color: rgba(234, 201, 123, 0.92); box-shadow: inset 4px 0 0 rgba(255, 225, 148, 0.6), inset 0 0 0 1px rgba(255, 236, 191, 0.18), 0 14px 24px rgba(74, 45, 10, 0.32); } button:focus-visible, .module-item:focus-visible, .answer-item:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-focus) 82%, transparent); outline-offset: 2px; } /* Desktop: Reserve stage height + tone down actionbar buttons to avoid layout jumps */ @media (min-width: 980px) { .main-stage[data-stage-view="module_intro"], .main-stage[data-stage-view="exam"], .main-stage[data-stage-view="result"] { min-height: 520px; } .main-stage[data-stage-view="exam"] .answer-list { min-height: 180px; } .feedback-panel { min-height: 88px; } .actionbar-buttons button { min-height: 44px; } .actionbar-buttons button.primary { flex: 0 0 auto; min-width: 160px; max-width: 240px; border-radius: 8px; box-shadow: inset 2px 0 0 rgba(234,201,123,0.22), inset 0 0 0 1px rgba(255,236,191,0.08), 0 10px 18px rgba(74,45,10,0.12); } } /* ROAR LOGIN BRIDGE GLOBAL 01 */ body[data-app-view="intro_briefing"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } /* Slice tweaks: reserve feedback slot and stabilize stage height */ @media (min-width: 980px) { body[data-app-view="license"] #license-app { min-height: 1160px; } body[data-app-view="license"] #license-app .panel-stage { display: flex; flex-direction: column; height: auto; min-height: 828px; overflow: visible; } body[data-app-view="license"] #license-app #main-stage { flex: 1 0 auto; overflow: visible; min-height: 800px; } /* Ensure a reserved space for feedback so showing/hiding it doesn't change outer height */ body[data-app-view="license"] #feedback-panel { min-height: 124px; } body[data-app-view="license"] #feedback-panel.hidden { display: grid !important; visibility: hidden !important; min-height: 124px; height: 124px; pointer-events: none; } } body[data-app-view="intro_briefing"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.14 !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.86) saturate(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="intro_ready"] .intro-start-panel { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .intro-secondary-cta { min-height: 44px !important; width: min(320px, 68vw) !important; justify-self: center !important; border: 1px solid rgba(255, 244, 209, 0.26) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.52) !important; color: rgba(255, 244, 209, 0.86) !important; font: inherit !important; font-size: 0.9rem !important; font-weight: 850 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-field-label-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .intro-name-instruction { max-width: 27ch !important; margin: 0 auto 4px !important; color: #fff4d1 !important; font-size: 1rem !important; font-weight: 850 !important; line-height: 1.35 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: min(100%, 300px) !important; min-height: 44px !important; border-radius: 8px !important; } .intro-panel-name .intro-input::placeholder, .intro-panel-login .intro-input::placeholder { color: rgba(255, 240, 180, 0.48) !important; text-transform: uppercase !important; } .intro-panel-name .intro-cta, .intro-panel-login .intro-cta, #aim-lab-entry-button.intro-warmup-button, #login-back-button.intro-warmup-button { width: min(100%, 320px) !important; border-radius: 8px !important; letter-spacing: 0 !important; } .intro-panel-login { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 8px !important; text-align: center !important; } .intro-login-title, .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; letter-spacing: 0 !important; } .intro-login-title { color: #fff4d1 !important; font-size: 1.9rem !important; font-weight: 900 !important; } .intro-login-copy { color: rgba(255, 244, 209, 0.82) !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.86) !important; font-size: 0.82rem !important; } @media (max-width: 1280px) { .hero-shell { grid-template-columns: 1fr; } .main-grid { grid-template-columns: 1fr; grid-template-areas: "main" "right" "left"; } .panel { min-height: 0; } .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 4px; } @media (max-width: 760px) { .intro-layer { padding: 18px; } .intro-shell { padding: 20px 0 max(26px, env(safe-area-inset-bottom, 0px)); } .intro-start-panel { width: min(100%, 100vw - 36px); } .intro-panel { width: 100%; padding: 24px 20px; gap: 12px; } .intro-name-title { font-size: clamp(1.7rem, 8vw, 2.2rem); } .intro-copy { margin: 0; max-width: 32ch; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--web-v1-start-subline) 76%, transparent); } .completion-panel { --completion-visual-image: var(--roar-app-background-image); --completion-fade-image: var(--roar-app-background-image); display: grid; align-content: start; gap: 12px; padding: 20px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 88%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 68%, var(--web-v1-bg-deep))), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-link-cta) 7%, transparent), transparent 26%, color-mix(in srgb, var(--web-v1-text-soft) 5%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 2%, transparent), 0 18px 32px rgba(0, 0, 0, 0.24); } .completion-visual { min-height: 132px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 22%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 16%, transparent), color-mix(in srgb, var(--web-v1-link-panel) 38%, transparent)), var(--completion-visual-image) center center / cover no-repeat; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 6%, transparent), 0 10px 22px rgba(0, 0, 0, 0.22); } .completion-note-list { display: grid; gap: 6px; } .completion-note { min-height: 0; display: flex; align-items: flex-start; padding: 10px 11px; border-radius: 7px; background: color-mix(in srgb, var(--web-v1-link-panel) 84%, var(--web-v1-bg-deep)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-link-cta) 58%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 1.5%, transparent); color: color-mix(in srgb, var(--web-v1-completion-text) 88%, transparent); font-size: 13px; line-height: 1.35; } .completion-form { display: grid; gap: 12px; } .completion-field-label { font-size: 11px; font-weight: 900; color: color-mix(in srgb, var(--web-v1-completion-text) 78%, transparent); text-transform: uppercase; letter-spacing: 0.14em; } .completion-input { min-height: 56px; padding: 0 14px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 28%, var(--web-v1-text-soft)); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-input) 92%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-input) 70%, var(--web-v1-bg-deep))); color: var(--web-v1-completion-text); font-size: 14px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--web-v1-link-cta) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .completion-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 42%, transparent); } .completion-error { margin: 0; font-size: 12px; color: var(--web-v1-link-validation); } .completion-actions { display: flex; justify-content: flex-start; } .completion-final-message { padding: 14px 15px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--web-v1-completion-highlight) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-completion-highlight) 16%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-completion-highlight) 16%)); color: color-mix(in srgb, var(--web-v1-completion-text) 92%, white); font-size: 14px; line-height: 1.45; box-shadow: inset 4px 0 0 color-mix(in srgb, var(--web-v1-completion-highlight) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .completion-fade-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 6vh 4vw; pointer-events: none; z-index: 1200; background: color-mix(in srgb, var(--web-v1-completion-overlay) 82%, transparent); backdrop-filter: blur(5px); } .completion-fade-copy { width: min(1200px, 92vw); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: transparent; border: none; box-shadow: none; padding: 0; } .page.completion-active .panel-rail, .page.completion-active .panel-progress { pointer-events: none; opacity: 0.52; } .page.completion-faded .main-grid, .page.completion-faded .hero { opacity: 0; visibility: hidden; } .completion-fade-brand { font-size: clamp(1.2rem, 2.3vw, 1.9rem); font-weight: 900; letter-spacing: 0.34em; text-transform: uppercase; color: var(--web-v1-completion-headline); text-shadow: 0 0 10px color-mix(in srgb, var(--web-v1-completion-highlight) 22%, transparent), 0 0 24px color-mix(in srgb, var(--web-v1-completion-highlight) 14%, transparent); } .completion-fade-message { max-width: min(1100px, 90vw); font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: 1.05; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--web-v1-completion-text); text-shadow: 0 0 12px color-mix(in srgb, var(--web-v1-completion-highlight) 30%, transparent), 0 0 28px color-mix(in srgb, var(--web-v1-completion-highlight) 18%, transparent), 0 0 54px rgba(0, 0, 0, 0.32); } /* name-entry redesign */ .intro-panel-name { width: min(520px, calc(100vw - 56px)); max-width: 520px; padding: 24px 26px 22px; gap: 10px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 18%, transparent); border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 72%, var(--web-v1-bg-deep))), radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--web-v1-link-cta) 6%, transparent), transparent 34%), radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--web-v1-accent) 3%, transparent), transparent 24%); box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), 0 12px 26px rgba(8, 11, 18, 0.22), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 6%, transparent); backdrop-filter: blur(16px); justify-items: center; text-align: center; } .intro-kicker { display: none; } .intro-name-title { margin: 0; max-width: 8ch; line-height: 0.92; text-transform: uppercase; color: var(--web-v1-completion-text); font-size: clamp(1.85rem, 3.5vw, 2.45rem); letter-spacing: 0.025em; font-weight: 900; text-align: center; } .intro-copy { margin: 4px 0 10px; max-width: 27ch; font-size: 12px; line-height: 1.45; color: color-mix(in srgb, var(--web-v1-completion-text) 80%, transparent); text-align: center; } .intro-field-label { width: min(100%, 220px); margin-top: 2px; font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-completion-text) 68%, transparent); text-align: left; justify-self: center; } .intro-input { width: min(100%, 220px); min-height: 38px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--web-v1-link-input) 34%, var(--web-v1-link-cta)); border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-input) 94%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-input) 74%, var(--web-v1-bg-deep))); color: var(--web-v1-completion-text); font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; text-align: left; justify-self: center; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent), 0 8px 16px rgba(0, 0, 0, 0.14); } .intro-input::placeholder { color: color-mix(in srgb, var(--web-v1-completion-text) 34%, transparent); text-align: left; } .intro-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--web-v1-link-cta) 76%, transparent); outline-offset: 2px; border-color: color-mix(in srgb, var(--web-v1-link-cta) 68%, transparent); } .intro-error { width: min(100%, 300px); min-height: 16px; margin: 2px 0 0; font-size: 11px; line-height: 1.3; color: var(--web-v1-link-validation); text-align: center; } .intro-panel-name .intro-cta { width: min(100%, 300px); min-height: 40px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 42%, transparent); border-radius: 15px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 24%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 86%, var(--web-v1-link-cta) 14%)); color: color-mix(in srgb, var(--web-v1-completion-text) 98%, white); font: inherit; font-size: 0.82rem; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24), 0 8px 14px color-mix(in srgb, var(--web-v1-link-cta) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 10%, transparent), inset 0 -8px 16px rgba(0, 0, 0, 0.16); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, background 180ms ease; } .intro-panel-name .intro-cta::before { content: ""; position: absolute; inset: 1px; border-radius: 13px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 8%, transparent), transparent 28%, transparent 74%, color-mix(in srgb, var(--web-v1-link-cta) 5%, transparent)), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-completion-text) 4%, transparent), transparent 18%, transparent 82%, color-mix(in srgb, var(--web-v1-completion-text) 3%, transparent)); pointer-events: none; } .intro-panel-name .intro-cta::after { content: ""; position: absolute; inset: auto 20px 11px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--web-v1-link-cta) 28%, transparent), transparent); pointer-events: none; } .intro-panel-name .intro-cta:hover:not(:disabled), .intro-panel-name .intro-cta:focus-visible { transform: translate3d(0, -2px, 0); border-color: color-mix(in srgb, var(--web-v1-link-cta) 62%, transparent); color: color-mix(in srgb, var(--web-v1-completion-text) 92%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 32%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 82%, var(--web-v1-link-cta) 18%)); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.30), 0 10px 18px color-mix(in srgb, var(--web-v1-link-cta) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 14%, transparent), inset 0 -10px 18px rgba(0, 0, 0, 0.18); } .intro-panel-name .intro-cta:focus-visible { outline: none; } @media (max-width: 760px) { .intro-panel-name { width: min(100%, calc(100vw - 24px)); padding: 20px 18px 18px; gap: 9px; } .intro-name-title { max-width: none; font-size: clamp(1.6rem, 7vw, 2.05rem); } .intro-copy { max-width: 26ch; font-size: 11px; } .intro-field-label, .intro-input { width: min(100%, 204px); } .intro-input { min-height: 36px; font-size: 13px; } .intro-panel-name .intro-cta { width: min(100%, 276px); min-height: 38px; font-size: 0.78rem; letter-spacing: 0.08em; } } /* config-driven intro layout vars */ :root { --aim-lab-enabled: 0; --aim-lab-enabled: 0; --license-page-margin-top: 160px; --intro-start-button-offset-y: -25px; --intro-start-button-width: 360px; --intro-start-button-min-height: 50px; --intro-name-entry-max-width: 600px; } /* config-driven intro layout */ .intro-start-panel { transform: translate3d(0, var(--intro-start-button-offset-y), 0) !important; } .intro-start-panel .intro-cta { width: min(var(--intro-start-button-width), 72vw) !important; max-width: var(--intro-start-button-width) !important; min-height: var(--intro-start-button-min-height) !important; } .intro-panel-name { max-width: var(--intro-name-entry-max-width) !important; } @media (max-width: 760px) { .intro-start-panel { transform: translate3d(0, calc(var(--intro-start-button-offset-y) + 6px), 0) !important; } .intro-start-panel .intro-cta { width: min(calc(var(--intro-start-button-width) - 60px), 74vw) !important; max-width: min(calc(var(--intro-start-button-width) - 60px), 74vw) !important; min-height: calc(var(--intro-start-button-min-height) - 4px) !important; } } /* start license button only */ .intro-start-panel { display: flex !important; justify-content: center !important; align-items: center !important; transform: translate3d(-3px, -30px, 0) !important; } .intro-start-panel .intro-cta { width: min(360px, 72vw) !important; max-width: 360px !important; min-height: 50px !important; padding: 0 18px !important; border-radius: 16px !important; font-size: 0.92rem !important; letter-spacing: 0.12em !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 760px) { .intro-start-panel { transform: translate3d(-3px, -24px, 0) !important; } .intro-start-panel .intro-cta { width: min(300px, 74vw) !important; max-width: 300px !important; min-height: 46px !important; padding: 0 16px !important; font-size: 0.86rem !important; letter-spacing: 0.10em !important; } } /* name-entry input refine: smaller, left-aligned, real form style */ .intro-panel-name .intro-field-label { width: min(100%, 260px) !important; text-align: left !important; justify-self: center !important; } .intro-panel-name .intro-input { width: min(100%, 260px) !important; min-height: 44px !important; padding: 0 14px !important; font-size: 15px !important; font-weight: 600 !important; text-align: left !important; justify-self: center !important; } .intro-panel-name .intro-input::placeholder { text-align: left !important; color: rgba(255, 240, 180, 0.34) !important; } .intro-panel-name .intro-cta { width: min(100%, 360px) !important; min-height: 44px !important; font-size: 0.88rem !important; letter-spacing: 0.10em !important; } @media (max-width: 760px) { .intro-panel-name .intro-field-label { width: min(100%, 220px) !important; } .intro-panel-name .intro-input { width: min(100%, 220px) !important; min-height: 42px !important; font-size: 14px !important; } .intro-panel-name .intro-cta { width: min(100%, 300px) !important; min-height: 42px !important; font-size: 0.82rem !important; } } /* name-entry: input + button smaller in parallel */ .intro-panel-name .intro-field-label { width: min(100%, 232px) !important; } .intro-panel-name .intro-input { width: min(100%, 232px) !important; min-height: 40px !important; padding: 0 12px !important; font-size: 14px !important; } .intro-panel-name .intro-cta { width: min(100%, 320px) !important; min-height: 40px !important; padding: 0 16px !important; font-size: 0.84rem !important; letter-spacing: 0.09em !important; } @media (max-width: 760px) { .intro-panel-name .intro-field-label { width: min(100%, 206px) !important; } .intro-panel-name .intro-input { width: min(100%, 206px) !important; min-height: 38px !important; font-size: 13px !important; } .intro-panel-name .intro-cta { width: min(100%, 272px) !important; min-height: 38px !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; } } /* intro background fixed via real DOM layer */ .intro-layer { overflow: visible !important; } .intro-backdrop { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; } .intro-background { position: absolute !important; inset: 0 !important; } .intro-shell { position: relative !important; z-index: 1 !important; } .app-shell, #license-app { position: relative; z-index: 1; } /* license background fixed via single body layer */ body:not([data-app-view="intro_blackout"]):not([data-app-view="intro_reveal"]):not([data-app-view="intro_hold"]):not([data-app-view="intro_ready"]):not([data-app-view="name_entry"]) { background: linear-gradient(rgba(4, 7, 14, 0.18), rgba(6, 8, 14, 0.28)), var(--web-v1-bg) !important; } .page { position: relative; z-index: 1; } /* IA refactor overrides */ .page { padding: 10px; } .hero { margin-bottom: 10px; padding: 10px 12px; } .hero-shell { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; padding: 16px 18px; } .hero-copy { gap: 8px; } .hero-subtitle { max-width: 60ch; font-size: 14px; line-height: 1.45; color: rgba(234, 225, 200, 0.8); } .status-strip { justify-self: end; padding: 0; border: none; background: transparent; box-shadow: none; } .chip-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .chip.chip-meta { min-width: 136px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 22%, transparent); background: color-mix(in srgb, var(--web-v1-panel) 74%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 3%, transparent); } .chip.chip-meta .chip-label { margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text-soft) 62%, transparent); } .chip.chip-meta .chip-value { font-size: 13px; line-height: 1.3; color: color-mix(in srgb, var(--web-v1-text) 92%, white); } .main-grid { grid-template-columns: minmax(228px, 252px) minmax(0, 1fr) minmax(206px, 224px); gap: 12px; align-items: start; } .panel-stage { padding: 16px; } .panel-rail, .panel-progress { gap: 10px; } .rail-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 24%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 78%, var(--web-v1-bg-deep))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2%, transparent); } .rail-toggle-copy { display: grid; gap: 3px; text-align: left; } .rail-toggle-label { font-size: 13px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--web-v1-text) 90%, white); } .rail-toggle-summary { font-size: 13px; line-height: 1.35; color: color-mix(in srgb, var(--web-v1-text-soft) 70%, transparent); } .rail-toggle-icon { width: 12px; height: 12px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(0deg); transition: transform 180ms ease; } .rail-toggle-icon::before { content: ""; width: 8px; height: 8px; border-right: 2px solid color-mix(in srgb, var(--web-v1-focus) 84%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--web-v1-focus) 84%, transparent); transform: rotate(45deg) translateY(-1px); } .rail-toggle[aria-expanded="true"] .rail-toggle-icon { transform: rotate(180deg); } .module-list-shell { display: grid; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--web-v1-border) 14%, transparent); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-panel-strong) 90%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 86%, var(--web-v1-bg-deep))); } .module-sidebar-heading { margin: 0; padding: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roar-accent-cyan, #3cc3bf); border-bottom: 1px solid color-mix(in srgb, var(--web-v1-border) 16%, transparent); user-select: none; } .module-sidebar-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--web-v1-border) 32%, transparent), transparent 80%); } .module-list-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .module-list-heading, .module-list-meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .module-list-heading { color: color-mix(in srgb, var(--web-v1-text) 78%, transparent); } .module-list-meta { color: rgba(214, 206, 180, 0.58); } .module-list { padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; max-height: min(54vh, 560px); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; } .module-list::-webkit-scrollbar { width: 0; height: 0; display: none; } .module-item { min-height: 88px; min-height: 0; gap: 6px; padding: 10px 11px; border-radius: 12px; } .module-item-title { font-size: 17px; } .module-item-status { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(214, 206, 180, 0.74); } .module-item.active .module-item-status { color: rgba(255, 235, 185, 0.84); } .module-item-meta { display: none; } } .main-stage { gap: 14px; } .inner-card { padding: 22px 24px 20px; border-radius: 18px; } .stage-title, .question-title, #feedback-title { font-size: clamp(2rem, 3.2vw, 2.75rem); } .stage-body { max-width: 56ch; font-size: 17px; line-height: 1.55; } .detail-box { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(11, 15, 21, 0.76), rgba(8, 11, 16, 0.66)); } #stage-details { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; } .detail-line { min-height: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; } .question-panel, .feedback-panel { padding: 16px 18px; border-radius: 16px; } .question-panel { gap: 12px; } .question-prompt { font-size: 18px; line-height: 1.55; color: rgba(240, 246, 251, 0.92); } .question-helper { font-size: 11px; letter-spacing: 0.08em; } .answer-list { gap: 8px; } .answer-item { padding: 14px 16px; border-radius: 12px; } .answer-title { font-size: 15px; line-height: 1.45; } .panel-progress { padding: 14px 12px; } .progress-copy { margin-bottom: 4px; font-size: 11px; line-height: 1.2; color: rgba(214, 206, 180, 0.74); } .step-list { padding-left: 16px; gap: 8px; } .step-card { padding: 10px 10px 10px 14px; border-radius: 12px; } .step-card::before { left: -16px; top: 14px; } .step-name { font-size: 11px; } .step-detail { font-size: 11px; line-height: 1.35; } .actionbar { gap: 12px; margin-top: 12px; padding: 10px 12px; } .actionbar-copy { flex: 1 1 auto; } .actionbar-summary { font-size: 11px; color: rgba(214, 206, 180, 0.72); } .actionbar-buttons { gap: 8px; flex: 0 0 auto; } .actionbar-buttons button.primary { min-width: 220px; } .completion-panel { gap: 14px; padding: 18px; border-radius: 18px; } .completion-visual { min-height: 96px; opacity: 0.72; } .completion-note-list { gap: 8px; } .completion-note { padding: 11px 12px; border-radius: 12px; } .page.completion-active .panel-rail, .page.completion-active .panel-progress { opacity: 0.16; pointer-events: none; filter: saturate(0.6); } .page.completion-active .module-list-shell { display: none !important; } @media (max-width: 1280px) { .hero-shell { grid-template-columns: 1fr; } .status-strip { justify-self: start; } .chip-row { justify-content: flex-start; } .main-grid { grid-template-columns: 1fr; grid-template-areas: "main" "left" "right"; } .module-list { max-height: 320px; } .actionbar { flex-direction: column; align-items: stretch; } .actionbar-buttons { justify-content: stretch; width: 100%; } .actionbar-buttons button, .actionbar-buttons button.primary { width: 100%; max-width: none; } } @media (max-width: 760px) { .page { width: min(100vw - 12px, 100%); margin-top: max(90px, calc(var(--license-page-margin-top) * 0.55)); } .hero-shell, .inner-card, .detail-box, .question-panel, .feedback-panel, .completion-panel { padding-left: 14px; padding-right: 14px; } .hero-title { font-size: clamp(2.5rem, 12vw, 4.2rem); } .stage-title, .question-title, #feedback-title { font-size: clamp(1.7rem, 7vw, 2.3rem); } .status-strip { width: 100%; } .chip-row { width: 100%; } .chip.chip-meta { flex: 1 1 140px; } .module-list { max-height: 260px; } .completion-visual { min-height: 72px; } } .focus-card { display: none !important; } .panel-rail { gap: 12px !important; } .module-list-shell { margin-top: 2px !important; } .rail-toggle { min-height: 78px !important; padding: 16px 18px !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--web-v1-border) 46%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep)) ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 14px 26px rgba(0, 0, 0, 0.26) !important; } .rail-toggle-copy { display: flex !important; align-items: center; justify-content: center; gap: 6px !important; } .rail-toggle-label { display: block; width: 100%; text-align: center; color: color-mix(in srgb, var(--web-v1-text) 96%, white 4%) !important; font-size: 0.94rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-transform: uppercase; } .rail-toggle-summary { display: none !important; } .rail-toggle-icon { border-color: color-mix(in srgb, var(--web-v1-border) 40%, transparent) !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent) !important; } .rail-toggle:hover, .rail-toggle:focus-visible { border-color: color-mix(in srgb, var(--web-v1-accent) 72%, white 28%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-accent) 10%, transparent), 0 0 14px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 14px 28px rgba(0, 0, 0, 0.3) !important; } .module-item { min-height: 84px !important; padding: 14px !important; border-radius: 14px !important; } .module-item-title { font-size: 18px !important; line-height: 1.12 !important; font-weight: 900 !important; } .module-item-status { font-size: 15px !important; line-height: 1.18 !important; font-weight: 800 !important; letter-spacing: 0.01em !important; text-transform: none !important; } .actionbar-buttons button.primary { position: relative; } :root { --guided-glow-border: var(--web-v1-action-primary-line); --guided-glow-start: var(--web-v1-action-primary-start); --guided-glow-end: var(--web-v1-action-primary-end); --guided-glow-text: #fff4d1; --guided-glow-shadow: var(--web-v1-action-primary-shadow); --guided-glow-inner-bar: rgba(234, 201, 123, 0.5); --guided-glow-inner-line: rgba(255, 236, 191, 0.14); --guided-glow-hover-border: rgba(234, 201, 123, 0.92); --guided-glow-hover-inner-bar: rgba(255, 225, 148, 0.6); --guided-glow-hover-inner-line: rgba(255, 236, 191, 0.18); --guided-glow-hover-shadow: 0 14px 24px rgba(74, 45, 10, 0.32); } button.primary { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; color: var(--guided-glow-text) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } button.primary:hover:not(:disabled), button.primary:focus-visible { border-color: var(--guided-glow-hover-border) !important; box-shadow: inset 4px 0 0 var(--guided-glow-hover-inner-bar), inset 0 0 0 1px var(--guided-glow-hover-inner-line), var(--guided-glow-hover-shadow) !important; } body.rail-guided .actionbar-buttons button, body.rail-guided .actionbar-buttons button.primary, body.module-guided .actionbar-buttons button, body.module-guided .actionbar-buttons button.primary { border-color: color-mix(in srgb, var(--web-v1-border) 26%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 74%, var(--web-v1-bg-deep)) ) !important; color: color-mix(in srgb, var(--web-v1-text) 92%, white 8%) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 4%, transparent), 0 8px 16px rgba(0, 0, 0, 0.18) !important; filter: none !important; } body.rail-guided .actionbar-buttons button.primary::before, body.rail-guided .actionbar-buttons button::before, body.rail-guided .actionbar-buttons button.primary::after, body.rail-guided .actionbar-buttons button::after, body.module-guided .actionbar-buttons button.primary::before, body.module-guided .actionbar-buttons button::before, body.module-guided .actionbar-buttons button.primary::after, body.module-guided .actionbar-buttons button::after { opacity: 0 !important; } body.rail-guided .rail-toggle { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } body.rail-guided .rail-toggle-label { color: var(--guided-glow-text) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42), 0 0 8px color-mix(in srgb, var(--web-v1-accent) 22%, transparent), 0 0 16px color-mix(in srgb, var(--web-v1-accent) 12%, transparent) !important; } body.module-guided .rail-toggle, body.action-guided .rail-toggle { border-color: color-mix(in srgb, var(--web-v1-border) 42%, transparent) !important; background: linear-gradient( 180deg, color-mix(in srgb, var(--web-v1-card-strong) 96%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-panel) 82%, var(--web-v1-bg-deep)) ) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--web-v1-text) 3%, transparent), 0 10px 18px rgba(0, 0, 0, 0.18) !important; } body.module-guided .rail-toggle-label, body.action-guided .rail-toggle-label { color: color-mix(in srgb, var(--web-v1-text-soft) 86%, white 14%) !important; text-shadow: none !important; } body.module-guided .module-item.guided-target { border-color: var(--guided-glow-border) !important; background: linear-gradient(180deg, var(--guided-glow-start), var(--guided-glow-end)), linear-gradient(90deg, rgba(255, 236, 191, 0.12), transparent 60%) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), var(--guided-glow-shadow) !important; } body.module-guided .module-item.guided-target .module-item-title, body.module-guided .module-item.guided-target .module-item-status { color: var(--guided-glow-text) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important; } body.action-guided .actionbar-buttons button.primary { border-color: var(--guided-glow-border) !important; box-shadow: inset 4px 0 0 var(--guided-glow-inner-bar), inset 0 0 0 1px var(--guided-glow-inner-line), 0 0 14px color-mix(in srgb, var(--web-v1-accent) 28%, transparent), 0 0 30px color-mix(in srgb, var(--web-v1-accent) 18%, transparent), 0 18px 30px rgba(0, 0, 0, 0.3) !important; } /* Web UX direction: guided, calmer license flow */ .intro-panel-name { width: min(520px, calc(100vw - 28px)) !important; padding: 24px 28px 26px !important; gap: 12px !important; border-radius: 18px !important; } .intro-name-title { font-size: clamp(1.55rem, 3vw, 2.2rem) !important; line-height: 1.05 !important; } .intro-copy { max-width: 34ch !important; font-size: 0.92rem !important; line-height: 1.4 !important; } .intro-panel-name .intro-cta { width: min(100%, 360px) !important; min-height: 58px !important; } @media (min-width: 981px) { .main-grid { grid-template-columns: minmax(220px, 250px) minmax(420px, 1fr) minmax(218px, 250px) !important; grid-template-areas: "left main right" !important; gap: 12px !important; } .hero-shell { grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) !important; } .panel-stage { min-height: 520px !important; } } .panel-stage { padding: 14px !important; background: linear-gradient(180deg, rgba(8, 12, 18, 0.94), rgba(4, 6, 10, 0.9)) !important; } .inner-card { min-height: 132px !important; padding: 18px 20px !important; } .detail-box { grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr) !important; align-items: start !important; } #stage-details { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .panel-progress { position: sticky !important; top: 12px !important; padding: 14px !important; } .progress-copy { margin: 4px 0 10px !important; font-size: 12px !important; line-height: 1.35 !important; } .step-list { gap: 10px !important; } .step-card { min-height: 62px !important; padding: 12px 12px 12px 15px !important; } .step-card.active { transform: translateX(2px); } .step-name { font-size: 12px !important; line-height: 1.2 !important; } .step-detail { font-size: 12px !important; } .actionbar { position: sticky !important; bottom: 10px !important; z-index: 20 !important; max-width: min(760px, calc(100vw - 32px)) !important; margin: 12px auto 0 !important; justify-content: center !important; background: linear-gradient(180deg, rgba(7, 10, 15, 0.96), rgba(4, 6, 10, 0.94)) !important; } .actionbar-copy { flex: 0 1 260px !important; } .actionbar-label { display: none !important; } .actionbar-summary { font-size: 12px !important; line-height: 1.3 !important; } .actionbar-buttons button.primary { min-width: 250px !important; min-height: 48px !important; } @media (max-width: 980px) { .main-grid { grid-template-columns: 1fr !important; grid-template-areas: "main" "right" "left" !important; } #stage-details { grid-template-columns: 1fr !important; } } /* Web UX correction: keep sticky CTA compact at 1280px layouts */ .actionbar { align-items: center !important; flex-direction: row !important; min-height: 68px !important; height: auto !important; } .actionbar-copy { flex: 0 0 auto !important; height: auto !important; } .actionbar-buttons { flex: 0 0 auto !important; } @media (max-width: 760px) { .actionbar { flex-direction: column !important; align-items: stretch !important; } } /* Web functional fix: let intro controls receive browser clicks */ .intro-shell { pointer-events: auto !important; } .intro-start-panel, .intro-panel, .intro-cta, .intro-input, .intro-warmup-button { pointer-events: auto !important; } /* Intro briefing between start and name entry */ body[data-app-view="intro_briefing"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before { opacity: 0.2 !important; } body[data-app-view="intro_briefing"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.94) saturate(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_briefing"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="intro_briefing"] .intro-start-panel, body[data-app-view="intro_briefing"] .intro-panel-name { display: none !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing { display: grid !important; } .intro-panel-briefing { width: min(720px, calc(100vw - 32px)) !important; max-width: 720px !important; gap: 16px !important; padding: 28px 30px 30px !important; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 20%, transparent) !important; border-radius: 18px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-panel) 91%, var(--web-v1-bg-deep)), color-mix(in srgb, var(--web-v1-link-panel) 74%, var(--web-v1-bg-deep))), color-mix(in srgb, var(--web-v1-link-panel) 82%, var(--web-v1-bg-deep)) !important; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 color-mix(in srgb, var(--web-v1-completion-text) 6%, transparent) !important; color: var(--web-v1-completion-text) !important; text-align: left !important; } .intro-briefing-eyebrow { margin: 0 !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--web-v1-link-cta) 78%, var(--web-v1-completion-text)) !important; } .intro-briefing-title { margin: 0 !important; max-width: 17ch !important; font-size: 2rem !important; line-height: 1.06 !important; letter-spacing: 0 !important; color: var(--web-v1-completion-text) !important; } .intro-briefing-copy { margin: 0 !important; max-width: 68ch !important; font-size: 0.95rem !important; line-height: 1.55 !important; color: color-mix(in srgb, var(--web-v1-completion-text) 78%, transparent) !important; } .intro-briefing-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .intro-briefing-card { display: grid !important; gap: 6px !important; min-height: 112px !important; padding: 14px !important; border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 16%, transparent) !important; border-radius: 8px !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 62%, transparent) !important; } .intro-briefing-card-index { font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; color: color-mix(in srgb, var(--web-v1-link-cta) 82%, var(--web-v1-completion-text)) !important; } .intro-briefing-card h3 { margin: 0 !important; font-size: 1rem !important; line-height: 1.18 !important; letter-spacing: 0 !important; color: var(--web-v1-completion-text) !important; } .intro-briefing-card p { margin: 0 !important; font-size: 0.86rem !important; line-height: 1.42 !important; color: color-mix(in srgb, var(--web-v1-completion-text) 72%, transparent) !important; } .intro-briefing-actions { display: grid !important; grid-template-columns: minmax(128px, 0.34fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: stretch !important; } .intro-briefing-button { min-height: 44px !important; padding: 0 16px !important; border-radius: 10px !important; font: inherit !important; font-size: 0.85rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-briefing-button-primary { border: 1px solid color-mix(in srgb, var(--web-v1-link-cta) 48%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--web-v1-link-cta) 26%, var(--web-v1-link-panel)), color-mix(in srgb, var(--web-v1-bg-deep) 84%, var(--web-v1-link-cta) 16%)) !important; color: color-mix(in srgb, var(--web-v1-completion-text) 96%, white) !important; } .intro-briefing-button-secondary { border: 1px solid color-mix(in srgb, var(--web-v1-completion-text) 18%, transparent) !important; background: color-mix(in srgb, var(--web-v1-bg-deep) 72%, transparent) !important; color: color-mix(in srgb, var(--web-v1-completion-text) 76%, transparent) !important; } .intro-briefing-button:hover, .intro-briefing-button:focus-visible { border-color: color-mix(in srgb, var(--web-v1-link-cta) 66%, transparent) !important; outline: none !important; transform: translate3d(0, -1px, 0) !important; } .intro-panel-name .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--web-v1-link-validation) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent) !important; } @media (max-width: 760px) { .intro-panel-briefing { width: min(100%, calc(100vw - 24px)) !important; padding: 22px 18px 20px !important; gap: 13px !important; } .intro-briefing-title { max-width: none !important; font-size: 1.55rem !important; } .intro-briefing-copy { font-size: 0.88rem !important; } .intro-briefing-grid, .intro-briefing-actions { grid-template-columns: 1fr !important; } .intro-briefing-card { min-height: auto !important; } } /* Web-only guided license rework */ body[data-app-view="name_entry"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } body[data-app-view="name_entry"] .intro-start-panel { display: none !important; } .intro-panel-name { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 18px !important; text-align: center !important; } .intro-name-title { font-size: clamp(2rem, 5vw, 3rem) !important; letter-spacing: 0.06em !important; } .intro-copy { max-width: none !important; margin: 0 auto 4px !important; font-size: 14px !important; } .intro-field-label { text-align: left !important; } .intro-entry-actions { display: grid !important; gap: 10px !important; } #name-entry-submit.intro-cta { min-height: 62px !important; font-size: clamp(1.35rem, 3vw, 2rem) !important; letter-spacing: 0.14em !important; } #aim-lab-entry-button.intro-warmup-button { min-height: 42px !important; width: min(340px, 100%) !important; justify-self: center !important; } #name-entry-submit:disabled, #aim-lab-entry-button:disabled { cursor: not-allowed !important; opacity: 0.42 !important; filter: saturate(0.45) brightness(0.72) !important; box-shadow: none !important; } .panel-rail > .section-title { display: none !important; } .panel-rail .focus-card { display: none !important; } body[data-view="home"] .main-stage { align-content: center !important; justify-content: center !important; min-height: 360px !important; } body[data-view="home"] .inner-card { max-width: 560px !important; margin: 0 auto !important; text-align: center !important; } body[data-view="home"] .detail-box { display: none !important; } .actionbar { justify-content: center !important; } body:not([data-view="exam"]) #license-app .actionbar { width: min(260px, calc(100% - 32px)) !important; margin: 12px 12px 0 auto !important; padding: 0 !important; justify-content: flex-end !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body:not([data-view="exam"]) #license-app .actionbar::before, body:not([data-view="exam"]) #license-app .actionbar-copy { display: none !important; } body:not([data-view="exam"]) #license-app .actionbar-buttons { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } .actionbar-copy { flex: 0 1 220px !important; } .actionbar-buttons button.primary { min-width: min(360px, calc(100vw - 48px)) !important; min-height: 54px !important; } .actionbar-buttons button.secondary { min-height: 42px !important; opacity: 0.78 !important; } .step-card .step-name { word-break: normal !important; } @media (max-width: 760px) { .intro-panel-name { padding: 24px 18px !important; } .actionbar-copy { display: none !important; } } /* ROAR LICENSE CLEAN FINAL 01 Finaler kontrollierter Override-Block. Keine alten Background-/Masken-/Responsive-Fix-Ketten mehr. Mapping: - Intro, Lizenz und Completion nutzen das zentrale App-Background-Token. - AIM-Mapping liegt in aim-arena-screen.css. */ #roar-view-background-layer { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 0 !important; display: block !important; pointer-events: none !important; background-color: #000 !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important; opacity: 0 !important; } #app-shell { position: relative !important; z-index: 1 !important; } /* Intro nutzt .intro-background; spaetere Token-Regeln setzen das Bild zentral. */ body[data-app-view="intro_blackout"] #roar-view-background-layer, body[data-app-view="intro_reveal"] #roar-view-background-layer, body[data-app-view="intro_hold"] #roar-view-background-layer, body[data-app-view="intro_ready"] #roar-view-background-layer, body[data-app-view="name_entry"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } /* Lizenz-Hintergrund. */ body[data-app-view="license"] #roar-view-background-layer { opacity: 1 !important; background-image: var(--roar-app-background-image) !important; } /* Danke-/Completion-Hintergrund. */ body[data-app-view="completion"] #roar-view-background-layer { opacity: 1 !important; background-image: var(--roar-app-background-image) !important; } /* Globale Blenden im Lizenz-/Completion-View aus. */ body[data-app-view="license"], body[data-app-view="completion"] { background: #000 !important; } body[data-app-view="license"]::before, body[data-app-view="license"]::after, body[data-app-view="completion"]::before, body[data-app-view="completion"]::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* App-Container darf das Bild nicht übermalen. */ body[data-app-view="license"] #license-app, body[data-app-view="license"] #license-app.page, body[data-app-view="completion"] #license-app, body[data-app-view="completion"] #license-app.page { background: transparent !important; background-image: none !important; background-color: transparent !important; backdrop-filter: none !important; } /* Page-Pseudolayer aus. */ body[data-app-view="license"] #license-app::before, body[data-app-view="license"] #license-app::after, body[data-app-view="license"] .page::before, body[data-app-view="license"] .page::after, body[data-app-view="completion"] #license-app::before, body[data-app-view="completion"] #license-app::after, body[data-app-view="completion"] .page::before, body[data-app-view="completion"] .page::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* Desktop-Lizenzlayout bleibt stabil. Mobile wird später kontrolliert neu gebaut. */ @media (max-width: 1280px), (max-width: 980px), (max-width: 760px) { body[data-app-view="license"] #license-app.page { width: var(--web-v1-page-width) !important; max-width: var(--web-v1-page-width) !important; min-width: var(--web-v1-page-width) !important; margin: var(--license-page-margin-top) auto 12px !important; padding: var(--license-page-padding) !important; } body[data-app-view="license"] #license-app .hero-shell { grid-template-columns: minmax(0, 1.06fr) minmax(380px, 500px) !important; } body[data-app-view="license"] #license-app .main-grid { grid-template-columns: minmax(220px, 0.7fr) minmax(480px, 1.45fr) minmax(220px, 0.72fr) !important; grid-template-areas: "left main right" !important; align-items: start !important; } body[data-app-view="license"] #license-app .panel-rail, body[data-app-view="license"] #license-app .panel-left { grid-area: left !important; } body[data-app-view="license"] #license-app .panel-stage, body[data-app-view="license"] #license-app #main-stage.main-stage { grid-area: main !important; } body[data-app-view="license"] #license-app .panel-progress, body[data-app-view="license"] #license-app .panel-right { grid-area: right !important; } } /* Stage selbst transparent. Nur Karten bleiben lesbar. */ body[data-app-view="license"] #main-stage { background: transparent !important; background-image: none !important; background-color: transparent !important; backdrop-filter: none !important; box-shadow: none !important; } body[data-app-view="license"] .hero, body[data-app-view="license"] #main-stage > .inner-card, body[data-app-view="completion"] #completion-panel { background: rgba(3, 4, 7, 0.42) !important; background-image: none !important; backdrop-filter: blur(1px) !important; } body[data-app-view="license"] #main-stage > .inner-card::before { opacity: 0 !important; background: none !important; background-image: none !important; } /* ROAR LICENSE OUTER FRAME GLASS 01 Nur der große äußere Lizenzkasten bekommt eine dezente schwarze Glas-Blende. Das Hintergrundbild soll durchscheinen. */ body[data-app-view="license"] #license-app.page { background: rgba(0, 0, 0, 0.28) !important; background-image: none !important; background-color: rgba(0, 0, 0, 0.28) !important; backdrop-filter: blur(1.5px) !important; -webkit-backdrop-filter: blur(1.5px) !important; } body[data-app-view="license"] #license-app.page::before, body[data-app-view="license"] #license-app.page::after, body[data-app-view="license"] #license-app::before, body[data-app-view="license"] #license-app::after { opacity: 0 !important; background: none !important; background-image: none !important; } /* ROAR LICENSE EXAM STATUS STRIP REMOVE 02 Entfernt nur die Prüfleiste mit Fragen-/Antworten-Status. Keine Login-, Prüfungs- oder Runtime-Logik ändern. */ body[data-app-view="license"] #license-app .exam-status-strip, body[data-app-view="license"] #license-app .exam-progress-strip, body[data-app-view="license"] #license-app .question-status-strip, body[data-app-view="license"] #license-app .question-progress-strip, body[data-app-view="license"] #license-app .stage-status-strip, body[data-app-view="license"] #license-app .stage-progress-strip, body[data-app-view="license"] #license-app .briefing-scoreboard-box { display: none !important; } body[data-app-view="license"] #license-app .main-stage .inner-card { row-gap: 12px !important; } /* ROAR LICENSE QUESTION PROMPT FOCUS 01 Hebt nur den eigentlichen Fragetext hervor. Keine Antwortoptionen, keine Prüfungslogik, keine Header-/Statusboxen. */ body[data-app-view="license"] #license-app #question-prompt { display: block !important; margin: 12px 0 16px !important; padding: 18px 20px 18px 22px !important; border-left: 5px solid rgba(255, 112, 32, 0.96) !important; border-radius: 16px !important; background: rgba(0, 0, 0, 0.58) !important; background-image: linear-gradient(90deg, rgba(255, 112, 32, 0.14), rgba(0, 0, 0, 0) 38%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 14px 28px rgba(0, 0, 0, 0.28) !important; color: #fff4d1 !important; font-size: clamp(1.25rem, 2vw, 1.65rem) !important; font-weight: 850 !important; line-height: 1.34 !important; letter-spacing: 0.01em !important; } /* ROAR LOGIN BRIDGE + MEMBER HUB 01 */ body[data-app-view="intro_briefing"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.14 !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.78) saturate(1.02) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_ready"] .intro-start-panel { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; justify-items: stretch !important; } .intro-secondary-cta, .intro-panel-login .intro-warmup-button{ font: inherit !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .intro-secondary-cta { min-height: 44px !important; width: min(320px, 68vw) !important; justify-self: center !important; padding: 0 18px !important; border: 1px solid rgba(255, 244, 209, 0.26) !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.52) !important; color: rgba(255, 244, 209, 0.86) !important; font-size: 0.9rem !important; font-weight: 850 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px rgba(0, 0, 0, 0.26) !important; cursor: pointer !important; } .intro-secondary-cta:hover:not(:disabled), .intro-secondary-cta:focus-visible { border-color: rgba(255, 122, 24, 0.74) !important; color: #fff4d1 !important; outline: none !important; } .intro-field-label-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .intro-name-instruction, .intro-login-title, .intro-login-copy, .intro-login-demo-note { letter-spacing: 0 !important; } .intro-name-instruction { max-width: 27ch !important; margin: 0 auto 4px !important; color: #fff4d1 !important; font-size: 1rem !important; font-weight: 850 !important; line-height: 1.35 !important; text-transform: uppercase !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: min(100%, 300px) !important; min-height: 44px !important; border-radius: 8px !important; text-transform: none !important; } .intro-panel-name .intro-input::placeholder, .intro-panel-login .intro-input::placeholder { color: rgba(255, 240, 180, 0.48) !important; text-transform: uppercase !important; } .intro-panel-name .intro-cta, .intro-panel-login .intro-cta { min-height: 48px !important; width: min(100%, 320px) !important; border-radius: 8px !important; font-size: 0.98rem !important; letter-spacing: 0 !important; } #aim-lab-entry-button.intro-warmup-button, #login-back-button.intro-warmup-button { min-height: 42px !important; width: min(100%, 320px) !important; border-radius: 8px !important; letter-spacing: 0 !important; } body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: 24px !important; } .intro-panel-login { width: min(520px, calc(100vw - 32px)) !important; max-width: 520px !important; gap: 12px !important; padding: 28px 32px 30px !important; border-radius: 8px !important; text-align: center !important; } .intro-login-title { margin: 0 !important; color: #fff4d1 !important; font-size: 1.9rem !important; font-weight: 900 !important; line-height: 1.1 !important; } .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; max-width: 34ch !important; font-size: 0.92rem !important; line-height: 1.45 !important; color: rgba(255, 244, 209, 0.82) !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.86) !important; font-size: 0.82rem !important; } .intro-panel-login .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--web-v1-link-validation) 32%, transparent), inset 0 1px 0 color-mix(in srgb, var(--web-v1-text) 2.5%, transparent) !important; } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { gap: 10px !important; } .intro-secondary-cta { width: min(280px, 74vw) !important; min-height: 42px !important; } .intro-name-instruction { font-size: 0.94rem !important; } } /* Close the legacy 1280px media wrapper before the consolidated Entry system. */ } /* ROAR ENTRY UI SYSTEM 02 Single visual system for start, briefing, name entry, login, and member hub. Keeps runtime IDs and license/AIM flow logic untouched. */ :root { --entry-surface: rgba(4, 7, 13, 0.78); --entry-surface-strong: rgba(3, 5, 10, 0.9); --entry-surface-soft: rgba(12, 16, 22, 0.7); --entry-border: rgba(255, 112, 32, 0.34); --entry-border-soft: rgba(255, 244, 209, 0.13); --entry-text: #fff4d1; --entry-text-soft: rgba(255, 244, 209, 0.78); --entry-text-muted: rgba(255, 244, 209, 0.58); --entry-cyan: #3cc3bf; --entry-orange: #ff7020; --entry-panel-radius: 12px; --entry-card-radius: 8px; --entry-control-radius: 8px; --entry-control-height: 48px; --entry-control-height-compact: 44px; --entry-panel-shadow: 0 26px 62px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 244, 209, 0.045); --entry-focus-ring: 0 0 0 2px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 44%, transparent); } .intro-shell, .intro-start-panel, .intro-panel, .entry-button, .intro-input{ pointer-events: auto !important; } body[data-app-view="intro_briefing"], body[data-app-view="name_entry"], body[data-app-view="login_entry"], body[data-app-view="member_hub"] { background: #000 !important; } body[data-app-view="intro_briefing"]::before, body[data-app-view="name_entry"]::before, body[data-app-view="login_entry"]::before, body[data-app-view="member_hub"]::before { opacity: 0.10 !important; background: radial-gradient(circle at 50% 28%, rgba(255, 112, 32, 0.18), transparent 34%), radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 8%, transparent), transparent 26%), linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.54)) !important; } body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="name_entry"] .intro-background, body[data-app-view="login_entry"] .intro-background, body[data-app-view="member_hub"] .intro-background { opacity: 1 !important; transform: translate3d(0, 0, 0) scale(1) !important; filter: brightness(0.82) saturate(1.08) contrast(1.04) !important; } body[data-app-view="intro_briefing"] #roar-view-background-layer, body[data-app-view="name_entry"] #roar-view-background-layer, body[data-app-view="login_entry"] #roar-view-background-layer, body[data-app-view="member_hub"] #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } body[data-app-view="intro_briefing"] .intro-layer::after, body[data-app-view="name_entry"] .intro-layer::after, body[data-app-view="login_entry"] .intro-layer::after, body[data-app-view="member_hub"] .intro-layer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.18) 64%, rgba(0, 0, 0, 0.3) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34)); } body[data-app-view="intro_briefing"] .intro-shell, body[data-app-view="name_entry"] .intro-shell, body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { align-items: center !important; justify-items: center !important; padding: clamp(18px, 3vw, 32px) !important; } body[data-app-view="intro_ready"] .intro-start-panel { width: min(420px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; justify-items: stretch !important; } .entry-button { position: relative !important; min-height: var(--entry-control-height) !important; width: 100% !important; display: inline-grid !important; place-items: center !important; padding: 0 18px !important; border-radius: var(--entry-control-radius) !important; border: 1px solid var(--entry-border-soft) !important; overflow: hidden !important; font: inherit !important; font-size: 0.88rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0.08em !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important; cursor: pointer !important; transform: none !important; transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, color 170ms ease, opacity 170ms ease, transform 170ms ease !important; } .entry-button::before { content: "" !important; position: absolute !important; inset: 1px !important; border-radius: calc(var(--entry-control-radius) - 1px) !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255, 244, 209, 0.08), transparent 35%, rgba(255, 112, 32, 0.07)) !important; } .entry-button::after { content: "" !important; position: absolute !important; inset: auto 18px 9px !important; height: 1px !important; pointer-events: none !important; background: linear-gradient(90deg, transparent, rgba(255, 244, 209, 0.32), transparent) !important; } .entry-button-primary { border-color: rgba(255, 112, 32, 0.76) !important; background: linear-gradient(180deg, rgba(255, 122, 32, 0.58) 0%, rgba(113, 48, 13, 0.78) 56%, rgba(16, 10, 8, 0.92) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.1), transparent 58%) !important; color: var(--entry-text) !important; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 244, 209, 0.035) inset, 0 -14px 26px rgba(0, 0, 0, 0.28) inset !important; } .entry-button-secondary, .entry-button-ghost { background: linear-gradient(180deg, rgba(14, 20, 25, 0.86), rgba(4, 7, 13, 0.82)) !important; color: var(--entry-text-soft) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .entry-button-secondary { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 42%, transparent) !important; } .entry-button-ghost { border-color: rgba(255, 244, 209, 0.18) !important; } .entry-button:hover:not(:disabled), .entry-button:focus-visible { transform: translate3d(0, -1px, 0) !important; outline: none !important; border-color: rgba(255, 122, 32, 0.86) !important; color: var(--entry-text) !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 244, 209, 0.06) inset, var(--entry-focus-ring) !important; } .entry-button:active:not(:disabled) { transform: translate3d(0, 0, 0) !important; } .entry-button:disabled { cursor: not-allowed !important; opacity: 0.46 !important; filter: saturate(0.55) brightness(0.76) !important; box-shadow: none !important; } #intro-start-button.entry-button { min-height: 54px !important; font-size: 1rem !important; letter-spacing: 0.22em !important; } #intro-login-button.entry-button { min-height: 46px !important; justify-self: stretch !important; width: 100% !important; font-size: 0.82rem !important; letter-spacing: 0.1em !important; } .intro-panel { border-radius: var(--entry-panel-radius) !important; border: 1px solid var(--entry-border) !important; background: linear-gradient(180deg, rgba(7, 10, 16, 0.92), rgba(3, 5, 10, 0.88)), linear-gradient(90deg, rgba(255, 112, 32, 0.07), transparent 36%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 4%, transparent)) !important; box-shadow: var(--entry-panel-shadow) !important; color: var(--entry-text) !important; backdrop-filter: blur(16px) saturate(1.12) !important; -webkit-backdrop-filter: blur(16px) saturate(1.12) !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing { display: grid !important; } .intro-panel-briefing { width: min(820px, calc(100vw - 40px)) !important; max-width: 820px !important; gap: 18px !important; padding: 32px 34px 30px !important; text-align: left !important; } .intro-briefing-eyebrow{ margin: 0 !important; color: var(--entry-orange) !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .intro-briefing-title { margin: 0 !important; max-width: 24ch !important; color: var(--entry-text) !important; font-size: clamp(1.85rem, 3vw, 2.35rem) !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .intro-briefing-copy { margin: 0 !important; max-width: 72ch !important; color: var(--entry-text-soft) !important; font-size: 0.98rem !important; line-height: 1.58 !important; letter-spacing: 0 !important; } .intro-briefing-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .intro-briefing-card{ border: 1px solid var(--entry-border-soft) !important; border-radius: var(--entry-card-radius) !important; background: linear-gradient(180deg, rgba(14, 18, 24, 0.82), rgba(7, 10, 15, 0.74)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .intro-briefing-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto 1fr !important; column-gap: 12px !important; row-gap: 5px !important; min-height: 104px !important; padding: 15px !important; } .intro-briefing-card-index { grid-row: 1 / span 2 !important; width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 34%, transparent) !important; color: var(--entry-cyan) !important; font-size: 0.72rem !important; font-weight: 950 !important; letter-spacing: 0 !important; } .intro-briefing-card h3 { margin: 0 !important; color: var(--entry-text) !important; font-size: 1rem !important; font-weight: 900 !important; line-height: 1.22 !important; letter-spacing: 0 !important; } .intro-briefing-card p { margin: 0 !important; color: var(--entry-text-soft) !important; font-size: 0.88rem !important; line-height: 1.42 !important; letter-spacing: 0 !important; } .intro-briefing-actions { display: grid !important; grid-template-columns: minmax(132px, 0.32fr) minmax(0, 1fr) !important; gap: 10px !important; align-items: stretch !important; padding-top: 2px !important; } .intro-briefing-button { min-height: var(--entry-control-height) !important; } .intro-panel-name, .intro-panel-login { width: min(430px, calc(100vw - 40px)) !important; max-width: 430px !important; gap: 12px !important; padding: 28px 30px 30px !important; text-align: center !important; } .intro-panel-name { background: linear-gradient(180deg, rgba(7, 10, 16, 0.84), rgba(3, 5, 10, 0.8)), linear-gradient(90deg, rgba(255, 112, 32, 0.055), transparent 48%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 4%, transparent)) !important; } .intro-name-instruction { max-width: 29ch !important; margin: 0 auto 2px !important; color: var(--entry-text) !important; font-size: 1.02rem !important; font-weight: 850 !important; line-height: 1.36 !important; letter-spacing: 0 !important; text-transform: none !important; } .intro-login-title { margin: 0 !important; color: var(--entry-text) !important; font-size: 1.75rem !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-transform: none !important; } .intro-login-copy, .intro-login-demo-note { margin: 0 auto !important; max-width: 34ch !important; color: var(--entry-text-soft) !important; font-size: 0.9rem !important; line-height: 1.45 !important; letter-spacing: 0 !important; } .intro-login-demo-note { color: rgba(255, 183, 96, 0.9) !important; font-size: 0.8rem !important; } .intro-input { width: 100% !important; min-height: var(--entry-control-height) !important; padding: 0 14px !important; border-radius: var(--entry-control-radius) !important; border: 1px solid rgba(255, 112, 32, 0.5) !important; background: linear-gradient(180deg, rgba(2, 4, 8, 0.92), rgba(6, 9, 14, 0.86)) !important; color: var(--entry-text) !important; font: inherit !important; font-size: 0.95rem !important; font-weight: 650 !important; letter-spacing: 0.02em !important; text-transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .intro-panel-name .intro-input, .intro-panel-login .intro-input { width: 100% !important; min-height: var(--entry-control-height) !important; } .intro-input::placeholder { color: rgba(255, 244, 209, 0.45) !important; font-weight: 650 !important; letter-spacing: 0.04em !important; } .intro-input:focus-visible { outline: none !important; border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 76%, transparent) !important; box-shadow: var(--entry-focus-ring), inset 0 1px 0 rgba(255, 244, 209, 0.05) !important; } .intro-input[aria-invalid="true"], .intro-panel-name .intro-input[aria-invalid="true"], .intro-panel-login .intro-input[aria-invalid="true"] { border-color: var(--web-v1-link-validation) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--web-v1-link-validation) 28%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .intro-entry-actions { display: grid !important; gap: 10px !important; margin-top: 2px !important; } .intro-panel-name .entry-button, .intro-panel-login .entry-button, #name-entry-submit.entry-button, #aim-lab-entry-button.entry-button, #login-submit-button.entry-button, #login-back-button.entry-button { min-height: var(--entry-control-height) !important; width: 100% !important; justify-self: stretch !important; font-size: 0.9rem !important; letter-spacing: 0.08em !important; } #login-back-button.entry-button, #aim-lab-entry-button.entry-button { min-height: var(--entry-control-height-compact) !important; } .intro-error { min-height: 18px !important; margin: -2px 0 0 !important; color: var(--web-v1-link-validation) !important; font-size: 0.8rem !important; line-height: 1.35 !important; text-align: left !important; } .intro-error.hidden { display: none !important; } @media (max-width: 860px) { .intro-panel-briefing { width: min(100%, calc(100vw - 28px)) !important; padding: 26px 22px 24px !important; } .intro-briefing-grid, .intro-briefing-actions{ grid-template-columns: 1fr !important; } } @media (max-width: 560px) { body[data-app-view="intro_briefing"] .intro-shell, body[data-app-view="name_entry"] .intro-shell, body[data-app-view="login_entry"] .intro-shell, body[data-app-view="member_hub"] .intro-shell { padding: 14px !important; } body[data-app-view="intro_ready"] .intro-start-panel, .intro-panel-name, .intro-panel-login, .intro-panel-briefing{ width: min(100%, calc(100vw - 24px)) !important; } .intro-panel-name, .intro-panel-login { padding: 24px 20px !important; } .intro-panel-briefing { padding: 24px 18px 20px !important; gap: 14px !important; } .intro-briefing-title { max-width: none !important; font-size: 1.55rem !important; } .intro-briefing-card { grid-template-columns: 1fr !important; min-height: auto !important; } .intro-briefing-card-index { grid-row: auto !important; } #intro-start-button.entry-button { min-height: 50px !important; font-size: 0.92rem !important; letter-spacing: 0.16em !important; } #intro-login-button.entry-button, .entry-button { min-height: 44px !important; } } /* ROAR ENTRY FINAL POLISH 02 Final design pass for compact entry controls, quiet glow, shared panels, hub, and completion. Runtime IDs and flow logic stay unchanged. */ :root { --entry-surface: rgba(5, 8, 13, 0.82); --entry-surface-strong: rgba(3, 5, 9, 0.9); --entry-surface-soft: rgba(12, 16, 22, 0.68); --entry-border: rgba(255, 122, 32, 0.24); --entry-border-soft: rgba(255, 244, 209, 0.12); --entry-text-soft: rgba(255, 244, 209, 0.76); --entry-text-muted: rgba(255, 244, 209, 0.5); --entry-panel-radius: 10px; --entry-card-radius: 8px; --entry-control-radius: 9px; --entry-control-height: 44px; --entry-control-height-compact: 42px; --entry-panel-shadow: 0 22px 46px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 244, 209, 0.04); --entry-focus-ring: 0 0 0 2px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 34%, transparent), 0 0 0 1px rgba(255, 244, 209, 0.04) inset; } body[data-app-view="intro_ready"] .intro-start-panel { width: min(344px, calc(100vw - 48px)) !important; gap: 8px !important; } .entry-button { min-height: var(--entry-control-height) !important; padding: 0 16px !important; border-radius: var(--entry-control-radius) !important; border-color: var(--entry-border-soft) !important; font-size: 0.84rem !important; font-weight: 850 !important; letter-spacing: 0.06em !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42) !important; } .entry-button::before { background: linear-gradient(180deg, rgba(255, 244, 209, 0.055), transparent 42%, rgba(255, 112, 32, 0.035)) !important; } .entry-button::after { inset: auto 22px 7px !important; background: linear-gradient(90deg, transparent, rgba(255, 244, 209, 0.2), transparent) !important; } .entry-button-primary { border-color: rgba(255, 122, 32, 0.56) !important; background: linear-gradient(180deg, rgba(219, 98, 28, 0.58) 0%, rgba(91, 39, 14, 0.74) 58%, rgba(12, 8, 7, 0.9) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.075), transparent 62%) !important; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.06), inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important; } .entry-button-secondary, .entry-button-ghost { background: linear-gradient(180deg, rgba(13, 18, 23, 0.84), rgba(4, 7, 12, 0.82)) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .entry-button-secondary { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 34%, transparent) !important; } .entry-button-ghost { border-color: rgba(255, 244, 209, 0.16) !important; } .entry-button:hover:not(:disabled), .entry-button:focus-visible { border-color: rgba(255, 122, 32, 0.64) !important; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.36), var(--entry-focus-ring) !important; } .entry-button:active:not(:disabled) { transform: translate3d(0, 0, 0) scale(0.995) !important; } .entry-button:disabled{ opacity: 0.52 !important; filter: saturate(0.62) brightness(0.82) !important; } #intro-start-button.entry-button { min-height: 48px !important; font-size: 0.9rem !important; letter-spacing: 0.11em !important; } #intro-login-button.entry-button { min-height: 44px !important; font-size: 0.82rem !important; letter-spacing: 0.07em !important; } .intro-panel { border-color: var(--entry-border) !important; background: linear-gradient(180deg, rgba(7, 10, 15, 0.9), rgba(3, 5, 9, 0.86)), linear-gradient(90deg, rgba(255, 112, 32, 0.045), transparent 42%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 4%, transparent)) !important; box-shadow: var(--entry-panel-shadow) !important; backdrop-filter: blur(14px) saturate(1.08) !important; -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; } .intro-panel-briefing { width: min(780px, calc(100vw - 40px)) !important; gap: 16px !important; padding: 30px 32px 28px !important; } .intro-briefing-card{ border-color: rgba(255, 244, 209, 0.115) !important; background: linear-gradient(180deg, rgba(13, 18, 23, 0.74), rgba(5, 8, 13, 0.66)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.03) !important; } .intro-briefing-button { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; letter-spacing: 0.06em !important; } .intro-panel-name, .intro-panel-login { width: min(400px, calc(100vw - 40px)) !important; max-width: 400px !important; gap: 11px !important; padding: 26px 28px 28px !important; } .intro-name-instruction { max-width: 28ch !important; font-size: 0.98rem !important; } .intro-login-title { font-size: 1.55rem !important; } .intro-login-demo-note { display: inline-grid !important; min-height: 30px !important; place-items: center !important; padding: 0 12px !important; border: 1px solid rgba(255, 183, 96, 0.2) !important; border-radius: 999px !important; background: rgba(255, 183, 96, 0.055) !important; color: rgba(255, 220, 164, 0.86) !important; } .intro-input, .intro-panel-name .intro-input, .intro-panel-login .intro-input { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 244, 209, 0.18) !important; background: linear-gradient(180deg, rgba(2, 4, 8, 0.9), rgba(6, 9, 14, 0.82)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.035) !important; } .intro-input:focus-visible { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 68%, transparent) !important; box-shadow: var(--entry-focus-ring) !important; } .intro-panel-name .entry-button, .intro-panel-login .entry-button, #name-entry-submit.entry-button, #aim-lab-entry-button.entry-button, #login-submit-button.entry-button, #login-back-button.entry-button { min-height: var(--entry-control-height) !important; font-size: 0.84rem !important; letter-spacing: 0.06em !important; } #login-back-button.entry-button, #aim-lab-entry-button.entry-button { min-height: var(--entry-control-height-compact) !important; } #license-app button.primary:not(.entry-button) { min-height: 50px !important; border-radius: 9px !important; border-color: rgba(255, 122, 32, 0.72) !important; background: linear-gradient(180deg, rgba(255, 124, 22, 0.88) 0%, rgba(180, 68, 7, 0.9) 50%, rgba(24, 7, 2, 0.96) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.1), transparent 62%) !important; color: #fff4d1 !important; box-shadow: inset 3px 0 0 rgba(255, 201, 123, 0.34), inset 0 0 0 1px rgba(255, 236, 191, 0.12), 0 10px 18px rgba(0, 0, 0, 0.28) !important; } #license-app button.primary:not(.entry-button):hover:not(:disabled), #license-app button.primary:not(.entry-button):focus-visible { box-shadow: inset 3px 0 0 rgba(255, 225, 148, 0.42), inset 0 0 0 1px rgba(255, 236, 191, 0.14), 0 12px 22px rgba(0, 0, 0, 0.3) !important; } #license-app button.secondary:not(.entry-button), #license-app .actionbar-buttons button.secondary { min-height: 48px !important; border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 46%, transparent) !important; background: linear-gradient(180deg, rgba(12, 24, 31, 0.96), rgba(4, 8, 12, 0.96)), linear-gradient(90deg, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 10%, transparent), transparent 66%) !important; color: rgba(214, 252, 255, 0.9) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 34%, transparent), inset 0 1px 0 rgba(214, 252, 255, 0.04), 0 8px 16px rgba(0, 0, 0, 0.24) !important; } #license-app button.secondary:not(.entry-button):hover:not(:disabled), #license-app .actionbar-buttons button.secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 72%, transparent) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 48%, transparent), inset 0 1px 0 rgba(214, 252, 255, 0.06), 0 0 20px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 18%, transparent), 0 10px 20px rgba(0, 0, 0, 0.3) !important; } html body[data-app-view="completion"] #license-app #completion-panel.completion-panel { flex: 0 1 660px !important; width: min(660px, 100%) !important; min-width: min(660px, 100%) !important; justify-self: center !important; gap: 14px !important; padding: clamp(20px, 2.5vw, 28px) !important; border-radius: var(--entry-panel-radius) !important; border-color: rgba(255, 122, 32, 0.26) !important; background: linear-gradient(180deg, rgba(8, 11, 16, 0.90), rgba(2, 4, 8, 0.92)), radial-gradient(circle at 22% 0%, rgba(255, 112, 32, 0.08), transparent 32%), linear-gradient(90deg, rgba(255, 112, 32, 0.055), transparent 48%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 3%, transparent)) !important; box-shadow: 0 24px 52px rgba(0, 0, 0, 0.44), 0 8px 22px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; backdrop-filter: blur(12px) saturate(1.08) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; } html body[data-app-view="completion"] #license-app #main-stage.main-stage > .inner-card { display: none !important; } html body[data-app-view="completion"] #license-app #main-stage.main-stage { display: flex !important; width: 100% !important; justify-content: center !important; align-items: flex-start !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body[data-app-view="completion"] #license-app #completion-form { gap: 10px !important; padding: 14px !important; border-radius: var(--entry-panel-radius) !important; border-color: rgba(255, 244, 209, 0.12) !important; background: linear-gradient(180deg, rgba(4, 7, 12, 0.70), rgba(0, 0, 0, 0.42)) !important; } html body[data-app-view="completion"] #license-app #profile-link-input.completion-input, html body[data-app-view="completion"] #license-app #contact-email-input.completion-input { min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 244, 209, 0.14) !important; background: linear-gradient(180deg, rgba(2, 4, 7, 0.86), rgba(0, 0, 0, 0.68)) !important; box-shadow: inset 3px 0 0 rgba(255, 112, 32, 0.24), inset 0 1px 0 rgba(255, 244, 209, 0.045), 0 8px 18px rgba(0, 0, 0, 0.22) !important; } html body[data-app-view="completion"] #license-app .completion-input:focus { border-color: rgba(255, 122, 32, 0.56) !important; outline: none !important; box-shadow: inset 3px 0 0 rgba(255, 122, 32, 0.42), inset 0 1px 0 rgba(255, 244, 209, 0.07), 0 0 0 3px rgba(255, 122, 32, 0.12), 0 12px 24px rgba(0, 0, 0, 0.28) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary { width: 100% !important; min-height: var(--entry-control-height) !important; border-radius: var(--entry-control-radius) !important; border-color: rgba(255, 122, 32, 0.74) !important; background: linear-gradient(180deg, rgba(255, 140, 38, 0.98), rgba(222, 77, 14, 0.96)) !important; color: #170904 !important; font-size: 0.84rem !important; letter-spacing: 0.07em !important; box-shadow: inset 0 1px 0 rgba(255, 236, 191, 0.32), inset 0 -8px 18px rgba(93, 25, 0, 0.18), 0 12px 22px rgba(0, 0, 0, 0.32), 0 0 0 rgba(255, 112, 32, 0) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary:hover:not(:disabled), html body[data-app-view="completion"] #license-app #completion-submit.primary:focus-visible:not(:disabled) { transform: translateY(-1px) !important; border-color: rgba(255, 177, 72, 0.9) !important; background: linear-gradient(180deg, rgba(255, 166, 54, 1), rgba(239, 87, 15, 1)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.42), inset 0 -8px 18px rgba(93, 25, 0, 0.14), 0 14px 28px rgba(0, 0, 0, 0.36), var(--roar-soft-glow-active) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary:active:not(:disabled) { transform: translateY(0) !important; box-shadow: inset 0 2px 8px rgba(93, 25, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.28), var(--roar-soft-glow-active) !important; } html body[data-flow-state="faded"] #license-app .completion-panel, html body[data-flow-state="faded"] #license-app .panel-rail, html body[data-flow-state="faded"] #license-app .panel-progress, html body[data-flow-state="faded"] #license-app .actionbar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay { position: fixed !important; inset: clamp(118px, 12vh, 150px) clamp(20px, 2.2vw, 34px) clamp(20px, 3vh, 34px) !important; z-index: 2000 !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; isolation: isolate !important; background: radial-gradient(circle at 18% 34%, rgba(255, 112, 32, 0.12), transparent 34%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 10%, transparent), transparent 28%), linear-gradient(180deg, rgba(3, 5, 8, 0.82), rgba(0, 0, 0, 0.90)), linear-gradient(90deg, rgba(255, 112, 32, 0.11), rgba(0, 0, 0, 0) 42%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 6%, transparent)) !important; border: 1px solid rgba(255, 122, 32, 0.28) !important; border-radius: var(--license-panel-radius) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.06), inset var(--roar-soft-glow-muted), 0 28px 90px rgba(0, 0, 0, 0.58) !important; backdrop-filter: blur(10px) saturate(1.12) !important; -webkit-backdrop-filter: blur(10px) saturate(1.12) !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::before { content: "" !important; position: absolute !important; inset: clamp(18px, 2.4vw, 34px) !important; pointer-events: none !important; border-radius: calc(var(--license-panel-radius) - 6px) !important; border: 1px solid rgba(255, 244, 209, 0.055) !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.18), transparent 32%, transparent 72%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 12%, transparent)), linear-gradient(180deg, rgba(255, 244, 209, 0.028), transparent 24%, transparent 78%, rgba(255, 112, 32, 0.055)) !important; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 88%) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-copy { position: relative !important; z-index: 2 !important; opacity: 1 !important; visibility: visible !important; width: min(1040px, 88%) !important; gap: clamp(13px, 1.55vw, 18px) !important; align-items: flex-start !important; text-align: left !important; padding: clamp(42px, 5.5vw, 82px) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-brand { align-self: flex-start !important; padding: 7px 10px 7px 12px !important; border-left: 3px solid rgba(255, 122, 32, 0.72) !important; color: rgba(255, 244, 209, 0.84) !important; font-size: clamp(0.78rem, 1.15vw, 0.95rem) !important; font-weight: 950 !important; letter-spacing: 0.24em !important; background: linear-gradient(90deg, rgba(255, 112, 32, 0.12), transparent 82%) !important; text-shadow: var(--roar-soft-glow-muted), 0 0 18px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 10%, transparent) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-title { color: #fff4d1 !important; margin-top: clamp(4px, 0.8vw, 10px) !important; font-size: clamp(4.4rem, 8.6vw, 8.8rem) !important; font-weight: 950 !important; line-height: 0.86 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: var(--roar-soft-glow-active), var(--roar-soft-glow-muted), 0 20px 52px rgba(0, 0, 0, 0.48) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-message, html body[data-flow-state="faded"] #license-app .completion-fade-contact { max-width: min(900px, 90vw) !important; color: #fff4d1 !important; font-size: clamp(1.75rem, 3.35vw, 3.35rem) !important; font-weight: 900 !important; line-height: 1.04 !important; letter-spacing: 0 !important; text-transform: none !important; text-shadow: var(--roar-soft-glow-muted), 0 0 30px rgba(0, 0, 0, 0.38) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-contact { color: rgba(255, 244, 209, 0.94) !important; font-size: clamp(1.22rem, 2.2vw, 2.1rem) !important; font-weight: 850 !important; max-width: min(820px, 90vw) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-subcopy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; max-width: min(680px, 86vw) !important; margin: clamp(4px, 0.9vw, 12px) 0 0 !important; color: rgba(255, 244, 209, 0.88) !important; font-size: clamp(1rem, 1.45vw, 1.22rem) !important; font-weight: 800 !important; line-height: 1.42 !important; letter-spacing: 0 !important; text-shadow: var(--roar-soft-glow-muted), var(--roar-soft-glow-muted) !important; } html body[data-flow-state="faded"] #license-app .main-grid { position: relative !important; } /* ROAR Faceit final flow cleanup: fullscreen capture -> AIM-style loading -> fullscreen thanks. */ html body[data-app-view="completion"] { overflow: hidden !important; } html body[data-flow-state="faded"] #license-app.page.completion-faded .main-grid { opacity: 1 !important; visibility: visible !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .hero, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .panel-rail, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .panel-progress, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .actionbar, html body[data-app-view="completion"][data-flow-state="loading"] #license-app .hero, html body[data-app-view="completion"][data-flow-state="loading"] #license-app .panel-rail, html body[data-app-view="completion"][data-flow-state="loading"] #license-app .panel-progress, html body[data-app-view="completion"][data-flow-state="loading"] #license-app .actionbar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { --completion-green: var(--web-v1-link-cta, #6ef0a5); --completion-green-soft: color-mix(in srgb, var(--completion-green) 46%, transparent); position: fixed !important; inset: 0 !important; z-index: 1800 !important; width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; display: grid !important; align-content: center !important; justify-items: start !important; gap: clamp(14px, 1.8vw, 20px) !important; padding: clamp(28px, 6vw, 86px) !important; overflow: auto !important; isolation: isolate !important; border: 0 !important; border-radius: 0 !important; background: repeating-linear-gradient(180deg, rgba(255, 122, 24, 0.035) 0 1px, transparent 1px 7px), radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--completion-green) 17%, transparent), transparent 32%), radial-gradient(circle at 78% 72%, rgba(255, 122, 24, 0.18), transparent 38%), linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(1, 4, 7, 0.96)), var(--completion-visual-image) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 209, 0.05) !important; backdrop-filter: blur(12px) saturate(1.14) !important; -webkit-backdrop-filter: blur(12px) saturate(1.14) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::before { content: "" !important; position: absolute !important; inset: clamp(18px, 2.4vw, 34px) !important; z-index: -1 !important; border: 1px solid color-mix(in srgb, var(--completion-green) 32%, rgba(255, 122, 24, 0.32)) !important; border-radius: 10px !important; background: linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 14%, transparent), transparent 34%, rgba(255, 122, 24, 0.12)), linear-gradient(180deg, rgba(7, 12, 10, 0.86), rgba(1, 4, 7, 0.94)) !important; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58), 0 0 38px color-mix(in srgb, var(--completion-green) 12%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.06), inset 0 0 42px rgba(255, 122, 24, 0.08) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background: linear-gradient(90deg, transparent, rgba(255, 190, 92, 0.12), transparent), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.44) 100%) !important; transform: translateX(-110%) !important; animation: completion-final-scan 2600ms cubic-bezier(0.18, 0.78, 0.22, 1) infinite !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel > * { position: relative !important; z-index: 1 !important; width: min(760px, calc(100vw - 56px)) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual { min-height: clamp(120px, 18vh, 190px) !important; max-width: 760px !important; border-color: color-mix(in srgb, var(--completion-green) 28%, rgba(255, 122, 24, 0.32)) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.68)), var(--completion-visual-image) center center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.08), 0 18px 42px rgba(0, 0, 0, 0.36), 0 0 24px color-mix(in srgb, var(--completion-green) 9%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-kicker { color: color-mix(in srgb, var(--completion-green) 76%, #fff4d1) !important; text-shadow: 0 0 16px color-mix(in srgb, var(--completion-green) 18%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { max-width: 820px !important; color: #f5ffe8 !important; font-size: clamp(2.65rem, 6vw, 6.2rem) !important; line-height: 0.9 !important; text-transform: uppercase !important; text-shadow: 0 0 22px color-mix(in srgb, var(--completion-green) 22%, transparent), 0 0 34px rgba(255, 122, 24, 0.14) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-body { max-width: 700px !important; color: rgba(245, 255, 232, 0.86) !important; font-size: clamp(1rem, 1.45vw, 1.25rem) !important; line-height: 1.45 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 760px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note { border: 1px solid color-mix(in srgb, var(--completion-green) 20%, transparent) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 12%, transparent), transparent), rgba(1, 8, 8, 0.72) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 70%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form { max-width: 760px !important; gap: 14px !important; padding: clamp(16px, 2vw, 22px) !important; border: 1px solid color-mix(in srgb, var(--completion-green) 28%, rgba(255, 122, 24, 0.24)) !important; border-radius: 10px !important; background: linear-gradient(180deg, rgba(2, 10, 9, 0.86), rgba(0, 4, 7, 0.88)), linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 9%, transparent), rgba(255, 122, 24, 0.06)) !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.05) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input { border-color: color-mix(in srgb, var(--completion-green) 36%, rgba(255, 122, 24, 0.28)) !important; background: linear-gradient(180deg, rgba(3, 18, 15, 0.94), rgba(0, 7, 10, 0.92)) !important; color: #f2ffe5 !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 62%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.04), 0 0 18px color-mix(in srgb, var(--completion-green) 8%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--completion-green) 64%, rgba(255, 122, 24, 0.72)) !important; outline-offset: 3px !important; } html body[data-app-view="completion"][data-flow-state="loading"] #license-app #completion-panel.completion-panel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } html body[data-app-view="completion"] #license-app #completion-loading-overlay.completion-loading-overlay { position: fixed !important; inset: 0 !important; z-index: 2200 !important; width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; display: grid !important; place-items: center !important; padding: clamp(18px, 4vw, 44px) !important; overflow: hidden !important; isolation: isolate !important; background: repeating-linear-gradient(180deg, rgba(255, 122, 24, 0.055) 0 1px, transparent 1px 6px), radial-gradient(circle at 50% 36%, rgba(255, 122, 24, 0.24), transparent 44%), radial-gradient(circle at 20% 72%, color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 14%, transparent), transparent 34%), linear-gradient(180deg, rgba(2, 5, 8, 0.86), rgba(0, 0, 0, 0.96)) !important; backdrop-filter: blur(10px) saturate(1.16) !important; -webkit-backdrop-filter: blur(10px) saturate(1.16) !important; pointer-events: auto !important; animation: completion-loading-overlay-pulse 1300ms ease-out both !important; } html body[data-app-view="completion"] #license-app #completion-loading-overlay.completion-loading-overlay.hidden { display: none !important; } html body[data-app-view="completion"] #license-app .completion-loading-window { position: relative !important; width: min(540px, 92vw) !important; display: grid !important; gap: 12px !important; padding: clamp(20px, 4vw, 36px) !important; overflow: hidden !important; border: 1px solid rgba(255, 122, 24, 0.46) !important; border-radius: 8px !important; background: repeating-linear-gradient(90deg, rgba(255, 122, 24, 0.055) 0 2px, transparent 2px 14px), linear-gradient(180deg, rgba(12, 14, 15, 0.98), rgba(2, 5, 8, 0.99)), linear-gradient(90deg, rgba(255, 122, 24, 0.18), color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 8%, transparent)) !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 34px rgba(255, 122, 24, 0.18), 0 0 28px color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; } html body[data-app-view="completion"] #license-app .completion-loading-window::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, transparent, rgba(255, 190, 92, 0.20), transparent) !important; transform: translateX(-110%) !important; animation: completion-loading-scan 1300ms cubic-bezier(0.18, 0.78, 0.22, 1) both !important; } html body[data-app-view="completion"] #license-app .completion-loading-label { position: relative !important; z-index: 1 !important; color: rgba(255, 248, 234, 0.98) !important; font-size: clamp(18px, 3vw, 28px) !important; font-weight: 950 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; text-shadow: 0 0 18px rgba(255, 122, 24, 0.44) !important; } html body[data-app-view="completion"] #license-app .completion-loading-subtitle { position: relative !important; z-index: 1 !important; color: color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 64%, rgba(255, 248, 234, 0.70)) !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; } html body[data-app-view="completion"] #license-app .completion-loading-track { position: relative !important; z-index: 1 !important; height: clamp(22px, 4vw, 34px) !important; padding: 4px !important; overflow: hidden !important; border: 1px solid rgba(255, 122, 24, 0.42) !important; border-radius: 8px !important; background: repeating-linear-gradient(90deg, rgba(255, 244, 209, 0.035) 0 1px, transparent 1px 12px), rgba(1, 5, 7, 0.84) !important; box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 20px rgba(255, 122, 24, 0.11) !important; } html body[data-app-view="completion"] #license-app .completion-loading-bar { width: 100% !important; height: 100% !important; border-radius: inherit !important; background: repeating-linear-gradient(90deg, rgba(255, 248, 234, 0.24) 0 2px, transparent 2px 10px), linear-gradient(90deg, rgba(255, 122, 24, 0.96), rgba(255, 190, 92, 1), color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 88%, #40dad3)) !important; box-shadow: 0 0 22px rgba(255, 122, 24, 0.34), 0 0 18px color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; transform-origin: left center !important; animation: completion-loading-fill 1300ms cubic-bezier(0.18, 0.82, 0.20, 1) forwards !important; } html body[data-flow-state="loading"] #license-app #completion-fade-overlay.completion-fade-overlay { display: none !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay { position: fixed !important; inset: 0 !important; z-index: 2300 !important; width: 100vw !important; min-height: 100vh !important; min-height: 100dvh !important; border: 0 !important; border-radius: 0 !important; background: repeating-linear-gradient(180deg, rgba(255, 122, 24, 0.032) 0 1px, transparent 1px 7px), radial-gradient(circle at 18% 34%, rgba(255, 112, 32, 0.16), transparent 34%), radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 12%, transparent), transparent 30%), linear-gradient(180deg, rgba(2, 5, 8, 0.90), rgba(0, 0, 0, 0.96)), var(--completion-fade-image) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 209, 0.04) !important; backdrop-filter: blur(12px) saturate(1.12) !important; -webkit-backdrop-filter: blur(12px) saturate(1.12) !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::before { inset: clamp(18px, 2.4vw, 34px) !important; border-radius: 10px !important; border-color: rgba(255, 122, 32, 0.22) !important; mask-image: none !important; } @keyframes completion-loading-fill { from { transform: scaleX(0.04); } to { transform: scaleX(1); } } @keyframes completion-loading-overlay-pulse { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } } @keyframes completion-loading-scan { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } } @keyframes completion-final-scan { 0% { transform: translateX(-110%); } 54%, 100% { transform: translateX(110%); } } @media (max-width: 760px) { html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { align-content: start !important; padding: clamp(20px, 6vw, 32px) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel > * { width: min(100%, calc(100vw - 40px)) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note-list { grid-template-columns: 1fr !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { font-size: clamp(2.2rem, 13vw, 4.4rem) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-copy { width: min(100%, calc(100vw - 36px)) !important; padding: clamp(28px, 8vw, 44px) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-title { font-size: clamp(3.2rem, 18vw, 5.4rem) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-message, html body[data-flow-state="faded"] #license-app .completion-fade-contact { font-size: clamp(1.18rem, 7vw, 2rem) !important; } } @media (max-width: 560px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(320px, calc(100vw - 28px)) !important; } #intro-start-button.entry-button { min-height: 46px !important; font-size: 0.86rem !important; letter-spacing: 0.08em !important; } .entry-button, #intro-login-button.entry-button, .intro-panel-name .entry-button, .intro-panel-login .entry-button { min-height: 42px !important; } .intro-panel-name, .intro-panel-login { padding: 23px 18px !important; } html body[data-app-view="completion"] #license-app #completion-panel.completion-panel { padding: 20px 16px !important; } } /* ROAR final completion overlay refinement Keeps the license header visible, covers the remaining stage, and turns completion into a true end-state. */ .license-final-overlay, .license-completion-final, .completion-final-overlay, [data-license-final="true"] { position: relative; min-height: clamp(520px, 68vh, 760px); width: 100%; display: flex; align-items: stretch; justify-content: stretch; overflow: hidden; border-radius: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.90) 48%, rgba(0, 0, 0, 0.72) 100%), radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 10%, transparent), transparent 34%), radial-gradient(circle at 76% 72%, rgba(240, 94, 15, 0.10), transparent 38%); border: 1px solid rgba(240, 94, 15, 0.42); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 5%, transparent), 0 22px 80px rgba(0, 0, 0, 0.62); } .license-final-overlay::before, .license-completion-final::before, .completion-final-overlay::before, [data-license-final="true"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.88)), radial-gradient(circle at 15% 78%, rgba(255, 255, 255, 0.08), transparent 36%); opacity: 0.95; } .license-final-content, .license-completion-final__content, .completion-final-content, [data-license-final-content="true"] { position: relative; z-index: 1; width: min(980px, 92%); min-height: inherit; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(42px, 5vw, 76px); } .license-final-kicker, .license-completion-final__kicker, .completion-final-kicker { margin: 0 0 18px; color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 88%, transparent); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.42em; text-transform: uppercase; } .license-final-title, .license-completion-final__title, .completion-final-title { margin: 0; max-width: 900px; color: #fff4d8; font-size: clamp(4.2rem, 8vw, 8.4rem); line-height: 0.86; font-weight: 950; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 0 18px rgba(255, 244, 216, 0.18), 0 0 34px rgba(240, 94, 15, 0.12); } .license-final-message, .license-completion-final__message, .completion-final-message { margin: 22px 0 0; max-width: 920px; color: #fff4d8; font-size: clamp(1.55rem, 2.8vw, 3.1rem); line-height: 1.05; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } .license-final-subline, .license-completion-final__subline, .completion-final-subline { margin: 22px 0 0; max-width: 620px; color: rgba(255, 244, 216, 0.78); font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1.55; letter-spacing: 0.02em; } .license-final-faceit-link { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; min-width: min(280px, 100%); margin-top: 10px; padding: 0 38px; border-radius: 12px; border: 1px solid rgba(255, 154, 54, 0.86); background: linear-gradient(180deg, rgba(255, 170, 52, 1), rgba(255, 111, 22, 0.98) 52%, rgba(210, 61, 8, 0.98)); color: #170904; font-size: clamp(0.88rem, 1.15vw, 1.02rem); font-weight: 950; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.46), inset 0 -10px 18px rgba(93, 25, 0, 0.20), 0 16px 30px rgba(0, 0, 0, 0.38), var(--roar-soft-glow-muted); transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .license-final-faceit-link:hover, .license-final-faceit-link:focus-visible { transform: translateY(-1px); border-color: rgba(255, 177, 72, 0.9); background: linear-gradient(180deg, rgba(255, 190, 68, 1), rgba(255, 124, 25, 1) 52%, rgba(229, 70, 11, 1)); box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.56), inset 0 -10px 18px rgba(93, 25, 0, 0.16), 0 18px 34px rgba(0, 0, 0, 0.40), var(--roar-soft-glow-active); outline: none; } @media (max-width: 760px) { .license-final-overlay, .license-completion-final, .completion-final-overlay, [data-license-final="true"] { min-height: 560px; } .license-final-content, .license-completion-final__content, .completion-final-content, [data-license-final-content="true"] { width: 100%; padding: 34px 24px; } .license-final-title, .license-completion-final__title, .completion-final-title { font-size: clamp(3.3rem, 15vw, 5.4rem); } .license-final-message, .license-completion-final__message, .completion-final-message { font-size: clamp(1.2rem, 6vw, 2rem); letter-spacing: 0.08em; } } /* ROAR license flow stabilization: compact rail, direct module state, stable stage. */ #license-app .module-list-header, #license-app .module-list-meta, #license-app .focus-card, #license-app .panel-rail > .section-title { display: none !important; } #license-app .rail-toggle { min-height: 42px !important; padding: 8px 12px !important; border-radius: 8px !important; } #license-app .rail-toggle-label { font-size: 0.76rem !important; letter-spacing: 0.08em !important; } #license-app .module-list-shell { gap: 6px !important; margin-top: 0 !important; padding: 7px !important; border-radius: 8px !important; } #license-app .module-list { gap: 5px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #license-app .module-item { min-height: 54px !important; padding: 8px 10px !important; border-radius: 7px !important; } #license-app .module-item-title { font-size: 11px !important; line-height: 1.18 !important; } #license-app .module-item-status { font-size: 10px !important; line-height: 1.1 !important; } #license-app .main-stage { align-content: start !important; } #license-app .main-stage[data-stage-view="module_intro"] .inner-card, #license-app .main-stage[data-stage-view="exam"] .inner-card { min-height: 0 !important; padding: 10px 16px !important; gap: 4px !important; align-content: center !important; } #license-app .main-stage[data-stage-view="module_intro"] .stage-title, #license-app .main-stage[data-stage-view="exam"] .stage-title { margin: 0 !important; font-size: clamp(1.28rem, 1.8vw, 1.72rem) !important; line-height: 1.05 !important; } #license-app .main-stage[data-stage-view="module_intro"] .eyebrow, #license-app .main-stage[data-stage-view="exam"] .eyebrow, #license-app .main-stage[data-stage-view="result"] .eyebrow { margin: 0 !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: 0.14em !important; } #license-app .main-stage[data-stage-view="module_intro"] .stage-body { margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; } #license-app .question-panel, #license-app .feedback-panel { border-radius: 8px !important; } #license-app .question-panel { gap: 10px !important; padding: 12px 14px !important; } #license-app .answer-list { gap: 7px !important; } #license-app .answer-item { padding: 10px 12px !important; } #license-app .feedback-panel { min-height: 124px !important; gap: 9px !important; padding: 12px 14px !important; } body[data-view="exam"] #license-app #feedback-panel.hidden { display: grid !important; visibility: hidden !important; min-height: 124px !important; height: 124px !important; pointer-events: none !important; } @media (min-width: 980px) { body[data-app-view="license"] #license-app { min-height: auto !important; } #license-app .main-grid { align-items: stretch !important; } #license-app .panel-rail, #license-app .panel-stage { height: auto !important; min-height: 700px !important; } #license-app .panel-rail { align-content: start !important; gap: 7px !important; overflow: hidden !important; } #license-app .module-list-shell { min-height: 0 !important; overflow: hidden !important; } #license-app .module-list { max-height: 640px !important; overflow: auto !important; } #license-app .panel-stage { display: flex !important; flex-direction: column !important; overflow: visible !important; } #license-app #main-stage { flex: 1 0 auto !important; min-height: 672px !important; overflow: visible !important; padding-right: 0 !important; } #license-app .main-stage[data-stage-view="module_intro"], #license-app .main-stage[data-stage-view="exam"], #license-app .main-stage[data-stage-view="result"] { min-height: 672px !important; } #license-app .actionbar { position: relative !important; bottom: auto !important; z-index: 6 !important; } } /* Exam layout correction: keep the CTA near the question and reserve stable feedback space. */ body[data-view="exam"] #license-app { min-height: auto !important; } body[data-view="exam"] #license-app .hero { min-height: 180px !important; } body[data-view="exam"] #license-app .panel-stage { display: grid !important; grid-template-rows: auto auto !important; align-content: start !important; gap: 12px !important; } body[data-view="exam"] #license-app #main-stage { display: grid !important; grid-template-columns: 1fr !important; min-height: 0 !important; flex: 0 0 auto !important; gap: 12px !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] { min-height: 0 !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .inner-card { grid-column: 1 / -1 !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .inner-card { padding: 10px 16px !important; gap: 4px !important; } body[data-view="exam"] #license-app .main-stage[data-stage-view="exam"] .stage-title { font-size: clamp(1.28rem, 1.8vw, 1.72rem) !important; line-height: 1.05 !important; } body[data-view="exam"] #license-app .question-panel { min-height: 326px !important; align-content: start !important; gap: 10px !important; } body[data-view="exam"] #license-app .feedback-panel { min-height: 118px !important; height: 118px !important; align-content: center !important; overflow: hidden !important; } body[data-view="exam"] #license-app #feedback-panel.hidden { min-height: 118px !important; height: 118px !important; } body[data-view="exam"] #license-app .actionbar { width: min(250px, 100%) !important; max-width: 250px !important; justify-self: end !important; align-self: start !important; margin: 12px 0 0 auto !important; padding: 0 !important; flex-direction: column !important; align-items: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; position: relative !important; bottom: auto !important; } @media (min-width: 981px) { body[data-view="exam"] #license-app #main-stage > .actionbar { transform: none !important; } } body[data-view="exam"] #license-app .actionbar::before, body[data-view="exam"] #license-app .actionbar-copy, body[data-view="exam"] #license-app .actionbar-label, body[data-view="exam"] #license-app .actionbar-title, body[data-view="exam"] #license-app .actionbar-summary { display: none !important; } body[data-view="exam"] #license-app .actionbar-buttons { display: grid !important; grid-template-columns: 1fr !important; flex-wrap: nowrap !important; width: 100% !important; gap: 11px !important; justify-items: stretch !important; } body[data-view="exam"] #license-app .actionbar-buttons button { min-height: 50px !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; justify-self: stretch !important; font-size: 13px !important; } body[data-view="exam"] #license-app .actionbar-buttons button.primary { min-width: 0 !important; order: 1 !important; } body[data-view="exam"] #license-app .actionbar-buttons button.secondary { order: 2 !important; } #license-app .panel-progress { gap: 12px !important; padding: 18px 16px !important; } #license-app .panel-progress .section-title { font-size: 13px !important; letter-spacing: 0.1em !important; } #license-app .progress-copy { margin-bottom: 8px !important; font-size: 12px !important; line-height: 1.45 !important; } #license-app .step-list { gap: 10px !important; padding-left: 18px !important; } #license-app .step-list::before { left: 8px !important; top: 10px !important; bottom: 10px !important; } #license-app .step-card { min-height: 76px !important; padding: 12px 12px 12px 15px !important; border-radius: 10px !important; } #license-app .step-card::before { left: -17px !important; top: 17px !important; width: 10px !important; height: 10px !important; } #license-app .step-title { gap: 8px !important; margin-bottom: 5px !important; } #license-app .step-index { min-width: 30px !important; padding: 3px 7px !important; font-size: 12px !important; font-weight: 900 !important; } #license-app .step-name { font-size: 13px !important; font-weight: 900 !important; line-height: 1.2 !important; } #license-app .step-detail { font-size: 12px !important; line-height: 1.42 !important; } @media (min-width: 980px) { body[data-view="exam"] #license-app .panel-stage { min-height: 626px !important; } body[data-view="exam"] #license-app .panel-rail, body[data-view="exam"] #license-app .panel-progress { min-height: 626px !important; } } @media (max-width: 720px) { body[data-view="exam"] #license-app #main-stage { grid-template-columns: 1fr !important; } body[data-view="exam"] #license-app .question-panel, body[data-view="exam"] #license-app .feedback-panel, body[data-view="exam"] #license-app .actionbar { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; } body[data-view="exam"] #license-app .actionbar-buttons { flex-wrap: wrap !important; } } body[data-view="module_intro"] #license-app > .actionbar, body[data-view="home"] #license-app > .actionbar, body[data-view="result"] #license-app > .actionbar { width: min(260px, calc(100% - 32px)) !important; max-width: 260px !important; margin: 12px 12px 0 auto !important; padding: 0 !important; min-height: 0 !important; justify-content: flex-end !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body[data-view="module_intro"] #license-app > .actionbar::before, body[data-view="home"] #license-app > .actionbar::before, body[data-view="result"] #license-app > .actionbar::before, body[data-view="module_intro"] #license-app > .actionbar .actionbar-copy, body[data-view="home"] #license-app > .actionbar .actionbar-copy, body[data-view="result"] #license-app > .actionbar .actionbar-copy { display: none !important; } body[data-view="module_intro"] #license-app > .actionbar .actionbar-buttons, body[data-view="home"] #license-app > .actionbar .actionbar-buttons, body[data-view="result"] #license-app > .actionbar .actionbar-buttons { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; } /* ROAR web start layout: side actions on the horizontal rails, primary license CTA below the icon row. */ body[data-app-view="intro_ready"] .intro-start-panel { width: min(1040px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: minmax(148px, 0.86fr) minmax(220px, 1.08fr) minmax(148px, 0.86fr) !important; grid-template-rows: var(--entry-control-height-compact) 56px !important; column-gap: clamp(28px, 9vw, 152px) !important; row-gap: clamp(126px, 18vh, 166px) !important; align-items: center !important; justify-items: center !important; margin-bottom: 0 !important; } @keyframes roarIntroButtonInLeft { 0% { opacity: 0; transform: translate3d(-54px, 146px, 0); } 100% { opacity: 1; transform: translate3d(-54px, 138px, 0); } } @keyframes roarIntroButtonInRight { 0% { opacity: 0; transform: translate3d(70px, 146px, 0); } 100% { opacity: 1; transform: translate3d(70px, 138px, 0); } } @keyframes roarIntroButtonInCenter { 0% { opacity: 0; transform: translate3d(0, -2px, 0); } 100% { opacity: 1; transform: translate3d(0, -10px, 0); } } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: min(100%, 210px) !important; min-height: 40px !important; grid-row: 1 !important; border-radius: var(--entry-control-radius) !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; animation: roarIntroButtonInLeft 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 3 !important; animation: roarIntroButtonInRight 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 282px) !important; min-height: 52px !important; grid-column: 2 !important; grid-row: 2 !important; top: clamp(44px, calc(8vh - 10px), 64px) !important; font-size: 0.92rem !important; letter-spacing: 0.1em !important; animation: roarIntroButtonInCenter 720ms cubic-bezier(0.22, 1, 0.36, 1) both !important; animation-delay: 0ms !important; } body[data-app-view="intro_ready"] .entry-button { color: rgba(255, 244, 209, 0.9) !important; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease !important; } body[data-app-view="intro_ready"] .entry-button-secondary { background: linear-gradient(180deg, rgba(12, 18, 22, 0.86), rgba(4, 8, 12, 0.84)), linear-gradient(90deg, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 8%, transparent), transparent 58%) !important; border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 38%, transparent) !important; } body[data-app-view="intro_ready"] .entry-button-primary { border-color: rgba(255, 122, 32, 0.66) !important; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 244, 209, 0.08), inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important; } body[data-app-view="intro_ready"] .entry-button:hover:not(:disabled) { transform: translate3d(0, -2px, 0) !important; border-color: rgba(255, 122, 32, 0.72) !important; filter: brightness(1.08) saturate(1.08) !important; box-shadow: 0 18px 30px rgba(0, 0, 0, 0.4), var(--roar-soft-glow-muted), var(--entry-focus-ring) !important; } body[data-app-view="intro_ready"] .entry-button:focus-visible { border-color: rgba(255, 122, 32, 0.58) !important; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } body[data-app-view="intro_ready"] .entry-button-secondary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 62%, transparent) !important; box-shadow: 0 16px 28px rgba(0, 0, 0, 0.38), 0 0 22px color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 20%, transparent), var(--entry-focus-ring) !important; } body[data-app-view="intro_ready"] .entry-button-secondary:focus-visible { border-color: color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 50%, transparent) !important; } @media (prefers-reduced-motion: reduce) { body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button, body[data-app-view="intro_ready"] #intro-start-button.entry-button { animation: none !important; } } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(340px, calc(100vw - 28px)) !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 44px 52px !important; column-gap: 10px !important; row-gap: 12px !important; margin-bottom: clamp(18px, 5vh, 44px) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: 100% !important; min-height: 42px !important; grid-row: 1 !important; font-size: 0.72rem !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 2 !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 280px) !important; grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 50px !important; top: 0 !important; font-size: 0.86rem !important; } } /* ROAR local fix: align intro side buttons with Discord rail lines. */ @media (min-width: 761px) { body[data-app-view="intro_ready"] #intro-login-button.entry-button { transform: translate3d(-54px, 138px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { transform: translate3d(70px, 138px, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible { transform: translate3d(-54px, 136px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible { transform: translate3d(70px, 136px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled) { transform: translate3d(0, -12px, 0) !important; } } /* ROAR exam actionbar fine tune: narrower and lower, layout unchanged. */ @media (min-width: 981px) { body[data-view="exam"] #license-app .actionbar { width: 86% !important; max-width: 218px !important; justify-self: end !important; margin-top: 42px !important; } body[data-view="exam"] #license-app .actionbar-buttons { width: 100% !important; } body[data-view="exam"] #license-app .actionbar-buttons button, body[data-view="exam"] #license-app .actionbar-buttons button.primary, body[data-view="exam"] #license-app .actionbar-buttons button.secondary { width: 100% !important; min-width: 0 !important; max-width: none !important; } } /* ROAR local phase 2 correction: keep one actionbar inside the right process column. */ @media (min-width: 981px) { body[data-app-view="license"][data-view="exam"] #license-app .actionbar, body[data-app-view="license"][data-view="result"] #license-app .actionbar, body[data-app-view="license"][data-view="module_intro"] #license-app .actionbar { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin: 16px auto 0 !important; padding: 0 !important; display: grid !important; align-items: center !important; justify-items: center !important; align-self: start !important; justify-self: stretch !important; transform: none !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; } body[data-app-view="license"] #license-app .panel-progress .actionbar::before, body[data-app-view="license"] #license-app .panel-progress .actionbar-copy, body[data-app-view="license"] #license-app .panel-progress .actionbar-label, body[data-app-view="license"] #license-app .panel-progress .actionbar-summary { display: none !important; } body[data-app-view="license"][data-view="exam"] #license-app .actionbar-buttons, body[data-app-view="license"][data-view="result"] #license-app .actionbar-buttons, body[data-app-view="license"][data-view="module_intro"] #license-app .actionbar-buttons { width: min(222px, 100%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; align-content: center !important; gap: 11px !important; } body[data-app-view="license"][data-view="exam"] #license-app .actionbar-buttons button, body[data-app-view="license"][data-view="result"] #license-app .actionbar-buttons button, body[data-app-view="license"][data-view="module_intro"] #license-app .actionbar-buttons button { width: 100% !important; min-width: 0 !important; max-width: 218px !important; justify-self: center !important; } body[data-app-view="license"] #license-app .panel-progress .actionbar-buttons button.primary { order: 1 !important; } body[data-app-view="license"] #license-app .panel-progress .actionbar-buttons button.secondary { order: 2 !important; } } /* ROAR local phase 1: senior module rail sizing and edge finishing. */ body[data-app-view="license"] #license-app { --web-v1-left-rail: minmax(318px, 352px); } body[data-app-view="license"] #license-app .panel-rail { gap: 10px !important; overflow: clip !important; border-radius: 16px !important; } body[data-app-view="license"] #license-app .module-list-shell { gap: 9px !important; padding: 10px !important; border-radius: 12px !important; overflow: clip !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 209, 0.035), inset 0 -18px 26px rgba(0, 0, 0, 0.16) !important; } body[data-app-view="license"] #license-app .module-list { gap: 8px !important; padding: 0 1px 1px !important; max-height: 690px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; scrollbar-gutter: auto !important; } body[data-app-view="license"] #license-app .module-list::-webkit-scrollbar { width: 0; height: 0; display: none; } body[data-app-view="license"] #license-app .module-item { min-height: 74px !important; gap: 8px !important; padding: 12px 13px !important; border-radius: 10px !important; align-content: center !important; overflow: hidden; } body[data-app-view="license"] #license-app .module-item-title { font-size: 14px !important; line-height: 1.18 !important; font-weight: 900 !important; } body[data-app-view="license"] #license-app .module-item-status { font-size: 11.5px !important; line-height: 1.24 !important; letter-spacing: 0.06em !important; color: rgba(255, 238, 198, 0.78) !important; } body[data-app-view="license"] #license-app .module-item.active .module-item-status { color: rgba(255, 246, 219, 0.92) !important; } body[data-app-view="license"] #license-app .module-item:last-child { margin-bottom: 1px; } @media (max-width: 1180px) { body[data-app-view="license"] #license-app { --web-v1-left-rail: minmax(284px, 320px); } body[data-app-view="license"] #license-app .module-item { min-height: 66px !important; padding: 11px 12px !important; } body[data-app-view="license"] #license-app .module-item-title { font-size: 13px !important; } } /* ROAR Design-Lab Phase 2 token bridge. */ body[data-app-view="license"] #license-app, #license-app { --web-v1-panel: var(--roar-panel-bg, rgba(9, 14, 24, 0.88)); --web-v1-panel-strong: var(--roar-panel-bg-strong, rgba(8, 12, 20, 0.94)); --web-v1-card: var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78)); --web-v1-card-strong: var(--roar-card-bg, rgba(14, 22, 36, 0.9)); --web-v1-border: var(--roar-panel-border, rgba(210, 144, 17, 0.72)); --web-v1-border-soft: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115)); --web-v1-text: var(--roar-text, #f2e7a6); --web-v1-text-soft: var(--roar-text-soft, rgba(255, 240, 180, 0.82)); --web-v1-text-muted: var(--roar-text-muted, rgba(255, 240, 180, 0.62)); --web-v1-text-cyan: var(--roar-text-cool, rgba(223, 251, 247, 0.82)); --web-v1-shadow-panel: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)); --web-v1-panel-radius: var(--roar-panel-radius, 18px); --web-v1-card-radius: var(--roar-radius-md, 14px); --entry-surface: var(--roar-panel-bg, rgba(4, 7, 13, 0.78)); --entry-border: var(--roar-button-border, rgba(255, 112, 32, 0.34)); --entry-border-soft: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.13)); --entry-text: var(--roar-button-text, #fff4d1); --entry-text-soft: var(--roar-text-soft, rgba(255, 244, 209, 0.78)); --entry-text-muted: var(--roar-text-muted, rgba(255, 244, 209, 0.58)); --entry-cyan: var(--roar-accent-orange, #ff7020); --entry-orange: var(--roar-accent-orange, #ff7020); --entry-panel-radius: var(--roar-panel-radius, 18px); --entry-card-radius: var(--roar-radius-sm, 10px); --entry-control-radius: var(--roar-button-radius, 8px); --entry-control-height: var(--roar-button-height, 52px); --entry-control-height-compact: calc(var(--roar-button-height, 52px) - 8px); --entry-panel-shadow: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)); --entry-focus-ring: 0 0 0 2px color-mix(in srgb, var(--roar-accent-orange, #ff7020) 38%, transparent); } body[data-app-view="license"] #license-app .page, body[data-app-view="license"] #license-app .main-grid { background: var(--roar-license-shell-bg, transparent); } body[data-app-view="license"] #license-app .panel, body[data-app-view="license"] #license-app .intro-panel, body[data-app-view="license"] #license-app .question-panel, body[data-app-view="license"] #license-app .feedback-panel, body[data-app-view="license"] #license-app .completion-panel { border-color: var(--roar-panel-border, rgba(210, 144, 17, 0.72)) !important; border-radius: var(--roar-panel-radius, 18px) !important; background: var(--roar-license-shell-bg, var(--roar-panel-bg, rgba(9, 14, 24, 0.88))) !important; box-shadow: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)) !important; backdrop-filter: blur(var(--roar-panel-blur, 16px)) saturate(1.08) !important; } body[data-app-view="license"] #license-app .module-item { border-color: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115)) !important; border-radius: var(--roar-radius-sm, 10px) !important; background: var(--roar-license-module-card-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; } body[data-app-view="license"] #license-app .module-item.active { border-color: var(--roar-license-module-selected-border, var(--roar-button-border, rgba(255, 122, 32, 0.72))) !important; } body[data-app-view="license"] #license-app .step-card, body[data-app-view="license"] #license-app .progress-card, body[data-app-view="license"] #license-app .actionbar { background: var(--roar-license-process-card-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; border-color: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115)) !important; border-radius: var(--roar-radius-md, 14px) !important; } body[data-app-view="license"] #license-app .inner-card, body[data-app-view="license"] #license-app .answer-item, .intro-briefing-card{ background: var(--roar-license-lesson-card-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; border-color: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115)) !important; border-radius: var(--roar-radius-md, 14px) !important; } /* End ROAR Design-Lab Phase 2 token bridge. */ /* ROAR Web Theme System 0.3.0 binding. Late bridge for shared start, license, entry, button, panel and text tokens. */ :root { --license-panel-radius: var(--roar-panel-radius, 18px); --license-card-radius: var(--roar-radius-md, 14px); --entry-surface: var(--roar-panel-bg, rgba(4, 7, 13, 0.78)); --entry-surface-strong: var(--roar-panel-bg-strong, rgba(3, 5, 10, 0.9)); --entry-surface-soft: var(--roar-panel-bg-soft, rgba(12, 16, 22, 0.7)); --entry-border: var(--roar-start-button-border, var(--roar-button-border, rgba(255, 112, 32, 0.34))); --entry-border-soft: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.13)); --entry-text: var(--roar-button-text, #fff4d1); --entry-text-soft: var(--roar-text-soft, rgba(255, 244, 209, 0.78)); --entry-text-muted: var(--roar-text-muted, rgba(255, 244, 209, 0.58)); --entry-cyan: var(--roar-accent-cyan, #3cc3bf); --entry-orange: var(--roar-accent-orange, #ff7020); --entry-panel-radius: var(--roar-panel-radius, 18px); --entry-card-radius: var(--roar-radius-sm, 10px); --entry-control-radius: var(--roar-button-radius, 24px); --entry-control-height: var(--roar-button-height, 72px); --entry-control-height-compact: calc(var(--roar-button-height, 72px) - 8px); --entry-panel-shadow: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)); --entry-focus-ring: 0 0 0 2px color-mix(in srgb, var(--roar-accent-orange, #ff7020) 38%, transparent); --roar-button-border-width: 1px; --roar-button-hover-transform: translateY(-1px); --roar-button-active-transform: translateY(1px) scale(0.99); --roar-button-clip-path: none; --roar-button-disabled-opacity: 0.46; --roar-component-card-radius: var(--roar-radius-md, 14px); --roar-component-panel-radius: var(--roar-panel-radius, 18px); --roar-component-border-width: 1px; --roar-component-shadow: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)); --roar-component-hover-shadow: var(--roar-soft-glow-muted, none); --roar-component-active-indicator: inset 3px 0 0 var(--roar-button-border, rgba(255, 122, 32, 0.72)); } body, body[data-app-view] { color: var(--roar-text, #f2e7a6); } body[data-app-view="intro_ready"]::before { background: var(--roar-start-overlay, rgba(0, 0, 0, 0.18)) !important; } body[data-app-view="intro_ready"] .intro-background { opacity: 1 !important; background: var(--roar-app-background-image) center center / cover no-repeat !important; filter: brightness(1.06) saturate(1.08) contrast(1.02) !important; } body[data-app-view="intro_ready"] .intro-layer::after { background: var(--roar-start-overlay, rgba(0, 0, 0, 0.18)) !important; } .intro-panel, .intro-start-panel, body[data-app-view="license"] #license-app .panel, body[data-app-view="license"] #license-app .hero, body[data-app-view="license"] #license-app .inner-card, body[data-app-view="license"] #license-app .question-panel, body[data-app-view="license"] #license-app .feedback-panel, body[data-app-view="license"] #license-app .completion-panel { border-color: var(--roar-license-card-border, var(--roar-panel-border, rgba(210, 144, 17, 0.72))) !important; border-radius: var(--roar-panel-radius, 18px) !important; background: var(--roar-license-card-bg, var(--roar-panel-bg, rgba(9, 14, 24, 0.88))) !important; box-shadow: var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)) !important; } body[data-app-view="intro_ready"] .intro-start-panel { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body[data-app-view="intro_ready"] .intro-start-panel.coach-access-hidden { display: none !important; } .intro-briefing-card, .focus-card, .detail-box, .completion-form, .completion-note-list, body[data-app-view="license"] #license-app .answer-item { border-color: var(--roar-license-answer-border, var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115))) !important; border-radius: var(--roar-radius-md, 14px) !important; background: var(--roar-license-answer-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; } .entry-button, .intro-cta.entry-button, #intro-start-button.entry-button, #intro-login-button.entry-button, #aim-lab-entry-button.entry-button, #intro-briefing-continue-button.entry-button, #name-entry-submit.entry-button, #login-submit-button.entry-button, .intro-briefing-button.entry-button, #license-app button.primary:not(.entry-button), #license-app .actionbar-buttons button.primary, #completion-submit.primary { --roar-button-hover-transform: translateY(-2px); --roar-button-active-transform: translateY(1px) scale(0.995); min-height: var(--roar-button-height, 72px) !important; border: var(--roar-button-border-width, 1px) solid var(--roar-button-border, rgba(255, 122, 32, 0.72)) !important; border-radius: var(--roar-button-radius, 24px) !important; background: var(--roar-start-button-bg, var(--roar-button-bg, linear-gradient(180deg, rgba(255, 124, 22, 0.88), rgba(24, 7, 2, 0.96)))) !important; color: var(--roar-button-text, #fff4d1) !important; font-size: var(--roar-button-font-size, 18px) !important; letter-spacing: var(--roar-button-letter-spacing, 0.22em) !important; text-shadow: var(--roar-button-text-shadow, 0 1px 0 rgba(0, 0, 0, 0.45)) !important; box-shadow: var(--roar-button-glow, 0 12px 24px rgba(0, 0, 0, 0.30)) !important; clip-path: var(--roar-button-clip-path, none) !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease !important; } .entry-button:hover:not(:disabled), .entry-button:focus-visible, #license-app button.primary:not(.entry-button):hover:not(:disabled), #license-app button.primary:not(.entry-button):focus-visible, #license-app .actionbar-buttons button.primary:hover:not(:disabled), #license-app .actionbar-buttons button.primary:focus-visible { border-color: var(--roar-button-border-hover, var(--roar-button-border, rgba(255, 122, 32, 0.86))) !important; background: var(--roar-button-bg-hover, var(--roar-button-bg)) !important; color: var(--roar-button-text-hover, var(--roar-button-text, #fff4d1)) !important; box-shadow: var(--roar-button-glow-strong, var(--roar-button-glow)) !important; transform: var(--roar-button-hover-transform, translateY(-1px)) !important; } @media (min-width: 761px) { body[data-app-view="intro_ready"] #intro-start-button.entry-button { transform: translate3d(0, -10px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:focus-visible { transform: translate3d(0, -10px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:focus-visible { transform: translate3d(0, -12px, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:active:not(:disabled) { transform: translate3d(-54px, 139px, 0) scale(0.995) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:active:not(:disabled) { transform: translate3d(70px, 139px, 0) scale(0.995) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:active:not(:disabled) { transform: translate3d(0, -9px, 0) scale(0.995) !important; } } .entry-button:active:not(:disabled), #license-app button.primary:not(.entry-button):active:not(:disabled), #license-app .actionbar-buttons button.primary:active:not(:disabled) { background: var(--roar-button-active, var(--roar-button-bg-hover)) !important; box-shadow: var(--roar-component-active-indicator, var(--roar-button-glow-strong, var(--roar-button-glow))) !important; transform: var(--roar-button-active-transform, translateY(1px) scale(0.99)) !important; } .entry-button-secondary, .entry-button-ghost, #license-app button.secondary:not(.entry-button), #license-app .actionbar-buttons button.secondary, #login-back-button.entry-button, #intro-briefing-back-button.entry-button { border: var(--roar-button-border-width, 1px) solid var(--roar-button-secondary-border, var(--roar-panel-border-subtle, color-mix(in srgb, var(--roar-border-soft-color, #9b6a32) 46%, transparent))) !important; border-radius: var(--roar-button-radius, 24px) !important; background: var(--roar-button-secondary-bg, var(--roar-panel-bg-strong, rgba(12, 24, 31, 0.96))) !important; color: var(--roar-button-text, #fff4d1) !important; box-shadow: var(--roar-button-glow, 0 8px 16px rgba(0, 0, 0, 0.24)) !important; clip-path: var(--roar-button-clip-path, none) !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important; } .entry-button-secondary:hover:not(:disabled), .entry-button-ghost:hover:not(:disabled), #license-app button.secondary:not(.entry-button):hover:not(:disabled), #license-app .actionbar-buttons button.secondary:hover:not(:disabled), #login-back-button.entry-button:hover:not(:disabled), #intro-briefing-back-button.entry-button:hover:not(:disabled) { border-color: var(--roar-button-border-hover, var(--roar-button-secondary-border)) !important; background: var(--roar-button-bg-hover, var(--roar-button-secondary-bg)) !important; color: var(--roar-button-text-hover, var(--roar-button-text, #fff4d1)) !important; box-shadow: var(--roar-button-glow-strong, var(--roar-button-glow)) !important; transform: var(--roar-button-hover-transform, translateY(-1px)) !important; } .entry-button:disabled, #license-app button:disabled { opacity: var(--roar-button-disabled-opacity, 0.46) !important; filter: saturate(0.72) brightness(0.78) !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing:not(.is-pointer-ready) { pointer-events: none !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing.is-pointer-ready, body[data-app-view="intro_briefing"] .intro-panel-briefing.is-pointer-ready .entry-button { pointer-events: auto !important; } .hero-eyebrow, .eyebrow, .section-title, .module-sidebar-heading, .actionbar-label, .focus-card-label, .module-list-meta, .question-progress, .intro-briefing-eyebrow{ color: var(--roar-accent-cyan, #3cc3bf) !important; } .hero-title, .stage-title, .question-title, .intro-login-title, .completion-fade-title { color: var(--roar-text-strong, #fff8ea) !important; text-shadow: var(--roar-start-logo-glow, var(--roar-soft-glow-muted)) !important; } .hero-subtitle, .stage-body, .question-prompt, .question-helper, .actionbar-summary, .intro-login-copy, .progress-copy, .focus-card-meta, .focus-card-note { color: var(--roar-text-soft, rgba(255, 244, 209, 0.78)) !important; } body[data-app-view="license"] #license-app .module-list-shell, body[data-app-view="license"] #license-app .module-item { border-color: var(--roar-license-card-border, var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115))) !important; border-radius: var(--roar-radius-sm, 10px) !important; background: var(--roar-license-module-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; } body[data-app-view="license"] #license-app .module-item.active, body[data-app-view="license"] #license-app .module-item.guided-target { border-color: var(--roar-license-module-active-border, var(--roar-button-border, rgba(255, 122, 32, 0.72))) !important; background: var(--roar-license-module-active-bg, var(--roar-license-module-bg)) !important; box-shadow: var(--roar-panel-glow, 0 16px 28px rgba(0, 0, 0, 0.34)) !important; } body[data-app-view="license"] #license-app .answer-item.active, body[data-app-view="license"] #license-app .answer-item.correct { border-color: var(--roar-license-answer-selected-border, var(--roar-button-border, rgba(255, 122, 32, 0.72))) !important; background: var(--roar-license-module-active-bg, var(--roar-license-answer-bg)) !important; } body[data-app-view="license"] #license-app .answer-item.wrong { border-color: color-mix(in srgb, var(--roar-danger, #ff6f7d) 72%, transparent) !important; } body[data-app-view="license"] #license-app .step-card, body[data-app-view="license"] #license-app .progress-card, body[data-app-view="license"] #license-app .actionbar, body[data-app-view="license"] #license-app .rail-toggle { border-color: var(--roar-panel-border-subtle, rgba(255, 244, 209, 0.115)) !important; border-radius: var(--roar-radius-md, 14px) !important; background: var(--roar-license-process-bg, var(--roar-panel-bg-soft, rgba(13, 20, 33, 0.78))) !important; } /* Design-Lab Phase 3A: License component style variants. Theme tokens still own color; these variables own component shape, density, connector language, hover/active/selected treatment and CTA framing. */ body[data-app-view="license"] #license-app { --license-component-panel-radius: var(--roar-license-style-panel-radius, var(--roar-component-panel-radius, var(--roar-panel-radius, 18px))); --license-component-card-radius: var(--roar-license-style-card-radius, var(--roar-component-card-radius, var(--roar-radius-md, 14px))); --license-component-inner-radius: var(--roar-license-style-inner-radius, var(--roar-radius-sm, 10px)); --license-component-panel-border-width: var(--roar-license-style-panel-border-width, var(--roar-component-border-width, 1px)); --license-component-card-border-width: var(--roar-license-style-card-border-width, var(--roar-component-border-width, 1px)); --license-component-shadow: var(--roar-license-style-shadow, var(--roar-component-shadow, var(--roar-panel-glow, 0 24px 56px rgba(2, 4, 10, 0.34)))); --license-component-card-shadow: var(--roar-license-style-card-shadow, var(--roar-soft-glow-muted, none)); --license-component-active-shadow: var(--roar-license-style-active-shadow, var(--roar-soft-glow-active, none)); --license-component-hover-shadow: var(--roar-license-style-hover-shadow, var(--roar-soft-glow-muted, none)); --license-component-clip: var(--roar-license-style-clip, none); --license-component-status-bg: var(--roar-license-style-status-bg, var(--roar-chip-bg)); --license-component-status-border: var(--roar-license-style-status-border, var(--roar-chip-border)); --license-component-panel-outline: var(--roar-license-style-panel-outline, inset 0 0 0 0 transparent); --license-component-overlay: var(--roar-license-style-overlay, none); --license-component-overlay-opacity: var(--roar-license-style-overlay-opacity, 0); --license-component-hover-transform: var(--roar-license-style-hover-transform, translateY(-1px)); --license-component-active-filter: var(--roar-license-style-active-filter, brightness(1.08) saturate(1.06)); --license-component-step-dot-shadow: var(--roar-license-style-step-dot-shadow, 0 0 0 3px var(--roar-bg-deep), 0 0 18px color-mix(in srgb, var(--roar-license-process-active) 28%, transparent)); } body[data-app-view="license"] #license-app .hero, body[data-app-view="license"] #license-app .hero-shell, body[data-app-view="license"] #license-app .status-strip { border-width: var(--license-component-panel-border-width) !important; border-radius: var(--license-component-panel-radius) !important; background: var(--roar-license-style-header-bg, var(--roar-license-header-bg, var(--roar-panel-bg))) !important; box-shadow: var(--license-component-shadow), var(--license-component-panel-outline) !important; clip-path: var(--license-component-clip) !important; } body[data-app-view="license"] #license-app .panel-rail, body[data-app-view="license"] #license-app .panel-stage, body[data-app-view="license"] #license-app .panel-progress, body[data-app-view="license"] #license-app .intro-panel, body[data-app-view="license"] #license-app .question-panel, body[data-app-view="license"] #license-app .feedback-panel, body[data-app-view="license"] #license-app .completion-panel { border-width: var(--license-component-panel-border-width) !important; border-radius: var(--license-component-panel-radius) !important; background: var(--roar-license-style-content-bg, var(--roar-license-card-bg, var(--roar-panel-bg))) !important; box-shadow: var(--license-component-shadow), var(--license-component-panel-outline) !important; clip-path: var(--license-component-clip) !important; } body[data-app-view="license"] #license-app .exam-status-strip, body[data-app-view="license"] #license-app .question-status-strip, body[data-app-view="license"] #license-app .stage-status-strip, body[data-app-view="license"] #license-app .status-strip-title, body[data-app-view="license"] #license-app .status-pill { border-color: var(--license-component-status-border) !important; border-radius: var(--license-component-inner-radius) !important; background: var(--license-component-status-bg) !important; } body[data-app-view="license"] #license-app .module-list-shell { border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; background: var(--roar-license-style-module-bg, var(--roar-license-module-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-card-shadow) !important; clip-path: var(--license-component-clip) !important; } body[data-app-view="license"] #license-app .module-list { gap: var(--roar-license-style-module-gap, 8px) !important; } body[data-app-view="license"] #license-app .module-item { position: relative !important; overflow: hidden !important; min-height: var(--roar-license-style-module-min-height, 74px) !important; gap: var(--roar-license-style-module-gap, 8px) !important; padding: var(--roar-license-style-module-padding, 12px 13px) !important; border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; background: var(--roar-license-style-module-bg, var(--roar-license-module-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-card-shadow) !important; clip-path: var(--license-component-clip) !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease !important; } body[data-app-view="license"] #license-app .module-item::after, body[data-app-view="license"] #license-app .answer-item::after, body[data-app-view="license"] #license-app .step-card::after { content: "" !important; position: absolute !important; inset: 0 !important; background: var(--license-component-overlay) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 150ms ease !important; } body[data-app-view="license"] #license-app .module-item:hover:not(.active), body[data-app-view="license"] #license-app .module-item:focus-visible:not(.active) { border-color: var(--roar-license-module-active-border, var(--roar-button-border)) !important; background: var(--roar-license-style-module-hover-bg, var(--roar-license-module-active-bg)) !important; box-shadow: var(--license-component-hover-shadow) !important; filter: brightness(1.04) saturate(1.05) !important; transform: var(--license-component-hover-transform) !important; } body[data-app-view="license"] #license-app .module-item:hover:not(.active)::after, body[data-app-view="license"] #license-app .module-item:focus-visible:not(.active)::after { opacity: calc(var(--license-component-overlay-opacity) * 0.55) !important; } body[data-app-view="license"] #license-app .module-item.active, body[data-app-view="license"] #license-app .module-item.guided-target { border-color: var(--roar-license-module-active-border, var(--roar-button-border)) !important; background: var(--roar-license-style-module-active-bg, var(--roar-license-module-active-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-active-shadow), var(--roar-license-style-active-marker, none) !important; filter: var(--license-component-active-filter) !important; } body[data-app-view="license"] #license-app .main-stage[data-stage-view="exam"] .stage-body { margin: 0 !important; font-size: 12px !important; line-height: 1.25 !important; } body[data-app-view="license"] #license-app .module-item.active::after, body[data-app-view="license"] #license-app .module-item.guided-target::after { opacity: var(--license-component-overlay-opacity) !important; } body[data-app-view="license"] #license-app .module-item-title, body[data-app-view="license"] #license-app .module-item-status, body[data-app-view="license"] #license-app .step-name, body[data-app-view="license"] #license-app .step-index, body[data-app-view="license"] #license-app .question-progress, body[data-app-view="license"] #license-app .actionbar-label { letter-spacing: var(--roar-license-style-letter-spacing, 0.08em) !important; text-transform: var(--roar-license-style-text-transform, uppercase) !important; } body[data-app-view="license"] #license-app .inner-card, body[data-app-view="license"] #license-app .question-panel, body[data-app-view="license"] #license-app .feedback-panel { border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; background: var(--roar-license-style-content-bg, var(--roar-license-question-card-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-card-shadow) !important; clip-path: var(--license-component-clip) !important; } body[data-app-view="license"] #license-app .question-panel { position: relative !important; overflow: hidden !important; } body[data-app-view="license"] #license-app .question-panel::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: 2px !important; background: var(--roar-license-style-question-accent, var(--roar-license-answer-selected-border)) !important; pointer-events: none !important; } body[data-app-view="license"] #license-app .answer-list { gap: var(--roar-license-style-answer-gap, 8px) !important; } body[data-app-view="license"] #license-app .answer-item { position: relative !important; overflow: hidden !important; padding: var(--roar-license-style-answer-padding, 12px 14px) !important; border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; background: var(--roar-license-style-answer-bg, var(--roar-license-answer-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-card-shadow) !important; clip-path: var(--license-component-clip) !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease !important; } body[data-app-view="license"] #license-app .answer-item:hover:not(.active):not(.correct):not(.wrong), body[data-app-view="license"] #license-app .answer-item:focus-visible:not(.active):not(.correct):not(.wrong) { border-color: var(--roar-license-answer-selected-border, var(--roar-button-border)) !important; background: var(--roar-license-style-answer-hover-bg, var(--roar-license-answer-bg)) !important; box-shadow: var(--license-component-hover-shadow) !important; transform: var(--license-component-hover-transform) !important; } body[data-app-view="license"] #license-app .answer-item:hover:not(.active):not(.correct):not(.wrong)::after, body[data-app-view="license"] #license-app .answer-item:focus-visible:not(.active):not(.correct):not(.wrong)::after { opacity: calc(var(--license-component-overlay-opacity) * 0.55) !important; } body[data-app-view="license"] #license-app .answer-item.active, body[data-app-view="license"] #license-app .answer-item.correct { border-color: var(--roar-license-answer-selected-border, var(--roar-button-border)) !important; background: var(--roar-license-style-answer-selected-bg, var(--roar-license-module-active-bg, var(--roar-license-answer-bg))) !important; box-shadow: var(--license-component-active-shadow), var(--roar-license-style-active-marker, none) !important; } body[data-app-view="license"] #license-app .answer-item.active::after, body[data-app-view="license"] #license-app .answer-item.correct::after { opacity: var(--license-component-overlay-opacity) !important; } body[data-app-view="license"] #license-app .answer-item.correct { border-color: var(--roar-license-answer-correct, var(--roar-success)) !important; } body[data-app-view="license"] #license-app .answer-item.wrong { border-color: var(--roar-license-answer-wrong, var(--roar-danger)) !important; } body[data-app-view="license"] #license-app .panel-progress, body[data-app-view="license"] #license-app .progress-card, body[data-app-view="license"] #license-app .actionbar, body[data-app-view="license"] #license-app .rail-toggle { background: var(--roar-license-style-process-bg, var(--roar-license-process-bg, var(--roar-panel-bg-soft))) !important; } body[data-app-view="license"] #license-app .step-list { gap: var(--roar-license-style-process-gap, 10px) !important; } body[data-app-view="license"] #license-app .step-list::before { background: var(--roar-license-style-connector, var(--roar-panel-border-subtle)) !important; opacity: 1 !important; } body[data-app-view="license"] #license-app .step-card { position: relative !important; overflow: hidden !important; padding: var(--roar-license-style-process-padding, 12px 12px 12px 15px) !important; border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; background: var(--roar-license-style-process-bg, var(--roar-license-process-bg, var(--roar-panel-bg-soft))) !important; box-shadow: var(--license-component-card-shadow) !important; clip-path: var(--license-component-clip) !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease !important; } body[data-app-view="license"] #license-app .step-card::before { border-color: var(--roar-license-process-active, var(--roar-button-border)) !important; background: var(--roar-license-style-dot-bg, var(--roar-license-process-active, var(--roar-bg-deep))) !important; box-shadow: var(--license-component-step-dot-shadow) !important; } body[data-app-view="license"] #license-app .step-card:hover, body[data-app-view="license"] #license-app .step-card:focus-within { border-color: var(--roar-license-process-active, var(--roar-button-border)) !important; background: var(--roar-license-style-process-active-bg, var(--roar-license-process-bg)) !important; box-shadow: var(--license-component-hover-shadow) !important; } body[data-app-view="license"] #license-app .step-card.active, body[data-app-view="license"] #license-app .step-card.done { border-color: var(--roar-license-process-active, var(--roar-button-border)) !important; background: var(--roar-license-style-process-active-bg, var(--roar-license-process-bg)) !important; box-shadow: var(--license-component-active-shadow), var(--roar-license-style-active-marker, none) !important; } body[data-app-view="license"] #license-app .step-card:hover::after, body[data-app-view="license"] #license-app .step-card:focus-within::after { opacity: calc(var(--license-component-overlay-opacity) * 0.55) !important; } body[data-app-view="license"] #license-app .step-card.active::after, body[data-app-view="license"] #license-app .step-card.done::after { opacity: var(--license-component-overlay-opacity) !important; } body[data-app-view="license"] #license-app .actionbar { border-width: var(--license-component-card-border-width) !important; border-radius: var(--license-component-card-radius) !important; box-shadow: var(--roar-license-style-card-shadow, none) !important; } body[data-app-view="license"] #license-app .actionbar-buttons button { border-radius: var(--license-component-inner-radius) !important; } body[data-app-view="license"] #license-app .actionbar-buttons button.primary, body[data-app-view="license"] #license-app button.primary:not(.entry-button) { border-color: var(--roar-button-border, var(--roar-license-module-active-border)) !important; background: var(--roar-license-style-cta-bg, var(--roar-button-bg)) !important; box-shadow: var(--roar-license-style-cta-shadow, var(--roar-button-glow-strong)) !important; clip-path: var(--license-component-clip) !important; } body[data-app-view="license"] #license-app .actionbar-buttons button.primary:hover:not(:disabled), body[data-app-view="license"] #license-app .actionbar-buttons button.primary:focus-visible, body[data-app-view="license"] #license-app button.primary:not(.entry-button):hover:not(:disabled), body[data-app-view="license"] #license-app button.primary:not(.entry-button):focus-visible { background: var(--roar-license-style-cta-hover-bg, var(--roar-button-bg-hover)) !important; box-shadow: var(--roar-license-style-cta-shadow, var(--roar-button-glow-strong)) !important; } body[data-app-view="license"] #license-app .actionbar-buttons button.secondary, body[data-app-view="license"] #license-app button.secondary:not(.entry-button) { background: var(--roar-license-style-back-bg, var(--roar-button-secondary-bg)) !important; box-shadow: var(--roar-license-style-back-shadow, var(--roar-button-secondary-shadow, none)) !important; clip-path: var(--license-component-clip) !important; } .coach-login-entry-button { min-height: 54px !important; display: grid !important; justify-items: center !important; gap: 3px !important; padding: 9px 18px !important; opacity: 0.88 !important; } .coach-login-entry-button span, .coach-login-entry-button em { display: block !important; letter-spacing: 0 !important; line-height: 1.1 !important; } .coach-login-entry-button span { font-size: 0.84rem !important; font-weight: 900 !important; text-transform: uppercase !important; } .coach-login-entry-button em { color: rgba(255, 244, 209, 0.68) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 760 !important; text-transform: none !important; } .coach-login-panel { max-width: 460px !important; } /* Welcome Guide W2: first-visit value skeleton before the start window. */ body[data-app-view="intro_ready"] .intro-start-panel { position: relative !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { position: absolute !important; left: 50% !important; bottom: 72px !important; z-index: 32 !important; width: min(190px, 58vw) !important; min-height: 34px !important; padding: 0 14px !important; border-radius: 8px !important; background: rgba(4, 7, 14, 0.72) !important; font-size: 0.72rem !important; letter-spacing: 0 !important; text-transform: none !important; transform: translate3d(-50%, 0, 0) !important; opacity: 0.96 !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:focus-visible { transform: translate3d(-50%, -2px, 0) !important; } @media (min-width: 761px) { body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { left: 0 !important; bottom: 20px !important; transform: translate3d(0, 0, 0) !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:focus-visible { transform: translate3d(0, -2px, 0) !important; } } .welcome-guide { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(14px, 4vw, 32px); background: linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(2, 5, 10, 0.88)), linear-gradient(90deg, rgba(255, 122, 32, 0.12), transparent 36%, rgba(241, 187, 84, 0.08)); opacity: 1; transition: opacity 180ms ease; } .welcome-guide.hidden { display: none !important; } .welcome-guide-panel { width: min(680px, 100%); max-height: min(86vh, 720px); display: grid; gap: 16px; padding: clamp(18px, 4vw, 28px); overflow-y: auto; border: 1px solid rgba(255, 173, 68, 0.44); border-radius: 8px; background: linear-gradient(180deg, rgba(13, 20, 31, 0.96), rgba(5, 8, 14, 0.98)), rgba(8, 12, 20, 0.98); box-shadow: 0 28px 72px rgba(0, 0, 0, 0.54), 0 0 38px rgba(255, 122, 32, 0.12), inset 0 1px 0 rgba(255, 244, 209, 0.08); } .welcome-guide-panel:focus { outline: none; } .welcome-guide-header, .welcome-guide-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .welcome-guide-counter, .welcome-guide-kicker, .welcome-guide-title, .welcome-guide-copy { margin: 0; } .welcome-guide-counter, .welcome-guide-kicker { color: rgba(255, 191, 100, 0.86); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .welcome-guide-skip { min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 244, 209, 0.18); border-radius: 8px; background: rgba(255, 244, 209, 0.06); color: rgba(255, 244, 209, 0.78); font: inherit; font-size: 0.82rem; font-weight: 800; } .welcome-guide-body { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(220px, 0.94fr); gap: clamp(16px, 4vw, 28px); align-items: stretch; } .welcome-guide-copy-block { display: grid; align-content: center; gap: 10px; } .welcome-guide-title { color: #fff4d1; font-size: clamp(1.8rem, 5vw, 3.15rem); line-height: 0.98; font-weight: 950; } .welcome-guide-copy { max-width: 34ch; color: rgba(255, 244, 209, 0.82); font-size: clamp(0.98rem, 2vw, 1.08rem); line-height: 1.48; } .welcome-guide-visual { min-height: 214px; display: grid; align-content: space-between; gap: 14px; padding: 16px; border: 1px solid rgba(255, 244, 209, 0.14); border-radius: 8px; background: linear-gradient(180deg, rgba(16, 27, 37, 0.86), rgba(8, 13, 21, 0.92)), rgba(8, 13, 21, 0.9); } .welcome-guide-visual-core { min-height: 118px; display: grid; grid-template-columns: 1fr 0.78fr; gap: 10px; } .welcome-guide-visual-core span, .welcome-guide-visual-rail span { display: grid; place-items: center; min-width: 0; border: 1px solid rgba(255, 173, 68, 0.24); border-radius: 8px; background: rgba(255, 244, 209, 0.055); color: rgba(255, 244, 209, 0.86); font-weight: 900; text-align: center; } .welcome-guide-visual-core span:first-child { background: linear-gradient(180deg, rgba(255, 122, 32, 0.26), rgba(18, 22, 28, 0.9)), rgba(255, 122, 32, 0.14); color: #fff4d1; } .welcome-guide-visual-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .welcome-guide-visual-rail span { min-height: 42px; padding: 0 8px; font-size: 0.76rem; } .welcome-guide-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } .welcome-guide-progress span { height: 4px; border-radius: 999px; background: rgba(255, 244, 209, 0.14); } .welcome-guide-progress span.is-active, .welcome-guide-progress span.is-complete { background: rgba(255, 173, 68, 0.82); } .welcome-guide-button { min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 173, 68, 0.34); border-radius: 8px; font: inherit; font-size: 0.9rem; font-weight: 900; color: #fff4d1; } .welcome-guide-button-primary { min-width: min(190px, 56vw); background: linear-gradient(180deg, rgba(255, 124, 22, 0.88), rgba(33, 10, 4, 0.96)); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32); } .welcome-guide-button-secondary { min-width: 112px; background: rgba(255, 244, 209, 0.07); color: rgba(255, 244, 209, 0.78); } .welcome-guide-skip:hover, .welcome-guide-skip:focus-visible, .welcome-guide-button:hover:not(:disabled), .welcome-guide-button:focus-visible { border-color: rgba(255, 173, 68, 0.66); outline: 2px solid rgba(255, 173, 68, 0.18); outline-offset: 2px; } .welcome-guide-button:disabled { opacity: 0.42; cursor: default; } @media (prefers-reduced-motion: no-preference) { .welcome-guide-panel { animation: welcomeGuidePanelIn 180ms ease both; } .welcome-guide-body { animation: welcomeGuideBodyIn 170ms ease both; } } @keyframes welcomeGuidePanelIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes welcomeGuideBodyIn { from { opacity: 0.72; transform: translate3d(0, 5px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (max-width: 760px) { body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { bottom: -48px !important; min-height: 32px !important; font-size: 0.72rem !important; } .welcome-guide { padding: 12px; } .welcome-guide-panel { max-height: calc(100dvh - 24px); gap: 13px; } .welcome-guide-body { grid-template-columns: 1fr; } .welcome-guide-visual { min-height: 168px; } .welcome-guide-visual-core { min-height: 86px; } .welcome-guide-actions { display: grid; grid-template-columns: 1fr; } .welcome-guide-button { width: 100%; } } .coach-login-kicker { margin: 0 0 8px !important; color: rgba(60, 195, 191, 0.9) !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .coach-hub { width: min(1240px, calc(100vw - 72px)) !important; min-height: min(586px, calc(100vh - 30px)) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(206px, 236px) !important; gap: 10px !important; align-self: center !important; justify-self: center !important; color: var(--entry-text, var(--roar-text-strong, #fff8ea)) !important; pointer-events: auto !important; } .coach-hub.hidden { display: none !important; } .coach-hub, .coach-hub * { min-width: 0 !important; } .coach-hub-content, .coach-hub-nav { position: relative !important; overflow: hidden !important; border: 1px solid rgba(60, 195, 191, 0.34) !important; border-radius: 22px !important; background: linear-gradient(150deg, rgba(8, 17, 25, 0.96), rgba(4, 8, 13, 0.92) 58%, rgba(19, 15, 8, 0.9)), rgba(255, 244, 209, 0.025) !important; box-shadow: 0 26px 58px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; backdrop-filter: blur(16px) saturate(1.08) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; } .coach-hub-content { min-height: 526px !important; max-height: min(640px, calc(100vh - 30px)) !important; display: grid !important; align-content: start !important; gap: 10px !important; padding: clamp(20px, 2vw, 30px) !important; overflow-y: auto !important; } .coach-hub-eyebrow { margin: 0 !important; color: rgba(60, 195, 191, 0.92) !important; font-size: 0.72rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .coach-hub-title { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(2rem, 3.3vw, 3.35rem) !important; font-weight: 950 !important; line-height: 0.96 !important; letter-spacing: 0 !important; } .coach-hub-subline { max-width: 66ch !important; margin: 0 !important; color: rgba(255, 244, 209, 0.78) !important; font-size: 0.88rem !important; font-weight: 760 !important; line-height: 1.32 !important; } .coach-hub-panels { min-height: 338px !important; display: grid !important; } .coach-hub-panel { display: grid !important; align-content: start !important; gap: 10px !important; } .coach-hub-panel.hidden { display: none !important; } .coach-hub-metric-grid, .coach-player-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .coach-hub-card, .coach-player-row, .coach-workbench-placeholder { min-height: 112px !important; display: grid !important; align-content: center !important; gap: 8px !important; padding: 16px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.045) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .coach-hub-card span, .coach-player-row span, .coach-workbench-placeholder span { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.7rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .coach-hub-card strong, .coach-player-row strong, .coach-workbench-placeholder strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.05rem, 1.5vw, 1.55rem) !important; font-weight: 920 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .coach-hub-card em, .coach-workbench-placeholder p { margin: 0 !important; color: rgba(255, 244, 209, 0.72) !important; font-size: 0.82rem !important; font-style: normal !important; line-height: 1.35 !important; } .coach-workbench-placeholder { min-height: 220px !important; align-content: center !important; } .coach-dashboard-stack, .coach-player-dashboard, .coach-snapshot-dashboard, .coach-history-dashboard, .coach-notes-dashboard, .coach-trust-review-dashboard, .coach-release-dashboard { display: grid !important; gap: 10px !important; } .coach-dashboard-stack .coach-hub-metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .coach-section-heading { display: grid !important; gap: 3px !important; } .coach-section-heading span { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.68rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .coach-section-heading strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.1rem !important; font-weight: 920 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .coach-worklist, .coach-event-list, .coach-release-list { display: grid !important; gap: 10px !important; padding: 14px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.035) !important; } .coach-worklist-rows { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } .coach-worklist-row, .coach-event-row, .coach-release-row { display: grid !important; gap: 6px !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 12px !important; background: rgba(3, 8, 13, 0.38) !important; } .coach-worklist-row strong, .coach-event-row strong, .coach-release-row strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.92rem !important; font-weight: 900 !important; line-height: 1.12 !important; } .coach-worklist-row em, .coach-event-row em, .coach-release-row em, .coach-release-row span { color: rgba(255, 244, 209, 0.72) !important; font-size: 0.76rem !important; font-style: normal !important; font-weight: 740 !important; line-height: 1.28 !important; } .coach-priority { width: fit-content !important; padding: 4px 7px !important; border-radius: 999px !important; border: 1px solid rgba(255, 244, 209, 0.13) !important; color: rgba(255, 244, 209, 0.78) !important; font-size: 0.62rem !important; font-weight: 900 !important; line-height: 1 !important; text-transform: uppercase !important; } .coach-priority.is-high { border-color: rgba(255, 122, 32, 0.4) !important; color: rgba(255, 190, 120, 0.96) !important; background: rgba(255, 122, 32, 0.1) !important; } .coach-priority.is-medium { border-color: rgba(60, 195, 191, 0.34) !important; color: rgba(127, 236, 229, 0.92) !important; background: rgba(60, 195, 191, 0.09) !important; } .coach-inline-button { min-height: 32px !important; display: inline-grid !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; border: 1px solid rgba(60, 195, 191, 0.36) !important; border-radius: 10px !important; background: rgba(60, 195, 191, 0.12) !important; color: var(--roar-text-strong, #fff8ea) !important; font: inherit !important; font-size: 0.7rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; cursor: pointer !important; } .coach-inline-button:hover, .coach-inline-button:focus-visible { border-color: rgba(60, 195, 191, 0.62) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(60, 195, 191, 0.14) !important; } .coach-inline-button:disabled, .coach-inline-button.is-muted { cursor: default !important; opacity: 0.62 !important; } .coach-player-dashboard { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr) !important; align-items: start !important; } .coach-player-grid { max-height: 376px !important; display: grid !important; gap: 8px !important; overflow-y: auto !important; padding-right: 4px !important; } .coach-player-grid .coach-player-row { min-height: 0 !important; align-content: start !important; gap: 9px !important; padding: 12px !important; } .coach-player-row.is-selected { border-color: rgba(60, 195, 191, 0.52) !important; background: rgba(60, 195, 191, 0.08) !important; } .coach-player-main { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: baseline !important; } .coach-player-main span { justify-self: end !important; color: rgba(255, 244, 209, 0.68) !important; font-size: 0.72rem !important; font-weight: 820 !important; text-transform: none !important; } .coach-player-fields, .coach-detail-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; margin: 0 !important; } .coach-player-fields div, .coach-detail-grid div { display: grid !important; gap: 2px !important; padding: 7px !important; border-radius: 9px !important; background: rgba(255, 244, 209, 0.045) !important; } .coach-player-fields dt, .coach-detail-grid dt { color: rgba(60, 195, 191, 0.82) !important; font-size: 0.6rem !important; font-weight: 900 !important; line-height: 1.1 !important; text-transform: uppercase !important; } .coach-player-fields dd, .coach-detail-grid dd { margin: 0 !important; color: rgba(255, 244, 209, 0.84) !important; font-size: 0.72rem !important; font-weight: 790 !important; line-height: 1.18 !important; } .coach-player-preview { display: grid !important; gap: 10px !important; padding: 14px !important; border: 1px solid rgba(60, 195, 191, 0.24) !important; border-radius: 14px !important; background: rgba(60, 195, 191, 0.06) !important; } .coach-player-preview.is-empty { min-height: 220px !important; align-content: center !important; } .coach-player-preview p, .coach-notes-preview p { margin: 0 !important; color: rgba(255, 244, 209, 0.72) !important; font-size: 0.82rem !important; font-weight: 740 !important; line-height: 1.35 !important; } .coach-flag-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .coach-flag-row span { padding: 5px 8px !important; border: 1px solid rgba(255, 122, 32, 0.32) !important; border-radius: 999px !important; background: rgba(255, 122, 32, 0.09) !important; color: rgba(255, 224, 188, 0.94) !important; font-size: 0.64rem !important; font-weight: 900 !important; line-height: 1 !important; text-transform: uppercase !important; } .coach-workbench-preview { align-content: start !important; } .coach-snapshot-workbench { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.88fr) !important; gap: 10px !important; align-items: stretch !important; } .coach-snapshot-zone { display: grid !important; align-content: start !important; gap: 10px !important; min-width: 0 !important; padding: 14px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.04) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.04) !important; } .coach-snapshot-core { grid-column: 2 !important; grid-row: 1 / span 2 !important; } .coach-snapshot-context { grid-column: 1 !important; grid-row: 1 !important; } .coach-snapshot-benchmark { grid-column: 1 !important; grid-row: 2 !important; } .coach-review-zone { grid-column: 3 !important; grid-row: 1 !important; } .coach-release-zone { grid-column: 3 !important; grid-row: 2 !important; } .coach-snapshot-zone .coach-section-heading strong { font-size: 1rem !important; } .coach-snapshot-zone .coach-detail-grid { gap: 6px !important; } .coach-snapshot-zone .coach-detail-grid div { padding: 6px !important; } .coach-snapshot-zone .coach-detail-grid dt { font-size: 0.56rem !important; } .coach-snapshot-zone .coach-detail-grid dd { font-size: 0.68rem !important; } .coach-review-zone { border-color: rgba(255, 122, 32, 0.22) !important; background: rgba(255, 122, 32, 0.06) !important; } .coach-release-zone { border-color: rgba(60, 195, 191, 0.24) !important; background: rgba(60, 195, 191, 0.07) !important; } .coach-detail-grid-wide { grid-template-columns: 1fr !important; } .coach-warning-list { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .coach-warning-list li, .coach-snapshot-zone p { margin: 0 !important; color: rgba(255, 244, 209, 0.76) !important; font-size: 0.78rem !important; font-weight: 740 !important; line-height: 1.32 !important; } .coach-warning-list li { padding: 8px 9px !important; border-radius: 9px !important; background: rgba(3, 8, 13, 0.34) !important; } .coach-snapshot-zone p strong { color: var(--roar-text-strong, #fff8ea) !important; font-weight: 900 !important; } .coach-note-field { width: 100% !important; min-height: 108px !important; resize: vertical !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.14) !important; border-radius: 12px !important; background: rgba(3, 8, 13, 0.52) !important; color: var(--roar-text-strong, #fff8ea) !important; font: inherit !important; font-size: 0.82rem !important; font-weight: 720 !important; line-height: 1.32 !important; } .coach-note-field::placeholder { color: rgba(255, 244, 209, 0.48) !important; } .coach-trust-review-layout { display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important; gap: 10px !important; align-items: start !important; } .coach-trust-review-list, .coach-trust-review-detail { display: grid !important; min-width: 0 !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.035) !important; } .coach-trust-review-cases { max-height: 356px !important; display: grid !important; gap: 8px !important; overflow-y: auto !important; padding-right: 4px !important; } .coach-trust-review-status-legend { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .coach-trust-review-status-legend span { padding: 5px 7px !important; border: 1px solid rgba(60, 195, 191, 0.28) !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.08) !important; color: rgba(255, 248, 234, 0.88) !important; font-size: 0.62rem !important; font-weight: 900 !important; line-height: 1 !important; text-transform: uppercase !important; } .coach-trust-review-case { display: grid !important; gap: 9px !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 12px !important; background: rgba(3, 8, 13, 0.38) !important; } .coach-trust-review-case.is-selected { border-color: rgba(60, 195, 191, 0.52) !important; background: rgba(60, 195, 191, 0.08) !important; } .coach-trust-review-case-head { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: baseline !important; } .coach-trust-review-case-head span, .coach-trust-review-explanation span, .coach-trust-review-flags > span, .coach-trust-review-suggestion span { color: rgba(60, 195, 191, 0.86) !important; font-size: 0.62rem !important; font-weight: 900 !important; line-height: 1.1 !important; text-transform: uppercase !important; } .coach-trust-review-case-head span { justify-self: end !important; padding: 5px 7px !important; border: 1px solid rgba(255, 122, 32, 0.32) !important; border-radius: 999px !important; background: rgba(255, 122, 32, 0.09) !important; color: rgba(255, 224, 188, 0.94) !important; white-space: nowrap !important; } .coach-trust-review-case-head strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1rem !important; font-weight: 920 !important; line-height: 1.08 !important; } .coach-trust-review-detail { border-color: rgba(60, 195, 191, 0.24) !important; background: rgba(60, 195, 191, 0.055) !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important; } .coach-trust-review-detail.is-empty { min-height: 260px !important; align-content: center !important; } .coach-trust-review-detail .coach-section-heading, .coach-trust-review-actions { grid-column: 1 / -1 !important; } .coach-trust-review-detail-grid { grid-template-columns: 1fr !important; gap: 6px !important; align-content: start !important; } .coach-trust-review-explanation, .coach-trust-review-flags, .coach-trust-review-suggestion { display: grid !important; gap: 5px !important; padding: 8px !important; border-radius: 10px !important; background: rgba(3, 8, 13, 0.34) !important; } .coach-trust-review-explanation p, .coach-trust-review-detail > p, .coach-trust-review-suggestion strong, .coach-trust-review-suggestion em { margin: 0 !important; color: rgba(255, 244, 209, 0.78) !important; font-size: 0.78rem !important; font-style: normal !important; font-weight: 740 !important; line-height: 1.34 !important; } .coach-trust-review-suggestion strong { color: var(--roar-text-strong, #fff8ea) !important; font-weight: 900 !important; } .coach-trust-review-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .coach-trust-review-actions .coach-inline-button { min-height: 34px !important; padding: 0 7px !important; font-size: 0.64rem !important; text-align: center !important; } .coach-trust-review-notice { margin: 0 !important; padding: 10px 12px !important; border: 1px solid rgba(60, 195, 191, 0.22) !important; border-radius: 14px !important; background: rgba(60, 195, 191, 0.08) !important; color: rgba(255, 244, 209, 0.82) !important; font-size: 0.78rem !important; font-weight: 760 !important; line-height: 1.3 !important; } .coach-release-row { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } .coach-release-actions { display: flex !important; flex-wrap: wrap !important; justify-content: end !important; gap: 6px !important; } .coach-hub-notice { width: 100% !important; margin: 0 !important; padding: 10px 12px !important; border: 1px solid rgba(60, 195, 191, 0.22) !important; border-radius: 14px !important; background: rgba(60, 195, 191, 0.08) !important; color: rgba(255, 244, 209, 0.82) !important; font-size: 0.78rem !important; font-weight: 760 !important; line-height: 1.3 !important; } .coach-hub-nav { display: grid !important; align-content: stretch !important; gap: 6px !important; padding: 10px !important; } .coach-hub-nav::before { content: "Coach Navigation" !important; align-self: start !important; padding: 2px 3px 4px !important; color: rgba(60, 195, 191, 0.88) !important; font-size: 0.62rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .coach-hub-nav-button { min-height: 40px !important; display: grid !important; align-items: center !important; padding: 0 10px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 13px !important; background: rgba(255, 244, 209, 0.045) !important; color: rgba(255, 248, 234, 0.95) !important; font: inherit !important; font-size: 0.72rem !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: uppercase !important; cursor: pointer !important; } .coach-hub-nav-button.active { border-color: rgba(60, 195, 191, 0.46) !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.13), rgba(8, 11, 16, 0.72)) !important; box-shadow: inset 2px 0 0 rgba(60, 195, 191, 0.72) !important; } .coach-hub-nav-button.logout { min-height: 36px !important; align-self: end !important; margin-top: auto !important; border-color: rgba(255, 244, 209, 0.09) !important; background: rgba(255, 244, 209, 0.025) !important; color: rgba(255, 244, 209, 0.68) !important; } .coach-hub-nav-button:hover, .coach-hub-nav-button:focus-visible { border-color: rgba(60, 195, 191, 0.58) !important; color: var(--roar-text-strong, #fff8ea) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(60, 195, 191, 0.14) !important; } /* member hub consolidated final */ .member-hub { position: relative !important; width: min(1500px, calc(100vw - 48px)) !important; min-height: min(586px, calc(100vh - 30px)) !important; display: grid !important; grid-template-columns: minmax(196px, 224px) minmax(0, 1fr) minmax(390px, 500px) !important; align-items: start !important; gap: 10px !important; align-self: center !important; justify-self: center !important; color: var(--entry-text, var(--roar-text-strong, #fff8ea)) !important; pointer-events: auto !important; } .member-hub.hidden { display: none !important; } .member-hub { --club-status-green: #63d69b; --club-status-green-soft: rgba(99, 214, 155, 0.11); --club-status-teal: #58d2c7; --club-status-teal-soft: rgba(88, 210, 199, 0.11); --club-status-amber: #d9b45f; --club-status-amber-soft: rgba(217, 180, 95, 0.12); --club-status-orange: #e58a3b; --club-status-orange-soft: rgba(229, 138, 59, 0.12); --club-status-red: #d9675a; --club-status-red-soft: rgba(217, 103, 90, 0.11); --club-status-gold: #e4c96c; --club-status-gold-soft: rgba(228, 201, 108, 0.13); --club-status-blue: #7aa7e8; --club-status-blue-soft: rgba(122, 167, 232, 0.11); --club-status-gray: #aab2bd; --club-status-gray-soft: rgba(170, 178, 189, 0.1); } .club-status-chip, .club-badge, .club-fit-badge, .club-risk-chip { --club-status-accent: var(--club-status-teal); --club-status-soft: var(--club-status-teal-soft); max-width: 100% !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; width: fit-content !important; min-width: 0 !important; padding: 4px 8px !important; border: 1px solid color-mix(in srgb, var(--club-status-accent) 42%, rgba(255, 244, 209, 0.12)) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--club-status-accent) 13%, rgba(5, 9, 15, 0.42)) !important; color: rgba(255, 248, 234, 0.94) !important; font-size: 0.64rem !important; font-style: normal !important; font-weight: 920 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: normal !important; } .club-status-chip.is-compact, .club-badge.is-compact, .club-fit-badge.is-compact, .club-risk-chip.is-compact { padding: 3px 7px !important; font-size: 0.58rem !important; } .club-status-chip::before, .club-badge::before, .club-fit-badge::before, .club-risk-chip::before { content: "" !important; flex: 0 0 auto !important; width: 6px !important; height: 6px !important; border-radius: 999px !important; background: var(--club-status-accent) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--club-status-accent) 45%, transparent) !important; } .club-badge::before { width: 7px !important; height: 7px !important; border-radius: 3px !important; } .club-fit-badge::before { width: 8px !important; height: 8px !important; border-radius: 2px !important; transform: rotate(45deg) !important; } .club-risk-chip::before { width: 0 !important; height: 0 !important; border-radius: 0 !important; background: transparent !important; border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-bottom: 7px solid var(--club-status-accent) !important; box-shadow: none !important; } .club-activity-dot::before { width: 7px !important; height: 7px !important; } .club-status-chip.is-online::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-status-accent) 16%, transparent), 0 0 10px color-mix(in srgb, var(--club-status-accent) 45%, transparent) !important; } .club-status-chip.is-today::before { outline: 2px solid color-mix(in srgb, var(--club-status-accent) 28%, transparent) !important; outline-offset: 2px !important; } .club-status-chip.is-in-match::before { width: 0 !important; height: 0 !important; border-top: 4px solid transparent !important; border-bottom: 4px solid transparent !important; border-left: 7px solid var(--club-status-accent) !important; border-radius: 0 !important; background: transparent !important; } .club-status-chip.is-missing { border-style: dashed !important; } .club-status-field { --club-status-accent: var(--club-status-teal); --club-status-soft: var(--club-status-teal-soft); border-color: color-mix(in srgb, var(--club-status-accent) 28%, rgba(255, 244, 209, 0.1)) !important; background: color-mix(in srgb, var(--club-status-accent) 8%, rgba(255, 244, 209, 0.035)) !important; } .club-status-surface { --club-status-accent: var(--club-status-teal); --club-status-soft: var(--club-status-teal-soft); } .is-strong, .is-peak, .is-trusted, .is-reliable, .is-good, .is-stable, .is-online { --club-status-accent: var(--club-status-green); --club-status-soft: var(--club-status-green-soft); } .is-active, .is-today { --club-status-accent: var(--club-status-teal); --club-status-soft: var(--club-status-teal-soft); } .is-neutral, .is-uncertain, .is-new { --club-status-accent: var(--club-status-amber); --club-status-soft: var(--club-status-amber-soft); } .is-warning, .is-review, .is-in-match { --club-status-accent: var(--club-status-orange); --club-status-soft: var(--club-status-orange-soft); } .is-critical, .is-blocked { --club-status-accent: var(--club-status-red); --club-status-soft: var(--club-status-red-soft); } .is-preview, .is-api-mock { --club-status-accent: var(--club-status-blue); --club-status-soft: var(--club-status-blue-soft); } .is-mock, .is-fallback, .is-missing, .is-later, .is-offline, .is-unknown { --club-status-accent: var(--club-status-gray); --club-status-soft: var(--club-status-gray-soft); } .is-premium { --club-status-accent: var(--club-status-gold); --club-status-soft: var(--club-status-gold-soft); } .member-beta-notice { position: fixed !important; inset: 0 !important; z-index: 30 !important; display: grid !important; place-items: center !important; padding: clamp(14px, 4vw, 22px) !important; border-radius: 0 !important; background: rgba(3, 6, 11, 0.54) !important; backdrop-filter: blur(10px) saturate(1.05) !important; -webkit-backdrop-filter: blur(10px) saturate(1.05) !important; } .member-beta-notice.hidden { display: none !important; } .member-beta-notice-panel { width: min(440px, 100%) !important; max-height: calc(100vh - 32px) !important; overflow: auto !important; display: grid !important; gap: 10px !important; padding: 18px !important; border: 1px solid rgba(255, 183, 96, 0.28) !important; border-radius: 18px !important; background: radial-gradient(circle at 10% 0%, rgba(60, 195, 191, 0.13), transparent 34%), linear-gradient(145deg, rgba(17, 24, 33, 0.96), rgba(7, 10, 16, 0.94)) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 244, 209, 0.045), inset 0 1px 0 rgba(255, 244, 209, 0.08) !important; } .member-beta-notice-kicker { width: fit-content !important; padding: 4px 8px !important; border: 1px solid rgba(60, 195, 191, 0.34) !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.09) !important; color: rgba(60, 195, 191, 0.96) !important; font-size: 0.62rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-beta-notice-panel h2 { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.18rem, 2vw, 1.48rem) !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-beta-notice-panel p { margin: 0 !important; color: rgba(255, 226, 184, 0.9) !important; font-size: 0.82rem !important; font-weight: 760 !important; line-height: 1.42 !important; letter-spacing: 0 !important; } .member-beta-notice-dismiss { justify-self: start !important; min-height: 36px !important; padding: 0 14px !important; border: 1px solid rgba(255, 244, 209, 0.24) !important; border-radius: 11px !important; background: linear-gradient(180deg, rgba(255, 151, 48, 0.98), rgba(212, 83, 24, 0.96)) !important; color: #140b06 !important; font: inherit !important; font-size: 0.74rem !important; font-weight: 950 !important; line-height: 1.1 !important; letter-spacing: 0 !important; cursor: pointer !important; box-shadow: 0 14px 28px rgba(255, 122, 32, 0.2) !important; } .member-beta-notice-dismiss:hover, .member-beta-notice-dismiss:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.16), 0 16px 34px rgba(255, 122, 32, 0.28) !important; } .member-hub-content, .member-hub-nav, .member-connect-rail { position: relative !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--roar-button-border, #ff7a20) 52%, rgba(255, 244, 209, 0.12)) !important; border-radius: 24px !important; background: radial-gradient(circle at 12% 12%, rgba(60, 195, 191, 0.12), transparent 34%), radial-gradient(circle at 88% 4%, rgba(255, 122, 32, 0.16), transparent 28%), linear-gradient(145deg, rgba(11, 17, 27, 0.94), rgba(4, 7, 13, 0.9) 56%, rgba(15, 12, 8, 0.9)) !important; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; backdrop-filter: blur(16px) saturate(1.1) !important; -webkit-backdrop-filter: blur(16px) saturate(1.1) !important; } .member-hub-content::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.18), transparent 20%), linear-gradient(180deg, rgba(255, 244, 209, 0.05), transparent 30%) !important; opacity: 0.82 !important; } .member-hub-content > * { position: relative !important; z-index: 1 !important; } .member-hub-content { min-height: 526px !important; display: grid !important; align-content: start !important; gap: 8px !important; padding: clamp(19px, 2.1vw, 30px) !important; } .member-hub[data-active-member-section="lobby"] { grid-template-columns: minmax(196px, 224px) minmax(0, 1fr) !important; width: min(1180px, calc(100vw - 48px)) !important; } .member-hub[data-active-member-section="lobby"] .member-connect-rail { display: none !important; } .member-connect-rail { max-width: 500px !important; min-height: 0 !important; max-height: none !important; display: grid !important; grid-template-rows: auto auto auto !important; align-self: start !important; gap: 10px !important; padding: 12px !important; overflow: visible !important; background: linear-gradient(180deg, rgba(15, 22, 30, 0.88), rgba(5, 8, 14, 0.84)), rgba(60, 195, 191, 0.025) !important; } .member-connect-rail-head { display: grid !important; gap: 6px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255, 244, 209, 0.1) !important; } .member-connect-rail-head span, .member-connect-state-card span, .member-connect-preview-label, .member-connect-status, .member-premium-status { color: rgba(60, 195, 191, 0.92) !important; font-size: 0.66rem !important; font-weight: 950 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-connect-rail-head h2 { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.08rem, 1.35vw, 1.28rem) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-connect-title-row { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-width: 0 !important; } .member-connect-rail-head p, .member-connect-state-card p, .member-connect-card p, .member-connect-rail-note { margin: 0 !important; color: rgba(255, 226, 184, 0.86) !important; font-size: 0.72rem !important; font-weight: 760 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-connect-state-list { min-height: 0 !important; display: grid !important; align-content: start !important; gap: 8px !important; overflow: visible !important; padding-right: 0 !important; } .member-connect-state-list.is-card-state { gap: 9px !important; } .member-connect-state-card { display: grid !important; gap: 6px !important; min-height: 84px !important; padding: 10px !important; border: 1px solid rgba(255, 244, 209, 0.11) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.055), transparent 40%), rgba(255, 244, 209, 0.035) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.045) !important; } .member-connect-state-card span { color: rgba(255, 248, 234, 0.96) !important; text-transform: none !important; } .member-connect-card { min-width: 0 !important; display: grid !important; gap: 7px !important; padding: 10px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.07), transparent 42%), rgba(255, 244, 209, 0.04) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.045) !important; } .member-connect-card-topline, .member-connect-card-head, .member-connect-chemistry, .member-connect-card-meta { min-width: 0 !important; } .member-connect-card-topline { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; } .member-connect-status { width: fit-content !important; padding: 3px 7px !important; border: 1px solid rgba(60, 195, 191, 0.28) !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.09) !important; } .member-connect-preview-label { color: rgba(255, 183, 96, 0.9) !important; } .member-connect-card-head { display: grid !important; gap: 4px !important; } .member-connect-card-head strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.98rem !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-connect-card-head span, .member-connect-activity, .member-connect-weak-reason, .member-connect-reasons li, .member-connect-card-meta em { color: rgba(255, 226, 184, 0.82) !important; font-size: 0.68rem !important; font-weight: 760 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-connect-chemistry { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 2px 8px !important; padding: 8px 9px !important; border: 1px solid rgba(255, 122, 32, 0.22) !important; border-radius: 12px !important; background: rgba(255, 122, 32, 0.07) !important; } .member-connect-chemistry > span { grid-column: 1 !important; grid-row: 1 / span 2 !important; color: rgba(255, 183, 96, 0.96) !important; font-size: 0.66rem !important; font-weight: 950 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-connect-chemistry strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.42rem !important; font-weight: 950 !important; line-height: 0.98 !important; letter-spacing: 0 !important; } .member-connect-chemistry em { color: rgba(255, 248, 234, 0.9) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-connect-main-reason, .member-club-main-reason { min-width: 0 !important; display: grid !important; gap: 2px !important; margin: 0 !important; padding: 7px 8px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 10px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-connect-main-reason span, .member-club-main-reason span { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.56rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-connect-main-reason strong, .member-club-main-reason strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 0.69rem !important; font-weight: 880 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } .member-connect-card-meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .member-connect-card-meta span { min-width: 0 !important; display: grid !important; gap: 2px !important; padding: 7px !important; border: 1px solid rgba(255, 244, 209, 0.08) !important; border-radius: 10px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-connect-card-meta strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 0.68rem !important; font-weight: 900 !important; line-height: 1.18 !important; letter-spacing: 0 !important; } .member-connect-reasons { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .member-connect-reasons li { position: relative !important; padding-left: 11px !important; } .member-connect-reasons li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0.52em !important; width: 4px !important; height: 4px !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.82) !important; } .member-connect-weak-reason { width: fit-content !important; margin: 0 !important; padding: 5px 7px !important; border: 1px solid rgba(255, 183, 96, 0.18) !important; border-radius: 999px !important; background: rgba(255, 183, 96, 0.065) !important; } .member-connect-details { min-width: 0 !important; display: grid !important; gap: 6px !important; } .member-connect-details summary { width: fit-content !important; list-style: none !important; cursor: pointer !important; color: rgba(60, 195, 191, 0.9) !important; font-size: 0.62rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-connect-details summary::-webkit-details-marker { display: none !important; } .member-connect-details summary::after { content: " +"; } .member-connect-details[open] summary::after { content: " -"; } .member-connect-details-body { display: grid !important; gap: 6px !important; padding-top: 2px !important; } .member-connect-factor-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px !important; } .member-connect-factor-grid span { min-width: 0 !important; display: grid !important; gap: 2px !important; padding: 6px !important; border: 1px solid rgba(255, 244, 209, 0.08) !important; border-radius: 9px !important; background: rgba(255, 244, 209, 0.03) !important; } .member-connect-factor-grid em { color: rgba(60, 195, 191, 0.82) !important; font-size: 0.52rem !important; font-style: normal !important; font-weight: 920 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-connect-factor-grid strong { color: rgba(255, 248, 234, 0.92) !important; font-size: 0.66rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-connect-card-cta { min-height: 32px !important; justify-self: start !important; padding: 0 10px !important; border: 1px solid rgba(255, 183, 96, 0.24) !important; border-radius: 10px !important; background: rgba(255, 183, 96, 0.09) !important; color: rgba(255, 226, 184, 0.94) !important; font: inherit !important; font-size: 0.68rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; cursor: default !important; } .member-connect-card-cta:hover, .member-connect-card-cta:focus-visible { outline: none !important; border-color: rgba(255, 183, 96, 0.34) !important; box-shadow: 0 0 0 3px rgba(255, 183, 96, 0.1) !important; } .member-connect-toggle { min-height: 30px !important; justify-self: stretch !important; padding: 0 10px !important; border: 1px solid rgba(60, 195, 191, 0.22) !important; border-radius: 10px !important; background: rgba(60, 195, 191, 0.07) !important; color: rgba(255, 248, 234, 0.9) !important; font: inherit !important; font-size: 0.68rem !important; font-weight: 920 !important; line-height: 1.1 !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-connect-toggle[hidden] { display: none !important; } .member-connect-toggle:hover, .member-connect-toggle:focus-visible { outline: none !important; border-color: rgba(60, 195, 191, 0.38) !important; box-shadow: 0 0 0 3px rgba(60, 195, 191, 0.1) !important; } .member-connect-rail-note, .member-premium-status { display: block !important; padding: 9px 10px !important; border: 1px solid rgba(255, 183, 96, 0.18) !important; border-radius: 13px !important; background: rgba(255, 183, 96, 0.065) !important; } .member-connect-player-list { display: grid !important; gap: 7px !important; min-width: 0 !important; } .member-connect-card { grid-template-columns: minmax(0, 1fr) auto !important; align-items: stretch !important; gap: 7px !important; min-height: 48px !important; padding: 6px !important; border-radius: 10px !important; background: linear-gradient(90deg, rgba(60, 195, 191, 0.05), transparent 46%), rgba(255, 244, 209, 0.032) !important; } .member-connect-card.is-selected { border-color: rgba(255, 122, 32, 0.54) !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.16), transparent 48%), rgba(255, 244, 209, 0.045) !important; box-shadow: 0 0 0 2px rgba(255, 122, 32, 0.11), inset 0 1px 0 rgba(255, 244, 209, 0.055) !important; } .member-connect-card.is-shortlisted { border-color: rgba(60, 195, 191, 0.38) !important; } .member-connect-row-button { min-width: 0 !important; width: 100% !important; min-height: 42px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px 7px !important; padding: 0 4px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: inherit !important; font: inherit !important; text-align: left !important; cursor: pointer !important; } .member-connect-row-button:hover, .member-connect-row-button:focus-visible { outline: none !important; background: rgba(255, 244, 209, 0.045) !important; box-shadow: 0 0 0 2px rgba(60, 195, 191, 0.12) !important; } .member-connect-row-button .member-connect-status { max-width: 86px !important; white-space: normal !important; overflow-wrap: anywhere !important; } .member-connect-row-player, .member-connect-row-fit, .member-connect-row-reason { min-width: 0 !important; } .member-connect-row-player { display: grid !important; gap: 2px !important; } .member-connect-row-player strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.82rem !important; font-weight: 940 !important; line-height: 1.05 !important; } .member-connect-row-player em, .member-connect-row-fit em, .member-connect-row-reason em { color: rgba(255, 226, 184, 0.78) !important; font-size: 0.62rem !important; font-style: normal !important; font-weight: 780 !important; line-height: 1.1 !important; } .member-connect-row-fit { min-width: 104px !important; display: inline-grid !important; justify-items: end !important; gap: 2px !important; padding: 5px 7px !important; border-radius: 10px !important; } .member-connect-row-fit strong { font-size: 0.68rem !important; line-height: 1.05 !important; text-align: right !important; } .member-connect-row-badge { display: none !important; } .member-connect-card.is-shortlisted .member-connect-row-badge { display: inline-flex !important; width: fit-content !important; align-items: center !important; padding: 3px 7px !important; border-radius: 999px !important; font-size: 0.58rem !important; font-weight: 920 !important; line-height: 1 !important; } .member-connect-card.is-shortlisted .member-connect-row-badge, .member-connect-shortlist-badge { border-color: rgba(60, 195, 191, 0.32) !important; background: rgba(60, 195, 191, 0.1) !important; color: rgba(255, 248, 234, 0.94) !important; } .member-connect-row-reason { grid-column: 1 / -1 !important; display: flex !important; align-items: baseline !important; gap: 5px !important; } .member-connect-row-reason strong { min-width: 0 !important; color: rgba(255, 248, 234, 0.9) !important; font-size: 0.66rem !important; font-weight: 820 !important; line-height: 1.14 !important; overflow-wrap: anywhere !important; } .member-connect-card > .member-connect-card-cta { align-self: center !important; justify-self: end !important; min-width: 92px !important; min-height: 34px !important; cursor: pointer !important; } .member-connect-card-cta.is-shortlisted { border-color: rgba(60, 195, 191, 0.36) !important; background: rgba(60, 195, 191, 0.1) !important; color: rgba(255, 248, 234, 0.96) !important; } .member-connect-profile .member-connect-card-cta { justify-self: start !important; cursor: pointer !important; } .member-connect-profile { display: grid !important; gap: 12px !important; margin-top: 4px !important; padding: 14px !important; border-radius: 13px !important; background: linear-gradient(180deg, rgba(255, 122, 32, 0.11), transparent 34%), rgba(255, 244, 209, 0.045) !important; } .member-connect-profile:focus { outline: none !important; } .member-connect-profile-head, .member-connect-profile-grid, .member-connect-profile-footer { min-width: 0 !important; display: grid !important; gap: 10px !important; } .member-connect-profile-head { grid-template-columns: minmax(0, 1fr) auto !important; align-items: start !important; } .member-connect-profile-head > div:first-child { display: grid !important; gap: 4px !important; } .member-connect-profile-head strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.12rem !important; font-weight: 950 !important; line-height: 1.04 !important; } .member-connect-profile-head em { color: rgba(255, 226, 184, 0.86) !important; font-size: 0.76rem !important; font-style: normal !important; font-weight: 780 !important; line-height: 1.2 !important; } .member-connect-profile-verdict { margin: 2px 0 0 !important; color: rgba(255, 248, 234, 0.94) !important; font-size: 0.82rem !important; font-weight: 880 !important; line-height: 1.22 !important; } .member-connect-profile-actions { display: flex !important; flex-wrap: wrap !important; justify-content: end !important; gap: 6px !important; } .member-connect-profile-grid { grid-template-columns: minmax(96px, 0.36fr) minmax(0, 1fr) !important; align-items: stretch !important; } .member-connect-profile-score { display: grid !important; align-content: center !important; justify-items: start !important; gap: 3px !important; padding: 10px !important; border-radius: 12px !important; } .member-connect-profile-score span { color: rgba(255, 183, 96, 0.96) !important; font-size: 0.64rem !important; font-weight: 940 !important; text-transform: uppercase !important; } .member-connect-profile-score strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.6rem !important; font-weight: 950 !important; line-height: 0.98 !important; } .member-connect-profile-score em, .member-connect-profile-copy span { color: rgba(255, 248, 234, 0.9) !important; font-size: 0.7rem !important; font-style: normal !important; font-weight: 900 !important; line-height: 1.1 !important; } .member-connect-profile-copy { display: grid !important; align-content: start !important; gap: 7px !important; padding: 10px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 12px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-connect-profile-footer { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; } .member-connect-shortlist-note { min-width: 0 !important; color: rgba(255, 226, 184, 0.82) !important; font-size: 0.68rem !important; font-weight: 780 !important; line-height: 1.2 !important; } .member-premium-grid { margin-top: 2px !important; } .member-premium-card { border-color: color-mix(in srgb, var(--club-status-gold, #e4c96c) 26%, rgba(255, 244, 209, 0.12)) !important; background: linear-gradient(180deg, rgba(228, 201, 108, 0.055), transparent 38%), linear-gradient(145deg, rgba(16, 24, 31, 0.86), rgba(8, 11, 17, 0.78)) !important; } .member-hub-eyebrow, .member-hub-card-label { margin: 0 !important; color: rgba(60, 195, 191, 0.92) !important; font-size: 0.72rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-eyebrow { margin-bottom: -4px !important; } .member-help-label { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; min-width: 0 !important; max-width: 100% !important; vertical-align: baseline !important; } .member-help-trigger { position: relative !important; z-index: 10 !important; flex: 0 0 auto !important; width: 20px !important; height: 20px !important; display: inline-grid !important; place-items: center !important; padding: 0 !important; border: 1px solid rgba(60, 195, 191, 0.42) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(16, 28, 35, 0.98), rgba(5, 9, 15, 0.98)) !important; color: rgba(255, 248, 234, 0.94) !important; font: inherit !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; cursor: help !important; box-shadow: 0 0 0 1px rgba(255, 244, 209, 0.07), 0 8px 18px rgba(0, 0, 0, 0.22) !important; } .member-help-trigger > span[aria-hidden="true"] { color: rgba(255, 248, 234, 0.95) !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; } .member-help-trigger.is-section-help { width: auto !important; min-width: 0 !important; height: 24px !important; padding: 0 9px !important; border-color: rgba(255, 244, 209, 0.2) !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.055) !important; color: rgba(255, 226, 184, 0.88) !important; cursor: help !important; box-shadow: none !important; } .member-help-trigger.is-section-help > span[aria-hidden="true"] { color: rgba(255, 226, 184, 0.88) !important; font-size: 0.64rem !important; font-weight: 900 !important; line-height: 1 !important; text-transform: uppercase !important; } .member-help-trigger:hover, .member-help-trigger:focus-visible, .member-help-trigger.is-open { border-color: rgba(255, 122, 32, 0.74) !important; background: rgba(18, 13, 8, 0.96) !important; color: var(--roar-text-strong, #fff8ea) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.15) !important; } .member-help-trigger.is-section-help:hover, .member-help-trigger.is-section-help:focus-visible, .member-help-trigger.is-section-help.is-open { border-color: rgba(255, 183, 96, 0.42) !important; background: rgba(255, 183, 96, 0.085) !important; color: rgba(255, 238, 211, 0.94) !important; box-shadow: 0 0 0 2px rgba(255, 183, 96, 0.1) !important; } .member-help-tooltip { position: absolute !important; right: -8px !important; top: calc(100% + 8px) !important; bottom: auto !important; z-index: 120 !important; width: min(260px, calc(100vw - 32px)) !important; display: grid !important; gap: 4px !important; padding: 9px 10px !important; border: 1px solid rgba(60, 195, 191, 0.46) !important; border-radius: 8px !important; background: #04070c !important; color: rgba(255, 238, 211, 0.92) !important; text-align: left !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-4px) !important; transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease !important; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 244, 209, 0.08) !important; } .member-help-trigger[data-help-type="popover"] .member-help-tooltip { width: min(300px, calc(100vw - 32px)) !important; } .member-help-trigger:hover .member-help-tooltip, .member-help-trigger:focus-visible .member-help-tooltip, .member-help-trigger.is-open .member-help-tooltip { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .member-help-tooltip::after { content: "" !important; position: absolute !important; right: 11px !important; top: -5px !important; bottom: auto !important; width: 9px !important; height: 9px !important; border-left: 1px solid rgba(60, 195, 191, 0.34) !important; border-top: 1px solid rgba(60, 195, 191, 0.34) !important; background: #04070c !important; transform: rotate(45deg) !important; } .member-help-tooltip, .member-help-tooltip *, .member-section-heading .member-help-tooltip, .member-section-heading .member-help-tooltip *, .member-connect-rail-head .member-help-tooltip, .member-connect-rail-head .member-help-tooltip *, .member-performance-grid .member-help-tooltip, .member-performance-grid .member-help-tooltip *, .member-club-toolbar .member-help-tooltip, .member-club-toolbar .member-help-tooltip * { text-transform: none !important; letter-spacing: 0 !important; } .member-help-tooltip strong { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: rgba(255, 248, 234, 0.98) !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1.08 !important; text-align: left !important; white-space: normal !important; box-shadow: none !important; } .member-help-tooltip span { display: block !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 226, 184, 0.9) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 760 !important; line-height: 1.24 !important; text-align: left !important; white-space: normal !important; } .member-hub-card:has(.member-help-trigger), .member-performance-snapshot:has(.member-help-trigger), .member-club-card:has(.member-help-trigger), .member-club-detail:has(.member-help-trigger), .member-review-weight-card:has(.member-help-trigger), .member-hub-collapsible:has(.member-help-trigger), .member-teammate-review-panel:has(.member-help-trigger) { overflow: visible !important; } .member-teammate-help-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: -2px 0 0 !important; color: rgba(255, 226, 184, 0.84) !important; font-size: 0.68rem !important; font-weight: 860 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } @media (max-width: 760px) { .member-help-tooltip { right: auto !important; left: 50% !important; width: min(248px, 76vw) !important; transform: translate(-50%, 4px) !important; } .member-help-trigger:hover .member-help-tooltip, .member-help-trigger:focus-visible .member-help-tooltip, .member-help-trigger.is-open .member-help-tooltip { transform: translate(-50%, 0) !important; } .member-help-tooltip::after { right: auto !important; left: calc(50% - 5px) !important; } } .member-hub-title { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.24rem, 1.65vw, 1.72rem) !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-shadow: var(--roar-start-logo-glow, var(--roar-soft-glow-muted)) !important; } .member-hub-tour { position: absolute !important; inset: 0 !important; z-index: 120 !important; display: grid !important; place-items: center !important; padding: 18px !important; border-radius: 22px !important; background: rgba(2, 4, 9, 0.72) !important; backdrop-filter: blur(10px) !important; } .member-hub-tour.hidden { display: none !important; } .member-hub-tour-panel { width: min(520px, 100%) !important; display: grid !important; gap: 13px !important; padding: 20px !important; border: 1px solid rgba(255, 244, 209, 0.16) !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(18, 27, 36, 0.98), rgba(5, 8, 14, 0.98)) !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 244, 209, 0.08) !important; } .member-hub-tour-head, .member-hub-tour-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; } .member-hub-tour-kicker { margin: 0 !important; color: rgba(60, 195, 191, 0.9) !important; font-size: 0.72rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-tour-panel h2 { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.35rem, 2.6vw, 2rem) !important; font-weight: 950 !important; line-height: 1.06 !important; letter-spacing: 0 !important; } .member-hub-tour-panel p { margin: 0 !important; color: rgba(255, 226, 184, 0.86) !important; font-size: 0.9rem !important; font-weight: 760 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .member-hub-tour-skip, .member-hub-tour-button { min-height: 34px !important; border-radius: 10px !important; font: inherit !important; font-size: 0.76rem !important; font-weight: 920 !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-hub-tour-skip, .member-hub-tour-button-secondary { padding: 0 10px !important; border: 1px solid rgba(255, 226, 184, 0.18) !important; background: rgba(255, 244, 209, 0.06) !important; color: rgba(255, 226, 184, 0.9) !important; } .member-hub-tour-button-primary { padding: 0 14px !important; border: 1px solid rgba(255, 244, 209, 0.22) !important; background: linear-gradient(180deg, rgba(255, 151, 48, 0.98), rgba(212, 83, 24, 0.96)) !important; color: #140b06 !important; } .member-hub-tour-skip:hover, .member-hub-tour-skip:focus-visible, .member-hub-tour-button:hover:not(:disabled), .member-hub-tour-button:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.16) !important; } .member-hub-tour-button:disabled { opacity: 0.45 !important; cursor: default !important; } .member-hub-statusline { width: fit-content !important; display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; margin: -3px 0 0 !important; padding: 5px 9px !important; border: 1px solid rgba(60, 195, 191, 0.32) !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.1) !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.68rem !important; font-weight: 850 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .member-hub-statusline span + span { color: var(--roar-text-soft, rgba(255, 244, 209, 0.78)) !important; font-weight: 760 !important; } .member-hub-intro { max-width: 68ch !important; margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(0.88rem, 0.96vw, 0.98rem) !important; font-weight: 850 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-hub-copy { max-width: 64ch !important; margin: -2px 0 0 !important; color: var(--roar-text-soft, rgba(255, 244, 209, 0.78)) !important; font-size: 0.8rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; } .member-hub-sections { display: grid !important; min-height: 0 !important; } .member-hub-section { display: grid !important; align-content: start !important; gap: 8px !important; min-height: 100% !important; } .member-hub-section.hidden { display: none !important; } .member-start-panel { display: grid !important; gap: 11px !important; padding: 14px !important; border: 1px solid rgba(255, 244, 209, 0.14) !important; border-radius: 12px !important; background: linear-gradient(145deg, rgba(16, 24, 33, 0.93), rgba(7, 11, 18, 0.9)) !important; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } .member-start-head { display: flex !important; align-items: start !important; justify-content: space-between !important; gap: 12px !important; } .member-start-head > div { display: grid !important; gap: 7px !important; min-width: 0 !important; } .member-start-head strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.16rem, 1.55vw, 1.48rem) !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-start-next { display: grid !important; gap: 9px !important; padding: 12px !important; border: 1px solid rgba(255, 122, 32, 0.38) !important; border-radius: 12px !important; background: rgba(255, 122, 32, 0.075) !important; } .member-start-next > strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(0.98rem, 1.1vw, 1.12rem) !important; font-weight: 930 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } .member-start-next ol { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .member-start-next li { min-height: 34px !important; display: flex !important; align-items: center !important; padding: 7px 9px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 11px !important; background: rgba(5, 9, 15, 0.36) !important; color: rgba(255, 226, 184, 0.88) !important; font-size: 0.72rem !important; font-weight: 830 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .member-start-status { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .member-hub-tour-replay { flex: 0 0 auto !important; } .member-hub-collapsible { display: grid !important; gap: 8px !important; padding: 11px !important; border: 1px solid rgba(255, 244, 209, 0.11) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-hub-collapsible summary { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 5px 9px !important; cursor: pointer !important; color: rgba(255, 226, 184, 0.92) !important; font-size: 0.76rem !important; font-weight: 920 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .member-hub-collapsible summary::-webkit-details-marker { display: none !important; } .member-hub-collapsible summary::marker { content: "" !important; } .member-hub-collapsible summary > span { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.82rem !important; font-weight: 940 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } .member-hub-collapsible summary > em { grid-column: 1 / -1 !important; max-width: 64ch !important; color: rgba(255, 226, 184, 0.72) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 730 !important; line-height: 1.26 !important; letter-spacing: 0 !important; } .member-hub-collapsible summary > strong { justify-self: end !important; } .member-hub-collapsible[open] summary { margin-bottom: 8px !important; } .member-hub-card-grid, .member-section-grid { display: grid !important; gap: 8px !important; } .member-hub-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-top: 4px !important; } .member-hub-card { position: relative !important; overflow: hidden !important; min-height: 82px !important; display: grid !important; align-content: space-between !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.13) !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(255, 244, 209, 0.055), transparent 34%), linear-gradient(145deg, rgba(17, 26, 36, 0.92), rgba(8, 12, 19, 0.86)) !important; box-shadow: 0 20px 46px rgba(2, 4, 10, 0.36), inset 0 1px 0 rgba(255, 244, 209, 0.055) !important; } .member-hub-card::after { content: "" !important; position: absolute !important; inset: auto 14px 10px 14px !important; height: 1px !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.6), transparent) !important; opacity: 0.55 !important; } .member-hub-card strong { max-width: 100% !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(0.86rem, 0.94vw, 0.98rem) !important; font-weight: 900 !important; line-height: 1.22 !important; letter-spacing: 0 !important; } .member-hub-card-status, .member-hub-card-profile { grid-column: span 1 !important; min-height: 72px !important; } .member-hub-card-status strong, .member-hub-card-profile strong { white-space: nowrap !important; } .member-hub-card-profile { border-color: rgba(60, 195, 191, 0.22) !important; } .member-hub-card-next { display: flex !important; flex-direction: column !important; grid-column: span 2 !important; gap: 8px !important; min-height: 132px !important; padding: 13px !important; border-color: rgba(255, 122, 32, 0.68) !important; background: radial-gradient(circle at 18% 18%, rgba(255, 122, 32, 0.22), transparent 34%), linear-gradient(145deg, rgba(36, 21, 12, 0.96), rgba(11, 15, 21, 0.9)) !important; box-shadow: 0 0 0 1px rgba(255, 184, 96, 0.08), 0 24px 62px rgba(255, 122, 32, 0.18), 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 244, 209, 0.1) !important; } .member-hub-card-next strong { max-width: 34ch !important; font-size: clamp(0.98rem, 1.16vw, 1.12rem) !important; } .member-hub-action-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin-top: auto !important; } .member-hub-primary-action, .member-hub-secondary-action { min-height: 34px !important; border-radius: 11px !important; font: inherit !important; font-size: 0.74rem !important; font-weight: 950 !important; line-height: 1.1 !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-hub-primary-action { padding: 0 13px !important; border: 1px solid rgba(255, 244, 209, 0.22) !important; background: linear-gradient(180deg, rgba(255, 151, 48, 0.98), rgba(212, 83, 24, 0.96)) !important; color: #140b06 !important; box-shadow: 0 12px 26px rgba(255, 122, 32, 0.22) !important; } .member-hub-secondary-action { padding: 0 10px !important; border: 1px solid rgba(255, 226, 184, 0.18) !important; background: rgba(255, 244, 209, 0.07) !important; color: rgba(255, 226, 184, 0.92) !important; } .member-hub-primary-action:hover, .member-hub-primary-action:focus-visible { transform: translateY(-1px) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.16), 0 15px 30px rgba(255, 122, 32, 0.28) !important; } .member-hub-secondary-action:hover, .member-hub-secondary-action:focus-visible { transform: translateY(-1px) !important; outline: none !important; border-color: rgba(60, 195, 191, 0.38) !important; box-shadow: 0 0 0 3px rgba(60, 195, 191, 0.12) !important; } .member-hub-action-row span, .member-hub-action-subtext { color: rgba(255, 226, 184, 0.86) !important; font-size: 0.7rem !important; font-weight: 760 !important; line-height: 1.25 !important; } .member-hub-action-subtext { max-width: 42ch !important; margin: -2px 0 0 !important; } .member-hub-progress { display: grid !important; grid-column: span 2 !important; gap: 7px !important; margin-top: 0 !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 15px !important; background: linear-gradient(90deg, rgba(60, 195, 191, 0.11), rgba(255, 122, 32, 0.07)), rgba(255, 244, 209, 0.045) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } .member-hub-progress h2 { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.72rem !important; font-weight: 950 !important; letter-spacing: 0 !important; } .member-hub-progress ol { display: grid !important; grid-template-columns: 1fr !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .member-hub-progress li { position: relative !important; min-height: 32px !important; padding: 7px 8px 7px 27px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 12px !important; background: rgba(5, 9, 15, 0.42) !important; color: rgba(255, 244, 209, 0.76) !important; font-size: 0.68rem !important; font-weight: 820 !important; line-height: 1.25 !important; } .member-hub-progress li::before { content: "" !important; position: absolute !important; left: 10px !important; top: 11px !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.32) !important; } .member-hub-progress li.is-active, .member-hub-progress li.is-review { border-color: rgba(60, 195, 191, 0.28) !important; color: rgba(255, 248, 234, 0.94) !important; background: rgba(60, 195, 191, 0.08) !important; } .member-hub-progress li.is-active::before, .member-hub-progress li.is-review::before { background: rgba(60, 195, 191, 0.95) !important; box-shadow: 0 0 0 4px rgba(60, 195, 191, 0.12) !important; } .member-hub-progress li.is-locked { border-color: rgba(255, 183, 96, 0.18) !important; background: rgba(255, 183, 96, 0.055) !important; } .member-section-heading { display: flex !important; flex-wrap: wrap !important; align-items: end !important; justify-content: space-between !important; gap: 8px !important; padding-bottom: 5px !important; border-bottom: 1px solid rgba(255, 244, 209, 0.1) !important; } .member-section-heading span { color: rgba(60, 195, 191, 0.95) !important; font-size: 0.72rem !important; font-weight: 950 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-section-heading strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(1.02rem, 1.45vw, 1.38rem) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-section-heading-actions { position: relative !important; display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; min-width: 0 !important; } .member-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-section-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .member-section-preview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .member-detail-card { min-height: 76px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 11px !important; } .member-preview-card { min-height: 68px !important; border-color: rgba(255, 183, 96, 0.18) !important; background: linear-gradient(180deg, rgba(255, 183, 96, 0.06), transparent 38%), linear-gradient(145deg, rgba(16, 24, 31, 0.86), rgba(8, 11, 17, 0.78)) !important; } .member-profile-groups { display: grid !important; gap: 8px !important; } .member-profile-group { display: grid !important; gap: 7px !important; padding: 10px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-profile-group h2 { margin: 0 !important; color: rgba(60, 195, 191, 0.92) !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-primary { gap: 10px !important; } .member-profile-overview { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; align-items: start !important; padding: 12px !important; border: 1px solid rgba(60, 195, 191, 0.24) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.08), transparent 58%), rgba(255, 244, 209, 0.035) !important; } .member-profile-identity { min-width: 0 !important; display: grid !important; gap: 5px !important; } .member-profile-identity span, .member-profile-open-head p, .member-open-field-list span, .member-access-head p, .member-access-statusline em, .member-access-detail-list span { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.64rem !important; font-style: normal !important; font-weight: 900 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-identity strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.34rem !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-profile-identity p, .member-open-field-list p, .member-access-head p { max-width: 56ch !important; margin: 0 !important; color: rgba(255, 226, 184, 0.78) !important; font-size: 0.74rem !important; font-weight: 740 !important; line-height: 1.28 !important; letter-spacing: 0 !important; text-transform: none !important; } .member-profile-badges { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 6px !important; max-width: 260px !important; } .member-profile-setup { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .member-profile-setup li, .member-access-statusline span, .member-access-detail-list li { min-width: 0 !important; display: grid !important; gap: 4px !important; padding: 8px 9px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 10px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-profile-setup li.is-active { border-color: rgba(84, 200, 160, 0.28) !important; background: rgba(84, 200, 160, 0.07) !important; } .member-profile-setup li.is-review { border-color: rgba(255, 183, 96, 0.25) !important; background: rgba(255, 183, 96, 0.065) !important; } .member-profile-setup span { color: rgba(255, 226, 184, 0.7) !important; font-size: 0.61rem !important; font-weight: 860 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-setup strong, .member-open-field-list strong, .member-access-statusline strong, .member-access-detail-list strong { overflow-wrap: anywhere !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.77rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .member-profile-open-fields, .member-access-panel { display: grid !important; gap: 8px !important; padding: 11px !important; border: 1px solid rgba(255, 183, 96, 0.16) !important; border-radius: 14px !important; background: rgba(255, 183, 96, 0.045) !important; } .member-profile-open-head, .member-access-head { display: flex !important; flex-wrap: wrap !important; align-items: start !important; justify-content: space-between !important; gap: 8px !important; } .member-profile-open-head h2, .member-access-head h2 { margin: 0 !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.84rem !important; font-weight: 940 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-transform: none !important; } .member-open-field-list, .member-access-detail-list { display: grid !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } .member-open-field-list li { min-width: 0 !important; display: grid !important; grid-template-columns: minmax(110px, 0.24fr) minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center !important; padding: 8px 9px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 10px !important; background: rgba(9, 14, 21, 0.36) !important; } .member-open-field-list details { justify-self: end !important; } .member-open-field-list details summary { cursor: pointer !important; color: rgba(255, 226, 184, 0.78) !important; font-size: 0.66rem !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .member-open-field-list details[open] { grid-column: 1 / -1 !important; justify-self: stretch !important; } .member-access-statusline { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .member-access-details { padding: 9px !important; background: rgba(9, 14, 21, 0.28) !important; } .member-access-detail-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .member-chip-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 7px !important; } .member-info-chip { min-height: 48px !important; display: grid !important; align-content: center !important; gap: 4px !important; padding: 8px 9px !important; border: 1px solid rgba(255, 183, 96, 0.18) !important; border-radius: 12px !important; background: rgba(255, 183, 96, 0.06) !important; } .member-info-chip span { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.62rem !important; font-weight: 900 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-info-chip strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.76rem !important; font-weight: 900 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-section-note, .member-locked-copy { max-width: none !important; margin: 0 !important; color: rgba(255, 238, 211, 0.9) !important; font-size: 0.78rem !important; font-weight: 760 !important; line-height: 1.3 !important; letter-spacing: 0 !important; } .member-section-note { padding: 9px 11px !important; border: 1px solid rgba(60, 195, 191, 0.18) !important; border-radius: 14px !important; background: rgba(60, 195, 191, 0.055) !important; } .member-section-note-compact { padding: 8px 10px !important; } .member-performance-snapshot { --member-performance-tone: #d6b65d; --member-performance-wash: rgba(214, 182, 93, 0.08); position: relative !important; overflow: hidden !important; display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(180px, 0.36fr) !important; gap: 8px !important; padding: 12px !important; border: 1px solid color-mix(in srgb, var(--member-performance-tone) 46%, rgba(255, 244, 209, 0.12)) !important; border-radius: 16px !important; background: radial-gradient(circle at 94% 14%, var(--member-performance-wash), transparent 42%), linear-gradient(145deg, rgba(16, 24, 33, 0.9), rgba(7, 11, 18, 0.86)) !important; box-shadow: 0 16px 36px rgba(2, 4, 10, 0.3), 0 0 20px color-mix(in srgb, var(--member-performance-tone) 12%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } .member-performance-snapshot::before { content: "" !important; position: absolute !important; inset: 0 0 auto 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--member-performance-tone), transparent 84%) !important; } .member-performance-tone-critical { --member-performance-tone: #d94a3a; --member-performance-wash: rgba(217, 74, 58, 0.09); } .member-performance-tone-weak { --member-performance-tone: #e07a38; --member-performance-wash: rgba(224, 122, 56, 0.085); } .member-performance-tone-neutral { --member-performance-tone: #d6b65d; --member-performance-wash: rgba(214, 182, 93, 0.08); } .member-performance-tone-stable { --member-performance-tone: #54c8a0; --member-performance-wash: rgba(84, 200, 160, 0.08); } .member-performance-tone-strong { --member-performance-tone: #35cbbd; --member-performance-wash: rgba(53, 203, 189, 0.08); } .member-performance-tone-peak { --member-performance-tone: #89e86a; --member-performance-wash: rgba(137, 232, 106, 0.08); } .member-performance-snapshot-head, .member-performance-grid { min-width: 0 !important; } .member-performance-snapshot-head { display: grid !important; gap: 5px !important; align-content: start !important; } .member-performance-snapshot-head span, .member-performance-grid em { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.6rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-performance-snapshot-head strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.08rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-performance-snapshot-head em { max-width: 42ch !important; color: rgba(255, 226, 184, 0.86) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 850 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-performance-score { display: grid !important; align-content: center !important; justify-items: end !important; gap: 4px !important; padding: 9px !important; border: 1px solid color-mix(in srgb, var(--member-performance-tone) 35%, rgba(255, 244, 209, 0.12)) !important; border-radius: 13px !important; background: color-mix(in srgb, var(--member-performance-tone) 9%, rgba(255, 244, 209, 0.035)) !important; text-align: right !important; } .member-performance-score span, .member-performance-score em { color: rgba(255, 226, 184, 0.84) !important; font-size: 0.64rem !important; font-style: normal !important; font-weight: 860 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-performance-score strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.48rem !important; font-weight: 950 !important; line-height: 0.9 !important; letter-spacing: 0 !important; } .member-performance-grid { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .member-performance-grid span { min-width: 0 !important; min-height: 44px !important; display: grid !important; align-content: start !important; gap: 3px !important; padding: 7px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 11px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-performance-grid strong { color: rgba(255, 248, 234, 0.92) !important; font-size: 0.64rem !important; font-weight: 860 !important; line-height: 1.14 !important; letter-spacing: 0 !important; } .member-performance-snapshot p { grid-column: 1 / -1 !important; margin: 0 !important; padding: 8px 9px !important; border: 1px solid color-mix(in srgb, var(--member-performance-tone) 26%, rgba(255, 244, 209, 0.1)) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--member-performance-tone) 8%, rgba(255, 244, 209, 0.035)) !important; color: rgba(255, 248, 234, 0.92) !important; font-size: 0.72rem !important; font-weight: 850 !important; line-height: 1.18 !important; letter-spacing: 0 !important; } .member-performance-review-hint { color: rgba(255, 226, 184, 0.86) !important; } .member-performance-snapshot.is-loading, .member-performance-snapshot.is-empty { grid-template-columns: 1fr !important; } .member-snapshot-meta-grid, .member-snapshot-metric-grid, .member-snapshot-request-row { grid-column: 1 / -1 !important; min-width: 0 !important; } .member-snapshot-meta-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .member-snapshot-metric-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; } .member-snapshot-metric-card { min-width: 0 !important; display: grid !important; align-content: start !important; gap: 7px !important; padding: 9px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 11px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-snapshot-metric-card.is-good { border-color: rgba(84, 200, 160, 0.24) !important; } .member-snapshot-metric-card.is-review { border-color: rgba(214, 182, 93, 0.24) !important; } .member-snapshot-metric-card.is-warning { border-color: rgba(224, 122, 56, 0.28) !important; } .member-snapshot-metric-card div:first-child { min-width: 0 !important; display: grid !important; gap: 4px !important; } .member-snapshot-metric-card span { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.58rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-snapshot-metric-card strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 1rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-snapshot-metric-card em { color: rgba(255, 226, 184, 0.82) !important; font-size: 0.62rem !important; font-style: normal !important; font-weight: 820 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-snapshot-metric-card p { padding: 0 !important; border: 0 !important; background: transparent !important; color: rgba(255, 238, 211, 0.82) !important; font-size: 0.64rem !important; font-weight: 760 !important; line-height: 1.2 !important; } .member-snapshot-meter { height: 5px !important; overflow: hidden !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.09) !important; } .member-snapshot-meter span { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, var(--member-performance-tone), rgba(60, 195, 191, 0.78)) !important; } .member-snapshot-request-row { display: grid !important; grid-template-columns: minmax(170px, max-content) minmax(0, 1fr) !important; align-items: center !important; gap: 10px !important; } .member-snapshot-request-row span { color: rgba(255, 226, 184, 0.86) !important; font-size: 0.72rem !important; font-weight: 820 !important; line-height: 1.2 !important; } .member-performance-status-grid { margin-top: 0 !important; } .member-club-toolbar { display: grid !important; grid-template-columns: auto minmax(280px, 1fr) auto !important; align-items: center !important; gap: 7px !important; padding: 7px 9px !important; border: 1px solid rgba(255, 244, 209, 0.11) !important; border-radius: 14px !important; background: rgba(5, 9, 15, 0.42) !important; } .member-club-toolbar > span, .member-club-toolbar > strong { color: rgba(255, 238, 211, 0.9) !important; font-size: 0.7rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .member-club-toolbar > span { color: rgba(60, 195, 191, 0.94) !important; text-transform: uppercase !important; } .member-club-toolbar > strong { justify-self: end !important; color: rgba(255, 226, 184, 0.88) !important; } .member-club-window-options { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 5px !important; } .member-club-window-button { min-height: 30px !important; padding: 0 8px !important; border: 1px solid rgba(255, 244, 209, 0.13) !important; border-radius: 10px !important; background: rgba(255, 244, 209, 0.045) !important; color: rgba(255, 248, 234, 0.82) !important; font: inherit !important; font-size: 0.72rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-club-window-button.is-active, .member-club-window-button:hover, .member-club-window-button:focus-visible { border-color: rgba(255, 122, 32, 0.58) !important; background: linear-gradient(180deg, rgba(255, 122, 32, 0.22), rgba(8, 11, 16, 0.72)) !important; color: var(--roar-text-strong, #fff8ea) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.12) !important; } .member-club-layout { display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(286px, 0.92fr) !important; gap: 8px !important; align-items: stretch !important; } .member-club-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } .member-club-card { position: relative !important; overflow: hidden !important; min-height: 138px !important; display: grid !important; gap: 6px !important; padding: 9px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 15px !important; background: linear-gradient(180deg, rgba(255, 244, 209, 0.045), transparent 34%), linear-gradient(145deg, rgba(17, 26, 36, 0.91), rgba(8, 12, 19, 0.84)) !important; box-shadow: 0 18px 40px rgba(2, 4, 10, 0.34), inset 0 1px 0 rgba(255, 244, 209, 0.055) !important; } .member-club-card::before { content: "" !important; position: absolute !important; inset: 0 auto 0 0 !important; width: 4px !important; background: var(--member-form-tone, rgba(60, 195, 191, 0.9)) !important; } .member-club-card[data-form-tone="critical"] { --member-form-tone: #d94a3a; } .member-club-card[data-form-tone="weak"] { --member-form-tone: #e07a38; } .member-club-card[data-form-tone="neutral"] { --member-form-tone: #d6b65d; } .member-club-card[data-form-tone="stable"] { --member-form-tone: #54c8a0; } .member-club-card[data-form-tone="strong"] { --member-form-tone: #35cbbd; } .member-club-card[data-form-tone="peak"] { --member-form-tone: #89e86a; } .member-club-card.is-selected { border-color: color-mix(in srgb, var(--member-form-tone, #54c8a0) 68%, rgba(255, 244, 209, 0.2)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--member-form-tone, #54c8a0) 14%, transparent), transparent 36%), linear-gradient(145deg, rgba(18, 28, 39, 0.96), rgba(8, 12, 19, 0.9)) !important; box-shadow: 0 20px 44px rgba(2, 4, 10, 0.38), 0 0 0 3px color-mix(in srgb, var(--member-form-tone, #54c8a0) 18%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.08) !important; } .member-club-card-topline, .member-club-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .member-club-name { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.9rem !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-club-tone { padding: 4px 7px !important; border: 1px solid var(--member-form-tone, #54c8a0) !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.06) !important; color: rgba(255, 248, 234, 0.94) !important; font-size: 0.64rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-club-role, .member-club-meta { color: rgba(255, 226, 184, 0.78) !important; font-size: 0.67rem !important; font-weight: 780 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .member-club-role { display: grid !important; gap: 2px !important; } .member-club-role em { color: rgba(255, 226, 184, 0.62) !important; font-size: 0.58rem !important; font-style: normal !important; font-weight: 760 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .member-club-signal { min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .member-club-form-score { display: inline-flex !important; align-items: baseline !important; gap: 6px !important; } .member-club-form-score em { color: rgba(255, 226, 184, 0.8) !important; font-size: 0.56rem !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-club-form-score strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-club-window-chip { color: rgba(255, 226, 184, 0.78) !important; } .member-club-trust { min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; } .member-club-trust-head { display: contents !important; } .member-club-trust-head span { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.52rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-club-trust-head strong { min-width: 0 !important; color: rgba(255, 248, 234, 0.95) !important; font-size: 0.62rem !important; font-weight: 930 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-align: left !important; } .member-club-trust-weight { color: rgba(255, 226, 184, 0.76) !important; font-size: 0.58rem !important; font-weight: 780 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-trust-source-label { margin: 0 !important; color: rgba(255, 226, 184, 0.58) !important; font-size: 0.52rem !important; font-weight: 820 !important; line-height: 1.05 !important; letter-spacing: 0 !important; } .member-club-trust-badges { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } .member-club-trust-badge { max-width: 100% !important; padding: 3px 5px !important; border: 1px solid rgba(137, 232, 106, 0.2) !important; border-radius: 8px !important; background: rgba(137, 232, 106, 0.08) !important; color: rgba(255, 248, 234, 0.9) !important; font-size: 0.56rem !important; font-weight: 880 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-club-trust-marker { padding: 4px 5px !important; border: 1px solid rgba(255, 183, 96, 0.3) !important; border-radius: 8px !important; background: rgba(255, 183, 96, 0.08) !important; color: rgba(255, 226, 184, 0.92) !important; font-size: 0.57rem !important; font-weight: 860 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-club-formbar { overflow: hidden !important; height: 6px !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(217, 74, 58, 0.36), rgba(214, 182, 93, 0.3), rgba(84, 200, 160, 0.32), rgba(137, 232, 106, 0.32)) !important; } .member-club-formbar span { display: block !important; width: 0; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(217, 74, 58, 0.95), rgba(224, 122, 56, 0.96), rgba(214, 182, 93, 0.98), rgba(84, 200, 160, 0.98), rgba(137, 232, 106, 0.98)) !important; box-shadow: 0 0 18px var(--member-form-tone, rgba(84, 200, 160, 0.42)) !important; } .member-club-field-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 3px !important; } .member-club-field-grid span { min-height: 24px !important; display: grid !important; grid-template-columns: 76px minmax(0, 1fr) !important; align-items: center !important; gap: 6px !important; padding: 4px 5px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 8px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-club-field-grid em { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.52rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-club-field-grid strong { color: rgba(255, 248, 234, 0.92) !important; font-size: 0.59rem !important; font-weight: 860 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-club-profile-action { justify-self: start !important; min-height: 24px !important; padding: 0 9px !important; border: 1px solid rgba(255, 244, 209, 0.18) !important; border-radius: 10px !important; background: rgba(255, 244, 209, 0.07) !important; color: rgba(255, 226, 184, 0.94) !important; font: inherit !important; font-size: 0.68rem !important; font-weight: 920 !important; line-height: 1 !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-club-profile-action:hover, .member-club-profile-action:focus-visible { border-color: rgba(60, 195, 191, 0.38) !important; color: var(--roar-text-strong, #fff8ea) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(60, 195, 191, 0.12) !important; } .member-club-detail { --member-detail-tone: rgba(60, 195, 191, 0.9); --member-detail-wash: rgba(60, 195, 191, 0.075); position: relative !important; overflow: hidden auto !important; min-height: 244px !important; max-height: 100% !important; display: grid !important; align-content: start !important; gap: 7px !important; padding: 10px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 52%, rgba(255, 244, 209, 0.12)) !important; border-radius: 16px !important; background: radial-gradient(circle at 94% 10%, var(--member-detail-wash), transparent 42%), linear-gradient(145deg, rgba(16, 24, 33, 0.92), rgba(7, 11, 18, 0.88)) !important; box-shadow: 0 18px 40px rgba(2, 4, 10, 0.34), 0 0 22px color-mix(in srgb, var(--member-detail-tone) 14%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; outline: none !important; } .member-club-detail::before { content: "" !important; position: absolute !important; inset: 0 0 auto 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--member-detail-tone), transparent 84%) !important; } .member-detail-tone-critical { --member-detail-tone: #d94a3a; --member-detail-wash: rgba(217, 74, 58, 0.095); } .member-detail-tone-weak { --member-detail-tone: #e07a38; --member-detail-wash: rgba(224, 122, 56, 0.09); } .member-detail-tone-neutral { --member-detail-tone: #d6b65d; --member-detail-wash: rgba(214, 182, 93, 0.085); } .member-detail-tone-stable { --member-detail-tone: #54c8a0; --member-detail-wash: rgba(84, 200, 160, 0.08); } .member-detail-tone-strong { --member-detail-tone: #35cbbd; --member-detail-wash: rgba(53, 203, 189, 0.085); } .member-detail-tone-peak { --member-detail-tone: #89e86a; --member-detail-wash: rgba(137, 232, 106, 0.085); } .member-profile-quicklook { position: relative !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(178px, 0.62fr) !important; gap: 8px !important; padding: 11px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 42%, rgba(255, 244, 209, 0.12)) !important; border-radius: 14px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--member-detail-tone) 10%, transparent), transparent 58%), rgba(255, 244, 209, 0.035) !important; } .member-profile-quicklook-main, .member-profile-quicklook-focus, .member-profile-quicklook-warning { min-width: 0 !important; } .member-profile-quicklook-main { display: grid !important; gap: 5px !important; } .member-profile-quicklook-main > span, .member-profile-quicklook-focus span, .member-profile-detail-group summary, .member-profile-extra-grid em, .member-profile-status-hint em { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.56rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-quicklook-main > strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.34rem !important; font-weight: 950 !important; line-height: 0.95 !important; letter-spacing: 0 !important; } .member-profile-quicklook-main p { min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; } .member-profile-quicklook-main p span { max-width: 100% !important; overflow-wrap: anywhere !important; color: rgba(255, 226, 184, 0.82) !important; font-size: 0.66rem !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .member-profile-quicklook-chips { min-width: 0 !important; display: flex !important; flex-wrap: wrap !important; align-content: start !important; justify-content: end !important; gap: 5px !important; } .member-profile-quicklook-focus { grid-column: 1 / -1 !important; display: grid !important; gap: 4px !important; padding: 8px 9px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 30%, rgba(255, 244, 209, 0.1)) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--member-detail-tone) 8%, rgba(255, 244, 209, 0.035)) !important; } .member-profile-quicklook-focus strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 0.82rem !important; font-weight: 930 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } .member-profile-quicklook-warning { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; gap: 5px !important; } .member-profile-group-grid { min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; } .member-profile-detail-group { min-width: 0 !important; display: grid !important; align-content: start !important; gap: 7px !important; padding: 8px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 22%, rgba(255, 244, 209, 0.1)) !important; border-radius: 13px !important; background: rgba(255, 244, 209, 0.032) !important; } .member-profile-trust-block, .member-profile-status-group { grid-column: 1 / -1 !important; } .member-profile-detail-group .member-profile-bridge-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-profile-wide-field, .member-profile-trust-summary { grid-column: 1 / -1 !important; } .member-profile-status-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .member-profile-status-hint { min-width: min(100%, 148px) !important; flex: 1 1 148px !important; display: grid !important; gap: 3px !important; white-space: normal !important; } .member-profile-status-hint strong { overflow-wrap: anywhere !important; } .member-profile-status-hint em { color: rgba(255, 226, 184, 0.78) !important; text-transform: none !important; } .member-profile-extra-details { min-width: 0 !important; display: grid !important; gap: 6px !important; } .member-profile-extra-details summary { width: fit-content !important; max-width: 100% !important; cursor: pointer !important; list-style-position: inside !important; color: rgba(255, 226, 184, 0.82) !important; } .member-profile-extra-details[open] { padding-top: 3px !important; } .member-profile-extra-grid { min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; } .member-profile-extra-grid span { min-width: 0 !important; display: grid !important; gap: 3px !important; padding: 5px 6px !important; border-radius: 9px !important; background: rgba(255, 244, 209, 0.032) !important; } .member-profile-extra-grid strong { color: rgba(255, 248, 234, 0.9) !important; font-size: 0.6rem !important; font-weight: 840 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-profile-open-review { padding: 6px 7px !important; border: 1px solid rgba(255, 183, 96, 0.24) !important; border-radius: 10px !important; background: rgba(255, 183, 96, 0.075) !important; } .member-club-detail-empty { min-height: 210px !important; display: grid !important; align-content: center !important; gap: 8px !important; padding: 12px !important; border: 1px dashed rgba(255, 244, 209, 0.14) !important; border-radius: 14px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-club-detail-empty span, .member-club-detail-head > span { color: rgba(60, 195, 191, 0.92) !important; font-size: 0.62rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-club-detail-empty strong { max-width: 30ch !important; color: rgba(255, 238, 211, 0.88) !important; font-size: 0.82rem !important; font-weight: 850 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-club-detail-head { display: grid !important; gap: 5px !important; } .member-club-detail-head > strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.08rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-club-detail-head p { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; } .member-club-detail-head p span, .member-club-detail-score span, .member-club-detail-score em { color: rgba(255, 226, 184, 0.84) !important; font-size: 0.66rem !important; font-style: normal !important; font-weight: 860 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-club-detail-score { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: end !important; gap: 8px !important; padding: 8px 9px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 38%, rgba(255, 244, 209, 0.1)) !important; border-radius: 13px !important; background: color-mix(in srgb, var(--member-detail-tone) 9%, rgba(255, 244, 209, 0.035)) !important; } .member-club-detail-score strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 1.32rem !important; font-weight: 950 !important; line-height: 0.9 !important; letter-spacing: 0 !important; } .member-club-detail-score em { color: var(--roar-text-strong, #fff8ea) !important; } .member-club-detail-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .member-club-detail-grid span { min-height: 46px !important; display: grid !important; align-content: start !important; gap: 3px !important; padding: 7px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 11px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-club-detail-grid em { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.56rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-club-detail-grid strong { color: rgba(255, 248, 234, 0.92) !important; font-size: 0.64rem !important; font-weight: 860 !important; line-height: 1.14 !important; letter-spacing: 0 !important; } .member-club-detail-focus { grid-column: 1 / -1 !important; border-color: color-mix(in srgb, var(--member-detail-tone) 28%, rgba(255, 244, 209, 0.1)) !important; background: color-mix(in srgb, var(--member-detail-tone) 8%, rgba(255, 244, 209, 0.035)) !important; } .member-profile-bridge-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .member-profile-bridge-block { min-width: 0 !important; display: grid !important; align-content: start !important; gap: 6px !important; padding: 7px 0 0 !important; border-top: 1px solid color-mix(in srgb, var(--member-detail-tone) 26%, rgba(255, 244, 209, 0.12)) !important; } .member-profile-bridge-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .member-profile-bridge-head span, .member-profile-bridge-values em { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.52rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-bridge-head strong { padding: 3px 6px !important; border: 1px solid color-mix(in srgb, var(--member-detail-tone) 35%, rgba(255, 244, 209, 0.14)) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--member-detail-tone) 10%, rgba(255, 244, 209, 0.035)) !important; color: rgba(255, 248, 234, 0.9) !important; font-size: 0.55rem !important; font-weight: 920 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: right !important; } .member-profile-bridge-values { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; } .member-profile-bridge-values span { min-width: 0 !important; min-height: 34px !important; display: grid !important; align-content: start !important; gap: 3px !important; padding: 5px 6px !important; border-radius: 9px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-profile-bridge-values strong, .member-profile-bridge-note { color: rgba(255, 248, 234, 0.91) !important; font-size: 0.6rem !important; font-weight: 850 !important; line-height: 1.1 !important; letter-spacing: 0 !important; } .member-profile-bridge-note { margin: 0 !important; color: rgba(255, 226, 184, 0.8) !important; } .member-profile-trust-block { grid-column: 1 / -1 !important; } .member-profile-trust-head strong { border-color: rgba(137, 232, 106, 0.3) !important; background: rgba(137, 232, 106, 0.1) !important; } .member-profile-trust-values { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-profile-trust-summary { grid-column: span 2 !important; } .member-profile-trust-section { display: grid !important; gap: 5px !important; } .member-profile-trust-section > span { color: rgba(60, 195, 191, 0.88) !important; font-size: 0.52rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-profile-trust-badges, .member-profile-trust-markers { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; } .member-profile-trust-badge, .member-profile-trust-marker { min-width: min(100%, 112px) !important; flex: 1 1 112px !important; display: grid !important; gap: 3px !important; padding: 5px 6px !important; border-radius: 10px !important; } .member-profile-trust-badge { border: 1px solid rgba(137, 232, 106, 0.22) !important; background: rgba(137, 232, 106, 0.075) !important; } .member-profile-trust-marker { border: 1px solid rgba(255, 183, 96, 0.28) !important; background: rgba(255, 183, 96, 0.075) !important; } .member-profile-trust-badge strong, .member-profile-trust-marker strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 0.61rem !important; font-weight: 920 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-profile-trust-badge em, .member-profile-trust-marker em { color: rgba(255, 226, 184, 0.78) !important; font-size: 0.55rem !important; font-style: normal !important; font-weight: 760 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-profile-trust-badge em { display: none !important; } .member-hub-locked-section { min-height: 0 !important; display: grid !important; align-self: start !important; align-content: start !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(255, 183, 96, 0.18) !important; border-radius: 22px !important; background: radial-gradient(circle at 22% 16%, rgba(255, 122, 32, 0.16), transparent 36%), linear-gradient(145deg, rgba(20, 24, 32, 0.72), rgba(7, 10, 16, 0.78)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } .member-locked-status { width: fit-content !important; padding: 6px 9px !important; border: 1px solid rgba(255, 183, 96, 0.26) !important; border-radius: 999px !important; background: rgba(255, 183, 96, 0.09) !important; color: rgba(255, 226, 184, 0.94) !important; font-size: 0.68rem !important; font-weight: 900 !important; letter-spacing: 0 !important; } .member-hub-notice { min-height: 32px !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 10px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 13px !important; background: rgba(255, 244, 209, 0.045) !important; color: rgba(255, 214, 154, 0.9) !important; font-size: 0.74rem !important; font-weight: 780 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .member-review-gate-active .member-hub-content { overflow: auto !important; } .member-teammate-review-panel { display: grid !important; gap: 8px !important; margin-top: 0 !important; } .member-teammate-review-gate, .member-teammate-review-form { position: relative !important; overflow: hidden !important; display: grid !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(255, 183, 96, 0.24) !important; border-radius: 16px !important; background: radial-gradient(circle at 94% 12%, rgba(255, 122, 32, 0.14), transparent 38%), linear-gradient(145deg, rgba(21, 24, 31, 0.88), rgba(8, 11, 17, 0.82)) !important; box-shadow: 0 18px 38px rgba(2, 4, 10, 0.3), inset 0 1px 0 rgba(255, 244, 209, 0.06) !important; } .member-teammate-review-gate.is-complete { border-color: rgba(60, 195, 191, 0.34) !important; background: radial-gradient(circle at 92% 10%, rgba(60, 195, 191, 0.14), transparent 40%), linear-gradient(145deg, rgba(16, 27, 31, 0.9), rgba(7, 11, 18, 0.84)) !important; } .member-teammate-review-gate.is-complete > div { display: grid !important; gap: 4px !important; } .member-teammate-review-gate-copy, .member-teammate-review-form-head { display: grid !important; gap: 4px !important; } .member-teammate-review-gate-copy span, .member-teammate-review-form-head span, .member-teammate-impact-block > span, .member-teammate-comment span { color: rgba(60, 195, 191, 0.94) !important; font-size: 0.64rem !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-teammate-review-gate-copy strong, .member-teammate-review-form-head strong, .member-teammate-review-gate.is-complete strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: clamp(0.96rem, 1.1vw, 1.1rem) !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-teammate-review-gate-copy p, .member-teammate-review-gate-copy em, .member-teammate-review-form-head p, .member-teammate-review-help, .member-teammate-review-gate.is-complete p, .member-teammate-review-actions span { margin: 0 !important; color: rgba(255, 226, 184, 0.86) !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 760 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-review-weight-card { display: grid !important; gap: 8px !important; padding: 10px !important; border: 1px solid rgba(60, 195, 191, 0.28) !important; border-radius: 12px !important; background: linear-gradient(145deg, rgba(60, 195, 191, 0.1), rgba(5, 9, 15, 0.34)), rgba(255, 244, 209, 0.035) !important; } .member-review-weight-card.is-compact { gap: 7px !important; padding: 9px !important; } .member-review-weight-card.is-negative-context { border-color: rgba(255, 183, 96, 0.36) !important; background: linear-gradient(145deg, rgba(255, 183, 96, 0.1), rgba(5, 9, 15, 0.34)), rgba(255, 244, 209, 0.035) !important; } .member-review-weight-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .member-review-weight-head span, .member-review-weight-values em { color: rgba(60, 195, 191, 0.94) !important; font-size: 0.62rem !important; font-style: normal !important; font-weight: 950 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-review-weight-head strong { padding: 4px 7px !important; border: 1px solid rgba(255, 122, 32, 0.34) !important; border-radius: 999px !important; background: rgba(255, 122, 32, 0.1) !important; color: rgba(255, 226, 184, 0.96) !important; font-size: 0.66rem !important; font-weight: 940 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } .member-review-weight-values { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .member-review-weight-values span { display: grid !important; gap: 3px !important; min-width: 0 !important; padding: 7px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 10px !important; background: rgba(5, 9, 15, 0.32) !important; } .member-review-weight-values strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.72rem !important; font-weight: 920 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-review-weight-card p, .member-review-weight-card small, .member-review-weight-help li { margin: 0 !important; color: rgba(255, 226, 184, 0.84) !important; font-size: 0.68rem !important; font-weight: 760 !important; line-height: 1.26 !important; letter-spacing: 0 !important; } .member-review-weight-card small { color: rgba(255, 226, 184, 0.68) !important; } .member-review-weight-modifiers, .member-review-weight-help { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .member-review-weight-modifiers span, .member-review-weight-help li { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 7px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.055) !important; } .member-review-weight-modifiers strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.66rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-review-weight-warning { padding: 8px 9px !important; border: 1px solid rgba(255, 183, 96, 0.28) !important; border-radius: 10px !important; background: rgba(255, 183, 96, 0.08) !important; color: rgba(255, 226, 184, 0.94) !important; font-weight: 820 !important; } .member-teammate-review-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .member-teammate-review-item { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-height: 62px !important; padding: 8px !important; border: 1px solid rgba(255, 244, 209, 0.11) !important; border-radius: 13px !important; background: rgba(5, 9, 15, 0.36) !important; } .member-teammate-review-item div { display: grid !important; gap: 3px !important; } .member-teammate-review-item span { width: fit-content !important; padding: 3px 6px !important; border: 1px solid rgba(255, 122, 32, 0.36) !important; border-radius: 999px !important; background: rgba(255, 122, 32, 0.1) !important; color: rgba(255, 226, 184, 0.94) !important; font-size: 0.58rem !important; font-weight: 920 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-teammate-review-item strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.84rem !important; font-weight: 940 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-teammate-review-item em { color: rgba(255, 226, 184, 0.76) !important; font-size: 0.64rem !important; font-style: normal !important; font-weight: 760 !important; line-height: 1.18 !important; letter-spacing: 0 !important; } .member-teammate-review-cta, .member-teammate-submit, .member-teammate-segment button, .member-teammate-chip { font: inherit !important; letter-spacing: 0 !important; cursor: pointer !important; } .member-teammate-review-cta, .member-teammate-submit { min-height: 32px !important; padding: 0 11px !important; border: 1px solid rgba(255, 244, 209, 0.22) !important; border-radius: 11px !important; background: linear-gradient(180deg, rgba(255, 151, 48, 0.98), rgba(212, 83, 24, 0.96)) !important; color: #140b06 !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1.1 !important; white-space: nowrap !important; box-shadow: 0 12px 26px rgba(255, 122, 32, 0.2) !important; } .member-teammate-submit:disabled { cursor: not-allowed !important; opacity: 0.48 !important; filter: saturate(0.62) brightness(0.82) !important; } .member-teammate-review-completed { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .member-teammate-review-completed span { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 5px 7px !important; border: 1px solid rgba(60, 195, 191, 0.28) !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.08) !important; color: rgba(255, 238, 211, 0.88) !important; font-size: 0.64rem !important; font-weight: 820 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-teammate-review-completed strong { color: var(--roar-text-strong, #fff8ea) !important; font-weight: 940 !important; } .member-teammate-segment { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } .member-teammate-segment button { min-height: 34px !important; padding: 0 10px !important; border: 1px solid rgba(255, 244, 209, 0.12) !important; border-radius: 11px !important; background: rgba(255, 244, 209, 0.055) !important; color: rgba(255, 248, 234, 0.86) !important; font-size: 0.72rem !important; font-weight: 920 !important; line-height: 1.1 !important; } .member-teammate-segment button.is-selected, .member-teammate-chip.is-selected { border-color: rgba(255, 122, 32, 0.6) !important; background: linear-gradient(180deg, rgba(255, 122, 32, 0.22), rgba(8, 11, 16, 0.72)) !important; color: var(--roar-text-strong, #fff8ea) !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.11) !important; } .member-teammate-chip-group { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .member-teammate-chip { min-height: 30px !important; padding: 0 9px !important; border: 1px solid rgba(255, 244, 209, 0.13) !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.05) !important; color: rgba(255, 248, 234, 0.84) !important; font-size: 0.68rem !important; font-weight: 860 !important; line-height: 1.1 !important; } .member-teammate-chip-muted { border-color: rgba(60, 195, 191, 0.18) !important; color: rgba(255, 226, 184, 0.86) !important; } .member-teammate-impact-block, .member-teammate-comment { display: grid !important; gap: 6px !important; } .member-teammate-comment textarea { width: 100% !important; min-height: 68px !important; resize: vertical !important; padding: 9px 10px !important; border: 1px solid rgba(255, 244, 209, 0.14) !important; border-radius: 12px !important; background: rgba(5, 9, 15, 0.48) !important; color: var(--roar-text-strong, #fff8ea) !important; font: inherit !important; font-size: 0.78rem !important; font-weight: 760 !important; line-height: 1.35 !important; letter-spacing: 0 !important; outline: none !important; } .member-teammate-comment textarea:focus { border-color: rgba(255, 122, 32, 0.5) !important; box-shadow: 0 0 0 3px rgba(255, 122, 32, 0.12) !important; } .member-teammate-warning { margin: 0 !important; padding: 9px 10px !important; border: 1px solid rgba(255, 183, 96, 0.32) !important; border-radius: 12px !important; background: rgba(255, 183, 96, 0.09) !important; color: rgba(255, 226, 184, 0.94) !important; font-size: 0.72rem !important; font-weight: 820 !important; line-height: 1.28 !important; letter-spacing: 0 !important; } .member-hub .club-status-chip, .member-hub .club-badge, .member-hub .club-fit-badge, .member-hub .club-risk-chip, .member-connect-rail .club-status-chip, .member-connect-rail .club-badge, .member-connect-rail .club-fit-badge, .member-connect-rail .club-risk-chip { border-color: color-mix(in srgb, var(--club-status-accent) 44%, rgba(255, 244, 209, 0.12)) !important; background: color-mix(in srgb, var(--club-status-accent) 13%, rgba(5, 9, 15, 0.42)) !important; color: rgba(255, 248, 234, 0.94) !important; text-transform: none !important; } .member-hub .club-status-field, .member-connect-rail .club-status-field { border-color: color-mix(in srgb, var(--club-status-accent) 28%, rgba(255, 244, 209, 0.1)) !important; background: color-mix(in srgb, var(--club-status-accent) 8%, rgba(255, 244, 209, 0.035)) !important; } .member-hub .club-status-surface, .member-connect-rail .club-status-surface { border-color: color-mix(in srgb, var(--club-status-accent) 36%, rgba(255, 244, 209, 0.12)) !important; } .member-hub .member-section-heading .club-status-chip, .member-hub .member-section-heading .club-badge { font-size: 0.72rem !important; line-height: 1.05 !important; } .member-hub .member-preview-note { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; } .member-hub .member-performance-score .club-status-chip { justify-self: end !important; font-size: 0.72rem !important; } .member-hub .member-review-weight-modifiers .club-status-chip { display: inline-flex !important; } .member-teammate-review-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; } .member-teammate-review-cta:hover, .member-teammate-review-cta:focus-visible, .member-teammate-submit:hover, .member-teammate-submit:focus-visible, .member-teammate-segment button:hover, .member-teammate-segment button:focus-visible, .member-teammate-chip:hover, .member-teammate-chip:focus-visible { outline: none !important; border-color: rgba(60, 195, 191, 0.42) !important; box-shadow: 0 0 0 3px rgba(60, 195, 191, 0.12) !important; } .member-hub-nav { display: grid !important; align-self: start !important; align-content: start !important; grid-auto-rows: min-content !important; gap: 12px !important; min-width: 0 !important; padding: 14px 12px !important; border: 1px solid rgba(255, 244, 209, 0.075) !important; border-radius: 18px !important; background: radial-gradient(circle at 14% 0%, rgba(60, 195, 191, 0.1), transparent 34%), linear-gradient(180deg, rgba(12, 19, 27, 0.86), rgba(5, 8, 13, 0.88)), rgba(255, 244, 209, 0.018) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.045), 0 18px 38px rgba(0, 0, 0, 0.22) !important; } .member-hub-nav-head { display: grid !important; gap: 3px !important; min-width: 0 !important; padding: 0 4px 12px !important; border-bottom: 1px solid rgba(255, 244, 209, 0.08) !important; } .member-hub-nav-head strong { color: rgba(255, 238, 211, 0.92) !important; font-size: 0.74rem !important; font-weight: 940 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-nav-head span { color: rgba(60, 195, 191, 0.76) !important; font-size: 0.62rem !important; font-weight: 760 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-hub-nav-group { display: grid !important; gap: 5px !important; min-width: 0 !important; } .member-hub-nav-button { min-height: 24px !important; display: grid !important; grid-template-columns: 1fr !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; padding: 0 5px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: rgba(226, 198, 139, 0.82) !important; font: inherit !important; font-size: 0.65rem !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: uppercase !important; cursor: pointer !important; pointer-events: auto !important; transform: none !important; box-shadow: none !important; } .member-hub-nav-button strong { min-width: 0 !important; color: inherit !important; overflow-wrap: anywhere !important; font-size: 0.65rem !important; font-weight: 930 !important; line-height: 1.08 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-hub-nav-button span { justify-self: start !important; max-width: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: rgba(255, 221, 172, 0.76) !important; font-size: 0.58rem !important; font-weight: 760 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-align: left !important; text-transform: none !important; } .member-hub-nav-subpoints { display: grid !important; gap: 3px !important; min-width: 0 !important; padding: 0 0 0 12px !important; border-left: 1px solid rgba(60, 195, 191, 0.14) !important; } .member-hub-nav-subpoints button { min-height: 29px !important; width: 100% !important; min-width: 0 !important; padding: 0 8px 0 10px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; color: rgba(255, 226, 184, 0.58) !important; font: inherit !important; font-size: 0.68rem !important; font-weight: 760 !important; line-height: 1.1 !important; letter-spacing: 0 !important; text-align: left !important; cursor: pointer !important; overflow-wrap: anywhere !important; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease !important; } .member-hub-nav-subpoints button:hover, .member-hub-nav-subpoints button:focus-visible { border-color: rgba(60, 195, 191, 0.22) !important; background: rgba(60, 195, 191, 0.055) !important; color: rgba(255, 238, 211, 0.86) !important; outline: none !important; } .member-hub-nav-subpoints button.is-active { border-color: rgba(60, 195, 191, 0.42) !important; background: linear-gradient(90deg, rgba(60, 195, 191, 0.14), rgba(255, 244, 209, 0.025)) !important; color: rgba(255, 248, 234, 0.96) !important; box-shadow: inset 2px 0 0 rgba(60, 195, 191, 0.78), 0 0 0 1px rgba(60, 195, 191, 0.045), 0 0 18px rgba(60, 195, 191, 0.1) !important; } .member-hub-nav-button.active { border-color: rgba(226, 198, 139, 0.22) !important; background: rgba(226, 198, 139, 0.045) !important; color: rgba(255, 226, 184, 0.94) !important; box-shadow: inset 2px 0 0 rgba(226, 198, 139, 0.58), 0 0 16px rgba(226, 198, 139, 0.055) !important; } .member-hub-nav-group.is-active .member-hub-nav-button { color: rgba(255, 226, 184, 0.9) !important; } .member-hub-nav-button.locked { color: rgba(255, 244, 209, 0.84) !important; opacity: 0.52 !important; filter: saturate(0.62) brightness(0.82) !important; } .member-hub-nav-button.logout { min-height: 30px !important; align-self: end !important; margin-top: 10px !important; padding: 0 9px !important; border-top: 1px solid rgba(255, 244, 209, 0.08) !important; border-color: rgba(255, 244, 209, 0.075) !important; border-radius: 8px !important; background: rgba(255, 244, 209, 0.018) !important; color: rgba(255, 226, 184, 0.56) !important; font-size: 0.62rem !important; font-weight: 830 !important; text-transform: uppercase !important; } .member-hub-nav-button:hover, .member-hub-nav-button:focus-visible { border-color: rgba(60, 195, 191, 0.22) !important; background: rgba(60, 195, 191, 0.045) !important; color: rgba(255, 238, 211, 0.9) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(60, 195, 191, 0.08) !important; } .member-hub-nav-button.logout:hover, .member-hub-nav-button.logout:focus-visible { border-color: rgba(226, 198, 139, 0.2) !important; background: rgba(226, 198, 139, 0.04) !important; color: rgba(255, 226, 184, 0.78) !important; box-shadow: none !important; } .member-lobby-kicker { width: fit-content !important; color: rgba(60, 195, 191, 0.9) !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-start-panel { gap: 14px !important; padding: clamp(16px, 2vw, 22px) !important; border-color: rgba(255, 244, 209, 0.1) !important; border-radius: 18px !important; background: radial-gradient(circle at 84% 0%, rgba(60, 195, 191, 0.12), transparent 34%), linear-gradient(145deg, rgba(15, 23, 32, 0.92), rgba(5, 9, 15, 0.88)) !important; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 244, 209, 0.055) !important; } .member-start-head { padding-bottom: 2px !important; } .member-start-next { gap: 10px !important; padding: clamp(14px, 1.8vw, 18px) !important; border-color: rgba(255, 122, 32, 0.34) !important; border-radius: 16px !important; background: radial-gradient(circle at 8% 0%, rgba(255, 122, 32, 0.18), transparent 36%), linear-gradient(145deg, rgba(32, 18, 10, 0.9), rgba(8, 12, 18, 0.86)) !important; box-shadow: 0 16px 38px rgba(255, 122, 32, 0.1), inset 0 1px 0 rgba(255, 244, 209, 0.07) !important; } .member-start-next > p { max-width: 68ch !important; margin: 0 !important; color: rgba(255, 226, 184, 0.84) !important; font-size: 0.8rem !important; font-weight: 760 !important; line-height: 1.32 !important; letter-spacing: 0 !important; } .member-discovery-zone { display: grid !important; gap: 10px !important; } .member-room-drawer { padding: 9px 10px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 12px !important; background: rgba(255, 244, 209, 0.035) !important; } .member-room-drawer summary { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 4px 9px !important; cursor: pointer !important; list-style: none !important; } .member-room-drawer summary::-webkit-details-marker { display: none !important; } .member-room-drawer summary::marker { content: "" !important; } .member-room-drawer summary > span { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.8rem !important; font-weight: 940 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .member-room-drawer summary > em { grid-column: 1 / -1 !important; color: rgba(255, 226, 184, 0.72) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 730 !important; line-height: 1.24 !important; letter-spacing: 0 !important; } .member-room-drawer[open] summary { margin-bottom: 8px !important; } .member-secondary-room-list { display: grid !important; gap: 6px !important; } .member-secondary-room-item { min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 8px !important; padding: 8px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 10px !important; background: rgba(5, 9, 15, 0.34) !important; } .member-secondary-room-item > div { min-width: 0 !important; display: grid !important; gap: 2px !important; } .member-secondary-room-item strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.78rem !important; font-weight: 920 !important; line-height: 1.16 !important; letter-spacing: 0 !important; } .member-secondary-room-item p { margin: 0 !important; color: rgba(255, 226, 184, 0.72) !important; font-size: 0.68rem !important; font-weight: 740 !important; line-height: 1.22 !important; letter-spacing: 0 !important; } .member-mission-detail-body { display: grid !important; gap: 8px !important; } .member-mission-status-strip { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } .member-mission-status-strip span { min-width: 0 !important; display: grid !important; gap: 3px !important; padding: 8px !important; border: 1px solid rgba(60, 195, 191, 0.2) !important; border-radius: 10px !important; background: rgba(60, 195, 191, 0.065) !important; } .member-mission-status-strip em { color: rgba(60, 195, 191, 0.9) !important; font-size: 0.62rem !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-mission-status-strip strong { overflow-wrap: anywhere !important; color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.76rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0 !important; } .member-mission-ready { grid-column: auto !important; padding: 9px !important; } .member-mission-ready ol { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .member-mission-ready li { min-height: 30px !important; } .member-discovery-heading { display: flex !important; flex-wrap: wrap !important; align-items: end !important; justify-content: space-between !important; gap: 8px !important; } .member-discovery-heading span { color: rgba(60, 195, 191, 0.92) !important; font-size: 0.68rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-discovery-heading p { margin: 0 !important; color: rgba(255, 226, 184, 0.74) !important; font-size: 0.72rem !important; font-weight: 760 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .member-discovery-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; } .member-discovery-tile { min-width: 0 !important; min-height: 134px !important; display: grid !important; align-content: start !important; gap: 8px !important; padding: 12px !important; border: 1px solid rgba(255, 244, 209, 0.1) !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(255, 244, 209, 0.045), transparent 38%), rgba(255, 244, 209, 0.03) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.045) !important; } .member-discovery-marker { width: fit-content !important; color: rgba(255, 183, 96, 0.72) !important; font-size: 0.62rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; } .member-discovery-tile > strong { color: var(--roar-text-strong, #fff8ea) !important; font-size: 0.92rem !important; font-weight: 940 !important; line-height: 1.12 !important; letter-spacing: 0 !important; } .member-discovery-tile > p { min-height: 34px !important; margin: 0 !important; color: rgba(255, 226, 184, 0.78) !important; font-size: 0.72rem !important; font-weight: 760 !important; line-height: 1.26 !important; letter-spacing: 0 !important; } .member-discovery-footer { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 7px !important; margin-top: auto !important; } .member-discovery-action { min-height: 29px !important; padding: 0 9px !important; border-color: rgba(60, 195, 191, 0.22) !important; background: rgba(60, 195, 191, 0.055) !important; color: rgba(255, 238, 211, 0.9) !important; box-shadow: none !important; } .member-hub { width: min(1240px, calc(100vw - 28px)) !important; min-height: min(676px, calc(100vh - 26px)) !important; grid-template-columns: minmax(168px, 178px) minmax(0, 1fr) minmax(276px, 286px) !important; gap: 8px !important; } .member-hub[data-active-member-section="lobby"] { width: min(1240px, calc(100vw - 28px)) !important; grid-template-columns: minmax(168px, 178px) minmax(0, 1fr) minmax(276px, 286px) !important; } .member-hub-content, .member-hub-nav, .member-connect-rail { border-radius: 10px !important; background: radial-gradient(circle at 90% 10%, rgba(60, 195, 191, 0.08), transparent 30%), linear-gradient(180deg, rgba(6, 12, 18, 0.96), rgba(2, 5, 9, 0.95)) !important; } .member-hub-content { min-height: min(676px, calc(100vh - 26px)) !important; gap: 8px !important; padding: 16px !important; overflow: auto !important; scrollbar-width: thin !important; } .member-hub-title { font-size: clamp(2.18rem, 3.15vw, 3rem) !important; line-height: 0.98 !important; } .member-hub-statusline { margin-bottom: 3px !important; } .member-hub-nav { min-height: min(676px, calc(100vh - 26px)) !important; gap: 7px !important; padding: 18px 11px 12px !important; border-radius: 0 !important; border-color: rgba(255, 244, 209, 0.08) !important; } .member-hub-nav-head { min-height: 68px !important; align-content: start !important; padding: 0 4px 16px !important; } .member-hub-nav-head strong { font-size: 1.36rem !important; letter-spacing: 0.01em !important; } .member-hub-nav-head span { color: rgba(255, 244, 209, 0.58) !important; text-transform: uppercase !important; } .member-hub-nav-group { gap: 2px !important; } .member-hub-nav-button { min-height: 32px !important; grid-template-columns: 22px minmax(0, 1fr) !important; gap: 7px !important; padding: 0 9px !important; border-radius: 7px !important; text-transform: none !important; } .member-hub-nav-button::before { content: "" !important; width: 16px !important; height: 16px !important; border: 1px solid currentColor !important; border-radius: 5px !important; opacity: 0.9 !important; } .member-hub-nav-button[data-nav-icon="home"]::before { border-radius: 3px 3px 6px 6px !important; } .member-hub-nav-button[data-nav-icon="radar"]::before, .member-hub-nav-button[data-nav-icon="performance"]::before { border-radius: 999px !important; box-shadow: inset 0 0 0 4px rgba(60, 195, 191, 0.14) !important; } .member-hub-nav-button strong { font-size: 0.72rem !important; text-transform: none !important; } .member-hub-nav-subpoints { padding-left: 29px !important; border-left: 0 !important; } .member-hub-nav-subpoints button { min-height: 24px !important; padding: 0 8px !important; font-size: 0.67rem !important; } .member-hub-nav-button.active, .member-hub-nav-subpoints button.is-active { border-color: rgba(255, 122, 32, 0.44) !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.26), rgba(255, 122, 32, 0.05)) !important; color: rgba(255, 238, 211, 0.96) !important; box-shadow: inset 3px 0 0 rgba(255, 122, 32, 0.88) !important; } .member-connect-rail { min-height: min(676px, calc(100vh - 26px)) !important; max-width: 286px !important; padding: 16px 12px !important; border-radius: 0 !important; overflow: auto !important; scrollbar-width: thin !important; } .member-connect-player-list { gap: 7px !important; } .member-connect-card { grid-template-columns: 1fr !important; padding: 8px !important; } .member-connect-row-button { grid-template-columns: minmax(0, 1fr) auto !important; } .member-connect-status, .member-connect-row-reason, .member-connect-row-badge { grid-column: 1 / -1 !important; } .member-connect-card > .member-connect-card-cta { width: 100% !important; justify-self: stretch !important; } .member-reference-band { min-width: 0 !important; display: grid !important; gap: 8px !important; padding: 10px !important; border: 1px solid rgba(60, 195, 191, 0.14) !important; border-radius: 8px !important; background: linear-gradient(180deg, rgba(60, 195, 191, 0.055), transparent 38%), rgba(3, 10, 15, 0.72) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.045) !important; } .member-reference-heading, .member-performance-reference-head, .member-profile-hero, .member-review-next { min-width: 0 !important; } .member-reference-heading { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 10px !important; } .member-reference-heading span, .member-profile-hero span, .member-performance-reference-head span, .member-strength-list > span, .member-weakness-list > span, .member-review-next span { color: rgba(60, 195, 191, 0.95) !important; font-size: 0.64rem !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-reference-heading strong, .member-profile-hero strong, .member-performance-reference-head strong, .member-review-next strong { color: rgba(255, 248, 234, 0.96) !important; font-size: 0.96rem !important; font-weight: 950 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-status-tile-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; } .member-status-tile, .member-today-grid article, .member-profile-signal-grid article, .member-profile-review-row article, .member-training-window-grid article, .member-trend-grid article, .member-review-status-list span { min-width: 0 !important; display: grid !important; gap: 3px !important; padding: 8px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 7px !important; background: rgba(255, 244, 209, 0.025) !important; } .member-status-tile span, .member-today-grid span, .member-profile-signal-grid span, .member-profile-review-row span, .member-training-window-grid span, .member-trend-grid span { color: rgba(255, 226, 184, 0.68) !important; font-size: 0.6rem !important; font-weight: 840 !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: uppercase !important; } .member-status-tile strong, .member-today-grid strong, .member-profile-signal-grid strong, .member-profile-review-row strong, .member-training-window-grid strong, .member-trend-grid strong, .member-review-status-list strong { color: rgba(255, 248, 234, 0.94) !important; font-size: 0.78rem !important; font-weight: 920 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-status-tile::after { content: "" !important; height: 2px !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.82) !important; } .member-status-tile.is-review::after { background: rgba(255, 122, 32, 0.88) !important; } .member-today-grid, .member-profile-signal-grid, .member-training-window-grid, .member-trend-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; } .member-today-grid em, .member-profile-review-row em, .member-training-window-grid em, .member-trend-grid em, .member-review-status-list em { color: rgba(255, 226, 184, 0.7) !important; font-size: 0.62rem !important; font-style: normal !important; font-weight: 740 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } .member-profile-hero { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 12px !important; } .member-avatar-mark { width: 58px !important; aspect-ratio: 1 !important; display: grid !important; place-items: center !important; border: 1px solid rgba(60, 195, 191, 0.64) !important; border-radius: 999px !important; color: rgba(255, 248, 234, 0.94) !important; font-size: 0.92rem !important; font-weight: 950 !important; box-shadow: 0 0 24px rgba(60, 195, 191, 0.16) !important; } .member-profile-hero p, .member-review-next p, .member-performance-reference-head p { margin: 3px 0 0 !important; color: rgba(255, 226, 184, 0.76) !important; font-size: 0.7rem !important; font-weight: 760 !important; line-height: 1.24 !important; letter-spacing: 0 !important; } .member-profile-review-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 7px !important; } .member-profile-review-row .is-review { border-color: rgba(255, 122, 32, 0.36) !important; background: rgba(255, 122, 32, 0.075) !important; } .member-performance-reference-head { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) !important; gap: 10px !important; } .member-form-status-list { display: grid !important; gap: 5px !important; } .member-form-status-list span { min-height: 22px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 3px 0 !important; border-bottom: 1px solid rgba(255, 244, 209, 0.08) !important; color: rgba(255, 226, 184, 0.82) !important; font-size: 0.68rem !important; font-weight: 790 !important; letter-spacing: 0 !important; } .member-form-status-list span::after { content: "" !important; width: 8px !important; height: 8px !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.9) !important; } .member-performance-radar-row { display: grid !important; grid-template-columns: minmax(150px, 1fr) 180px minmax(150px, 1fr) !important; align-items: center !important; gap: 12px !important; } .member-strength-list, .member-weakness-list { display: grid !important; gap: 6px !important; } .member-strength-list p, .member-weakness-list p { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 0 !important; padding: 5px 0 !important; border-bottom: 1px solid rgba(255, 244, 209, 0.07) !important; } .member-strength-list strong, .member-weakness-list strong { color: rgba(255, 238, 211, 0.84) !important; font-size: 0.68rem !important; font-weight: 800 !important; } .member-strength-list em, .member-weakness-list em { color: rgba(60, 195, 191, 0.94) !important; font-size: 0.7rem !important; font-style: normal !important; font-weight: 930 !important; } .member-weakness-list em { color: rgba(255, 122, 32, 0.94) !important; } .member-radar-plot { position: relative !important; width: 178px !important; aspect-ratio: 1 !important; justify-self: center !important; border: 1px solid rgba(60, 195, 191, 0.24) !important; border-radius: 999px !important; background: radial-gradient(circle, rgba(60, 195, 191, 0.16) 0 1px, transparent 2px), repeating-radial-gradient(circle, rgba(60, 195, 191, 0.12) 0 1px, transparent 1px 28px), conic-gradient(from 30deg, rgba(60, 195, 191, 0.26), rgba(60, 195, 191, 0.06), rgba(60, 195, 191, 0.26)) !important; } .member-radar-plot::before { content: "" !important; position: absolute !important; inset: 36px !important; border-radius: 999px !important; background: rgba(60, 195, 191, 0.2) !important; box-shadow: 0 0 36px rgba(60, 195, 191, 0.18) !important; } .member-radar-svg { position: absolute !important; inset: 13px !important; z-index: 2 !important; overflow: visible !important; } .member-radar-ring, .member-radar-axis { fill: none !important; stroke: rgba(255, 244, 209, 0.12) !important; stroke-width: 1 !important; vector-effect: non-scaling-stroke !important; } .member-radar-ring.is-inner { stroke: rgba(60, 195, 191, 0.2) !important; } .member-radar-area { fill: rgba(60, 195, 191, 0.28) !important; stroke: rgba(60, 195, 191, 0.64) !important; stroke-width: 1 !important; } .member-radar-line { fill: none !important; stroke: rgba(255, 226, 184, 0.78) !important; stroke-width: 1.4 !important; stroke-linejoin: round !important; } .member-radar-point { fill: rgba(255, 248, 234, 0.96) !important; stroke: rgba(60, 195, 191, 0.95) !important; stroke-width: 1.3 !important; filter: drop-shadow(0 0 5px rgba(60, 195, 191, 0.42)) !important; } .member-radar-label { position: absolute !important; z-index: 3 !important; max-width: 62px !important; color: rgba(255, 226, 184, 0.82) !important; font-size: 0.48rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; text-transform: uppercase !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } .member-radar-label.is-top { left: 50% !important; top: 9px !important; } .member-radar-label.is-upper-right { left: 84% !important; top: 25% !important; } .member-radar-label.is-lower-right { left: 84% !important; top: 75% !important; } .member-radar-label.is-bottom { left: 50% !important; top: calc(100% - 9px) !important; } .member-radar-label.is-lower-left { left: 16% !important; top: 75% !important; } .member-radar-label.is-upper-left { left: 16% !important; top: 25% !important; } .member-radar-filter-row { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; } .member-radar-filter-row span { min-height: 30px !important; display: flex !important; align-items: center !important; padding: 0 9px !important; border: 1px solid rgba(255, 244, 209, 0.09) !important; border-radius: 7px !important; color: rgba(255, 226, 184, 0.78) !important; font-size: 0.66rem !important; font-weight: 780 !important; } .member-reviews-reference { grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr) !important; align-items: stretch !important; } .member-review-next { padding: 10px !important; border: 1px solid rgba(255, 122, 32, 0.3) !important; border-radius: 8px !important; background: rgba(255, 122, 32, 0.075) !important; } .member-review-status-list { display: grid !important; gap: 6px !important; } .member-review-status-list span { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } .member-review-guidance-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; margin: 6px 0 0 !important; padding: 9px 10px !important; border: 1px solid rgba(255, 122, 32, 0.26) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 122, 32, 0.09), rgba(60, 195, 191, 0.045)) !important; } .member-review-guidance-card > div, .member-review-guidance-card .member-help-label { min-width: 0 !important; } .member-review-guidance-card span { color: rgba(255, 226, 184, 0.78) !important; font-size: 0.64rem !important; font-weight: 850 !important; line-height: 1.16 !important; } .member-review-guidance-card strong { display: block !important; margin-top: 2px !important; color: rgba(255, 248, 234, 0.94) !important; font-size: 0.76rem !important; font-weight: 920 !important; line-height: 1.16 !important; } @media (max-width: 1366px) { .member-hub, .member-hub[data-active-member-section="lobby"] { width: min(1240px, calc(100vw - 24px)) !important; grid-template-columns: minmax(160px, 170px) minmax(0, 1fr) minmax(260px, 276px) !important; } .member-hub-content, .member-hub-nav, .member-connect-rail { min-height: min(676px, calc(100vh - 22px)) !important; } .member-hub-title { font-size: clamp(1.9rem, 3vw, 2.62rem) !important; } .member-status-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .member-today-grid, .member-profile-signal-grid, .member-training-window-grid, .member-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 1120px) { .member-performance-radar-row, .member-performance-reference-head, .member-reviews-reference { grid-template-columns: 1fr !important; } .member-radar-filter-row, .member-profile-review-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1680px) { .member-hub { width: min(1500px, calc(100vw - 112px)) !important; } } @media (max-width: 1366px) { .coach-hub { width: min(1188px, calc(100vw - 44px)) !important; min-height: min(560px, calc(100vh - 28px)) !important; grid-template-columns: minmax(0, 1fr) minmax(196px, 220px) !important; } .coach-hub-content { min-height: 506px !important; padding: clamp(17px, 1.8vw, 24px) !important; } .coach-hub-title { font-size: clamp(1.9rem, 3vw, 3rem) !important; } .member-hub { width: min(1334px, calc(100vw - 32px)) !important; min-height: min(560px, calc(100vh - 28px)) !important; grid-template-columns: minmax(188px, 206px) minmax(0, 1fr) minmax(360px, 420px) !important; } .member-hub[data-active-member-section="lobby"] { width: min(1108px, calc(100vw - 32px)) !important; grid-template-columns: minmax(188px, 206px) minmax(0, 1fr) !important; } .member-hub-content { min-height: 506px !important; padding: clamp(17px, 1.8vw, 24px) !important; } .member-connect-rail { max-width: 420px !important; max-height: none !important; } .member-hub-title { font-size: clamp(1.18rem, 1.6vw, 1.58rem) !important; } .member-section-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .member-chip-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .member-teammate-review-list { grid-template-columns: 1fr !important; } } @media (max-width: 920px) { .coach-hub { width: min(100%, calc(100vw - 22px)) !important; min-height: auto !important; grid-template-columns: 1fr !important; } .coach-hub-content, .coach-hub-panels { min-height: auto !important; overflow: visible !important; } .coach-hub-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important; } .coach-hub-nav::before { grid-column: 1 / -1 !important; } .coach-hub-nav-button.logout { margin-top: 0 !important; } .coach-hub-metric-grid, .coach-player-list, .coach-dashboard-stack .coach-hub-metric-grid, .coach-worklist-rows, .coach-player-dashboard, .coach-snapshot-workbench, .coach-trust-review-layout, .coach-trust-review-detail, .coach-trust-review-actions, .coach-release-row { grid-template-columns: 1fr !important; } .coach-player-grid, .coach-trust-review-cases { max-height: none !important; padding-right: 0 !important; } .coach-snapshot-zone, .coach-snapshot-core, .coach-snapshot-context, .coach-snapshot-benchmark, .coach-review-zone, .coach-release-zone { grid-column: auto !important; grid-row: auto !important; } .coach-release-actions { justify-content: start !important; } .member-hub { width: min(100%, calc(100vw - 22px)) !important; min-height: auto !important; grid-template-columns: 1fr !important; } .member-hub-content, .member-hub-sections, .member-connect-rail { min-height: auto !important; overflow: visible !important; } .member-connect-rail { max-width: none !important; max-height: none !important; } .member-hub-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-content: start !important; } .member-hub-nav-head, .member-hub-nav-button.logout { grid-column: 1 / -1 !important; } .member-hub-nav-button.logout { margin-top: 0 !important; } .member-hub-card-grid, .member-hub-progress ol, .member-connect-state-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-start-head { flex-direction: column !important; } .member-start-next ol { grid-template-columns: 1fr !important; } .member-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-secondary-room-item { grid-template-columns: minmax(0, 1fr) auto !important; } .member-secondary-room-item .member-discovery-action { grid-column: 1 / -1 !important; width: fit-content !important; } .member-mission-status-strip, .member-mission-ready ol { grid-template-columns: 1fr !important; } .member-hub-tour-replay { width: 100% !important; } .member-hub-card-status, .member-hub-card-profile, .member-hub-card-next, .member-hub-progress { grid-column: auto !important; } .member-hub-card-next, .member-hub-progress { grid-column: 1 / -1 !important; } .member-club-toolbar { grid-template-columns: 1fr !important; } .member-club-toolbar > strong { justify-self: start !important; } .member-club-layout, .member-club-list, .member-club-field-grid, .member-performance-snapshot, .member-performance-grid, .member-snapshot-meta-grid, .member-profile-bridge-grid, .member-profile-group-grid, .member-profile-quicklook, .member-profile-overview, .member-access-detail-list { grid-template-columns: 1fr !important; } .member-profile-quicklook-chips { justify-content: start !important; } .member-profile-badges { justify-content: flex-start !important; max-width: none !important; } .member-section-grid { grid-template-columns: 1fr !important; } .member-section-grid-compact, .member-chip-grid, .member-profile-setup, .member-access-statusline, .member-snapshot-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-section-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .member-teammate-review-list, .member-teammate-review-item, .member-review-weight-values, .member-teammate-segment { grid-template-columns: 1fr !important; } } @media (max-width: 640px) { .coach-hub { width: min(100%, calc(100vw - 16px)) !important; } .coach-hub-content { padding: 18px !important; } .coach-hub-title { font-size: clamp(2rem, 12vw, 2.72rem) !important; } .coach-hub-nav { grid-template-columns: 1fr !important; } .member-hub { width: min(100%, calc(100vw - 16px)) !important; } .member-hub-content { padding: 22px !important; } .member-connect-rail { padding: 14px !important; } .member-hub-title { font-size: clamp(1.16rem, 7vw, 1.52rem) !important; } .member-hub-card-grid, .member-hub-progress ol, .member-hub-nav, .member-connect-state-list { grid-template-columns: 1fr !important; } .member-start-next ol { grid-template-columns: 1fr !important; } .member-discovery-grid { grid-template-columns: 1fr !important; } .member-room-drawer summary { grid-template-columns: 1fr !important; } .member-room-drawer summary > strong { width: fit-content !important; } .member-secondary-room-item { grid-template-columns: 1fr !important; align-items: start !important; } .member-secondary-room-item .club-status-chip, .member-secondary-room-item .member-discovery-action { width: fit-content !important; } .member-discovery-footer { align-items: stretch !important; } .member-hub-tour-actions { flex-direction: column-reverse !important; align-items: stretch !important; } .member-hub-tour-button, .member-hub-tour-skip { width: 100% !important; } .member-hub-card-next { grid-column: auto !important; } .member-hub-primary-action, .member-hub-secondary-action { width: 100% !important; } .member-club-window-options { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; width: 100% !important; } .member-club-detail-grid, .member-club-detail-score, .member-performance-snapshot, .member-performance-grid, .member-profile-bridge-grid, .member-profile-bridge-values, .member-profile-group-grid, .member-profile-quicklook, .member-profile-overview, .member-access-detail-list, .member-profile-detail-group .member-profile-bridge-values, .member-profile-extra-grid { grid-template-columns: 1fr !important; } .member-performance-score { justify-items: start !important; text-align: left !important; } .member-section-heading { align-items: start !important; justify-content: start !important; } .member-section-heading-actions, .member-connect-title-row { justify-content: flex-start !important; } .member-section-preview-grid { grid-template-columns: 1fr !important; } .member-profile-badges { justify-content: flex-start !important; max-width: none !important; } .member-open-field-list li { grid-template-columns: 1fr !important; align-items: start !important; } .member-open-field-list details { justify-self: start !important; } .member-section-grid-compact, .member-chip-grid, .member-profile-setup, .member-access-statusline, .member-snapshot-metric-grid, .member-snapshot-request-row { grid-template-columns: 1fr !important; } .member-teammate-review-actions, .member-review-weight-head, .member-teammate-chip-group { align-items: stretch !important; } .member-review-weight-head { flex-direction: column !important; } .member-review-weight-head strong { width: 100% !important; text-align: center !important; white-space: normal !important; } .member-teammate-review-cta, .member-teammate-submit, .member-teammate-chip { width: 100% !important; } } @media (max-width: 640px) { body[data-app-view="license"], body[data-app-view="member_hub"], body[data-app-view="member_hub"] .app-shell, body[data-app-view="member_hub"] .intro-layer, body[data-app-view="member_hub"] .intro-shell, body[data-app-view="license"] #license-app, body[data-app-view="member_hub"] #license-app, body[data-app-view="license"] #license-app .intro-layer, body[data-app-view="member_hub"] #license-app .intro-layer, body[data-app-view="license"] #license-app .intro-shell, body[data-app-view="member_hub"] #license-app .intro-shell { max-width: 100% !important; overflow-x: hidden !important; } body[data-app-view="member_hub"] .app-shell, body[data-app-view="member_hub"] .intro-layer, body[data-app-view="member_hub"] .intro-shell { position: relative !important; left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-inline: 0 !important; transform: none !important; } body[data-app-view="member_hub"] .intro-layer, body[data-app-view="member_hub"] .intro-shell { padding-inline: 0 !important; } body[data-app-view="member_hub"] .intro-shell { justify-items: start !important; } .intro-shell:has(#member-hub:not(.hidden)) { position: relative !important; left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; min-width: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; justify-items: start !important; transform: none !important; } body[data-app-view="license"] #license-app .intro-layer, body[data-app-view="member_hub"] #license-app .intro-layer { padding-inline: 0 !important; } body[data-app-view="license"] #license-app .member-hub, body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub, #license-app .coach-hub, #license-app .member-hub { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; min-width: 0 !important; gap: 8px !important; margin-inline: 24px !important; justify-self: start !important; align-self: start !important; } body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub, #license-app .member-hub { grid-template-columns: 1fr !important; } body[data-app-view="member_hub"] .member-hub-content { order: 1 !important; } body[data-app-view="member_hub"] .member-hub-nav { order: 2 !important; grid-template-columns: 1fr !important; } body[data-app-view="member_hub"] .member-connect-rail { order: 3 !important; } .coach-hub, .coach-hub *, .member-hub, .member-hub *, .member-performance-snapshot, .member-performance-snapshot *, .member-hub-card, .member-connect-card, .member-info-chip { min-width: 0 !important; } .coach-hub-content, .coach-hub-nav, .member-hub-content, .member-hub-nav, .member-connect-rail { width: 100% !important; max-width: 100% !important; border-radius: 18px !important; } .coach-hub-content { padding: 16px !important; overflow: visible !important; } .member-hub-content { padding: 16px !important; overflow: visible !important; } .member-connect-rail { padding: 14px !important; overflow: visible !important; } .coach-hub-title { font-size: clamp(1.72rem, 10.5vw, 2.28rem) !important; line-height: 0.98 !important; overflow-wrap: anywhere !important; } .member-hub-title { font-size: clamp(1.12rem, 6.5vw, 1.46rem) !important; line-height: 1.04 !important; overflow-wrap: anywhere !important; } .coach-hub-card, .coach-player-row, .coach-workbench-placeholder, .coach-snapshot-zone, .coach-hub-notice, .member-hub-statusline, .member-hub-card, .member-connect-rail, .member-connect-card, .member-connect-state-card, .member-section-note, .member-performance-snapshot, .member-performance-score, .member-performance-grid span, .member-hub-notice { width: 100% !important; max-width: 100% !important; } .member-hub-statusline { border-radius: 16px !important; } .member-start-head { flex-direction: column !important; } .member-start-head strong { font-size: clamp(1.05rem, 6.2vw, 1.32rem) !important; } .member-mission-status-strip, .member-mission-ready ol, .member-secondary-room-item { grid-template-columns: 1fr !important; } .coach-hub-card span, .coach-hub-card strong, .coach-hub-card em, .coach-player-row span, .coach-player-row strong, .coach-workbench-placeholder span, .coach-workbench-placeholder strong, .coach-workbench-placeholder p, .coach-snapshot-zone p, .coach-warning-list li, .coach-hub-nav-button, .coach-hub-notice, .member-hub-statusline span, .member-hub-card-label, .member-hub-card strong, .member-connect-rail-head h2, .member-connect-rail-head p, .member-connect-state-card span, .member-connect-state-card p, .member-connect-card-head strong, .member-connect-card-head span, .member-connect-chemistry strong, .member-connect-card-meta strong, .member-connect-activity, .member-connect-main-reason strong, .member-club-main-reason strong, .member-connect-weak-reason, .member-connect-reasons li, .member-connect-card-cta, .member-connect-rail-note, .member-section-note, .member-performance-snapshot-head strong, .member-performance-snapshot-head em, .member-performance-score span, .member-performance-score em, .member-performance-grid strong, .member-performance-snapshot p, .member-hub-nav-button, .member-hub-nav-button span, .member-hub-notice { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; hyphens: auto !important; } .member-performance-snapshot, .member-performance-grid, .member-connect-card-meta, .member-connect-factor-grid, .member-performance-status-grid, .coach-player-fields, .coach-detail-grid, .coach-worklist-rows, .coach-player-dashboard, .coach-snapshot-workbench, .coach-release-row { grid-template-columns: 1fr !important; } .member-performance-score { justify-items: start !important; text-align: left !important; } .member-performance-score strong { font-size: 1.34rem !important; } .member-hub-nav-button { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; } .member-hub-nav-button span { justify-self: start !important; max-width: 100% !important; text-align: left !important; } } @media (max-width: 420px) { #license-app .coach-hub, body[data-app-view="license"] #license-app .member-hub, body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub, #license-app .member-hub { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; } .coach-hub-content { padding: 14px !important; } .member-hub-content { padding: 14px !important; } .coach-hub-card, .coach-player-row, .coach-workbench-placeholder, .coach-snapshot-zone, .member-hub-card, .member-performance-snapshot, .member-connect-card, .member-connect-state-card, .member-connect-rail-note { padding: 10px !important; } .member-club-window-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 920px) { .member-connect-state-list, .member-connect-player-list { grid-template-columns: 1fr !important; } .member-connect-row-button { grid-template-columns: auto minmax(0, 1fr) auto !important; } } @media (max-width: 640px) { .member-connect-card { grid-template-columns: 1fr !important; } .member-connect-row-button { grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: start !important; min-height: 0 !important; padding: 4px !important; } .member-connect-row-reason { grid-column: 1 / -1 !important; } .member-connect-card > .member-connect-card-cta { width: 100% !important; justify-self: stretch !important; } .member-connect-profile-head, .member-connect-profile-grid, .member-connect-card-meta, .member-connect-factor-grid, .member-connect-profile-footer { grid-template-columns: 1fr !important; } .member-connect-profile-actions { justify-content: start !important; } } /* Authenticated Nordwerk club area reference-match shell override. */ body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub { width: min(1240px, calc(100vw - 24px)) !important; max-width: min(1240px, calc(100vw - 24px)) !important; min-height: min(676px, calc(100vh - 22px)) !important; grid-template-columns: minmax(160px, 170px) minmax(0, 1fr) minmax(260px, 276px) !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { min-height: min(676px, calc(100vh - 22px)) !important; max-height: min(676px, calc(100vh - 22px)) !important; overflow: auto !important; } body[data-app-view="member_hub"] .member-hub-content { order: initial !important; } body[data-app-view="member_hub"] .member-hub-nav { order: initial !important; grid-template-columns: 1fr !important; } body[data-app-view="member_hub"] .member-connect-rail { order: initial !important; display: grid !important; } @media (max-width: 920px) { body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub { width: min(100%, calc(100vw - 22px)) !important; max-width: min(100%, calc(100vw - 22px)) !important; min-height: auto !important; grid-template-columns: 1fr !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { min-height: auto !important; max-height: none !important; } .member-status-tile-grid, .member-radar-filter-row, .member-profile-review-row, .member-today-grid, .member-profile-signal-grid, .member-training-window-grid, .member-trend-grid { grid-template-columns: 1fr !important; } } /* ROAR License/Faceit final neon polish: controlled premium glow and motion only. */ html body[data-app-view="completion"] { overflow: hidden !important; background-color: #010204 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { --completion-green: var(--web-v1-link-cta, #6ef0a5); --completion-orange: var(--roar-accent-orange, #ff7a20); --completion-frame-inset: clamp(18px, 2.4vw, 34px); align-content: center !important; grid-template-rows: auto auto auto auto auto !important; max-height: 100dvh !important; overflow: hidden !important; padding: clamp(24px, 5.2vw, 74px) !important; background: repeating-linear-gradient(180deg, rgba(255, 122, 24, 0.042) 0 1px, transparent 1px 7px), radial-gradient(circle at 15% 22%, color-mix(in srgb, var(--completion-green) 24%, transparent), transparent 34%), radial-gradient(circle at 82% 68%, color-mix(in srgb, var(--completion-orange) 24%, transparent), transparent 39%), radial-gradient(circle at 48% 4%, rgba(255, 244, 209, 0.075), transparent 30%), linear-gradient(180deg, rgba(0, 0, 0, 0.91), rgba(1, 4, 7, 0.975)), var(--completion-visual-image) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 244, 209, 0.065), inset 0 0 82px rgba(0, 0, 0, 0.46) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::before { inset: var(--completion-frame-inset) !important; border-color: color-mix(in srgb, var(--completion-green) 42%, rgba(255, 122, 24, 0.40)) !important; background: linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 16%, transparent), transparent 36%, rgba(255, 122, 24, 0.16)), linear-gradient(180deg, rgba(8, 14, 12, 0.88), rgba(1, 4, 7, 0.955)) !important; box-shadow: 0 30px 96px rgba(0, 0, 0, 0.64), 0 0 0 1px rgba(255, 244, 209, 0.035), 0 0 44px color-mix(in srgb, var(--completion-green) 17%, transparent), 0 0 58px rgba(255, 122, 24, 0.12), inset 0 1px 0 rgba(255, 244, 209, 0.075), inset 0 0 50px rgba(255, 122, 24, 0.10) !important; animation: completion-premium-frame-breathe 5200ms ease-in-out infinite !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::after { background: linear-gradient(100deg, transparent 10%, color-mix(in srgb, var(--completion-green) 10%, transparent) 34%, rgba(255, 190, 92, 0.17) 49%, transparent 66%), linear-gradient(180deg, rgba(255, 244, 209, 0.025) 0%, transparent 24%, rgba(0, 0, 0, 0.48) 100%) !important; animation: completion-final-scan 3400ms cubic-bezier(0.18, 0.78, 0.22, 1) infinite !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel > * { width: min(760px, calc(100vw - clamp(48px, 10vw, 150px))) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual { position: relative !important; overflow: hidden !important; min-height: clamp(104px, 15vh, 174px) !important; border-color: color-mix(in srgb, var(--completion-green) 38%, rgba(255, 122, 24, 0.36)) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.64)), radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--completion-green) 13%, transparent), transparent 34%), var(--completion-visual-image) center center / cover no-repeat !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.10), inset 0 0 24px rgba(0, 0, 0, 0.34), 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 28px color-mix(in srgb, var(--completion-green) 13%, transparent), 0 0 30px rgba(255, 122, 24, 0.08) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(105deg, transparent 24%, rgba(255, 244, 209, 0.105), transparent 58%) !important; transform: translateX(-115%) !important; animation: completion-visual-light-pass 4700ms cubic-bezier(0.18, 0.78, 0.22, 1) infinite !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-kicker { color: color-mix(in srgb, var(--completion-green) 84%, #fff4d1) !important; text-shadow: 0 0 14px color-mix(in srgb, var(--completion-green) 24%, transparent), 0 0 24px rgba(255, 122, 24, 0.10) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { color: #f7ffe8 !important; text-shadow: 0 0 18px color-mix(in srgb, var(--completion-green) 28%, transparent), 0 0 38px rgba(255, 122, 24, 0.18), 0 18px 48px rgba(0, 0, 0, 0.52) !important; animation: completion-title-neon-pulse 4600ms ease-in-out infinite !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note { border-color: color-mix(in srgb, var(--completion-green) 28%, rgba(255, 122, 24, 0.16)) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 76%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.055), 0 0 18px color-mix(in srgb, var(--completion-green) 8%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form { position: relative !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--completion-green) 36%, rgba(255, 122, 24, 0.30)) !important; box-shadow: 0 20px 52px rgba(0, 0, 0, 0.40), 0 0 30px color-mix(in srgb, var(--completion-green) 10%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.065), inset 0 0 28px rgba(255, 122, 24, 0.045) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 10%, transparent), transparent 34%, rgba(255, 122, 24, 0.075)) !important; opacity: 0.72 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form > * { position: relative !important; z-index: 1 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input { transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease, background-position 240ms ease !important; background: linear-gradient(180deg, rgba(3, 20, 16, 0.96), rgba(0, 7, 10, 0.93)), linear-gradient(90deg, color-mix(in srgb, var(--completion-green) 8%, transparent), transparent 60%) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 68%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.055), 0 10px 20px rgba(0, 0, 0, 0.24), 0 0 20px color-mix(in srgb, var(--completion-green) 10%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input:hover { border-color: color-mix(in srgb, var(--completion-green) 48%, rgba(255, 122, 24, 0.36)) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 78%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.065), 0 12px 24px rgba(0, 0, 0, 0.28), 0 0 24px color-mix(in srgb, var(--completion-green) 14%, transparent), 0 0 20px rgba(255, 122, 24, 0.055) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input:focus, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input:focus-visible { border-color: color-mix(in srgb, var(--completion-green) 72%, rgba(255, 177, 72, 0.72)) !important; outline: 2px solid color-mix(in srgb, var(--completion-green) 52%, rgba(255, 122, 24, 0.36)) !important; outline-offset: 3px !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--completion-green) 88%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.08), 0 0 0 4px color-mix(in srgb, var(--completion-green) 16%, transparent), 0 0 32px color-mix(in srgb, var(--completion-green) 24%, transparent), 0 14px 30px rgba(0, 0, 0, 0.34) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary { position: relative !important; isolation: isolate !important; overflow: hidden !important; text-shadow: 0 1px 0 rgba(255, 244, 209, 0.20) !important; box-shadow: inset 0 1px 0 rgba(255, 236, 191, 0.38), inset 0 -10px 18px rgba(93, 25, 0, 0.20), 0 14px 26px rgba(0, 0, 0, 0.36), 0 0 26px rgba(255, 122, 24, 0.30), 0 0 26px color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 10%, transparent) !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent 16%, rgba(255, 244, 209, 0.42) 42%, transparent 62%), linear-gradient(90deg, color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 16%, transparent), transparent 56%) !important; transform: translateX(-125%) !important; animation: completion-cta-light-pass 4100ms cubic-bezier(0.18, 0.78, 0.22, 1) infinite !important; } html body[data-app-view="completion"] #license-app #completion-submit.primary:hover:not(:disabled), html body[data-app-view="completion"] #license-app #completion-submit.primary:focus-visible:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.48), inset 0 -10px 18px rgba(93, 25, 0, 0.16), 0 16px 32px rgba(0, 0, 0, 0.40), 0 0 34px rgba(255, 122, 24, 0.44), 0 0 30px color-mix(in srgb, var(--web-v1-link-cta, #6ef0a5) 18%, transparent) !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay { --completion-green: var(--web-v1-link-cta, #6ef0a5); --completion-orange: var(--roar-accent-orange, #ff7a20); overflow: hidden !important; background: repeating-linear-gradient(180deg, rgba(255, 122, 24, 0.040) 0 1px, transparent 1px 7px), radial-gradient(circle at 16% 30%, color-mix(in srgb, var(--completion-orange) 23%, transparent), transparent 36%), radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--completion-green) 18%, transparent), transparent 32%), radial-gradient(circle at 52% 108%, rgba(255, 244, 209, 0.06), transparent 42%), linear-gradient(180deg, rgba(2, 5, 8, 0.93), rgba(0, 0, 0, 0.975)), var(--completion-fade-image) center center / cover no-repeat !important; border-color: rgba(255, 122, 32, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.075), inset 0 0 0 1px color-mix(in srgb, var(--completion-green) 8%, transparent), inset 0 0 64px rgba(255, 122, 24, 0.055), 0 34px 104px rgba(0, 0, 0, 0.66), 0 0 52px rgba(255, 122, 24, 0.12), 0 0 44px color-mix(in srgb, var(--completion-green) 10%, transparent) !important; animation: completion-thanks-arrive 720ms cubic-bezier(0.16, 0.76, 0.24, 1) both, completion-premium-frame-breathe 6200ms ease-in-out 720ms infinite !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::before { border-color: color-mix(in srgb, var(--completion-orange) 34%, rgba(255, 244, 209, 0.08)) !important; background: linear-gradient(90deg, rgba(255, 122, 32, 0.22), transparent 31%, transparent 72%, color-mix(in srgb, var(--completion-green) 15%, transparent)), linear-gradient(180deg, rgba(255, 244, 209, 0.035), transparent 24%, transparent 78%, rgba(255, 112, 32, 0.075)) !important; box-shadow: 0 0 38px rgba(255, 122, 24, 0.12), inset 0 0 40px color-mix(in srgb, var(--completion-green) 5%, transparent) !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent 14%, color-mix(in srgb, var(--completion-green) 8%, transparent) 34%, rgba(255, 190, 92, 0.13) 50%, transparent 68%) !important; transform: translateX(-120%) !important; animation: completion-thanks-sweep 5200ms cubic-bezier(0.18, 0.78, 0.22, 1) 600ms infinite !important; } html body[data-flow-state="faded"] #license-app .completion-fade-copy { max-height: calc(100dvh - clamp(170px, 16vh, 210px)) !important; overflow: hidden !important; } html body[data-flow-state="faded"] #license-app .completion-fade-brand { border-left-color: color-mix(in srgb, var(--completion-orange, #ff7a20) 84%, var(--completion-green, #6ef0a5) 16%) !important; text-shadow: 0 0 18px rgba(255, 122, 24, 0.24), 0 0 22px color-mix(in srgb, var(--completion-green, #6ef0a5) 12%, transparent) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-title { text-shadow: 0 0 22px rgba(255, 244, 209, 0.18), 0 0 42px rgba(255, 122, 24, 0.26), 0 24px 60px rgba(0, 0, 0, 0.54) !important; animation: completion-title-neon-pulse 5400ms ease-in-out 480ms infinite !important; } html body[data-flow-state="faded"] #license-app .completion-fade-message, html body[data-flow-state="faded"] #license-app .completion-fade-contact { text-shadow: 0 0 24px rgba(255, 244, 209, 0.11), 0 0 34px rgba(255, 122, 24, 0.14), 0 18px 44px rgba(0, 0, 0, 0.48) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-faceit-link { position: relative !important; overflow: hidden !important; border-color: color-mix(in srgb, var(--completion-green, #6ef0a5) 42%, rgba(255, 122, 24, 0.48)) !important; box-shadow: inset 0 1px 0 rgba(255, 244, 209, 0.18), 0 14px 30px rgba(0, 0, 0, 0.36), 0 0 28px rgba(255, 122, 24, 0.26), 0 0 24px color-mix(in srgb, var(--completion-green, #6ef0a5) 12%, transparent) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-faceit-link::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent 18%, rgba(255, 244, 209, 0.35), transparent 60%) !important; transform: translateX(-125%) !important; animation: completion-cta-light-pass 4300ms cubic-bezier(0.18, 0.78, 0.22, 1) 900ms infinite !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta-row { display: flex !important; align-items: stretch !important; justify-content: flex-start !important; gap: 14px !important; width: min(680px, 100%) !important; padding: 7px !important; margin: -7px !important; overflow: visible !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta { --roar-button-hover-transform: translateY(-2px); --roar-button-active-transform: translateY(1px) scale(0.995); position: relative !important; isolation: isolate !important; display: inline-flex !important; flex: 1 1 0 !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 58px !important; margin: 0 !important; padding: 0 26px !important; border: var(--roar-button-border-width, 1px) solid var(--roar-button-border, rgba(255, 122, 32, 0.72)) !important; border-radius: var(--roar-button-radius, 24px) !important; background: var(--roar-start-button-bg, var(--roar-button-bg, linear-gradient(180deg, rgba(255, 124, 22, 0.88), rgba(24, 7, 2, 0.96)))) !important; color: var(--roar-button-text, #fff4d1) !important; font-family: inherit !important; font-size: 0.95rem !important; font-weight: 950 !important; letter-spacing: 0.16em !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-shadow: var(--roar-button-text-shadow, 0 1px 0 rgba(0, 0, 0, 0.45)) !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: var(--roar-button-glow, 0 12px 24px rgba(0, 0, 0, 0.30)) !important; clip-path: var(--roar-button-clip-path, none) !important; cursor: pointer !important; appearance: none !important; transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, filter 150ms ease !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient(100deg, transparent 18%, rgba(255, 244, 209, 0.35), transparent 60%), linear-gradient(90deg, color-mix(in srgb, var(--completion-green, #6ef0a5) 12%, transparent), transparent 58%) !important; transform: translateX(-125%) !important; animation: completion-cta-light-pass 4300ms cubic-bezier(0.18, 0.78, 0.22, 1) 900ms infinite !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta:hover, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta:focus-visible { border-color: var(--roar-button-border-hover, var(--roar-button-border, rgba(255, 122, 32, 0.86))) !important; background: var(--roar-button-bg-hover, var(--roar-button-bg)) !important; color: var(--roar-button-text-hover, var(--roar-button-text, #fff4d1)) !important; box-shadow: var(--roar-button-glow-strong, var(--roar-button-glow)) !important; outline: none !important; transform: var(--roar-button-hover-transform, translateY(-1px)) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta:active { background: var(--roar-button-active, var(--roar-button-bg-hover)) !important; box-shadow: var(--roar-component-active-indicator, var(--roar-button-glow-strong, var(--roar-button-glow))) !important; transform: var(--roar-button-active-transform, translateY(1px) scale(0.99)) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-warmup-button { border-color: color-mix(in srgb, var(--completion-green, #6ef0a5) 34%, rgba(255, 122, 24, 0.56)) !important; } @keyframes completion-premium-frame-breathe { 0%, 100% { opacity: 0.94; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.08); } } @keyframes completion-title-neon-pulse { 0%, 100% { filter: brightness(1); } 48% { filter: brightness(1.08); } } @keyframes completion-visual-light-pass { 0%, 62% { transform: translateX(-115%); opacity: 0; } 68% { opacity: 0.72; } 88%, 100% { transform: translateX(115%); opacity: 0; } } @keyframes completion-cta-light-pass { 0%, 58% { transform: translateX(-125%); opacity: 0; } 65% { opacity: 0.82; } 84%, 100% { transform: translateX(125%); opacity: 0; } } @keyframes completion-thanks-arrive { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.992); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes completion-thanks-sweep { 0%, 56% { transform: translateX(-120%); opacity: 0; } 64% { opacity: 0.55; } 86%, 100% { transform: translateX(120%); opacity: 0; } } @media (max-width: 760px) { html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { align-content: center !important; gap: clamp(9px, 2.2vw, 14px) !important; padding: clamp(18px, 5.4vw, 30px) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel > * { width: min(100%, calc(100vw - 40px)) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual { min-height: clamp(82px, 12vh, 116px) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form { gap: 10px !important; padding: 14px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input, html body[data-app-view="completion"] #license-app #completion-submit.primary { min-height: 54px !important; } html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay { inset: clamp(96px, 10vh, 126px) clamp(14px, 4vw, 24px) clamp(14px, 3vh, 24px) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-copy { max-height: calc(100dvh - clamp(130px, 15vh, 170px)) !important; padding: clamp(24px, 7vw, 38px) !important; gap: clamp(10px, 2.4vw, 14px) !important; } } @media (max-width: 420px), (max-height: 740px) { html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { gap: 7px !important; padding: clamp(14px, 4.8vw, 22px) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::before { inset: clamp(10px, 3.2vw, 18px) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual { min-height: clamp(54px, 9vh, 78px) !important; max-height: 78px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { font-size: clamp(1.84rem, 9.2vw, 3.35rem) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-body { font-size: clamp(0.78rem, 3.1vw, 0.94rem) !important; line-height: 1.24 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note { min-height: 0 !important; padding: 7px 8px !important; font-size: 11px !important; line-height: 1.18 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form { gap: 7px !important; padding: 10px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-field-label { font-size: 10px !important; line-height: 1.1 !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input, html body[data-app-view="completion"] #license-app #completion-submit.primary { min-height: 44px !important; } html body[data-flow-state="faded"] #license-app .completion-fade-title { font-size: clamp(2.8rem, 15vw, 4.6rem) !important; } html body[data-flow-state="faded"] #license-app .completion-fade-message, html body[data-flow-state="faded"] #license-app .completion-fade-contact { font-size: clamp(1.08rem, 5.8vw, 1.72rem) !important; line-height: 1.08 !important; } html body[data-flow-state="faded"] #license-app .completion-fade-subcopy { gap: 14px !important; font-size: clamp(0.88rem, 3.8vw, 1rem) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta-row { flex-direction: column !important; gap: 10px !important; width: min(100%, 320px) !important; align-self: stretch !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta { width: 100% !important; min-height: 52px !important; padding: 0 18px !important; font-size: 0.86rem !important; letter-spacing: 0.12em !important; } } @media (prefers-reduced-motion: reduce) { html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::before, html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::after, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual::after, html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title, html body[data-app-view="completion"] #license-app #completion-submit.primary::before, html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay, html body[data-flow-state="faded"] #license-app #completion-fade-overlay.completion-fade-overlay::after, html body[data-flow-state="faded"] #license-app .completion-fade-title, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta::before, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-faceit-link::before { animation: none !important; } } /* Startscreen Club-Login Flow Rebuild: final scoped entry layout and menu states. */ .intro-start-panel.hidden { display: none !important; } body[data-app-view="intro_ready"] .intro-start-panel { width: min(500px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto auto !important; column-gap: 12px !important; row-gap: 9px !important; align-items: center !important; justify-items: center !important; transform: translate3d(0, clamp(34px, 7vh, 78px), 0) !important; margin: 0 auto clamp(72px, 10vh, 118px) !important; padding-top: clamp(24px, 5vh, 72px) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { grid-column: 1 / -1 !important; grid-row: 1 !important; width: min(282px, 100%) !important; min-height: 52px !important; top: auto !important; transform: translate3d(0, 0, 0) !important; animation: none !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { position: static !important; grid-column: 1 / -1 !important; grid-row: 2 !important; left: auto !important; right: auto !important; bottom: auto !important; width: min(196px, 70vw) !important; min-height: 34px !important; justify-self: center !important; padding: 0 14px !important; border-radius: 8px !important; font-size: 0.72rem !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 0.96 !important; transform: translate3d(0, 0, 0) !important; animation: none !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-row: 3 !important; width: min(100%, 210px) !important; min-height: 42px !important; justify-self: stretch !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; transform: translate3d(0, 0, 0) !important; animation: none !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 2 !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.entry-button:focus-visible, body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:focus-visible, body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible { transform: translate3d(0, -2px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:active:not(:disabled), body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:active:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:active:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(0.995) !important; } .club-login-menu, .club-login-access-form { width: 100% !important; display: grid !important; gap: 12px !important; justify-items: stretch !important; } .club-login-menu.hidden, .club-login-access-form.hidden { display: none !important; } body[data-app-view="login_entry"] .intro-shell { width: 100% !important; max-width: 100vw !important; box-sizing: border-box !important; } .club-login-options { display: grid !important; gap: 9px !important; width: 100% !important; } .club-login-option-button.entry-button { width: 100% !important; min-height: 58px !important; display: grid !important; align-content: center !important; justify-items: start !important; gap: 3px !important; padding: 10px 14px !important; text-align: left !important; letter-spacing: 0 !important; text-transform: none !important; } .club-login-option-button span, .club-login-option-button em { display: block !important; position: relative !important; z-index: 1 !important; letter-spacing: 0 !important; line-height: 1.12 !important; } .club-login-option-button span { color: var(--entry-text, #fff4d1) !important; font-size: 0.9rem !important; font-weight: 900 !important; } .club-login-option-button em { max-width: 34ch !important; color: var(--entry-text-soft, rgba(255, 244, 209, 0.76)) !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 720 !important; } #club-login-back-button.entry-button { width: min(100%, 320px) !important; justify-self: center !important; min-height: var(--entry-control-height-compact, 42px) !important; } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(340px, calc(100vw - 28px)) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: auto auto auto !important; column-gap: 10px !important; row-gap: 8px !important; transform: translate3d(0, clamp(24px, 5vh, 52px), 0) !important; margin-bottom: clamp(52px, 9vh, 86px) !important; padding-top: clamp(14px, 4vh, 40px) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(280px, 100%) !important; min-height: 50px !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { width: min(190px, 72vw) !important; min-height: 32px !important; font-size: 0.72rem !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: 100% !important; min-height: 42px !important; font-size: 0.72rem !important; } body[data-app-view="login_entry"] .intro-shell { width: calc(100vw - 36px) !important; } .club-login-option-button.entry-button { min-height: 56px !important; padding: 9px 12px !important; } } /* Startscreen Club-Login Password Setup Cleanup: restore original start geometry. */ body[data-app-view="intro_ready"] .intro-start-panel { position: relative !important; width: min(1040px, calc(100vw - 48px)) !important; display: grid !important; grid-template-columns: minmax(148px, 0.86fr) minmax(220px, 1.08fr) minmax(148px, 0.86fr) !important; grid-template-rows: var(--entry-control-height-compact, 42px) 56px !important; column-gap: clamp(28px, 9vw, 152px) !important; row-gap: clamp(126px, 18vh, 166px) !important; align-items: center !important; justify-items: center !important; transform: translate3d(0, 0, 0) !important; margin: 0 auto clamp(18px, 5vh, 44px) !important; padding-top: 0 !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: min(100%, 210px) !important; min-height: 40px !important; grid-row: 1 !important; justify-self: center !important; border-radius: var(--entry-control-radius, 8px) !important; font-size: 0.78rem !important; letter-spacing: 0.06em !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; transform: translate3d(-54px, 138px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 3 !important; transform: translate3d(70px, 138px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 282px) !important; min-height: 52px !important; grid-column: 2 !important; grid-row: 2 !important; top: clamp(44px, calc(8vh - 10px), 64px) !important; font-size: 0.92rem !important; letter-spacing: 0.1em !important; transform: translate3d(0, -10px, 0) !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { position: absolute !important; left: 50% !important; top: clamp(78px, 12vh, 118px) !important; right: auto !important; bottom: auto !important; z-index: 32 !important; width: min(176px, 56vw) !important; min-height: 32px !important; grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; padding: 0 13px !important; border-radius: 8px !important; font-size: 0.7rem !important; letter-spacing: 0 !important; text-transform: none !important; opacity: 0.9 !important; transform: translate3d(-50%, 0, 0) !important; animation: none !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible { transform: translate3d(-54px, 136px, 0) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible { transform: translate3d(70px, 136px, 0) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.entry-button:focus-visible { transform: translate3d(0, -12px, 0) !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:focus-visible { transform: translate3d(-50%, -2px, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:active:not(:disabled) { transform: translate3d(-54px, 139px, 0) scale(0.995) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:active:not(:disabled) { transform: translate3d(70px, 139px, 0) scale(0.995) !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button:active:not(:disabled) { transform: translate3d(0, -9px, 0) scale(0.995) !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button:active:not(:disabled) { transform: translate3d(-50%, 1px, 0) scale(0.995) !important; } .club-login-step, .club-login-field, .club-login-password-step { width: 100% !important; display: grid !important; gap: 10px !important; } .club-login-step.hidden, .club-login-field.hidden, .club-login-password-step.hidden, .club-login-status.hidden { display: none !important; } .club-login-step-title { margin: 0 !important; color: var(--entry-text, #fff4d1) !important; font-size: 0.92rem !important; font-weight: 900 !important; letter-spacing: 0 !important; text-align: center !important; } .club-login-password-hint, .club-login-status { margin: 0 !important; color: var(--entry-text-soft, rgba(255, 244, 209, 0.76)) !important; font-size: 0.76rem !important; font-weight: 760 !important; line-height: 1.25 !important; text-align: center !important; } .club-login-status { color: rgba(178, 255, 214, 0.86) !important; } @media (max-width: 760px) { body[data-app-view="intro_ready"] .intro-start-panel { width: min(340px, calc(100vw - 28px)) !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 44px 52px !important; column-gap: 10px !important; row-gap: 12px !important; transform: translate3d(0, 0, 0) !important; margin-bottom: clamp(18px, 5vh, 44px) !important; padding-top: 0 !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { width: 100% !important; min-height: 42px !important; grid-row: 1 !important; font-size: 0.72rem !important; transform: translate3d(0, 0, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button { grid-column: 1 !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button { grid-column: 2 !important; } body[data-app-view="intro_ready"] #intro-start-button.entry-button { width: min(100%, 280px) !important; grid-column: 1 / -1 !important; grid-row: 2 !important; min-height: 50px !important; top: 0 !important; font-size: 0.86rem !important; transform: translate3d(0, 0, 0) !important; } body[data-app-view="intro_ready"] #welcome-guide-replay-button.entry-button { top: -42px !important; width: min(176px, 72vw) !important; min-height: 32px !important; font-size: 0.7rem !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.entry-button:focus-visible, body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:focus-visible, body[data-app-view="intro_ready"] #intro-start-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.entry-button:focus-visible { transform: translate3d(0, -2px, 0) !important; } body[data-app-view="intro_ready"] #intro-login-button.entry-button:active:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.entry-button:active:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.entry-button:active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(0.995) !important; } } /* Club-Login password field fix: late shared active dialog CTA state. */ #login-submit-button.club-login-primary-action.entry-button, #activation-password-submit-button.club-login-primary-action.entry-button, #coach-login-submit-button.club-login-primary-action.entry-button { min-height: var(--entry-control-height, 44px) !important; width: 100% !important; justify-self: stretch !important; border-color: color-mix(in srgb, var(--entry-cyan, #3cc3bf) 72%, rgba(255, 244, 209, 0.14)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--entry-cyan, #3cc3bf) 32%, rgba(9, 17, 21, 0.94)) 0%, rgba(6, 14, 18, 0.94) 58%, rgba(3, 6, 10, 0.94) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.075), transparent 62%) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.34), 0 0 0 1px color-mix(in srgb, var(--entry-cyan, #3cc3bf) 34%, transparent), 0 0 22px color-mix(in srgb, var(--entry-cyan, #3cc3bf) 18%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.06), inset 0 -10px 18px rgba(0, 0, 0, 0.24) !important; transform: translate3d(0, 0, 0) !important; } #login-submit-button.club-login-primary-action.entry-button:hover:not(:disabled), #activation-password-submit-button.club-login-primary-action.entry-button:hover:not(:disabled), #coach-login-submit-button.club-login-primary-action.entry-button:hover:not(:disabled), #login-submit-button.club-login-primary-action.entry-button:focus-visible, #activation-password-submit-button.club-login-primary-action.entry-button:focus-visible, #coach-login-submit-button.club-login-primary-action.entry-button:focus-visible { border-color: color-mix(in srgb, var(--entry-cyan, #3cc3bf) 88%, rgba(255, 244, 209, 0.18)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--entry-cyan, #3cc3bf) 42%, rgba(9, 17, 21, 0.94)) 0%, rgba(6, 16, 20, 0.96) 58%, rgba(3, 7, 11, 0.96) 100%), linear-gradient(90deg, rgba(255, 244, 209, 0.09), transparent 62%) !important; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38), 0 0 0 2px color-mix(in srgb, var(--entry-cyan, #3cc3bf) 38%, transparent), 0 0 28px color-mix(in srgb, var(--entry-cyan, #3cc3bf) 26%, transparent), inset 0 1px 0 rgba(255, 244, 209, 0.07) !important; filter: brightness(1.05) saturate(1.04) !important; transform: translate3d(0, -1px, 0) !important; } #login-submit-button.club-login-primary-action.entry-button:focus-visible, #activation-password-submit-button.club-login-primary-action.entry-button:focus-visible, #coach-login-submit-button.club-login-primary-action.entry-button:focus-visible { outline: none !important; } #login-submit-button.club-login-primary-action.entry-button:active:not(:disabled), #activation-password-submit-button.club-login-primary-action.entry-button:active:not(:disabled), #coach-login-submit-button.club-login-primary-action.entry-button:active:not(:disabled) { transform: translate3d(0, 0, 0) scale(0.995) !important; } #activation-password-back-button.entry-button, #coach-login-back-button.entry-button { min-height: var(--entry-control-height-compact, 42px) !important; width: 100% !important; justify-self: stretch !important; } /* NORDWERK landing page rebrand: public intro only. */ body[data-app-view="intro_ready"], body[data-app-view="intro_reveal"], body[data-app-view="intro_hold"], body[data-app-view="intro_blackout"] { overflow-x: hidden !important; background: #020507 !important; } body[data-app-view="intro_ready"] .intro-layer { min-height: 100vh !important; overflow-x: hidden !important; background: #020507 !important; } body[data-app-view="intro_ready"] .intro-backdrop, body[data-app-view="intro_ready"] .intro-background { position: fixed !important; inset: 0 !important; } body[data-app-view="intro_ready"] .intro-background { background: radial-gradient(circle at 72% 20%, rgba(255, 93, 41, 0.14), transparent 30%), radial-gradient(circle at 16% 68%, rgba(35, 172, 178, 0.13), transparent 35%), linear-gradient(90deg, rgba(2, 5, 8, 0.96) 0%, rgba(2, 5, 8, 0.72) 34%, rgba(2, 5, 8, 0.34) 58%, rgba(2, 5, 8, 0.9) 100%), linear-gradient(180deg, rgba(2, 5, 8, 0.38) 0%, rgba(2, 5, 8, 0.28) 46%, rgba(2, 5, 8, 0.94) 100%), var(--roar-app-background-image) center center / cover no-repeat !important; opacity: 1 !important; filter: saturate(0.96) contrast(1.1) brightness(0.9) !important; transform: none !important; } body[data-app-view="intro_ready"] .intro-background::before, body[data-app-view="intro_ready"] .intro-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; } body[data-app-view="intro_ready"] .intro-background::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 18%, rgba(0, 0, 0, 0.84) 100%), radial-gradient(ellipse at center, transparent 24%, rgba(0, 0, 0, 0.58) 100%); } body[data-app-view="intro_ready"] .intro-background::after { opacity: 0.22; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 72%); } body[data-app-view="intro_ready"] .intro-shell { width: 100% !important; max-width: none !important; min-height: 100vh !important; display: block !important; padding: 0 !important; pointer-events: auto !important; } body[data-app-view="intro_ready"] .intro-start-panel.nordwerk-home { position: relative !important; z-index: 8 !important; width: min(1220px, calc(100vw - 48px)) !important; min-height: 100vh !important; margin: 0 auto !important; padding: 20px 0 48px !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto minmax(430px, 58vh) auto auto !important; row-gap: clamp(22px, 4vh, 44px) !important; align-items: start !important; justify-items: stretch !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .nordwerk-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 42px); min-height: 58px; padding: 10px 0; } .nordwerk-brand { display: inline-flex; align-items: center; gap: 12px; color: rgba(244, 248, 247, 0.96); text-decoration: none; font-size: 0.98rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .nordwerk-brand-mark { box-sizing: border-box; width: 46px; height: 46px; padding: 4px; border: 1px solid rgba(191, 222, 221, 0.1); border-radius: 6px; background: rgba(2, 7, 10, 0.56); object-fit: contain; filter: brightness(1.72) contrast(1.18) saturate(1.12) drop-shadow(0 0 14px rgba(255, 92, 40, 0.24)); } .nordwerk-nav { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 34px); } .nordwerk-nav a { color: rgba(229, 238, 238, 0.72); text-decoration: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; transition: color 180ms ease; } .nordwerk-nav a:hover, .nordwerk-nav a:focus-visible { color: #f36b32; } body[data-app-view="intro_ready"] #intro-login-button.nordwerk-login-button.entry-button { grid-column: auto !important; grid-row: auto !important; width: auto !important; min-width: 126px !important; min-height: 40px !important; justify-self: end !important; padding: 0 18px !important; border: 1px solid rgba(179, 217, 216, 0.28) !important; border-radius: 8px !important; background: rgba(3, 10, 14, 0.42) !important; color: rgba(244, 248, 247, 0.86) !important; font-size: 0.72rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body[data-app-view="intro_ready"] #intro-login-button.nordwerk-login-button.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-login-button.nordwerk-login-button.entry-button:focus-visible { transform: translate3d(0, -1px, 0) !important; border-color: rgba(49, 200, 194, 0.58) !important; color: #ffffff !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), 0 0 24px rgba(49, 200, 194, 0.12) !important; } .nordwerk-hero { display: grid; align-items: center; max-width: 940px; min-height: 100%; } .nordwerk-hero-copy { display: grid; gap: 24px; } .nordwerk-hero h1 { margin: 0; color: #eef3f1; font-size: clamp(3.35rem, 7.3vw, 6.65rem); font-weight: 950; line-height: 0.91; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.36), 0 28px 80px rgba(0, 0, 0, 0.52); } .nordwerk-hero h1::first-line { color: rgba(238, 243, 241, 0.86); } .nordwerk-hero p { width: min(620px, 100%); margin: 0; color: rgba(224, 235, 235, 0.78); font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 650; line-height: 1.55; letter-spacing: 0; } .nordwerk-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } body[data-app-view="intro_ready"] #intro-start-button.nordwerk-primary-cta.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.nordwerk-ghost-cta.entry-button, .nordwerk-ghost-cta.entry-button { position: relative !important; top: auto !important; grid-column: auto !important; grid-row: auto !important; width: auto !important; min-width: 164px !important; min-height: 46px !important; padding: 0 20px !important; border-radius: 8px !important; font-size: 0.78rem !important; font-weight: 900 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; transform: none !important; } body[data-app-view="intro_ready"] #intro-start-button.nordwerk-primary-cta.entry-button { border-color: rgba(246, 97, 44, 0.74) !important; background: linear-gradient(180deg, rgba(246, 97, 44, 0.95), rgba(126, 36, 22, 0.94)), #f36b32 !important; color: #fff7ef !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 34px rgba(246, 97, 44, 0.22) !important; } body[data-app-view="intro_ready"] #aim-lab-entry-button.nordwerk-ghost-cta.entry-button, .nordwerk-ghost-cta.entry-button { border: 1px solid rgba(210, 231, 230, 0.22) !important; background: rgba(3, 10, 14, 0.54) !important; color: rgba(239, 247, 246, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body[data-app-view="intro_ready"] #intro-start-button.nordwerk-primary-cta.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #intro-start-button.nordwerk-primary-cta.entry-button:focus-visible, body[data-app-view="intro_ready"] #aim-lab-entry-button.nordwerk-ghost-cta.entry-button:hover:not(:disabled), body[data-app-view="intro_ready"] #aim-lab-entry-button.nordwerk-ghost-cta.entry-button:focus-visible, .nordwerk-ghost-cta.entry-button:hover:not(:disabled), .nordwerk-ghost-cta.entry-button:focus-visible { transform: translate3d(0, -2px, 0) !important; } .nordwerk-modules { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(190, 220, 218, 0.13); border-radius: 8px; background: linear-gradient(180deg, rgba(5, 13, 17, 0.72), rgba(3, 8, 12, 0.66)), rgba(3, 8, 12, 0.68); box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); } .nordwerk-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 0 4px 2px; } .nordwerk-section-head h2 { margin: 0; color: rgba(244, 248, 247, 0.94); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .nordwerk-section-head p { margin: 0; color: rgba(218, 231, 231, 0.56); font-size: 0.78rem; font-weight: 650; line-height: 1.4; } .nordwerk-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .nordwerk-module-card { position: relative; min-height: 178px; display: grid; align-content: space-between; gap: 18px; padding: 20px; overflow: hidden; border: 1px solid rgba(191, 222, 221, 0.13); border-radius: 8px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 36%), linear-gradient(180deg, rgba(8, 18, 23, 0.82), rgba(3, 8, 12, 0.78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .nordwerk-module-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 78% 18%, rgba(49, 200, 194, 0.14), transparent 34%), radial-gradient(circle at 18% 78%, rgba(246, 97, 44, 0.16), transparent 42%); transition: opacity 180ms ease; } .nordwerk-module-card:hover, .nordwerk-module-card:focus-within { transform: translate3d(0, -4px, 0) scale(1.018); border-color: rgba(49, 200, 194, 0.42); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), 0 0 32px rgba(49, 200, 194, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .nordwerk-module-card:hover::before, .nordwerk-module-card:focus-within::before { opacity: 1; } .nordwerk-module-index { position: relative; z-index: 1; color: rgba(246, 97, 44, 0.74); font-size: 1.7rem; font-weight: 950; line-height: 1; } .nordwerk-module-card h3, .nordwerk-module-card p { position: relative; z-index: 1; margin: 0; } .nordwerk-module-card h3 { color: rgba(244, 248, 247, 0.92); font-size: 1.18rem; font-weight: 920; letter-spacing: 0.02em; text-transform: uppercase; } .nordwerk-module-card p { color: rgba(222, 233, 233, 0.66); font-size: 0.88rem; font-weight: 600; line-height: 1.48; } .nordwerk-module-action { position: relative; z-index: 1; width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 8px 10px 8px 0; border: 0; background: transparent; color: rgba(239, 247, 246, 0.78); font: inherit; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; cursor: pointer; } .nordwerk-module-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; transition: transform 180ms ease; } .nordwerk-module-action:hover, .nordwerk-module-action:focus-visible { color: #31c8c2; outline: none; } .nordwerk-module-action:hover svg, .nordwerk-module-action:focus-visible svg { transform: translate3d(3px, 0, 0); } .nordwerk-secondary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .nordwerk-secondary-panel { min-height: 148px; padding: 20px; border: 1px solid rgba(191, 222, 221, 0.12); border-radius: 8px; background: rgba(3, 9, 13, 0.64); backdrop-filter: blur(8px); } .nordwerk-secondary-panel span { display: block; margin-bottom: 18px; color: rgba(246, 97, 44, 0.86); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .nordwerk-secondary-panel h3 { margin: 0 0 8px; color: rgba(244, 248, 247, 0.9); font-size: 1rem; font-weight: 900; letter-spacing: 0; } .nordwerk-secondary-panel p { margin: 0; color: rgba(222, 233, 233, 0.62); font-size: 0.86rem; font-weight: 600; line-height: 1.5; } @media (max-width: 960px) { body[data-app-view="intro_ready"] .intro-start-panel.nordwerk-home { width: min(100%, calc(100vw - 32px)) !important; grid-template-rows: auto minmax(390px, auto) auto auto !important; padding-bottom: 34px !important; } .nordwerk-header { grid-template-columns: auto auto; justify-content: space-between; } .nordwerk-nav { grid-column: 1 / -1; justify-content: start; gap: 18px; overflow-x: auto; padding-bottom: 2px; } .nordwerk-module-grid, .nordwerk-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { body[data-app-view="intro_ready"] .intro-background { background: radial-gradient(circle at 72% 18%, rgba(255, 93, 41, 0.16), transparent 38%), linear-gradient(90deg, rgba(2, 5, 8, 0.98), rgba(2, 5, 8, 0.68)), linear-gradient(180deg, rgba(2, 5, 8, 0.3), rgba(2, 5, 8, 0.94)), var(--roar-app-background-image) 58% center / cover no-repeat !important; } body[data-app-view="intro_ready"] .intro-start-panel.nordwerk-home { width: min(100%, calc(100vw - 24px)) !important; min-height: 100vh !important; padding: 14px 0 28px !important; row-gap: 22px !important; } .nordwerk-header { min-height: auto; gap: 12px; } .nordwerk-brand { gap: 9px; font-size: 0.82rem; } .nordwerk-brand-mark { width: 34px; height: 34px; } body[data-app-view="intro_ready"] #intro-login-button.nordwerk-login-button.entry-button { min-width: 104px !important; min-height: 36px !important; padding: 0 12px !important; font-size: 0.66rem !important; } .nordwerk-nav { gap: 14px; padding-bottom: 8px; } .nordwerk-nav a { font-size: 0.66rem; white-space: nowrap; } .nordwerk-hero { min-height: 360px; align-items: end; padding: 22px 0 6px; } .nordwerk-hero-copy { gap: 18px; } .nordwerk-hero h1 { font-size: 2.48rem; line-height: 0.96; } .nordwerk-hero p { font-size: 0.98rem; line-height: 1.48; } .nordwerk-hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; } body[data-app-view="intro_ready"] #intro-start-button.nordwerk-primary-cta.entry-button, body[data-app-view="intro_ready"] #aim-lab-entry-button.nordwerk-ghost-cta.entry-button, .nordwerk-ghost-cta.entry-button { width: 100% !important; min-width: 0 !important; min-height: 45px !important; } .nordwerk-modules { padding: 12px; } .nordwerk-section-head { display: grid; gap: 6px; } .nordwerk-module-grid, .nordwerk-secondary { grid-template-columns: 1fr; } .nordwerk-module-card { min-height: 154px; padding: 18px; } .nordwerk-secondary-panel { min-height: 128px; } } /* NORDWERK background integration pass: start, briefing, name and club entry. */ body[data-app-view="intro_blackout"], body[data-app-view="intro_reveal"], body[data-app-view="intro_hold"], body[data-app-view="intro_ready"], body[data-app-view="intro_briefing"], body[data-app-view="name_entry"], body[data-app-view="login_entry"] { background: linear-gradient(180deg, #020507 0%, #020507 100%) !important; overflow-x: hidden !important; } body[data-app-view="intro_blackout"] .intro-backdrop, body[data-app-view="intro_reveal"] .intro-backdrop, body[data-app-view="intro_hold"] .intro-backdrop, body[data-app-view="intro_ready"] .intro-backdrop, body[data-app-view="intro_briefing"] .intro-backdrop, body[data-app-view="name_entry"] .intro-backdrop, body[data-app-view="login_entry"] .intro-backdrop, body[data-app-view="intro_blackout"] .intro-background, body[data-app-view="intro_reveal"] .intro-background, body[data-app-view="intro_hold"] .intro-background, body[data-app-view="intro_ready"] .intro-background, body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="name_entry"] .intro-background, body[data-app-view="login_entry"] .intro-background { position: fixed !important; inset: 0 !important; } body[data-app-view="intro_blackout"] .intro-background, body[data-app-view="intro_reveal"] .intro-background, body[data-app-view="intro_hold"] .intro-background, body[data-app-view="intro_ready"] .intro-background, body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="name_entry"] .intro-background, body[data-app-view="login_entry"] .intro-background { opacity: 1 !important; transform: none !important; filter: saturate(1.08) contrast(1.03) brightness(1.06) !important; background: radial-gradient(circle at 74% 18%, rgba(255, 93, 41, 0.15), transparent 31%), radial-gradient(circle at 14% 72%, rgba(49, 200, 194, 0.12), transparent 36%), linear-gradient(90deg, rgba(2, 5, 8, 0.44) 0%, rgba(2, 5, 8, 0.2) 34%, rgba(2, 5, 8, 0.08) 58%, rgba(2, 5, 8, 0.34) 100%), linear-gradient(180deg, rgba(2, 5, 8, 0.14) 0%, rgba(2, 5, 8, 0.08) 42%, rgba(2, 5, 8, 0.34) 100%), var(--roar-background-start-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } body[data-app-view="intro_briefing"] .intro-background { background: radial-gradient(circle at 74% 18%, rgba(255, 93, 41, 0.15), transparent 31%), radial-gradient(circle at 14% 72%, rgba(49, 200, 194, 0.12), transparent 36%), linear-gradient(90deg, rgba(2, 5, 8, 0.44) 0%, rgba(2, 5, 8, 0.2) 34%, rgba(2, 5, 8, 0.08) 58%, rgba(2, 5, 8, 0.34) 100%), linear-gradient(180deg, rgba(2, 5, 8, 0.14) 0%, rgba(2, 5, 8, 0.08) 42%, rgba(2, 5, 8, 0.34) 100%), var(--roar-background-license-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } body[data-app-view="intro_blackout"] .intro-background::before, body[data-app-view="intro_reveal"] .intro-background::before, body[data-app-view="intro_hold"] .intro-background::before, body[data-app-view="intro_ready"] .intro-background::before, body[data-app-view="intro_briefing"] .intro-background::before, body[data-app-view="name_entry"] .intro-background::before, body[data-app-view="login_entry"] .intro-background::before, body[data-app-view="intro_blackout"] .intro-background::after, body[data-app-view="intro_reveal"] .intro-background::after, body[data-app-view="intro_hold"] .intro-background::after, body[data-app-view="intro_ready"] .intro-background::after, body[data-app-view="intro_briefing"] .intro-background::after, body[data-app-view="name_entry"] .intro-background::after, body[data-app-view="login_entry"] .intro-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; } body[data-app-view="intro_blackout"] .intro-background::before, body[data-app-view="intro_reveal"] .intro-background::before, body[data-app-view="intro_hold"] .intro-background::before, body[data-app-view="intro_ready"] .intro-background::before, body[data-app-view="intro_briefing"] .intro-background::before, body[data-app-view="name_entry"] .intro-background::before, body[data-app-view="login_entry"] .intro-background::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 24%, rgba(0, 0, 0, 0.26) 100%), radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.18) 100%); } body[data-app-view="intro_blackout"] .intro-background::after, body[data-app-view="intro_reveal"] .intro-background::after, body[data-app-view="intro_hold"] .intro-background::after, body[data-app-view="intro_ready"] .intro-background::after, body[data-app-view="intro_briefing"] .intro-background::after, body[data-app-view="name_entry"] .intro-background::after, body[data-app-view="login_entry"] .intro-background::after { opacity: 0.08; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 74%); } body[data-app-view="intro_blackout"] .intro-layer::after, body[data-app-view="intro_reveal"] .intro-layer::after, body[data-app-view="intro_hold"] .intro-layer::after, body[data-app-view="intro_ready"] .intro-layer::after, body[data-app-view="intro_briefing"] .intro-layer::after, body[data-app-view="name_entry"] .intro-layer::after, body[data-app-view="login_entry"] .intro-layer::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08)), radial-gradient(ellipse at 50% 46%, transparent, rgba(0, 0, 0, 0.06) 72%) !important; } body[data-app-view="intro_briefing"] .intro-panel-briefing, body[data-app-view="name_entry"] .intro-panel-name, body[data-app-view="login_entry"] .intro-panel-login { background: linear-gradient(180deg, rgba(5, 13, 17, 0.9), rgba(3, 8, 12, 0.86)), rgba(3, 8, 12, 0.86) !important; border-color: rgba(190, 220, 218, 0.16) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } @media (max-width: 620px) { body[data-app-view="intro_blackout"] .intro-background, body[data-app-view="intro_reveal"] .intro-background, body[data-app-view="intro_hold"] .intro-background, body[data-app-view="intro_ready"] .intro-background, body[data-app-view="intro_briefing"] .intro-background, body[data-app-view="name_entry"] .intro-background, body[data-app-view="login_entry"] .intro-background { background: radial-gradient(circle at 72% 18%, rgba(255, 93, 41, 0.16), transparent 38%), linear-gradient(90deg, rgba(2, 5, 8, 0.56), rgba(2, 5, 8, 0.24)), linear-gradient(180deg, rgba(2, 5, 8, 0.14), rgba(2, 5, 8, 0.38)), var(--roar-background-start-image, var(--roar-app-background-image)) 58% center / cover no-repeat !important; } body[data-app-view="intro_briefing"] .intro-background { background: radial-gradient(circle at 72% 18%, rgba(255, 93, 41, 0.16), transparent 38%), linear-gradient(90deg, rgba(2, 5, 8, 0.56), rgba(2, 5, 8, 0.24)), linear-gradient(180deg, rgba(2, 5, 8, 0.14), rgba(2, 5, 8, 0.38)), var(--roar-background-license-image, var(--roar-app-background-image)) 58% center / cover no-repeat !important; } } /* NORDWERK completion/link background consistency guard. This final scoped block keeps the post-license flow on the global/screen background token and removes the persistent scan highlights from final CTAs. */ :root { --club-bg-global: var(--roar-app-background-image); --club-bg-start: var(--club-bg-global); --club-bg-license: var(--club-bg-global); --club-bg-link-submit: var(--club-bg-global); --club-bg-completion: var(--club-bg-global); --roar-background-start-image: var(--club-bg-start); --roar-background-license-image: var(--club-bg-license); --roar-background-link-submit-image: var(--club-bg-link-submit); --roar-background-completion-image: var(--club-bg-completion); --roar-background-club-login-image: var(--roar-app-background-image); --roar-background-member-hub-image: var(--roar-app-background-image); --roar-background-aim-shell-image: var(--roar-app-background-image); } html body[data-app-view="completion"] { background-color: #020507 !important; } html body[data-app-view="completion"] #roar-view-background-layer { opacity: 1 !important; background-image: var(--roar-background-completion-image, var(--roar-app-background-image)) !important; background-position: center center !important; background-size: cover !important; } html body[data-app-view="completion"][data-flow-state="capture"] #roar-view-background-layer, html body[data-app-view="completion"][data-flow-state="loading"] #roar-view-background-layer { background-image: var(--roar-background-link-submit-image, var(--roar-app-background-image)) !important; } html body[data-app-view="completion"][data-flow-state="faded"] #roar-view-background-layer { background-image: var(--roar-background-completion-image, var(--roar-app-background-image)) !important; } html body[data-app-view="completion"] #license-app #completion-panel.completion-panel { --completion-visual-image: var(--roar-background-link-submit-image, var(--roar-app-background-image)); --completion-fade-image: var(--roar-background-completion-image, var(--roar-app-background-image)); } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel { display: grid !important; align-content: center !important; justify-items: center !important; padding: clamp(20px, 5vw, 64px) !important; overflow: auto !important; background: radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--roar-accent-cyan, #6f96a3) 13%, transparent), transparent 34%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--roar-accent-orange, #c96f35) 10%, transparent), transparent 38%), linear-gradient(180deg, rgba(2, 5, 8, 0.50), rgba(2, 5, 8, 0.74)), var(--roar-background-link-submit-image, var(--roar-app-background-image)) center center / cover no-repeat !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::before, html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-panel.completion-panel::after, html body[data-app-view="completion"] #license-app .completion-panel-window::before, html body[data-app-view="completion"] #license-app .completion-visual::after { content: none !important; display: none !important; animation: none !important; } html body[data-app-view="completion"] #license-app .completion-panel-window { width: min(720px, calc(100vw - 40px)) !important; display: grid !important; gap: 16px !important; padding: clamp(20px, 3vw, 30px) !important; border: 1px solid color-mix(in srgb, var(--roar-panel-border, #4b6470) 52%, transparent) !important; border-radius: var(--roar-panel-radius, 10px) !important; background: linear-gradient(180deg, rgba(10, 17, 24, 0.90), rgba(3, 6, 10, 0.86)), color-mix(in srgb, var(--roar-panel-bg, rgba(10, 17, 24, 0.94)) 84%, transparent) !important; box-shadow: 0 28px 72px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; backdrop-filter: blur(10px) saturate(1.05) !important; -webkit-backdrop-filter: blur(10px) saturate(1.05) !important; } html body[data-app-view="completion"] #license-app .completion-panel-window > * { position: relative !important; z-index: 1 !important; width: 100% !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-visual { display: none !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-kicker { color: color-mix(in srgb, var(--roar-accent-cyan, #6f96a3) 76%, var(--roar-text-strong, #f7fbfb)) !important; text-shadow: none !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { color: var(--roar-text-strong, #f7fbfb) !important; font-size: clamp(2.2rem, 4.4vw, 4.6rem) !important; line-height: 0.96 !important; text-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important; animation: none !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-body { color: color-mix(in srgb, var(--roar-text, #e5edf0) 88%, transparent) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-form, html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-note { border-color: color-mix(in srgb, var(--roar-panel-border, #4b6470) 44%, transparent) !important; background: linear-gradient(180deg, rgba(16, 25, 35, 0.72), rgba(3, 6, 10, 0.66)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 32px rgba(0, 0, 0, 0.26) !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-input { border-color: color-mix(in srgb, var(--roar-accent-cyan, #6f96a3) 30%, var(--roar-panel-border, #4b6470)) !important; background: linear-gradient(180deg, rgba(3, 10, 14, 0.94), rgba(3, 8, 12, 0.90)) !important; color: var(--roar-text-strong, #f7fbfb) !important; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--roar-accent-cyan, #6f96a3) 42%, transparent) !important; } html body[data-flow-state="faded"] #completion-fade-overlay.completion-fade-overlay { background: radial-gradient(circle at 18% 34%, color-mix(in srgb, var(--roar-accent-orange, #c96f35) 12%, transparent), transparent 34%), radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--roar-accent-cyan, #6f96a3) 10%, transparent), transparent 30%), linear-gradient(180deg, rgba(2, 5, 8, 0.58), rgba(2, 5, 8, 0.82)), var(--roar-background-completion-image, var(--roar-app-background-image)) center center / cover no-repeat !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: completion-thanks-arrive 520ms cubic-bezier(0.16, 0.76, 0.24, 1) both !important; } html body[data-flow-state="faded"] #completion-fade-overlay.completion-fade-overlay::after, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta::before, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-faceit-link::before, html body[data-app-view="completion"] #license-app #completion-submit.primary::before { content: none !important; display: none !important; animation: none !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-faceit-link, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-warmup-button { overflow: hidden !important; filter: none !important; animation: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 14px 30px rgba(0, 0, 0, 0.34) !important; } html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta:hover, html body[data-flow-state="faded"] #completion-fade-overlay .license-final-cta:focus-visible { transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 32px rgba(0, 0, 0, 0.38) !important; } @media (max-width: 760px) { html body[data-app-view="completion"][data-flow-state="capture"] #license-app .completion-panel-window { width: min(100%, calc(100vw - 28px)) !important; gap: 12px !important; padding: 18px !important; } html body[data-app-view="completion"][data-flow-state="capture"] #license-app #completion-title { font-size: clamp(2rem, 11vw, 3.8rem) !important; } } /* Design-Lab background runtime bridge phase 2: surface-only bindings. */ :root { --club-bg-club-login: var(--club-bg-global, var(--roar-app-background-image)); --club-bg-member-hub: var(--club-bg-global, var(--roar-app-background-image)); --club-bg-coach-hub: var(--club-bg-global, var(--roar-app-background-image)); --club-bg-welcome-guide: var(--club-bg-global, var(--roar-app-background-image)); --club-bg-radio: var(--club-bg-global, var(--roar-app-background-image)); --club-bg-aim-shell: var(--club-bg-global, var(--roar-app-background-image)); --roar-background-club-login-image: var(--club-bg-club-login); --roar-background-member-hub-image: var(--club-bg-member-hub); --roar-background-coach-hub-image: var(--club-bg-coach-hub); --roar-background-welcome-guide-image: var(--club-bg-welcome-guide); --roar-background-radio-image: var(--club-bg-radio); --roar-background-aim-shell-image: var(--club-bg-aim-shell); } html body[data-app-view="login_entry"] .intro-background, html body:has(#coach-login-panel:not(.hidden)) .intro-background { background: radial-gradient(circle at 74% 18%, rgba(201, 111, 53, 0.14), transparent 31%), radial-gradient(circle at 14% 72%, rgba(111, 150, 163, 0.12), transparent 36%), linear-gradient(90deg, rgba(2, 5, 8, 0.44), rgba(2, 5, 8, 0.26)), var(--roar-background-club-login-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } html body[data-app-view="member_hub"] .intro-background { background: radial-gradient(circle at 74% 18%, rgba(201, 111, 53, 0.13), transparent 31%), radial-gradient(circle at 14% 72%, rgba(111, 150, 163, 0.14), transparent 36%), linear-gradient(90deg, rgba(2, 5, 8, 0.52), rgba(2, 5, 8, 0.3)), var(--roar-background-member-hub-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } html body:has(#coach-hub:not(.hidden)) .intro-background { background: radial-gradient(circle at 74% 18%, rgba(201, 111, 53, 0.12), transparent 31%), radial-gradient(circle at 14% 72%, rgba(111, 150, 163, 0.16), transparent 36%), linear-gradient(90deg, rgba(2, 5, 8, 0.5), rgba(2, 5, 8, 0.28)), var(--roar-background-coach-hub-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } html body[data-app-view="member_hub"] #roar-view-background-layer, html body:has(#coach-hub:not(.hidden)) #roar-view-background-layer, html body:has(#coach-login-panel:not(.hidden)) #roar-view-background-layer { opacity: 0 !important; background-image: none !important; } html body[data-app-view="aim_arena"] #roar-view-background-layer { opacity: 1 !important; background-image: var(--roar-background-aim-shell-image, var(--roar-app-background-image)) !important; background-position: center center !important; background-size: cover !important; } .welcome-guide { background: linear-gradient(180deg, rgba(0, 0, 0, 0.74), rgba(2, 5, 10, 0.88)), linear-gradient(90deg, rgba(255, 122, 32, 0.12), transparent 36%, rgba(241, 187, 84, 0.08)), var(--roar-background-welcome-guide-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } .roar-radio-player { background: linear-gradient(180deg, rgba(5, 10, 15, 0.88), rgba(2, 5, 8, 0.94)), radial-gradient(circle at 18% 0%, rgba(111, 150, 163, 0.18), transparent 34%), var(--roar-background-radio-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } /* Member Hub 1280x720 viewport containment fix. */ body[data-app-view="member_hub"] { height: 100vh !important; min-height: 100vh !important; overflow: hidden !important; } body[data-app-view="member_hub"] #license-app, body[data-app-view="member_hub"] .app-shell, body[data-app-view="member_hub"] .intro-layer, body[data-app-view="member_hub"] .intro-shell { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } body[data-app-view="member_hub"] .intro-layer { padding: 10px !important; } body[data-app-view="member_hub"] .intro-shell { padding: 0 !important; } body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub { width: min(1240px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; min-height: 0 !important; max-height: calc(100vh - 20px) !important; grid-template-columns: minmax(152px, 166px) minmax(0, 1fr) minmax(244px, 268px) !important; align-items: stretch !important; overflow: hidden !important; } body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="lobby"], body[data-app-view="member_hub"] .member-hub[data-active-member-section="lobby"] { grid-template-columns: minmax(152px, 166px) minmax(0, 1fr) !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; } @media (min-width: 921px) and (max-height: 760px) { body[data-app-view="member_hub"] .member-hub-content { padding: 12px !important; } body[data-app-view="member_hub"] .member-hub-title { font-size: clamp(1.72rem, 2.35vw, 2.12rem) !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-hub-nav { padding: 12px 9px 10px !important; } body[data-app-view="member_hub"] .member-hub-nav-head { min-height: 52px !important; padding-bottom: 10px !important; } body[data-app-view="member_hub"] .member-connect-rail { padding: 12px 10px !important; } } /* Member Hub 1280x720 reference-match follow-up: stable shell, no visible rails. */ body[data-app-view="member_hub"] * { box-sizing: border-box !important; } body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] .member-hub, body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="lobby"], body[data-app-view="member_hub"] .member-hub[data-active-member-section="lobby"] { width: min(1240px, calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; max-height: calc(100vh - 20px) !important; grid-template-columns: minmax(150px, 162px) minmax(0, 1fr) minmax(232px, 256px) !important; gap: 8px !important; align-self: center !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="lobby"] .member-connect-rail { display: grid !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } body[data-app-view="member_hub"] .member-hub-content::-webkit-scrollbar, body[data-app-view="member_hub"] .member-hub-nav::-webkit-scrollbar, body[data-app-view="member_hub"] .member-connect-rail::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } body[data-app-view="member_hub"] .member-hub-content { gap: 7px !important; padding: 10px !important; padding-bottom: 8px !important; } body[data-app-view="member_hub"] .member-hub-eyebrow { font-size: 0.58rem !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-hub-title { font-size: clamp(1.46rem, 2vw, 1.9rem) !important; line-height: 0.98 !important; } body[data-app-view="member_hub"] .member-hub-statusline { min-height: 0 !important; gap: 5px !important; margin: 0 !important; } body[data-app-view="member_hub"] .member-hub-sections, body[data-app-view="member_hub"] .member-hub-section { display: block !important; height: auto !important; min-height: 0 !important; } body[data-app-view="member_hub"] .member-hub-section { gap: 7px !important; } body[data-app-view="member_hub"] .member-hub-section.hidden { display: none !important; } body[data-app-view="member_hub"] .member-hub-section > * + * { margin-top: 7px !important; } body[data-app-view="member_hub"] .member-hub-section.is-active { height: auto !important; max-height: none !important; overflow: visible !important; } body[data-app-view="member_hub"] .member-start-panel { gap: 8px !important; padding: 10px !important; border-radius: 8px !important; } body[data-app-view="member_hub"] .member-start-head { gap: 8px !important; } body[data-app-view="member_hub"] .member-start-head strong { font-size: clamp(1rem, 1.5vw, 1.22rem) !important; line-height: 1.04 !important; } body[data-app-view="member_hub"] .member-hub-intro, body[data-app-view="member_hub"] .member-start-next > p { font-size: 0.68rem !important; line-height: 1.18 !important; } body[data-app-view="member_hub"] .member-start-next, body[data-app-view="member_hub"] .member-reference-band, body[data-app-view="member_hub"] .member-hub-collapsible { gap: 6px !important; padding: 8px !important; border-radius: 8px !important; } body[data-app-view="member_hub"] .member-hub-action-row { gap: 6px !important; } body[data-app-view="member_hub"] .member-hub-primary-action, body[data-app-view="member_hub"] .member-hub-secondary-action { min-height: 28px !important; padding: 0 9px !important; font-size: 0.64rem !important; } body[data-app-view="member_hub"] .member-status-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-status-tile, body[data-app-view="member_hub"] .member-today-grid article, body[data-app-view="member_hub"] .member-profile-signal-grid article, body[data-app-view="member_hub"] .member-profile-review-row article, body[data-app-view="member_hub"] .member-training-window-grid article, body[data-app-view="member_hub"] .member-trend-grid article, body[data-app-view="member_hub"] .member-review-status-list span { gap: 2px !important; padding: 6px !important; } body[data-app-view="member_hub"] .member-status-tile strong, body[data-app-view="member_hub"] .member-today-grid strong, body[data-app-view="member_hub"] .member-profile-signal-grid strong, body[data-app-view="member_hub"] .member-profile-review-row strong, body[data-app-view="member_hub"] .member-training-window-grid strong, body[data-app-view="member_hub"] .member-trend-grid strong, body[data-app-view="member_hub"] .member-review-status-list strong { font-size: 0.7rem !important; } body[data-app-view="member_hub"] .member-today-grid, body[data-app-view="member_hub"] .member-profile-signal-grid, body[data-app-view="member_hub"] .member-training-window-grid, body[data-app-view="member_hub"] .member-trend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px !important; } body[data-app-view="member_hub"] .member-hub-notice { min-height: 24px !important; width: fit-content !important; max-width: min(420px, 100%) !important; padding: 3px 8px !important; border-radius: 999px !important; background: rgba(5, 9, 15, 0.78) !important; color: rgba(255, 226, 184, 0.72) !important; font-size: 0.62rem !important; line-height: 1.16 !important; opacity: 0.78 !important; pointer-events: none !important; } body[data-app-view="member_hub"] .member-hub-nav { gap: 4px !important; padding: 9px 7px !important; align-content: start !important; } body[data-app-view="member_hub"] .member-hub-nav-head { min-height: 38px !important; padding: 0 3px 6px !important; } body[data-app-view="member_hub"] .member-hub-nav-head strong { font-size: 1.02rem !important; } body[data-app-view="member_hub"] .member-hub-nav-head span { font-size: 0.52rem !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-hub-nav-group { gap: 1px !important; } body[data-app-view="member_hub"] .member-hub-nav-button { min-height: 27px !important; grid-template-columns: 18px minmax(0, 1fr) !important; gap: 5px !important; padding: 0 6px !important; border-radius: 6px !important; } body[data-app-view="member_hub"] .member-hub-nav-button::before { width: 13px !important; height: 13px !important; border-radius: 4px !important; } body[data-app-view="member_hub"] .member-hub-nav-button strong { font-size: 0.65rem !important; line-height: 1.05 !important; overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints { display: grid !important; gap: 1px !important; padding-left: 23px !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints button { min-height: 19px !important; padding: 0 5px !important; font-size: 0.56rem !important; line-height: 1.05 !important; overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-hub-nav-button.logout { min-height: 25px !important; margin-top: 4px !important; font-size: 0.56rem !important; } body[data-app-view="member_hub"] .member-connect-rail { gap: 7px !important; padding: 10px 8px !important; align-content: start !important; } body[data-app-view="member_hub"] .member-connect-rail-head { gap: 4px !important; padding-bottom: 5px !important; } body[data-app-view="member_hub"] .member-connect-rail-head h2 { font-size: 1rem !important; line-height: 1.05 !important; } body[data-app-view="member_hub"] .member-connect-rail-head p, body[data-app-view="member_hub"] .member-connect-rail-note, body[data-app-view="member_hub"] .member-connect-state-card p, body[data-app-view="member_hub"] .member-connect-row-reason { font-size: 0.62rem !important; line-height: 1.16 !important; } body[data-app-view="member_hub"] .member-connect-state-list, body[data-app-view="member_hub"] .member-connect-player-list { gap: 5px !important; } body[data-app-view="member_hub"] .member-connect-state-card, body[data-app-view="member_hub"] .member-connect-card { gap: 5px !important; padding: 7px !important; border-radius: 7px !important; } body[data-app-view="member_hub"] .member-connect-state-card span, body[data-app-view="member_hub"] .member-connect-card-head strong { font-size: 0.68rem !important; line-height: 1.08 !important; } @media (min-width: 921px) and (max-height: 760px) { body[data-app-view="member_hub"] .member-connect-player-list > .member-connect-card:nth-of-type(n + 4) { display: none !important; } body[data-app-view="member_hub"] .member-connect-rail { overflow-y: hidden !important; } } /* Nordwerk Member Hub component fidelity pass: 1280x720 dashboard fit. */ body[data-app-view="member_hub"] .member-hub * { min-width: 0 !important; } body[data-app-view="member_hub"] .member-hub button, body[data-app-view="member_hub"] .member-hub p, body[data-app-view="member_hub"] .member-hub span, body[data-app-view="member_hub"] .member-hub strong, body[data-app-view="member_hub"] .member-hub em { overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-help-trigger { min-width: 20px !important; min-height: 20px !important; width: 20px !important; height: 20px !important; padding: 0 !important; border-radius: 999px !important; font-size: 0.56rem !important; font-weight: 900 !important; line-height: 1 !important; opacity: 0.9 !important; } body[data-app-view="member_hub"] .member-help-trigger > span[aria-hidden="true"] { font-size: 0 !important; line-height: 0 !important; } body[data-app-view="member_hub"] .member-help-trigger::after { content: "i" !important; display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; color: rgba(255, 226, 184, 0.86) !important; font-size: 0.62rem !important; font-weight: 950 !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-help-trigger:not(.is-section-help) { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; padding: 0 !important; font-size: 0.58rem !important; } body[data-app-view="member_hub"] .member-help-label { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; max-width: 100% !important; } body[data-app-view="member_hub"] .member-help-label > span { min-width: 0 !important; } body[data-app-view="member_hub"] .member-section-heading { align-items: center !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-section-heading-actions { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-radar-plot { overflow: visible !important; background: radial-gradient(circle at center, rgba(60, 195, 191, 0.12) 0 2px, transparent 3px), linear-gradient(180deg, rgba(4, 16, 19, 0.78), rgba(3, 8, 12, 0.88)) !important; } body[data-app-view="member_hub"] .member-radar-plot::after { content: none !important; } body[data-app-view="member_hub"] .member-radar-label { z-index: 3 !important; box-shadow: none !important; } body[data-app-view="member_hub"] .member-club-formbar, body[data-app-view="member_hub"] .member-snapshot-meter { height: 5px !important; border-radius: 999px !important; background: rgba(255, 244, 209, 0.12) !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-club-formbar span, body[data-app-view="member_hub"] .member-snapshot-meter span { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, rgba(60, 195, 191, 0.92), rgba(255, 122, 32, 0.86)) !important; } body[data-app-view="member_hub"] .member-connect-title-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-connect-card { min-height: 0 !important; } body[data-app-view="member_hub"] .member-connect-row-button { grid-template-columns: minmax(0, 1fr) auto !important; gap: 6px !important; text-align: left !important; } body[data-app-view="member_hub"] .member-connect-row-player strong { font-size: 0.72rem !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-connect-row-player em, body[data-app-view="member_hub"] .member-connect-row-reason strong { font-size: 0.58rem !important; line-height: 1.08 !important; } body[data-app-view="member_hub"] .member-connect-row-badge { display: none !important; } body[data-app-view="member_hub"] .member-connect-card > .member-connect-card-cta { min-height: 26px !important; font-size: 0.6rem !important; } body[data-app-view="member_hub"] .member-profile-signal-grid article p { display: none !important; } body[data-app-view="member_hub"] .member-access-detail-list, body[data-app-view="member_hub"] .member-access-statusline, body[data-app-view="member_hub"] .member-snapshot-meta-grid, body[data-app-view="member_hub"] .member-snapshot-metric-grid, body[data-app-view="member_hub"] .member-section-preview-grid, body[data-app-view="member_hub"] .member-performance-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-reviews-reference { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(230px, 0.9fr) !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-teammate-review-panel { gap: 7px !important; } body[data-app-view="member_hub"] .member-teammate-review-gate { grid-template-columns: minmax(0, 1.05fr) minmax(230px, 0.95fr) !important; align-items: start !important; gap: 8px !important; padding: 10px !important; } body[data-app-view="member_hub"] .member-teammate-review-gate-copy { align-content: start !important; } body[data-app-view="member_hub"] .member-teammate-review-gate > .member-review-weight-card { grid-column: 2 !important; grid-row: 1 / span 2 !important; } body[data-app-view="member_hub"] .member-teammate-review-gate > .member-teammate-review-list, body[data-app-view="member_hub"] .member-teammate-review-gate > .member-teammate-review-completed { grid-column: 1 / -1 !important; } body[data-app-view="member_hub"] .member-review-weight-card { gap: 6px !important; padding: 8px !important; } body[data-app-view="member_hub"] .member-review-weight-values { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-review-weight-help { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-review-weight-help li { border-radius: 8px !important; } body[data-app-view="member_hub"] .member-teammate-review-form { max-height: 320px !important; overflow-y: auto !important; scrollbar-width: none !important; } body[data-app-view="member_hub"] .member-teammate-review-form::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } body[data-app-view="member_hub"] details[data-member-detail-group] { scroll-margin-top: 300px !important; } body[data-app-view="member_hub"] .member-connect-rail-note { font-size: 0 !important; line-height: 0 !important; } body[data-app-view="member_hub"] .member-connect-rail-note::before { content: "Team-Fit nutzt aktuelle Club-Signale." !important; color: rgba(255, 226, 184, 0.76) !important; font-size: 0.62rem !important; font-weight: 780 !important; line-height: 1.16 !important; } @media (min-width: 921px) and (max-height: 760px) { body[data-app-view="member_hub"] .member-hub-content { overflow-y: auto !important; scrollbar-width: none !important; } body[data-app-view="member_hub"] .member-hub-title { font-size: clamp(1.4rem, 1.85vw, 1.72rem) !important; } body[data-app-view="member_hub"] .member-section-note { font-size: 0.66rem !important; line-height: 1.18 !important; } body[data-app-view="member_hub"] .member-performance-radar-row { grid-template-columns: minmax(120px, 1fr) 150px minmax(120px, 1fr) !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-radar-plot { width: 150px !important; } body[data-app-view="member_hub"] .member-radar-label { font-size: 0.42rem !important; max-width: 52px !important; } body[data-app-view="member_hub"] .member-teammate-review-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-teammate-review-item { min-height: 52px !important; padding: 7px !important; } body[data-app-view="member_hub"] .member-teammate-review-cta { min-height: 28px !important; white-space: normal !important; } body[data-app-view="member_hub"] .member-teammate-review-panel > .member-teammate-review-form { display: none !important; } } /* Design-System Bridge Slice 2: authenticated member hub token bridge. */ :root { --club-bg: var(--club-public-bg, var(--web-v1-bg, var(--roar-bg, #05090b))); --club-bg-deep: var(--club-public-bg-soft, var(--web-v1-bg-deep, var(--roar-bg-deep, #030709))); --club-surface: var(--club-public-surface, var(--web-v1-panel, var(--roar-panel-bg, rgba(14, 24, 27, 0.86)))); --club-surface-strong: var(--club-public-surface-strong, var(--web-v1-panel-strong, var(--roar-panel-bg-strong, rgba(18, 31, 35, 0.95)))); --club-surface-muted: var(--club-public-surface-muted, var(--web-v1-card, var(--roar-panel-bg-soft, rgba(255, 255, 255, 0.055)))); --club-border: var(--club-public-border, var(--web-v1-border-soft, var(--roar-panel-border-subtle, rgba(180, 219, 218, 0.18)))); --club-border-strong: var(--club-public-border-strong, var(--web-v1-border, var(--roar-panel-border, rgba(255, 181, 92, 0.44)))); --club-text: var(--club-public-text, var(--web-v1-text, var(--roar-text, #f5f0e8))); --club-text-soft: var(--club-public-soft, var(--web-v1-text-soft, var(--roar-text-soft, #cdd6d4))); --club-text-muted: var(--club-public-muted, var(--web-v1-text-muted, var(--roar-text-muted, #9da9a8))); --club-accent: var(--club-public-accent, var(--web-v1-accent, var(--roar-accent, #f2a447))); --club-accent-strong: var(--club-public-accent-strong, var(--web-v1-focus, var(--roar-accent-hover, #ffb25f))); --club-accent-2: var(--club-public-accent-2, var(--web-v1-text-cyan, var(--roar-accent-cyan, #52d0c2))); --club-success: var(--club-public-success, var(--web-v1-success, var(--roar-success, #37d789))); --club-warning: var(--club-public-warning, var(--web-v1-warning, var(--roar-warning, #f2b957))); --club-danger: var(--club-public-danger, var(--web-v1-danger, var(--roar-danger, #ff746e))); --club-shadow: var(--club-public-shadow, var(--web-v1-shadow-panel, var(--roar-panel-glow, 0 28px 80px rgba(0, 0, 0, 0.45)))); --club-radius: var(--club-public-radius, var(--web-v1-card-radius, var(--roar-radius-md, 8px))); --club-radius-sm: var(--club-public-radius-sm, var(--roar-radius-sm, 6px)); } body[data-app-view="member_hub"] .member-hub { --member-hub-bg: var(--club-bg); --member-hub-bg-deep: var(--club-bg-deep); --member-hub-surface: var(--club-surface); --member-hub-surface-strong: var(--club-surface-strong); --member-hub-surface-muted: var(--club-surface-muted); --member-hub-border: var(--club-border); --member-hub-border-strong: var(--club-border-strong); --member-hub-text: var(--club-text); --member-hub-text-soft: var(--club-text-soft); --member-hub-text-muted: var(--club-text-muted); --member-hub-accent: var(--club-accent); --member-hub-accent-strong: var(--club-accent-strong); --member-hub-accent-2: var(--club-accent-2); --member-hub-success: var(--club-success); --member-hub-warning: var(--club-warning); --member-hub-danger: var(--club-danger); --member-hub-shadow: var(--club-shadow); --member-hub-radius: var(--club-radius); --member-hub-radius-sm: var(--club-radius-sm); --member-hub-focus-ring: color-mix(in srgb, var(--member-hub-accent-2) 22%, transparent); --member-hub-action-bg: linear-gradient(180deg, color-mix(in srgb, var(--member-hub-accent-strong) 82%, var(--member-hub-accent)), color-mix(in srgb, var(--member-hub-accent) 72%, var(--member-hub-bg-deep))); --member-hub-action-text: color-mix(in srgb, var(--member-hub-bg-deep) 88%, black); --member-hub-panel-bg: linear-gradient(145deg, color-mix(in srgb, var(--member-hub-surface-strong) 92%, transparent), color-mix(in srgb, var(--member-hub-bg-deep) 88%, var(--member-hub-surface))); --member-hub-card-bg: linear-gradient(145deg, color-mix(in srgb, var(--member-hub-surface) 88%, var(--member-hub-bg-deep)), color-mix(in srgb, var(--member-hub-surface-muted) 74%, var(--member-hub-bg-deep))); --member-hub-card-wash: color-mix(in srgb, var(--member-hub-text) 4%, transparent); --club-status-green: var(--member-hub-success); --club-status-green-soft: color-mix(in srgb, var(--member-hub-success) 12%, transparent); --club-status-teal: var(--member-hub-accent-2); --club-status-teal-soft: color-mix(in srgb, var(--member-hub-accent-2) 12%, transparent); --club-status-amber: var(--member-hub-accent-strong); --club-status-amber-soft: color-mix(in srgb, var(--member-hub-accent-strong) 12%, transparent); --club-status-orange: var(--member-hub-accent); --club-status-orange-soft: color-mix(in srgb, var(--member-hub-accent) 13%, transparent); --club-status-red: var(--member-hub-danger); --club-status-red-soft: color-mix(in srgb, var(--member-hub-danger) 12%, transparent); --club-status-gold: var(--member-hub-warning); --club-status-gold-soft: color-mix(in srgb, var(--member-hub-warning) 13%, transparent); --club-status-blue: var(--member-hub-accent-2); --club-status-blue-soft: color-mix(in srgb, var(--member-hub-accent-2) 10%, transparent); --club-status-gray: var(--member-hub-text-muted); --club-status-gray-soft: color-mix(in srgb, var(--member-hub-text-muted) 12%, transparent); color: var(--member-hub-text) !important; } html body[data-app-view="member_hub"] .intro-background { background: radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--club-accent) 14%, transparent), transparent 31%), radial-gradient(circle at 14% 72%, color-mix(in srgb, var(--club-accent-2) 14%, transparent), transparent 36%), linear-gradient(90deg, color-mix(in srgb, var(--club-bg-deep) 62%, transparent), color-mix(in srgb, var(--club-bg-deep) 34%, transparent)), var(--roar-background-member-hub-image, var(--roar-app-background-image)) center center / cover no-repeat !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { border-color: color-mix(in srgb, var(--member-hub-border-strong) 58%, var(--member-hub-border)) !important; background: radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--member-hub-accent-2) 10%, transparent), transparent 34%), radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--member-hub-accent) 14%, transparent), transparent 28%), var(--member-hub-panel-bg) !important; box-shadow: var(--member-hub-shadow), inset 0 1px 0 color-mix(in srgb, var(--member-hub-text) 6%, transparent) !important; } body[data-app-view="member_hub"] .member-hub-content::before { background: linear-gradient(90deg, color-mix(in srgb, var(--member-hub-accent) 15%, transparent), transparent 20%), linear-gradient(180deg, color-mix(in srgb, var(--member-hub-text) 5%, transparent), transparent 30%) !important; } body[data-app-view="member_hub"] .member-hub-card, body[data-app-view="member_hub"] .member-preview-card, body[data-app-view="member_hub"] .member-profile-group, body[data-app-view="member_hub"] .member-profile-overview, body[data-app-view="member_hub"] .member-profile-open-fields, body[data-app-view="member_hub"] .member-access-panel, body[data-app-view="member_hub"] .member-info-chip, body[data-app-view="member_hub"] .member-section-note, body[data-app-view="member_hub"] .member-performance-snapshot, body[data-app-view="member_hub"] .member-performance-grid span, body[data-app-view="member_hub"] .member-snapshot-metric-card, body[data-app-view="member_hub"] .member-club-toolbar, body[data-app-view="member_hub"] .member-club-card, body[data-app-view="member_hub"] .member-club-detail, body[data-app-view="member_hub"] .member-profile-quicklook, body[data-app-view="member_hub"] .member-profile-detail-group, body[data-app-view="member_hub"] .member-hub-locked-section, body[data-app-view="member_hub"] .member-teammate-review-gate, body[data-app-view="member_hub"] .member-teammate-review-form, body[data-app-view="member_hub"] .member-review-weight-card, body[data-app-view="member_hub"] .member-teammate-review-item, body[data-app-view="member_hub"] .member-connect-state-card, body[data-app-view="member_hub"] .member-connect-card, body[data-app-view="member_hub"] .member-connect-profile, body[data-app-view="member_hub"] .member-connect-card-meta span, body[data-app-view="member_hub"] .member-connect-factor-grid span, body[data-app-view="member_hub"] .member-connect-rail-note, body[data-app-view="member_hub"] .member-premium-card, body[data-app-view="member_hub"] .member-premium-status { border-color: color-mix(in srgb, var(--member-hub-border) 72%, transparent) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--member-hub-accent-2) 5%, transparent), transparent 42%), var(--member-hub-card-bg) !important; box-shadow: 0 16px 38px color-mix(in srgb, var(--member-hub-bg-deep) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--member-hub-text) 5%, transparent) !important; } body[data-app-view="member_hub"] .member-hub-card-next, body[data-app-view="member_hub"] .member-review-weight-card.is-negative-context, body[data-app-view="member_hub"] .member-teammate-review-gate:not(.is-complete) { border-color: color-mix(in srgb, var(--member-hub-accent) 58%, var(--member-hub-border)) !important; background: radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--member-hub-accent) 15%, transparent), transparent 34%), var(--member-hub-card-bg) !important; box-shadow: 0 20px 48px color-mix(in srgb, var(--member-hub-accent) 13%, transparent), 0 18px 40px color-mix(in srgb, var(--member-hub-bg-deep) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--member-hub-text) 7%, transparent) !important; } body[data-app-view="member_hub"] .member-teammate-review-gate.is-complete, body[data-app-view="member_hub"] .member-review-weight-card { border-color: color-mix(in srgb, var(--member-hub-accent-2) 44%, var(--member-hub-border)) !important; } body[data-app-view="member_hub"] .member-hub-card::after { background: linear-gradient(90deg, color-mix(in srgb, var(--member-hub-accent) 72%, transparent), transparent) !important; } body[data-app-view="member_hub"] .member-hub-title, body[data-app-view="member_hub"] .member-hub-card strong, body[data-app-view="member_hub"] .member-connect-rail-head h2, body[data-app-view="member_hub"] .member-connect-card-head strong, body[data-app-view="member_hub"] .member-connect-chemistry strong, body[data-app-view="member_hub"] .member-section-heading strong, body[data-app-view="member_hub"] .member-profile-identity strong, body[data-app-view="member_hub"] .member-performance-snapshot-head strong, body[data-app-view="member_hub"] .member-performance-score strong, body[data-app-view="member_hub"] .member-club-name, body[data-app-view="member_hub"] .member-club-form-score strong, body[data-app-view="member_hub"] .member-club-detail-head > strong, body[data-app-view="member_hub"] .member-teammate-review-gate-copy strong, body[data-app-view="member_hub"] .member-teammate-review-form-head strong, body[data-app-view="member_hub"] .member-teammate-review-item strong { color: var(--member-hub-text) !important; } body[data-app-view="member_hub"] .member-hub-eyebrow, body[data-app-view="member_hub"] .member-hub-card-label, body[data-app-view="member_hub"] .member-section-heading span, body[data-app-view="member_hub"] .member-profile-group h2, body[data-app-view="member_hub"] .member-profile-identity span, body[data-app-view="member_hub"] .member-info-chip span, body[data-app-view="member_hub"] .member-performance-snapshot-head span, body[data-app-view="member_hub"] .member-performance-grid em, body[data-app-view="member_hub"] .member-club-trust-head span, body[data-app-view="member_hub"] .member-club-field-grid em, body[data-app-view="member_hub"] .member-club-detail-empty span, body[data-app-view="member_hub"] .member-club-detail-head > span, body[data-app-view="member_hub"] .member-club-detail-grid em, body[data-app-view="member_hub"] .member-profile-bridge-head span, body[data-app-view="member_hub"] .member-profile-bridge-values em, body[data-app-view="member_hub"] .member-teammate-review-gate-copy span, body[data-app-view="member_hub"] .member-teammate-review-form-head span, body[data-app-view="member_hub"] .member-review-weight-head span, body[data-app-view="member_hub"] .member-review-weight-values em, body[data-app-view="member_hub"] .member-connect-rail-head span, body[data-app-view="member_hub"] .member-connect-main-reason span, body[data-app-view="member_hub"] .member-connect-factor-grid em { color: color-mix(in srgb, var(--member-hub-accent-2) 86%, var(--member-hub-text)) !important; } body[data-app-view="member_hub"] .member-hub-intro, body[data-app-view="member_hub"] .member-hub-copy, body[data-app-view="member_hub"] .member-section-note, body[data-app-view="member_hub"] .member-locked-copy, body[data-app-view="member_hub"] .member-profile-identity p, body[data-app-view="member_hub"] .member-performance-snapshot-head em, body[data-app-view="member_hub"] .member-performance-score span, body[data-app-view="member_hub"] .member-performance-score em, body[data-app-view="member_hub"] .member-performance-grid strong, body[data-app-view="member_hub"] .member-performance-snapshot p, body[data-app-view="member_hub"] .member-club-role, body[data-app-view="member_hub"] .member-club-meta, body[data-app-view="member_hub"] .member-club-detail-head p span, body[data-app-view="member_hub"] .member-club-detail-score span, body[data-app-view="member_hub"] .member-club-detail-score em, body[data-app-view="member_hub"] .member-profile-bridge-note, body[data-app-view="member_hub"] .member-teammate-review-gate-copy p, body[data-app-view="member_hub"] .member-teammate-review-gate-copy em, body[data-app-view="member_hub"] .member-teammate-review-form-head p, body[data-app-view="member_hub"] .member-teammate-review-help, body[data-app-view="member_hub"] .member-review-weight-card p, body[data-app-view="member_hub"] .member-review-weight-card small, body[data-app-view="member_hub"] .member-review-weight-help li, body[data-app-view="member_hub"] .member-connect-rail-head p, body[data-app-view="member_hub"] .member-connect-state-card p, body[data-app-view="member_hub"] .member-connect-card p, body[data-app-view="member_hub"] .member-connect-rail-note, body[data-app-view="member_hub"] .member-connect-row-reason, body[data-app-view="member_hub"] .member-connect-card-head span, body[data-app-view="member_hub"] .member-connect-reasons li, body[data-app-view="member_hub"] .member-connect-card-meta em { color: var(--member-hub-text-soft) !important; } body[data-app-view="member_hub"] .member-hub-primary-action, body[data-app-view="member_hub"] .member-beta-notice-dismiss, body[data-app-view="member_hub"] .member-teammate-submit { border-color: color-mix(in srgb, var(--member-hub-accent-strong) 50%, var(--member-hub-border)) !important; background: var(--member-hub-action-bg) !important; color: var(--member-hub-action-text) !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--member-hub-accent) 18%, transparent) !important; } body[data-app-view="member_hub"] .member-hub-secondary-action, body[data-app-view="member_hub"] .member-club-window-button, body[data-app-view="member_hub"] .member-club-profile-action, body[data-app-view="member_hub"] .member-connect-card-cta, body[data-app-view="member_hub"] .member-connect-toggle, body[data-app-view="member_hub"] .member-teammate-review-cta, body[data-app-view="member_hub"] .member-teammate-chip, body[data-app-view="member_hub"] .member-teammate-segment button { border-color: color-mix(in srgb, var(--member-hub-border-strong) 38%, var(--member-hub-border)) !important; background: color-mix(in srgb, var(--member-hub-surface-muted) 82%, transparent) !important; color: var(--member-hub-text-soft) !important; } body[data-app-view="member_hub"] .member-hub-primary-action:hover, body[data-app-view="member_hub"] .member-hub-primary-action:focus-visible, body[data-app-view="member_hub"] .member-hub-secondary-action:hover, body[data-app-view="member_hub"] .member-hub-secondary-action:focus-visible, body[data-app-view="member_hub"] .member-club-window-button.is-active, body[data-app-view="member_hub"] .member-club-window-button:hover, body[data-app-view="member_hub"] .member-club-window-button:focus-visible, body[data-app-view="member_hub"] .member-club-profile-action:hover, body[data-app-view="member_hub"] .member-club-profile-action:focus-visible, body[data-app-view="member_hub"] .member-connect-toggle:hover, body[data-app-view="member_hub"] .member-connect-toggle:focus-visible, body[data-app-view="member_hub"] .member-connect-card-cta:hover, body[data-app-view="member_hub"] .member-connect-card-cta:focus-visible { border-color: color-mix(in srgb, var(--member-hub-accent-2) 46%, var(--member-hub-border)) !important; box-shadow: 0 0 0 3px var(--member-hub-focus-ring) !important; } body[data-app-view="member_hub"] .member-performance-snapshot { --member-performance-tone: var(--member-hub-accent-strong); --member-performance-wash: color-mix(in srgb, var(--member-hub-accent-strong) 8%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-critical, body[data-app-view="member_hub"] .member-detail-tone-critical, body[data-app-view="member_hub"] .member-club-card[data-form-tone="critical"] { --member-performance-tone: var(--member-hub-danger); --member-detail-tone: var(--member-hub-danger); --member-form-tone: var(--member-hub-danger); --member-performance-wash: color-mix(in srgb, var(--member-hub-danger) 9%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-danger) 9%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-weak, body[data-app-view="member_hub"] .member-detail-tone-weak, body[data-app-view="member_hub"] .member-club-card[data-form-tone="weak"] { --member-performance-tone: var(--member-hub-accent); --member-detail-tone: var(--member-hub-accent); --member-form-tone: var(--member-hub-accent); --member-performance-wash: color-mix(in srgb, var(--member-hub-accent) 9%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-accent) 9%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-neutral, body[data-app-view="member_hub"] .member-detail-tone-neutral, body[data-app-view="member_hub"] .member-club-card[data-form-tone="neutral"] { --member-performance-tone: var(--member-hub-accent-strong); --member-detail-tone: var(--member-hub-accent-strong); --member-form-tone: var(--member-hub-accent-strong); --member-performance-wash: color-mix(in srgb, var(--member-hub-accent-strong) 8%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-accent-strong) 8%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-stable, body[data-app-view="member_hub"] .member-detail-tone-stable, body[data-app-view="member_hub"] .member-club-card[data-form-tone="stable"] { --member-performance-tone: var(--member-hub-success); --member-detail-tone: var(--member-hub-success); --member-form-tone: var(--member-hub-success); --member-performance-wash: color-mix(in srgb, var(--member-hub-success) 8%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-success) 8%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-strong, body[data-app-view="member_hub"] .member-detail-tone-strong, body[data-app-view="member_hub"] .member-club-card[data-form-tone="strong"] { --member-performance-tone: var(--member-hub-accent-2); --member-detail-tone: var(--member-hub-accent-2); --member-form-tone: var(--member-hub-accent-2); --member-performance-wash: color-mix(in srgb, var(--member-hub-accent-2) 8%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-accent-2) 8%, transparent); } body[data-app-view="member_hub"] .member-performance-tone-peak, body[data-app-view="member_hub"] .member-detail-tone-peak, body[data-app-view="member_hub"] .member-club-card[data-form-tone="peak"] { --member-performance-tone: var(--member-hub-success); --member-detail-tone: var(--member-hub-success); --member-form-tone: var(--member-hub-success); --member-performance-wash: color-mix(in srgb, var(--member-hub-success) 10%, transparent); --member-detail-wash: color-mix(in srgb, var(--member-hub-success) 10%, transparent); } body[data-app-view="member_hub"] .member-club-formbar, body[data-app-view="member_hub"] .member-snapshot-meter { background: color-mix(in srgb, var(--member-hub-text-muted) 14%, transparent) !important; } body[data-app-view="member_hub"] .member-club-formbar span, body[data-app-view="member_hub"] .member-snapshot-meter span { background: linear-gradient(90deg, var(--member-hub-accent-2), var(--member-hub-accent)) !important; } body[data-app-view="member_hub"] .member-radar-plot { background: radial-gradient(circle at center, color-mix(in srgb, var(--member-hub-accent-2) 12%, transparent) 0 2px, transparent 3px), linear-gradient(180deg, color-mix(in srgb, var(--member-hub-surface) 78%, var(--member-hub-bg-deep)), color-mix(in srgb, var(--member-hub-bg-deep) 88%, var(--member-hub-surface))) !important; } body[data-app-view="member_hub"] .member-connect-rail-note::before { color: var(--member-hub-text-soft) !important; } /* Master reference fidelity flow cleanup 1: final authenticated hub pass. */ body[data-app-view="member_hub"] { background: #02070c !important; } body[data-app-view="member_hub"] .member-beta-notice { display: none !important; } body[data-app-view="member_hub"] .member-hub { width: 100vw !important; min-height: 100vh !important; margin: 0 !important; display: grid !important; grid-template-columns: 176px minmax(0, 1fr) 282px !important; gap: 0 !important; border-radius: 0 !important; background: radial-gradient(circle at 54% 12%, rgba(41, 229, 190, 0.06), transparent 28%), linear-gradient(180deg, #07111a 0%, #02070c 100%) !important; color: #f7f1e8 !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-hub *, body[data-app-view="member_hub"] .member-hub button, body[data-app-view="member_hub"] .member-hub p, body[data-app-view="member_hub"] .member-hub span, body[data-app-view="member_hub"] .member-hub strong, body[data-app-view="member_hub"] .member-hub em { letter-spacing: 0 !important; overflow-wrap: normal !important; word-break: normal !important; } body[data-app-view="member_hub"] .member-hub-content, body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail { min-height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: linear-gradient(180deg, rgba(7, 16, 24, 0.96), rgba(2, 7, 12, 0.97)) !important; box-shadow: none !important; } body[data-app-view="member_hub"] .member-hub-nav { position: relative !important; padding: 18px 12px !important; gap: 9px !important; border-right: 1px solid rgba(154, 189, 194, 0.16) !important; overflow-x: hidden !important; overflow-y: auto !important; } body[data-app-view="member_hub"] .member-hub-nav::after { content: "● System online\A Alle Systeme aktiv ›" !important; white-space: pre-line !important; position: static !important; display: block !important; margin-top: 6px !important; min-height: 54px !important; padding: 12px !important; border: 1px solid rgba(154, 189, 194, 0.16) !important; border-radius: 6px !important; background: rgba(13, 27, 38, 0.78) !important; color: rgba(247, 241, 232, 0.86) !important; font-size: 0.74rem !important; line-height: 1.65 !important; pointer-events: none !important; } body[data-app-view="member_hub"] .member-hub-nav-head { min-height: 72px !important; padding: 0 4px 18px !important; border-bottom: 0 !important; } body[data-app-view="member_hub"] .member-hub-nav-head strong { font-size: 1.45rem !important; line-height: 0.9 !important; color: #f3f1ea !important; } body[data-app-view="member_hub"] .member-hub-nav-head span { margin-top: 4px !important; color: rgba(247, 241, 232, 0.56) !important; font-size: 0.62rem !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-hub-nav-group { gap: 3px !important; } body[data-app-view="member_hub"] .member-hub-nav-button { min-height: 34px !important; grid-template-columns: 24px minmax(0, 1fr) !important; gap: 8px !important; padding: 0 8px !important; border-radius: 6px !important; border-color: transparent !important; background: transparent !important; color: rgba(247, 241, 232, 0.78) !important; box-shadow: none !important; } body[data-app-view="member_hub"] .member-hub-nav-button::before { width: 17px !important; height: 17px !important; border-color: currentColor !important; opacity: 0.86 !important; } body[data-app-view="member_hub"] .member-hub-nav-button strong { color: inherit !important; font-size: 0.88rem !important; font-weight: 720 !important; line-height: 1.1 !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints { gap: 2px !important; padding-left: 32px !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints button { min-height: 22px !important; padding: 0 6px !important; border-radius: 5px !important; color: rgba(247, 241, 232, 0.68) !important; font-size: 0.74rem !important; font-weight: 640 !important; text-transform: none !important; } body[data-app-view="member_hub"] .member-hub-nav-button.active, body[data-app-view="member_hub"] .member-hub-nav-group.is-active .member-hub-nav-button, body[data-app-view="member_hub"] .member-hub-nav-subpoints button.is-active { border-color: rgba(255, 112, 25, 0.44) !important; background: linear-gradient(90deg, rgba(255, 112, 25, 0.28), rgba(255, 112, 25, 0.06)) !important; color: #fff6ea !important; box-shadow: inset 3px 0 0 #ff6a10 !important; } body[data-app-view="member_hub"] .member-hub-nav-button.logout { margin-top: 6px !important; min-height: 34px !important; font-size: 0.82rem !important; } body[data-app-view="member_hub"] .member-hub-content { display: block !important; padding: 17px 18px 14px !important; gap: 9px !important; grid-template-rows: auto auto auto auto auto !important; align-content: start !important; border-left: 1px solid rgba(154, 189, 194, 0.08) !important; border-right: 1px solid rgba(154, 189, 194, 0.12) !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: none !important; } body[data-app-view="member_hub"] .member-hub-content > * + * { margin-top: 9px !important; } body[data-app-view="member_hub"] .member-hub-content::-webkit-scrollbar, body[data-app-view="member_hub"] .member-connect-rail::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } body[data-app-view="member_hub"] .member-hub-eyebrow { margin: 0 !important; color: #18e1b3 !important; font-size: 0.7rem !important; font-weight: 860 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-hub-title { margin: 0 !important; color: #fbf7ef !important; font-size: clamp(2rem, 3.35vw, 2.55rem) !important; font-weight: 880 !important; line-height: 0.98 !important; position: relative !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="performance"][data-active-member-detail="snapshot"] .member-hub-title, body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-hub-title, body[data-app-view="member_hub"] .member-hub[data-active-member-section="club"][data-active-member-detail="trust"] .member-hub-title { color: transparent !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="performance"][data-active-member-detail="snapshot"] .member-hub-title::after, body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-hub-title::after, body[data-app-view="member_hub"] .member-hub[data-active-member-section="club"][data-active-member-detail="trust"] .member-hub-title::after { position: absolute !important; inset: 0 !important; color: #fbf7ef !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="performance"][data-active-member-detail="snapshot"] .member-hub-title::after { content: "Deine Performance" !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-hub-title::after { content: "Fairness" !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="club"][data-active-member-detail="trust"] .member-hub-title::after { content: "Club / Member-Radar" !important; } body[data-app-view="member_hub"] .member-hub-statusline { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 8px !important; } body[data-app-view="member_hub"] .club-status-chip, body[data-app-view="member_hub"] .club-badge, body[data-app-view="member_hub"] .club-fit-badge { min-height: 22px !important; border-radius: 6px !important; font-size: 0.68rem !important; letter-spacing: 0 !important; } body[data-app-view="member_hub"] .member-start-panel, body[data-app-view="member_hub"] .member-reference-band, body[data-app-view="member_hub"] .member-hub-card, body[data-app-view="member_hub"] .member-profile-group, body[data-app-view="member_hub"] .member-profile-overview, body[data-app-view="member_hub"] .member-profile-open-fields, body[data-app-view="member_hub"] .member-access-panel, body[data-app-view="member_hub"] .member-performance-snapshot, body[data-app-view="member_hub"] .member-performance-grid span, body[data-app-view="member_hub"] .member-snapshot-metric-card, body[data-app-view="member_hub"] .member-club-toolbar, body[data-app-view="member_hub"] .member-club-card, body[data-app-view="member_hub"] .member-club-detail, body[data-app-view="member_hub"] .member-review-weight-card, body[data-app-view="member_hub"] .member-teammate-review-gate, body[data-app-view="member_hub"] .member-teammate-review-item, body[data-app-view="member_hub"] .member-premium-card, body[data-app-view="member_hub"] .member-premium-status { border: 1px solid rgba(35, 224, 190, 0.15) !important; border-radius: 7px !important; background: linear-gradient(180deg, rgba(14, 28, 39, 0.84), rgba(5, 13, 21, 0.86)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; } body[data-app-view="member_hub"] .member-start-panel { position: relative !important; min-height: 180px !important; padding: 22px 24px !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-start-panel::after, body[data-app-view="member_hub"] .member-profile-next-step-reference::after, body[data-app-view="member_hub"] .member-premium-reference-hero::after, body[data-app-view="member_hub"] .member-fairness-hero::after { content: "" !important; position: absolute !important; top: 10px !important; right: 22px !important; width: 210px !important; height: 210px !important; background: url("../assets/brand/nordwerk-emblem-transparent.png") center / contain no-repeat !important; opacity: 0.13 !important; filter: grayscale(1) brightness(1.35) contrast(1.1) !important; pointer-events: none !important; } body[data-app-view="member_hub"] .member-start-head { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-start-head strong { max-width: 38ch !important; color: #fbf7ef !important; font-size: 1.42rem !important; line-height: 1.08 !important; } body[data-app-view="member_hub"] .member-start-head p, body[data-app-view="member_hub"] .member-reference-band p { max-width: 62ch !important; color: rgba(247, 241, 232, 0.78) !important; font-size: 0.82rem !important; line-height: 1.45 !important; } body[data-app-view="member_hub"] .member-hub-tour-replay, body[data-app-view="member_hub"] .member-discovery-zone, body[data-app-view="member_hub"] .member-preview-note { display: none !important; } body[data-app-view="member_hub"] .member-start-next { position: relative !important; z-index: 1 !important; margin-top: 16px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; column-gap: 14px !important; row-gap: 4px !important; align-items: center !important; } body[data-app-view="member_hub"] .member-start-next::before { content: "" !important; grid-row: 1 / span 3 !important; width: 42px !important; height: 42px !important; border: 2px solid #ff6a10 !important; border-radius: 999px !important; box-shadow: 0 0 18px rgba(255, 106, 16, 0.32), inset 0 0 0 8px rgba(255, 106, 16, 0.08) !important; } body[data-app-view="member_hub"] .member-start-next .member-hub-card-label { color: #18e1b3 !important; font-size: 0.7rem !important; } body[data-app-view="member_hub"] .member-start-next strong { color: #fbf7ef !important; font-size: 1.22rem !important; line-height: 1.08 !important; } body[data-app-view="member_hub"] .member-hub-action-row { gap: 8px !important; } body[data-app-view="member_hub"] .member-hub-primary-action, body[data-app-view="member_hub"] .member-hub-secondary-action, body[data-app-view="member_hub"] .member-club-profile-action, body[data-app-view="member_hub"] .member-connect-card-cta, body[data-app-view="member_hub"] .member-teammate-review-cta { min-height: 32px !important; border-radius: 6px !important; padding: 0 13px !important; font-size: 0.72rem !important; font-weight: 820 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-hub-primary-action { background: linear-gradient(180deg, #ff7d19, #e95d08) !important; color: #fff8ec !important; border-color: rgba(255, 145, 54, 0.75) !important; } body[data-app-view="member_hub"] .member-reference-band { gap: 10px !important; padding: 12px !important; } body[data-app-view="member_hub"] .member-reference-heading span, body[data-app-view="member_hub"] .member-lobby-kicker, body[data-app-view="member_hub"] .member-section-heading span, body[data-app-view="member_hub"] .member-hub-card-label { color: #18e1b3 !important; font-size: 0.68rem !important; font-weight: 860 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-reference-heading strong, body[data-app-view="member_hub"] .member-section-heading strong { color: #fbf7ef !important; font-size: 0.98rem !important; line-height: 1.16 !important; } body[data-app-view="member_hub"] .member-status-tile-grid, body[data-app-view="member_hub"] .member-today-grid, body[data-app-view="member_hub"] .member-profile-signal-grid, body[data-app-view="member_hub"] .member-profile-review-row, body[data-app-view="member_hub"] .member-lobby-context-grid, body[data-app-view="member_hub"] .member-premium-benefit-row, body[data-app-view="member_hub"] .member-fairness-card-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-status-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-status-tile, body[data-app-view="member_hub"] .member-today-grid article, body[data-app-view="member_hub"] .member-profile-signal-grid article, body[data-app-view="member_hub"] .member-profile-review-row article, body[data-app-view="member_hub"] .member-lobby-context-grid article, body[data-app-view="member_hub"] .member-premium-benefit-row span, body[data-app-view="member_hub"] .member-fairness-card-grid article { min-height: 54px !important; padding: 9px !important; border: 1px solid rgba(154, 189, 194, 0.13) !important; border-radius: 6px !important; background: rgba(255, 255, 255, 0.025) !important; } body[data-app-view="member_hub"] .member-status-tile span, body[data-app-view="member_hub"] .member-today-grid span, body[data-app-view="member_hub"] .member-profile-signal-grid span, body[data-app-view="member_hub"] .member-profile-review-row span, body[data-app-view="member_hub"] .member-lobby-context-grid span, body[data-app-view="member_hub"] .member-fairness-card-grid span { display: block !important; color: rgba(247, 241, 232, 0.58) !important; font-size: 0.64rem !important; font-weight: 760 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-status-tile strong, body[data-app-view="member_hub"] .member-today-grid strong, body[data-app-view="member_hub"] .member-profile-signal-grid strong, body[data-app-view="member_hub"] .member-profile-review-row strong, body[data-app-view="member_hub"] .member-lobby-context-grid strong, body[data-app-view="member_hub"] .member-fairness-card-grid strong { display: block !important; color: #fbf7ef !important; font-size: 0.82rem !important; line-height: 1.12 !important; } body[data-app-view="member_hub"] .member-fairness-card-grid em { display: block !important; margin-top: 3px !important; } body[data-app-view="member_hub"] .member-hub-notice { position: static !important; bottom: auto !important; min-height: 32px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid rgba(154, 189, 194, 0.12) !important; border-radius: 6px !important; background: rgba(9, 18, 28, 0.72) !important; color: rgba(247, 241, 232, 0.72) !important; font-size: 0.74rem !important; opacity: 1 !important; } body[data-app-view="member_hub"] .member-profile-next-step-reference, body[data-app-view="member_hub"] .member-premium-reference-hero { position: relative !important; order: -20 !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-profile-reference-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) 260px !important; gap: 14px !important; align-items: start !important; } body[data-app-view="member_hub"] .member-profile-reference-hero > div:first-child { position: relative !important; z-index: 1 !important; display: grid !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-profile-reference-hero > div:first-child > strong { color: #fbf7ef !important; font-size: 1.35rem !important; } body[data-app-view="member_hub"] .member-profile-status-card { display: grid !important; gap: 6px !important; padding: 10px !important; border: 1px solid rgba(154, 189, 194, 0.13) !important; border-radius: 6px !important; background: rgba(2, 8, 13, 0.42) !important; } body[data-app-view="member_hub"] .member-profile-status-card p, body[data-app-view="member_hub"] .member-fairness-list p { display: flex !important; justify-content: space-between !important; gap: 10px !important; margin: 0 !important; padding: 5px 0 !important; border-bottom: 1px solid rgba(154, 189, 194, 0.1) !important; } body[data-app-view="member_hub"] .member-profile-status-card em { color: #18e1b3 !important; font-style: normal !important; font-size: 0.7rem !important; } body[data-app-view="member_hub"] .member-profile-reference, body[data-app-view="member_hub"] .member-performance-focus-reference, body[data-app-view="member_hub"] .member-lobby-reference-context { order: 20 !important; } body[data-app-view="member_hub"] .member-fairness-reference, body[data-app-view="member_hub"] .member-radar-member-reference { display: none !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-fairness-reference, body[data-app-view="member_hub"] .member-hub[data-active-member-section="club"][data-active-member-detail="trust"] .member-radar-member-reference { display: grid !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-reviews-reference, body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] details[data-member-detail-group="reviews"] { display: none !important; } body[data-app-view="member_hub"] .member-fairness-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-fairness-hero { position: relative !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-fairness-list { display: grid !important; gap: 4px !important; } body[data-app-view="member_hub"] .member-fairness-list p span { color: rgba(247, 241, 232, 0.68) !important; font-size: 0.72rem !important; } body[data-app-view="member_hub"] .member-fairness-list.is-warning-list strong { color: #ff6a10 !important; } body[data-app-view="member_hub"] .member-club-layout { grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr) !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-club-list { gap: 8px !important; max-height: none !important; } body[data-app-view="member_hub"] .member-club-card { position: relative !important; padding: 11px 11px 11px 54px !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-club-card::after { content: "" !important; position: absolute !important; left: 12px !important; top: 13px !important; width: 34px !important; height: 34px !important; border: 1px solid rgba(24, 225, 179, 0.68) !important; border-radius: 999px !important; background: url("../assets/brand/nordwerk-emblem-transparent.png") center / 70% no-repeat, rgba(2, 8, 13, 0.72) !important; } body[data-app-view="member_hub"] .member-club-card-topline { gap: 8px !important; } body[data-app-view="member_hub"] .member-club-name { font-size: 1rem !important; color: #fbf7ef !important; } body[data-app-view="member_hub"] .member-club-role, body[data-app-view="member_hub"] .member-club-main-reason { font-size: 0.72rem !important; } body[data-app-view="member_hub"] .member-connect-rail { padding: 18px 12px 14px !important; gap: 8px !important; border-left: 1px solid rgba(154, 189, 194, 0.15) !important; overflow-x: hidden !important; overflow-y: auto !important; } body[data-app-view="member_hub"] .member-connect-rail-head { gap: 5px !important; padding: 0 0 8px !important; } body[data-app-view="member_hub"] .member-connect-rail-head .club-status-chip, body[data-app-view="member_hub"] .member-connect-title-row .member-help-trigger { display: none !important; } body[data-app-view="member_hub"] .member-connect-rail-head h2 { color: #18e1b3 !important; font-size: 1.04rem !important; font-weight: 860 !important; line-height: 1.08 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-connect-rail-head p { color: rgba(247, 241, 232, 0.74) !important; font-size: 0.78rem !important; line-height: 1.35 !important; } body[data-app-view="member_hub"] .member-connect-player-list { gap: 8px !important; } body[data-app-view="member_hub"] .member-connect-player-list > .member-connect-card:nth-of-type(n + 4) { display: grid !important; } body[data-app-view="member_hub"] .member-connect-card { min-height: 86px !important; padding: 8px !important; gap: 6px !important; border-radius: 7px !important; } body[data-app-view="member_hub"] .member-connect-row-button { position: relative !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) 72px !important; grid-template-rows: auto auto !important; gap: 2px 8px !important; align-items: center !important; min-height: 44px !important; text-align: left !important; } body[data-app-view="member_hub"] .member-connect-row-button::before { content: "" !important; grid-row: 1 / span 2 !important; width: 36px !important; height: 36px !important; border: 1px solid rgba(24, 225, 179, 0.68) !important; border-radius: 999px !important; background: url("../assets/brand/nordwerk-emblem-transparent.png") center / 70% no-repeat, rgba(2, 8, 13, 0.72) !important; } body[data-app-view="member_hub"] .member-connect-status { grid-column: 1 / 3 !important; grid-row: 1 !important; justify-self: start !important; transform: translate(48px, -2px) !important; min-height: 18px !important; font-size: 0.58rem !important; } body[data-app-view="member_hub"] .member-connect-row-player { grid-column: 2 !important; grid-row: 2 !important; } body[data-app-view="member_hub"] .member-connect-row-player strong { color: #fbf7ef !important; font-size: 0.9rem !important; line-height: 1.05 !important; } body[data-app-view="member_hub"] .member-connect-row-player em { color: rgba(247, 241, 232, 0.62) !important; font-size: 0.62rem !important; line-height: 1.1 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-connect-row-fit { grid-column: 3 !important; grid-row: 1 / span 2 !important; justify-self: end !important; min-width: 64px !important; min-height: 38px !important; padding: 4px 6px !important; text-align: center !important; } body[data-app-view="member_hub"] .member-connect-row-fit em, body[data-app-view="member_hub"] .member-connect-row-fit strong { font-size: 0.62rem !important; line-height: 1.1 !important; } body[data-app-view="member_hub"] .member-connect-row-badge, body[data-app-view="member_hub"] .member-connect-row-reason { display: none !important; } body[data-app-view="member_hub"] .member-connect-card > .member-connect-card-cta { min-height: 24px !important; width: 100% !important; justify-self: stretch !important; font-size: 0.62rem !important; } body[data-app-view="member_hub"] .member-connect-rail-note { margin-top: 4px !important; font-size: 0 !important; } body[data-app-view="member_hub"] .member-connect-rail-note::before { content: "Team-Fit nutzt aktuelle Club-Signale." !important; color: rgba(247, 241, 232, 0.62) !important; font-size: 0.72rem !important; } @media (max-width: 920px) { body[data-app-view="member_hub"] .member-hub { grid-template-columns: 1fr !important; overflow-y: auto !important; } body[data-app-view="member_hub"] .member-hub-nav, body[data-app-view="member_hub"] .member-connect-rail, body[data-app-view="member_hub"] .member-hub-content { min-height: auto !important; max-height: none !important; } body[data-app-view="member_hub"] .member-hub-nav::after { position: static !important; } body[data-app-view="member_hub"] .member-status-tile-grid, body[data-app-view="member_hub"] .member-today-grid, body[data-app-view="member_hub"] .member-profile-signal-grid, body[data-app-view="member_hub"] .member-profile-review-row, body[data-app-view="member_hub"] .member-lobby-context-grid, body[data-app-view="member_hub"] .member-premium-benefit-row, body[data-app-view="member_hub"] .member-fairness-card-grid, body[data-app-view="member_hub"] .member-profile-reference-hero, body[data-app-view="member_hub"] .member-fairness-layout, body[data-app-view="member_hub"] .member-club-layout { grid-template-columns: 1fr !important; } } /* Member Hub reference fidelity hardening 90+ authenticated pass. */ body[data-app-view="member_hub"] .member-hub { grid-template-columns: 180px minmax(0, 1fr) 296px !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-hub-content { padding: 16px 18px 12px !important; } body[data-app-view="member_hub"] .member-hub-title { font-size: 2.36rem !important; line-height: 0.98 !important; } body[data-app-view="member_hub"] .member-hub-sections, body[data-app-view="member_hub"] .member-hub-section, body[data-app-view="member_hub"] .member-hub-section > * { min-width: 0 !important; } body[data-app-view="member_hub"] .member-hub-section:not(.hidden) { display: grid !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-hub-section > .member-section-heading, body[data-app-view="member_hub"] .member-hub-section > .member-section-note, body[data-app-view="member_hub"] .member-hub-section > .member-hub-action-row { display: none !important; } body[data-app-view="member_hub"] .member-hub-nav { display: flex !important; flex-direction: column !important; padding: 17px 12px 12px !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-hub-nav-head { min-height: 64px !important; padding: 0 4px 12px !important; } body[data-app-view="member_hub"] .member-hub-nav-head strong { font-size: 1.38rem !important; } body[data-app-view="member_hub"] .member-hub-nav-group { display: grid !important; gap: 4px !important; } body[data-app-view="member_hub"] .member-hub-nav-group::before { display: none !important; margin: 10px 8px 2px !important; color: rgba(247, 241, 232, 0.42) !important; font-size: 0.58rem !important; font-weight: 860 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="lobby"] { order: 10 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="reviews"] { order: 20 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="profile"] { order: 30 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="performance"] { order: 40 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="club"] { order: 50 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="training"] { order: 60 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="premium"] { order: 70 !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="lobby"]::before { content: "Daily" !important; display: block !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="profile"]::before { content: "Player" !important; display: block !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="training"]::before { content: "System" !important; display: block !important; } body[data-app-view="member_hub"] .member-hub-nav-button { min-height: 33px !important; padding: 0 8px !important; } body[data-app-view="member_hub"] .member-hub-nav-button strong { font-size: 0.83rem !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints { display: none !important; padding: 0 !important; } body[data-app-view="member_hub"] .member-hub-nav-group.is-active .member-hub-nav-subpoints { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; } body[data-app-view="member_hub"] .member-hub-nav-group[data-member-nav-group="training"].is-active .member-hub-nav-subpoints { grid-template-columns: minmax(62px, 0.7fr) minmax(90px, 1fr) !important; } body[data-app-view="member_hub"] .member-hub-nav-subpoints button { min-width: 0 !important; min-height: 21px !important; padding: 0 5px !important; font-size: 0.62rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body[data-app-view="member_hub"] .member-hub-nav::after { order: 90 !important; min-height: 48px !important; margin-top: auto !important; padding: 10px 11px !important; font-size: 0.68rem !important; line-height: 1.45 !important; } body[data-app-view="member_hub"] .member-hub-nav-button.logout { order: 100 !important; min-height: 32px !important; margin-top: 8px !important; } body[data-app-view="member_hub"] .member-reference-band, body[data-app-view="member_hub"] .member-start-panel, body[data-app-view="member_hub"] .member-hub-collapsible, body[data-app-view="member_hub"] .member-access-panel { border-radius: 7px !important; } body[data-app-view="member_hub"] .member-start-panel { min-height: 174px !important; padding: 21px 23px !important; } body[data-app-view="member_hub"] .member-start-head strong { font-size: 1.36rem !important; } body[data-app-view="member_hub"] .member-status-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-lobby-reference-context { order: 30 !important; } body[data-app-view="member_hub"] .member-profile-next-step-reference { order: -30 !important; } body[data-app-view="member_hub"] .member-profile-reference { order: -20 !important; } body[data-app-view="member_hub"] .member-profile-groups { order: 10 !important; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr) !important; gap: 10px !important; max-height: 250px !important; overflow-y: auto !important; scrollbar-width: thin !important; } body[data-app-view="member_hub"] .member-profile-groups::-webkit-scrollbar, body[data-app-view="member_hub"] .member-club-list::-webkit-scrollbar, body[data-app-view="member_hub"] .member-club-detail::-webkit-scrollbar, body[data-app-view="member_hub"] .member-hub-collapsible::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } body[data-app-view="member_hub"] .member-profile-groups .member-hub-collapsible[open], body[data-app-view="member_hub"] .member-hub-section[data-member-panel="performance"] .member-hub-collapsible[open], body[data-app-view="member_hub"] .member-hub-section[data-member-panel="reviews"] .member-hub-collapsible[open], body[data-app-view="member_hub"] .member-hub-section[data-member-panel="premium"] .member-hub-collapsible[open] { max-height: 230px !important; overflow-y: auto !important; scrollbar-width: thin !important; } body[data-app-view="member_hub"] .member-profile-open-fields, body[data-app-view="member_hub"] .member-profile-setup { display: none !important; } body[data-app-view="member_hub"] .member-performance-reference { order: -20 !important; } body[data-app-view="member_hub"] .member-performance-focus-reference { order: -10 !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; } body[data-app-view="member_hub"] .member-performance-focus-reference .member-hub-primary-action { justify-self: end !important; } body[data-app-view="member_hub"] .member-performance-reference-head { grid-template-columns: minmax(0, 1fr) 236px !important; } body[data-app-view="member_hub"] .member-performance-radar-row { grid-template-columns: minmax(140px, 1fr) 190px minmax(140px, 1fr) !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-radar-plot { width: 182px !important; } body[data-app-view="member_hub"] .member-trend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-reviews-reference { order: -20 !important; display: grid !important; } body[data-app-view="member_hub"] .member-review-guidance-card { margin-top: 8px !important; } body[data-app-view="member_hub"] .member-hub[data-active-member-section="reviews"][data-active-member-detail="fairness"] .member-fairness-reference { order: -20 !important; } body[data-app-view="member_hub"] .member-fairness-layout { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-club-layout { grid-template-columns: minmax(430px, 1fr) minmax(280px, 0.76fr) !important; align-items: start !important; } body[data-app-view="member_hub"] .member-club-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; max-height: 392px !important; overflow-y: auto !important; scrollbar-width: thin !important; } body[data-app-view="member_hub"] .member-club-card { min-height: 122px !important; padding: 10px 10px 10px 50px !important; gap: 5px !important; } body[data-app-view="member_hub"] .member-club-card::after { left: 10px !important; top: 12px !important; } body[data-app-view="member_hub"] .member-club-name, body[data-app-view="member_hub"] .member-club-role span, body[data-app-view="member_hub"] .member-club-main-reason strong { overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-club-detail { max-height: 392px !important; padding: 11px !important; overflow-y: auto !important; scrollbar-width: thin !important; } body[data-app-view="member_hub"] .member-club-detail.is-empty { min-height: 220px !important; } body[data-app-view="member_hub"] .member-club-detail .member-profile-group-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-club-detail .member-profile-detail-group { padding: 9px !important; } body[data-app-view="member_hub"] .member-connect-rail { padding: 18px 13px 14px !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-connect-rail-head { gap: 6px !important; padding-bottom: 10px !important; } body[data-app-view="member_hub"] .member-connect-rail-head h2 { font-size: 1.08rem !important; } body[data-app-view="member_hub"] .member-connect-rail-head p { font-size: 0.75rem !important; line-height: 1.34 !important; } body[data-app-view="member_hub"] .member-connect-state-list.is-card-state { display: block !important; } body[data-app-view="member_hub"] .member-connect-reference-stack { display: grid !important; gap: 10px !important; } body[data-app-view="member_hub"] .member-connect-reference-card, body[data-app-view="member_hub"] .member-connect-active-card { min-width: 0 !important; border: 1px solid rgba(35, 224, 190, 0.16) !important; border-radius: 7px !important; background: radial-gradient(circle at 82% 8%, rgba(24, 225, 179, 0.11), transparent 36%), linear-gradient(180deg, rgba(14, 28, 39, 0.9), rgba(5, 13, 21, 0.9)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } body[data-app-view="member_hub"] .member-connect-reference-card { position: relative !important; display: grid !important; grid-template-columns: 58px minmax(0, 1fr) !important; gap: 10px !important; min-height: 360px !important; padding: 13px !important; overflow: hidden !important; } body[data-app-view="member_hub"] .member-connect-reference-card::after { content: "" !important; position: absolute !important; right: -44px !important; top: 42px !important; width: 148px !important; height: 148px !important; background: url("../assets/brand/nordwerk-emblem-transparent.png") center / contain no-repeat !important; opacity: 0.08 !important; pointer-events: none !important; } body[data-app-view="member_hub"] .member-connect-reference-card > * { position: relative !important; z-index: 1 !important; min-width: 0 !important; } body[data-app-view="member_hub"] .member-connect-reference-avatar { width: 54px !important; height: 54px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(24, 225, 179, 0.66) !important; border-radius: 999px !important; background: rgba(2, 8, 13, 0.82) !important; box-shadow: 0 0 26px rgba(24, 225, 179, 0.17) !important; } body[data-app-view="member_hub"] .member-connect-reference-avatar span { color: #fbf7ef !important; font-size: 0.92rem !important; font-weight: 880 !important; } body[data-app-view="member_hub"] .member-connect-reference-copy { display: grid !important; gap: 3px !important; } body[data-app-view="member_hub"] .member-connect-reference-topline { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important; } body[data-app-view="member_hub"] .member-connect-reference-copy > strong { color: #fbf7ef !important; font-size: 1.18rem !important; line-height: 1.05 !important; overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-connect-reference-copy > em { color: rgba(247, 241, 232, 0.66) !important; font-size: 0.68rem !important; font-style: normal !important; font-weight: 720 !important; line-height: 1.2 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-connect-reference-fit { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; min-height: 50px !important; padding: 8px 10px !important; text-align: left !important; } body[data-app-view="member_hub"] .member-connect-reference-fit span, body[data-app-view="member_hub"] .member-connect-reference-fit em { color: rgba(247, 241, 232, 0.7) !important; font-size: 0.66rem !important; font-style: normal !important; font-weight: 760 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-connect-reference-fit strong { color: #fbf7ef !important; font-size: 1.92rem !important; line-height: 0.9 !important; text-align: center !important; } body[data-app-view="member_hub"] .member-connect-reference-reasons { grid-column: 1 / -1 !important; display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body[data-app-view="member_hub"] .member-connect-reference-reasons li { min-height: 23px !important; display: flex !important; align-items: center !important; gap: 7px !important; color: rgba(247, 241, 232, 0.78) !important; font-size: 0.72rem !important; font-weight: 720 !important; line-height: 1.2 !important; } body[data-app-view="member_hub"] .member-connect-reference-reasons li::before { content: "" !important; width: 7px !important; height: 7px !important; flex: 0 0 auto !important; border-radius: 999px !important; background: #18e1b3 !important; } body[data-app-view="member_hub"] .member-connect-reference-meta { grid-column: 1 / -1 !important; display: grid !important; gap: 4px !important; } body[data-app-view="member_hub"] .member-connect-reference-meta .club-status-field { min-height: 26px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 4px 7px !important; border-radius: 6px !important; } body[data-app-view="member_hub"] .member-connect-reference-meta em, body[data-app-view="member_hub"] .member-connect-reference-meta strong { min-width: 0 !important; font-size: 0.6rem !important; line-height: 1.15 !important; overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-connect-reference-meta em { flex: 0 0 auto !important; max-width: 54px !important; } body[data-app-view="member_hub"] .member-connect-reference-meta strong { flex: 1 1 auto !important; text-align: right !important; } body[data-app-view="member_hub"] .member-connect-reference-actions { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr) !important; gap: 7px !important; } body[data-app-view="member_hub"] .member-connect-reference-actions .member-connect-card-cta { width: 100% !important; min-height: 31px !important; padding: 0 9px !important; } body[data-app-view="member_hub"] .member-connect-reference-note { grid-column: 1 / -1 !important; margin: 0 !important; color: rgba(247, 241, 232, 0.62) !important; font-size: 0.68rem !important; line-height: 1.28 !important; } body[data-app-view="member_hub"] .member-connect-active-card { display: grid !important; gap: 8px !important; padding: 11px !important; } body[data-app-view="member_hub"] .member-connect-active-head { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 8px !important; } body[data-app-view="member_hub"] .member-connect-active-head span { color: #18e1b3 !important; font-size: 0.68rem !important; font-weight: 860 !important; text-transform: uppercase !important; } body[data-app-view="member_hub"] .member-connect-active-head strong { color: #fbf7ef !important; font-size: 1.16rem !important; line-height: 1 !important; } body[data-app-view="member_hub"] .member-connect-avatar-strip { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; } body[data-app-view="member_hub"] .member-connect-avatar-button { min-width: 0 !important; min-height: 56px !important; display: grid !important; justify-items: center !important; gap: 4px !important; padding: 6px 4px !important; border: 1px solid rgba(154, 189, 194, 0.14) !important; border-radius: 7px !important; background: rgba(255, 255, 255, 0.026) !important; color: #fbf7ef !important; cursor: pointer !important; } body[data-app-view="member_hub"] .member-connect-avatar-button.is-selected, body[data-app-view="member_hub"] .member-connect-avatar-button:hover, body[data-app-view="member_hub"] .member-connect-avatar-button:focus-visible { border-color: rgba(255, 112, 25, 0.52) !important; box-shadow: 0 0 0 2px rgba(255, 112, 25, 0.14) !important; } body[data-app-view="member_hub"] .member-connect-avatar-initials { width: 29px !important; height: 29px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(24, 225, 179, 0.54) !important; border-radius: 999px !important; font-size: 0.62rem !important; font-weight: 860 !important; } body[data-app-view="member_hub"] .member-connect-avatar-button em { width: 100% !important; color: rgba(247, 241, 232, 0.64) !important; font-size: 0.52rem !important; font-style: normal !important; font-weight: 720 !important; line-height: 1.1 !important; overflow: hidden !important; text-align: center !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body[data-app-view="member_hub"] .member-connect-active-card p { margin: 0 !important; color: rgba(247, 241, 232, 0.62) !important; font-size: 0.62rem !important; line-height: 1.24 !important; } body[data-app-view="member_hub"] .member-connect-rail-note::before { content: "Teamchemie wird aus Club-Signalen abgeleitet." !important; } @media (max-width: 920px) { body[data-app-view="member_hub"] .member-hub { grid-template-columns: 1fr !important; height: auto !important; max-height: none !important; } body[data-app-view="member_hub"] .member-hub-title { font-size: 2rem !important; } body[data-app-view="member_hub"] .member-profile-groups, body[data-app-view="member_hub"] .member-club-layout, body[data-app-view="member_hub"] .member-club-list, body[data-app-view="member_hub"] .member-performance-reference-head, body[data-app-view="member_hub"] .member-performance-radar-row, body[data-app-view="member_hub"] .member-fairness-layout { grid-template-columns: 1fr !important; } body[data-app-view="member_hub"] .member-profile-groups, body[data-app-view="member_hub"] .member-club-list, body[data-app-view="member_hub"] .member-club-detail { max-height: none !important; } } /* Specificity guard against earlier #license-app 1280 containment overrides. */ body[data-app-view="member_hub"] #license-app .intro-layer, body[data-app-view="member_hub"] #license-app .intro-shell { padding: 0 !important; } body[data-app-view="member_hub"] #license-app .member-hub, body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="lobby"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="profile"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="performance"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="reviews"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="club"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="training"], body[data-app-view="member_hub"] #license-app .member-hub[data-active-member-section="premium"] { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; margin: 0 !important; grid-template-columns: 180px minmax(0, 1fr) 296px !important; gap: 0 !important; } body[data-app-view="member_hub"] #license-app .member-hub-content, body[data-app-view="member_hub"] #license-app .member-hub-nav, body[data-app-view="member_hub"] #license-app .member-connect-rail { min-height: 100vh !important; max-height: 100vh !important; height: 100vh !important; } body[data-app-view="member_hub"] #member-hub, body[data-app-view="member_hub"] #member-hub[data-active-member-section="lobby"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="profile"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="performance"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="reviews"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="club"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="training"], body[data-app-view="member_hub"] #member-hub[data-active-member-section="premium"] { width: 100vw !important; max-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; margin: 0 !important; grid-template-columns: 180px minmax(0, 1fr) 296px !important; gap: 0 !important; align-self: start !important; justify-self: start !important; } body[data-app-view="member_hub"] #member-hub-content, body[data-app-view="member_hub"] #member-hub-nav, body[data-app-view="member_hub"] #member-connect-rail { height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } body[data-app-view="member_hub"] .intro-layer, body[data-app-view="member_hub"] .intro-shell { padding: 0 !important; } /* Final 1280x720 text-fit pass for authenticated Member Hub reference layout. */ body[data-app-view="member_hub"] .member-help-trigger { overflow: visible !important; } body[data-app-view="member_hub"] .member-help-trigger .member-help-tooltip { max-width: min(260px, calc(100vw - 32px)) !important; } body[data-app-view="member_hub"] .member-help-label { min-width: 0 !important; } body[data-app-view="member_hub"] .member-help-label > span:first-child { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-profile-bridge-values span, body[data-app-view="member_hub"] .member-profile-bridge-values strong, body[data-app-view="member_hub"] .member-profile-bridge-values em, body[data-app-view="member_hub"] .member-profile-status-list span, body[data-app-view="member_hub"] .member-profile-status-list strong, body[data-app-view="member_hub"] .member-profile-status-list em { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-profile-bridge-values strong, body[data-app-view="member_hub"] .member-profile-status-list strong { font-size: 0.56rem !important; line-height: 1.08 !important; } body[data-app-view="member_hub"] .member-radar-label { width: max-content !important; max-width: 76px !important; white-space: normal !important; overflow-wrap: anywhere !important; } body[data-app-view="member_hub"] .member-fairness-card-grid strong, body[data-app-view="member_hub"] .member-review-weight-values strong, body[data-app-view="member_hub"] .member-review-weight-card strong { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-club-card { grid-template-columns: minmax(0, 1fr) !important; } body[data-app-view="member_hub"] .member-profile-quicklook, body[data-app-view="member_hub"] .member-profile-quicklook * { min-width: 0 !important; } body[data-app-view="member_hub"] .member-profile-quicklook span, body[data-app-view="member_hub"] .member-profile-quicklook strong, body[data-app-view="member_hub"] .member-profile-quicklook p { overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-access-detail-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body[data-app-view="member_hub"] .member-access-detail-list li, body[data-app-view="member_hub"] .member-access-detail-list span, body[data-app-view="member_hub"] .member-access-detail-list strong { min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-help-label { flex-wrap: wrap !important; } body[data-app-view="member_hub"] .member-help-label > span:first-child { flex: 1 1 0 !important; } body[data-app-view="member_hub"] .member-help-label .member-help-trigger { flex: 0 0 18px !important; } body[data-app-view="member_hub"] .member-fairness-list p { align-items: start !important; } body[data-app-view="member_hub"] .member-fairness-list p strong { flex: 0 0 88px !important; max-width: 88px !important; min-width: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } body[data-app-view="member_hub"] .member-connect-reference-card::after { right: 10px !important; top: 46px !important; width: 88px !important; height: 88px !important; } body[data-app-view="member_hub"] .member-connect-avatar-button em { overflow: visible !important; overflow-wrap: anywhere !important; text-overflow: clip !important; white-space: normal !important; } body[data-app-view="member_hub"] .member-club-detail .member-profile-quicklook { grid-template-columns: minmax(0, 1fr) !important; } body[data-app-view="member_hub"] .member-club-detail .member-profile-quicklook-main > strong { overflow-wrap: normal !important; word-break: normal !important; } body[data-app-view="member_hub"] .member-club-detail .member-profile-quicklook-chips { justify-content: start !important; } body[data-app-view="member_hub"] .member-radar-label.is-upper-right, body[data-app-view="member_hub"] .member-radar-label.is-lower-right { left: 82% !important; } body[data-app-view="member_hub"] .member-radar-label.is-upper-left, body[data-app-view="member_hub"] .member-radar-label.is-lower-left { left: 18% !important; } /* NORDWERK entry surface: one calm first screen before the product areas. */ html body[data-app-view="intro_ready"] { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .site-footer { display: none !important; } html body[data-app-view="intro_ready"] #intro-layer, html body[data-app-view="intro_ready"] .intro-shell { height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .intro-start-panel { width: min(1180px, calc(100vw - 48px)) !important; height: 100% !important; min-height: 0 !important; max-height: 100dvh !important; margin: 0 auto !important; padding: 0 0 18px !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; gap: clamp(18px, 3vh, 32px) !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .nordwerk-header { min-height: 62px !important; padding: 10px 18px !important; } html body[data-app-view="intro_ready"] .nordwerk-nav { gap: 18px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry { min-height: 0 !important; height: 100% !important; padding: 18px 24px 26px !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr) !important; align-items: center !important; gap: clamp(28px, 5vw, 72px) !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy { min-width: 0 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy h1 { max-width: 11ch !important; margin: 10px 0 16px !important; font-size: 3.2rem !important; line-height: 0.98 !important; letter-spacing: 0 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy > p { max-width: 54ch !important; margin: 0 0 22px !important; font-size: 1rem !important; line-height: 1.5 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-actions { width: min(100%, 560px) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-actions .entry-button { width: 100% !important; min-width: 0 !important; min-height: 46px !important; padding: 12px 16px !important; font-size: 0.8rem !important; letter-spacing: 0.04em !important; white-space: nowrap !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules { width: min(100%, 560px) !important; margin: 20px 0 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules li { min-width: 0 !important; padding: 10px 12px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video { min-width: 0 !important; width: 100% !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video-frame { width: 100% !important; min-height: 270px !important; aspect-ratio: 16 / 10 !important; display: grid !important; align-content: center !important; justify-items: center !important; padding: 28px !important; } html body[data-app-view="intro_ready"] .nordwerk-hero, html body[data-app-view="intro_ready"] .nordwerk-audience, html body[data-app-view="intro_ready"] #guest-profile, html body[data-app-view="intro_ready"] .nordwerk-modules, html body[data-app-view="intro_ready"] #welcome-guide { display: none !important; } html body[data-app-view="intro_ready"]:has(#guest-profile:not([hidden])) { height: auto !important; min-height: 100dvh !important; overflow: auto !important; } html body[data-app-view="intro_ready"]:has(#guest-profile:not([hidden])) #intro-layer, html body[data-app-view="intro_ready"]:has(#guest-profile:not([hidden])) .intro-shell, html body[data-app-view="intro_ready"]:has(#guest-profile:not([hidden])) .intro-start-panel { height: auto !important; max-height: none !important; overflow: visible !important; } html body[data-app-view="intro_ready"]:has(#guest-profile:not([hidden])) #guest-profile { display: block !important; } @media (max-width: 900px) { html body[data-app-view="intro_ready"] { height: auto !important; min-height: 100dvh !important; overflow: auto !important; } html body[data-app-view="intro_ready"] #intro-layer, html body[data-app-view="intro_ready"] .intro-shell, html body[data-app-view="intro_ready"] .intro-start-panel { height: auto !important; max-height: none !important; overflow: visible !important; } html body[data-app-view="intro_ready"] .nordwerk-entry { grid-template-columns: 1fr !important; padding: 12px 18px 28px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy h1 { font-size: 2.3rem !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video-frame { min-height: 190px !important; } } /* Responsive layout architecture: one stable entry screen, shared axis, unified CTA sizing. */ html body[data-app-view="intro_ready"] { --entry-shell-width: min(1180px, calc(100vw - 40px)); --entry-header-height: 60px; --entry-gap: clamp(14px, 2.4vh, 26px); --entry-control-height: 46px; --entry-radius-sm: 8px; --entry-radius-md: 12px; --entry-radius-lg: 18px; height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] #intro-layer, html body[data-app-view="intro_ready"] .intro-shell { height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 0 !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .intro-start-panel.nordwerk-home, html body[data-app-view="intro_ready"] .intro-start-panel { width: var(--entry-shell-width) !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; margin: 0 auto !important; padding: 14px 0 16px !important; display: grid !important; grid-template-rows: var(--entry-header-height) minmax(0, 1fr) !important; gap: var(--entry-gap) !important; align-items: stretch !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .nordwerk-header { width: 100% !important; min-height: var(--entry-header-height) !important; height: var(--entry-header-height) !important; padding: 0 14px !important; display: grid !important; grid-template-columns: minmax(190px, auto) minmax(0, 1fr) auto !important; align-items: center !important; gap: clamp(12px, 2vw, 22px) !important; border-radius: var(--entry-radius-lg) !important; } html body[data-app-view="intro_ready"] .nordwerk-nav { min-width: 0 !important; justify-content: center !important; gap: clamp(10px, 1.6vw, 18px) !important; } html body[data-app-view="intro_ready"] .nordwerk-nav a { min-height: 34px !important; display: inline-flex !important; align-items: center !important; padding: 0 4px !important; line-height: 1 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry { width: 100% !important; height: 100% !important; min-height: 0 !important; padding: clamp(18px, 3vh, 30px) clamp(18px, 3vw, 38px) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.86fr) !important; align-items: center !important; gap: clamp(24px, 4vw, 60px) !important; overflow: hidden !important; border-radius: clamp(18px, 2vw, 26px) !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy { min-width: 0 !important; align-self: center !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy h1 { max-width: 12ch !important; margin: 8px 0 14px !important; font-size: clamp(2.35rem, 4.15vw, 4.4rem) !important; line-height: 0.98 !important; letter-spacing: 0 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-copy > p { max-width: 58ch !important; margin: 0 0 18px !important; font-size: clamp(0.9rem, 1.05vw, 1.04rem) !important; line-height: 1.48 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-actions { width: min(100%, 560px) !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-actions .entry-button, html body[data-app-view="intro_ready"] #intro-login-button.nordwerk-login-button.entry-button { width: 100% !important; min-width: 0 !important; height: var(--entry-control-height) !important; min-height: var(--entry-control-height) !important; max-height: var(--entry-control-height) !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-width: 1px !important; border-radius: var(--entry-radius-md) !important; font-size: 0.78rem !important; line-height: 1 !important; letter-spacing: 0.03em !important; text-align: center !important; white-space: nowrap !important; box-sizing: border-box !important; } html body[data-app-view="intro_ready"] .entry-button::before, html body[data-app-view="intro_ready"] .entry-button::after { border-radius: calc(var(--entry-radius-md) - 2px) !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules { width: min(100%, 560px) !important; margin: 16px 0 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules li { min-width: 0 !important; min-height: 74px !important; padding: 10px 11px !important; display: grid !important; align-content: start !important; gap: 5px !important; border-radius: var(--entry-radius-sm) !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules strong, html body[data-app-view="intro_ready"] .nordwerk-entry-rules span { min-width: 0 !important; overflow-wrap: anywhere !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules strong { font-size: 0.72rem !important; line-height: 1.12 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules span { font-size: 0.68rem !important; line-height: 1.25 !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video { min-width: 0 !important; width: 100% !important; align-self: center !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video-frame { width: 100% !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; padding: clamp(20px, 3vw, 34px) !important; display: grid !important; align-content: center !important; justify-items: center !important; border-radius: var(--entry-radius-lg) !important; overflow: hidden !important; } html body[data-app-view="intro_ready"] .nordwerk-hero, html body[data-app-view="intro_ready"] .nordwerk-audience, html body[data-app-view="intro_ready"] .nordwerk-modules, html body[data-app-view="intro_ready"] #welcome-guide { display: none !important; } @media (max-width: 1160px) { html body[data-app-view="intro_ready"] { --entry-shell-width: min(100vw - 28px, 1080px); --entry-control-height: 44px; } html body[data-app-view="intro_ready"] .nordwerk-entry { grid-template-columns: minmax(0, 1fr) minmax(270px, 0.78fr) !important; gap: 22px !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-rules { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 1100px) { html body[data-app-view="intro_ready"] .nordwerk-nav { display: none !important; } html body[data-app-view="intro_ready"] .nordwerk-header { grid-template-columns: minmax(180px, 1fr) auto !important; } } @media (max-width: 900px) { html body[data-app-view="intro_ready"] { height: auto !important; min-height: 100dvh !important; overflow: auto !important; } html body[data-app-view="intro_ready"] #intro-layer, html body[data-app-view="intro_ready"] .intro-shell, html body[data-app-view="intro_ready"] .intro-start-panel.nordwerk-home, html body[data-app-view="intro_ready"] .intro-start-panel { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; } html body[data-app-view="intro_ready"] .nordwerk-entry { grid-template-columns: 1fr !important; } html body[data-app-view="intro_ready"] .nordwerk-entry-video-frame { max-height: 300px !important; } }