/**
 * Shared page reskin for Modern Rasathane v4.
 *
 * Loaded after each page's legacy CSS and scoped to body.rasathane-page so the
 * older simple pages can keep their PHP/JS contracts while sharing one surface
 * language.
 */

body.rasathane-page {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: 1.5;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.rasathane-page *,
body.rasathane-page *::before,
body.rasathane-page *::after {
    box-sizing: border-box;
    letter-spacing: 0;
}

body.rasathane-page :where(button, input, select, textarea) {
    font: inherit;
}

body.rasathane-page :where(a) {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body.rasathane-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

body.rasathane-page :where(*, *::before, *::after) {
    text-transform: none !important;
}

body.rasathane-page :where(code, pre, .mono, .saved-pin-coords) {
    font-variant-numeric: tabular-nums;
}

body.rasathane-page :where(.back-link, .logout-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    border-radius: var(--radius-md);
    color: var(--muted) !important;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
}

body.rasathane-page :where(.back-link:hover, .logout-link:hover) {
    color: var(--text) !important;
}

body.rasathane-page :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
) {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    background: var(--input-bg) !important;
    color: var(--text) !important;
    box-shadow: none !important;
    outline: none;
}

body.rasathane-page :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea
):focus {
    border-color: var(--focus-color) !important;
    box-shadow: var(--focus-ring) !important;
}

body.rasathane-page :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--accent);
}

body.rasathane-page :where(input[type="range"]) {
    accent-color: var(--accent);
}

body.rasathane-page :where(.btn-primary, .cta-btn, button[type="submit"], .btn-ea-login) {
    min-height: 44px;
    border-radius: var(--radius-md) !important;
    font-weight: 700;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

body.rasathane-page :where(.btn-primary, .cta-btn) {
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: var(--surface) !important;
    box-shadow: none !important;
}

body.rasathane-page :where(.btn-primary:hover, .cta-btn:hover) {
    opacity: 0.92;
    transform: none !important;
}

body.rasathane-page :where(.btn-secondary) {
    min-height: 44px;
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-page :where(.btn-danger) {
    min-height: 44px;
    background: var(--hazard-strong) !important;
    color: var(--surface) !important;
    border: 1px solid var(--hazard-strong) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-page :where(.msg-error, .form-error) {
    background: color-mix(in srgb, var(--hazard-strong) 12%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--hazard-strong) 34%, var(--rule)) !important;
    color: var(--hazard-strong) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-page :where(.msg-success) {
    background: color-mix(in srgb, var(--hazard-micro) 12%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--hazard-micro) 34%, var(--rule)) !important;
    color: var(--hazard-micro) !important;
    border-radius: var(--radius-md) !important;
}

/* Auth and account pages */

body.rasathane-auth-page {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(24px, 5vw, 48px) var(--space-lg) !important;
}

body.rasathane-account-page {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 72px var(--space-lg) 64px !important;
}

body.rasathane-auth-page .back-link,
body.rasathane-account-page .back-link {
    position: fixed;
    top: var(--space-lg);
    left: var(--space-lg);
    z-index: 10;
}

body.rasathane-account-page .logout-link {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    z-index: 10;
}

body.rasathane-auth-page .auth-logo {
    margin-bottom: var(--space-xl) !important;
}

body.rasathane-auth-page .auth-logo img {
    height: 72px !important;
    max-width: min(280px, 80vw);
    object-fit: contain;
}

body.rasathane-page .auth-card {
    width: 100%;
    max-width: 420px !important;
    margin: 0 auto var(--space-xl) !important;
    padding: var(--space-2xl) !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.rasathane-account-page .auth-card {
    max-width: 760px !important;
}

body.rasathane-page .auth-card h1,
body.rasathane-page .auth-card h2,
body.rasathane-page .auth-card h3 {
    color: var(--text) !important;
    line-height: 1.25;
}

body.rasathane-page .auth-card h1 {
    font-size: var(--text-2xl) !important;
    font-weight: 700 !important;
}

body.rasathane-page .auth-card h2 {
    font-size: var(--text-xl) !important;
    font-weight: 650 !important;
}

body.rasathane-page .auth-card .subtitle,
body.rasathane-page :where(.hint, .info-label, .auth-links, .section-desc, .input-help, .notif-summary, .saved-pin-label, .saved-pin-date) {
    color: var(--muted) !important;
}

body.rasathane-page .auth-tabs {
    margin: calc(var(--space-2xl) * -1) calc(var(--space-2xl) * -1) var(--space-xl) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: var(--bg);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

body.rasathane-page .auth-tab {
    min-height: 52px;
    color: var(--muted) !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 700 !important;
}

body.rasathane-page .auth-tab:hover {
    background: var(--surface-hover) !important;
    color: var(--text) !important;
}

body.rasathane-page .auth-tab.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
    background: var(--surface) !important;
}

body.rasathane-page .form-group label,
body.rasathane-page .slider-label,
body.rasathane-page .toggle-row label {
    color: var(--text) !important;
    font-size: var(--text-sm) !important;
    font-weight: 650 !important;
}

body.rasathane-page .checkbox-group,
body.rasathane-page .toggle-row,
body.rasathane-page .radio-group label {
    min-height: 44px;
}

body.rasathane-page .forgot-link a,
body.rasathane-page .auth-links a {
    color: var(--accent) !important;
}

body.rasathane-page .btn-ea-login {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--rule) !important;
    box-shadow: none !important;
}

body.rasathane-page .auth-divider {
    color: var(--muted) !important;
    font-size: var(--text-xs) !important;
    font-weight: 650 !important;
}

body.rasathane-page .auth-divider::before,
body.rasathane-page .auth-divider::after,
body.rasathane-page .section-divider {
    background: var(--rule) !important;
    border-color: var(--rule) !important;
}

body.rasathane-page .turnstile-wrap {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    margin: var(--space-md) 0 !important;
    padding: var(--space-sm) !important;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-sm) !important;
}

body.rasathane-page .turnstile-label {
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 650;
}

body.rasathane-page .turnstile-wrap > :not(.turnstile-label) {
    align-self: center;
}

body.rasathane-account-page .info-row,
body.rasathane-account-page .saved-pin-row,
body.rasathane-account-page .source-row {
    border-color: var(--rule) !important;
}

body.rasathane-account-page .info-value,
body.rasathane-account-page .saved-pin-coords {
    color: var(--text) !important;
}

body.rasathane-account-page .role-badge,
body.rasathane-account-page .badge {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--rule)) !important;
    color: var(--accent) !important;
    border-radius: var(--radius-pill) !important;
    font-variant-numeric: tabular-nums;
}

