/* Bliink app — shell, components, editor. Page (visitor) styles live in page.css. */
:root{
  --canvas:#F3F4F8;--surface:#FFFFFF;--surface-2:#F7F8FB;--ink:#181A2B;--ink-2:#4A4E66;--mute:#7C8098;--line:#E4E6EE;--line-2:#EEF0F5;
  --violet:#5B4BFF;--violet-ink:#FFFFFF;--violet-soft:#ECEAFF;--coral:#FF4F6D;--green:#12B76A;--green-soft:#E3F7EE;--amber:#B7791F;--amber-soft:#FFF4DB;--red:#D92D20;--red-soft:#FEECEB;
  --side:#14162B;--side-ink:#C9CBDB;--side-mute:#7D809A;--side-hover:#1F2240;--side-on:#2A2D55;
  --r-sm:8px;--r:12px;--r-lg:16px;--sh:0 1px 2px rgba(20,22,43,.06);--sh-pop:0 18px 50px -12px rgba(20,22,43,.35);
  --font:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --canvas:#0F1020;--surface:#17192E;--surface-2:#1C1F38;--ink:#ECEDF6;--ink-2:#B9BCD3;--mute:#868AA6;--line:#2A2D4A;--line-2:#22253F;
  --violet:#7B6DFF;--violet-soft:#26244F;--green-soft:#143528;--amber-soft:#3A2E14;--red-soft:#3C1A1E;
  --side:#0B0C1A;--side-hover:#17192E;--side-on:#24264A;--sh:0 1px 2px rgba(0,0,0,.4);color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 14.5px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.kpi b,.tbl .num,.chart,.bl-row b{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
a:hover{color:var(--violet)}
h1,h2,h3{margin:0;letter-spacing:-.015em;line-height:1.2}
h1{font-size:1.45rem;font-weight:700}h2{font-size:1.1rem;font-weight:650}h3{font-size:.98rem;font-weight:650}
p{margin:0}
code{font-size:.85em;background:var(--surface-2);border:1px solid var(--line);padding:.05rem .35rem;border-radius:6px}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.muted{color:var(--mute)}.small{font-size:.83rem}.center{text-align:center}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hp{position:absolute!important;left:-9999px}

/* ---------- controls ---------- */
input,select,textarea{font:inherit;color:var(--ink);width:100%;padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:#C9CCDA}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
input[type=checkbox]{width:auto;accent-color:var(--violet)}input[type=color]{width:44px;height:40px;padding:3px;flex:none}
label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
label.check{display:flex;align-items:center;gap:.55rem;font-weight:500}
.hint{font-weight:400;color:var(--mute);font-size:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:38px;padding:0 1rem;border-radius:var(--r-sm);border:1px solid transparent;background:var(--violet);color:var(--violet-ink);font:600 .88rem var(--font);cursor:pointer;white-space:nowrap;transition:filter .15s}
.btn:hover{filter:brightness(1.08);color:var(--violet-ink)}
.btn svg{width:16px;height:16px}
.btn.small{min-height:32px;padding:0 .75rem;font-size:.82rem}
.btn.wide{width:100%}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:#C9CCDA;color:var(--ink)}
.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.icon{width:36px;padding:0}
.linkish{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0}
.slug{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.slug:focus-within{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.slug>span{padding-left:.75rem;color:var(--mute);white-space:nowrap}
.slug input{border:0;padding-left:1px;box-shadow:none!important}
.switch{position:relative;display:inline-block;width:34px;height:20px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .15s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked+span{background:var(--violet)}
.switch input:checked+span::after{transform:translateX(14px)}
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .5rem;border-radius:99px;font-size:.75rem;font-weight:600;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tag.ok{background:var(--green-soft);color:var(--green);border-color:transparent}
.tag.warn{background:var(--red-soft);color:var(--red);border-color:transparent}
.tag.wait{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.tag.violet{background:var(--violet-soft);color:var(--violet);border-color:transparent}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:18px 12px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:.1rem;padding:4px 10px 18px;font-weight:800;font-size:1.4rem;letter-spacing:-.04em;color:#fff}
.brand:hover{color:#fff}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--coral);margin-top:12px;animation:blink 3.2s ease-in-out 1 .6s}
@keyframes blink{0%,100%{transform:scaleY(1)}48%,52%{transform:scaleY(.1)}}
.nav-group{display:grid;gap:2px;margin-bottom:14px}
.nav-label{padding:10px 10px 6px;font-size:.74rem;color:var(--side-mute);font-weight:600}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:var(--r-sm);color:var(--side-ink);font-weight:500}
.nav a:hover{background:var(--side-hover);color:#fff}
.nav a.on{background:var(--side-on);color:#fff}
.nav svg{width:18px;height:18px;flex:none;opacity:.85}
.nav .count{margin-left:auto;font-size:.75rem;color:var(--side-mute)}
.side-foot{margin-top:auto;display:grid;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.me{display:flex;align-items:center;gap:.65rem;padding:.4rem .5rem;border-radius:var(--r-sm)}
.me:hover{background:var(--side-hover);color:#fff}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--violet);color:#fff;flex:none}
.me b{display:block;color:#fff;font-weight:600;font-size:.88rem}.me small{color:var(--side-mute);font-size:.76rem}
.side-tools{display:flex;gap:6px}
.side-tools button{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.45rem;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.08);background:none;color:var(--side-ink);font:500 .8rem var(--font);cursor:pointer}
.side-tools form{flex:1;display:flex}
.side-tools button:hover{background:var(--side-hover);color:#fff}
.side-tools svg{width:15px;height:15px}
.scrim{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:none}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 32px 18px;max-width:1240px;width:100%;margin:0 auto}
.crumbs{display:flex;gap:.4rem;font-size:.82rem;color:var(--mute);margin-bottom:6px}
.crumbs a{color:var(--mute)}.crumbs a:hover{color:var(--violet)}
.head-sub{color:var(--mute);margin-top:4px;font-size:.9rem}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.content{padding:0 32px 48px;max-width:1240px;width:100%;margin:0 auto;display:grid;gap:20px;align-content:start}
.flash{margin:16px auto 0;padding:.7rem 1rem;border-radius:var(--r);background:var(--ink);color:var(--canvas);font-weight:600;width:calc(100% - 64px);max-width:1176px}

/* ---------- panels, KPIs, tables ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.panel-body{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{padding:16px 18px;display:grid;gap:6px}
.kpi span{color:var(--mute);font-size:.84rem;font-weight:500}
.kpi b{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.kpi small{font-size:.78rem;color:var(--mute)}
.kpi small.up{color:var(--green)}.kpi small.down{color:var(--red)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.78rem;font-weight:600;color:var(--mute);padding:.7rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.75rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .act{text-align:right;white-space:nowrap;width:1%}
.cell-main{display:flex;align-items:center;gap:.75rem;min-width:0}
.cell-main b{display:block;font-weight:600}
.thumb{width:36px;height:36px;border-radius:10px;flex:none;border:1px solid var(--line)}
.thumb.link{display:grid;place-items:center;background:var(--violet-soft);color:var(--violet);border:0}
.thumb.link svg{width:17px;height:17px}
.empty{padding:40px 20px;text-align:center;display:grid;gap:10px;justify-items:center;color:var(--mute)}
.empty b{color:var(--ink);font-size:1rem}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.toolbar input[type=search]{max-width:280px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.seg a{padding:.42rem .8rem;font-size:.82rem;font-weight:600;color:var(--ink-2);border-left:1px solid var(--line)}
.seg a:first-child{border-left:0}
.seg a.on{background:var(--violet-soft);color:var(--violet)}
.rowmenu{position:relative;display:inline-block}
.rowmenu summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);color:var(--mute)}
.rowmenu summary::-webkit-details-marker{display:none}
.rowmenu summary:hover,.rowmenu[open] summary{background:var(--surface-2);color:var(--ink)}
.rowmenu summary svg{width:18px;height:18px}
.menu{position:absolute;right:0;top:36px;z-index:20;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-pop);padding:6px;display:grid}
.menu a,.menu button{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:var(--r-sm);font:500 .86rem var(--font);color:var(--ink);background:none;border:0;cursor:pointer;text-align:left;width:100%}
.menu a:hover,.menu button:hover{background:var(--surface-2);color:var(--ink)}
.menu .danger{color:var(--red)}
.menu form{margin:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.form-grid{display:grid;gap:14px;max-width:560px}
.chart{display:block;width:100%;height:auto}
.chart .grid{stroke:var(--line-2)}
.chart .axis{fill:var(--mute);font-size:11px;font-family:var(--font)}
.legend{display:flex;gap:16px;font-size:.82rem;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bars-list{display:grid;gap:12px}
.bl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;font-size:.88rem}
.bl-row .bar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bl-row .bar i{display:block;height:100%;background:var(--violet);border-radius:99px}
.bl-row b{font-weight:600}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{padding:.45rem .8rem;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--ink-2);border:1px solid transparent}
.tabs a:hover{background:var(--surface)}
.tabs a.on{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--sh)}
.swatch{display:block;border-radius:10px;background:linear-gradient(135deg,#f6f4ef,#e3ded3)}
.swatch.bxt-glass{background:linear-gradient(135deg,#ff7eb3,#7afcff 50%,#6a3df0)}
.swatch.bxt-dark{background:radial-gradient(circle at 50% 0,#4b52c8,#07070b 70%)}
.swatch.bxt-gradient{background:linear-gradient(135deg,#ff8a5b,#ff3d7f,#8a2be2)}
.swatch.bxt-clay{background:linear-gradient(135deg,#fbf4ee,#ead9cb)}
.swatch.bxt-mono{background:repeating-linear-gradient(0deg,#f4f4f0 0 10px,#ddd 10px 11px);box-shadow:inset 0 0 0 2px #000}
.swatch.bxt-floral{background:radial-gradient(circle at 70% 30%,#f6a5b9 18%,transparent 19%),radial-gradient(circle at 25% 70%,#c9b6f2 14%,transparent 15%),#fff3f1}
.swatch.bxt-jungle{background:radial-gradient(ellipse at 80% 20%,#48bb78 20%,transparent 21%),linear-gradient(#1f6b45,#0a2a1b)}
.swatch.bxt-cartoon{background:radial-gradient(rgba(0,0,0,.18) 1.5px,transparent 2px) 0 0/10px 10px,#ffd84d;box-shadow:inset 0 0 0 2px #1b1b1b}
.swatch.bxt-retro{background:linear-gradient(#f4a259 0 20%,#e76f51 20% 40%,#b5482f 40% 60%,#fbecd3 60%)}
.swatch.bxt-holo{background:linear-gradient(120deg,#fbc2eb,#a6c1ee,#c2f0e7,#fde2a7)}
.swatch.bxt-paper{background:repeating-linear-gradient(#fffdf6 0 9px,#d7e3f4 9px 10px)}
.swatch.bxt-galaxy{background:radial-gradient(#fff 1px,transparent 1.5px) 0 0/14px 14px,radial-gradient(circle at 80% 0,#5b2a86,#1a1446 60%,#05040f)}
.swatch.bxt-candy{background:repeating-linear-gradient(135deg,#ffd1e8 0 8px,#d7c8ff 8px 16px)}
dialog.modal{border:0;padding:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);width:min(520px,calc(100vw - 24px));box-shadow:var(--sh-pop)}
dialog.modal::backdrop{background:rgba(15,16,32,.5)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.modal-body{padding:20px;display:grid;gap:14px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line-2)}
.x{width:32px;height:32px;border-radius:50%;border:0;background:var(--surface-2);color:var(--ink);cursor:pointer}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tpl{overflow:hidden}
.tpl-shot{height:300px;overflow:hidden;position:relative;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.tpl-shot iframe{width:390px;height:780px;border:0;transform:scale(.62);transform-origin:0 0;pointer-events:none;position:absolute;left:50%;margin-left:-121px}
.tpl-body{padding:14px;display:grid;gap:10px}

/* ---------- public screens (sign in, home) ---------- */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-art{background:var(--side);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.auth-art h2{font-size:2.3rem;line-height:1.05;letter-spacing:-.03em;max-width:13ch;font-weight:700}
.auth-art p{color:var(--side-ink);max-width:36ch;margin-top:14px}
.auth-art .brand{padding:0}
.auth-form{display:grid;place-items:center;padding:32px 20px;background:var(--surface)}
.auth-box{width:100%;max-width:380px;display:grid;gap:18px}
.auth-box form{display:grid;gap:14px}
@media (max-width:880px){.auth-wrap{grid-template-columns:1fr}.auth-art{display:none}}
.home-wrap{min-height:100vh;background:var(--side);color:#fff;display:grid;grid-template-rows:auto 1fr}
.home-top{display:flex;justify-content:space-between;align-items:center;padding:20px 32px}
.home-top nav{display:flex;gap:10px;align-items:center}
.home-top nav a:not(.btn){color:var(--side-ink);font-weight:600;padding:0 .6rem}
.home-hero{display:grid;place-items:center;align-content:center;text-align:center;padding:40px 20px 80px}
.home-hero h1{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1;letter-spacing:-.045em;max-width:13ch}
.home-hero p{color:var(--side-ink);max-width:46ch;margin:18px auto 0;font-size:1.05rem}
.claim{display:flex;align-items:center;gap:.4rem;width:min(460px,100%);margin:28px auto 0;background:#fff;color:var(--ink);border-radius:var(--r);padding:6px 6px 6px 14px}
.claim span{color:var(--mute);font-weight:600}.claim input{border:0;padding:.45rem 0;box-shadow:none!important}
.narrow{max-width:460px;margin:12vh auto;padding:0 16px;display:grid;gap:14px;text-align:center;justify-items:center}

/* ---------- phones ---------- */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .shell.menu-open .side{transform:none;box-shadow:var(--sh-pop)}
  .shell.menu-open .scrim{display:block;position:fixed;inset:0;background:rgba(15,16,32,.45);z-index:50}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--side);position:sticky;top:0;z-index:40}
  .topbar .brand{padding:0;font-size:1.2rem}
  .topbar button{width:40px;height:40px;border:0;border-radius:var(--r-sm);background:var(--side-hover);color:#fff;display:grid;place-items:center}
  .head{padding:20px 16px 14px}
  .content{padding:0 16px 40px}
  .flash{width:calc(100% - 32px)}
  .tbl .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= editor ================= */
body.editor{overflow:hidden}
.ed{display:grid;grid-template-columns:min(440px,40vw) 1fr;height:100dvh}
.ed-panel{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.ed-top{display:flex;align-items:center;gap:.7rem;padding:12px 16px;border-bottom:1px solid var(--line)}
.ed-back{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink)}
.ed-addr{display:grid;flex:1;min-width:0}.ed-addr b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-tabs{display:flex;gap:2px;padding:8px 16px 0;border-bottom:1px solid var(--line)}
.ed-tabs button{padding:.6rem .8rem;border:0;background:none;font:600 .88rem var(--font);color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ed-tabs button.on{color:var(--ink);border-color:var(--violet)}
.ed-pane{display:none;overflow:auto;padding:16px;flex:1;min-height:0}
.ed-pane.on{display:grid;gap:12px;align-content:start}
.ed-pane h3{margin-top:6px}
.ed-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ed-list .empty{padding:24px}
.bi{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.bi.off{opacity:.55}.bi.open{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.bi-head{display:flex;align-items:center;gap:.6rem;padding:.5rem .55rem}
.bi-ic{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);flex:none;cursor:grab;touch-action:none;user-select:none}
.bi-open{flex:1;min-width:0;display:grid;text-align:left;background:none;border:0;font:inherit;color:var(--ink);cursor:pointer;padding:0}
.bi-open b{font-weight:600}
.bi-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-tools{display:flex;gap:2px}
.bi-tools button,.lrow-tools button{min-width:30px;height:30px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);cursor:pointer;font:inherit}
.bi-tools button:hover,.lrow-tools button:hover{background:var(--surface-2)}
.bi-tools button:disabled{opacity:.25;cursor:default}
.bi.dragging{opacity:.5;border-style:dashed}
.bform{display:grid;gap:.75rem;padding:.6rem .9rem 1rem;border-top:1px solid var(--line-2)}
.bform fieldset,.ed-pane fieldset{border:1px solid var(--line);border-radius:var(--r);padding:.75rem;display:grid;gap:.6rem;margin:0}
.bform legend,.ed-pane legend{font-weight:650;font-size:.85rem;padding:0 .3rem}
.lrows{display:grid;gap:.6rem}
.lrow{display:grid;gap:.5rem;padding:.65rem;background:var(--surface-2);border-radius:var(--r-sm)}
.lrow-tools{display:flex;justify-content:flex-end;gap:2px}
.bform-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.themes button{display:grid;gap:.35rem;padding:.4rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 .78rem var(--font);cursor:pointer}
.themes button.on{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.themes .swatch{height:44px}
.ed-err{color:var(--red);margin:0}
.dom-box{display:grid;gap:.5rem;padding:.9rem;border-radius:var(--r);background:var(--amber-soft);font-size:.86rem}
.dom-box.ok{background:var(--green-soft)}
.dom-box ol{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.ed-preview{position:relative;display:grid;place-items:center;padding:24px;overflow:hidden;background:var(--canvas)}
.phone{width:380px;max-width:100%;height:min(800px,calc(100dvh - 48px));border-radius:42px;border:9px solid #181A2B;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(20,22,43,.55)}
.phone iframe{display:block;width:100%;height:100%;border:0}
.ed-saved{position:absolute;top:16px;right:20px;font-size:.84rem;font-weight:600;color:var(--mute)}
.ed-bar{display:none}
.picker{border:0;border-radius:var(--r-lg);padding:0;width:min(680px,calc(100vw - 24px));max-height:85dvh;background:var(--surface);color:var(--ink);box-shadow:var(--sh-pop)}
.picker::backdrop{background:rgba(15,16,32,.5)}
.picker-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--surface)}
#ed-picker-body{padding:4px 18px 18px}
#ed-picker-body h4{margin:16px 0 8px;font-size:.8rem;color:var(--mute);font-weight:600}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.pk-grid button{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 .84rem var(--font);cursor:pointer;text-align:left}
.pk-grid button:hover{border-color:var(--violet);background:var(--violet-soft)}
.pk-grid i{font-style:normal;font-size:1.15rem}
@media (max-width:899px){
  .ed{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .ed-panel{border:0}.ed-tabs{display:none}.ed-preview{padding:10px}
  .phone{width:100%;height:100%;border-radius:18px;border-width:0;box-shadow:0 0 0 1px var(--line)}
  .ed[data-view=preview] .ed-panel{display:none}
  .ed:not([data-view=preview]) .ed-preview{display:none}
  .ed-bar{display:flex;justify-content:space-around;align-items:center;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .ed-bar button{flex:1;min-height:48px;border:0;background:none;font:600 .76rem var(--font);color:var(--mute);cursor:pointer}
  .ed-bar button.on{color:var(--violet)}
  .ed-bar .plus{flex:none;width:50px;height:50px;border-radius:14px;background:var(--violet);color:#fff;font-size:1.5rem;min-height:0}
  .picker{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:var(--r-lg) var(--r-lg) 0 0}
}