/* Novads studio skin (11-09). Same system as the front page: gray stage, Geist, white cards with no border,
   dark gradient 16px buttons, no caps labels. Loaded last on studio.html; studio.css stays untouched. */
:root:not([data-theme=dark]){
  --bg:var(--nvp-out-canvas); --side:var(--nvp-out-canvas); --panel:var(--nvp-out-card); --panel2:var(--nvp-out-card); --hover:var(--nv-tint-out);
  --line:var(--nvp-out-line); --line2:var(--nvp-out-line); --ink:var(--nvp-out-text); --mute:var(--nvp-out-quiet); --dim:var(--nvp-out-quiet);
  --nvsh:0 3.67px 11px var(--nv-tint-out),0 3.67px 7.33px var(--nv-tint-out);
  --nvdk:var(--nvp-out-text);
}
:root:not([data-theme=dark]) body{background:var(--bg)}
.side{border-right:0}
.side .i{color:var(--nvp-out-quiet)}
.side .i[aria-current=page]{background:var(--nvp-out-card);color:var(--nvp-out-text);box-shadow:var(--nvsh)}
.side .grp{display:none}
.side .newinf{height:46px;border-radius:16px;background:var(--nvdk);border:1px solid var(--nvp-in-line);box-shadow:var(--nvsh);font-weight:500;font-size:15px}
.side .newinf:hover{filter:brightness(1.15);background:var(--nvdk)}

/* headings: the front page's weight and tracking, italic serif for emphasis */
.ttl,#app h1,#app h2{font-weight:500;letter-spacing:-.04em}
#app h1 em,#app h2 em{font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400}
.eyebrow,.seb{display:none}

/* buttons */
.btn{border-radius:16px}
.btn.pri,.btn.acc{background:var(--nvdk);border:1px solid var(--nvp-in-line);box-shadow:var(--nvsh)}
.btn.pri:hover:not(:disabled),.btn.acc:hover:not(:disabled){background:var(--nvdk);filter:brightness(1.15);border-color:var(--nvp-in-line)}
.btn:not(.pri):not(.acc):not(.ghost):not(.danger){background:var(--nvp-out-card);border-color:transparent;box-shadow:var(--nvsh)}
.chip{background:var(--nvp-out-card);border-color:transparent;box-shadow:var(--nvsh)}

/* inputs */
#app input:not([type=checkbox]):not([type=radio]),#app textarea,#app select{border-radius:16px}

/* 11-11 his ask ("steal Arcads' dashboard"): the app is one dark workspace. var(--nvp-in-canvas) stage, white text,
   slim borderless menu, white-on-dark main button, pictures carry the page. Default theme is dark (studio.html). */
