/* InnoQuest design system v2. Light is the default; dark applies to the app chrome only (slides stay light).
   --red (#FF0F0F) is for the logo, big numbers, display type 24px+ and big fills, never small text.
   --accent (red-ink) is for small red text, links and the primary button fill. Focus is always blue.
   Type: Chakra Petch for one display moment per screen, IBM Plex Sans Thai for everything else. */
:root{
  --red:#FF0F0F;
  --ink:#000000; --ink-2:#33332E; --ink-3:#62625B;
  --accent:#D10000; --accent-d:#B00000; --accent-t:#F6F6F3; --accent-m:#DADAD3; --on-accent:#FFFFFF;
  --paper:#FBFBF9; --surface:#FFFFFF; --hover:#F6F6F3; --stage:#E5E5E0; --tile:#F6F6F3;
  --line:#DADAD3; --line-h:#B4B4AB;
  --inv-bg:#262622; --inv-fg:#FFFFFF;
  --danger:#B00000; --ok:#103C25; --ok-pale:#C7F0DA;
  --focus:#435EE5; --hl:rgba(209,0,0,.16);
  --font:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Chakra Petch','IBM Plex Sans Thai',system-ui,sans-serif;
  --mono:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --yellow:var(--red);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ink:#FFFFFF; --ink-2:#D9D9D2; --ink-3:#A3A39B;
  --accent:#FF4D4D; --accent-d:#FF7A7A; --accent-t:#1D1D1A; --accent-m:#3A3A35; --on-accent:#111110;
  --paper:#161614; --surface:#111110; --hover:#1F1F1C; --stage:#0C0C0B; --tile:#1D1D1A;
  --line:#2E2E2A; --line-h:#4C4C46; --inv-bg:#2A2A26; --inv-fg:#FFFFFF;
  --danger:#FF8A80; --ok:#7FDDAA; --ok-pale:#103C25; --hl:rgba(255,77,77,.28); color-scheme:dark}}
:root[data-theme="dark"]{
  --ink:#FFFFFF; --ink-2:#D9D9D2; --ink-3:#A3A39B;
  --accent:#FF4D4D; --accent-d:#FF7A7A; --accent-t:#1D1D1A; --accent-m:#3A3A35; --on-accent:#111110;
  --paper:#161614; --surface:#111110; --hover:#1F1F1C; --stage:#0C0C0B; --tile:#1D1D1A;
  --line:#2E2E2A; --line-h:#4C4C46; --inv-bg:#2A2A26; --inv-fg:#FFFFFF;
  --danger:#FF8A80; --ok:#7FDDAA; --ok-pale:#103C25; --hl:rgba(255,77,77,.28); color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--paper);color:var(--ink-2);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.editor{background:var(--paper);color:var(--ink-2);font:400 16px/1.5 var(--font);height:100%;overflow:hidden;display:grid;grid-template-rows:56px minmax(0,1fr)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--inv-bg);color:var(--inv-fg);padding:8px 16px;z-index:100;border-radius:8px}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.topbar{display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;white-space:nowrap}
.brand span{font-weight:400;color:var(--ink-3)}
.deck-name{flex:1;max-width:340px;min-width:0}
.deck-name input{width:100%;border:1px solid transparent;background:transparent;border-radius:8px;padding:6px 12px;font-weight:600;font-size:16px;color:var(--ink)}
.deck-name input:hover{border-color:var(--line)}
.deck-name input:focus{background:var(--surface);border-color:var(--focus)}
.spacer{flex:1}
.viewtoggle{display:none;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--tile)}
.viewtoggle button{border:0;background:transparent;padding:4px 16px;border-radius:999px;font-weight:600;font-size:14px}
.viewtoggle button[aria-pressed=true]{background:var(--inv-bg);color:var(--inv-fg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-h);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;line-height:1.2;transition:background .12s,border-color .12s}
a.btn{text-decoration:none}
a.btn:hover,a.btn:focus-visible{text-decoration:none}
.btn:hover{border-color:var(--ink-3);background:var(--hover)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.add{border-style:dashed;color:var(--accent);background:transparent}
.btn.add:hover{background:var(--accent-t);border-color:var(--accent)}
.mini{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:4px 8px;border-radius:8px}
.mini:hover{background:var(--accent-t)}
.x{flex:none;width:32px;height:36px;border:0;background:transparent;border-radius:8px;color:var(--ink-3);font-size:20px;line-height:1}
.x:hover{background:var(--accent-t);color:var(--danger)}

/* menus: the one floating card, so it keeps a shadow */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:232px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 16px 32px -12px rgba(0,0,0,.28);z-index:30}
.menu-pop[hidden]{display:none}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:8px 12px;border-radius:8px;font-weight:500;color:var(--ink)}
.menu-pop button:hover{background:var(--accent-t)}
.menu-pop small{display:block;color:var(--ink-3);font-weight:400;font-size:12px}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:8px 0}

