/* invite-studio.css — the invitation maker's workspace: the card on the left (the widest part) with its page strip; on
   the right one column that shows the open tool's panel or the selected item's properties, and the tool rail on the
   outer edge; full-screen mode; bottom sheets on phones. Uses the site's colour tokens. */
#studio.iv-host{display:block;min-width:0}
.iv{--iv-bd:var(--border,#e4e9f2);--iv-pn:var(--panel,#fff);--iv-fd:var(--field,#f4f6fb);--iv-ac:var(--accent,#4f6ef7);--iv-mu:var(--muted,#5a6377);--iv-tx:var(--text,#1e2635);
  display:flex;flex-direction:column;height:min(860px,calc(100vh - 110px));min-height:600px;border:1px solid var(--iv-bd);border-radius:18px;background:var(--iv-pn);overflow:hidden;color:var(--iv-tx);font-size:13.5px}
.iv.iv-full{position:fixed;inset:0;z-index:400;height:auto;border-radius:0;border:0}
.iv button{font-family:inherit}
.iv input,.iv select,.iv textarea{font:inherit;color:var(--iv-tx)}

/* top bar */
.iv-top{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--iv-bd);background:var(--iv-pn);flex-wrap:wrap}
.iv-tl,.iv-tc,.iv-tr{display:flex;align-items:center;gap:6px}.iv-tl{flex:1;min-width:180px}.iv-tr{margin-left:auto}
.iv-name{min-width:0;flex:1;max-width:280px;border:1px solid transparent;border-radius:9px;padding:7px 10px;font-weight:700!important;background:none}
.iv-name:hover,.iv-name:focus{border-color:var(--iv-bd);background:var(--iv-fd);outline:none}
.iv-tb{width:34px;height:34px;border-radius:9px;border:1px solid var(--iv-bd);background:var(--iv-pn);cursor:pointer;font-size:17px;line-height:1;color:var(--iv-tx);padding:0}
.iv-tb:hover:not(:disabled){border-color:var(--iv-ac);color:var(--iv-ac)}.iv-tb:disabled{opacity:.35;cursor:default}
.iv-zoom{min-width:58px;height:34px;border-radius:9px;border:1px solid var(--iv-bd);background:var(--iv-fd);font-weight:700;cursor:pointer;color:var(--iv-tx)}
.iv-dl{width:auto!important;padding:9px 16px!important;font-size:14px!important;border-radius:10px!important}

/* main area */
.iv-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 312px 76px;grid-template-rows:minmax(0,1fr)}
.iv-work{grid-column:1;grid-row:1}.iv-panel,.iv-props{grid-column:2;grid-row:1;min-width:0}.iv-rail{grid-column:3;grid-row:1}
/* one right column: the item's properties while something is selected (or the Page settings are open), the tool's
   panel otherwise — or when a tool was just picked (panel-pin) */
@media (min-width:900px){
  .iv.has-sel:not(.panel-pin) .iv-panel,.iv.props-open:not(.panel-pin) .iv-panel{display:none}
  .iv.panel-pin .iv-props{display:none}
  .iv.has-sel:not(.panel-pin) .iv-rail button.on,.iv.props-open:not(.panel-pin) .iv-rail button.on{background:none;color:var(--iv-mu);box-shadow:none}}
