@media screen {
    :root { --ink: #202126; --muted: #687078; --green: #936400; --mint: #fff1ce; --line: #e7e8ec; --canvas: #f7f8fa; --accent: #ffb51b; --night: #18191d; }
    body { color: var(--ink); }
    .green, .text-link { color: #8a5b00; }
    .serif { font-family: inherit; font-style: normal; font-weight: 700; }
    .btn { border-radius: 6px; font-size: 14px; padding: 13px 22px; }
    .btn-dark { background: var(--accent); border-color: var(--accent); color: #17181b; box-shadow: none; }
    .btn-dark:hover, .btn-dark:focus-visible { background: #ffc64b; border-color: #ffc64b; color: #17181b; }
    .btn-outline-dark { color: #303237; border-color: #cfd1d6; }
    .btn-outline-dark:hover { color: #17181b; background: #fff2d5; border-color: #d6a52f; }
    .eyebrow { color: #7b6745; }
    .brand { font-size: 34px; letter-spacing: -1.6px; font-weight: 700; margin: 0; gap: 0; color: white; }
    .brand:hover { color: white; }
    .brand-dot { margin: 0; color: var(--accent); }
    .website-shell .app-main { margin-left: 0; min-height: calc(100vh - 90px); }
    .website-shell .content { max-width: 1220px; padding: 56px 36px; }
    .site-header { background: var(--night); color: white; display: flex; align-items: center; gap: 36px; min-height: 90px; padding: 20px max(36px, calc((100vw - 1300px)/2)); }
    .site-navigation { display: flex; align-items: center; justify-content: center; gap: 30px; margin-left: auto; }
    .site-navigation a { font-size: 14px; color: #e1e1e3; white-space: nowrap; }
    .site-navigation a:hover, .site-navigation a.active { color: var(--accent); }
    .header-cta { white-space: nowrap; }
    .site-header .btn-dark span { margin-left: 12px; }
    .website-shell .app-footer { padding-inline: max(36px, calc((100vw - 1150px)/2)); background: var(--night); color: #a9abb2; border-color: #303136; }
    .website-shell .app-footer a:hover { color: var(--accent); }
    .landing-page { background: var(--night); }
    .landing-page .content { max-width: none; padding: 0; }
    .reference-hero { text-align: center; color: white; padding: 72px 30px 0; max-width: 1260px; margin: auto; }
    .reference-hero .eyebrow { color: #c6b17f; font-size: 11px; letter-spacing: 2px; }
    .reference-hero h1 { font-weight: 700; font-size: clamp(40px, 5.7vw, 78px); letter-spacing: -3px; line-height: 1.12; margin: 24px auto; }
    .reference-hero em, .reference-final-cta em { font-style: normal; color: var(--accent); }
    .reference-hero > p { color: #b4b5bd; font-size: 18px; line-height: 1.7; }
    .reference-hero-actions { display: flex; align-items: center; justify-content: center; gap: 26px; margin: 30px 0 20px; }
    .reference-hero-actions .btn { padding: 17px 26px; font-size: 16px; }
    .hero-dashboard-link { color: #d0d1d5; font-size: 13px; }
    .hero-dashboard-link:hover { color: var(--accent); }
    .reference-checks { display: flex; justify-content: center; gap: 25px; font-size: 12px; color: #b7b9c1; }
    .cv-showcase { background: #25262c; border: 1px solid #3a3b42; border-radius: 18px 18px 0 0; margin: 48px auto 0; height: 450px; max-width: 1080px; overflow: hidden; position: relative; padding: 25px 35px 0; }
    .showcase-caption { display: flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 1.8px; color: #bfc0c7; }
    .showcase-caption > span:last-child { margin-left: auto; }
    .showcase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    .showcase-documents { display: flex; gap: 24px; justify-content: center; align-items: start; padding: 40px 20px 0; }
    .showcase-paper { display: block; width: 260px; flex: 0 1 260px; min-width: 0; text-align: left; border: 5px solid white; box-shadow: 0 12px 40px #0004; background: white; transition: transform .25s; }
    .showcase-paper-0 { transform: rotate(-8deg) translateY(24px); }
    .showcase-paper-1 { transform: translateY(-12px); z-index: 1; }
    .showcase-paper-2 { transform: rotate(8deg) translateY(24px); }
    .showcase-paper:hover { transform: translateY(-20px); }
    .showcase-paper .mini-cv { min-height: 390px; }
    .showcase-label { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 15px 24px; background: #ffb51b; color: #17181b; border-radius: 9px; box-shadow: 0 8px 30px #0003; text-align: left; white-space: nowrap; z-index: 2; }
    .showcase-label > span { font-size: 30px; }
    .showcase-label strong { display: block; font-size: 14px; }
    .showcase-label small { font-size: 11px; color: #4e3c17; }
    .reference-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 50px; max-width: 1180px; margin: auto; padding: 65px 36px; color: white; }
    .reference-benefits > div > span { font-size: 12px; color: var(--accent); display: block; margin-bottom: 15px; }
    .reference-benefits h2 { font-size: 20px; letter-spacing: -.5px; font-weight: 600; }
    .reference-benefits p { color: #afb1bb; font-size: 14px; margin: 14px 0 0; }
    .reference-template-section { background: #f6f7f9; padding: 70px max(36px, calc((100vw - 1120px)/2)); }
    .reference-template-section .section-heading { margin: 0 0 35px; align-items: end; }
    .reference-template-section h2, .reference-editor-copy h2, .reference-faq h2 { font-size: clamp(29px, 3.2vw, 43px); font-weight: 700; line-height: 1.2; }
    .reference-template-section em, .reference-editor-copy em { font-style: normal; color: #917026; }
    .reference-template-section .section-heading p { font-size: 14px; margin: 16px 0 0; }
    .template-art { border-radius: 10px; background: #e9eaee; border-color: #dedfe4; }
    .template-art:hover, .template-art:focus-visible { border-color: #c59537; }
    .template-meta p, .results-toolbar, .results-toolbar p, .ats-filter, .gallery-footnote { color: #687078; }
    .template-use:hover, .preview-hover { background: #202126; color: white; }
    .template-use { color: #34363c; border-color: #d9dce2; }
    .category-tab { color: #686c74; }
    .category-tab.selected { background: #fff0cc; color: #6f4a00; }
    .category-tab span { background: #ffe1a1; }
    .ats-filter input { accent-color: #a06c00; }
    .gallery-banner { background: #fff5df; border-color: #f0e1bb; }
    .gallery-banner p { color: #75643f; }
    .banner-icon { background: #ffe7b3; color: #8c650c; }
    .banner-tag { color: #7f6023; border-color: #e8d5a5; }
    .banner-doodle { color: #f1dfb3; }
    .reference-editor-section { background: white; padding: 85px max(36px, calc((100vw - 1120px)/2)); display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; }
    .editor-demo { background: #f1f2f5; border: 1px solid #e1e2e7; border-radius: 12px; overflow: hidden; }
    .demo-bar { display: flex; gap: 6px; padding: 15px; border-bottom: 1px solid #dedfe4; align-items: center; }
    .demo-bar > i { width: 7px; height: 7px; background: #c1c4cc; border-radius: 50%; }
    .demo-bar > i:first-child { background: #ffb51b; }
    .demo-bar > span { margin-left: 12px; font-size: 10px; color: #767a84; }
    .demo-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 24px; overflow: hidden; max-height: 350px; }
    .demo-body .eyebrow { font-size: 8px; }
    .demo-field { margin-bottom: 19px; }
    .demo-field small { display: block; font-size: 9px; color: #6e727c; }
    .demo-field strong { display: block; background: white; border: 1px solid #dddfe6; padding: 10px; border-radius: 4px; font-size: 10px; margin-top: 6px; }
    .demo-colors { display: flex; gap: 8px; margin-top: 10px; }
    .demo-colors i { width: 20px; height: 20px; background: #476b60; border-radius: 50%; }
    .demo-colors i:nth-child(2) { background: #34445a; }.demo-colors i:nth-child(3) { background: #b47750; }.demo-colors i:nth-child(4) { background: #6c6b91; }
    .demo-body .btn { font-size: 11px; padding: 10px; }
    .demo-document { min-width: 0; transform: rotate(3deg); box-shadow: 0 5px 20px #0001; }
    .demo-document .mini-cv { min-height: 330px; padding: 15px; }
    .demo-document .mini-head h3 { font-size: 12px; }
    .demo-caption { display: block; text-align: center; padding: 13px; font-size: 9px; color: #717581; }
    .reference-editor-copy > p { margin: 22px 0; font-size: 15px; }
    .reference-editor-copy ul { padding-left: 18px; line-height: 2.3; font-size: 13px; color: #5e6470; margin-bottom: 26px; }
    .reference-faq { background: #f6f7f9; padding: 75px max(36px, calc((100vw - 850px)/2)); }
    .reference-faq > h2 { margin-bottom: 30px; }
    .reference-faq details { border-bottom: 1px solid #dfe0e5; padding: 20px 0; }
    .reference-faq summary { font-size: 16px; font-weight: 600; cursor: pointer; }
    .reference-faq details p { font-size: 14px; margin: 15px 0 0; }
    .reference-faq > a { display: inline-block; margin-top: 26px; }
    .reference-final-cta { text-align: center; color: white; padding: 80px 24px; }
    .reference-final-cta .eyebrow { color: #b9a16c; }
    .reference-final-cta h2 { font-size: clamp(35px, 4vw, 55px); font-weight: 700; line-height: 1.15; margin: 20px 0 30px; }
    .reference-final-cta p { font-size: 12px; margin: 18px 0 0; color: #a4a7b1; }
    .sidebar { background: var(--night); border-right-color: #292b32; }
    .workspace-label { color: #8e919d; }
    .main-nav > a { color: #b8bbc5; }
    .main-nav > a.active, .main-nav > a:hover { background: #353020; color: #ffd16b; box-shadow: none; }
    .main-nav small { background: #4b4025; color: #ffce6a; }
    .sidebar-tip { background: #24252b; border-color: #3b3b3e; color: #f0f0f2; }
    .sidebar-tip p, .sidebar-bottom > a { color: #a1a5b1; }
    .sidebar-tip > a, .tip-spark { color: #ffcf68; }
    .sidebar-account { border-color: #36383f; color: #e2e3e7; }
    .sidebar-account small, .sidebar-account div > a { color: #a9adb8; }
    .avatar, .top-avatar { background: #ffe6af; color: #5b400a; }
    .topbar { background: white; }
    .dashboard-start, .bottom-cta { background: #fff2d6; border-color: #efdfb7; }
    .dashboard-steps li > span { border-color: #e9d39f; }
    .dashboard-steps small, .dashboard-stats span, .dashboard-stats small, .dashboard-count { color: #6d707a; }
    .dashboard-count { background: #eceef2; }
    .dashboard-empty { border-color: #d5c49d; background: #fffdfa; }
    .dashboard-empty > span { color: #ab7b21; }
    .dashboard-document { background: #fafafa; border-color: #e1e2e6; border-top-color: var(--document-accent); }
    .dashboard-document small, .dashboard-document > span { color: #777b85; }
    .dashboard-document i { background: #e4e5e9; }
    .admin-shortcuts { color: #875c08; }
    .template-status.published { background: #fff0cc; color: #795400; }
    .about-values article > span { color: #957023; }
    .about-intro { max-width: 850px; }
    .about-values { gap: 24px; }
    .auth-story { background: #202126; color: white; }
    .auth-story p, .auth-story .eyebrow { color: #d2bd8c; }
    .auth-flower { color: #ffbd32; }
    .editor-preview { background: #e8e9ee; }
    .editor-section h3 > span, .field-grid label, .entry-fields label { color: #707580; }
    .field-grid input, .entry-fields input, .entry-fields textarea, .editor-section > textarea { border-color: #dfe1e7; color: #30333b; }
    .editor-hint, .add-section-box { background: #fff3d9; color: #7b6331; }
    .add-entry { background: #fffcf5; color: #8c681f; border-color: #d8c28e; }
    .mobile-menu { background: var(--accent); color: #17181b; }
    .skip-link { background: #ffb51b; color: #18191d; }
    @media (max-width: 1100px) { .site-header { gap: 24px; padding-inline: 26px; } .site-navigation { gap: 19px; } .header-cta { padding: 12px 15px; font-size: 12px; } .site-navigation a { font-size: 12px; } .reference-editor-section { gap: 30px; } }
    @media (max-width: 800px) { .reference-editor-section { grid-template-columns: 1fr; } .reference-editor-copy { order: -1; } .editor-demo { max-width: 600px; width: 100%; } .reference-benefits { gap: 24px; } .reference-benefits h2 { font-size: 18px; } }
    @media (max-width: 700px) {
        .site-header { min-height: 76px; padding: 18px 20px; gap: 14px; justify-content: space-between; }
        .site-header .brand { font-size: 30px; }
        .header-cta { font-size: 12px; padding: 11px 13px; }
        .site-header .btn-dark span { display: none; }
        .site-navigation { position: fixed; inset: 0 auto 0 0; width: min(280px,85vw); padding: 85px 28px 35px; background: #202126; flex-direction: column; align-items: stretch; justify-content: start; gap: 10px; z-index: 110; transform: translateX(-100%); transition: transform .2s; }
        .site-navigation a { font-size: 16px; padding: 14px 8px; }
        .nav-open .site-navigation { transform: translateX(0); }
        .website-shell .content { padding: 32px 20px; }
        .landing-page .content { padding: 0; }
        .reference-hero { padding: 42px 20px 0; }
        .reference-hero .eyebrow { font-size: 8px; letter-spacing: 1.4px; }
        .reference-hero h1 { font-size: clamp(34px,7.7vw,52px); letter-spacing: -1.7px; }
        .reference-hero > p { font-size: 14px; }
        .reference-hero-actions { flex-direction: column; gap: 18px; }
        .reference-hero-actions .btn { font-size: 14px; }
        .reference-checks { gap: 8px 14px; flex-wrap: wrap; font-size: 10px; }
        .cv-showcase { height: 340px; margin-top: 30px; padding: 18px 14px 0; }
        .showcase-caption { font-size: 7px; letter-spacing: 1px; }
        .showcase-caption > span:last-child { display: none; }
        .showcase-documents { padding: 35px 0 0; gap: 12px; margin-inline: -25px; }
        .showcase-paper { flex: 0 0 160px; border-width: 3px; }
        .showcase-paper .mini-cv { min-height: 300px; }
        .showcase-label { bottom: 18px; padding: 12px 16px; gap: 10px; }
        .showcase-label strong { font-size: 12px; }
        .showcase-label small { font-size: 9px; }
        .reference-benefits { grid-template-columns: 1fr; gap: 30px; padding: 40px 24px; }
        .reference-benefits > div { border-bottom: 1px solid #33353d; padding-bottom: 22px; }
        .reference-benefits > div:last-child { border: 0; padding-bottom: 0; }
        .reference-benefits > div > span { margin-bottom: 8px; }
        .reference-benefits p { font-size: 13px; margin-top: 10px; }
        .reference-template-section, .reference-editor-section, .reference-faq { padding: 45px 20px; }
        .reference-template-section .section-heading { align-items: start; }
        .reference-template-section .section-heading p { font-size: 13px; }
        .reference-final-cta { padding: 55px 20px; }
        .reference-faq summary { font-size: 14px; }
        .website-shell .app-footer { padding: 25px 20px 85px; }
        .demo-body { padding: 18px 14px; gap: 12px; }
        .demo-field strong { font-size: 9px; padding: 8px; }
    }
    @media (prefers-reduced-motion: reduce) { .showcase-paper, .site-navigation { transition: none; } }
}
@media print { .site-header { display: none !important; } }

@media screen {
    .template-art {
        background: var(--night);
        border-color: var(--night);
    }
}

@media screen {
    .landing-page .reference-template-section,
    .landing-page .reference-editor-section,
    .landing-page .reference-faq {
        background: var(--night);
        color: #f5f5f7;
    }

    .landing-page .reference-template-section .section-heading p,
    .landing-page .template-meta p,
    .landing-page .reference-editor-copy > p,
    .landing-page .reference-editor-copy ul,
    .landing-page .reference-faq details p {
        color: #b8bac4;
    }

    .landing-page .reference-template-section .eyebrow,
    .landing-page .reference-editor-copy .eyebrow,
    .landing-page .reference-faq .eyebrow,
    .landing-page .reference-template-section em,
    .landing-page .reference-editor-copy em,
    .landing-page .reference-template-section .text-link,
    .landing-page .reference-faq .text-link {
        color: #ffbf35;
    }

    .landing-page .template-use {
        background: #222329;
        color: #ffbf35;
        border-color: #41434c;
    }

    .landing-page .reference-faq details {
        border-color: #35363e;
    }

    .landing-page .editor-demo {
        background: #1b1c21;
        border-color: #35363e;
    }

    .landing-page .demo-bar {
        border-color: #35363e;
    }

    .landing-page .demo-bar > span,
    .landing-page .demo-field small,
    .landing-page .demo-caption {
        color: #b8bac4;
    }

    .landing-page .demo-body .eyebrow {
        color: #ffbf35;
    }

    .landing-page .demo-field strong {
        background: #282a31;
        color: #f5f5f7;
        border-color: #41434c;
    }
}

@media screen {
    .auth-page,
    .auth-page .app-main {
        background: var(--night);
        color: #f5f5f7;
        color-scheme: dark;
    }

    .auth-page .auth-layout {
        background: #111216;
        border-color: #303139;
    }

    .auth-page .auth-story {
        background: #191a1f;
    }

    .auth-page .auth-form {
        background: #111216;
        color: #f5f5f7;
    }

    .auth-page .auth-form > p,
    .auth-page .field-label,
    .auth-page .guest-link,
    .auth-page .auth-story > .small {
        color: #b8bac4;
    }

    .auth-page .auth-form .eyebrow,
    .auth-page .auth-switch a,
    .auth-page .auth-form .green {
        color: #ffc34b;
    }

    .auth-page .form-control {
        background: #202127;
        border-color: #41434d;
        color: #f5f5f7;
        caret-color: #ffc34b;
    }

    .auth-page .form-control:focus {
        background: #202127;
        color: #fff;
        border-color: #ffb51b;
        box-shadow: 0 0 0 3px #ffb51b26;
    }

    .auth-page .form-control::placeholder {
        color: #9da1af;
    }

    .auth-page .form-control:-webkit-autofill,
    .auth-page .form-control:-webkit-autofill:hover,
    .auth-page .form-control:-webkit-autofill:focus {
        -webkit-text-fill-color: #f5f5f7;
        -webkit-box-shadow: 0 0 0 1000px #202127 inset;
        caret-color: #ffc34b;
    }

    .auth-page input[type=checkbox] {
        accent-color: #ffb51b;
    }
}

@media screen {
    .templates-page,
    .templates-page .app-main {
        background: var(--night);
        color: #f5f5f7;
        color-scheme: dark;
    }

    .templates-page .page-heading p,
    .templates-page .template-meta p,
    .templates-page .results-toolbar,
    .templates-page .results-toolbar p,
    .templates-page .ats-filter,
    .templates-page .gallery-footnote,
    .templates-page .empty-state p {
        color: #b8bac4;
    }

    .templates-page .green,
    .templates-page .eyebrow,
    .templates-page .tiny-star,
    .templates-page .results-toolbar strong {
        color: #ffc34b;
    }

    .templates-page .gallery-banner {
        background: #1c1911;
        border-color: #514124;
    }

    .templates-page .gallery-banner p,
    .templates-page .banner-tag {
        color: #d9c28e;
    }

    .templates-page .banner-tag {
        border-color: #66512a;
    }

    .templates-page .banner-icon {
        background: #42331a;
        color: #ffc34b;
    }

    .templates-page .banner-doodle {
        color: #4d3d1e;
    }

    .templates-page .filter-toolbar,
    .templates-page .gallery-footnote {
        border-color: #30323a;
    }

    .templates-page .category-tab {
        color: #b8bac4;
    }

    .templates-page .category-tab:hover,
    .templates-page .category-tab.selected {
        background: #352a14;
        color: #ffce6a;
    }

    .templates-page .category-tab span {
        background: #59401a;
        color: #ffce6a;
    }

    .templates-page .search-box {
        background: #191a20;
        border-color: #41434c;
    }

    .templates-page .search-box input {
        color: #f5f5f7;
    }

    .templates-page .search-box input::placeholder,
    .templates-page .search-box > span {
        color: #a9aebb;
    }

    .templates-page .search-box button {
        background: #30323a;
        color: #ffc34b;
    }

    .templates-page .template-use {
        background: #222329;
        color: #ffc34b;
        border-color: #41434c;
    }
}