/* layout */
.app{display:grid;grid-template-columns:var(--split,46%) 12px minmax(0,1fr);min-height:0}
.divider{cursor:col-resize;position:relative;background:var(--paper);border-right:1px solid var(--line);touch-action:none}
.divider::after{content:"";position:absolute;left:3px;top:50%;width:4px;height:44px;margin-top:-22px;border-radius:2px;background:var(--line-h)}
.divider:hover::after,.divider:focus-visible::after,.divider.drag::after{background:var(--red)}

/* toolkit */
.toolkit{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--paper)}
.tk-scroll{flex:1;overflow:auto;padding:32px 32px 32px}
.tk-body{max-width:640px;margin:0 auto}
.tk-body.swap{animation:swap .22s ease-out}
@keyframes swap{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tk-title{font:700 32px/1.2 var(--font);color:var(--ink);margin:0 0 8px;outline:none}
.tk-meta{margin:0;color:var(--ink-3);font-size:14px}
.tk-frame{margin:24px 0 16px;padding:16px 24px;background:var(--tile);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:16px}
.tk-frame h2{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 4px}
.tk-frame p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
details.tk-q{margin:0 0 8px;border-bottom:1px solid var(--line);padding-bottom:8px}
details.tk-q summary{cursor:pointer;font-weight:600;color:var(--ink);padding:8px 0;list-style:none;display:flex;align-items:center;gap:8px}
details.tk-q summary::-webkit-details-marker{display:none}
details.tk-q summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);transition:transform .15s}
details.tk-q[open] summary::before{transform:rotate(45deg)}
details.tk-q ul{margin:4px 0 0;padding-left:24px;font-size:14px;line-height:1.55;color:var(--ink-2)}
details.tk-q li{margin:4px 0}
.blk{margin:32px 0 0}
.blk h3{font-weight:600;font-size:22px;line-height:1.25;color:var(--ink);margin:0 0 4px}
.lede{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 16px}
.fld{margin:0 0 16px}
.fld-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-height:24px}
.fld label,.lbl{font-weight:600;font-size:14px;color:var(--ink)}
.fld-meta{display:flex;align-items:center;gap:8px}
.count{font-size:12px;font-weight:500;color:var(--ink-3);visibility:hidden;font-variant-numeric:tabular-nums}
.fld.near .count{visibility:visible}
.fld.full .count{color:var(--danger);font-weight:600}
.hint{font-size:14px;line-height:1.45;color:var(--ink-3);margin:0 0 8px}
input[type=text],textarea{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line-h);border-radius:8px;padding:8px 12px;line-height:1.5;resize:vertical;transition:border-color .12s}
input[type=text]:hover,textarea:hover{border-color:var(--ink-3)}
input[type=text]:focus,textarea:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.adorn{position:relative}
.adorn i{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink-3);font-weight:600;pointer-events:none}
.adorn i.pre{left:12px}.adorn i.suf{right:12px}
.adorn.has-pre input{padding-left:28px}.adorn.has-suf input{padding-right:32px}
.polish{margin:8px 0 0;padding:12px 16px;background:var(--tile);border:1px dashed var(--line-h);border-radius:16px;font-size:14px}
.polish[hidden]{display:none}
.polish q{display:block;font-size:14px;margin:4px 0 12px;quotes:none;color:var(--ink)}
.polish .acts{display:flex;gap:8px;flex-wrap:wrap}
.polish p{margin:0 0 4px}
.polish .fine{color:var(--ink-3);font-size:13px;margin:8px 0 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row{display:grid;gap:8px;align-items:start;margin-bottom:8px}
.row.r2{grid-template-columns:150px 1fr 32px}
.row.r1{grid-template-columns:1fr 32px}
.row.rf{grid-template-columns:1fr 92px 32px}
.row.rm{grid-template-columns:110px 1fr 32px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.cards.two{grid-template-columns:1fr 1fr}
.card{position:relative;display:block}
.card input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.card-in{display:block;height:100%;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-color .12s,background .12s}
.card:hover .card-in{border-color:var(--line-h)}
.card input:checked + .card-in{border-color:var(--ink);background:var(--tile);box-shadow:inset 0 0 0 1px var(--ink)}
.card input:focus-visible + .card-in{outline:3px solid var(--focus);outline-offset:2px}
.card b{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:2px}
.card small{display:block;font-size:12px;line-height:1.4;color:var(--ink-2)}
.out{margin:16px 0 0;padding:16px 24px;background:var(--inv-bg);color:var(--inv-fg);border-radius:16px}
.out .big{font-weight:700;font-size:28px;font-variant-numeric:tabular-nums;line-height:1.15}
.out .sub{color:rgba(255,255,255,.78);font-size:14px;margin-top:2px}
.out.elev{font-size:16px;line-height:1.5;background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.out.elev p{margin:0 0 8px}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tri div{padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.1)}
.tri b{display:block;font-weight:700;font-variant-numeric:tabular-nums;font-size:22px;line-height:1.15}
.tri span{font-size:12px;color:rgba(255,255,255,.78)}
.checks{margin:8px 0 0;padding:0;list-style:none;font-size:14px}
.checks li{margin:4px 0;padding-left:24px;position:relative;font-size:14px;color:var(--inv-fg)}
.checks li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--red)}
.status{font-weight:600;font-size:14px;margin:4px 0 0}
.status.ok{color:var(--ok)}.status.bad{color:var(--danger)}.status.mid{color:var(--ink-2)}
.coach{margin-top:32px;padding-top:16px;border-top:1px solid var(--line)}
.tk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 32px;border-top:1px solid var(--line);background:var(--surface)}
.tk-nav .btn{max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;gap:8px}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-3);background:transparent;padding:0}
.dots button.done{background:var(--ink);border-color:var(--ink)}
.dots button[aria-current=true]{background:var(--red);border-color:var(--red);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--ink-3)}

