:root {
    --blue: #1a73e8;
    --blue-dark: #1558b0;
    --blue-soft: #eaf2fe;
    --ink: #202124;
    --muted: #5f6368;
    --border: #dadce0;
    --border-soft: #e8eaed;
    --surface: #fff;
    --canvas: #f8f9fa;
    --green: #137333;
    --green-soft: #e6f4ea;
    --amber: #a15c00;
    --amber-soft: #fef7e0;
    --red: #b3261e;
    --red-soft: #fce8e6;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 2px 8px rgba(60, 64, 67, .05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
button, input, select { font: inherit; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.035em; }
h2 { font-size: 1.45rem; line-height: 1.25; letter-spacing: -.018em; }
h3 { font-size: 1.08rem; line-height: 1.35; }
.muted, .question-help { color: var(--muted); }
.eyebrow { margin-bottom: 8px; color: var(--blue-dark); font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.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; }
[hidden] { display: none !important; }

.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .97); }
.header-inner { display: flex; align-items: center; max-width: 1180px; min-height: 68px; margin: 0 auto; padding: 0 24px; gap: 28px; }
.brand { display: flex; align-items: center; margin-right: auto; color: var(--ink); gap: 11px; }
.brand:hover { text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.brand small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.brand-mark { display: block; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; }
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a { padding: 9px 11px; border-radius: 7px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue-dark); text-decoration: none; }
.page-shell { width: min(1120px, calc(100% - 48px)); min-height: calc(100vh - 176px); margin: 0 auto; padding: 54px 0 80px; }
.site-footer { padding: 25px 24px 35px; border-top: 1px solid var(--border); background: white; color: var(--muted); text-align: center; }
.site-footer p { margin: 0; font-size: .9rem; }
.site-footer small { display: block; margin-top: 2px; font-size: .72rem; }

