:root {
    --ui-ink: #111827;
    --ui-ink-soft: #4b5563;
    --ui-bg: #f2f5fa;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-line: #d9e1ec;
    --ui-line-strong: #bcc8d8;
    --ui-brand: #0f172a;
    --ui-brand-soft: #1e293b;
    --ui-accent: #b83227;
    --ui-accent-soft: #f7ddd8;
    --ui-success: #0f766e;
    --ui-warning: #b45309;
    --ui-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.08);
    --ui-shadow-card: 0 18px 42px rgba(15, 23, 42, 0.10);
}

html.theme-dark {
    --ui-ink: #e5e7eb;
    --ui-ink-soft: #a8b2c5;
    --ui-bg: #0b1220;
    --ui-surface: #111827;
    --ui-surface-soft: #1f2937;
    --ui-line: #253244;
    --ui-line-strong: #334155;
    --ui-brand: #e2e8f0;
    --ui-brand-soft: #cbd5e1;
    --ui-accent: #ef4444;
    --ui-accent-soft: #3b1215;
    --ui-success: #14b8a6;
    --ui-warning: #f59e0b;
    --ui-shadow-soft: 0 12px 28px rgba(2, 6, 23, 0.44);
    --ui-shadow-card: 0 18px 44px rgba(2, 6, 23, 0.60);
}

html,
body {
    min-height: 100%;
}

body.app-shell {
    color: var(--ui-ink);
    background:
        radial-gradient(980px 300px at 82% -12%, rgba(184, 50, 39, 0.11), transparent 65%),
        radial-gradient(760px 260px at -8% -5%, rgba(15, 118, 110, 0.11), transparent 70%),
        linear-gradient(180deg, #f8fafd 0%, var(--ui-bg) 58%, #edf2f8 100%);
    font-family: 'Manrope', sans-serif;
}

body.app-shell h1,
body.app-shell h2,
body.app-shell h3 {
    font-family: 'Fraunces', serif;
    letter-spacing: -0.01em;
}

[x-cloak] {
    display: none !important;
}

/* Mixed direction text helpers:
   keep German content readable inside RTL pages (Arabic UI). */
.lang-de-inline {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    display: inline-block;
}

.lang-de-block {
    display: block;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    white-space: pre-line;
}

/* Reusable German exam/content wrapper for mixed-language UIs (LTR in RTL pages). */
.exam-de-content {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
    color: #111827;
}

.exam-de-content * {
    direction: ltr;
    unicode-bidi: isolate;
}

.exam-de-content :where(p, strong, span, li, ol, ul, em, div, small, label, h1, h2, h3, h4, h5, h6) {
    color: inherit !important;
}

.exam-de-content [style*="color"] {
    color: inherit !important;
}

/* Future-proof: any explicit German text inside RTL pages keeps correct LTR flow. */
html[dir="rtl"] [lang="de"] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

html[dir="rtl"] option[lang="de"] {
    direction: ltr;
}

a {
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.app-navbar {
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--ui-line);
}

.app-container {
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .app-container {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .app-container {
        padding-inline: 2rem;
    }
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ui-ink);
}

.app-brand-logo {
    display: block;
    height: auto;
    object-fit: contain;
}

.app-brand-logo--nav {
    width: 10rem;
}

.app-brand-logo--footer {
    width: 11rem;
}

.app-brand-mark {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: linear-gradient(180deg, #0b0b0b 0 33%, #bf2618 33% 66%, #efc44e 66% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: #ffffff;
    font-size: 0.82rem;
    line-height: 1;
}

html.theme-dark .lang-flag {
    background: #0f172a;
    border-color: #334155;
}

.app-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.52rem 0.78rem;
    border-radius: 0.72rem;
    color: #334155;
    font-weight: 600;
    font-size: 0.94rem;
}

.app-nav-link:hover {
    color: #0f172a;
    background: #f4f7fb;
}

.app-nav-group-btn {
    border: 1px solid transparent;
}

.app-nav-group-btn:hover {
    border-color: var(--ui-line);
}

.app-icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.app-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1rem;
    border-radius: 0.78rem;
    font-weight: 700;
}