body.rasathane-account-page .notif-settings,
body.rasathane-account-page .custom-panel,
body.rasathane-account-page .notif-summary,
body.rasathane-account-page .saved-pin-row,
body.rasathane-account-page #eqSearchResults,
body.rasathane-account-page .modal-card {
    background: var(--surface) !important;
    border-color: var(--rule) !important;
    box-shadow: none !important;
}

body.rasathane-account-page #notifMap {
    border-color: var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-account-page .modal-overlay {
    background: var(--overlay-bg) !important;
}

/* Notification tier picker and magnitude badge language */

body.rasathane-page .tier-list {
    gap: var(--space-sm) !important;
}

body.rasathane-page .tier-list .tier-option {
    grid-template-columns: 44px 1fr auto !important;
    min-height: 58px;
    gap: var(--space-md) !important;
    padding: var(--space-sm) var(--space-md) !important;
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-page .tier-radio {
    display: none !important;
}

body.rasathane-page .tier-indicator,
body.rasathane-page .alert-mag,
body.rasathane-page .tier-badge {
    font-variant-numeric: tabular-nums;
}

body.rasathane-page .tier-indicator {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    gap: 2px !important;
    background: color-mix(in srgb, var(--hazard-micro) 15%, transparent) !important;
    color: var(--hazard-micro) !important;
    font-weight: 700;
}

body.rasathane-page .tier-indicator .dot {
    width: 5px !important;
    height: 5px !important;
}

body.rasathane-page .tier-option:has(input[value="felt"]) .tier-indicator,
body.rasathane-page .tier-option:has(input[value="clearly_felt"]) .tier-indicator {
    background: color-mix(in srgb, var(--hazard-minor) 16%, transparent) !important;
    color: var(--hazard-minor) !important;
}

body.rasathane-page .tier-option:has(input[value="strongly_felt"]) .tier-indicator,
body.rasathane-page .tier-option:has(input[value="minor_damage"]) .tier-indicator {
    background: color-mix(in srgb, var(--hazard-mod) 18%, transparent) !important;
    color: var(--hazard-mod) !important;
}

body.rasathane-page .tier-option:has(input[value="damaging"]) .tier-indicator,
body.rasathane-page .tier-option:has(input[value="severe_damage"]) .tier-indicator {
    background: var(--hazard-strong) !important;
    color: var(--surface) !important;
}

body.rasathane-page .tier-option:has(input[value="major"]) .tier-indicator,
body.rasathane-page .tier-option:has(input[value="destructive"]) .tier-indicator {
    background: var(--hazard-severe) !important;
    color: var(--surface) !important;
}

body.rasathane-page .tier-option.selected {
    border-color: var(--text) !important;
    box-shadow: 0 0 0 2px var(--text) inset !important;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
}

body.rasathane-page .tier-name {
    color: var(--text) !important;
    font-weight: 700 !important;
}

body.rasathane-page .tier-depth {
    color: var(--muted) !important;
}

body.rasathane-page .tier-mag {
    min-width: 54px;
    min-height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-sm) !important;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text) !important;
    font-weight: 700 !important;
}

