:root{
  --bg:#f5f5f3;--bg2:#ffffff;--panel:rgba(255,255,255,.66);--panel-solid:#fff;--line:rgba(17,17,26,.08);--line2:rgba(17,17,26,.14);
  --text:#16161a;--text2:#4a4a52;--mute:#8b8b94;--accent:#5b5bd6;--accent-soft:rgba(91,91,214,.10);--ok:#1f8a4c;--ok-soft:rgba(31,138,76,.11);
  --warn:#b26b00;--warn-soft:rgba(214,140,0,.13);--bad:#c4363a;--bad-soft:rgba(196,54,58,.10);--hover:rgba(17,17,26,.04);
  --shadow:0 1px 1px rgba(0,0,0,.02),0 8px 30px rgba(20,20,40,.06);--blur:saturate(1.8) blur(22px);--r:16px;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0c0d10;--bg2:#121317;--panel:rgba(30,31,37,.55);--panel-solid:#17181d;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --text:#ececf1;--text2:#b6b6c0;--mute:#80808c;--accent:#8b8bff;--accent-soft:rgba(139,139,255,.14);--ok:#4ccb7f;--ok-soft:rgba(76,203,127,.14);
  --warn:#f0b44a;--warn-soft:rgba(240,180,74,.14);--bad:#ff6b6f;--bad-soft:rgba(255,107,111,.13);--hover:rgba(255,255,255,.05);
  --shadow:0 1px 1px rgba(0,0,0,.2),0 10px 40px rgba(0,0,0,.35);color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:300 14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 15% 10%,rgba(120,120,255,.13),transparent 70%),radial-gradient(35% 30% at 90% 20%,rgba(255,120,170,.10),transparent 70%),radial-gradient(40% 40% at 70% 95%,rgba(80,200,200,.10),transparent 70%)}