.app-cta-primary {
    color: #fff;
    background: linear-gradient(140deg, #0f172a, #1f2937);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.app-cta-primary:hover {
    background: linear-gradient(140deg, #111827, #334155);
    transform: translateY(-1px);
}

.app-cta-soft {
    color: #334155;
    border: 1px solid var(--ui-line);
    background: #fff;
}

.app-cta-soft:hover {
    background: #f8fafc;
    border-color: var(--ui-line-strong);
}

.app-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.72rem;
    border: 1px solid var(--ui-line);
    border-radius: 0.82rem;
    background: #fff;
}

@media (max-width: 1279px) {
    .app-nav-link {
        padding: 0.46rem 0.62rem;
        font-size: 0.88rem;
    }

    .app-cta {
        padding: 0.54rem 0.82rem;
    }

    .app-user-pill {
        padding: 0.46rem 0.6rem;
        gap: 0.42rem;
    }
}

.app-dropdown {
    border: 1px solid var(--ui-line);
    border-radius: 0.95rem;
    background: #fff;
    box-shadow: var(--ui-shadow-card);
}

.app-nav-menu {
    padding: 0.35rem;
}

.app-nav-menu-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.58rem;
    border-radius: 0.7rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.app-nav-menu-link:hover {
    color: #0f172a;
    background: #f1f6fd;
}

.app-mobile-group-title {
    margin-top: 0.55rem;
    padding: 0.2rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #64748b;
}

.app-mobile-link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.7rem;
    padding: 0.52rem 0.62rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #334155;
}

.app-mobile-link:hover {
    background: #f4f7fb;
    color: #0f172a;
}

.app-main {
    min-height: calc(100vh - 18rem);
}

.app-flash {
    border-radius: 0.9rem;
    border: 1px solid var(--ui-line);
    background: #fff;
    box-shadow: var(--ui-shadow-soft);
}

.app-footer {
    border-top: 1px solid var(--ui-line);
    background: linear-gradient(180deg, #eef2f7 0%, #e8edf5 100%);
}

.app-footer-link {
    color: #475569;
}

.app-footer-link:hover {
    color: #0f172a;
}

/* Shared UI uplift for templates */
main :where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg, .bg-white.border, .bg-white.shadow-sm, .bg-white.shadow-lg, .bg-white.shadow-xl) {
    border: 1px solid var(--ui-line);
    box-shadow: var(--ui-shadow-soft);
}

main :where(.hover\:shadow-lg:hover, .hover\:shadow-xl:hover) {
    box-shadow: var(--ui-shadow-card) !important;
}

main :where(.text-gray-900) {
    color: var(--ui-ink) !important;
}

main :where(.text-gray-700, .text-gray-600, .text-gray-500) {
    color: var(--ui-ink-soft) !important;
}

main :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea) {
    border-radius: 0.8rem !important;
    border-color: var(--ui-line) !important;
    background: #fff !important;
    min-height: 2.6rem;
}