/* canvas pane (the stage is a quiet neutral; slides stay light in every theme) */
.canvas-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--stage);color:var(--ink)}
.cv-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;flex-wrap:wrap}
.cv-grp{display:flex;align-items:center;gap:8px}
.zoom{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line-h);border-radius:999px;overflow:hidden}
.zoom button{border:0;background:transparent;width:32px;height:32px;font-weight:700;font-size:17px;color:var(--ink)}
.zoom button:hover{background:var(--hover)}
.zoom output{min-width:52px;text-align:center;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.stage{flex:1;min-height:0;overflow:auto;display:flex;padding:8px 24px 24px}
.stage-box{margin:auto;position:relative;flex:none}
.slide-frame{position:absolute;left:0;top:0;transform-origin:0 0;outline:1px solid var(--line-h)}
.strip{display:flex;gap:16px;padding:16px;overflow:auto;border-top:1px solid var(--line-h);background:var(--tile)}
.thumb{flex:none;width:176px;border:0;background:none;padding:0;text-align:left;color:var(--ink)}
.thumb-shot{position:relative;display:block;width:176px;height:99px;overflow:hidden;background:#FBFBF9;border-radius:8px;outline:2px solid transparent;outline-offset:2px;border:1px solid var(--line-h)}
.thumb:hover .thumb-shot{outline-color:var(--ink-3)}
.thumb[aria-current=true] .thumb-shot{outline-color:var(--red)}
.thumb-in{position:absolute;left:0;top:0;transform:scale(.1375);transform-origin:0 0;pointer-events:none}
.thumb-cap{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-top:8px;font-weight:600}
.thumb-cap span:last-child{color:var(--ink-3);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.thumb[aria-current=true] .thumb-cap span:first-child{color:var(--ink)}

/* live link between panes */
.editing [data-f]{cursor:text}
.editing .f:hover{background:rgba(209,0,0,.1)}
.f{box-decoration-break:clone;-webkit-box-decoration-break:clone}
.f.hl{background:linear-gradient(var(--hl),var(--hl)) 0 90%/100% .6em no-repeat;color:inherit}
.f.hl.draw{animation:mark .38s ease-out}
@keyframes mark{from{background-size:0 .6em}to{background-size:100% .6em}}
.inv .f.hl{background:rgba(255,255,255,.28);color:#fff}
.fb.hl{outline:4px solid var(--accent);outline-offset:6px}

/* present */
.present{position:fixed;inset:0;background:#0C0C0B;z-index:80;display:flex;align-items:center;justify-content:center;overflow:hidden}
.present[hidden]{display:none}
.present .slide-frame{outline:0}
.present-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;gap:12px;padding:16px;opacity:0;transition:opacity .25s;pointer-events:none}
.present.show .present-bar{opacity:1;pointer-events:auto}
.present-bar .btn{background:#FFFFFF;color:#000000;border-color:#DADAD3}
.present-bar .btn:hover{background:#F6F6F3}
.present-bar output{color:#fff;font-weight:600;min-width:64px;text-align:center}
.present{cursor:none}.present.show{cursor:default}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--inv-bg);color:var(--inv-fg);padding:12px 16px;border-radius:16px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:120;max-width:min(560px,90vw)}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .divider{display:none}
  .viewtoggle{display:flex}
  .deck-name{display:none}
  .brand span{display:none}
  .editor[data-view=toolkit] .canvas-pane{display:none}
  .editor[data-view=canvas] .toolkit{display:none}
  .tk-scroll{padding:24px 16px}
  .tk-nav{padding:12px 16px}
  .tk-title{font-size:30px}
  .row.r2{grid-template-columns:1fr 32px}
  .row.r2 .fld:nth-child(2){grid-column:1}
  .cards{grid-template-columns:1fr}
  .cards.two{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .tk-body.swap,.f.hl.draw{animation:none}
  *{transition-duration:.01ms!important}
}

/* in-page dialog (replaces confirm and downloads): the one modal-style card, so it keeps a shadow */
.dlg-back{position:fixed;inset:0;background:rgba(17,17,16,.5);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.dlg-back[hidden]{display:none}
.dlg{width:min(640px,100%);max-height:90%;display:flex;flex-direction:column;gap:12px;background:var(--surface);color:var(--ink-2);border:1px solid var(--line);border-radius:32px;padding:32px;box-shadow:0 32px 64px -24px rgba(0,0,0,.45)}
.dlg h2{margin:0;font-weight:700;font-size:24px;line-height:1.2;color:var(--ink)}
.dlg p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.dlg textarea{flex:1;min-height:200px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:none}
.dlg .acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ───────── brand mark ───────── */
.mark{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;white-space:nowrap;color:var(--ink);text-decoration:none}
.mark svg{flex:none}
.mark small{font-weight:500;font-size:13px;color:var(--ink-3);padding-left:12px;border-left:1px solid var(--line-h)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--surface)}
.btn.danger:hover{filter:brightness(.92)}
.btn.lg{padding:12px 24px;font-size:16px}
.btn.block{width:100%;justify-content:center}
.btn[aria-busy=true]{opacity:.7;cursor:progress}
.avatar{width:32px;height:32px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:14px}
.avatar:hover{background:var(--accent-d)}
.acct{margin:0;padding:8px 12px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.acct b{display:block;color:var(--ink);font-size:14px}
.save{font-size:13px;color:var(--ink-3);white-space:nowrap}
.save.bad{color:var(--danger);font-weight:600}
.save.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px}
.loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--paper);color:var(--ink-2);font-weight:500;z-index:60}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── sign in ───────── */
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--paper)}
.auth-art{background:var(--tile);color:var(--ink-2);border-right:1px solid var(--line);padding:40px clamp(24px,5vw,72px);display:flex;flex-direction:column;gap:32px;justify-content:space-between;position:relative;overflow:hidden}
.auth-art h1{margin:0;font:700 clamp(34px,4.2vw,58px)/1.04 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:12em;text-wrap:balance}
.auth-art ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:16px;color:var(--ink-2);max-width:30em}
.auth-art li{padding-left:24px;position:relative}
.auth-art li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:4px;border-radius:2px;background:var(--red)}
.auth-shot{position:relative;aspect-ratio:16/9;width:100%;max-width:560px;overflow:hidden;border-radius:16px;border:1px solid var(--line-h);background:#FBFBF9;pointer-events:none}
.auth-shot .slide{position:absolute;left:0;top:0;transform-origin:0 0}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px clamp(20px,5vw,72px)}
.auth-card{width:100%;max-width:400px;display:grid;gap:16px}
.auth-card h2{margin:0;font-weight:700;font-size:28px;line-height:1.15;color:var(--ink)}
.auth-card p{margin:0;color:var(--ink-2)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--tile)}
.tabs button{border:0;background:transparent;padding:8px;border-radius:999px;font-weight:600;color:var(--ink-2)}
.tabs button[aria-selected=true]{background:var(--inv-bg);color:var(--inv-fg)}
.form{display:grid;gap:16px}
.ff label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:4px}
.ff .help{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.ff input{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line-h);border-radius:8px;padding:12px;line-height:1.4}
.ff input:hover{border-color:var(--ink-3)}
.ff input:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.ff input[aria-invalid=true]{border-color:var(--danger)}
.ff .err{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--danger)}
.pw{position:relative}
.pw input{padding-right:64px}
.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-weight:600;font-size:13px;color:var(--accent);padding:4px 8px;border-radius:8px}
.pw button:hover{background:var(--accent-t)}
.notice{padding:12px 16px;border-radius:16px;font-size:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.notice.bad{border-color:var(--danger);color:var(--danger);font-weight:600}
.notice.good{border-color:var(--ok);background:var(--ok-pale);color:var(--ok)}
.notice.setup{background:var(--tile);border-color:var(--line);color:var(--ink-2)}
.notice code{font-size:13px;font-weight:600;color:var(--ink)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--accent-d)}
.center{text-align:center}