a{color:inherit;text-decoration:none}
h1{font-size:26px;font-weight:300;letter-spacing:-.02em;margin:0}
h2{font-size:16px;font-weight:500;margin:0 0 12px;letter-spacing:-.01em}
h3{font-size:13px;font-weight:500;margin:0 0 8px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.muted{color:var(--mute)}
.layout{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:18px 12px;border-right:1px solid var(--line);background:var(--panel);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);display:flex;flex-direction:column;gap:2px;overflow:auto}
.brand{display:flex;gap:8px;align-items:center;padding:6px 10px 18px;font-weight:500;letter-spacing:-.025em;font-size:16px;text-transform:uppercase;white-space:nowrap}
.brand i{width:10px;height:10px;background:var(--text);display:inline-block;flex:none}
.brand .tag{margin-left:auto;font-size:10.5px;letter-spacing:.08em;font-weight:500;color:var(--mute);border:1px solid var(--line2);border-radius:6px;padding:1px 6px}
.side a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:10px;color:var(--text2);font-weight:400;font-size:13.5px}
.side a:hover{background:var(--hover);color:var(--text)}
.side a.on{background:var(--panel-solid);color:var(--text);box-shadow:var(--shadow);font-weight:500}
.side a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.85}
.side .sep{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:16px 11px 6px}
.side .count{margin-left:auto;font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:1px 8px;font-weight:500}
.side .foot{margin-top:auto;padding:12px 10px 4px;font-size:12px;color:var(--mute)}
.main{min-width:0}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 28px;border-bottom:1px solid var(--line);background:var(--panel);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.top .search{flex:1;max-width:520px;position:relative}
.top .search input{padding-left:36px;background:var(--hover);border-color:transparent}
.top .search svg{position:absolute;left:12px;top:10px;width:16px;stroke:var(--mute);fill:none;stroke-width:1.8}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--panel-solid);display:grid;place-items:center;cursor:pointer;color:var(--text2)}
.iconbtn svg{width:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#8b8bff,#e8607a);color:#fff;display:grid;place-items:center;font-weight:500;font-size:12px}
.page{padding:26px 28px 60px;max-width:1320px}
.ph{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.ph .sp{flex:1}
.back{color:var(--mute);font-size:13px;display:inline-flex;gap:6px;align-items:center}
.card{background:var(--panel);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card.flush{padding:0;overflow:hidden}
.card + .card{margin-top:16px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media(max-width:1100px){.split,.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.layout{grid-template-columns:1fr}.side{display:none}.split,.g2,.g3,.g4{grid-template-columns:1fr}}
.kpi .l{font-size:12.5px;color:var(--mute)}.kpi .v{font-size:28px;font-weight:300;letter-spacing:-.02em;margin-top:4px}
.delta{font-size:12px;font-weight:500;padding:2px 7px;border-radius:999px}
.delta.up{color:var(--ok);background:var(--ok-soft)}.delta.down{color:var(--bad);background:var(--bad-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);background:var(--panel-solid);color:var(--text);font:500 13px Inter,sans-serif;cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--text2)}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg2)}
.btn.primary:hover{opacity:.88}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--bad)}
.btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn svg{width:15px;stroke:currentColor;fill:none;stroke-width:1.8}
input,select,textarea{width:100%;font:300 14px Inter,sans-serif;color:var(--text);background:var(--panel-solid);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:90px;line-height:1.55}
input[type=checkbox]{width:auto}
input[type=range]{padding:0;border:0;box-shadow:none;accent-color:var(--accent)}
label.f{display:block;margin-bottom:14px}
label.f > span{display:block;font-size:12.5px;color:var(--text2);margin-bottom:6px;font-weight:400}
label.f small{display:block;color:var(--mute);margin-top:5px;font-size:12px}
.row{display:flex;gap:10px;align-items:center}
.row > *{min-width:0}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:500;color:var(--mute);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:var(--hover)}
.tbl .r{text-align:right}
.thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--hover);border:1px solid var(--line);flex:none}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:999px;background:var(--hover);color:var(--text2);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.acc{background:var(--accent-soft);color:var(--accent)}
.tabs{display:flex;gap:4px;padding:4px;background:var(--hover);border-radius:11px;width:max-content;max-width:100%;overflow:auto}
.tabs button{border:0;background:none;padding:6px 12px;border-radius:8px;font:400 13px Inter;color:var(--text2);cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--panel-solid);color:var(--text);box-shadow:var(--shadow);font-weight:500}
.empty{padding:48px 20px;text-align:center;color:var(--mute)}
.chart{width:100%;height:220px}
.chart path.area{fill:var(--accent-soft)}.chart path.line{fill:none;stroke:var(--accent);stroke-width:2}
.chart text{fill:var(--mute);font-size:10.5px}
.chart line{stroke:var(--line)}
.funnel{display:grid;gap:10px}
.funnel .bar{height:8px;border-radius:9px;background:var(--hover);overflow:hidden}.funnel .bar i{display:block;height:100%;background:var(--accent);border-radius:9px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.dl dt{color:var(--mute)}.dl dd{margin:0;text-align:right}
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.imgs .im{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--hover)}
.imgs .im img{width:100%;height:100%;object-fit:cover}
.imgs .im .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:13px;display:none}
.imgs .im .mv{position:absolute;bottom:5px;left:5px;display:none;gap:3px}
.imgs .im .mv button{border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:6px;cursor:pointer;font-size:11px;padding:2px 6px}
.imgs .im:hover .x,.imgs .im:hover .mv{display:flex}
.imgs .im.first{outline:2px solid var(--accent);outline-offset:-2px}
.drop{border:1.5px dashed var(--line2);border-radius:12px;display:grid;place-items:center;aspect-ratio:1;cursor:pointer;color:var(--mute);font-size:12px;text-align:center}
.drop:hover{border-color:var(--accent);color:var(--accent)}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line2);vertical-align:-2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 4px;background:var(--panel-solid)}
.serp{font-family:Arial,sans-serif;padding:14px;border-radius:12px;background:var(--panel-solid);border:1px solid var(--line)}
.serp .u{font-size:12px;color:#188038}.serp .t{font-size:18px;color:#1a0dab;margin:2px 0}.serp .d{font-size:13px;color:#4d5156}
:root[data-theme=dark] .serp .t{color:#8ab4f8}:root[data-theme=dark] .serp .d{color:#bdc1c6}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--text);color:var(--bg2);padding:11px 18px;border-radius:12px;font-size:13.5px;z-index:200;transition:.3s;box-shadow:var(--shadow);visibility:hidden;max-width:90vw}
.toast.show{transform:translateX(-50%);visibility:visible}
.toast.err{background:var(--bad);color:#fff}
.modal{position:fixed;inset:0;background:rgba(10,10,20,.32);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal .card{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--panel-solid)}
.studio-prev{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.studio-prev .s{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-solid)}
.studio-prev img{width:100%;display:block}
.studio-prev .cap{padding:8px 10px;font-size:12px}
@media(max-width:1100px){.studio-prev{grid-template-columns:1fr 1fr}}
.composer{position:relative;user-select:none}
.composer img{width:100%;display:block;border-radius:12px}
.composer .pt{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:move;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.composer svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.composer polygon{fill:rgba(91,91,214,.18);stroke:var(--accent);stroke-width:2}
.setup li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.setup li:last-child{border:0}
.setup .dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;font-size:11px;flex:none}
.setup .dot.done{background:var(--ok);border-color:var(--ok);color:#fff}
.spin{width:16px;height:16px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:sp 0.8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.switch{position:relative;width:36px;height:20px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch i{position:absolute;inset:0;background:var(--line2);border-radius:99px;cursor:pointer;transition:.2s}
.switch i::before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::before{transform:translateX(16px)}
.hint{font-size:12.5px;color:var(--text2);background:var(--accent-soft);border-radius:10px;padding:10px 12px;line-height:1.55}
.hint.warn{background:var(--warn-soft)}
pre.code{background:var(--hover);border-radius:10px;padding:12px;overflow:auto;font-size:12px;max-height:300px}