/* Data Studio — the editor's chrome in the shadcn/ui system (base-nova, neutral): the same tokens and component
   recipes as the Radar project's components/ui (button, tabs, input, native-select, switch, badge, accordion,
   resizable), translated from Tailwind to plain CSS. The charts keep the QN kit's own style.
   Order: tokens · primitives (button, input, badge, switch, toggle, chips) · top bar · pages · editor · data panel · modal, toast · phones */
:root{
  --radius:.625rem;
  --background:oklch(1 0 0);--foreground:oklch(.145 0 0);
  --card:oklch(1 0 0);--muted:oklch(.97 0 0);--muted-foreground:oklch(.556 0 0);
  --secondary:oklch(.97 0 0);--accent:oklch(.97 0 0);
  --primary:oklch(.205 0 0);--primary-foreground:oklch(.985 0 0);
  --border:oklch(.922 0 0);--input:oklch(.922 0 0);--ring:oklch(.708 0 0);
  --destructive:oklch(.577 .245 27.325);
  --ok:oklch(.627 .17 149);                 /* "Salvato" */
  --canvas:oklch(.975 0 0);                 /* the grey table under the chart paper */
  --star:#e0a100;
  --side:480px;
  --font-ui:'Zetal',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--background);color:var(--foreground);font:500 14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.lu{width:16px;height:16px;flex:none}
.lu.big{width:28px;height:28px;color:var(--muted-foreground)}
.lu.dim{opacity:.5}
.grow{flex:1}
body.dragging{cursor:col-resize;user-select:none}
body.dragging iframe{pointer-events:none}
.focus-ring,.btn:focus-visible,.input:focus-visible,.search input:focus-visible,.select select:focus-visible,.switch:focus-visible,.tg button:focus-visible,.side-tabs button:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 50%,transparent);outline:none}

/* ---------- Button (variants: primary, outline, secondary, ghost, danger · sizes: default, sm, icon) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 10px;border-radius:calc(var(--radius) - 2px);border:1px solid transparent;background:transparent;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;color:var(--foreground);transition:background-color .15s,color .15s,box-shadow .15s,border-color .15s;outline:none;user-select:none}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn.primary{background:var(--primary);color:var(--primary-foreground)}
.btn.primary:hover{background:color-mix(in oklch,var(--primary) 82%,transparent)}
.btn.outline{border-color:var(--border);background:var(--background)}
.btn.outline:hover,.btn.ghost:hover{background:var(--muted)}
.btn.secondary{background:var(--secondary)}
.btn.danger{color:var(--destructive)}
.btn.danger:hover{background:color-mix(in oklch,var(--destructive) 10%,transparent)}
.btn.sm{height:28px;padding:0 8px;font-size:13px;gap:5px}
.btn.icon{width:32px;padding:0}
.btn.icon.sm{width:28px}
.btn b{font-weight:500}

/* ---------- Input, Textarea, NativeSelect, Search ---------- */
.input{width:100%;min-width:0;height:32px;padding:4px 10px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--input);background:transparent;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.input{height:auto;line-height:1.45;padding:7px 10px;resize:vertical}
.input.mono{font:12px/1.5 ui-monospace,Menlo,monospace}
.input::placeholder{color:var(--muted-foreground)}
.select{position:relative}
.select select{appearance:none;width:100%;height:32px;padding:0 30px 0 10px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--input);background:var(--background);font-size:14px;outline:none;cursor:pointer}
.select select[aria-invalid=true]{border-color:var(--destructive);box-shadow:0 0 0 3px color-mix(in oklch,var(--destructive) 15%,transparent)}
.select .lu{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted-foreground)}
.search{position:relative;display:flex;align-items:center}
.search .lu{position:absolute;left:10px;color:var(--muted-foreground);pointer-events:none}
.search input{width:100%;height:32px;padding:0 10px 0 32px;border-radius:calc(var(--radius) - 2px);border:1px solid var(--input);background:var(--background);font-size:14px;outline:none}

/* ---------- Badge, Switch, Toggle group, Chips ---------- */
.badge{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:99px;background:var(--secondary);color:var(--muted-foreground);font-size:11px;font-weight:500;white-space:nowrap}
.switch{position:relative;flex:none;width:32px;height:18px;border-radius:99px;border:1px solid transparent;background:var(--input);cursor:pointer;transition:background-color .15s;outline:none}
.switch::after{content:'';position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--background);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.switch[aria-checked=true]{background:var(--primary)}
.switch[aria-checked=true]::after{transform:translateX(14px)}
.tg{display:inline-flex;padding:2px;gap:2px;border-radius:var(--radius);background:var(--muted)}
.tg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;min-width:30px;padding:0 7px;border:0;border-radius:calc(var(--radius) - 3px);background:transparent;color:var(--muted-foreground);cursor:pointer;font-size:13px;outline:none;transition:color .15s,background-color .15s}
.tg button:hover{color:var(--foreground)}
.tg button[aria-pressed=true]{background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--border)}
.tg.text{flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--border);background:var(--background);font-size:12px;cursor:pointer;transition:background-color .15s}
.chips button:hover{background:var(--muted)}
.chips button[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}