/* ───────── deck list ───────── */
.dash{min-height:100%;display:flex;flex-direction:column;background:var(--paper)}
.dash-top{display:flex;align-items:center;gap:16px;padding:0 clamp(16px,4vw,48px);height:64px;border-bottom:1px solid var(--line);background:var(--surface)}
.dash-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:40px clamp(16px,4vw,48px) 64px;display:grid;gap:32px;align-content:start}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-head h1{margin:0;font:700 clamp(30px,4vw,44px)/1.05 var(--display);letter-spacing:-.01em;color:var(--ink)}
.dash-head p{margin:8px 0 0;color:var(--ink-2)}
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px;list-style:none;margin:0;padding:0}
.deck{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}
.deck-open{display:block;width:100%;border:0;background:none;padding:0;text-align:left}
.deck-shot{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#FBFBF9;border-bottom:1px solid var(--line)}
.deck-shot .slide{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.deck-open:hover .deck-shot{border-bottom-color:var(--ink-3)}
.deck-body{padding:16px 16px 8px;display:grid;gap:8px}
.deck-body h2{margin:0;font-size:18px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deck-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-3)}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.bars i{height:4px;border-radius:2px;background:var(--line)}
.bars i.on{background:var(--red)}
.deck-acts{display:flex;gap:4px;padding:8px 8px 8px}
.deck-acts .mini{color:var(--ink-2)}
.deck-acts .mini:hover{background:var(--accent-t);color:var(--ink)}
.deck-acts .mini.del:hover{color:var(--danger)}
.empty{border:1px dashed var(--line-h);border-radius:32px;padding:48px 24px;display:grid;gap:12px;justify-items:center;text-align:center;background:var(--tile)}
.empty h2{margin:0;font-size:22px;font-weight:600;color:var(--ink)}
.empty p{margin:0;color:var(--ink-2);max-width:34em}
.dlg .ff{margin-top:8px}
.radios{display:grid;gap:8px;margin-top:8px}
.radios label{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font-weight:600;color:var(--ink)}
.radios label small{display:block;font-weight:400;color:var(--ink-2);font-size:13px}
.radios input{margin-top:4px;accent-color:var(--accent)}
.radios label:has(input:checked){border-color:var(--ink);background:var(--tile)}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-art{padding:32px 24px;gap:24px;border-right:0;border-bottom:1px solid var(--line)}
  .auth-art ul,.auth-shot{display:none}
  .auth-art h1{font-size:30px}
  .mark small{display:none}
  .editor .deck-name{display:block;max-width:none}
  .editor .save{display:none}
}

