:root {
    color-scheme: light;
    --color-page: #f6f3ed;
    --color-surface: #fffdf9;
    --color-surface-subtle: #faf7f2;
    --color-surface-muted: #eee8df;
    --color-text: #27231f;
    --color-text-muted: #6d655c;
    --color-border: #ddd4c8;
    --color-brand: #b53a32;
    --color-brand-hover: #922c26;
    --color-brand-soft: #f9e9e7;
    --color-focus: #1769aa;
    --color-success: #2f7358;
    --color-success-soft: #e7f2ec;
    --color-warning: #9a6418;
    --font-interface: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-chinese-display: "Noto Serif SC", "Songti SC", STSong, serif;
    --shadow-flat: 0 1px 2px rgba(62, 48, 35, 0.04);
    --shadow-soft: 0 10px 30px rgba(62, 48, 35, 0.08);
    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 18px;
    --radius-pill: 999px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --content-width: 1180px;
    --reading-width: 760px;
    --account-width: 1080px;
    --task-width: 980px;
    --marketing-width: 1100px;
    --measure: 65ch;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    color: var(--color-text);
    background: var(--color-page);
    font-family: var(--font-interface);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

img,
svg,
video {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
.btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

button:hover,
.btn:hover {
    border-color: var(--color-brand);
    color: var(--color-brand-hover);
}

.btn-primary {
    border-color: var(--color-brand);
    color: #fff;
    background: var(--color-brand);
}

.btn-primary:hover {
    border-color: var(--color-brand-hover);
    color: #fff;
    background: var(--color-brand-hover);
}

a {
    color: var(--color-brand-hover);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-brand);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

h3 {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

table {
    max-width: 100%;
    border-collapse: collapse;
}

input,
select,
textarea {
    max-width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--color-text);
    background: var(--color-surface);
}

input,
select {
    min-height: 42px;
    padding: 0.5rem 0.7rem;
}

textarea {
    padding: 0.7rem;
}

.shell,
.container {
    width: min(100% - 2rem, var(--content-width));
    margin-inline: auto;
}

.reading-width {
    width: min(100%, var(--reading-width));
    margin-inline: auto;
}

.surface {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

/* Shared page-template primitives. Page styles may extend these without
   redefining the product's spacing, hierarchy, and surface treatment. */
.page-template {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
    margin-inline: auto;
}

.page-template--account {
    width: min(100%, var(--account-width));
}

.page-template--task {
    width: min(100%, var(--task-width));
}

.page-template--learning {
    width: min(100%, var(--content-width));
}

.page-template--marketing {
    width: min(100%, var(--marketing-width));
}

.task-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}

.task-page-header__intro {
    min-width: 0;
}

.task-page-header__intro h1 {
    margin-bottom: var(--space-2);
}

.task-page-header__intro > p:last-child {
    max-width: var(--measure);
    margin-bottom: 0;
    color: var(--color-text-muted);
}

.page-eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-flat);
}

.section-card--flush {
    padding: 0;
    overflow: hidden;
}

.stat-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    box-shadow: var(--shadow-flat);
}

.filter-pill {
    border-radius: var(--radius-pill);
}

.content-measure {
    max-width: var(--measure);
}

.action-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.lesson-anchor {
    scroll-margin-top: 9rem;
}

@media (max-width: 620px) {
    .task-page-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0;
    left: var(--space-4);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    color: #fff;
    background: var(--color-brand-hover);
    transform: translateY(-150%);
    white-space: nowrap;
}

.skip-link:focus {
    top: var(--space-4);
    transform: translateY(0);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
    background: rgba(255, 253, 249, 0.96);
    backdrop-filter: blur(12px);
}

.site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(var(--space-3), 2vw, var(--space-5));
    min-height: 78px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-brand__logo {
    display: block;
    width: auto;
    height: 48px;
}

.site-nav {
    justify-self: center;
}

.site-nav__links,
.site-utilities {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__links {
    gap: clamp(var(--space-2), 1.35vw, var(--space-4));
}

.site-nav__link,
.site-utility-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--color-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.site-utility-link:hover {
    color: var(--color-brand);
}

.site-utilities {
    justify-content: flex-end;
    gap: var(--space-3);
}

.site-account {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.site-account__profile {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    border-radius: 50%;
}

.site-account__avatar {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    place-items: center;
    object-fit: cover;
    border-radius: 50%;
    color: #fff;
    background: var(--color-brand);
    font-size: 0.78rem;
    font-weight: 700;
}

.site-account__logout {
    padding-inline: 0.55rem;
    border-radius: var(--radius-small);
}

.site-account__profile:hover,
.site-account__logout:hover {
    background: #f9e9e7;
}

.language-form {
    margin: 0;
}

.language-form select {
    width: auto;
    min-height: 38px;
    padding-block: 0.35rem;
}

.nav-toggle {
    display: none;
}

.site-nav__mobile-account {
    display: none;
}

.site-main {
    min-height: calc(100vh - 230px);
    padding-block: var(--space-6);
}

.messages {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.message {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
}

.message.success {
    border-color: var(--color-success);
}

.message.error {
    border-color: var(--color-brand);
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-5);
    color: var(--color-text-muted);
}

.site-footer__inner p {
    margin: 0;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.site-footer a {
    color: var(--color-text-muted);
}

@media (max-width: 1080px) {
    .site-header__inner {
        grid-template-columns: auto 1fr auto;
        gap: var(--space-3);
    }

    .nav-toggle {
        display: inline-flex;
        justify-self: end;
    }

    .site-utilities {
        grid-row: 1;
        grid-column: 3;
    }

    .site-nav {
        display: none;
        grid-row: 2;
        grid-column: 1 / -1;
        width: 100%;
    }

    .site-nav[data-open="true"] {
        display: grid;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-medium);
        background: var(--color-surface);
        box-shadow: var(--shadow-soft);
    }

    .site-nav__links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
    }

    .site-nav__link {
        width: 100%;
        justify-content: center;
        padding: 0.6rem var(--space-2);
        border: 1px solid transparent;
        border-radius: var(--radius-small);
        background: var(--color-surface-muted);
    }

    .site-nav__link:hover,
    .site-nav__link[aria-current="page"] {
        border-color: #d7aaa5;
        background: #f9e9e7;
    }

    .site-nav__mobile-account {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-3);
        border-top: 1px solid var(--color-border);
    }

    .mobile-account__identity {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: var(--space-2);
    }

    .mobile-account__avatar {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        place-items: center;
        border-radius: 50%;
        object-fit: cover;
        color: #fff;
        background: var(--color-brand);
        font-weight: 700;
    }

    .mobile-account__identity p,
    .site-nav__mobile-account > p {
        margin: 0;
    }

    .mobile-account__identity small,
    .mobile-account__identity strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-account__identity small {
        color: var(--color-text-muted);
    }

    .mobile-account__actions {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: var(--space-3);
    }

    .mobile-account__actions a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-account__primary {
        padding: 0 var(--space-3);
        border-radius: var(--radius-small);
        color: #fff;
        background: var(--color-brand);
    }

    .site-utilities {
        justify-self: end;
    }

}

@media (max-width: 640px) {
    .shell,
    .container {
        width: min(100% - 1.25rem, var(--content-width));
    }

    .site-header__inner {
        min-height: 66px;
    }

    .site-brand__logo {
        height: 38px;
    }

    .site-utilities {
        gap: var(--space-2);
    }

    .site-account {
        display: none;
    }

    .site-nav__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-nav__mobile-account {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-account__actions {
        width: 100%;
        justify-content: space-between;
    }

    .site-main {
        padding-block: var(--space-5);
    }

    .site-footer__inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}