/* === A4 Print Layout === */
        @page {
            size: A4;
            margin: 20mm 18mm 25mm 18mm;
        }

        @media print {
            body { padding: 0; margin: 0; max-width: 170mm; }
            .no-print { display: none !important; }
            .page-break { page-break-before: always; }
            .avoid-break { page-break-inside: avoid; }
            a { color: inherit; text-decoration: none; }
            .toc a { color: #1a1a2e; }
        }

        /* === Base Styles === */
        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
            font-size: 11pt;
            line-height: 1.7;
            color: #1a1a2e;
            max-width: 960px;
            margin: 0 auto;
            padding: 40px 48px;
            background: white;
        }

        /* === Typography === */
        h1 {
            font-size: 22pt;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 8pt;
            line-height: 1.2;
        }

        h2 {
            font-size: 15pt;
            font-weight: 600;
            color: #1e293b;
            margin-top: 24pt;
            margin-bottom: 10pt;
            padding-bottom: 4pt;
            border-bottom: 2px solid #e2e8f0;
        }

        h3 {
            font-size: 12pt;
            font-weight: 600;
            color: #334155;
            margin-top: 16pt;
            margin-bottom: 8pt;
        }

        h4 {
            font-size: 10.5pt;
            font-weight: 600;
            color: #475569;
            margin-top: 12pt;
            margin-bottom: 6pt;
        }

        p { margin-bottom: 8pt; }

        /* === Title Page (slim header, not a full-screen cover) === */
        .title-page {
            text-align: center;
            padding: 18pt 0 12pt;
        }

        .title-page .series-label {
            font-size: 9.5pt;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #1a9c8d;
            margin-bottom: 6pt;
        }

        .title-page h1 {
            font-size: 19pt;
            margin-bottom: 5pt;
        }

        .title-page .subtitle {
            font-size: 11pt;
            color: #64748b;
            font-weight: 400;
            max-width: 620px;
            margin: 0 auto 8pt;
        }

        .title-page .meta {
            font-size: 9pt;
            color: #94a3b8;
        }

        /* === Table of Contents === */
        .toc {
            padding: 16pt 20pt;
            background: #f8fafc;
            border-radius: 8pt;
            margin: 20pt 0;
            counter-reset: toc;
        }

        .toc h2 {
            font-size: 12pt;
            margin-top: 0;
            border: none;
            padding-bottom: 8pt;
        }

        .toc ol {
            list-style: none;
            padding: 0;
        }

        .toc > ol > li {
            counter-increment: toc;
            margin-bottom: 4pt;
        }

        .toc > ol > li::before {
            content: counter(toc) ". ";
            font-weight: 600;
            color: #1a9c8d;
        }

        .toc a {
            color: #334155;
            text-decoration: none;
        }

        .toc a:hover { color: #1a9c8d; }

        .toc .sub-items {
            padding-left: 20pt;
            list-style: none;
        }

        .toc .sub-items li {
            font-size: 9.5pt;
            color: #64748b;
            margin-bottom: 2pt;
        }

        .toc .toc-part-label {
            font-weight: 600;
            font-size: 10pt;
            color: #1a9c8d;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 12pt;
            margin-bottom: 4pt;
            padding-top: 8pt;
            border-top: 1px solid #e2e8f0;
        }

        .toc .toc-part-label:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: none;
        }

        /* === Part Dividers === */
        .part-divider {
            text-align: center;
            padding: 18pt 0 14pt;
        }

        .part-divider .part-label {
            font-size: 10pt;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #1a9c8d;
            margin-bottom: 8pt;
        }

        .part-divider h2 {
            border: none;
            font-size: 18pt;
            margin-top: 0;
        }

        .part-divider p {
            color: #64748b;
            font-size: 10.5pt;
        }

        /* === Info Boxes === */
        .info-box {
            background: #fafafa;
            border: 1px solid #e2e8f0;
            padding: 12pt 16pt;
            border-radius: 6pt;
            margin: 12pt 0;
            font-size: 10pt;
        }



        .info-box-title {
            font-weight: 600;
            margin-bottom: 4pt;
        }

        /* === Glossary / Definition Box === */
        .glossary {
            background: #fafafa;
            border: 1px solid #e2e8f0;
            border-radius: 8pt;
            padding: 16pt;
            margin: 16pt 0;
        }

        .glossary h3 {
            margin-top: 0;
            font-size: 11pt;
        }

        .glossary dl {
            margin: 0;
        }

        .glossary dt {
            font-weight: 600;
            color: #1e293b;
            margin-top: 8pt;
        }

        .glossary dd {
            margin-left: 0;
            padding-left: 16pt;
            color: #475569;
            font-size: 10pt;
        }

        /* === Figures === */
        figure {
            margin: 16pt 0;
            text-align: center;
            page-break-inside: avoid;
        }

        figure img {
            max-width: 100%;
            border: 1px solid #e2e8f0;
            border-radius: 6pt;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        /* Narrow figures (e.g. tall sidebar screenshots) get a tighter ceiling so
           they don't dominate the column. */
        figure.figure-narrow img {
            max-width: 320px;
        }

        figcaption {
            font-size: 9pt;
            color: #64748b;
            font-style: italic;
            margin-top: 6pt;
        }

        /* === Tables === */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 12pt 0;
            font-size: 10pt;
            page-break-inside: avoid;
        }

        th, td {
            padding: 8pt 10pt;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }

        th {
            background: #f8fafc;
            font-weight: 600;
            color: #334155;
            font-size: 9.5pt;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* === Code / Formulas === */
        code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 9pt;
            background: #f1f5f9;
            padding: 1pt 4pt;
            border-radius: 3pt;
            color: #0f172a;
        }

        pre {
            font-family: 'JetBrains Mono', monospace;
            font-size: 9pt;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 6pt;
            padding: 12pt 16pt;
            overflow-x: auto;
            margin: 10pt 0;
            line-height: 1.6;
        }

        /* === Step-by-Step === */
        .step {
            display: flex;
            gap: 12pt;
            margin: 12pt 0;
            padding: 12pt;
            background: #fafafa;
            border-radius: 8pt;
            page-break-inside: avoid;
        }

        .step-number {
            flex-shrink: 0;
            width: 28pt;
            height: 28pt;
            background: #1a9c8d;
            color: white;
            font-weight: 700;
            font-size: 12pt;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .step-content {
            flex: 1;
        }

        .step-content p:last-child { margin-bottom: 0; }

        /* === Comparison Table (Method Summary) === */
        .method-comparison {
            border: 2px solid #e2e8f0;
            border-radius: 8pt;
            overflow: hidden;
            margin: 16pt 0;
        }

        .method-comparison th {
            background: #1e293b;
            color: white;
            text-transform: none;
            font-size: 10pt;
        }

        .method-comparison td {
            vertical-align: top;
        }

        /* === References === */
        .references {
            margin-top: 30pt;
        }

        .references h2 {
            border-bottom: 2px solid #334155;
        }

        .references p {
            padding-left: 36pt;
            text-indent: -36pt;
            margin-bottom: 6pt;
            font-size: 9.5pt;
            line-height: 1.5;
        }

        /* === Utility === */
        .text-muted { color: #94a3b8; }
        .text-primary { color: #1a9c8d; }
        .font-mono { font-family: 'JetBrains Mono', monospace; }
        .mt-1 { margin-top: 8pt; }
        .mt-2 { margin-top: 16pt; }
        .mb-1 { margin-bottom: 8pt; }
        .mb-2 { margin-bottom: 16pt; }

        ul, ol { margin-bottom: 8pt; padding-left: 20pt; }
        li { margin-bottom: 4pt; }

        /* === Print Button (screen only) === */
        .print-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: #1a9c8d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            z-index: 100;
        }

        .print-btn:hover { background: #2d8a9e; }

        /* === Desktop: TOC docked left, body shifts right === */
        @media screen and (min-width: 1280px) {
            body {
                margin-left: 280px;
                margin-right: 24px;
                max-width: 960px;
                padding-left: 0;
                padding-right: 0;
            }
            .toc {
                position: fixed;
                top: 0;
                left: 0;
                width: 260px;
                height: 100vh;
                overflow-y: auto;
                margin: 0;
                padding: 24pt 18pt;
                border-radius: 0;
                border-right: 1px solid #e2e8f0;
                background: #f8fafc;
                font-size: 9pt;
                z-index: 50;
            }
            .toc h2 {
                font-size: 11pt;
            }
            .toc > ol > li {
                font-size: 9pt;
            }
            .toc .sub-items li {
                font-size: 8pt;
            }
            /* The page-break divs after title page and after TOC are visual no-ops
               on screen, but on desktop with sticky TOC we don't want the TOC
               followed by an artificial gap. */
            .toc + .page-break {
                display: none;
            }
        }

        /* === Print: revert TOC to inline flow === */
        @media print {
            .toc {
                position: static;
                width: auto;
                height: auto;
                border-right: none;
                background: #f8fafc;
                padding: 16pt 20pt;
                border-radius: 8pt;
                margin: 20pt 0;
            }
            body {
                margin-left: 0;
                margin-right: 0;
            }
        }

        /* ================================================================ */
        /* ==========  CHOICERY-FAITHFUL PSEUDO-SCREENSHOT LIBRARY  ======== */
        /* Class-only (CSP-safe). Recreates the real Choicery survey theme    */
        /* (Pizza Example): page #fafbfc, white cards, #2c3e50 normal-weight   */
        /* questions, #007185 teal controls/buttons/progress. Editor mocks     */
        /* use the app's green (#1a9c8d) + real Bootstrap Icons. No browser    */
        /* chrome (Choicery has none).                                         */
        /* ================================================================ */

        /* --- Screenshot frame = the survey screen --- */
        .shot {
            background: #fafbfc;
            border: 1px solid #e6e9ee;
            border-radius: 10px;
            padding: 24px 22px 26px;
            margin: 14pt 0 3pt;
            page-break-inside: avoid;
        }
        .shot.ed { background: #f4f5f7; padding: 18px; }
        .shot.plain { background: #fff; padding: 20px; }
        .cap { font-size: 9pt; color: #64748b; font-style: italic; margin: 3pt 0 16pt; text-align: center; }

        /* --- Survey page + question card --- */
        .sp { max-width: 780px; margin: 0 auto; }
        .qcard { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 20px 22px; }
        .q { color: #2c3e50; font-size: 16.5px; font-weight: 400; line-height: 1.45; margin-bottom: 14px; }
        .q b, .q strong { font-weight: 700; color: #20303f; }
        .qsub { color: #64748b; font-size: 12.5px; line-height: 1.4; margin: -6px 0 14px; }

        /* Next button + progress */
        .nextrow { display: flex; justify-content: center; margin-top: 22px; }
        .btn-next { background: #007185; color: #fff; font-weight: 600; font-size: 15px; border: none; border-radius: 8px; padding: 9px 34px; min-width: 110px; }
        .btn-next.full { flex: 1; }
        .prog { margin-top: 26px; }
        .prog .lbl { color: #64748b; font-size: 12.5px; margin-bottom: 7px; }
        .prog .bar { height: 6px; border-radius: 4px; background: #007185; }

        /* --- Radio / checkbox options --- */
        .opts { display: flex; flex-direction: column; gap: 1px; }
        .opts.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 26px; }
        .opt { display: flex; align-items: center; gap: 12px; color: #232f3e; font-size: 15.5px; padding: 8px 4px; line-height: 1.35; }
        .rad { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid #c3c8d0; border-radius: 50%; background: #fff; position: relative; display: inline-block; vertical-align: middle; }
        .opt.sel .rad, .rad.sel { border-color: #007185; }
        .opt.sel .rad::after, .rad.sel::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #007185; }
        .chk { flex: 0 0 auto; width: 21px; height: 21px; border: 2px solid #c3c8d0; border-radius: 4px; background: #fff; position: relative; }
        .opt.sel .chk { border-color: #007185; background: #007185; }
        .opt.sel .chk::after { content: "\2713"; position: absolute; inset: 0; color: #fff; font-size: 13px; line-height: 19px; text-align: center; font-weight: 700; }

        /* Dropdown */
        .dd { display: flex; align-items: center; justify-content: space-between; border: 1px solid #c3c8d0; border-radius: 6px; padding: 10px 12px; color: #232f3e; font-size: 15px; max-width: 340px; background: #fff; }
        .dd .cv { color: #94a3b8; margin-left: 14px; }

        /* --- Grid / Likert --- */
        .lk-h { display: grid; grid-template-columns: 40% repeat(7, 1fr); border-bottom: 1px solid #e3e6ea; padding-bottom: 10px; margin-bottom: 2px; }
        .lk-h > span { text-align: center; color: #5c6b7a; font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 0 2px; }
        .lk-r { display: grid; grid-template-columns: 40% repeat(7, 1fr); align-items: center; }
        .lk-r.alt { background: #f8f9fb; }
        .lk-r .st { color: #232f3e; font-size: 15px; padding: 13px 8px; line-height: 1.35; }
        .lk-r .c { text-align: center; padding: 13px 0; }

        /* --- Bipolar slider --- */
        .bpwrap { border: 1px solid #e3e6ea; border-radius: 8px; padding: 16px 20px; }
        .bp-intro { color: #2c3e50; font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
        .bp-row { display: grid; grid-template-columns: 96px 1fr 96px; align-items: center; gap: 16px; margin: 22px 0; }
        .bp-l { text-align: right; color: #64748b; font-size: 15px; }
        .bp-r { color: #64748b; font-size: 15px; }
        .bp-track { position: relative; height: 6px; background: #e2e8f0; border-radius: 4px; }
        .bp-track .thumb { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: #007185; transform: translate(-50%, -50%); }
        .bp-track .thumb.p3 { left: 33%; } .bp-track .thumb.p4 { left: 50%; }
        .bp-track .thumb.p5 { left: 66%; } .bp-track .thumb.p6 { left: 83%; }
        .bp-ends { position: absolute; top: 11px; left: 0; right: 0; display: flex; justify-content: space-between; color: #9aa5b1; font-size: 11px; }

        /* --- Ranking --- */
        .rk { display: flex; flex-direction: column; gap: 10px; max-width: 540px; }
        .rk-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 11px 14px; color: #232f3e; font-size: 15px; }
        .rk-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #007185; color: #fff; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }
        .rk-g { margin-left: auto; color: #c3c8d0; letter-spacing: -3px; font-size: 17px; }

        /* --- Inline field (numeric / short text) --- */
        .inl { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; color: #232f3e; font-size: 16px; }
        .inl .fld { border: 1px solid #c3c8d0; border-radius: 6px; padding: 0 12px; height: 42px; min-width: 160px; background: #fff; }
        .inl .fld.sm { min-width: 92px; }

        /* --- Constant sum --- */
        .cs { max-width: 560px; }
        .cs-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
        .cs-row .lb { flex: 1; color: #232f3e; font-size: 15px; }
        .cs-row .in { width: 82px; height: 40px; border: 1px solid #c3c8d0; border-radius: 6px; text-align: center; color: #232f3e; background: #fff; display: flex; align-items: center; justify-content: center; }
        .cs-tot { display: flex; justify-content: space-between; border-top: 1px solid #e3e6ea; margin-top: 10px; padding-top: 13px; font-size: 15px; color: #2c3e50; font-weight: 600; }
        .cs-tot .ok { color: #007185; }

        /* --- Van Westendorp price cards --- */
        .vw-concept { color: #2c3e50; font-weight: 700; font-size: 16px; margin-bottom: 2px; }
        .vw-desc { color: #64748b; font-size: 14px; margin-bottom: 16px; }
        .vw { display: flex; flex-direction: column; gap: 14px; }
        .vw-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 15px 16px; }
        .vw-q { font-size: 15px; color: #2c3e50; margin-bottom: 13px; line-height: 1.35; }
        .vw-q .n { font-weight: 700; margin-right: 6px; }
        .vw-in { display: flex; align-items: center; gap: 12px; }
        .vw-chip { width: 34px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
        .vw-fld { width: 210px; max-width: 60%; height: 38px; border: 1.5px solid; border-radius: 7px; background: #fff; }
        .vw1 .n { color: #3f76bd; } .vw1 .vw-chip { background: #4b82c4; } .vw1 .vw-fld { border-color: #a9c6e8; }
        .vw2 .n { color: #158a7d; } .vw2 .vw-chip { background: #1a9c8d; } .vw2 .vw-fld { border-color: #9fdcd3; }
        .vw3 .n { color: #cf9038; } .vw3 .vw-chip { background: #e0a458; } .vw3 .vw-fld { border-color: #f0d3a8; }
        .vw4 .n { color: #cb5335; } .vw4 .vw-chip { background: #d9663f; } .vw4 .vw-fld { border-color: #eec0b2; }

        /* --- Kano (functional / dysfunctional + colored spectrum rings) --- */
        .kano-intro { color: #2c3e50; font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
        .kano-card { border: 1px solid #e3e6ea; border-radius: 8px; padding: 18px 20px; }
        .kano-name { color: #20303f; font-weight: 700; font-size: 20px; padding-bottom: 14px; border-bottom: 1px solid #eceff2; margin-bottom: 16px; }
        .kano-cols { display: grid; grid-template-columns: 1fr 1fr; }
        .kano-col { padding: 0 22px; }
        .kano-col.l { border-right: 1px solid #eceff2; padding-left: 4px; }
        .kano-col h5 { color: #2c3e50; font-weight: 600; font-size: 15px; margin-bottom: 14px; line-height: 1.35; }
        .kano-col h5 .not { background: #fde68a; padding: 0 3px; border-radius: 2px; font-weight: 700; }
        .kano-opt { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: #232f3e; font-size: 15px; }
        .kano-opt .ring { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid; flex: 0 0 auto; background: #fff; }
        .k1 .ring { border-color: #0f8a90; } .k2 .ring { border-color: #5fae6b; } .k3 .ring { border-color: #9aa7b4; }
        .k4 .ring { border-color: #e0a458; } .k5 .ring { border-color: #d9663f; }
        .kano-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
        .kano-foot .pos { color: #64748b; font-weight: 600; font-size: 14px; white-space: nowrap; }

        /* --- Gabor-Granger --- */
        .gg-div { border-top: 1px solid #e3e6ea; margin: 14px 0 16px; }
        .gg-concept { color: #2c3e50; font-weight: 700; font-size: 16px; }
        .gg-desc { color: #64748b; font-size: 14px; margin-bottom: 22px; }
        .gg-q { text-align: center; color: #20303f; font-weight: 700; font-size: 19px; margin-bottom: 18px; }
        .gg-btns { display: flex; gap: 14px; justify-content: center; }
        .gg-btn { border: 1px solid #c3c8d0; background: #fff; color: #232f3e; border-radius: 8px; padding: 10px 32px; font-size: 15px; min-width: 100px; }

        /* --- Evaluation (product comparison cards) --- */
        .eval { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .eval-card { border: 1px solid #d9dee5; border-radius: 10px; overflow: hidden; background: #fff; }
        .eval-card .hd { text-align: center; font-weight: 700; color: #2c3e50; padding: 12px; font-size: 15px; }
        .eval-card .img { height: 104px; background: #f5efe6; display: flex; align-items: center; justify-content: center; color: #b7a888; font-size: 10.5px; }
        .eval-card .rows { padding: 6px 14px 4px; }
        .eval-card .r { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; border-top: 1px solid #f1f3f6; }
        .eval-card .r .k { color: #64748b; } .eval-card .r .v { color: #232f3e; }
        .eval-card .pick { text-align: center; padding: 12px; }
        .eval-none { border: 1px solid #d9dee5; border-radius: 10px; text-align: center; color: #232f3e; font-size: 15px; padding: 14px; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }

        /* --- Text & Media page --- */
        .tp-title { color: #20303f; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
        .tp-body { color: #2c3e50; font-size: 15px; line-height: 1.6; }
        .media { height: 150px; background: #eef1f4; border: 1px solid #e3e6ea; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 14px; }
        .media .play { width: 0; height: 0; border-left: 20px solid #007185; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }

        /* --- Editor: survey flow list --- */
        .ed-page { display: flex; align-items: center; justify-content: space-between; background: #f1f3f5; border: 1px solid #e7eaee; border-radius: 8px; padding: 11px 14px; margin: 14px 0 10px; }
        .ed-page:first-child { margin-top: 0; }
        .ed-page .pl { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .6px; }
        .ed-page .pl .grip { color: #c3cbd4; }
        .ed-page .pl .ph { color: #aab3bd; font-weight: 400; font-style: italic; letter-spacing: 0; }
        .ed-ctrls { display: flex; align-items: center; gap: 7px; }
        .ed-ctrls .b { min-width: 32px; height: 30px; border: 1px solid #e2e6ea; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; color: #6b7683; font-size: 12px; padding: 0 9px; }
        .ed-item { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid #e7eaee; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
        .ed-num { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: #dbf3ec; color: #148f77; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; }
        .ed-item .body { flex: 1; line-height: 1.3; min-width: 0; }
        .ed-item .nm { font-weight: 700; color: #1f2a37; font-size: 18px; }
        .ed-item .ty { display: flex; align-items: center; gap: 6px; color: #16a085; font-size: 13px; margin-top: 3px; }
        .ed-subs { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 11px; }
        .ed-sub { display: flex; align-items: center; gap: 6px; color: #7b8794; font-size: 13px; }
        .ed-item .acts { display: flex; gap: 8px; align-items: center; }
        .ed-btn { border: 1px solid #dce1e7; border-radius: 8px; padding: 7px 14px; font-size: 13px; color: #475569; display: flex; align-items: center; gap: 6px; background: #fff; white-space: nowrap; }
        .ed-btn.edit { background: #16a085; color: #fff; border-color: #16a085; }
        .ed-btn.trash { padding: 7px 10px; color: #98a2ad; }

        /* --- Editor: Add Item sidebar --- */
        .sb { background: #fff; border: 1px solid #e6e9ee; border-radius: 8px; max-width: 300px; overflow: hidden; }
        .sb-hd { font-weight: 700; color: #334155; padding: 12px 14px; font-size: 13px; letter-spacing: .3px; border-bottom: 1px solid #eef1f4; }
        .sb-search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 2px; padding: 9px 12px; border: 1px solid #e2e6ea; border-radius: 8px; color: #9aa5b1; font-size: 13px; }
        .sb-search i { color: #aab3bd; }
        .sb-sec { display: flex; align-items: center; gap: 8px; padding: 11px 14px 6px; font-weight: 600; color: #16a085; font-size: 11.5px; letter-spacing: .5px; }
        .sb-sec .dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; display: inline-block; }
        .sb-sec .dot.cj { background: #f97316; }
        .sb-i { display: flex; align-items: center; gap: 12px; padding: 9px 16px; color: #334155; font-size: 14px; }
        .sb-i i { color: #64748b; font-size: 15px; width: 18px; text-align: center; }
        .sb-i.q i  { color: #10b981; }  /* survey questions - green */
        .sb-i.mr i { color: #3b82f6; }  /* market research - blue */
        .sb-i.ev i { color: #7c3aed; }  /* evaluation - purple */
        .sb-i.cj i { color: #f97316; }  /* conjoint - orange */
        .sb-i.pb i { color: #64748b; }  /* page break - gray */
        .sb-i.ep i { color: #ef4444; }  /* end page - red */
        .sb-i .h { margin-left: auto; color: #d3dae1; letter-spacing: -2px; }
        .sb-i.hot { background: #f0fbfa; }
        .sb-new { font-size: 8.5px; font-weight: 700; color: #0f766e; border: 1px solid #99e6dd; border-radius: 8px; padding: 1px 6px; margin-left: 6px; letter-spacing: .3px; }
        .sb-div { height: 1px; background: #eef1f4; margin: 6px 12px; }

        /* --- Editor: Market Research method picker --- */
        .mp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 580px; }
        .mp-card { border: 2px solid #e3e6ea; border-radius: 10px; padding: 16px 12px; text-align: center; background: #fff; }
        .mp-card.on { border-color: #1a9c8d; background: #f0fbfa; }
        .mp-fig { height: 44px; color: #64748b; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
        .mp-card.on .mp-fig { color: #1a9c8d; }
        .mp-fig svg { width: 70px; height: 44px; }
        .mp-nm { font-weight: 700; color: #1e293b; font-size: 15px; }
        .mp-ds { color: #64748b; font-size: 12px; margin-top: 3px; }

        /* --- Editor: Text Input format dropdown --- */
        .fmt { max-width: 320px; }
        .fmt-lb { color: #475569; font-size: 13px; margin-bottom: 5px; font-weight: 600; }
        .fmt-bx { border: 1px solid #1a9c8d; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
        .fmt-cur { display: flex; justify-content: space-between; padding: 9px 12px; background: #fff; border-bottom: 1px solid #eef1f4; color: #1e293b; font-size: 14px; }
        .fmt-cur .cv { color: #94a3b8; }
        .fmt-o { padding: 9px 12px; color: #334155; font-size: 14px; }
        .fmt-o.sel { background: #e6f5f2; color: #0f766e; font-weight: 600; }
        .fmt-o + .fmt-o { border-top: 1px solid #f4f6f8; }

        /* --- Editor: Custom HTML code --- */
        .code { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; overflow-x: auto; }
        .code .t { color: #7dd3fc; } .code .a { color: #fbbf24; } .code .s { color: #86efac; } .code .c { color: #64748b; }

        /* --- Responsive --- */
        @media (max-width: 640px) {
            .opts.two, .kano-cols, .eval, .mp { grid-template-columns: 1fr; }
            .kano-col.l { border-right: none; border-bottom: 1px solid #eceff2; padding-bottom: 8px; margin-bottom: 8px; }
            .lk-r .st, .lk-h > span { font-size: 11px; }
        }

        /* === Editor tours: annotated screenshot + button legend (2026-10-18) === */
        .editor-tour {
            display: grid;
            grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
            gap: 20px;
            align-items: start;
            margin: 16pt 0;
        }
        .editor-tour figure { margin: 0; }
        .editor-tour figure a { display: block; cursor: zoom-in; }
        .editor-tour table { margin-top: 0; }
        figure.figure-phone img { max-width: min(300px, 100%); }
        figure.figure-medium img { max-width: min(560px, 100%); }
        .btn-legend td { vertical-align: top; }
        .btn-legend.numbered td:first-child { width: 34px; text-align: center; }
        .btn-legend .bi { color: #475569; margin-right: 4px; }
        .mk {
            display: inline-block;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #e8590c;
            color: #fff;
            font-weight: 700;
            font-size: 9pt;
            line-height: 22px;
            text-align: center;
        }
        .fig-pair {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
            gap: 20px;
            align-items: start;
        }
        .fig-pair figure { margin: 16pt 0 0; }
        @media (max-width: 820px) {
            .editor-tour, .fig-pair { grid-template-columns: minmax(0, 1fr); }
        }
        @media screen and (max-width: 640px) {
            body { padding: 24px 16px; }
            table { display: block; overflow-x: auto; }
        }
        @media print {
            .editor-tour { grid-template-columns: 45% 55%; }
        }