/* 2026 visual refresh: shared polish for pre-education Cognitive pages.
   Loaded after page-specific CSS so older screens align with the newer education UI. */
:root {
    --refresh-purple: #6d5dfc;
    --refresh-deep: #4338ca;
    --refresh-violet: #8b5cf6;
    --refresh-ink: #182033;
    --refresh-muted: #667085;
    --refresh-surface: rgba(255, 255, 255, .94);
    --refresh-border: #e4e7ec;
    --refresh-shadow: 0 14px 38px rgba(15, 23, 42, .07);
    --refresh-shadow-lg: 0 22px 54px rgba(67, 56, 202, .18);
}

/* App shell and page rhythm */
body.app-body { background: #f4f7fb; }
.app-main {
    background:
        radial-gradient(circle at 92% 0, rgba(139, 92, 246, .09), transparent 29%),
        radial-gradient(circle at 18% 100%, rgba(79, 70, 229, .055), transparent 25%),
        #f4f7fb;
}
.app-main > .container.app-page,
.app-main > .container.settings-root,
.app-main > .container.planner-root,
.app-main > .container.fc-root,
.app-main > .container.mindmap-root {
    width: 100%;
    max-width: 1240px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.app-main > .container.settings-root { max-width: 1120px !important; }
.app-main > .container.planner-root { max-width: 1100px !important; }

/* Consistent premium-style page heroes */
.app-main .page-banner {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 24px;
    padding: clamp(27px, 4vw, 46px);
    color: #fff;
    background: linear-gradient(135deg, #312e81 0%, var(--refresh-purple) 58%, var(--refresh-violet) 100%) !important;
    border: 0;
    border-radius: 28px;
    box-shadow: var(--refresh-shadow-lg);
}
.app-main .page-banner::before,
.app-main .page-banner::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
}
.app-main .page-banner::before { width: 280px; height: 280px; right: -105px; top: -165px; }
.app-main .page-banner::after { width: 145px; height: 145px; left: 43%; bottom: -115px; }
.app-main .page-banner > * { position: relative; z-index: 1; }
.app-main .page-banner h1,
.app-main .page-banner .game-title {
    max-width: 820px;
    margin: 0 0 9px;
    color: #fff !important;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -.04em;
}
.app-main .page-banner .banner-sub { max-width: 760px; color: rgba(255, 255, 255, .83) !important; line-height: 1.65; }

/* Reusable surfaces */
.analytics-card,
.settings-section,
.settings-block,
.bug-report-card,
.docs-section,
.docs-search-card,
.docs-toc,
.mini-card,
.timer-container,
.quiz-locked-panel,
.generate-section,
.prebuilt-panel,
.fc-view,
.planner-card,
.today-header,
.week-blocks,
.mindmap-sidebar,
.mindmap-canvas-wrap,
.recent-activity,
.weekly-activity-panel,
.recent-tasks-panel,
.study-flow-panel,
.city-summary-panel,
.feature-card {
    border: 1px solid var(--refresh-border) !important;
    border-radius: 22px !important;
    background: var(--container-bg, var(--refresh-surface)) !important;
    box-shadow: var(--refresh-shadow) !important;
}
.analytics-card,
.settings-section,
.settings-block,
.bug-report-card,
.docs-section,
.docs-search-card,
.docs-toc,
.prebuilt-panel,
.fc-view,
.planner-card { padding: clamp(20px, 3vw, 28px) !important; }
.analytics-grid { gap: 16px !important; margin: 0 0 22px !important; }
.analytics-grid .analytics-card { position: relative; overflow: hidden; min-height: 118px; }
.analytics-grid .analytics-card::after { content: ""; position: absolute; width: 68px; height: 68px; right: -24px; bottom: -27px; border-radius: 50%; background: rgba(109, 93, 252, .1); }
.analytics-card h2,
.settings-section h2,
.settings-block h2,
.docs-section h2,
.bug-report-card h2 { color: var(--text-primary, var(--refresh-ink)) !important; }

/* Dashboard */
.dashboard-root { max-width: 1240px !important; }
.dashboard-grid { gap: 20px !important; }
.feature-card { overflow: hidden; padding: 24px !important; transition: transform .2s, box-shadow .2s, border-color .2s !important; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(109, 93, 252, .35) !important; box-shadow: 0 20px 46px rgba(15,23,42,.11) !important; }
.feature-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: rgba(109,93,252,.1); }
.jump-card { border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 34px rgba(67,56,202,.16); }

/* Tool-specific visual alignment */
.timer-container { padding: clamp(24px, 5vw, 42px) !important; }
.duration-btn, .study-tab, .btn-tool, .confidence-btn, .week-pill { border-radius: 12px !important; }
.quiz-header, .study-header, .editor-header, .planner-header-top, .mindmap-toolbar { border-radius: 18px !important; }
.quiz-option, .card-row-labels, .subject-checkbox, .day-card-header, .plan-day-row, .today-row-left, .pref-item, .settings-link-row { border-radius: 13px !important; }
.fc-set-actions, .study-controls, .wizard-buttons, .bug-actions, .save-row { gap: 11px !important; }
.fc-action-btn, .btn-study-nav, .btn-flip, .btn-add-card, .btn-save-set, .btn-new-set, .btn-quiz-submit,
.btn-primary, .btn-themed, .btn-jump-in, .btn-wizard-next, .btn-save-settings, .bug-submit, .btn-new-map {
    border-radius: 12px !important;
    box-shadow: 0 9px 22px rgba(91, 91, 214, .2) !important;
    transition: transform .2s, box-shadow .2s, filter .2s !important;
}
.fc-action-btn:hover, .btn-study-nav:hover, .btn-flip:hover, .btn-primary:hover, .btn-themed:hover,
.btn-jump-in:hover, .btn-wizard-next:hover, .btn-save-settings:hover, .bug-submit:hover, .btn-new-map:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(91, 91, 214, .28) !important;
}
.search-bar-app, .docs-search-input, .editor-title-input, .editor-desc-input,
.settings-root input, .settings-root select, .settings-root textarea,
.bug-report-page input, .bug-report-page select, .bug-report-page textarea {
    border-radius: 12px !important;
    border-color: #d0d5dd !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.search-bar-app:focus, .docs-search-input:focus, .editor-title-input:focus, .editor-desc-input:focus,
.settings-root input:focus, .settings-root select:focus, .settings-root textarea:focus,
.bug-report-page input:focus, .bug-report-page select:focus, .bug-report-page textarea:focus {
    outline: 0 !important;
    border-color: var(--refresh-purple) !important;
    box-shadow: 0 0 0 4px rgba(109, 93, 252, .13) !important;
}

/* Tables */
.analytics-card table, .docs-section table { border: 1px solid var(--refresh-border); border-radius: 14px; overflow: hidden; }
.analytics-card th, .docs-section th { background: var(--card-bg, #f8fafc); color: var(--refresh-muted); font-size: .74rem; letter-spacing: .045em; text-transform: uppercase; }
.analytics-card th, .analytics-card td, .docs-section th, .docs-section td { padding: 13px 15px !important; }

/* Settings, docs and reporting */
.settings-root-wide, .bug-report-page, .docs-root { max-width: 1240px !important; }
.settings-section { margin-bottom: 20px !important; }
.settings-section .section-title { color: var(--refresh-deep) !important; }
.bug-meta-strip { border-radius: 16px !important; background: rgba(109,93,252,.07) !important; border: 1px solid rgba(109,93,252,.14) !important; }
.docs-grid { gap: 20px !important; }
.docs-pill-link { border-radius: 999px !important; }

/* City remains a game surface but uses the shared framing. */
.city-shell .app-main { padding: 20px 24px 30px; }
.game-container { width: 100%; max-width: 1480px; margin: 0 auto; }
.city-shell .page-banner { min-height: 116px; }
.resource-panel, .building-menu, .info-panel, .modal-content, .flyout-panel {
    border-radius: 18px !important;
    border-color: var(--refresh-border) !important;
    box-shadow: 0 16px 40px rgba(15,23,42,.13) !important;
}

/* Retained legacy admin screen (the modular control centre uses admin.css). */
body.legacy-admin-page { background: radial-gradient(circle at 92% 0, rgba(139,92,246,.11), transparent 30%), #f4f7fb !important; }
.legacy-admin-page .admin-wrap { max-width: 1320px; }
.legacy-admin-page .admin-hero { border-radius: 28px !important; background: linear-gradient(135deg, #312e81 0%, #6d5dfc 58%, #8b5cf6 100%) !important; box-shadow: var(--refresh-shadow-lg) !important; }
.legacy-admin-page .admin-card, .legacy-admin-page .metric { border-radius: 20px !important; border-color: var(--refresh-border) !important; box-shadow: var(--refresh-shadow) !important; }
.legacy-admin-page .btn { border-radius: 11px !important; }

/* Public, authentication, checkout and legal pages */
body.marketing-page,
body.auth-page,
body.checkout-page,
body.success-page,
body.legal-page,
body.password-page {
    background:
        radial-gradient(circle at 10% 0, rgba(139,92,246,.15), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(79,70,229,.14), transparent 28%),
        #f5f7fb !important;
}
body.auth-page, body.checkout-page, body.success-page, body.password-page { min-height: 100vh; }
/* Landing and authentication pages opt into a permanent dark canvas. This must
   follow the light public-page rule above because app-refresh.css loads after
   each template's page-local CSS. */
html.auth-dark-root,
html.auth-dark-root body,
body.auth-dark.marketing-page,
body.auth-dark.auth-page {
    background-color: #0f1623 !important;
    color-scheme: dark;
}
body.auth-dark.marketing-page {
    background:
        radial-gradient(circle at 10% 0, rgba(102,126,234,.15), transparent 28%),
        radial-gradient(circle at 90% 100%, rgba(118,75,162,.14), transparent 28%),
        #0f1623 !important;
}
body.auth-dark.auth-page {
    background:
        radial-gradient(circle at 10% 0, rgba(102,126,234,.12), transparent 30%),
        radial-gradient(circle at 90% 100%, rgba(118,75,162,.1), transparent 30%),
        #0f1623 !important;
}
body.auth-dark.auth-page .login-wrap {
    color: #e2e8f0;
}
.login-wrap, .stripe-container, .success-container, .password-card {
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 28px !important;
    box-shadow: 0 28px 70px rgba(30,27,75,.18) !important;
}
.login-wrap { overflow: hidden; }
.login-wrap input, .stripe-container input, .password-card input { border-radius: 12px !important; }
.login-wrap button, .stripe-container button, .success-container .btn, .password-card button {
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(91,91,214,.2) !important;
}
.marketing-page .hero { padding-top: clamp(72px, 10vw, 120px) !important; }
.marketing-page .hero h1 { letter-spacing: -.045em; }
.marketing-page .feature-card, .marketing-page .pricing-card, .marketing-page .step-card { border-radius: 22px !important; box-shadow: var(--refresh-shadow) !important; }
.legal-shell { max-width: 1080px !important; }
.legal-hero { border-radius: 28px !important; box-shadow: var(--refresh-shadow-lg) !important; }
.legal-content, .legal-card { border-radius: 22px !important; box-shadow: var(--refresh-shadow) !important; }

/* Dark mode */
body.dark-mode.app-body { background: #0f172a; }
body.dark-mode .app-main { background: radial-gradient(circle at 92% 0, rgba(139,92,246,.13), transparent 29%), #0f172a; }
body.dark-mode .analytics-card,
body.dark-mode .settings-section,
body.dark-mode .settings-block,
body.dark-mode .bug-report-card,
body.dark-mode .docs-section,
body.dark-mode .docs-search-card,
body.dark-mode .docs-toc,
body.dark-mode .timer-container,
body.dark-mode .quiz-locked-panel,
body.dark-mode .generate-section,
body.dark-mode .prebuilt-panel,
body.dark-mode .fc-view,
body.dark-mode .planner-card,
body.dark-mode .mindmap-sidebar,
body.dark-mode .mindmap-canvas-wrap,
body.dark-mode .feature-card { border-color: #475569 !important; }

@media (max-width: 900px) {
    .app-main { padding-top: 72px; }
    .app-main .page-banner { min-height: 128px; }
    .city-shell .app-main { padding-top: 72px; }
}
@media (max-width: 640px) {
    .app-main { padding: 68px 14px 28px; }
    .app-main .page-banner { min-height: 0; padding: 25px 22px; border-radius: 22px; }
    .app-main .page-banner h1, .app-main .page-banner .game-title { font-size: 2rem; }
    .analytics-card, .settings-section, .settings-block, .bug-report-card, .docs-section,
    .docs-search-card, .docs-toc, .prebuilt-panel, .fc-view, .planner-card { padding: 18px !important; border-radius: 18px !important; }
    .city-shell .app-main { padding: 68px 10px 20px; }
}

/* Responsive safety net for legacy cards, forms and data tables. */
.app-main img,
.app-main canvas,
.app-main svg { max-width: 100%; }
.app-main h1,
.app-main h2,
.app-main h3,
.app-main p,
.app-main a,
.app-main button { overflow-wrap: anywhere; }
.table-wrap,
.analytics-card,
.docs-section,
.settings-section { min-width: 0; }
.table-wrap,
.analytics-card:has(table),
.docs-section:has(table) { overflow-x: auto; overscroll-behavior-inline: contain; }
.app-main table { max-width: 100%; }
@media (max-width: 640px) {
    .app-main .page-banner h1,
    .app-main .page-banner .game-title { font-size: clamp(1.65rem, 9vw, 2.2rem); }
    .app-main input,
    .app-main select,
    .app-main textarea,
    .app-main button { max-width: 100%; }
}