:root[data-theme=dark]{
  --bg:var(--nvp-in-canvas); --side:var(--nvp-in-canvas); --panel:var(--nvp-in-card); --panel2:var(--nvp-in-card); --hover:var(--nv-tint-in);
  --line:var(--nvp-in-line); --line2:var(--nvp-in-line); --ink:var(--nvp-in-text); --mute:var(--nvp-in-quiet); --dim:var(--nvp-in-quiet);
  --acc:var(--nvp-in-text); --accbg:var(--nvp-blue); --nvfocus:var(--nvp-blue);
}
:root[data-theme=dark] body{background:var(--bg)}
:root[data-theme=dark] .side{background:var(--side);border-right:1px solid var(--line)}
:root[data-theme=dark] .side .i{color:var(--mute);border-radius:8px}
:root[data-theme=dark] .side .i:hover{background:var(--hover);color:var(--ink)}
:root[data-theme=dark] .side .i[aria-current=page]{background:var(--nv-tint-in);color:var(--ink);box-shadow:none}
:root[data-theme=dark] .side .newinf{background:var(--nvp-in-text);color:var(--nvp-out-text);border:0;box-shadow:none;border-radius:16px}
:root[data-theme=dark] .side .newinf:hover{background:var(--nvp-in-text);filter:none}
:root[data-theme=dark] .btn.pri,:root[data-theme=dark] .btn.acc{background:var(--nvp-in-text);color:var(--nvp-out-text);border:0;box-shadow:none}
:root[data-theme=dark] .btn.pri:hover:not(:disabled),:root[data-theme=dark] .btn.acc:hover:not(:disabled){background:var(--nvp-in-text);filter:none}
:root[data-theme=dark] .btn:not(.pri):not(.acc):not(.ghost):not(.danger){background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
:root[data-theme=dark] .chip{background:var(--panel2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
:root[data-theme=dark] #app input:not([type=checkbox]):not([type=radio]),:root[data-theme=dark] #app textarea,:root[data-theme=dark] #app select{background:var(--panel);color:var(--ink);border-color:var(--line)}
:root[data-theme=dark] #app :focus-visible{outline:2px solid var(--nvfocus);outline-offset:2px}
:root[data-theme=dark] .hero .glow,:root[data-theme=dark] .hero .noise{display:none}

/* 11-11 Home = Arcads' Agent home: welcome line, one big box, idea cards, brand strip */
.nvhome{max-width:1040px;margin:0 auto;padding:clamp(28px,8vh,88px) 0 48px}
.nvwel{text-align:center}
.nvwel h1{font-size:clamp(32px,4.4vw,48px);line-height:1.08;margin:0 0 10px}
.nvwsub{color:var(--mute);margin:0 auto 22px;max-width:52ch}
.nvbox{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:14px 14px 10px;text-align:left;box-shadow:0 10px 30px var(--nv-shadow-l)}
#app .nvbox textarea{width:100%;border:0!important;background:transparent!important;resize:none;font:inherit;font-size:17px;color:var(--ink);padding:4px 6px;outline:0;box-shadow:none}
#app .nvbox textarea:focus-visible{outline:0}
.nvbox:focus-within{border-color:var(--nvfocus,var(--nvp-blue))}
.nvboxrow{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.nvbox .nvadd{display:inline-flex;gap:6px;align-items:center;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--mute);font:inherit;font-size:14px;cursor:pointer}
.nvbox .nvadd svg{width:15px;height:15px}
.nvbox .nvadd:hover{color:var(--ink);background:var(--hover)}
.nvbox .go{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);display:grid;place-items:center;cursor:pointer}
.nvbox .go svg{width:18px;height:18px}
.nvideas{margin-top:40px}
.nvideas h2,.nvhome .sech h2{font-size:20px;margin:0 0 12px}
.nvigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.nvidea{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;min-height:150px;transition:border-color .15s,transform .15s}
.nvidea:hover{border-color:var(--line2);transform:translateY(-2px)}
.nvidea img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--panel2)}
.nvidea .bti{width:36px;height:36px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;margin-bottom:auto}
.nvidea .bti svg{width:18px;height:18px}
.nvidea b{font-weight:500;font-size:15px;line-height:1.25}
.nvidea small{color:var(--mute);font-size:13px;line-height:1.35}
.nvhome .sec{margin-top:40px}
.nvstrip{margin-top:40px;border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--panel)}
.nvsh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.nvsh b{font-weight:500}
.nvsrow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.nvsi{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border-radius:16px;background:var(--panel2);border:0;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.nvsi small{color:var(--dim);font-size:12px}
.nvsi span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.nvsrow{grid-template-columns:repeat(2,1fr)}.nvigrid{grid-template-columns:repeat(2,1fr)}.nvhome{padding-top:24px}}
.nvboxrow .nvadd{flex:0 0 auto;width:auto;max-width:60%}