.iv:not(.has-sel):not(.props-open) .iv-props{display:none}
.iv-rail{display:flex;flex-direction:column;gap:2px;padding:8px 6px;border-left:1px solid var(--iv-bd);background:var(--iv-fd);overflow-y:auto;scrollbar-width:none}
.iv-rail button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border:0;border-radius:11px;background:none;color:var(--iv-mu);cursor:pointer;font-size:10.5px;font-weight:700;line-height:1.15}
.iv-rail button:hover{background:var(--iv-pn);color:var(--iv-tx)}.iv-rail button.on{background:var(--iv-pn);color:var(--iv-ac);box-shadow:0 1px 4px rgba(16,24,40,.08)}
.iv-panel{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--iv-bd);background:var(--iv-pn)}
.iv-pt{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}.iv-pt b{font-size:15px}
.iv-x{width:30px;height:30px;border:0;border-radius:8px;background:none;font-size:20px;color:var(--iv-mu);cursor:pointer;display:none}
.iv-pb{flex:1;overflow-y:auto;padding:4px 14px 18px;scrollbar-width:thin;overscroll-behavior:contain}
.iv-pb label{font-size:12px;font-weight:700;color:var(--iv-mu)}
.iv-pb input:not([type=checkbox]):not([type=range]):not([type=color]),.iv-pb select,.iv-pb textarea,.iv-props input:not([type=checkbox]):not([type=range]):not([type=color]),.iv-props select,.iv-props textarea{width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;border:1px solid var(--iv-bd);border-radius:9px;background:var(--iv-fd);font-size:13.5px;font-weight:500}
.iv-pb textarea,.iv-props textarea{resize:vertical;line-height:1.4}
.iv-f1{display:block;margin:10px 0 0}.iv-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.iv-f2 label{display:block}
.iv-search{margin-top:10px!important}
.iv-h4{margin:16px 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--iv-mu)}.iv-h4 small{text-transform:none;letter-spacing:0;font-weight:600}
.iv-hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--iv-mu)}.iv-note{margin:8px 0;padding:9px 11px;border-radius:10px;background:var(--accent-soft,#eef1fe);font-size:12.5px;line-height:1.45}
.iv-empty{margin:14px 0;font-size:13px;color:var(--iv-mu);text-align:center}
.iv-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.iv-pb{overflow-x:hidden}.iv-grid2 .ps-btn,.iv-grid2 .ps-go{justify-content:center;width:100%;min-width:0;white-space:normal;text-align:center;line-height:1.2}
.iv-wide{width:100%;justify-content:center;margin-top:6px}
.iv-link{border:0;background:none;color:var(--iv-ac);font-weight:700;cursor:pointer;padding:6px 0 0;font-size:12.5px}

/* templates */
.iv-tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.iv-tpl{min-width:0;display:flex;flex-direction:column;gap:5px;padding:5px;border:2px solid transparent;border-radius:12px;background:var(--iv-fd);cursor:pointer;text-align:left}
.iv-tpl canvas{width:100%;height:auto;border-radius:6px;box-shadow:0 2px 8px rgba(16,24,40,.14);background:#fff}
.iv-tpl span{font-size:11.5px;font-weight:700;line-height:1.25;color:var(--iv-tx)}
.iv-tpl:hover{border-color:color-mix(in srgb,var(--iv-ac) 45%,transparent)}.iv-tpl.on{border-color:var(--iv-ac)}

/* text */
.iv-addt{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.iv-addt button{padding:11px 12px;border:1px solid var(--iv-bd);border-radius:11px;background:var(--iv-fd);cursor:pointer;text-align:left;color:var(--iv-tx)}
.iv-addt button:hover,.iv-words button:hover{border-color:var(--iv-ac)}
.iv-words{display:flex;flex-direction:column;gap:5px}
.iv-words button{padding:8px 10px;border:1px solid var(--iv-bd);border-radius:10px;background:var(--iv-pn);cursor:pointer;text-align:left;font-size:15px;line-height:1.35;color:var(--iv-tx)}

/* photos / elements / background */
.iv-drop{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:6px;padding:18px 12px;border:2px dashed var(--iv-bd);border-radius:14px;cursor:pointer;text-align:center}
.iv-drop b{font-size:14px;color:var(--iv-tx)}.iv-drop small{font-weight:500}.iv-drop:hover,.iv-drop.drag{border-color:var(--iv-ac);background:var(--accent-soft,#eef1fe)}
.iv-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.iv-ph1{position:relative}.iv-ph1 button:first-child{display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid var(--iv-bd);border-radius:10px;overflow:hidden;cursor:pointer;background:var(--iv-fd)}
.iv-ph1 img{width:100%;height:100%;object-fit:cover}
.iv-ph1 .bgb{position:absolute;right:3px;bottom:3px;width:24px;height:24px;border:0;border-radius:7px;background:rgba(255,255,255,.92);cursor:pointer;font-size:12px;padding:0}
.iv-agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.iv-agrid button{padding:4px;border:1px solid var(--iv-bd);border-radius:10px;background:#fff;cursor:pointer}.iv-agrid button:hover{border-color:var(--iv-ac)}
.iv-agrid canvas{width:100%;height:auto;display:block}
.iv-ggrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.iv-ggrid button{aspect-ratio:1;border:1px solid var(--iv-bd);border-radius:9px;cursor:pointer}
.iv-pats{display:flex;flex-wrap:wrap;gap:5px}.iv-pats button{padding:6px 10px;border:1px solid var(--iv-bd);border-radius:999px;background:var(--iv-pn);cursor:pointer;font-size:12px;font-weight:700;color:var(--iv-tx)}
.iv-pats button.on{border-color:var(--iv-ac);color:var(--iv-ac);background:var(--accent-soft,#eef1fe)}

/* layers */
.iv-layers{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.iv-layers li{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--iv-bd);border-radius:10px;cursor:pointer;background:var(--iv-pn)}
.iv-layers li.on{border-color:var(--iv-ac);background:var(--accent-soft,#eef1fe)}.iv-layers li.over{border-top:3px solid var(--iv-ac)}
.iv-layers .g{color:var(--iv-mu);cursor:grab;font-size:12px}.iv-layers .ic{width:22px;text-align:center;font-weight:800;color:var(--iv-mu)}
.iv-layers .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.iv-layers button{border:0;background:none;cursor:pointer;font-size:13px;padding:2px 3px;opacity:.75}.iv-layers button:hover{opacity:1}

/* my designs */
.iv-saved{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.iv-sv{position:relative}.iv-sv button:first-child{display:flex;flex-direction:column;gap:3px;width:100%;padding:6px;border:1px solid var(--iv-bd);border-radius:12px;background:var(--iv-fd);cursor:pointer;text-align:left;color:var(--iv-tx)}
.iv-sv img{width:100%;border-radius:6px;background:#fff}.iv-sv b{font-size:12px}.iv-sv small{font-size:10.5px;color:var(--iv-mu)}
.iv-sv .del{position:absolute;top:10px;right:10px;width:26px;height:26px;border:0;border-radius:8px;background:rgba(255,255,255,.92);cursor:pointer;padding:0}

/* work area */
.iv-work{display:flex;flex-direction:column;min-width:0;min-height:0;background:color-mix(in srgb,var(--iv-fd) 70%,#d8dde8)}
.iv-stage{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:20px;position:relative}
.iv-stage.drag{outline:3px dashed var(--iv-ac);outline-offset:-10px}
.iv-pagebox{position:relative;box-shadow:0 10px 34px rgba(15,23,42,.22);touch-action:none;background:#fff;flex:none}
.iv-cv{display:block}
.iv-ov{position:absolute;inset:0;pointer-events:none}
.iv-safe{position:absolute;border:1px dashed rgba(79,110,247,.45);pointer-events:none}
.iv-sel{position:absolute;border:1.5px solid var(--iv-ac);box-sizing:border-box;pointer-events:none;transform-origin:center}
.iv-sel.locked{border-style:dashed;border-color:#94a3b8}.iv-sel.multi{border-style:dashed}
.iv-sel-one{position:absolute;border:1px solid color-mix(in srgb,var(--iv-ac) 60%,transparent)}
.iv-h{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1.5px solid var(--iv-ac);border-radius:50%;background:#fff;pointer-events:auto;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.iv-h.nw{left:0;top:0;cursor:nwse-resize}.iv-h.n{left:50%;top:0;cursor:ns-resize}.iv-h.ne{left:100%;top:0;cursor:nesw-resize}.iv-h.e{left:100%;top:50%;cursor:ew-resize}
.iv-h.se{left:100%;top:100%;cursor:nwse-resize}.iv-h.s{left:50%;top:100%;cursor:ns-resize}.iv-h.sw{left:0;top:100%;cursor:nesw-resize}.iv-h.w{left:0;top:50%;cursor:ew-resize}
.iv-h.n,.iv-h.s{width:18px;height:8px;margin:-4px 0 0 -9px;border-radius:5px}.iv-h.e,.iv-h.w{width:8px;height:18px;margin:-9px 0 0 -4px;border-radius:5px}
.iv-rot{position:absolute;left:50%;top:-30px;width:20px;height:20px;margin-left:-10px;border:1.5px solid var(--iv-ac);border-radius:50%;background:#fff;pointer-events:auto;cursor:grab}
.iv-rot::before{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--iv-ac);font-style:normal}
.iv-rot::after{content:"";position:absolute;left:50%;top:20px;height:10px;border-left:1.5px solid var(--iv-ac)}
.iv-lk{position:absolute;top:-22px;right:0;font-size:12px}
.iv-guide{position:absolute;background:#e5367e}.iv-guide.v{width:1px}.iv-guide.h{height:1px}
.iv-marq{position:absolute;border:1px solid var(--iv-ac);background:color-mix(in srgb,var(--iv-ac) 12%,transparent)}
.iv-inline{position:absolute;pointer-events:auto;background:rgba(255,255,255,.65);border:1.5px solid var(--iv-ac);outline:none;resize:none;padding:0;margin:0;overflow:hidden;transform-origin:center;box-sizing:border-box}

/* page strip */
.iv-pages{display:flex;align-items:flex-end;gap:10px;padding:10px 14px;border-top:1px solid var(--iv-bd);background:var(--iv-pn);overflow-x:auto;scrollbar-width:thin;flex:none}
.iv-pg{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;flex:none}
.iv-pg canvas{border-radius:4px;border:2px solid transparent;box-shadow:0 1px 4px rgba(16,24,40,.18);background:#fff}
.iv-pg.on canvas{border-color:var(--iv-ac)}.iv-pg span{font-size:11px;font-weight:700;color:var(--iv-mu);max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-pgm{position:absolute;top:-4px;right:-8px;display:flex;flex-direction:column;gap:2px}
.iv-pgm button{width:22px;height:22px;border:1px solid var(--iv-bd);border-radius:7px;background:var(--iv-pn);cursor:pointer;font-size:11px;padding:0}
.iv-pgadd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:56px;height:64px;border:2px dashed var(--iv-bd);border-radius:8px;background:none;cursor:pointer;font-size:20px;color:var(--iv-mu);flex:none}
.iv-pgadd span{font-size:10px;font-weight:700}.iv-pgadd:hover{border-color:var(--iv-ac);color:var(--iv-ac)}

/* properties (right) */
.iv-props{border-left:1px solid var(--iv-bd);overflow-y:auto;padding:0 14px 18px;background:var(--iv-pn);scrollbar-width:thin;overscroll-behavior:contain}
.iv-ph{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 0 8px;background:var(--iv-pn);border-bottom:1px solid var(--iv-bd)}
.iv-ph b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-acts{display:flex;gap:4px}
.iv-sec{padding:12px 0;border-bottom:1px solid var(--iv-bd)}.iv-sec:last-child{border-bottom:0}
.iv-sec h4{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--iv-mu)}.iv-sec h4 small{text-transform:none;letter-spacing:0;font-weight:600}
.iv-ib{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--iv-bd);border-radius:9px;background:var(--iv-pn);cursor:pointer;font-size:13px;font-weight:700;color:var(--iv-tx)}
.iv-ib:hover{border-color:var(--iv-ac)}.iv-ib.on{border-color:var(--iv-ac);background:var(--accent-soft,#eef1fe);color:var(--iv-ac)}
.iv-tg{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}.iv-al{margin-top:6px}
.iv-line{display:flex;align-items:flex-end;gap:8px;margin-top:8px}.iv-line .iv-num{flex:1}.iv-line .iv-tg{margin:0}
.iv-grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.iv-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.iv-grid4 .iv-ib{padding:0 2px;font-size:11px}.iv-alg{margin-top:8px}
.iv-num{display:flex;flex-direction:column;font-size:11px;font-weight:700;color:var(--iv-mu)}.iv-num input{margin-top:3px!important}
.iv-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:8px;margin-top:6px}.iv-row label{font-size:12px;font-weight:700;color:var(--iv-mu)}
.iv-row>div{display:flex;align-items:center;gap:8px}.iv-row input[type=range]{flex:1;min-width:0;accent-color:var(--iv-ac)}.iv-row output{min-width:34px;flex:none;text-align:right;font-size:11.5px;font-weight:700;color:var(--iv-mu)}
.iv-row.off{opacity:.4;pointer-events:none}
.iv-sw{display:flex;flex-wrap:wrap;gap:5px}.iv-sw button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.iv-sw button.on{box-shadow:0 0 0 2px var(--iv-pn),0 0 0 4px var(--iv-ac)}
.iv-sw .m.gold{background:linear-gradient(135deg,#7a5a12,#f6e7a6 45%,#b8862b 70%,#e8c66a)}.iv-sw .m.rosegold{background:linear-gradient(135deg,#8c4a3c,#f7d3c4 45%,#b76e5d)}
.iv-sw .m.silver{background:linear-gradient(135deg,#5d6470,#f4f6f8 45%,#8b929c)}.iv-sw .m.copper{background:linear-gradient(135deg,#6b3a1e,#f0c39a 45%,#9c5a2c)}
.iv-cpick{position:relative;width:22px;height:22px;border-radius:50%;overflow:hidden;background:conic-gradient(red,#ff0,lime,cyan,blue,#f0f,red);cursor:pointer}
.iv-cpick input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.iv-sw-t{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--iv-tx)!important}
.iv-fontbtn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 11px;border:1px solid var(--iv-bd);border-radius:9px;background:var(--iv-fd);cursor:pointer;font-size:16px;color:var(--iv-tx)}
.iv-fontbtn span{font:12px sans-serif;color:var(--iv-mu)}
.iv-tok{margin-top:6px!important;font-size:12.5px!important}
.iv-masks{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.iv-masks button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border:1px solid var(--iv-bd);border-radius:9px;background:var(--iv-pn);cursor:pointer;font-size:10.5px;font-weight:700;color:var(--iv-tx)}
.iv-masks button.on{border-color:var(--iv-ac);background:var(--accent-soft,#eef1fe)}
.mk{display:block;width:22px;height:22px;background:var(--iv-mu)}.mk.round{border-radius:6px}.mk.circle{border-radius:50%}.mk.arch{border-radius:11px 11px 0 0}
.mk.heart{clip-path:path('M11 20C-4 10 4 0 11 6C18 0 26 10 11 20Z')}.mk.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* popovers, menus, modals, toast */
.iv-fp,.iv-menu,.iv-ctx{position:fixed;z-index:500;background:var(--panel,#fff);color:var(--text,#1e2635);border:1px solid var(--border,#e4e9f2);border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.25)}
.iv-fp{width:290px;max-height:420px;display:flex;flex-direction:column;padding:8px}
.iv-fp input{padding:8px 10px;border:1px solid var(--border,#e4e9f2);border-radius:9px;background:var(--field,#f4f6fb);font:inherit;color:inherit}
.iv-fl{overflow-y:auto;margin-top:6px}.iv-fl h5{margin:10px 6px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5a6377)}
.iv-fl button{display:block;width:100%;padding:7px 9px;border:0;border-radius:8px;background:none;text-align:left;font-size:17px;cursor:pointer;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-fl button:hover,.iv-fl button.on{background:var(--accent-soft,#eef1fe)}
.iv-menu{width:300px;padding:8px;max-height:calc(100vh - 120px);overflow-y:auto}
.iv-menu h5{margin:8px 8px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5a6377)}
.iv-menu button{display:block;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;text-align:left;cursor:pointer;font:inherit;font-size:13.5px;font-weight:700;color:inherit}
.iv-menu button small{display:block;margin-left:24px;font-size:11.5px;font-weight:500;color:var(--muted,#5a6377)}.iv-menu button:hover{background:var(--accent-soft,#eef1fe)}
.iv-menu .iv-hint{margin:2px 10px 6px}
.iv-ctx{min-width:200px;padding:6px}.iv-ctx button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:none;cursor:pointer;font:inherit;font-size:13px;color:inherit}
.iv-ctx button:hover:not(:disabled){background:var(--accent-soft,#eef1fe)}.iv-ctx button:disabled{opacity:.4}.iv-ctx kbd{font:11px ui-monospace,monospace;color:var(--muted,#5a6377)}
.iv-modal{position:fixed;inset:0;z-index:520;display:grid;place-items:center;padding:16px;background:rgba(15,20,32,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.iv-mc{width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;padding:22px;border-radius:18px;background:var(--panel,#fff);color:var(--text,#1e2635);box-shadow:0 24px 70px rgba(0,0,0,.3)}
.iv-modal.small .iv-mc{max-width:420px}.iv-mc h3{margin:0 0 8px;font-size:18px}.iv-mc p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--muted,#5a6377)}
.iv-mc label{display:block;font-size:12px;font-weight:700;color:var(--muted,#5a6377)}.iv-mc select,.iv-mc textarea{width:100%;box-sizing:border-box;margin-top:4px;padding:9px 11px;border:1px solid var(--border,#e4e9f2);border-radius:10px;background:var(--field,#f4f6fb);font:inherit;color:inherit}
.iv-mb{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.iv-mb .ps-go{width:auto;padding:10px 18px;font-size:14px}
.iv-gl{font-size:14px!important}
.iv-toast{position:fixed;left:50%;bottom:24px;z-index:600;transform:translate(-50%,20px);max-width:min(560px,calc(100vw - 32px));padding:11px 16px;border-radius:12px;background:#111827;color:#fff;font-size:13.5px;line-height:1.45;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.iv-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}.iv-toast button{margin-left:8px;padding:4px 10px;border:0;border-radius:8px;background:#fff;color:#111;font-weight:700;cursor:pointer}

/* preview */
.iv-preview{background:radial-gradient(circle at 50% 30%,#3a3f4b,#14161c)}.iv-preview .iv-mc{max-width:none;width:100%;height:100%;padding:0;background:none;box-shadow:none;display:flex;flex-direction:column;color:#fff}
.iv-pv-top{display:flex;justify-content:space-between;align-items:center;padding:6px}.iv-preview .iv-x{display:block;color:#fff;font-size:26px}
.iv-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(255,255,255,.12)}.iv-seg button{padding:7px 14px;border:0;border-radius:9px;background:none;color:#e5e7eb;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.iv-seg button.on{background:#fff;color:#111}
.iv-pv-stage{flex:1;min-height:0;display:grid;place-items:center;overflow:auto}
.iv-card canvas{display:block;box-shadow:0 2px 3px rgba(0,0,0,.25),0 30px 60px rgba(0,0,0,.5);}
.iv-phone{width:min(360px,calc(100vw - 40px));padding:46px 12px 40px;border-radius:44px;background:#0b0b0d;box-shadow:0 0 0 3px #2a2a2e,0 30px 70px rgba(0,0,0,.6)}
.iv-phone-bar{display:flex;flex-direction:column;margin:0 4px 10px;color:#fff}.iv-phone-bar b{font-size:13px}.iv-phone-bar small{font-size:11px;color:#9ca3af}
.iv-phone canvas{display:block;margin:0 auto;border-radius:10px}
.iv-pv-all{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:20px}.iv-pv-all canvas{box-shadow:0 20px 40px rgba(0,0,0,.45)}
.iv-pv-nav{display:flex;justify-content:center;align-items:center;gap:16px;padding:10px;font-weight:700}
.iv-pv-nav button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:22px;cursor:pointer}.iv-pv-nav button:disabled{opacity:.3}

/* narrower screens: properties under the canvas column, then phone sheets */
/* the editor sizes itself from its own width (inside the page column or full screen), not the window */
.iv{container-type:inline-size;container-name:iv;position:relative}
@container iv (max-width:1150px){.iv-main{grid-template-columns:minmax(0,1fr) 276px 68px}.iv-rail button{font-size:10px}}
@container iv (max-width:800px){.iv-main{grid-template-columns:minmax(0,1fr) 250px 64px}.iv-rail button{font-size:9.5px}}
/* the page settings live in the right column too: with nothing selected they open from the Page button */
.iv-pagebtn{display:inline-flex}
@media (max-width:899px){
  .iv{height:calc(100vh - 80px);min-height:520px;border-radius:12px}
  .iv-main{display:flex;flex-direction:column;position:relative}
  .iv-work{flex:1}.iv-stage{padding:12px}
  .iv-rail{order:3;flex:none;flex-direction:row;justify-content:flex-start;overflow-x:auto;border-left:0;border-top:1px solid var(--iv-bd);padding:4px;gap:0}
  .iv-rail button{flex:none;min-width:64px;padding:6px 4px;font-size:10px}
  .iv-panel{position:absolute;left:0;right:0;bottom:64px;height:62%;z-index:25;border:1px solid var(--iv-bd);border-radius:16px 16px 0 0;box-shadow:0 -10px 30px rgba(15,23,42,.18);transform:translateY(calc(100% + 70px));visibility:hidden;transition:transform .22s,visibility .22s}
  .iv.sheet .iv-panel{transform:none;visibility:visible}.iv-x{display:block}
  .iv-props{position:absolute;left:8px;right:8px;bottom:70px;max-height:46%;z-index:20;border:1px solid var(--iv-bd);border-radius:14px;box-shadow:0 14px 40px rgba(15,23,42,.2)}
  .iv.has-sel .iv-props,.iv.props-open .iv-props{display:block}
  .iv.sheet .iv-props{display:none}
  .iv-top{gap:6px;padding:6px 8px}.iv-tc{display:none}.iv-name{max-width:150px}.iv-tr .ps-btn{padding:7px 9px}.iv-full-b{display:none}
  /* phones: the editor runs edge to edge, and the page's floating buttons sit above the tool bar */
  #studio.iv-host{margin-inline:calc(50% - 50vw)}
  .iv{border-radius:0;border-inline:0}
  .iv-tr{flex-wrap:nowrap;min-width:0;gap:5px}
  html:has(.iv) .tb-help{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  html:has(.iv) .to-top{bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  html:has(.iv.sheet) .tb-help,html:has(.iv.has-sel) .tb-help,html:has(.iv.props-open) .tb-help{display:none}
}
@media (max-width:420px){.iv-bl{display:none}.iv-tr .ps-btn{padding:7px 8px}.iv-dl{padding:8px 12px!important;font-size:13.5px!important}}
@media (prefers-reduced-motion:reduce){.iv-panel,.iv-toast{transition:none}}