main :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea):focus {
    outline: none !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

main :where(button, a) {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

main :where(a[class*='bg-german-gold'], button[class*='bg-german-gold']) {
    background: linear-gradient(135deg, #111827, #334155) !important;
    color: #fff !important;
}

main :where(a[class*='bg-german-gold']:hover, button[class*='bg-german-gold']:hover) {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

main :where(.bg-purple-50) {
    background-color: #ecf2ff !important;
}

main :where(.bg-pink-50) {
    background-color: #fdf2f8 !important;
}

main :where(.bg-purple-100) {
    background-color: #dbe7ff !important;
}

main :where(.text-purple-700, .text-purple-600) {
    color: #1e3a8a !important;
}

main :where(.text-pink-800, .text-pink-700, .text-pink-600) {
    color: #be185d !important;
}

main :where(.text-blue-700, .text-blue-600) {
    color: #1d4ed8 !important;
}

main :where(.text-green-700, .text-green-600) {
    color: #0f766e !important;
}

main :where(.text-amber-700, .text-amber-600) {
    color: #b45309 !important;
}

main :where(.text-red-700, .text-red-600) {
    color: #b91c1c !important;
}

main :where(.bg-gray-50) {
    background-color: #f5f8fc !important;
}

main :where(.border-gray-200, .border-gray-300, .border-gray-100) {
    border-color: var(--ui-line) !important;
}

main :where([class*='bg-blue-500'], [class*='bg-blue-600']) {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
}

main :where([class*='bg-green-500'], [class*='bg-green-600']) {
    background: linear-gradient(135deg, #0f766e, #0d9488) !important;
    color: #fff !important;
}

main :where([class*='bg-amber-500'], [class*='bg-amber-600']) {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #fff !important;
}

main :where([class*='bg-purple-500'], [class*='bg-purple-600']) {
    background: linear-gradient(135deg, #4338ca, #312e81) !important;
    color: #fff !important;
}

main :where([class*='bg-red-500'], [class*='bg-red-600']) {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
}

main :where([class*='rounded-full'][class*='text-xs']) {
    letter-spacing: 0.02em;
}

main :where(.bg-gradient-to-r, .bg-gradient-to-br) {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

main :where(.shadow-sm) {
    box-shadow: var(--ui-shadow-soft) !important;
}

main :where(.rounded-xl, .rounded-2xl) {
    border-radius: 1rem !important;
}

main :where(h1.text-3xl, h1.text-4xl, h1.text-5xl, h2.text-2xl, h2.text-xl) {
    letter-spacing: -0.02em;
}

main :where(a[class*='hover:underline']) {
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.app-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.88rem;
    border: 1px solid var(--ui-line);
    background: linear-gradient(160deg, #ffffff, #f3f7fd);
    color: #1e293b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.app-icon-wrap--sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.72rem;
}

.app-icon-wrap--lg {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
}

.app-icon-wrap svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 1.9;
}

.app-icon-wrap--lg svg {
    width: 1.45rem;
    height: 1.45rem;
}

.app-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(160deg, #eef4fb, #dde8f8);
    color: #1e3a8a;
}

.app-icon-tile svg {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.8;
}

.app-empty-state {
    text-align: center;
}

.app-empty-state .app-icon-tile {
    margin-inline: auto;
    margin-bottom: 1rem;
}

.app-metric {
    border: 1px solid var(--ui-line);
    border-radius: 0.95rem;
    background: #fff;
    box-shadow: var(--ui-shadow-soft);
}

.app-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #64748b;
}

.app-divider {
    border-color: var(--ui-line);
}

main :where(.prose) {
    color: #1f2937;
}

main :where(.prose p) {
    line-height: 1.72;
}

main :where(.prose ul, .prose ol) {
    padding-left: 1.2rem;
}

main :where([class*='line-clamp-']) {
    display: block;
}

main :where(.w-full.bg-gray-200.rounded-full, .h-2.bg-gray-200.rounded-full, .h-3.bg-gray-200.rounded-full) {
    background-color: #dce5f1 !important;
}

main :where([class*='bg-blue-100'], [class*='bg-green-100'], [class*='bg-amber-100'], [class*='bg-yellow-100'], [class*='bg-red-100'], [class*='bg-purple-100']) {
    border: 1px solid rgba(148, 163, 184, 0.24);
}

main :where(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md) {
    position: relative;
}

main span:empty:not(.app-brand-mark) {
    display: none;
}

main div:empty[class*='text-'] {
    display: none;
}

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 1.6rem;
    padding-inline: 0.58rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
}

.level-a1 { color: #166534; background: #dcfce7; border-color: #86efac; }
.level-a2 { color: #14532d; background: #bbf7d0; border-color: #4ade80; }
.level-b1 { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; }
.level-b2 { color: #1e40af; background: #bfdbfe; border-color: #60a5fa; }
.level-c1 { color: #9a3412; background: #ffedd5; border-color: #fdba74; }
.level-c2 { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }

.app-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms ease, transform 560ms ease;
}

.app-reveal.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-reveal,
    .app-reveal.in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Editorial premium surface system for blog + official updates */
.editorial-shell {
    position: relative;
    isolation: isolate;
}

.editorial-shell::before {
    content: "";
    position: absolute;
    inset: -2rem 0 auto 0;
    height: 22rem;
    background:
        radial-gradient(52rem 22rem at 4% -12%, rgba(191, 38, 24, 0.14), transparent 70%),
        radial-gradient(50rem 20rem at 92% -14%, rgba(14, 116, 144, 0.14), transparent 74%);
    pointer-events: none;
    z-index: -1;
}

.editorial-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.9rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background:
        radial-gradient(32rem 14rem at 85% -8%, rgba(252, 211, 77, 0.28), transparent 70%),
        radial-gradient(34rem 16rem at -4% -10%, rgba(190, 24, 93, 0.14), transparent 72%),
        linear-gradient(140deg, #0b1220 0%, #182437 56%, #0f2b38 100%);
    color: #f8fafc;
    box-shadow: 0 26px 58px rgba(15, 23, 42, 0.28);
}

.editorial-hero::after {
    content: "";
    position: absolute;
    inset: auto -18% -44% auto;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 66%);
    pointer-events: none;
}

.editorial-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.9);
}

.editorial-title {
    font-family: "Fraunces", serif;
    letter-spacing: -0.02em;
    line-height: 0.98;
}

.editorial-glass {
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 1.15rem;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(2, 6, 23, 0.24);
}

.editorial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(148, 163, 184, 0.36);
    border-radius: 999px;
    padding: 0.44rem 0.82rem;
    background: rgba(248, 250, 252, 0.86);
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
}

.editorial-control {
    border-radius: 0.88rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.92);
}

.editorial-control:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}

.editorial-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.editorial-card:hover {
    transform: translateY(-5px);
    border-color: rgba(100, 116, 139, 0.5);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.15);
}

.editorial-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.24rem;
    background: linear-gradient(90deg, #0ea5e9, #22c55e, #f59e0b, #ef4444);
}

.editorial-meta {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
}

.editorial-divider {
    border-color: rgba(148, 163, 184, 0.28);
}

.editorial-soft-panel {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background:
        linear-gradient(158deg, rgba(255, 255, 255, 0.94), rgba(245, 250, 255, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.editorial-stat {
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.82);
    padding: 0.72rem 0.9rem;
}

.editorial-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.editorial-stat-value {
    margin-top: 0.25rem;
    font-size: 1.16rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.editorial-tabset {
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #ffffff;
    padding: 0.3rem;
}

.editorial-tab {
    border-radius: 0.7rem;
    padding: 0.52rem 0.88rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.editorial-tab:hover {
    background: #f4f7fb;
}

.editorial-tab.is-active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.24);
}

.editorial-accent-methods { background: linear-gradient(130deg, #0ea5e9, #0e7490); }
.editorial-accent-classes { background: linear-gradient(130deg, #2563eb, #1d4ed8); }
.editorial-accent-exercises { background: linear-gradient(130deg, #16a34a, #0f766e); }
.editorial-accent-visa { background: linear-gradient(130deg, #ef4444, #b91c1c); }
.editorial-accent-immigration { background: linear-gradient(130deg, #f97316, #c2410c); }
.editorial-accent-work { background: linear-gradient(130deg, #0ea5e9, #1d4ed8); }
.editorial-accent-culture { background: linear-gradient(130deg, #7c3aed, #6d28d9); }
.editorial-accent-travel { background: linear-gradient(130deg, #14b8a6, #0f766e); }
.editorial-accent-news { background: linear-gradient(130deg, #64748b, #334155); }
.editorial-accent-general { background: linear-gradient(130deg, #475569, #1f2937); }
.editorial-accent-language { background: linear-gradient(130deg, #0284c7, #0369a1); }
.editorial-accent-housing { background: linear-gradient(130deg, #9333ea, #6d28d9); }
.editorial-accent-health { background: linear-gradient(130deg, #22c55e, #15803d); }

.editorial-ribbon {
    width: 100%;
    height: 0.34rem;
    border-radius: 999px;
}

.editorial-story {
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.editorial-sidecard {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.editorial-sidecard.warning {
    border-color: rgba(217, 119, 6, 0.34);
    background: linear-gradient(165deg, #fffbeb, #fff7e6);
}

.editorial-sidecard.info {
    border-color: rgba(14, 165, 233, 0.34);
    background: linear-gradient(165deg, #f0f9ff, #e7f8ff);
}

.editorial-section-title {
    font-family: "Fraunces", serif;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.editorial-empty {
    border-radius: 1.2rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: linear-gradient(170deg, #ffffff, #f8fbff);
}

/* Dark mode overrides */
html.theme-dark body.app-shell {
    background:
        radial-gradient(980px 300px at 82% -12%, rgba(239, 68, 68, 0.15), transparent 65%),
        radial-gradient(760px 260px at -8% -5%, rgba(20, 184, 166, 0.15), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #0a1323 58%, #09101d 100%);
}

html.theme-dark .app-navbar {
    background: rgba(10, 18, 32, 0.88);
}

html.theme-dark .app-footer {
    background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
}

html.theme-dark .app-nav-link {
    color: #cbd5e1;
}

html.theme-dark .app-nav-link:hover,
html.theme-dark .app-mobile-link:hover,
html.theme-dark .app-nav-menu-link:hover {
    color: #f8fafc;
    background: #162235;
}

html.theme-dark .app-mobile-link,
html.theme-dark .app-nav-menu-link {
    color: #d3dbe8;
}

html.theme-dark .app-cta-soft,
html.theme-dark .app-user-pill,
html.theme-dark .app-dropdown {
    color: #d6deea;
    border-color: var(--ui-line);
    background: #0f172a;
}

html.theme-dark .app-cta-soft:hover {
    background: #162235;
    border-color: var(--ui-line-strong);
}

html.theme-dark .app-dropdown a,
html.theme-dark .app-dropdown button,
html.theme-dark .app-dropdown .text-slate-700,
html.theme-dark .app-dropdown .text-slate-600,
html.theme-dark .app-dropdown .text-slate-500 {
    color: #dbe4f3 !important;
}

html.theme-dark .app-dropdown a:hover,
html.theme-dark .app-dropdown button:hover {
    background: #162235 !important;
    color: #f8fafc !important;
}

html.theme-dark .app-dropdown .bg-slate-50 {
    background: #1e2b40 !important;
}

html.theme-dark .app-dropdown hr {
    border-color: #334155 !important;
}

html.theme-dark main :where(.bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg, .bg-white.border, .bg-white.shadow-sm, .bg-white.shadow-lg, .bg-white.shadow-xl) {
    background: var(--ui-surface) !important;
}

html.theme-dark main :where(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500) {
    color: var(--ui-ink-soft) !important;
}

html.theme-dark main :where(.text-gray-900, .text-slate-900, .text-slate-800, .text-slate-700) {
    color: var(--ui-ink) !important;
}

html.theme-dark main :where(.text-slate-600, .text-slate-500, .text-slate-400) {
    color: var(--ui-ink-soft) !important;
}

html.theme-dark main :where(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], select, textarea) {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

html.theme-dark main :where(.bg-gray-50, .bg-slate-50) {
    background-color: #0f172a !important;
}

html.theme-dark main :where(.bg-gray-100, .bg-slate-100) {
    background-color: #162235 !important;
}

html.theme-dark main :where(.bg-gray-200, .bg-slate-200) {
    background-color: #1e2b40 !important;
}

html.theme-dark main :where(.bg-white) {
    background-color: #111827 !important;
}

html.theme-dark main :where(.bg-amber-50, .bg-yellow-50, .bg-orange-50, .bg-red-50, .bg-green-50, .bg-emerald-50, .bg-blue-50, .bg-cyan-50, .bg-purple-50) {
    background-color: #111827 !important;
}

html.theme-dark main :where(.bg-pink-50) {
    background-color: #111827 !important;
}

html.theme-dark main :where(.hover\:bg-amber-100:hover, .hover\:bg-yellow-100:hover, .hover\:bg-orange-100:hover, .hover\:bg-red-100:hover, .hover\:bg-green-100:hover, .hover\:bg-emerald-100:hover, .hover\:bg-blue-100:hover, .hover\:bg-cyan-100:hover, .hover\:bg-purple-100:hover) {
    background-color: #162235 !important;
}

html.theme-dark main :where(.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover) {
    background-color: #1e2b40 !important;
}

html.theme-dark main [class*="from-amber-50"][class*="to-yellow-50"],
html.theme-dark main [class*="from-orange-50"][class*="to-red-50"],
html.theme-dark main [class*="from-green-50"][class*="to-emerald-50"],
html.theme-dark main [class*="from-blue-50"][class*="to-cyan-50"],
html.theme-dark main [class*="from-purple-50"][class*="to-indigo-50"] {
    background-image: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
}

html.theme-dark main [class*="from-white"][class*="to-slate-50"],
html.theme-dark main [class*="from-slate-50"][class*="via-white"],
html.theme-dark main [class*="via-white"][class*="to-emerald-50"],
html.theme-dark main [class*="from-slate-50"][class*="to-emerald-50"] {
    background-image: linear-gradient(135deg, #111827 0%, #0f172a 100%) !important;
}

html.theme-dark main :where(.text-gray-400) {
    color: #94a3b8 !important;
}

html.theme-dark main :where(.text-amber-600, .text-amber-500) {
    color: #fbbf24 !important;
}

html.theme-dark main :where(.text-green-600, .text-green-500) {
    color: #34d399 !important;
}

html.theme-dark main :where(.text-red-600, .text-red-500) {
    color: #f87171 !important;
}

html.theme-dark main :where(.text-pink-800, .text-pink-700, .text-pink-600) {
    color: #f9a8d4 !important;
}

html.theme-dark main :where(.text-green-700) {
    color: #86efac !important;
}

html.theme-dark :where(.border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300) {
    border-color: var(--ui-line) !important;
}

html.theme-dark :where(.border-amber-100, .border-yellow-100, .border-orange-100, .border-red-100, .border-green-100, .border-emerald-100, .border-blue-100, .border-cyan-100, .border-purple-100) {
    border-color: var(--ui-line) !important;
}

html.theme-dark .app-icon-wrap {
    background: linear-gradient(160deg, #111827, #0f172a);
    color: #dbe4f3;
}

html.theme-dark .app-icon-tile {
    background: linear-gradient(160deg, #1e293b, #0f172a);
    color: #bfdbfe;
}

html.theme-dark :where(.hover\:bg-white:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover) {
    background-color: #162235 !important;
}

html.theme-dark main :where(.prose, .prose p, .prose li, .prose ul, .prose ol, .prose strong, .prose em, .prose span, .prose div) {
    color: #e5e7eb !important;
}

html.theme-dark main :where(.prose code) {
    color: #fde68a !important;
    background: #1f2937 !important;
    border: 1px solid #334155;
    border-radius: 0.4rem;
    padding: 0.05rem 0.35rem;
}

html.theme-dark main :where(.prose a) {
    color: #93c5fd !important;
}

html.theme-dark .exam-de-content {
    color: #e5e7eb;
}

html.theme-dark .exam-de-content * {
    color: inherit !important;
}

/* Normalize inline-styled rich content blocks in dark mode (exam passages, notices). */
html.theme-dark .exam-de-content [style*="background"] {
    background: #1e293b !important;
}

html.theme-dark .exam-de-content [style*="background-color"] {
    background-color: #1e293b !important;
}

html.theme-dark .exam-de-content [style*="border-left"] {
    border-left-color: #60a5fa !important;
}

html.theme-dark .exam-de-content [style*="border"] {
    border-color: #334155 !important;
}

@media (prefers-reduced-motion: reduce) {
    .editorial-card,
    .editorial-card:hover {
        transition: none !important;
        transform: none !important;
    }
}