body.rasathane-page .custom-panel {
    padding: var(--space-lg) !important;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-page .styled-slider::-webkit-slider-thumb {
    background: var(--surface) !important;
    border: 2px solid var(--accent) !important;
}

body.rasathane-page .styled-slider::-moz-range-thumb {
    background: var(--surface) !important;
    border: 2px solid var(--accent) !important;
}

/* Alerts page */

body.rasathane-alerts-page {
    display: block !important;
    padding: 0 !important;
}

body.rasathane-alerts-page .alert-page,
body.rasathane-changelog-page .changelog-page {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    padding: 72px var(--space-xl) 64px !important;
}

body.rasathane-alerts-page .page-title,
body.rasathane-changelog-page .page-title {
    margin: 0 0 var(--space-sm) !important;
    background: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 40px !important;
    line-height: 1.1;
}

body.rasathane-alerts-page .page-subtitle,
body.rasathane-changelog-page .page-subtitle {
    max-width: 70ch;
    color: var(--muted) !important;
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-2xl) !important;
}

body.rasathane-alerts-page .stats-hero {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--space-md) !important;
}

body.rasathane-alerts-page .hero-card,
body.rasathane-alerts-page .s-card,
body.rasathane-changelog-page .p-card {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.rasathane-alerts-page .hero-card {
    border-top: 3px solid var(--accent) !important;
    border-image: none !important;
}

body.rasathane-alerts-page .hero-card .hero-icon,
body.rasathane-alerts-page .s-card h2 i {
    color: var(--accent) !important;
}

body.rasathane-alerts-page .hero-value {
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
}

body.rasathane-alerts-page .hero-label,
body.rasathane-alerts-page .s-card h2,
body.rasathane-alerts-page .alert-meta,
body.rasathane-alerts-page .empty-state,
body.rasathane-alerts-page .stat-footer {
    color: var(--muted) !important;
}

body.rasathane-alerts-page .alert-item {
    min-height: 64px;
    background: var(--bg) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-alerts-page .alert-location a {
    color: var(--text) !important;
}

body.rasathane-alerts-page .alert-mag {
    min-width: 44px !important;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--surface) !important;
    background: var(--hazard-mod) !important;
    font-size: var(--text-lg) !important;
    font-weight: 750 !important;
}

body.rasathane-page :where(.mag-badge--local_felt, .tier-badge--local_felt) {
    background: color-mix(in srgb, var(--hazard-micro) 15%, transparent) !important;
    color: var(--hazard-micro) !important;
    border-color: color-mix(in srgb, var(--hazard-micro) 35%, var(--rule)) !important;
}

body.rasathane-page :where(.mag-badge--felt, .mag-badge--clearly_felt, .tier-badge--felt, .tier-badge--clearly_felt) {
    background: color-mix(in srgb, var(--hazard-minor) 16%, transparent) !important;
    color: var(--hazard-minor) !important;
    border-color: color-mix(in srgb, var(--hazard-minor) 35%, var(--rule)) !important;
}

body.rasathane-page :where(.mag-badge--strongly_felt, .mag-badge--minor_damage, .tier-badge--strongly_felt, .tier-badge--minor_damage) {
    background: color-mix(in srgb, var(--hazard-mod) 18%, transparent) !important;
    color: var(--hazard-mod) !important;
    border-color: color-mix(in srgb, var(--hazard-mod) 35%, var(--rule)) !important;
}

body.rasathane-page :where(.mag-badge--damaging, .mag-badge--severe_damage) {
    background: var(--hazard-strong) !important;
    color: var(--surface) !important;
}

body.rasathane-page :where(.tier-badge--damaging, .tier-badge--severe_damage) {
    background: color-mix(in srgb, var(--hazard-strong) 16%, transparent) !important;
    color: var(--hazard-strong) !important;
    border-color: color-mix(in srgb, var(--hazard-strong) 35%, var(--rule)) !important;
}

body.rasathane-page :where(.mag-badge--major, .mag-badge--destructive) {
    background: var(--hazard-severe) !important;
    color: var(--surface) !important;
}

body.rasathane-page :where(.tier-badge--major, .tier-badge--destructive) {
    background: color-mix(in srgb, var(--hazard-severe) 16%, transparent) !important;
    color: var(--hazard-severe) !important;
    border-color: color-mix(in srgb, var(--hazard-severe) 35%, var(--rule)) !important;
}

body.rasathane-alerts-page .tier-badge,
body.rasathane-alerts-page .source-badge {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
}

body.rasathane-alerts-page .source-badge {
    background: var(--surface) !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    text-transform: none !important;
}

body.rasathane-alerts-page .legend-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

body.rasathane-alerts-page .legend-table th,
body.rasathane-alerts-page .legend-table td {
    border-color: var(--rule) !important;
}

body.rasathane-alerts-page .push-cta-banner {
    background: var(--surface) !important;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.rasathane-alerts-page .push-cta-inner {
    color: var(--text) !important;
}

body.rasathane-alerts-page .push-cta-inner > i {
    color: var(--accent) !important;
}

body.rasathane-alerts-page .push-cta-inner button:first-of-type {
    background: var(--accent) !important;
    color: var(--surface) !important;
}

body.rasathane-alerts-page .push-cta-inner button:last-of-type {
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid var(--rule) !important;
}

/* Editorial content pages */

body.rasathane-content-page {
    display: block !important;
    padding: 0 !important;
}

body.rasathane-features-page .features-page {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 64px !important;
}

body.rasathane-features-page .hero,
body.rasathane-sources-page .hero {
    padding: 80px var(--space-xl) 48px !important;
    background: var(--bg) !important;
    text-align: center !important;
    text-wrap: balance;
}

body.rasathane-features-page .hero h1,
body.rasathane-sources-page .hero h1,
body.rasathane-sources-page .hero h1,
body.rasathane-changelog-page .page-title {
    background: none !important;
    color: var(--text) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 44px !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
}

body.rasathane-features-page .hero p,
body.rasathane-sources-page .hero p {
    color: var(--muted) !important;
    font-size: var(--text-lg) !important;
    line-height: 1.55 !important;
}

body.rasathane-features-page .hero-image,
body.rasathane-features-page .feature-band-image {
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    animation: none !important;
}

body.rasathane-features-page .stats-strip,
body.rasathane-features-page .secondary-grid,
body.rasathane-features-page .chips-section,
body.rasathane-features-page .mobile-cta,
body.rasathane-features-page .stat-footer {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin-inline: auto !important;
    padding-inline: var(--space-xl) !important;
}

body.rasathane-features-page .stats-strip {
    border-color: var(--rule) !important;
}

body.rasathane-features-page .stat-number,
body.rasathane-features-page .feature-band a,
body.rasathane-features-page .secondary-card a {
    color: var(--accent) !important;
}

body.rasathane-features-page .stat-label,
body.rasathane-features-page .feature-band-desc,
body.rasathane-features-page .card-desc,
body.rasathane-features-page .chip,
body.rasathane-features-page .mobile-cta p,
body.rasathane-features-page .stat-footer {
    color: var(--muted) !important;
}

body.rasathane-features-page .feature-band {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--space-2xl) !important;
    padding: 56px max(var(--space-xl), calc((100vw - 1080px) / 2)) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: var(--surface) !important;
}

body.rasathane-features-page .feature-band:nth-of-type(odd) {
    background: var(--bg) !important;
}

body.rasathane-features-page .feature-band.reverse {
    direction: rtl;
}

body.rasathane-features-page .feature-band.reverse > * {
    direction: ltr;
}

body.rasathane-features-page .feature-band-label {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--rule)) !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
}

