/* 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}
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;gap:10px;padding:16px 12px 12px}
.brand{display:flex;align-items:center;gap:.1rem;padding:2px 10px 4px;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 4px;font-size:.74rem;color:var(--side-mute);font-weight:600}
.nav a{display:flex;align-items:center;gap:.7rem;padding:.42rem .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{display:grid;gap:8px}
.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;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.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;grid-template-columns:minmax(0,1fr)}
.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 svg{width:16px;height:16px;flex:none}
.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: the sidebar becomes a floating dock ---------- */
.dock,.mine-tabs{display:none}
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .head{padding:18px 16px 12px}
  .content{padding:0 16px 24px}
  .flash{width:calc(100% - 32px)}
  .tbl .hide-sm{display:none}
  body.has-shell .main{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:4px 12px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
  .dock-bar{pointer-events:auto;height:66px;padding:0 6px;border-radius:24px;background:var(--side);box-shadow:0 16px 28px -14px rgba(20,22,43,.75);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:2px;max-width:520px;margin:0 auto}
  .dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:54px;border-radius:18px;font-size:.72rem;font-weight:600;color:#B4B8D0}
  .dock a.on{background:#2B2E57;color:#fff;font-weight:700}
  .dock a:hover{color:#fff}
  .dock svg{width:22px;height:22px}
  .dock .dock-create{justify-self:center;width:56px;height:56px;border-radius:20px;background:var(--violet);border:4px solid var(--canvas);transform:translateY(-14px);box-shadow:0 10px 18px -8px rgba(91,75,255,.9);color:#fff}
  .dock .dock-create svg{width:24px;height:24px;stroke-width:2.6}
  .dock-ico{position:relative;display:grid}
  .dock .badge{position:absolute;top:-5px;right:-12px;border:2px solid var(--side)}
  .mine-tabs{display:flex;align-items:center;gap:20px;position:sticky;top:0;z-index:30;padding:10px 8px 0 16px;background:var(--surface);border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600}
  .mine-tabs a{padding:8px 0 12px;color:var(--mute);border-bottom:3px solid transparent;white-space:nowrap}
  .mine-tabs a.on{color:var(--ink);border-color:var(--violet)}
  .mine-tabs a span{font-weight:500;opacity:.8}
  .mine-search{margin-left:auto;width:44px;height:44px;border:0;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .mine-search svg{width:20px;height:20px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{min-height:44px}
}
@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}
}

.bmore{border:1px solid var(--line);border-radius:var(--r);padding:.2rem .75rem}
.bmore[open]{padding-bottom:.75rem;display:grid;gap:.6rem}
.bmore summary{cursor:pointer;font-weight:600;font-size:.85rem;padding:.5rem 0;color:var(--ink-2)}
.upl{display:flex;gap:6px}.upl input{flex:1}
.upl button{flex:none}
.set-sec{display:grid;gap:12px}
.set-sec+.set-sec{border-top:1px solid var(--line-2);padding-top:16px}
.banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);background:var(--amber-soft);font-size:.9rem}
.row-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.row-inputs{grid-template-columns:1fr}}

.bi-ic svg,.pk-grid i svg{width:17px;height:17px}
.pk-grid i{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--violet)}
.bi-ic{color:var(--violet)}
.ed-back svg,.x svg{width:16px;height:16px}
.x{display:grid;place-items:center}

/* QR */
.qr-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.qr-preview{position:sticky;top:20px}
.qr-out{background:repeating-conic-gradient(var(--surface-2) 0 25%,var(--surface) 0 50%) 0 0/16px 16px;border-radius:var(--r);padding:20px;display:grid;place-items:center}
.qr-out svg{width:100%;max-width:300px;height:auto}
.qr-card{overflow:hidden}
.qr-thumb{display:grid;place-items:center;height:220px;padding:20px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.qr-thumb svg{width:100%;height:100%}
@media (max-width:960px){.qr-wrap{grid-template-columns:1fr}.qr-preview{position:static;order:-1}}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.ptag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 .45rem;margin-left:.4rem;vertical-align:1px}
.bulkbar select{width:auto}
.bulkbar [data-count]{flex:1}