@media (max-width:600px){
  .topbar{gap:8px;padding:0 8px}
  .editor .deck-name{display:none}
  .viewtoggle button{padding:4px 12px}
}

/* ───────── shared with you (deck list) ───────── */
.dash-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.dash-sec h2{margin:0;font-size:22px;font-weight:600;color:var(--ink)}
.dash-sec > p{margin:0 0 16px;color:var(--ink-2)}
.empty .empty-h{margin:0;font-size:22px;font-weight:600;color:var(--ink)}

/* ───────── read-only viewer (#/view/<id> and /s/<token>) ───────── */
.viewer{min-height:100%;display:flex;flex-direction:column;background:var(--paper)}
.view-top .btn{flex:none}
.view-main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:40px clamp(16px,4vw,48px) 64px;display:grid;gap:32px;align-content:start}
.view-head h1{margin:0;font:700 clamp(30px,4vw,44px)/1.05 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.view-head p{margin:8px 0 0;color:var(--ink-2)}
.view-head .view-saved{font-size:13px;color:var(--ink-3)}
.view-slides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:24px}
.view-slides > li{display:grid;gap:8px;min-width:0}
/* Keep these selectors off the slide markup: slides have their own p and li rules. */
.view-cap{margin:0;font-weight:600;font-size:14px;color:var(--ink)}
.view-shot{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;border:1px solid var(--line-h);border-radius:16px;background:#FBFBF9;cursor:zoom-in;text-align:left;color:#000000}
.view-shot:hover{border-color:var(--ink-3)}
.view-shot .slide{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}

/* ───────── share dialog ───────── */
.dlg:has(.share) #dlgBody{min-height:0;overflow:auto;margin:0 -8px;padding:0 8px}
.share{display:grid}
.share[aria-busy=true]{opacity:.7;cursor:progress}
.share-sec{padding:16px 0;border-top:1px solid var(--line);display:grid;gap:12px}
.share-sec:first-child{border-top:0;padding-top:4px}
.share-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.share h3{margin:0 0 2px;font-size:16px;font-weight:600;color:var(--ink)}
.share .fine{font-size:13px;color:var(--ink-3)}
.share > .fine{padding-top:12px;border-top:1px solid var(--line)}
.share .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.share-url,.share-add{display:flex;gap:8px;align-items:center}
.share-url input,.share-add input{flex:1;min-width:0}
.share input[type=email]{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line-h);border-radius:8px;padding:8px 12px;line-height:1.5}
.share input[type=email]:hover{border-color:var(--ink-3)}
.share input[type=email]:focus{outline:2px solid var(--focus);outline-offset:0;border-color:var(--focus)}
.share input[readonly]{background:var(--tile)}
.share-people{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:220px;overflow:auto}
.share-people li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.switch{flex:none;display:inline-flex;padding-top:2px}
.switch input{appearance:none;-webkit-appearance:none;width:44px;height:24px;margin:0;border-radius:999px;background:var(--line-h);position:relative;cursor:pointer;transition:background .12s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;transition:transform .12s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(20px)}
.switch input:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:600px){
  .share-url,.share-add{flex-wrap:wrap}
}