body.rasathane-features-page .feature-band-title,
body.rasathane-features-page .card-title,
body.rasathane-features-page .mobile-cta h2 {
    color: var(--text) !important;
}

body.rasathane-features-page .section-title {
    width: min(100%, 1080px);
    max-width: 1080px;
    margin-inline: auto !important;
    padding-inline: var(--space-xl);
    color: var(--muted) !important;
    font-size: var(--text-sm) !important;
    font-weight: 700 !important;
}

body.rasathane-features-page .secondary-card,
body.rasathane-features-page .chip {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.rasathane-features-page .card-icon {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    color: var(--accent) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-changelog-page .p-card h2 {
    color: var(--text) !important;
}

body.rasathane-changelog-page .p-card h2 i {
    color: var(--accent) !important;
}

body.rasathane-changelog-page .change-entry {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-lg) 0 !important;
    border-color: var(--rule) !important;
}

body.rasathane-changelog-page .change-title {
    margin-left: 0 !important;
    color: var(--text) !important;
    font-size: var(--text-sm) !important;
    font-weight: 700 !important;
}

body.rasathane-changelog-page .change-desc {
    grid-column: 2;
    color: var(--muted) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.65 !important;
}

body.rasathane-changelog-page .badge {
    border-radius: var(--radius-md) !important;
    font-size: var(--text-xs) !important;
    font-weight: 750 !important;
}

body.rasathane-changelog-page .badge--new {
    background: color-mix(in srgb, var(--hazard-micro) 14%, var(--surface)) !important;
    color: var(--hazard-micro) !important;
    border: 1px solid color-mix(in srgb, var(--hazard-micro) 34%, var(--rule)) !important;
}

body.rasathane-changelog-page .badge--improve {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    color: var(--accent) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule)) !important;
}