.pix{display:grid;gap:.4rem}
.code{margin:0;padding:14px;border-radius:var(--r);background:var(--side);color:#E6E7F2;font:13px/1.55 ui-monospace,Consolas,monospace;overflow:auto;white-space:pre}
/* blog + pages */
.article-wrap{max-width:760px;margin:0 auto;padding:24px 16px 40px}
.article{font-size:1.06rem;line-height:1.7}
.article h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;margin:.2em 0 .6em}
.article h2{margin-top:1.6em}.article img{max-width:100%;border-radius:12px}
.article blockquote{margin:1.2em 0;padding-left:16px;border-left:3px solid var(--violet,#5B4BFF);color:var(--mute)}
.article-cover{width:100%;margin-bottom:1.2em}
.post-list{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:20px}
.post-card{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.post-card:hover{border-color:var(--violet,#5B4BFF)}
/* admin map */
.worldmap svg{width:100%;height:auto;display:block}
/* ---------- form editors (short links, static sites) ---------- */
.icon-btn{width:30px;height:30px;display:inline-grid;place-items:center;flex:none;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.icon-btn svg{width:15px;height:15px}
.btn svg{width:15px;height:15px}
.row-inputs.three{grid-template-columns:repeat(3,1fr)}
.tog{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-weight:600;color:var(--ink)}
.tog input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.tog i{width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;flex:none;transition:background .15s}
.tog i::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,.25);transition:transform .15s}
.tog input:checked+i{background:var(--green)}.tog input:checked+i::after{transform:translateX(14px)}
.tog input:focus-visible+i{outline:2px solid var(--violet);outline-offset:2px}
.tog span[data-on]::before{content:attr(data-off);color:var(--mute)}.tog input:checked~span[data-on]::before{content:attr(data-on);color:var(--green)}
.tog.row{display:flex;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);font-weight:400}
.tog.row i{margin-top:2px}.tog.row input:checked+i{background:var(--violet)}
.tog.row span{display:grid;gap:2px}.tog.row b{font-weight:600}.tog.row small{color:var(--mute);font-size:.8rem}
.fe-page{background:var(--canvas)}
.fe-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.fe-id{display:grid;flex:1;min-width:0}.fe-id b{font-size:1rem}
.fe-url{display:flex;align-items:center;gap:2px;min-width:0;font-size:.84rem;color:var(--mute)}.fe-url .icon-btn{width:24px;height:24px}
.fe-state{font-size:.82rem;color:var(--mute);white-space:nowrap}.fe-state.dirty{color:var(--amber);font-weight:600}
.fe-body{display:grid;grid-template-columns:200px minmax(0,640px) 300px;gap:28px;justify-content:center;padding:28px 20px 80px}
.fe-nav{position:sticky;top:84px;align-self:start;display:grid;gap:2px}
.fe-nav a{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:.88rem}
.fe-nav a:hover{background:var(--surface);color:var(--ink)}
.fe-nav a.on{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:var(--sh)}
.fe-nav a.set::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);margin-left:auto}
.fe-nav hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}.fe-nav svg{width:15px;height:15px}
.fe-main{display:grid;gap:20px;align-content:start}
.fe-sec{display:grid;gap:14px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);scroll-margin-top:84px}
.fe-sec>header{display:grid;gap:4px;margin-bottom:2px}.fe-sec>header p{color:var(--mute);font-size:.86rem}
.fe-side{position:sticky;top:84px;align-self:start;display:grid;gap:16px}
.fe-card{display:grid;gap:12px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.fe-qr{width:132px;height:132px;padding:10px;background:#fff;border-radius:var(--r);justify-self:center;border:1px solid var(--line)}.fe-qr svg{width:100%;height:100%}
.fe-short{font-weight:700;font-size:1.02rem;text-align:center;color:var(--violet)}
.fe-dest{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}.fe-dest img{border-radius:3px}
.fe-card .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.og-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.og-img{aspect-ratio:1.91/1;background:var(--line-2) center/cover no-repeat}.og-img.empty{background-image:linear-gradient(135deg,var(--line-2),var(--line))}
.og-text{display:grid;gap:3px;padding:10px 12px}.og-text b{font-size:.9rem;line-height:1.3}
.og-text .placeholder{color:var(--mute);font-weight:500;font-style:italic}
.rules{display:grid;gap:8px}.rules:empty{display:none}
.rule{display:grid;grid-template-columns:130px 110px 1fr auto;gap:8px;align-items:center}
.drop{position:relative;display:grid;justify-items:center;gap:6px;padding:28px 16px;border:2px dashed var(--line);border-radius:var(--r);text-align:center;cursor:pointer;color:var(--ink)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop svg{width:26px;height:26px;color:var(--violet)}
.drop.over,.drop:hover{border-color:var(--violet);background:var(--violet-soft)}.drop.has{border-style:solid;border-color:var(--green)}
.site-frame{aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.site-frame iframe{width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;pointer-events:none}
@media (max-width:1180px){.fe-body{grid-template-columns:180px minmax(0,1fr)}.fe-side{grid-column:2;position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media (max-width:760px){
  .fe-body{grid-template-columns:minmax(0,1fr);padding:12px 12px 90px;gap:14px}.fe-side{grid-column:auto;order:-1;grid-template-columns:minmax(0,1fr)}.fe-card,.fe-sec,.fe-main{min-width:0}
  .fe-nav{position:sticky;top:57px;z-index:4;display:flex;overflow-x:auto;background:var(--canvas);padding:6px 0;margin:0 -12px;padding-inline:12px;scrollbar-width:none}
  .fe-nav a{white-space:nowrap}.fe-nav hr{display:none}
  .fe-sec{padding:18px 16px}.fe-bar{padding:8px 12px;gap:8px}.fe-state{display:none}.fe-bar .tog span{display:none}
  .rule{grid-template-columns:1fr 1fr auto}.rule input[type=url]{grid-column:1/3}.row-inputs.three{grid-template-columns:1fr}
}
/* ---------- bio editor: block detail view, save state, thumbnails, preview size ---------- */
.ed{grid-template-columns:min(460px,42vw) 1fr}
.ed-state{font-size:.78rem;font-weight:600;color:var(--mute);white-space:nowrap;padding:.2rem .55rem;border-radius:20px;background:var(--surface-2)}
.ed-state.busy{color:var(--ink-2)}.ed-state.ok{color:var(--green);background:var(--green-soft)}.ed-state.err{color:var(--red);background:var(--red-soft);white-space:normal}
.ed-blocks{display:grid;gap:12px;align-content:start}
.ed-detail{display:grid;gap:14px;align-content:start}
.ed-dhead{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;gap:.55rem;margin:-16px -16px 0;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--line-2)}
.ed-dhead b{flex:1;font-size:1rem}
.ed-detail.off .ed-dhead b::after{content:"Hidden";margin-left:.5rem;font-size:.72rem;font-weight:600;color:var(--amber);background:var(--amber-soft);padding:.1rem .45rem;border-radius:20px}
.ed-detail .bform{border:0;padding:0;gap:14px}
.bi:hover{border-color:#C9CCDA}.bi-open:hover b{color:var(--violet)}
.bi.flash-in{animation:flashin 1.2s ease-out}
@keyframes flashin{from{box-shadow:0 0 0 3px var(--violet-soft);border-color:var(--violet)}to{box-shadow:none}}
.upl{align-items:center}
.upl .thumb{width:38px;height:38px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-2) center/cover no-repeat}
.upl .thumb.empty{display:block;padding:0;background-image:repeating-linear-gradient(45deg,var(--line-2) 0 6px,transparent 6px 12px)}
.ed-preview{grid-template-rows:auto 1fr;gap:14px;place-items:center}
.ed-dev{display:inline-flex;padding:3px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.ed-dev button{border:0;background:none;padding:.35rem .9rem;border-radius:7px;font:600 .8rem var(--font);color:var(--mute);cursor:pointer}
.ed-dev button.on{background:var(--violet-soft);color:var(--violet)}
.phone{height:min(780px,calc(100dvh - 100px));transition:width .25s,border-radius .25s}
.phone.desk{width:min(1100px,100%);border-radius:14px;border-width:6px}
.picker-head{gap:12px}.picker-head b{flex:none}#ed-pk-q{flex:1;max-width:320px;padding:.45rem .7rem}
@media (max-width:899px){.ed{grid-template-columns:1fr}.ed-dev{display:none}.ed-preview{grid-template-rows:1fr}}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.fe-bar .tog{flex:none;font-size:.85rem}
.fe-page>.flash{top:68px!important;animation:flashout .4s 3.5s forwards}@keyframes flashout{to{opacity:0;visibility:hidden}}
/* ---------- fields: one refined style everywhere ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea{min-height:40px;padding:.55rem .8rem;border-radius:10px;border-color:var(--line);background:var(--surface);font-size:.92rem;line-height:1.4;box-shadow:inset 0 1px 1px rgba(20,22,43,.03)}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:#A3A7BC;opacity:1}
select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8098' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center}
input:focus,select:focus,textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
input:user-invalid,input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--red)}
.fld{gap:6px}
.fld-l{font-size:.8rem;font-weight:600;color:var(--ink-2);letter-spacing:.005em}
.ipt{position:relative;display:block}
.ipt svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--mute);pointer-events:none}
.ipt input{padding-left:2.2rem!important}
.ipt-color{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface);width:fit-content}
.ipt-color input[type=color]{width:32px;height:32px;border:0;border-radius:7px;padding:0;background:none;cursor:pointer}
.ipt-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}.ipt-color input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.1);border-radius:7px}
.hex{font:500 .82rem ui-monospace,Consolas,monospace;color:var(--ink-2);text-transform:uppercase}
.upl{display:flex;align-items:center;gap:8px}.upl .thumb{width:40px;height:40px;border-radius:10px}
/* ---------- bio editor: add + arrange, accordion blocks ---------- */
.ed-addrow{display:grid;grid-template-columns:1fr auto;gap:8px}
.ed-addrow .btn{min-height:40px}
#ed-arrange[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.ed-arr-hint{display:none;font-size:.8rem;color:var(--ink-2);background:var(--violet-soft);padding:.55rem .75rem;border-radius:10px}
.arranging .ed-arr-hint{display:block}
.bi{transition:border-color .15s,box-shadow .15s}
.bi-head{padding:.55rem .6rem;gap:.65rem}
.bi-grip{display:none;color:var(--mute);cursor:grab;touch-action:none}.bi-grip svg{width:16px;height:16px;stroke-width:3}
.bi-ic{cursor:default}
.bi-sum{font-size:.8rem;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bi-hidden{display:none;font-size:.7rem;font-weight:600;color:var(--amber);background:var(--amber-soft);padding:.12rem .45rem;border-radius:20px}
.bi.off .bi-hidden{display:inline}.bi.off{opacity:1}.bi.off .bi-ic,.bi.off .bi-open{opacity:.55}
.bi-tools{display:none}
.bi-edit{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.bi-edit svg{width:15px;height:15px}.bi-edit svg+svg{width:13px;height:13px;transition:transform .2s;color:var(--mute)}
.bi-edit:hover{background:var(--surface-2);border-color:var(--line)}
.bi.open .bi-edit svg+svg{transform:rotate(180deg)}
.bi.open{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft),0 8px 24px -12px rgba(20,22,43,.25)}
.bi.open>.bi-head{border-bottom:1px solid var(--line-2);background:var(--surface-2);border-radius:var(--r) var(--r) 0 0}
.bi.dirty .bi-open b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--amber);vertical-align:middle}
.arranging .bi-grip{display:inline-grid}.arranging .bi-tools{display:flex}.arranging .bi-edit{display:none}
.arranging .bi-ic,.arranging .bi-open{cursor:grab}
.arranging .bi{border-style:dashed}.arranging .bi.dragging{border-style:solid;border-color:var(--violet);box-shadow:var(--sh-pop);opacity:1}
.bform{padding:16px 14px 0;gap:16px;border-top:0}
.bform fieldset{background:var(--surface-2);border-color:var(--line-2);border-radius:12px;padding:12px}
.bform legend{font-size:.8rem;color:var(--ink-2)}
.lrow{background:var(--surface);border:1px solid var(--line-2);border-radius:10px}
.bmore{border-radius:12px;padding:0 12px;background:var(--surface)}
.bmore summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-size:.84rem}
.bmore summary::-webkit-details-marker{display:none}
.bmore summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.bmore[open] summary::after{transform:rotate(-135deg)}
.bmore-body{display:grid;gap:14px;padding:4px 0 14px}
.bform-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;margin:0 -14px;padding:12px 14px;background:var(--surface);border-top:1px solid var(--line-2);border-radius:0 0 var(--r) var(--r)}
.bform-tools{display:flex;gap:2px;margin-right:auto}.icon-btn.danger:hover{color:var(--red);background:var(--red-soft)}
.bform-state{font-size:.8rem;font-weight:600;color:var(--mute)}.bform-state.dirty{color:var(--amber)}.bform-state.ok{color:var(--green)}.bform-state.err{color:var(--red)}
/* ---------- bio editor Design / Settings: collapsible sections + Save bar ---------- */
.ed-pane form.stack{display:grid;gap:10px}
.set-sec.acc{display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0}
.set-sec.acc+.set-sec.acc{border-top:1px solid var(--line);padding-top:0;margin-top:10px}
.acc-h{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 14px;border:0;background:none;font:650 .92rem var(--font);color:var(--ink);cursor:pointer;text-align:left}
.acc-h::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.set-sec.acc.open .acc-h::after{transform:rotate(-135deg)}
.set-sec.acc>*:not(.acc-h){display:none}
.set-sec.acc.open{box-shadow:var(--sh)}
.set-sec.acc.open>*:not(.acc-h){display:grid;gap:12px;margin:0 14px 14px}
.set-sec.acc.open>.row-inputs{grid-template-columns:1fr 1fr}
.set-sec.acc.open>label.check{display:flex}
.pane-foot{position:sticky;bottom:-16px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:6px -16px -16px;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.pane-foot .bform-state{margin-right:auto}
.ed-tabs button.dirty::after{content:"";display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:var(--amber);vertical-align:middle}
.live{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;font-size:.85rem;color:var(--mute)}
.live b{color:var(--ink);font-variant-numeric:tabular-nums}
.live i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.live.on i{background:var(--green);box-shadow:0 0 0 0 rgba(18,183,106,.5);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.file-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hint.ok{color:var(--green)}.hint.err{color:var(--red)}
.fe-dep{display:grid;gap:14px}
textarea.code{font:13px/1.55 ui-monospace,Consolas,monospace;tab-size:2}
/* ================= uniform layout: every screen fills the space beside the sidebar ================= */
.head,.content,.subnav{max-width:none;margin:0}
.flash{margin:16px 32px 0;width:auto;max-width:none}
.panel .form-grid{max-width:none}   /* a form fills its panel; the panel sets the width */
.content.flush{padding:0;display:block;max-width:none}
.content.flush>.banner{margin:16px 32px 0}
.fe-bar{top:0;z-index:30}
.fe-body{grid-template-columns:196px minmax(0,1fr) 320px;justify-content:start;max-width:1440px;padding:24px 32px 80px;gap:24px}
.fe-nav,.fe-side{top:80px}
@media (max-width:1280px){.fe-body{grid-template-columns:180px minmax(0,1fr)}.fe-side{grid-column:2;position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
@media (max-width:960px){.fe-bar{top:0}.fe-nav{top:58px}.flash{margin:12px 14px 0}.content.flush>.banner{margin:12px 14px 0}}
@media (max-width:760px){.fe-body{grid-template-columns:minmax(0,1fr);padding:12px 12px 96px;gap:14px}.fe-side{grid-column:auto;grid-template-columns:minmax(0,1fr)}}   /* the wide rules above must not win on a phone */
.inline-field{display:flex;gap:8px}.inline-field input{flex:1}
.dom-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.95rem}
.dom-box .steps{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}.dom-box .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ================= shared controls ================= */
/* checkboxes */
input[type=checkbox]:not(.tog input):not(.switch input){appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;border:1.5px solid #C3C6D4;border-radius:5px;background:var(--surface) center/12px no-repeat;cursor:pointer;transition:background-color .12s,border-color .12s;vertical-align:middle}
input[type=checkbox]:not(.tog input):not(.switch input):hover{border-color:var(--violet)}
input[type=checkbox]:not(.tog input):not(.switch input):checked{background-color:var(--violet);border-color:var(--violet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
input[type=checkbox]:not(.tog input):not(.switch input):indeterminate{background-color:var(--violet);border-color:var(--violet);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
input[type=checkbox]:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
fieldset.pix{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px;margin:0}
fieldset.pix legend{font-size:.8rem;font-weight:600;color:var(--ink-2);padding:0 4px}
/* sliders */
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--line)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--surface);border:2px solid var(--violet);box-shadow:0 1px 3px rgba(20,22,43,.25);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--violet);cursor:pointer}
/* file drop areas */
.drop{position:relative;display:grid;justify-items:center;gap:4px;padding:22px 16px;border:1.5px dashed #C9CCDA;border-radius:12px;background:var(--surface-2);text-align:center;cursor:pointer;color:var(--ink);font-weight:500;transition:border-color .15s,background .15s}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0;border:0}
.drop svg{color:var(--violet)}.drop b{font-weight:600;font-size:.9rem}.drop u{color:var(--violet);text-decoration:none}
.drop-name{font-size:.8rem;color:var(--mute);font-weight:400;word-break:break-all}
.drop.over,.drop:hover{border-color:var(--violet);background:var(--violet-soft)}
.drop.has{border-style:solid;border-color:var(--green);background:var(--green-soft)}.drop.has .drop-name{color:var(--ink);font-weight:600}
/* date picker (flatpickr) in Bliink colours */
.flatpickr-input[readonly]{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237C8098' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.4rem}
.flatpickr-calendar{font-family:var(--font);border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-pop);background:var(--surface);width:auto}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{display:none}
.flatpickr-months .flatpickr-month,.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-weekday{color:var(--ink);fill:var(--ink);background:transparent}
.flatpickr-current-month{font-size:1rem;font-weight:650}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{fill:var(--ink-2)}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--violet)}
span.flatpickr-weekday{color:var(--mute);font-weight:600;font-size:.75rem}
.flatpickr-day{color:var(--ink);border-radius:9px;font-weight:500}
.flatpickr-day:hover,.flatpickr-day:focus{background:var(--violet-soft);border-color:transparent}
.flatpickr-day.today{border-color:var(--violet)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.flatpickr-disabled{color:var(--mute);opacity:.5}
.flatpickr-time{border-top:1px solid var(--line)!important}
.flatpickr-time input,.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{color:var(--ink);font-weight:600;background:transparent;box-shadow:none;border:0;min-height:0}
.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus{background:var(--surface-2)}
.numInputWrapper span{border-color:var(--line)}
.flatpickr-calendar input:not([type=checkbox]),.flatpickr-calendar select{min-height:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important;background-image:none!important;border-radius:6px!important;font-size:inherit!important;color:var(--ink)!important}
.flatpickr-current-month .numInputWrapper{width:6ch}.flatpickr-current-month input.cur-year{font-weight:650!important}
.flatpickr-current-month .flatpickr-monthDropdown-months{font-weight:650!important;padding-right:4px!important}
.flatpickr-calendar .flatpickr-monthDropdown-months option{background:var(--surface);color:var(--ink)}
.flatpickr-time{height:44px!important;max-height:44px!important;line-height:44px!important}
.flatpickr-time input.flatpickr-hour,.flatpickr-time input.flatpickr-minute{height:44px!important;font-size:1rem!important;font-weight:600!important}
.flatpickr-calendar{box-shadow:0 0 0 1px var(--line),var(--sh-pop)!important}
/* ================= QR studio ================= */
.type-pick{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.type-pick legend{font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.type-pick label{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font-size:.84rem;font-weight:600;color:var(--ink)}
.type-pick label:hover{border-color:#C9CCDA}
.type-pick label.on{border-color:var(--violet);background:var(--violet-soft);box-shadow:0 0 0 1px var(--violet) inset}
.type-pick input{position:absolute;opacity:0;pointer-events:none}
.type-pick svg{width:16px;height:16px;color:var(--violet);flex:none}
.type-pick i{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:700;color:var(--violet);border:1px solid var(--violet);border-radius:5px;padding:0 4px;opacity:.7}
.type-pick label:has(input:focus-visible){outline:2px solid var(--violet);outline-offset:2px}
.dyn-box{display:grid;gap:12px;padding:14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.dyn-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dyn-stats div{display:grid;gap:2px;padding:10px;border-radius:10px;background:var(--surface)}
.dyn-stats b{font-size:1.35rem;font-variant-numeric:tabular-nums}.dyn-stats span{font-size:.75rem;color:var(--mute)}
.dyn-stats b.live-on{color:var(--green)}
.dyn-box .actions{display:flex;gap:8px;flex-wrap:wrap}
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.looks button{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font:600 .75rem var(--font);color:var(--ink-2)}
.looks button svg{width:100%;height:auto;border-radius:6px}
.looks button:hover{border-color:#C9CCDA;transform:translateY(-1px)}
.looks button.on{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet) inset;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.looks button{transition:transform .15s,border-color .15s}}
.qr-side{gap:14px}
.scan-check{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.85rem}
.scan-check .dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.scan-check small{grid-column:2;color:var(--ink-2);font-size:.78rem;line-height:1.4}
.scan-check.good{background:var(--green-soft)}.scan-check.good .dot{background:var(--green)}
.scan-check.warn{background:var(--amber-soft)}.scan-check.warn .dot{background:var(--amber)}
.scan-check.bad{background:var(--red-soft)}.scan-check.bad .dot{background:var(--red)}
.scan-check.busy .dot{animation:pulse 1.2s infinite}
.seg{display:flex;padding:3px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{flex:1;border:0;background:none;padding:.35rem .5rem;border-radius:7px;font:600 .78rem var(--font);color:var(--mute);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
/* mockups: the live code placed on a table tent, poster or business card */
.mock{display:grid;place-items:center;border-radius:14px;transition:padding .25s,background .25s}
.mock[data-mock=tent]{padding:28px 30px 34px;background:linear-gradient(#e9e3d8,#d8cfc0)}
.mock[data-mock=tent] .qr-out{background:#fff;padding:18px 18px 34px;border-radius:6px 6px 2px 2px;box-shadow:0 18px 22px -14px rgba(0,0,0,.45);transform:perspective(500px) rotateX(10deg);position:relative}
.mock[data-mock=tent] .qr-out::after{content:"Scan to order";position:absolute;left:0;right:0;bottom:10px;text-align:center;font:700 .75rem var(--font);color:#3a2f22}
.mock[data-mock=poster]{padding:22px;background:#2b2440}
.mock[data-mock=poster] .qr-out{background:#fff6e8;padding:16px 16px 60px;border-radius:4px;box-shadow:0 20px 30px -18px rgba(0,0,0,.6);position:relative}
.mock[data-mock=poster] .qr-out::before{content:"Summer sale";position:absolute;left:16px;right:16px;bottom:30px;font:800 1.05rem var(--font);color:#e2455c;letter-spacing:.04em}
.mock[data-mock=poster] .qr-out::after{content:"Up to 50% off · scan for the catalogue";position:absolute;left:16px;right:16px;bottom:12px;font:600 .62rem var(--font);color:#5a4a3a}
.mock[data-mock=card]{padding:26px 18px;background:linear-gradient(135deg,#dfe6f3,#c9d3e6)}
.mock[data-mock=card] .qr-out{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center;width:260px;aspect-ratio:1.75;background:#fff;border-radius:10px;padding:14px;box-shadow:0 14px 26px -16px rgba(20,22,43,.5)}
.mock[data-mock=card] .qr-out svg{grid-column:2;max-width:92px}
.mock[data-mock=card] .qr-out::before{content:"Your Name\A Founder, Studio";white-space:pre;grid-column:1;grid-row:1;font:700 .82rem/1.4 var(--font);color:#181a2b}
.mock:not([data-mock=none]) .qr-out{background-image:none}
.embed-prev{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:repeating-conic-gradient(var(--surface-2) 0 25%,var(--surface) 0 50%) 0 0/16px 16px;height:280px}
.embed-prev[data-v=counter]{height:110px}
.embed-prev iframe{width:100%;height:100%;border:0;display:block}
.bmore.hunt{margin-top:4px}
.bulk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;max-height:520px;overflow:auto}
.bulk-grid figure{margin:0;display:grid;gap:4px;font-size:.75rem;color:var(--ink-2);text-align:center}
.bulk-grid svg{width:100%;height:auto;background:#fff;border-radius:8px}

/* ---------- shell: create button, search, plan meter, account menu, badges ---------- */
.side-create{display:flex;align-items:center;justify-content:center;gap:.5rem;height:40px;flex:none;border-radius:var(--r);background:var(--violet);color:#fff;font-weight:600}
.side-create:hover{color:#fff;filter:brightness(1.08)}
.side-create svg{width:16px;height:16px}
.side-search{display:flex;align-items:center;gap:.5rem;height:36px;flex:none;padding:0 10px;border-radius:10px;border:1px solid var(--side-on);background:rgba(255,255,255,.04);color:var(--side-mute);font:500 .86rem var(--font);cursor:pointer;text-align:left}
.side-search:hover{color:#fff;border-color:#3A3E6E}
.side-search span{flex:1}
.side-search svg{width:15px;height:15px}
.side-search kbd{font:600 .7rem var(--font);padding:2px 6px;border-radius:5px;background:var(--side-on);color:var(--side-ink)}
.side .nav{display:grid;gap:2px;flex:1;min-height:0;overflow-y:auto;align-content:start;scrollbar-width:thin}
.badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;display:inline-grid;place-items:center;line-height:1}
.side-plan{display:grid;grid-template-columns:1fr auto;gap:7px 8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);font-size:.8rem;color:var(--side-ink)}
.side-plan:hover{color:var(--side-ink);background:rgba(255,255,255,.08)}
.side-plan b{color:#fff;font-weight:600}
.side-plan i{grid-column:1/-1;height:6px;border-radius:6px;background:var(--side-on);overflow:hidden}
.side-plan u{display:block;height:100%;background:#8F84FF;border-radius:6px}.side-plan u.full{background:var(--coral)}
.side-me{position:relative}
.side-me summary{list-style:none;display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem;border-radius:var(--r-sm);cursor:pointer}
.side-me summary::-webkit-details-marker{display:none}
.side-me summary:hover,.side-me[open] summary{background:var(--side-hover)}
.side-me summary>svg{width:15px;height:15px;color:var(--side-mute);flex:none;margin-left:auto}
.side-me summary>.ell{display:grid}
.side-me b{color:#fff;font-weight:600;font-size:.88rem}.side-me small{color:var(--side-mute);font-size:.76rem}
.side-me .menu{top:auto;bottom:calc(100% + 6px);left:0;right:0}
.subnav{display:flex;flex-wrap:wrap;gap:4px;padding:0 32px 16px;max-width:1240px;width:100%;margin:0 auto}
.subnav a{display:inline-flex;align-items:center;padding:.42rem .8rem;border-radius:99px;font-size:.86rem;font-weight:600;color:var(--ink-2);white-space:nowrap;border:1px solid transparent}
.subnav a:hover{background:var(--surface);color:var(--ink)}
.subnav a.on{background:var(--ink);color:var(--canvas)}
@media (max-width:960px){.subnav{flex-wrap:nowrap;overflow-x:auto;padding:0 16px 12px;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}.subnav a{min-height:44px;flex:none}}   /* one row that scrolls on a phone (must come after the wide rule) */

/* search / jump (Ctrl K) */
dialog.jump{width:min(600px,calc(100vw - 24px));margin-top:12vh;overflow:hidden}
.jump-head{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line-2)}
.jump-head>svg{width:18px;height:18px;color:var(--mute);flex:none}
.jump-head input{border:0;box-shadow:none!important;padding:.5rem 0;font-size:1rem;background:none}
.jump-list{max-height:min(52vh,430px);overflow:auto;padding:6px;display:grid;gap:2px}
.jump-item{display:flex;align-items:center;gap:10px;padding:.55rem .7rem;border-radius:var(--r-sm);min-height:44px}
.jump-item b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jump-item small{color:var(--mute);margin-left:auto;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.jump-item.on,.jump-item:hover{background:var(--violet-soft);color:var(--ink)}
.jump-empty{padding:28px 16px;text-align:center;color:var(--mute)}
.jump-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line-2);font-size:.78rem;color:var(--mute)}
.jump-foot kbd{font:600 .7rem var(--font);padding:1px 6px;border-radius:5px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
@media (max-width:960px){dialog.jump{margin-top:12px}.jump-foot{display:none}}

/* create */
.create{display:grid;gap:26px;justify-items:center;max-width:1000px;margin:0 auto;width:100%;padding-top:20px}
.create-head{text-align:center;display:grid;gap:8px}
.create-head h1{font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.create-head p{color:var(--ink-2);font-size:1rem}
.create-paste{width:min(760px,100%);display:grid;gap:8px}
.create-paste>label{color:var(--ink-2)}
.create-box{display:flex;gap:10px;padding:8px;background:var(--surface);border:2px solid var(--violet);border-radius:18px;box-shadow:0 0 0 5px var(--violet-soft)}
.create-box input{border:0;box-shadow:none!important;font-size:1rem;min-width:0;background:none}
.create-box .btn{min-height:48px;border-radius:12px;padding:0 1.2rem;font-size:.94rem}
.create-tiles{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.create-tile{display:grid;gap:10px;align-content:start;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;transition:border-color .15s,transform .15s}
.create-tile:hover{border-color:var(--violet);color:var(--ink);transform:translateY(-2px)}
.create-art{height:120px;border-radius:12px;display:grid;place-items:center;align-content:center;gap:6px}
.create-art svg{width:40px;height:40px}
.create-tile b{font-size:1.04rem;font-weight:700}
.create-tile p{color:var(--ink-2);font-size:.86rem;line-height:1.45}
.create-tile em{font-style:normal;font-weight:700;color:var(--violet);font-size:.86rem}
.create-row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.create-band{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.create-band>span{flex:1;display:grid;gap:2px}
.create-band b{font-weight:650}.create-band small{font-size:.84rem;color:var(--ink-2)}
.create-band.shop{background:#16322A;color:#F4F1E6;border-color:transparent}
.create-band.shop:hover{color:#F4F1E6}
.create-band.shop small{color:#C9D6CF}
.create-band.shop .btn{background:#F2D36B;color:#16322A}
@media (max-width:960px){
  .create{gap:16px;padding-top:6px}
  .create-head{text-align:left;justify-self:stretch}.create-head h1{font-size:1.6rem}
  .create-box{flex-wrap:wrap}.create-box input{flex:1 1 100%;padding:.6rem .4rem}.create-box .btn{flex:1}
  .create-tiles{grid-template-columns:1fr;gap:10px}
  .create-tile{grid-template-columns:48px minmax(0,1fr);align-items:center;gap:2px 14px;padding:12px;border-radius:18px;min-height:64px}
  .create-art{height:48px;width:48px;border-radius:14px;grid-row:span 2}.create-art svg{width:22px;height:22px}
  .create-tile p{grid-column:2}.create-tile em{display:none}
  .create-row{grid-template-columns:1fr;gap:10px}
  .create-band{flex-wrap:wrap}
}

/* more (phone hub) */
.more{display:grid;gap:12px;max-width:560px;width:100%;margin:0 auto;padding-top:14px}
.more-me{display:grid;gap:14px;padding:16px;border-radius:22px;background:var(--side);color:#fff}
.more-me a.who{display:flex;align-items:center;gap:12px;color:#fff;min-height:52px}
.more-me .av{width:52px;height:52px;font-size:1.1rem}
.more-me .who>span:not(.av){flex:1;display:grid;min-width:0}.more-me .who b{font-size:1.1rem}.more-me .who small{color:var(--side-ink)}
.more-me .who em{font-style:normal;font-weight:700;font-size:.84rem;color:#C9C3FF}
.more-meter{display:grid;gap:6px;font-size:.82rem;color:var(--side-ink)}
.more-meter div{display:flex;justify-content:space-between}.more-meter b{color:#fff}
.more-meter i{height:6px;border-radius:6px;background:var(--side-on);overflow:hidden}.more-meter u{display:block;height:100%;border-radius:6px;background:#8F84FF}.more-meter u.full{background:var(--coral)}
.more-list{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 16px}
.more-list a,.more-list button{display:flex;align-items:center;gap:12px;min-height:54px;width:100%;border:0;border-bottom:1px solid var(--line-2);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;padding:0}
.more-list>:last-child,.more-list>form:last-child button{border-bottom:0}
.more-list form{margin:0}
.more-list .ico{width:36px;height:36px;border-radius:11px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;flex:none}
.more-list .ico svg{width:18px;height:18px}
.more-list b{flex:1;font-weight:600}
.more-list small{color:var(--mute);font-size:.82rem}
.more-list a>svg:last-child{width:18px;height:18px;color:var(--mute);flex:none}
.more-list .more-out{color:var(--red);justify-content:center;font-weight:600}
/* logged-out pages inside the public header and footer (terms, privacy, blog, not found) */
.pub-doc{min-height:52vh;padding:8px 0 56px}
.pub-legal{max-width:760px;margin:0 auto;padding:24px 20px 0;display:grid;gap:16px}
.pub-doc .narrow{margin:9vh auto}
/* phones: fields at 16px so iOS does not zoom in when one is tapped */
@media (max-width:760px){input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),select,textarea{font-size:16px}}

/* sub-menus line up with the page under them */
.subnav{max-width:none;margin:0}
button.create-tile,button.ov-tile{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}