.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: white; color: var(--ink); cursor: pointer; font-weight: 650; line-height: 1.25; }
.button:hover { text-decoration: none; }
.button-primary { border-color: var(--blue); background: var(--blue); color: white; }
.button-primary:hover { background: var(--blue-dark); box-shadow: 0 3px 8px rgba(26, 115, 232, .16); }
.button-primary span[aria-hidden="true"] { margin-left: 9px; font-size: 1.15em; line-height: 1; }
.button-ghost { border-color: var(--border); background: white; color: var(--ink); }
.button-ghost:hover { border-color: #bdc1c6; background: #f1f3f4; }
.button-small { min-height: 34px; padding: 6px 11px; font-size: .82rem; }
.button-block { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .45; }

.hero { max-width: 760px; margin-bottom: 38px; }
.hero > p:last-child, .page-heading > p:last-child, .result-heading > div > p:last-child { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.compact-hero { margin-bottom: 34px; }
.compact-hero h1 { max-width: 800px; }
.compact-hero > p:last-child { margin-bottom: 0; }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.dashboard-card { display: grid; min-height: 154px; grid-template-columns: 44px 1fr auto; align-items: start; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: white; color: var(--ink); box-shadow: var(--shadow); gap: 16px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dashboard-card:hover { transform: translateY(-2px); border-color: #a8c7fa; box-shadow: 0 4px 14px rgba(60, 64, 67, .11); text-decoration: none; }
.dashboard-card strong { display: block; margin-bottom: 7px; font-size: 1.08rem; }
.dashboard-card small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.dashboard-card .card-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9px; background: #f1f3f4; color: var(--blue-dark); font-size: 1.45rem; }
.dashboard-card .arrow { color: var(--blue); font-size: 1.3rem; }
.dashboard-card.card-primary { border-color: #a8c7fa; }
.dashboard-card.card-primary .card-icon { background: var(--blue); color: white; }
.flow-card { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; margin-top: 48px; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: white; gap: 44px; }
.flow-card h2 { margin-bottom: 8px; }
.flow-card p:last-child { margin-bottom: 0; color: var(--muted); }
.flow-diagram, .vertical-flow, .linear-diagram { display: flex; align-items: center; justify-content: center; gap: 8px; }
.flow-diagram span, .vertical-flow span, .linear-diagram span { padding: 8px 12px; border: 1px solid #a8c7fa; border-radius: 7px; background: var(--blue-soft); color: var(--blue-dark); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-align: center; }
.flow-diagram i, .vertical-flow i, .linear-diagram i { color: #8a9096; font-style: normal; }

.method-question { margin: 0 0 16px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.method-card { display: flex; min-height: 420px; flex-direction: column; padding: 30px; border: 1px solid var(--border); border-radius: 16px; background: white; box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.method-card:hover { border-color: #b8c9e8; box-shadow: 0 5px 20px rgba(60, 64, 67, .10); }
.method-card-head { display: flex; align-items: center; margin-bottom: 22px; gap: 15px; }
.method-card-head h2, .method-card-head p { margin: 0; }
.method-card-head p { color: var(--muted); font-size: .86rem; }
.method-badge { display: grid; flex: 0 0 58px; width: 58px; height: 58px; place-items: center; border-radius: 14px; background: #fff4e4; }
.method-badge img { display: block; }
.method-badge-gtm { background: #eaf2fe; }
.method-card > p { margin-bottom: 8px; color: var(--muted); font-size: .91rem; }
.check-list { display: grid; margin: 7px 0 26px; padding: 0; list-style: none; gap: 9px; }
.check-list li { position: relative; padding-left: 25px; color: #3c4043; font-size: .9rem; }
.check-list li::before { position: absolute; left: 0; content: '✓'; color: var(--green); font-weight: 800; }
.method-card .button { min-height: 48px; margin-top: auto; }
.method-card-ga4 .button { background: #1a73e8; }
.method-card-gtm .button { background: #1967d2; }
.dashboard-help { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: .88rem; }

.login-page { display: grid; min-height: 100vh; place-items: center; background: var(--canvas); }
.login-shell { width: min(430px, calc(100% - 32px)); padding: 40px 0; }
.login-card { padding: 36px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.login-card .brand-mark { width: 48px; height: 48px; margin-bottom: 24px; }
.login-card h1 { font-size: 1.8rem; }
.login-form { display: grid; margin-top: 26px; gap: 9px; }
.login-form label, .field > span { font-size: .83rem; font-weight: 650; }
input[type="password"], input[type="text"], input[type="number"], input[type="search"], select { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #bdc1c6; border-radius: 8px; background: white; color: var(--ink); }
input:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(26,115,232,.22); outline-offset: 2px; border-color: var(--blue); }
.login-form .button { margin-top: 8px; }
.login-footer { margin-top: 22px; color: var(--muted); text-align: center; font-size: .84rem; }
.login-footer small { display: block; margin-top: 2px; font-size: .7rem; }
.alert { margin: 18px 0; padding: 11px 13px; border-radius: 8px; font-size: .88rem; }
.alert-error { border: 1px solid #f5b7b1; background: var(--red-soft); color: var(--red); }

.back-link { display: inline-block; margin-bottom: 23px; color: var(--muted); font-size: .86rem; font-weight: 600; }
.wizard-head, .result-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; gap: 24px; }
.wizard-head h1, .result-heading h1 { margin-bottom: 0; }
.progress-wrap { margin-bottom: 30px; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: .8rem; }
.progress-copy strong { color: var(--ink); }
.progress-track { display: block; width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 10px; background: #e3e6e8; appearance: none; }
.progress-track::-webkit-progress-bar { border-radius: 10px; background: #e3e6e8; }
.progress-track::-webkit-progress-value { border-radius: 10px; background: var(--blue); transition: width .2s ease; }
.progress-track::-moz-progress-bar { border-radius: 10px; background: var(--blue); }
.wizard { padding: 38px; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: var(--shadow); }
.wizard-step { display: none; animation: step-in .16s ease-out; }
.wizard-step.is-active { display: block; }
@keyframes step-in { from { opacity: .35; transform: translateY(3px); } }
.wizard-step > h2 { margin-bottom: 7px; font-size: clamp(1.55rem, 3vw, 2rem); }
.step-kicker { margin-bottom: 8px; color: var(--blue); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.question-help { margin-bottom: 26px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option-grid-single { grid-template-columns: 1fr; }
.method-choice-grid { max-width: 780px; }
.conversion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.conversion-grid .option-card { min-height: 92px; }
.option-card { position: relative; display: flex; min-height: 105px; flex-direction: column; padding: 18px 44px 18px 18px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; gap: 4px; transition: border-color .13s, background .13s; }
.option-card.horizontal { min-height: 74px; flex-direction: row; align-items: center; padding-left: 54px; }
.option-card:hover { border-color: #a8c7fa; background: #fbfdff; }
.option-card:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }
.option-card input, .check-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card strong, .option-card small { display: block; }
.option-card small { color: var(--muted); font-size: .82rem; }
.option-check { position: absolute; top: 18px; right: 18px; width: 19px; height: 19px; border: 2px solid #9aa0a6; border-radius: 50%; background: white; }
.horizontal .option-check { right: auto; left: 20px; }
.option-card input:checked + .option-check { border: 5px solid var(--blue); }
.method-option { min-height: 150px; padding: 20px 45px 20px 20px; }
.method-option-icon { display: grid; width: 43px; height: 43px; margin-bottom: 6px; place-items: center; border-radius: 11px; background: #fff4e4; }
.method-option-icon-gtm { background: #eaf2fe; }
.method-option strong { font-size: 1.08rem; }
.method-option small { line-height: 1.35; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.check-card { position: relative; display: flex; min-height: 72px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; gap: 12px; }
.check-card:hover { border-color: #a8c7fa; }
.check-card:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.check-box { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border: 2px solid #9aa0a6; border-radius: 4px; background: white; color: transparent; font-size: .7rem; font-weight: 800; }
.check-card input:checked + .check-box { border-color: var(--blue); background: var(--blue); color: white; }
.check-card strong, .check-card small { display: block; }
.check-card small { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.compact-check { min-height: 54px; align-items: center; }
.field { display: grid; margin-top: 20px; gap: 6px; }
.field small { color: var(--muted); font-size: .76rem; }
.compact-field { max-width: 390px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-grid .field { margin-top: 0; }
.inline-help { margin-top: 15px; padding: 12px 14px; border-radius: 8px; background: var(--blue-soft); font-size: .88rem; }
.choice-fieldset { display: flex; flex-wrap: wrap; margin-top: 18px; padding: 17px; border: 1px solid var(--border); border-radius: 9px; gap: 11px 22px; }
.choice-fieldset legend { padding: 0 5px; font-weight: 650; }
.choice-fieldset p { flex-basis: 100%; margin-bottom: 3px; color: var(--muted); font-size: .88rem; }
.advanced-choice { margin-top: 28px; }
.wizard-actions { display: flex; justify-content: space-between; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.wizard-error { min-height: 24px; margin-top: 18px; color: var(--red); font-size: .86rem; font-weight: 650; }

.callout { margin-top: 18px; padding: 13px 15px; border-left: 3px solid var(--blue); border-radius: 0 7px 7px 0; background: var(--blue-soft); }
.callout strong { display: block; margin-bottom: 2px; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.callout p { margin: 0 !important; font-size: .87rem !important; }
.callout-warning, .callout-mistake { border-left-color: var(--amber); background: var(--amber-soft); color: #6f4700; }
.callout-check { border-left-color: var(--green); background: var(--green-soft); color: #0d5525; }
.callout-tip { border-left-color: var(--blue); }

.result-heading { align-items: flex-end; }
.simple-result-heading h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.needs-card { margin-bottom: 18px; padding: 24px 26px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.needs-card h2 { margin-bottom: 12px; }
.needs-card .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.version-badge, .difficulty { padding: 6px 10px; border: 1px solid var(--border); border-radius: 99px; background: white; color: var(--muted); font-size: .7rem; font-weight: 750; letter-spacing: .05em; white-space: nowrap; }
.recommendation-card { position: relative; padding: 29px; border: 1px solid #a8c7fa; border-radius: 12px; background: white; box-shadow: var(--shadow); }
.recommendation-main { padding-right: 100px; }
.recommendation-main h2 { margin-bottom: 28px; font-size: clamp(1.35rem, 3vw, 2rem); }
.difficulty { position: absolute; top: 27px; right: 27px; border-color: #a8c7fa; background: var(--blue-soft); color: var(--blue-dark); }
.difficulty-easy { border-color: #a8dab5; background: var(--green-soft); color: var(--green); }
.difficulty-advanced { border-color: #f3c87b; background: var(--amber-soft); color: var(--amber); }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--border-soft); }
.summary-grid > div { padding: 17px 16px 2px 0; }
.summary-grid dt { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.summary-grid dd { margin: 4px 0 0; font-size: .87rem; font-weight: 600; }
.result-toolbar { display: flex; margin: 20px 0 34px; gap: 9px; }
.priority-legend { display: flex; margin-bottom: 32px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: white; gap: 24px; }
.priority-legend > span { display: flex; align-items: center; font-size: .72rem; font-weight: 750; gap: 6px; }
.priority-legend small { color: var(--muted); font-weight: 400; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.priority-dot.recommended { background: var(--blue); }
.priority-dot.optional { background: #9aa0a6; }
.guide-section { margin: 0 0 42px; }
.guide-section > h2 { margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.guide-steps { display: grid; gap: 10px; }
.guide-step { display: grid; grid-template-columns: 30px 34px 1fr; padding: 20px 22px; border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: 0 1px 2px rgba(60,64,67,.04); gap: 12px; transition: opacity .15s; }
.guide-step.is-complete { opacity: .58; }
.guide-step.is-complete h3 { text-decoration: line-through; }
.step-check { display: block; padding-top: 2px; cursor: pointer; }
.step-check input { position: absolute; opacity: 0; }
.step-check span { display: grid; width: 21px; height: 21px; place-items: center; border: 2px solid #9aa0a6; border-radius: 5px; color: transparent; font-size: .7rem; font-weight: 800; }
.step-check input:checked + span { border-color: var(--green); background: var(--green); color: white; }
.step-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #f1f3f4; color: var(--muted); font-size: .76rem; font-weight: 750; }
.step-content h3 { margin: 5px 0 6px; }
.step-content > p { margin-bottom: 0; color: #3c4043; font-size: .92rem; }
.simple-guide .guide-step { grid-template-columns: 30px 76px 1fr; }
.simple-guide .step-number { width: auto; height: 26px; border-radius: 5px; white-space: nowrap; }
.screen-path { display: flex; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 8px; background: #f8fafd; gap: 8px; }
.screen-path span { padding: 7px 10px; border: 1px solid #a8c7fa; border-radius: 6px; background: white; color: var(--blue-dark); font-size: .76rem; font-weight: 700; }
.screen-path i { color: #8a9096; font-style: normal; }
.advanced-note { margin-top: 34px; padding: 22px 24px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.advanced-note h2 { margin-bottom: 6px; font-size: 1.1rem; }
.advanced-note p { color: var(--muted); font-size: .88rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.ga4-state { margin: 0 0 20px; }
.ga4-handoff { margin: 24px 0; }
.step-screenshots { display: flex; flex-direction: column; align-items: flex-start; margin: 16px 0 20px; gap: 20px; }
.step-screenshot { width: min(100%, 780px); min-width: 0; margin: 0; }
.step-screenshot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.step-screenshot figcaption { display: flex; flex-direction: column; margin-top: 7px; color: var(--ink); font-size: .83rem; font-weight: 600; }
.step-screenshot figcaption small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.screenshot-placeholder { display: flex; min-height: 170px; align-items: center; justify-content: center; flex-direction: column; padding: 22px; border: 1px dashed #a8c7fa; border-radius: 8px; background: #f8fafd; color: var(--blue-dark); text-align: center; gap: 5px; }
.screenshot-placeholder > span { font-size: 1.5rem; line-height: 1; }
.screenshot-placeholder strong { font-size: .87rem; }
.screenshot-placeholder small { color: var(--muted); font-size: .72rem; }
.screenshot-image-wrap { position: relative; display: block; }
.screenshot-pointer { position: absolute; left: var(--pointer-x); top: var(--pointer-y); z-index: 1; display: flex; align-items: center; gap: 4px; transform: translate(-50%, -50%); color: #b3261e; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); pointer-events: none; }
.screenshot-pointer b { display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid #b3261e; border-radius: 50%; background: #fff; font-size: .78rem; line-height: 1; }
.screenshot-pointer small { padding: 2px 5px; border-radius: 4px; background: #fff; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.screenshot-pointer[hidden] { display: none; }
.step-source { margin: 10px 0 0; font-size: .84rem; }
.developer-note { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: #f8fafd; }
.developer-note summary { cursor: pointer; color: var(--blue-dark); font-weight: 700; }
.developer-note p { margin: 10px 0 0; font-size: .88rem; }
.developer-note pre { overflow-x: auto; margin: 10px 0 0; padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: #fff; font-size: .75rem; white-space: pre-wrap; }
.screenshot-zoom { width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.screenshot-dialog { width: min(92vw, 1100px); max-height: 90vh; padding: 16px; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.screenshot-dialog::backdrop { background: rgba(32, 33, 36, .75); }
.screenshot-dialog-image { position: relative; display: table; max-width: 100%; margin: 28px auto 0; }
.screenshot-dialog img { display: block; max-width: 100%; max-height: 76vh; object-fit: contain; }
.screenshot-dialog p { margin: 9px 0 0; color: var(--muted); font-size: .84rem; text-align: center; }
.screenshot-dialog-close { position: absolute; top: 7px; right: 9px; width: 32px; height: 32px; border: 0; border-radius: 5px; background: white; cursor: pointer; font-size: 1.5rem; }
.gtm-model { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px; background: white; gap: 6px; }
.gtm-model span { display: grid; min-width: 88px; padding: 6px 8px; border: 1px solid #a8c7fa; border-radius: 6px; background: var(--blue-soft); text-align: center; }
.gtm-model strong { color: var(--blue-dark); font-size: .69rem; letter-spacing: .025em; }
.gtm-model small { color: var(--muted); font-size: .68rem; }
.gtm-model i { color: #8a9096; font-style: normal; }
.datalayer-examples { margin-top: 18px; padding: 15px; border: 1px solid var(--border-soft); border-radius: 8px; background: #f8fafd; }
.datalayer-examples p { margin: 0 0 9px; font-size: .84rem; }
.datalayer-examples p:last-child { margin-bottom: 0; }
.datalayer-examples pre { margin: 9px 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: white; color: var(--ink); }
.datalayer-builder { margin-top: 18px; padding: 16px; border: 1px solid #a8c7fa; border-radius: 9px; background: #f8fafd; }
.datalayer-builder h4 { margin: 0 0 5px; font-size: .98rem; }
.datalayer-builder p { margin: 0 0 12px; color: var(--muted); font-size: .83rem; }
.datalayer-builder-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.datalayer-builder-fields label { color: var(--muted); font-size: .74rem; font-weight: 700; }
.datalayer-builder-fields input { margin-top: 4px; }
.datalayer-builder-output { display: flex; align-items: center; justify-content: space-between; margin: 11px 0 5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; gap: 9px; }
.datalayer-builder-output code { overflow-wrap: anywhere; font-size: .85rem; }
.datalayer-builder > small { color: var(--muted); font-size: .72rem; }
.priority { display: inline-block; color: var(--green); font-size: .64rem; font-weight: 800; letter-spacing: .065em; }
.priority-recommended { color: var(--blue-dark); }
.priority-optional { color: var(--muted); }
.linear-diagram { flex-direction: column; align-items: stretch; max-width: 310px; margin-top: 18px; }
.linear-diagram i { align-self: center; }
.code-wrap { overflow: hidden; margin-top: 18px; border: 1px solid #3c4043; border-radius: 9px; background: #202124; color: #e8eaed; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #3c4043; background: #292a2d; font-size: .75rem; font-weight: 700; }
.code-head small { margin-left: 4px; color: #9aa0a6; font-weight: 500; }
.copy-button { padding: 4px 8px; border: 1px solid #5f6368; border-radius: 5px; background: transparent; color: #e8eaed; cursor: pointer; font-size: .7rem; }
.code-warning { margin: 0 !important; padding: 9px 12px; border-bottom: 1px solid #5f4b18; background: #352d1a; color: #fdd663 !important; font-size: .75rem !important; }
pre { margin: 0; padding: 16px; overflow-x: auto; font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.result-actions { margin-top: 55px; padding: 28px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.result-actions h2 { margin-bottom: 15px; }
.result-actions > div { display: flex; flex-wrap: wrap; gap: 9px; }

.page-heading { max-width: 770px; margin-bottom: 32px; }
.debug-flow { display: grid; grid-template-columns: 1.5fr .8fr; padding: 28px; border: 1px solid var(--border); border-radius: 11px; background: white; gap: 38px; }
.debug-flow-copy ol { display: grid; margin: 20px 0 0; padding: 0; list-style: none; gap: 10px; }
.debug-flow-copy li { display: flex; gap: 14px; }
.debug-flow-copy li strong { flex: 0 0 190px; color: var(--blue-dark); font-size: .77rem; }
.debug-flow-copy li span { color: var(--muted); font-size: .87rem; }
.vertical-flow { flex-direction: column; }
.vertical-flow span { width: 190px; }
.filter-row { margin: 30px 0 14px; }
.search-field { display: block; max-width: 560px; }
.search-field input { padding-left: 14px; background: white; }
.trouble-list { display: grid; gap: 8px; }
.trouble-card { border: 1px solid var(--border); border-radius: 9px; background: white; }
.trouble-card summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; cursor: pointer; list-style: none; gap: 18px; }
.trouble-card summary::-webkit-details-marker { display: none; }
.trouble-card summary strong, .trouble-card summary small { display: block; }
.trouble-card summary small { margin-top: 3px; color: var(--muted); font-size: .8rem; }
.trouble-card summary i { color: var(--blue); font-style: normal; font-size: 1.25rem; }
.trouble-card[open] summary i { transform: rotate(45deg); }
.trouble-content { padding: 0 20px 20px 64px; }
.checklist { display: grid; margin: 0; padding: 0; list-style: none; gap: 7px; }
.checklist li { position: relative; padding-left: 25px; color: #3c4043; font-size: .9rem; }
.checklist li::before { position: absolute; top: 1px; left: 0; content: '□'; color: var(--blue); font-size: 1.05rem; }
.two-column-guides { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; gap: 14px; }
.info-card { padding: 25px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.number-list { display: grid; margin: 0; padding-left: 22px; gap: 9px; color: #3c4043; font-size: .9rem; }
.ui-badge { display: inline-block; padding: 1px 6px; border: 1px solid #c4d7f7; border-radius: 5px; background: var(--blue-soft); color: var(--blue-dark); font-size: .72em; font-weight: 700; white-space: nowrap; }

.identify-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.identify-checker, .inspection-card { padding: 26px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.identify-checker > .check-card { margin-top: 9px; }
.detection-result { margin-top: 20px; padding: 16px; border: 1px solid #a8c7fa; border-radius: 8px; background: var(--blue-soft); }
.detection-result strong { color: var(--blue-dark); font-size: .72rem; text-transform: uppercase; }
.detection-result p { margin: 4px 0 0; font-size: .9rem; }
.id-cheat-card { margin-top: 22px; }
.id-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0; gap: 10px; }
.id-grid > div { display: grid; padding: 14px; border: 1px solid var(--border); border-radius: 8px; gap: 7px; }
.id-grid span { color: var(--muted); font-size: .75rem; }
.id-grid code { color: var(--blue-dark); font-size: 1rem; font-weight: 700; }
.id-grid button, .inline-code-copy button { width: max-content; padding: 2px 7px; border: 1px solid var(--border); border-radius: 5px; background: white; color: var(--muted); cursor: pointer; font-size: .66rem; }

.sticky-filter { position: sticky; z-index: 8; top: 68px; padding: 12px 0; background: var(--canvas); }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glossary-card { padding: 22px; border: 1px solid var(--border); border-radius: 10px; background: white; }
.term-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.term-head h2 { margin: 0; }
.term-head > span { color: var(--muted); font-size: .74rem; text-align: right; }
.glossary-card dl { display: grid; margin: 0; gap: 11px; }
.glossary-card dl > div { display: grid; grid-template-columns: 115px 1fr; gap: 10px; }
.glossary-card dt { color: var(--muted); font-size: .69rem; font-weight: 700; text-transform: uppercase; }
.glossary-card dd { margin: 0; font-size: .84rem; }
.glossary-card dd code { color: var(--blue-dark); font-size: .78rem; }
.inline-code-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.toast { position: fixed; z-index: 50; right: 22px; bottom: 22px; padding: 10px 14px; border-radius: 7px; background: #292a2d; color: white; font-size: .82rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.copy-buffer { position: fixed; left: -9999px; opacity: 0; }

@media (max-width: 860px) {
    .main-nav { display: none; }
    .dashboard-grid, .method-grid, .flow-card, .debug-flow, .identify-layout { grid-template-columns: 1fr; }
    .method-card { min-height: 0; }
    .conversion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-grid { grid-template-columns: repeat(2, 1fr); }
    .priority-legend { flex-direction: column; gap: 7px; }
    .vertical-flow { display: none; }
    .glossary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    body { font-size: 15px; }
    .header-inner { min-height: 60px; padding: 0 16px; }
    .brand strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand small { display: none; }
    .page-shell { width: min(100% - 28px, 1120px); padding: 34px 0 55px; }
    .wizard { padding: 22px 16px; }
    .wizard-head, .result-heading { display: block; }
    .wizard-head .button, .version-badge { margin-top: 15px; }
    .option-grid, .check-grid, .field-grid, .two-column-guides, .id-grid, .needs-card .check-list { grid-template-columns: 1fr; }
    .datalayer-builder-fields { grid-template-columns: 1fr; }
    .dashboard-card { min-height: 135px; padding: 19px; }
    .method-card { padding: 22px; }
    .method-card-head { gap: 12px; }
    .flow-card, .debug-flow { padding: 20px; }
    .flow-diagram { flex-direction: column; }
    .summary-grid { grid-template-columns: 1fr; }
    .recommendation-main { padding-right: 0; }
    .difficulty { position: static; display: inline-block; margin-bottom: 18px; }
    .guide-step { grid-template-columns: 25px 1fr; padding: 17px 14px; gap: 8px; }
    .step-number { display: none; }
    .result-toolbar, .result-actions > div { align-items: stretch; flex-direction: column; }
    .trouble-content { padding-left: 20px; }
    .debug-flow-copy li { display: block; }
    .debug-flow-copy li strong, .debug-flow-copy li span { display: block; }
    .glossary-card dl > div { grid-template-columns: 1fr; gap: 2px; }
    .sticky-filter { top: 60px; }
}

@media print {
    @page { margin: 14mm; }
    body { background: white; color: black; font-size: 10pt; }
    .no-print, .site-header, .site-footer, .toast { display: none !important; }
    .page-shell { width: 100%; min-height: 0; margin: 0; padding: 0; }
    .result-heading { margin-bottom: 14px; }
    .result-heading .eyebrow { color: #333; }
    .recommendation-card { padding: 16px; box-shadow: none; break-inside: avoid; }
    .summary-grid { grid-template-columns: repeat(4, 1fr); }
    .guide-section { margin-bottom: 22px; }
    .guide-step { display: block; padding: 12px 14px; box-shadow: none; break-inside: avoid; }
    .step-number { display: none; }
    .priority-legend { padding: 9px; }
    .code-wrap { white-space: pre-wrap; }
    pre { overflow: visible; white-space: pre-wrap; word-break: break-word; }
    .linear-diagram { max-width: 230px; }
}