/* Studio edition: a separate visual layer, with the original controls intact. */
:root{--ink:#10201c;--canvas:#f5f7f3;--paper:#fff;--line:#dce4dc;--muted:#718078;--mint:#d8ffad;--green:#176349;--deep:#0b2820;--purple:#7756ea}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--canvas);color:var(--ink)}
.shell{display:block}
.rail{display:flex;flex-direction:row;align-items:center;gap:32px;padding:19px 4%;background:var(--paper);border-bottom:1px solid var(--line);color:var(--ink)}
.brand{white-space:nowrap;padding:0;font-size:18px;letter-spacing:-.6px}
.mark{width:36px;height:36px;border-radius:50%;background:#176349;color:white;font-size:12px;box-shadow:4px 4px 0 #dff3e4}
.rail>div:not(.brand):not(.rail-footer){display:flex;align-items:center;gap:12px}
.nav-label{display:none}.nav{display:flex;gap:3px}.nav button{padding:9px 11px;font-size:12px;font-weight:600;white-space:nowrap;color:#718078;border-radius:7px}
.nav button.active,.nav button:hover{background:#ebf8ef;color:#176349}
.rail-footer{margin:0 0 0 auto;background:transparent;border:0;padding:0;font-size:10px;max-width:135px;color:#718078}.rail-footer strong{color:var(--ink);font-size:11px}
main{max-width:1500px;padding:27px 4% 60px}
.topbar{margin-bottom:40px}.crumb{font-size:12px}.top-actions{gap:8px}
.icon-btn,.outline,.primary{border-radius:6px;font-size:12px;padding:10px 15px;transition:background .15s,transform .15s}
.primary{background:#176349;border-color:#176349;box-shadow:0 3px 0 #0b2820}.primary:hover{background:#0b2820;transform:translateY(-1px)}
.outline:hover,.icon-btn:hover{background:#edf1ed}
.hero{margin-bottom:30px;align-items:center}.eyebrow{font-size:10px;letter-spacing:.19em;color:#176349}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-1.8px;line-height:1.12;margin:10px 0 13px}
.hero p{font-size:13px;line-height:1.7;max-width:600px}.status{border:1px solid #b9d7c1;background:#e5f6e9;color:#277141;font-size:11px;padding:8px 13px}
.template-row{gap:0;background:#edf1ed;border:1px solid var(--line);border-radius:10px;padding:5px;margin-bottom:25px;overflow-x:auto}
.template{flex:1;min-width:150px;background:transparent;border:1px solid transparent;border-radius:6px;padding:14px 18px;position:relative}
.template.active{border-color:#dce4dc;background:var(--paper);box-shadow:0 2px 5px #10201c0c}
.template span{font-size:11px;margin-top:4px}.template .template-title{font-size:13px;font-weight:700;letter-spacing:-.15px;color:#10201c}.template.active .template-title{color:#176349}
.template.build{background:transparent;border-style:solid;border-left-color:#dce4dc}.template:hover{background:#fff}
.modebar{border:0;background:transparent;padding:0 0 14px;gap:12px;border-radius:0;flex-wrap:wrap}
.mode-set{border:1px solid #dce4dc;background:#edf1ed;padding:3px;border-radius:7px}.mode{padding:7px 17px;border-radius:4px}.mode.active{background:var(--paper);box-shadow:0 1px 3px #10201c21;color:#176349}
.modebar-right{gap:16px;flex-wrap:wrap}.view-toggle{font-size:11px;font-weight:500}.delete-template{border-color:#e2c3bf;border-radius:5px;background:transparent}
.workspace{grid-template-columns:minmax(0,1fr) 350px;gap:22px;border:0;background:transparent;border-radius:0;overflow:visible;align-items:start}
.form-zone{background:var(--paper);padding:28px;border:1px solid var(--line);border-radius:10px;box-shadow:0 5px 18px #10201c04}
.section-title{gap:12px;margin-bottom:25px}.section-title h2{font-size:16px;letter-spacing:-.4px;font-weight:650}.section-title span{font-size:10px}
.field-grid{gap:23px 22px}.field label{font-size:11px;font-weight:650;letter-spacing:.02em;margin-bottom:9px}
.control{border:1px solid #dce4dc;border-radius:6px;background:#fff;padding:11px 12px;font-size:12px;min-height:40px}
.control:focus{border-color:#176349;box-shadow:0 0 0 3px #dff3e4}.control::placeholder{color:#718078}
.chips{gap:6px}.chip{padding:7px 10px;border-radius:5px;background:#f5f7f3;border-color:#dce4dc;color:#718078;font-weight:500;font-size:11px}.chip:hover{border-color:#9dceb0}.chip.selected{background:#ebf8ef;border-color:#9dceb0;color:#176349;box-shadow:inset 0 -1px 0 #dff3e4}
.helper{font-size:10px;line-height:1.5}.req{color:#ce554a}
.summary{border-radius:10px;background:#0b2820;color:#e7f2e9;padding:25px;box-shadow:0 10px 25px #0b282013;position:sticky;top:20px}
.summary .section-title{margin-bottom:25px}.summary .section-title h2{font-size:17px}.summary .section-title span{color:#d8ffad;font-size:9px;border:1px solid #285447;padding:5px 7px;border-radius:4px;letter-spacing:.05em}
.formula{background:#163a30;border:1px solid #285447;border-radius:6px;padding:15px;margin-bottom:14px}.formula small{font-size:9px;color:#b9ccbe;letter-spacing:.13em}.formula code{color:#bed4c5;font-size:12px;font-weight:400;line-height:1.7}
.copy-line{margin-top:19px}.copy-line .control{min-width:0;background:#0b2820;border-color:#285447;color:#e7f2e9;font-size:11px}.copy{padding:12px 14px;border-radius:5px;background:#d8ffad;color:#10201c;font-size:12px}.copy:disabled{opacity:.5;cursor:not-allowed}
.checklist{margin-top:24px;border-top:1px solid #285447;padding-top:12px}.check{color:#b9ccbe;font-size:11px;align-items:flex-start;line-height:1.6}.dot{flex-shrink:0;background:#c5d2c7;margin-top:5px;width:6px;height:6px}.dot.good{background:#45a267}
.saving{background:transparent;border:0;border-top:1px solid #285447;border-radius:0;padding:17px 0 0;margin-top:20px;color:#b9ccbe;font-size:11px;line-height:1.65}.saving strong{color:#bed4c5;font-weight:600}
.visualizer{background:#163a30;border-color:#285447;border-radius:6px}.visualizer h3{color:#bed4c5}.path span{background:#0b2820;border-color:#285447;color:#bed4c5;font-size:10px}
.studio{border:1px solid var(--line);border-radius:10px;padding:28px}.studio-note{background:#f8faf7;border-radius:7px;padding:23px}.studio-note h3{font-size:18px;font-family:Georgia,serif;font-weight:400}.studio-note p{line-height:1.7}.rule{background:#fff;border-radius:6px;padding:14px 12px}.rule .tag{background:#eef5ee;color:#477259;border-radius:4px}.rule button{color:#176349;font-size:11px}.add-rule{border-color:#9dceb0;border-radius:5px;background:#fff;font-size:12px}
.table{border-radius:8px;table-layout:fixed}.table th{background:#f4f7f3;color:#718078;font-size:10px;padding:15px}.table td{padding:17px 15px;overflow-wrap:anywhere;line-height:1.6}.pill{background:#e9f7ed;color:#267047;border-radius:4px}.empty{padding:65px 20px;background:#fff;border-color:#dce4dc;border-radius:9px}.toast{background:#10201c;box-shadow:0 6px 24px #0b282030;border:1px solid #285447;border-radius:6px;max-width:calc(100vw - 32px)}
button:focus-visible{outline:3px solid #176349;outline-offset:3px}input[type=checkbox]{accent-color:#176349}
@media(min-width:1200px){.template-row{counter-reset:templates}.template:not(.build){padding-left:45px}.template:not(.build)::before{counter-increment:templates;content:"0" counter(templates);position:absolute;top:17px;left:14px;font:10px ui-monospace,monospace;color:#718078}}
@media(max-width:1200px){.rail{gap:20px;flex-wrap:wrap}.rail-footer{display:none}.rail>div:not(.brand):not(.rail-footer){gap:0}.nav button{padding:8px;font-size:11px}.workspace{grid-template-columns:minmax(0,1fr) 315px}.summary{padding:20px}.form-zone{padding:22px}}
@media(max-width:950px){.rail{display:flex;gap:12px;padding:17px 4%}.brand{width:100%;margin-bottom:5px}.workspace{grid-template-columns:1fr}.summary{position:static}.hero{align-items:flex-start}.field-grid,.studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{margin-bottom:27px}.rail>div:not(.brand):not(.rail-footer){max-width:100%;overflow-x:auto}}
@media(max-width:600px){main{padding:20px 16px 40px}.rail{padding:16px}.topbar{align-items:flex-start;gap:15px;flex-direction:column}.top-actions{width:100%}.top-actions button{flex:1;padding:9px}.hero{gap:17px}.hero h1{font-size:37px}.hero p{font-size:12px}.field-grid,.studio-grid{grid-template-columns:1fr}.modebar-right{gap:10px}.form-zone,.studio{padding:20px 16px}.section-title{align-items:flex-start}.template{min-width:170px}.grid-row{grid-template-columns:1fr;gap:4px}.grid-row label{padding:0}.table td,.table th{padding:10px 7px;font-size:10px}.rule{flex-wrap:wrap}.rule .tag{margin-left:0}.toast{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Persistent light/dark theme; shared by the builder and tracker. */
.campaign-card{border:1px solid var(--line);background:var(--paper);border-radius:10px;margin-bottom:14px;overflow:hidden}
.rule-editor{flex-wrap:wrap}.rule-editor>.control{flex:1 1 160px}.rule-editor>button{margin-left:0}.rule-editor button:disabled{opacity:.4;cursor:default}.studio-actions{flex-wrap:wrap}#rulesPreview{width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}#helpDialog{max-width:620px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:26px}#helpDialog::backdrop{background:#0008}#helpDialog li{margin-bottom:10px}.visualizer .path span{overflow-wrap:anywhere;max-width:100%}
.campaign-card summary{cursor:pointer;padding:20px;overflow-wrap:anywhere}
.campaign-card summary strong{font-size:16px}.campaign-card summary span{display:block;margin:6px 0 0 20px;font-size:12px;color:var(--muted)}
.campaign-card summary:focus-visible{outline:3px solid var(--green);outline-offset:-4px}
.campaign-link{padding:18px 20px;border-top:1px solid var(--line)}.campaign-link h3{font-size:13px;margin:0 0 6px}.campaign-link p{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.campaign-link textarea{font:12px/1.6 monospace;resize:vertical}.campaign-link a{display:inline-block;text-decoration:none;margin-top:10px}
:root{color-scheme:light}
.top-actions{flex-wrap:wrap}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.theme-track{display:inline-block;width:30px;height:18px;flex-shrink:0;border-radius:20px;background:#718078;padding:3px}
.theme-track::after{content:"";display:block;width:12px;height:12px;border-radius:50%;background:white;transition:transform .15s}
.theme-toggle[aria-checked=true] .theme-track{background:#70cfa4}
.theme-toggle[aria-checked=true] .theme-track::after{transform:translateX(12px);background:#10201c}
html[data-theme=dark]{color-scheme:dark;--ink:#e5eee8;--canvas:#101915;--paper:#19251f;--line:#354a3d;--muted:#adbbb1;--green:#8cdbb4;--mint:#d8ffad;--deep:#0b2018}
html[data-theme=dark] :is(.studio,.studio-note,.rule,.empty,.table,.control,.chip,.template.active,.mode.active,.add-rule,.tracker-results,.tracker-detail,.tracker-detail textarea,.tracker-node){background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.template-row,.mode-set,.table th,.tracker-campaign){background:#22372b;border-color:var(--line);color:var(--ink)}
html[data-theme=dark] :is(.nav button,.template span,.template:not(.build)::before,.section-title span,.helper,.view-toggle,.studio-note p,.rule small,.table th,.tracker-count,.tracker-note,.tracker-legend,.tracker-url span,.tracker-detail h3){color:var(--muted)}
html[data-theme=dark] :is(.template .template-title,.template.active .template-title,.eyebrow,.rule button,.tracker-list-link){color:var(--green)}
html[data-theme=dark] :is(.nav button.active,.nav button:hover,.chip.selected,.chip:hover,.template:hover,.outline:hover,.icon-btn:hover,.tracker-url:hover,.tracker-url[aria-pressed=true]){background:#294a37;color:#c5f2d9;border-color:#67967b}
html[data-theme=dark] :is(.status,.pill,.rule .tag){background:#294a37;color:#c5f2d9;border-color:#67967b}
html[data-theme=dark] .primary{background:#8cdbb4;color:#10201c;border-color:#8cdbb4}
html[data-theme=dark] .primary:hover{background:#b4edcc}
html[data-theme=dark] .delete-template{background:#382422;color:#ffb5a9;border-color:#785048}
html[data-theme=dark] .control::placeholder{color:#adbbb1}
html[data-theme=dark] .template.active{box-shadow:0 0 0 1px #67967b}
html[data-theme=dark] .tracker-canvas{background-color:var(--canvas);background-image:radial-gradient(circle,#354a3d 1px,transparent 1px)}
html[data-theme=dark] .tracker-canvas circle{stroke:#354a3d}
html[data-theme=dark] .tracker-canvas line{stroke:#67967b}
html[data-theme=dark] .tracker-hub{background:var(--deep);color:var(--mint);border-color:#67967b}
html[data-theme=dark] :is(button:focus-visible,.tracker-scroll:focus-visible){outline-color:#8cdbb4}
html[data-theme=dark] .control:focus{border-color:#8cdbb4;box-shadow:0 0 0 3px #294a37}
html[data-theme=dark] .theme-toggle[aria-checked=true]{color:#c5f2d9}
@media(max-width:600px){.top-actions .theme-toggle{flex:1 0 100%}}