/* ---------- Top bar ---------- */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 max(16px,env(safe-area-inset-left,0px));background:color-mix(in oklch,var(--background) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-l,.nav-r{display:flex;align-items:center;gap:6px;min-width:0}
.nav-l{flex:1}
.brand{display:flex;align-items:center;gap:9px;color:var(--foreground);text-decoration:none;font-size:15px;font-weight:500;padding:6px 6px 6px 2px;border-radius:calc(var(--radius) - 2px);flex:none}
.brand:hover{background:var(--muted)}
.crumb{color:var(--muted-foreground);padding:0 2px}
.crumb-t{font-weight:500}
.title-in{min-width:0;flex:1;max-width:460px;height:32px;padding:0 8px;border:1px solid transparent;border-radius:calc(var(--radius) - 2px);background:transparent;font-size:15px;font-weight:500;outline:none;text-overflow:ellipsis}
.title-in:hover{background:var(--muted)}
.title-in:focus{background:var(--background);border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 50%,transparent)}
.sep{width:1px;height:20px;background:var(--border);margin:0 4px}
/* "Salvato": quiet, green for a moment after each save */
.save{display:inline-flex;align-items:center;gap:5px;margin-right:4px;font-size:12px;color:var(--muted-foreground);transition:color .3s}
.save .lu{width:14px;height:14px;color:var(--ok);transition:opacity .2s}
.save.busy .lu{opacity:0}
.save.busy{color:var(--muted-foreground)}

