@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap");

:root {
    --learn-paper: #f2f0e8;
    --learn-ink: #121212;
    --learn-blue: #1646d8;
    --learn-acid: #dfff00;
    --learn-orange: #ff9f1c;
    --learn-purple: #c9b8ff;
    --learn-red: #ff4c2f;
    --learn-muted: #615f58;
    --learn-line: rgba(18, 18, 18, .28);
    --learn-pad: clamp(18px, 3vw, 46px);
}

.learning-english,
.learning-construction {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--learn-ink) !important;
    background: var(--learn-paper) !important;
    font-family: Manrope, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.learning-english *,
.learning-construction * {
    box-sizing: border-box;
}

.learning-english :is(h1, h2, h3, h4, p, span, div, button, input, select, textarea),
.learning-construction :is(h1, h2, h3, h4, p, span, div, button) {
    font-family: inherit;
}

.learning-english > .max-w-6xl {
    width: min(1500px, 100%);
    max-width: 1500px !important;
    min-height: 100vh;
    margin: 0 auto !important;
    padding: 0 var(--learn-pad) 52px;
}

.english-nav,
.construction-nav {
    min-height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--learn-line);
    font: 500 10px/1 "DM Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.english-nav button,
.construction-nav a {
    justify-self: start;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--learn-blue) !important;
    font: inherit !important;
    letter-spacing: inherit;
    text-decoration: none;
    cursor: pointer;
}

.english-nav span:nth-child(2),
.construction-nav span:nth-child(2) {
    justify-self: center;
}

.english-nav span:last-child,
.construction-nav span:last-child {
    justify-self: end;
}

.english-nav button:hover,
.construction-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.english-header {
    min-height: 178px;
    padding: 28px 0 26px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end !important;
    gap: 28px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid var(--learn-ink);
}

.english-kicker,
.learning-english :is(.tracking-\[0\.24em\], .tracking-\[0\.18em\], .tracking-\[0\.16em\], .tracking-wide) {
    color: var(--learn-blue) !important;
    font: 500 10px/1.25 "DM Mono", monospace !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
}

.english-heading h1 {
    margin: 8px 0 0 !important;
    color: var(--learn-ink);
    font-size: clamp(38px, 5vw, 68px) !important;
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.065em !important;
}

.english-heading #page-subtitle {
    max-width: 760px;
    margin: 10px 0 0 !important;
    color: var(--learn-muted) !important;
    font-size: 13px;
    line-height: 1.45;
}

.english-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.learning-english .english-header-actions button,
.english-header-actions #progress-text {
    min-height: 38px;
    padding: 0 14px !important;
    border: 1px solid var(--learn-ink) !important;
    border-radius: 0 !important;
    background: var(--learn-ink) !important;
    color: white !important;
    box-shadow: none !important;
    font: 500 10px/1 "DM Mono", monospace !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.english-header-actions #progress-text {
    display: inline-flex;
    align-items: center;
    background: var(--learn-acid) !important;
    color: var(--learn-ink) !important;
}

.english-header-actions #progress-text.hidden {
    display: none !important;
}

.learning-english #page-notice {
    margin-bottom: 12px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--learn-ink);
    border-radius: 0 !important;
}

.learning-english #module-home-btn,
.learning-english main > section > button:first-child,
.learning-english #daily-word-area > button:first-child,
.learning-english #vocab-skills-area > button:first-child {
    min-height: 34px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--learn-blue) !important;
    box-shadow: none !important;
    font: 500 10px/1 "DM Mono", monospace !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.learning-english #module-overview {
    gap: 0 !important;
    margin: 0 0 18px !important;
    border-top: 1px solid var(--learn-ink);
    border-left: 1px solid var(--learn-ink);
}

.learning-english #module-overview .module-card {
    min-height: 228px;
    padding: 20px !important;
    border: 0 !important;
    border-right: 1px solid var(--learn-ink) !important;
    border-bottom: 1px solid var(--learn-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.learning-english #word-palace-card {
    background: var(--learn-blue) !important;
    color: white !important;
}