/* 11-11 Talking ad = Arcads' Studio: tabs, dotted canvas, composer pinned below */
.nvstu{display:flex;flex-direction:column;min-height:calc(100vh - 120px)}
.nvmodes{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.nvmode{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font:inherit;font-size:14px;cursor:pointer}
.nvmode svg{width:15px;height:15px}
.nvmode:hover{color:var(--ink);background:var(--hover)}
.nvmode.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.nvcanvas{flex:1;min-height:280px;border:1px solid var(--line);border-radius:16px;padding:16px;background-color:var(--bg);background-image:radial-gradient(var(--line2) 1px,transparent 1px);background-size:22px 22px;display:flex;flex-direction:column}
.nvempty{margin:auto;text-align:center;display:grid;gap:6px;max-width:40ch;padding:24px}
.nvempty b{font-weight:500;font-size:18px}
.nvempty small{color:var(--mute);font-size:14px}
.nvcanvas:has(.ugout:not(:empty)) .nvempty{display:none}
.nvcomp{margin-top:12px;border-radius:16px;box-shadow:0 -6px 24px var(--nv-shadow-l)}
.nvigrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (min-width:1100px){.nvigrid{grid-template-columns:repeat(5,1fr)}}
.ugcard.nvcomp{display:grid!important;gap:12px;flex-direction:initial;max-width:none;width:100%}
:root[data-theme=dark] .chip.on,:root[data-theme=dark] .chip[aria-checked=true]{background:var(--nvp-in-card);color:var(--nvp-out-text);border-color:var(--nvp-out-line)}
/* 11-11 Templates wall: real example pictures fill the tile */
.nvst.nvpic .nvstm{padding:0;overflow:hidden}
.nvst.nvpic .nvstm img{width:100%;height:100%;object-fit:cover;display:block}
.nvstsub{color:var(--mute);font-size:13px;line-height:1.35;margin:-4px 0 4px}
/* 11-12 plan step 1: Home ideas = Arcads' list rows, one column, photo + title + line + arrow */
.nvrows{display:grid;gap:8px}
.nvrow{display:grid;grid-template-columns:72px 1fr 28px;align-items:center;gap:16px;width:100%;text-align:left;padding:10px 14px 10px 10px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.nvrow:hover{border-color:var(--line2);background:var(--panel2)}
.nvrow img,.nvrow .bti{width:72px;height:72px;border-radius:16px;object-fit:cover;background:var(--panel2);margin:0;display:grid;place-items:center}
.nvrow .bti svg{width:24px;height:24px}
.nvrt{display:grid;gap:3px;min-width:0}
.nvrt b{font-weight:500;font-size:18px;line-height:1.25}
.nvrt small{color:var(--mute);font-size:15px;line-height:1.35}
.nvra{color:var(--dim);display:grid;place-items:center}.nvra svg{width:20px;height:20px}
.nvrow:hover .nvra{color:var(--ink)}
.nvpaid{display:inline-block;margin:0 auto 14px;padding:8px 14px;border-radius:999px;background:var(--accbg,var(--nvp-blue));color:var(--ink);font-size:15px}
.nvideas h2{font-size:20px}
@media (max-width:520px){.nvrow{grid-template-columns:56px 1fr 20px;gap:12px}.nvrow img,.nvrow .bti{width:56px;height:56px}.nvrt b{font-size:16px}}
/* 11-12 plan step 2: composer pinned at the bottom, product + presenter chips, example in the empty canvas */
.ugcard.nvcomp{position:sticky;bottom:0;z-index:5;background:var(--panel)}
.nvcrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nvcbot{justify-content:space-between}
.nvcbot .btn{min-height:48px;padding:0 22px;font-size:16px}
.nvpchip{display:flex;gap:10px;align-items:center;padding:6px 10px 6px 6px;border-radius:16px;border:1px solid var(--line2);background:var(--panel2);cursor:pointer;min-width:0;max-width:100%}
.nvpth{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--panel)}
#app .nvpsel{border:0!important;background:transparent!important;font:inherit;font-size:16px;color:var(--ink);padding:4px 2px;max-width:260px}
.nvpres{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.nvpres .uglab,.nvcnt .uglab{margin:0}
.nvcnt{display:flex;gap:10px;align-items:center}
.nvex{width:min(180px,40vw);aspect-ratio:9/16;object-fit:cover;border-radius:16px;margin:0 auto 8px;opacity:.9}
.nvstu:has(.nvcomp){min-height:0}
.nvstu:has(.nvcomp) .nvcanvas{min-height:min(420px,48vh)}
.nvpres{flex-wrap:nowrap;overflow:hidden}
.nvpres > :last-child{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;min-width:0;scrollbar-width:none}
.nvpres > :last-child > *{flex:0 0 auto}
.nvpchip{flex:0 1 300px}
#app .nvpsel{min-width:0;width:100%}
@media (max-width:520px){.nvcrow{flex-direction:column;align-items:stretch}.nvpchip{flex:1 1 auto}.nvcbot .btn{width:100%}}
/* 11-12 plan step 3: repair list */
.nvpgrid .ccard.nvpc,.nvpgrid .ccard.nvpc *{color:var(--nvp-out-text)}
.nvlinkbtn{justify-self:start;background:none;border:0;padding:4px 0;color:var(--mute);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nvlinkbtn:hover{color:var(--ink)}
.bdot[hidden]{display:none!important}
.mgrid .mcard:not(.mrun){aspect-ratio:9/16}
.mgrid .mcard img,.mgrid .mcard video{width:100%;height:100%;object-fit:cover}
.mgrid .mcard .macts{opacity:1!important;visibility:visible!important}
#app .nvpgrid .ccard.nvpc .ccap,#app .nvpgrid .ccard.nvpc .ccap b{color:var(--nvp-out-text)}
#app .nvpgrid .ccard.nvpc .ccap .nche{color:var(--nvp-out-quiet)}
:root[data-theme=dark] .bell .bdot{background:var(--nvp-blue);color:var(--nvp-in-text)}      /* the unread count was white on white */

/* 11-11 B7 Home plan: pre-ticked ad cards, one button with the server's price */
.nvplan{margin-top:32px}
.nvplan h2{font-size:20px;margin:0 0 12px}
.nvph{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nvpcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.nvpc{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink)}
.nvpc.off{opacity:.55}
.nvpc input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--ink)}
.nvpcards .nvpc img{width:44px;height:78px;object-fit:cover;border-radius:8px;flex:none}
.nvpln{display:grid;gap:4px;min-width:0}
.nvpln small{font-size:12px;color:var(--mute);font-weight:600}
.nvpln q{font-weight:600;line-height:1.35;color:var(--ink)}
.nvpln .who{font-size:13px;color:var(--mute)}
.nvpact{display:grid;gap:10px;margin-top:14px;justify-items:start}
.nverr{color:var(--nvp-wrong)}
@media (max-width:640px){.nvpcards{grid-template-columns:1fr}.nvpact .btn{width:100%;justify-content:center}}
.nvpa{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px}
.nvlink{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.nvpln textarea{width:100%;font:inherit;padding:8px;border:1px solid var(--line2);border-radius:8px;background:var(--bg);color:var(--ink)}

/* 11-11 B9 Making + My ads 'From your plan' (theme tokens only) */
.nvmaking,.nvmine{margin:8px 0 24px;color:var(--ink)}
.nvclose{color:var(--mute);margin:4px 0 12px}
.nvtiles,.nvmads{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.nvtile,.nvmad{display:grid;gap:6px;align-content:start;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--panel);color:var(--ink);min-width:0}
.nvtile video,.nvtph,.nvmad video{width:100%;aspect-ratio:9/16;border-radius:8px;background:var(--panel2);object-fit:cover;display:block}
.nvtile small{color:var(--mute)}
.nvtile[data-state=failed] .nvtph{opacity:.5}
.nvtile[data-state=failed] small{color:var(--ink)}
.nvmads{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.nvwhy{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:grid;gap:6px;margin:4px 0;color:var(--ink)}
.nvwhy label{display:flex;gap:8px;align-items:center;cursor:pointer}
.nvpmsg{color:var(--ink);margin:0}
@media (max-width:640px){.nvtiles{grid-template-columns:repeat(2,minmax(0,1fr))}.nvmads{grid-template-columns:1fr}}

/* 11-11 B10 Home 'More tools' (only with NV_MENU3 on) */
.nvmore{margin:20px 0}
.nvmore h2{font-size:15px;margin:0 0 8px;color:var(--ink)}
.nvmorer{display:flex;flex-wrap:wrap;gap:8px}
/* 11-14 flow walk: on phones the make-an-ad form sat on top of the empty canvas; it now follows it, and "How many" sits on its own line */
@media (max-width:520px){.ugcard.nvcomp{position:relative;bottom:auto;box-shadow:none}.nvstu:has(.nvcomp) .nvcanvas{min-height:200px}.nvcnt{flex-wrap:wrap}.nvcnt .uglab{flex-basis:100%}.nvcnt .ugchips{flex-wrap:wrap;gap:8px}}