/* ---------- Pages: projects and new chart ---------- */
.page{max-width:1240px;margin:0 auto;padding:32px max(16px,env(safe-area-inset-left,0px)) 80px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-head h1{font:600 30px/1.1 var(--font-serif);margin:0;letter-spacing:-.01em}
.page-head p{margin:6px 0 0;color:var(--muted-foreground)}
.page-head .search{width:min(300px,100%)}
.muted{color:var(--muted-foreground);font-size:13px;margin:4px 0 10px}
.hint{color:var(--muted-foreground);font-size:13px;margin:0 0 14px}
.hint.sm{font-size:12px;margin:0 6px 0 0;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card,.fcard{position:relative;display:block;width:100%;padding:0;text-align:left;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);overflow:hidden;cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .3s var(--ease);outline:none}
.card:hover,.fcard:hover{box-shadow:0 8px 24px -12px rgba(0,0,0,.25);transform:translateY(-1px)}
.card:focus-visible,.fcard:focus-visible{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 50%,transparent)}
.thumb{position:relative;height:168px;overflow:hidden;background:#fff;border-bottom:1px solid var(--border);pointer-events:none}
.thumb iframe{position:absolute;left:0;top:0;width:calc(100% / .42);height:calc(100% / .42);border:0;transform:scale(.42);transform-origin:0 0}   /* the chart at 42%, filling the card at any width */
.card .meta,.fcard .meta{padding:12px 14px 14px}
.card h3{font:600 16px/1.25 var(--font-serif);margin:0 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card small{display:flex;align-items:center;gap:8px;color:var(--muted-foreground);font-size:12px}
.card .menu{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.card:hover .menu,.card:focus-within .menu{opacity:1}
.fcard .thumb{height:138px}
.fcard .thumb iframe{width:calc(100% / .36);height:calc(100% / .36);transform:scale(.36)}
.fcard b{display:block;font-size:14px;margin-bottom:3px}
.fcard small{display:block;color:var(--muted-foreground);font-size:12px;line-height:1.4}
.empty{display:grid;justify-items:center;gap:8px;padding:72px 20px;text-align:center;color:var(--muted-foreground);border:1px dashed var(--border);border-radius:calc(var(--radius) + 4px)}
.empty h2{font:600 22px/1.2 var(--font-serif);color:var(--foreground);margin:6px 0 0}
.empty p{margin:0 0 8px}
.auth{display:grid;gap:14px;width:min(360px,100%)}
.auth-acts{display:flex;gap:8px;flex-wrap:wrap}
.captcha:not(.open){position:absolute}   /* out of the form's gaps until Cloudflare asks for a click */
.tabs{display:inline-flex;padding:3px;gap:2px;border-radius:var(--radius);background:var(--muted);margin-bottom:24px}
.tabs button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:0;border-radius:calc(var(--radius) - 3px);background:transparent;color:var(--muted-foreground);cursor:pointer;font-size:14px}
.tabs button[aria-selected=true]{background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--border)}
.chooser{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
.filters{position:sticky;top:76px;display:grid;gap:14px}
.filters h4{font-size:12px;color:var(--muted-foreground);margin:6px 0 0;font-weight:500}
.fam{margin:0 0 32px}
.fam h2{display:flex;align-items:baseline;gap:8px;font:600 20px/1.2 var(--font-serif);margin:0 0 14px}
.fam h2 small{font:500 12px var(--font-ui);color:var(--muted-foreground)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.datafirst{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.card-flat{padding:16px;border:1px solid var(--border);border-radius:calc(var(--radius) + 4px)}
.card-flat.drop.over{border-color:var(--ring);background:color-mix(in oklch,var(--ring) 8%,var(--background))}
.card-flat.drop{border-style:dashed}
.paste-label{display:block;margin:16px 0 8px;font-size:13px;font-weight:500}
.colslist{list-style:none;margin:14px 0 0;padding:0}
.colslist li{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--border);font-size:13px}
.colslist .badge{margin-left:auto}
.lt{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--muted);font-size:11px}

/* ---------- Editor: preview on the left, panel on the right, a resize grip between ---------- */
.ws{display:grid;grid-template-columns:minmax(0,1fr) 1px var(--side);height:calc(100dvh - 56px)}
.pv{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--canvas)}
.pv-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--background)}
.pv-form{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--muted-foreground);font-size:13px}
.pv-form b{font-weight:500;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canvas{flex:1;overflow:auto;padding:28px 24px 48px}
.paper{margin:0 auto;max-width:780px;background:#fff;border-radius:calc(var(--radius) + 2px);box-shadow:0 0 0 1px var(--border),0 12px 32px -16px rgba(0,0,0,.2);padding:20px 26px 8px;transition:max-width .3s var(--ease),padding .3s var(--ease)}
.paper.dark{background:#16181b;box-shadow:0 0 0 1px #2f343a,0 12px 32px -16px rgba(0,0,0,.4)}
.paper.phone{max-width:390px;padding:16px 16px 6px}
.paper iframe{display:block;width:100%;height:300px;border:0}
.grip{position:relative;background:var(--border);cursor:col-resize;outline:none}
.grip::after{content:'';position:absolute;inset:0 -4px}
.grip:hover,.grip:focus-visible,body.dragging .grip{background:var(--ring)}
.side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--background)}
.side-tabs{display:flex;gap:2px;margin:10px 14px;padding:3px;border-radius:var(--radius);background:var(--muted)}
.side-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;border:0;border-radius:calc(var(--radius) - 3px);background:transparent;color:var(--muted-foreground);cursor:pointer;font-size:14px;outline:none}
.side-tabs button[aria-selected=true]{background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--border)}
.side-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.pad{padding:4px 16px 24px;display:grid;gap:16px;align-content:start}
.field{display:grid;gap:6px}
.field>label{font-size:13px;font-weight:500}
.field>small,.field label small{color:var(--muted-foreground);font-size:12px;line-height:1.4;font-weight:400}
.field.row{grid-template-columns:1fr auto;align-items:center;gap:12px}
.field.row label{display:grid;gap:2px}
.formcard{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius)}
.formcard b{font:600 16px/1.2 var(--font-serif)}
.formcard small{color:var(--muted-foreground);font-size:12px;line-height:1.4}
.acc{border-bottom:1px solid var(--border)}
.acc-h{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;border:0;background:none;font-size:14px;font-weight:500;cursor:pointer;outline:none}
.acc-h:hover{text-decoration:underline;text-underline-offset:3px}
.acc-h .lu{color:var(--muted-foreground);transition:transform .2s}
.acc.open .acc-h .lu{transform:rotate(180deg)}
.acc-b{display:none;gap:14px;padding:0 0 16px}
.acc.open .acc-b{display:grid}