.learning-english #word-palace-card :is(h2, strong) {
    color: white !important;
}

.learning-english #word-palace-card :is(p, .text-gray-500) {
    color: rgba(255, 255, 255, .78) !important;
}

.learning-english #word-palace-card > div:first-child > div:last-child {
    border-radius: 50% !important;
    background: var(--learn-acid) !important;
    box-shadow: none !important;
}

.learning-english #word-palace-card > div:last-child > div {
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 0 !important;
    background: transparent !important;
}

.learning-english #word-palace-card .bg-emerald-50 {
    border-radius: 0 !important;
    background: var(--learn-acid) !important;
    color: var(--learn-ink) !important;
}

.learning-english #map-test-card {
    background: var(--learn-acid) !important;
    color: var(--learn-ink) !important;
}

.learning-english #map-test-card :is(p, .text-gray-500) {
    color: #47463f !important;
}

.learning-english #map-test-card > div:first-child > div:last-child {
    border-radius: 50% !important;
    background: var(--learn-red) !important;
    box-shadow: none !important;
}

.learning-english #map-test-card > div:last-child > div {
    border: 1px solid rgba(18, 18, 18, .32);
    border-radius: 0 !important;
    background: transparent !important;
}

.learning-english #map-test-card .bg-blue-50 {
    border-radius: 0 !important;
    background: var(--learn-ink) !important;
    color: white !important;
}

.learning-english .glass-card,
.learning-english .module-card,
.learning-english select,
.learning-english input,
.learning-english textarea,
.learning-english [class*="rounded-"] {
    border-radius: 0 !important;
}

.learning-english .glass-card {
    padding: 18px !important;
    border: 1px solid var(--learn-ink) !important;
    background: rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.learning-english .module-card {
    border: 1px solid var(--learn-ink) !important;
    background: white !important;
    box-shadow: none !important;
}

.learning-english .module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 0 var(--learn-ink) !important;
}

.learning-english .module-card.active,
.learning-english .skill-card.selected {
    border-color: var(--learn-blue) !important;
    box-shadow: inset 5px 0 0 var(--learn-blue) !important;
}

.learning-english :is(.text-gray-400, .text-gray-500) {
    color: var(--learn-muted) !important;
}

.learning-english :is(.text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900) {
    color: var(--learn-ink) !important;
}

.learning-english :is(.text-blue-600, .text-blue-700, .text-blue-800, .text-emerald-600, .text-emerald-700, .text-purple-600, .text-purple-700) {
    color: var(--learn-blue) !important;
}

.learning-english :is(h2, .text-3xl) {
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em;
}

.learning-english :is(h3, .text-2xl) {
    line-height: 1.08;
    letter-spacing: -.025em;
}

.learning-english :is(select, input:not([type="checkbox"]), textarea) {
    min-height: 42px;
    padding: 9px 11px !important;
    border: 1px solid rgba(18, 18, 18, .45) !important;
    background: white !important;
    color: var(--learn-ink) !important;
    box-shadow: none !important;
    outline: none;
}

.learning-english :is(select, input, textarea):focus {
    border-color: var(--learn-blue) !important;
    box-shadow: inset 0 -3px 0 var(--learn-blue) !important;
}

