/* Demo Studio — styles.css */
:root{
  --bar:#ffffff; --border:#e7ecf6; --ink:#1a243a; --muted:#7a83a1; --accent:#355cff;
  --dim:.35; --panel-w:300px; --tools-w:52px; --dur:220ms; --ease:cubic-bezier(.22,.61,.36,1);
  --radius:12px; --shadow:0 16px 42px rgba(21,35,74,.10);
  --xs:11.5px; --sm:12.5px; --md:13.5px; --lg:15px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,ui-sans-serif,Segoe UI,Roboto,Helvetica,Arial;background:#f6f8fe;color:var(--ink)}

/* Top bar */
.topbar{position:fixed; inset:0 0 auto 0; height:60px; background:var(--bar);
  border-bottom:1px solid var(--border); display:grid; grid-template-columns:1fr 1fr 1fr;
  align-items:center; padding:0 10px; z-index:50; font-size:var(--sm)}
.titleInput{border:1px solid var(--border); border-radius:10px; padding:.35rem .6rem; min-width:220px; background:#fff}
.top-center{display:flex; align-items:center; gap:10px; justify-content:center; white-space:nowrap; overflow:hidden; padding:0 4px}
.topbar.condensed .chip span{display:none}
.topbar.condensed .divider{display:none}
.topbar.ultra .chip{padding:0 .55rem}
.topbar.ultra .chip i{width:1em}
.chip{display:inline-flex; align-items:center; gap:.5rem; height:36px; padding:0 .75rem; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-weight:700; line-height:1; white-space:nowrap}
.chip i{ display:inline-grid; place-items:center; width:1.15em; }
.chip.xs{ height:32px; }
.chip.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.chip:hover{ box-shadow:0 0 0 3px rgba(53,92,255,.10); }
.chip:focus-visible{ outline:2px solid rgba(53,92,255,.45); outline-offset:2px; }
.divider{width:1px;height:18px;background:var(--border)}

/* App grid */
.app{position:fixed; top:60px; bottom:0; left:0; right:0; display:grid; grid-template-columns:1fr auto}
.rightRail{width:calc(var(--tools-w) + var(--panel-w)); transition:width var(--dur) var(--ease); display:grid; grid-template-columns:var(--tools-w) var(--panel-w)}
.app:not(.inspector-open){--panel-w:0px}

/* Stage */
.stageWrap{display:grid; grid-template-rows:1fr 150px; height:100%; gap:10px; padding:10px}
.browser{height:100%; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.chrome{height:40px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; padding:0 .6rem; background:#f9fbff}
.dots{display:flex; gap:.3rem}.dot{width:9px;height:9px;border-radius:999px}.dot.r{background:#ff746e}.dot.y{background:#ffd66e}.dot.g{background:#64d489}
.navBtns{display:flex; gap:.25rem}
.navBtn{border:1px solid var(--border); background:#fff; border-radius:10px; padding:.2rem .5rem; cursor:pointer}
.titlePill{margin:0 auto; min-width:34%; height:22px; border-radius:999px; background:#eef2ff; border:1px solid #e6ecfb; display:grid; place-items:center; color:#5b6484; font-weight:700; font-size:var(--sm)}
.player{height:calc(100% - 40px); display:flex}
.canvas{position:relative; width:100%; height:100%; background:#fff; overflow:hidden; touch-action:none}
#bgImage{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fafafa}

/* Overlay */
.overlay{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.overlay .dim{fill:rgba(0,0,0,var(--dim))}
.outline{fill:none; stroke:#355cff; stroke-width:2}

/* Tooltip */
.tip{position:absolute; min-width:220px; max-width:92vw; background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:.65rem .8rem; box-shadow:0 14px 36px rgba(16,24,40,.12); transform:translate(-50%,-50%); z-index:3;
  font-size:var(--sm); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);}
.tip[data-style="dark"]{background:#141a2f;border-color:#273458;color:#e6e8ee}
.tip .pill{font-size:var(--xs);padding:.12rem .45rem;border:1px solid var(--border);border-radius:999px;color:#566082}
.tip-h{display:flex;gap:.5rem;align-items:center}.tip-a{display:flex;gap:.4rem;align-items:center}.tip-a .sp{flex:1}
.tip::after{content:""; position:absolute; width:0;height:0; border:8px solid transparent}
.tip.tip--arrow-left::after   { right:-16px; top:50%; transform:translateY(-50%); border-left-color: currentColor; }
.tip.tip--arrow-right::after  { left:-16px;  top:50%; transform:translateY(-50%); border-right-color: currentColor; }
.tip.tip--arrow-top::after    { left:50%; bottom:-16px; transform:translateX(-50%); border-top-color: currentColor; }
.tip.tip--arrow-bottom::after { left:50%; top:-16px;    transform:translateX(-50%); border-bottom-color: currentColor; }

.btn{--bg:#fff;--fg:#0f1428;background:var(--bg);color:var(--fg);border:1px solid var(--border);padding:.45rem .7rem;border-radius:10px;font-weight:700;cursor:pointer;font-size:var(--sm)}
.btn.tiny{padding:.35rem .55rem}
.btn.primary{--bg:var(--accent);--fg:#fff}.btn.ghost{--bg:#fff}

/* Handles / drag */
.handles{position:absolute; inset:0; z-index:4; pointer-events:none}
.h{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #3b82f6;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.15);pointer-events:auto; touch-action:none}
#pulseRing{touch-action:none}

/* Snap guide lines */
.guide{position:absolute; background:#7aa2ff; opacity:.55; z-index:2; pointer-events:none}
.guide.x{height:1px; width:100%}
.guide.y{width:1px; height:100%}

/* Steps */
.stepsTray{border:1px solid var(--border); background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden}
.stepsHead{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--border);font-size:var(--sm)}
.addBtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:.35rem .55rem;cursor:pointer;font-size:var(--sm)}
.stepStrip{display:flex;gap:10px;padding:8px;overflow:auto;height:calc(100% - 44px)}
.thumb{min-width:180px; height:100%; border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;font-size:var(--xs);display:flex;flex-direction:column}
.thumb.active{outline:2px solid var(--accent)}
.thumb .shot{flex:1;background:#f3f6ff;display:grid;place-items:center}
.thumb .shot img{width:100%;height:100%;object-fit:contain;background:#f8f9ff;display:block}
.thumb .meta{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-top:1px solid var(--border)}
.thumb .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:115px}
.thumb .ops button{border:none;background:transparent;cursor:pointer;color:#6b7595}

/* Right rail */
.tools{height:100%; background:#fff; border-left:1px solid var(--border); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; padding:8px 6px; gap:6px}
.tool{width:40px;height:40px;border:1px solid var(--border);background:#fff;border-radius:12px;display:grid;place-items:center;cursor:pointer;font-size:15px}
.tool.active{box-shadow:0 0 0 3px rgba(53,92,255,.18); border-color:#cdd8ff}
.toolDivider{width:100%;height:1px;background:var(--border);margin:4px 0}
.toolGrow{flex:1}

/* Inspector */
.inspector{height:100%; background:#fff; overflow:hidden; opacity:1; transition:opacity var(--dur) var(--ease)}
.app:not(.inspector-open) .inspector{opacity:0; pointer-events:none}
.inspectorHead{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:8px 10px; z-index:1; font-size:var(--sm)}
.panels{height:100%; overflow:auto; padding:8px 10px}
.panel{display:none; animation:fadeIn var(--dur) var(--ease)}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:.5; transform:translateY(4px)}to{opacity:1; transform:translateY(0)}}

/* Form bits */
details{border:1px solid var(--border); border-radius:10px; padding:8px; margin:8px 0; background:#fbfcff;font-size:var(--sm)}
details>summary{list-style:none;cursor:pointer;font-weight:700;color:#2a3553}
details>summary::-webkit-details-marker{display:none}
.row{display:flex; align-items:center; gap:8px; margin:8px 0}
.row>label{flex:1; color:var(--muted); font-size:var(--sm)}
.row input[type="text"], .row input[type="url"], .row input[type="color"], .row textarea, .row select{flex:1; border:1px solid var(--border); border-radius:10px; padding:.45rem .55rem; background:#fff; font-size:var(--sm)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.select{width:100%}
.compact input[type="range"]{flex:1}
input[type="range"]{width:100%}
output{min-width:34px;text-align:right;color:#8a93ad;font-size:var(--xs)}
.switch{position:relative;width:34px;height:20px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;cursor:pointer;inset:0;background:#d7dbe7;border-radius:999px;transition:.15s}
.switch span:before{content:"";position:absolute;height:14px;width:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + span{background:#4f6ef7}
.switch input:checked + span:before{transform:translateX(14px)}

/* Modal */
.modal{border:none;border-radius:14px;padding:0;max-width:560px;width:92vw;box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(12,18,44,.4)}
.modalHead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.modalBody{padding:12px 14px;font-size:var(--sm)}
.modalBody .muted{color:#7e88a7}
.modalFoot{padding:10px 14px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}

.hidden{display:none !important}
kbd{padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:#fff}

/* Checklist overlay */
.checklist{position:absolute; width:320px; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); z-index:5; padding:10px}
.cl-head{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.cl-progress{display:flex;align-items:center;gap:8px;margin:8px 0}
.cl-bar{flex:1;height:6px;background:#eef2ff;border-radius:999px;overflow:hidden}
.cl-fill{display:block;height:100%;background:var(--accent)}
.cl-percent{font-size:var(--sm);color:#6c7595}
.cl-list{list-style:none;margin:8px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow:auto}
.cl-item{display:flex;align-items:center;gap:8px}
.cl-badge{min-width:26px;height:26px;border-radius:999px;border:1px solid var(--border);display:grid;place-items:center;font-weight:700;color:#627099;background:#fff}
.cl-item.done .cl-badge{background:#eaf0ff;border-color:#cfd9ff}
.cl-item .cl-name{flex:1}
.cl-item button{border:none;background:transparent;color:#6b7595;cursor:pointer}
.cl-cta{width:100%}
.checklist.bl{left:12px;bottom:12px}
.checklist.br{right:12px;bottom:12px}
.checklist.tl{left:12px;top:12px}
.checklist.tr{right:12px;top:12px}

/* Glide transitions */
.glide #holeR,.glide #holeC,.glide #tip,.glide #ring{transition:all var(--dur) var(--ease)}

/* Pulse ring */
.ring{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);border-radius:999px;border:3px solid var(--accent);opacity:.9;pointer-events:none;animation:pulse 1.2s ease-out infinite}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}

/* Accessibility & motion */
:focus-visible{outline:2px solid rgba(53,92,255,.45); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}