body.rasathane-changelog-page .badge--fix {
    background: color-mix(in srgb, var(--hazard-minor) 14%, var(--surface)) !important;
    color: var(--hazard-minor) !important;
    border: 1px solid color-mix(in srgb, var(--hazard-minor) 34%, var(--rule)) !important;
}

/* Sources page */

body.rasathane-sources-page {
    --kaynak-model-accent: var(--accent);
    --kaynak-map-accent: var(--hazard-mod);
    --kaynak-neutral-accent: var(--muted);
    --kaynak-toc-bg: var(--surface);
    --kaynak-citation-bg: var(--bg);
    --kaynak-citation-border: var(--rule);
    --kaynak-citation-accent: var(--accent);
    --kaynak-citation-text: var(--text);
    --kaynak-body-text: var(--text);
    --kaynak-bullet-text: var(--text);
    display: block !important;
    padding: 0 !important;
    background-image: none !important;
}

body.rasathane-sources-page .top-nav,
body.rasathane-sources-page .kaynak-page {
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
}

body.rasathane-sources-page .toc-wrapper {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    margin: var(--space-xl) 0 var(--space-2xl) !important;
}

body.rasathane-sources-page .toc a,
body.rasathane-sources-page .section-badge,
body.rasathane-sources-page .source-type,
body.rasathane-sources-page .citation-key {
    background: var(--bg) !important;
    color: var(--muted) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
}

body.rasathane-sources-page .thanks-card,
body.rasathane-sources-page .source-card,
body.rasathane-sources-page .citation-box {
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

body.rasathane-sources-page .thanks-card {
    border-left: 3px solid var(--mission) !important;
}

body.rasathane-sources-page .thanks-avatar,
body.rasathane-sources-page .thanks-links a,
body.rasathane-sources-page .section-icon {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--accent) 28%, var(--rule)) !important;
    color: var(--accent) !important;
}