.learning-english label {
    color: var(--learn-ink) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

.learning-english :is(#start-btn, #next-btn, #vocab-generate-btn, #vocab-submit-btn, #la-generate-btn, #la-submit-btn, #la-next-btn),
.learning-english button.bg-gray-900,
.learning-english button.bg-blue-600,
.learning-english button.bg-red-600 {
    min-height: 44px;
    padding: 10px 16px !important;
    border: 1px solid var(--learn-ink) !important;
    border-radius: 0 !important;
    background: var(--learn-ink) !important;
    color: white !important;
    box-shadow: 5px 5px 0 var(--learn-acid) !important;
    font-size: 13px !important;
}

.learning-english .option-btn,
.learning-english .la-choice,
.learning-english .skill-card {
    border-radius: 0 !important;
    border-color: rgba(18, 18, 18, .32) !important;
    background: white !important;
    box-shadow: none !important;
}

.learning-english .option-btn.selected,
.learning-english .la-choice.selected {
    border-color: var(--learn-blue) !important;
    background: #e6ecff !important;
    color: var(--learn-blue) !important;
    box-shadow: inset 4px 0 0 var(--learn-blue) !important;
    transform: none;
}

.learning-english .option-btn.correct,
.learning-english .option-btn.correct-hint {
    border-color: #087f5b !important;
    background: #d9f4e8 !important;
    color: #075f46 !important;
}

.learning-english .option-btn.wrong {
    border-color: #d83a28 !important;
    background: #ffe3dd !important;
    color: #9f2115 !important;
}

.learning-english [class*="shadow-"] {
    box-shadow: none !important;
}

.learning-english .gap-6 {
    gap: 14px !important;
}

.learning-english .gap-5 {
    gap: 12px !important;
}

.learning-english [class~="space-y-6"] > :not([hidden]) ~ :not([hidden]),
.learning-english [class~="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
    margin-top: 14px !important;
}

.learning-english #loading-overlay {
    background: rgba(18, 18, 18, .42) !important;
    backdrop-filter: blur(4px);
}

.learning-english #loading-overlay > div {
    border: 1px solid var(--learn-ink);
    border-radius: 0 !important;
    background: var(--learn-paper) !important;
    box-shadow: 8px 8px 0 var(--learn-acid) !important;
}

.learning-english #loading-overlay .animate-spin {
    border-radius: 50% !important;
}

.construction-shell {
    width: min(1500px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 var(--learn-pad) 42px;
}

.construction-main {
    min-height: calc(100vh - 106px);
    padding: clamp(42px, 7vw, 96px) 0 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    align-items: end;
    gap: clamp(28px, 6vw, 90px);
}

.construction-kicker,
.construction-meta span,
.construction-status small {
    color: var(--learn-blue);
    font: 500 10px/1.35 "DM Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.construction-main h1 {
    margin: 14px 0 0;
    font-size: clamp(68px, 11vw, 170px);
    font-weight: 800;
    line-height: .76;
    letter-spacing: -.085em;
}

.construction-copy {
    max-width: 720px;
    margin: 26px 0 0;
    color: var(--learn-muted);
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.48;
}

.construction-status {
    padding: 24px;
    border: 1px solid var(--learn-ink);
    background: var(--learn-acid);
    box-shadow: 8px 8px 0 var(--learn-ink);
}

.construction-status strong {
    display: block;
    margin-top: 12px;
    font-size: clamp(27px, 3vw, 42px);
    line-height: .95;
    letter-spacing: -.04em;
}

.construction-status p {
    margin: 14px 0 0;
    color: #3f3e38;
    font-size: 13px;
    line-height: 1.5;
}

.construction-meta {
    margin-top: 28px;
    padding-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    border-top: 1px solid rgba(18, 18, 18, .3);
}

@media (max-width: 760px) {
    .english-nav,
    .construction-nav {
        min-height: 58px;
        font-size: 8px;
    }

    .english-header {
        min-height: 0;
        padding: 24px 0 20px;
        grid-template-columns: 1fr;
        align-items: start !important;
        gap: 16px !important;
    }

    .english-header-actions {
        justify-content: flex-start;
    }

    .learning-english #module-overview {
        display: block;
    }

    .learning-english #module-overview .module-card {
        width: 100%;
        min-height: 210px;
    }

    .construction-main {
        min-height: calc(100vh - 100px);
        grid-template-columns: 1fr;
        align-content: center;
    }

    .construction-main h1 {
        font-size: clamp(62px, 22vw, 108px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .learning-english *,
    .learning-construction * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}