:root {
    --teal: #295763;
    --teal-soft: #e3edef;
    --yellow: #f3c600;
    --ink: #1d1b16;
    --muted: #5f5a4e;
    --line: #e5dfd0;
    --bg: #fbfaf6;
    --surface: #ffffff;
    --soft: #f7f3e9;
    --tip: #eaf5ec;
    --tip-bar: #2b8a3e;
    --warn: #fbeee5;
    --warn-bar: #c2410c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --teal: #7fb6c2;
        --teal-soft: #1f3338;
        --ink: #ece8de;
        --muted: #aaa597;
        --line: #2c3438;
        --bg: #14191b;
        --surface: #1c2225;
        --soft: #20282b;
        --tip: #1d2f22;
        --tip-bar: #3fb35a;
        --warn: #33241c;
        --warn-bar: #f08c00;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a {
    color: var(--teal);
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

.top {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 2;
}

.top-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: none;
}

.brand img {
    height: 17px;
    width: auto;
}

.brand span {
    border-left: 2px solid var(--yellow);
    padding-left: 10px;
    color: var(--teal);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 13px;
}

.top-search {
    flex: 1;
}

.top-search input,
.hero-search input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font: inherit;
    background: var(--bg);
    color: var(--ink);
}

.lang {
    font-size: 14px;
    flex: none;
}

.hero {
    text-align: center;
    padding: 48px 0 32px;
}

.hero h1 {
    color: var(--teal);
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.hero p {
    color: var(--muted);
    margin: 0 auto 20px;
    max-width: 560px;
}

.hero-search {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto;
}

.hero-search button,
.button,
.feedback button {
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: #fff;
    padding: 9px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.section-title {
    color: var(--teal);
    font-size: 19px;
    margin: 28px 0 12px;
    border-left: 4px solid var(--yellow);
    padding-left: 10px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 14px;
    margin-bottom: 40px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--teal-soft);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.card-title {
    font-weight: 700;
    color: var(--teal);
    font-size: 17px;
}

.card-text {
    color: var(--muted);
    font-size: 14.5px;
    flex: 1;
}

.card-meta {
    font-size: 13px;
    color: var(--muted);
}

.crumbs {
    font-size: 14px;
    color: var(--muted);
    margin: 20px 0 8px;
}

.theme-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 8px 0 20px;
}

.theme-head h1,
.article h1,
.results-title {
    color: var(--teal);
    font-size: 28px;
    line-height: 1.25;
    margin: 0 0 6px;
}

.theme-head p,
.lead {
    color: var(--muted);
    margin: 0;
}

.article-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 10px;
}

.article-list a {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ink);
}

.article-list a:hover {
    border-color: var(--teal);
}

.article-list strong {
    display: block;
    color: var(--teal);
}

.article-list span {
    display: block;
    color: var(--muted);
    font-size: 14.5px;
}

.faq {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--teal);
}

.faq[open] summary {
    margin-bottom: 8px;
}

.article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    margin-top: 8px;
}

.notice {
    background: var(--soft);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--muted);
}

.meta,
.pdf-links {
    font-size: 14px;
    color: var(--muted);
    margin-top: 24px;
}

.help-content h3 {
    font-size: 19px;
    color: var(--ink);
    margin: 26px 0 8px;
}

.help-content p {
    margin: 8px 0;
}

.help-content ul,
.help-content ol {
    padding-left: 22px;
    margin: 8px 0 12px;
}

.help-content li {
    margin: 4px 0;
}

.help-content .help-steps {
    list-style: none;
    padding-left: 0;
    counter-reset: step;
}

.help-content .help-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 40px;
    margin: 10px 0;
    min-height: 28px;
}

.help-content .help-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-content .help-ui {
    display: inline-block;
    border: 1px solid var(--line);
    background: var(--soft);
    border-radius: 6px;
    padding: 0 7px;
    font-weight: 600;
    font-size: 0.92em;
    color: var(--teal);
    white-space: nowrap;
}

.help-content .help-callout {
    border-radius: 12px;
    padding: 12px 16px;
    margin: 14px 0;
    border-left: 4px solid var(--teal);
    background: var(--teal-soft);
}

.help-content .help-callout-tip {
    border-left-color: var(--tip-bar);
    background: var(--tip);
}

.help-content .help-callout-warn {
    border-left-color: var(--warn-bar);
    background: var(--warn);
}

.help-content .help-callout-title {
    font-weight: 700;
    margin-top: 0;
}

.help-content .help-table {
    overflow-x: auto;
    margin: 12px 0;
}

.help-content table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}

.help-content th,
.help-content td {
    border: 1px solid var(--line);
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
}

.help-content th {
    background: var(--soft);
}

.help-content .help-figure {
    margin: 16px 0;
    text-align: center;
}

.help-content .help-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.help-content figcaption {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 6px;
}

.feedback {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 24px;
    margin: 16px 0;
}

.feedback-q {
    font-weight: 700;
    margin: 0 0 8px;
}

.feedback-comment {
    display: block;
    font-size: 14px;
    color: var(--muted);
}

.feedback textarea {
    display: block;
    width: 100%;
    margin: 6px 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    background: var(--bg);
    color: var(--ink);
}

.feedback-buttons {
    display: flex;
    gap: 8px;
}

.feedback button[value="0"] {
    background: var(--soft);
    color: var(--ink);
    border: 1px solid var(--line);
}

.thanks {
    margin: 0;
    font-weight: 600;
    color: var(--tip-bar);
}

.pager {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin: 8px 0 40px;
    font-size: 15px;
}

.empty {
    color: var(--muted);
    text-align: center;
    padding: 40px 0;
}

.foot {
    border-top: 1px solid var(--line);
    padding: 20px 0 32px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 640px) {
    .top-inner {
        flex-wrap: wrap;
        padding: 10px 0;
    }

    .top-search {
        order: 3;
        flex-basis: 100%;
    }

    .lang {
        margin-left: auto;
    }

    .hero {
        padding: 28px 0 20px;
    }

    .hero h1 {
        font-size: 25px;
    }

    .hero-search {
        flex-direction: column;
    }

    .article {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .theme-head h1,
    .article h1 {
        font-size: 23px;
    }
}

@media print {
    .top,
    .feedback,
    .pager,
    .foot,
    .crumbs {
        display: none;
    }

    .article {
        border: 0;
        padding: 0;
    }
}