/* ---------- Dati: the example notice, column roles, key datum, sheet ---------- */
.notice{display:grid;gap:10px;margin:2px 16px 12px;padding:10px 12px;border-radius:var(--radius);background:color-mix(in oklch,#0092cc 9%,var(--background));border:1px solid color-mix(in oklch,#0092cc 25%,var(--border));font-size:12.5px;line-height:1.4}
.notice>div{display:flex;align-items:flex-start;gap:8px;flex:1}
.notice .lu{color:#0092cc;margin-top:1px}
.notice b{font-weight:500}
.notice .btn{justify-self:start}
.binds{margin:0 16px;border:1px solid var(--border);border-radius:var(--radius)}
.binds summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;font-weight:500;list-style:none}
.binds summary::-webkit-details-marker{display:none}
.binds summary .bt{flex:none}
.binds summary>.lu{color:var(--muted-foreground);transition:transform .2s;margin-left:auto}
.binds[open] summary>.lu{transform:rotate(180deg)}
.bsums{display:flex;flex-wrap:wrap;gap:4px 8px;min-width:0;font-weight:400;font-size:12px;color:var(--muted-foreground)}
.binds[open] .bsums{display:none}   /* open, the roles are right below */
.bsum{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bsum i{width:8px;height:8px;border-radius:2px;background:var(--bc);flex:none}
.bsum b{font-weight:500;color:var(--foreground)}
.bsum.miss b{color:var(--destructive)}
.binds-b{display:grid;gap:12px;padding:2px 12px 14px}
.bind{display:grid;gap:6px}
.bind label{display:flex;align-items:center;gap:8px;font-size:13px}
.bind label i{width:10px;height:10px;border-radius:3px;background:var(--bc);flex:none}
.bind label .badge{margin-left:auto}
.cchips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--border);font-size:12px;cursor:pointer;transition:background-color .15s,border-color .15s}
.cchip:hover{background:var(--muted)}
.cchip input{margin:0;accent-color:var(--primary)}
.cchip:has(input:checked){background:color-mix(in oklch,var(--bc) 28%,var(--background));border-color:color-mix(in oklch,var(--bc) 70%,var(--foreground) 10%)}
.keyline{display:flex;align-items:flex-start;gap:8px;margin:12px 16px 0;padding:9px 12px;border-radius:var(--radius);background:color-mix(in oklch,var(--star) 12%,var(--background));font-size:12px;line-height:1.45;color:var(--muted-foreground)}
.keyline .lu{color:var(--star);fill:var(--star);margin-top:1px;width:14px;height:14px}
.keyline b{color:var(--foreground);font-weight:500}
.sheetbar{display:flex;align-items:center;gap:2px;padding:10px 12px 6px;flex-wrap:wrap}
.sheetwrap{flex:1;min-height:240px;overflow:auto;margin:0 16px 16px;border:1px solid var(--border);border-radius:var(--radius);overscroll-behavior:contain}
table.sheet{border-collapse:separate;border-spacing:0;font-size:13px}
.sheet th,.sheet td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0;height:30px}
.sheet thead th{position:relative;position:sticky;top:0;z-index:2;background:var(--muted);font-weight:500;color:var(--muted-foreground);height:26px;text-align:center;font-size:12px}
.sheet th[style]{background:color-mix(in oklch,var(--bc) 32%,var(--background));color:var(--foreground)}
.sheet td.b{background:color-mix(in oklch,var(--bc) 8%,var(--background))}
.sheet .c-st{position:sticky;left:0;z-index:1;width:30px;min-width:30px;background:var(--muted);text-align:center}
.sheet .c-rn{position:relative;position:sticky;left:30px;z-index:1;width:36px;min-width:36px;background:var(--muted);color:var(--muted-foreground);text-align:center;font-size:11px}
.sheet thead .c-st,.sheet thead .c-rn{z-index:3}
.sheet thead .c-st .lu{width:13px;height:13px;color:var(--star);fill:var(--star)}
.sheet input{display:block;height:30px;border:0;padding:0 8px;background:transparent;min-width:0;outline:none}
.sheet input:focus{box-shadow:inset 0 0 0 2px var(--ring);background:var(--background)}
.sheet input::placeholder{color:var(--muted-foreground);font-weight:400}
.sheet tr.h input{font-weight:600}
/* on hover, a row number or a column letter becomes the button that removes it */
.rx{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0;background:var(--muted);color:var(--destructive);cursor:pointer;opacity:0;transition:opacity .12s}
.rx .lu{width:13px;height:13px}
.sheet tr:hover .c-rn .rx,.sheet thead th:hover .rx,.rx:focus-visible{opacity:1}
.star{display:grid;place-items:center;width:28px;height:28px;margin:auto;border:0;background:none;color:color-mix(in oklch,var(--muted-foreground) 50%,transparent);cursor:pointer;border-radius:6px;transition:color .15s,transform .3s var(--ease)}
.star .lu{width:14px;height:14px}
.star:hover{color:var(--star);transform:scale(1.15)}
.star[aria-pressed=true]{color:var(--star)}
.star[aria-pressed=true] .lu{fill:var(--star)}
.sheet tr.key td:not(.c-st):not(.c-rn){background:color-mix(in oklch,var(--star) 14%,var(--background))}
/* a photo column: the thumbnail, the upload button, then the URL */
.sheet td.img .ic{display:flex;align-items:center;gap:2px;padding-left:4px}
.sheet td.img img{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--border)}
.sheet td.img .up{display:grid;place-items:center;width:24px;height:24px;flex:none;border:0;border-radius:6px;padding:0;background:none;color:var(--muted-foreground);cursor:pointer}
.sheet td.img .up:hover{background:var(--muted);color:var(--foreground)}
.sheet td.img .up .lu{width:14px;height:14px}
/* the sheet widened: the panel takes the whole editor, the preview steps aside */
.ws.wide{grid-template-columns:0 0 1fr}
.ws.wide .pv{visibility:hidden}