body.rasathane-sources-page .thanks-content .label,
body.rasathane-sources-page .source-link,
body.rasathane-sources-page .doi-link {
    color: var(--accent) !important;
}

body.rasathane-sources-page .source-card:hover {
    transform: none !important;
    background: var(--surface) !important;
}

body.rasathane-sources-page .category-section {
    margin-bottom: 56px !important;
}

body.rasathane-sources-page .section-header {
    border-color: var(--rule) !important;
}

body.rasathane-sources-page .section-title h2,
body.rasathane-sources-page .source-title,
body.rasathane-sources-page .thanks-content h2 {
    color: var(--text) !important;
}

body.rasathane-sources-page .source-usage,
body.rasathane-sources-page .source-usage span,
body.rasathane-sources-page .citation-box,
body.rasathane-sources-page .sub-list-item,
body.rasathane-sources-page .page-footer {
    color: var(--muted) !important;
}

body.rasathane-sources-page .source-usage i {
    color: var(--accent) !important;
}

body.rasathane-sources-page .citation-box {
    border-left: 3px solid var(--accent) !important;
}

body.rasathane-sources-page .doi-link {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--rule)) !important;
}

/* Offline fallback */

body.rasathane-offline-page {
    min-height: 100vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
    background: var(--bg) !important;
}

body.rasathane-offline-page .container {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    padding: var(--space-2xl) !important;
    background: var(--surface) !important;
    border: 1px solid var(--rule) !important;
    border-radius: var(--radius-md) !important;
    text-align: center;
    box-shadow: none !important;
}

body.rasathane-offline-page .offline-icon {
    width: 32px;
    height: 32px;
    color: var(--muted);
    margin-bottom: var(--space-lg);
}

body.rasathane-offline-page h1 {
    margin: 0 0 var(--space-sm) !important;
    color: var(--text) !important;
    font-size: var(--text-2xl) !important;
    font-weight: 650 !important;
}

body.rasathane-offline-page p {
    color: var(--muted) !important;
    font-size: var(--text-base) !important;
    line-height: 1.55 !important;
}

body.rasathane-offline-page .offline-note {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--rule);
    font-size: var(--text-sm) !important;
}

body.rasathane-offline-page button {
    min-width: 160px;
    min-height: 44px;
    margin-top: var(--space-md);
    background: var(--accent) !important;
    color: var(--surface) !important;
    border: 1px solid var(--accent) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700;
}

@media (max-width: 768px) {
    body.rasathane-page :where(.back-link, .logout-link) {
        position: static !important;
        margin: var(--space-md) var(--space-md) 0;
    }

    body.rasathane-auth-page,
    body.rasathane-account-page {
        padding: var(--space-lg) var(--space-md) 48px !important;
    }

    body.rasathane-page .auth-card {
        padding: var(--space-xl) !important;
    }

    body.rasathane-page .auth-tabs {
        margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-lg) !important;
    }

    body.rasathane-alerts-page .alert-page,
    body.rasathane-changelog-page .changelog-page {
        padding: 48px var(--space-md) !important;
    }

    body.rasathane-alerts-page .page-title,
    body.rasathane-changelog-page .page-title,
    body.rasathane-features-page .hero h1,
    body.rasathane-sources-page .hero h1 {
        font-size: 30px !important;
    }

    body.rasathane-alerts-page .stats-hero {
        grid-template-columns: 1fr !important;
    }

    body.rasathane-alerts-page .alert-item {
        flex-direction: row !important;
    }

    body.rasathane-features-page .feature-band {
        grid-template-columns: 1fr !important;
        padding: 40px var(--space-lg) !important;
    }

    body.rasathane-features-page .feature-band.reverse {
        direction: ltr;
    }

    body.rasathane-features-page .feature-band-image {
        order: -1;
    }

    body.rasathane-changelog-page .change-entry {
        grid-template-columns: 1fr;
    }

    body.rasathane-changelog-page .change-desc {
        grid-column: 1;
    }

    body.rasathane-sources-page .thanks-card {
        align-items: flex-start !important;
        text-align: left !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.rasathane-page *,
    body.rasathane-page *::before,
    body.rasathane-page *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}