/* ---------- Dialog, toast ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.45);padding:20px;animation:fade .16s var(--ease)}
.modal .box{background:var(--background);border-radius:calc(var(--radius) + 4px);width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:22px 24px;box-shadow:0 0 0 1px var(--border),0 24px 64px -16px rgba(0,0,0,.4);animation:rise .22s var(--ease)}
.modal.out{animation:fade .16s var(--ease) reverse forwards}
.modal.out .box{animation:rise .16s var(--ease) reverse forwards}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.98)}}
.modal h2{font:600 22px/1.2 var(--font-serif);margin:0 0 6px}
.modal p{color:var(--muted-foreground);margin:0 0 14px}
.modal .lab{display:block;font-size:13px;font-weight:500;margin:0 0 6px}
.modal pre{background:var(--muted);border-radius:var(--radius);padding:12px;margin:0 0 8px;font:12px/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow:auto;outline:none}
.modal pre:focus-visible{box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 50%,transparent)}
.modal .hint{margin:0 0 6px}
.modal .adv{margin-top:10px;border-top:1px solid var(--border)}
.modal .adv summary{display:flex;align-items:center;gap:6px;padding:12px 0 4px;cursor:pointer;list-style:none;font-size:13px;color:var(--muted-foreground)}
.modal .adv summary::-webkit-details-marker{display:none}
.modal .adv summary .lu{width:14px;height:14px;transition:transform .2s}
.modal .adv[open] summary .lu{transform:rotate(180deg)}
.modal .adv .field{margin-top:10px}
.modal .acts{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.packs{display:grid;gap:8px}
.pack{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--background);text-align:left;cursor:pointer}
.pack:hover{background:var(--muted)}
.pack b{font-weight:500}
.pack span{font-weight:600;font-variant-numeric:tabular-nums}
.pack small{grid-column:1;color:var(--muted-foreground);font-size:12px}
.pack:disabled{opacity:.5;pointer-events:none}
.nav .btn.credits{font-variant-numeric:tabular-nums}
.modal .steps{margin:0 0 14px;padding-left:20px;color:var(--muted-foreground)}
.toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(520px,calc(100% - 32px));padding:10px 16px;border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);font-size:13px;box-shadow:0 12px 32px -12px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.error{background:var(--destructive)}

/* ---------- Tablet and phone: one column — preview first, then the panel; labels give way to icons ---------- */
@media (max-width:960px){
  .ws{grid-template-columns:1fr;height:auto}
  .grip{display:none}
  .pv{min-height:auto}
  .canvas{padding:16px 12px 24px}
  .side{border-top:1px solid var(--border);min-height:70dvh}
  .ws.wide{grid-template-columns:1fr}
  .ws.wide .pv{display:none}
  .chooser,.datafirst{grid-template-columns:1fr}
  .filters{position:static}
}
@media (max-width:640px){
  .nav{padding:0 12px;gap:6px}
  .brand span,.crumb,.nav .btn span,.save span{display:none}
  .nav .btn.credits span{display:inline}
  .nav .btn.primary{width:32px;padding:0}
  .pv-bar{padding:8px 10px;gap:6px;flex-wrap:wrap}
  .pv-form{display:none}
  .page{padding-top:20px}
  .page-head h1{font-size:24px}
  .paper{padding:14px 12px 6px}
  .sheetbar .btn span,.hint.sm{display:none}
}
@media (prefers-reduced-motion:reduce){.modal,.modal .box,.toast,.card,.fcard{animation:none;transition:none}}