:root{
  --bg:#15181c; --panel:#1d2126; --line:#2c3238; --text:#e8eaed; --muted:#98a0a8;
  --accent:#C4921A; --danger:#e5484d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,sans-serif}
button,input,textarea{font:inherit;color:inherit}
button{background:#2a3037;border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
button:hover{background:#343b43}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#1b1405;font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.danger{color:#ff8b8f}
input[type=text],input[type=number],input[type=search],textarea{
  width:100%;background:#12151a;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.spacer{flex:1}
h3{margin:18px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h3:first-child{margin-top:0}
.hint{color:var(--muted);font-size:12px;margin:8px 0}

#topbar{height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{font-size:16px;margin-right:10px}
.brand b{color:var(--accent)}
.tint{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.tint button{width:20px;height:20px;padding:0;border-radius:50%;border:2px solid #0006}
.tint button:hover{transform:scale(1.15)}
.tint input[type=color]{-webkit-appearance:none;appearance:none;width:20px;height:20px;padding:0;border:2px solid #0006;border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.tint input[type=color]:hover{transform:scale(1.15)}
.tint input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.tint input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}
.tint input[type=color]::-moz-color-swatch{border:none;border-radius:50%}
.savestate{color:var(--muted);font-size:12px}

#musicChip{display:inline-flex;align-items:center;gap:4px;background:#2a3037;border:1px solid var(--line);border-radius:6px;padding:2px}
#musicChip button{padding:4px 8px;border:0;background:transparent}
#musicChip button:hover{background:#343b43}
#musicName{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
#topbar{flex-wrap:nowrap;overflow-x:auto}
#topbar>*{flex-shrink:0}

#app{display:grid;grid-template-columns:260px 1fr 320px;height:calc(100% - 52px)}
#list{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#search{margin:10px;width:calc(100% - 20px)}
#slideList{list-style:none;margin:0;padding:0 0 12px;overflow:auto;flex:1}
#slideList li{padding:7px 12px;cursor:pointer;border-left:3px solid transparent;display:flex;gap:8px;font-size:13px}
#slideList li:hover{background:#252b31}
#slideList li.on{background:#2b3138;border-left-color:var(--accent)}
#slideList li i{font-style:normal;color:var(--muted);min-width:22px;text-align:right}
#slideList li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#stageWrap{display:flex;flex-direction:column;min-width:0;min-height:0}
#stageBox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
#stage{position:relative;box-shadow:0 10px 40px #0008;background:#000}
#nav{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px;border-top:1px solid var(--line);background:var(--panel)}
#pos{min-width:80px;text-align:center;color:var(--muted)}

#inspector{background:var(--panel);border-left:1px solid var(--line);padding:14px;overflow:auto}
#inspector label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}
#inspector label input{margin-top:4px;color:var(--text)}
.row3{display:grid;grid-template-columns:38px 38px 1fr 1fr;gap:6px;margin-top:6px}
.row3 button{padding:6px 4px}
#chartRows{display:flex;flex-direction:column;gap:8px}
.crow{display:grid;grid-template-columns:34px 1fr 90px;gap:6px;align-items:center}
.crow.nov{grid-template-columns:34px 1fr 30px 30px}
.crow input[type=color]{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
.crow button{padding:4px 0}
#btnSum{width:100%;margin-top:10px}

/* stage slides */
.slide{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}
.slide [contenteditable]{outline:none;cursor:text;border-radius:4px;transition:box-shadow .1s}
.slide [contenteditable]:hover{box-shadow:0 0 0 3px #a9472f66}
.slide [contenteditable]:focus{box-shadow:0 0 0 4px #a9472f}
.slide [data-photo]{cursor:pointer}
.slide [data-photo]:hover{outline:6px solid #a9472f;outline-offset:-6px}
.slide [data-photo] .ed-only{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:#1e2a22e6;color:#fff;font:600 26px/1 Inter,sans-serif;padding:14px 22px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap}
.slide [data-photo]:hover .ed-only{opacity:1}
.slide [data-chart]{position:relative}

/* dialog */
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:20px;width:440px;max-width:92vw}
dialog::backdrop{background:#000a}
dialog h2{margin:0 0 14px;font-size:18px}
#dropZone{border:2px dashed #3a424a;border-radius:10px;padding:16px;text-align:center}
#dropZone.over{border-color:var(--accent);background:#c4921a14}
#dropZone p{margin:10px 0}
#imgPreview{width:200px;height:240px;margin:0 auto;border-radius:10px;background:#12151a center/cover no-repeat;border:1px solid var(--line)}
#imgInfo{display:block;margin-top:8px;color:var(--muted)}
.dlgBtns{display:flex;gap:8px;margin-top:16px}

#present{position:fixed;inset:0;background:#000;z-index:50}
#presentStage{position:absolute;left:0;top:0}
#presentHint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);color:#fff8;font-size:12px;pointer-events:none}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e8eaed;color:#111;padding:10px 16px;border-radius:8px;z-index:100;box-shadow:0 6px 20px #0006}

#printRoot{display:none}
@media print{
  @page{size:1920px 1080px;margin:0}
  html,body{background:#fff;height:auto}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block}
  #printRoot .pwrap{position:relative;width:1920px;height:1080px;page-break-after:always;overflow:hidden;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printRoot .slide{transform:none}
}

/* deck animations (only active in Present mode) */
@keyframes qeFade{from{opacity:0}to{opacity:1}}
@keyframes qeRise12{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes qeRise16{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes qeDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qePhoto{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes qeFloat{0%{transform:translate(0,0) rotate(0deg)}25%{transform:translate(38px,-26px) rotate(8deg)}50%{transform:translate(-22px,-48px) rotate(-6deg)}75%{transform:translate(-40px,14px) rotate(5deg)}100%{transform:translate(18px,32px) rotate(-8deg)}}
@keyframes qeWrite{from{clip-path:inset(-20% 100% -20% -5%)}to{clip-path:inset(-20% -5% -20% -5%)}}
@keyframes qeInk{from{opacity:0;clip-path:inset(-20% 100% -20% -5%)}to{opacity:1;clip-path:inset(-20% -5% -20% -5%)}}
@keyframes qeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes qeGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes qeGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qePop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes qeShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:no-preference){
[data-deck-active] [data-a="fade"]{animation:qeFade .3s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="fade4"]{animation:qeFade .4s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="slow"]{animation:qeFade 1s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="draw"]{transform-origin:left center;animation:qeDraw .4s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="draw6"]{transform-origin:left center;animation:qeDraw .6s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="drawc"]{transform-origin:center;animation:qeDraw .6s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="rise"]{animation:qeRise12 .5s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="rise16"]{animation:qeRise16 .6s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="card"]{animation:qeRise12 .5s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="photo"]{animation:qePhoto .5s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="float"]{animation:qeFloat 9s ease-in-out infinite alternate}
[data-deck-active] [data-a="write"]{animation:qeWrite 2.16s linear both}
[data-deck-active] [data-a="ink"]{animation:qeInk .9s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="spin"]{animation:qeSpin 60s linear infinite}
[data-deck-active] [data-a="grow"]{transform-origin:bottom center;animation:qeGrow .9s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="growx"]{transform-origin:left center;animation:qeGrowX .9s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="pop"]{animation:qePop .5s cubic-bezier(.22,1,.36,1) both}
[data-deck-active] [data-a="shimmer"]{animation:qeShimmer .9s cubic-bezier(.22,1,.36,1) both}
}

/* text formatting panel */
.fmtRow{display:grid;grid-template-columns:82px 32px 1fr 32px 20px;gap:6px;align-items:center;margin:8px 0}
.fmtRow:nth-child(2){grid-template-columns:82px 44px 1fr}
.fmtRow span{color:var(--muted);font-size:12px}
.fmtRow button{padding:5px 0}
.fmtRow input[type=number]{text-align:center}
.fmtRow input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.slide [contenteditable].fmt-active{box-shadow:none}

/* export dialog */
#expChoices{display:flex;flex-direction:column;gap:10px}
#expChoices button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;text-align:left}
#expChoices button b{font-size:15px}
#expChoices button small{color:var(--muted);font-size:12px}
#expChoices button:hover{border-color:var(--accent)}
#exportDialog label{display:block;font-size:13px}
#exportDialog label input{margin-top:6px}
#exportDialog .err{color:#ff8b8f;min-height:1.2em;margin:6px 0;font-size:13px}
#expBar{width:100%;height:14px}
#expMsg{margin:0 0 10px}

/* selection frame: move + resize */
#selLayer{position:absolute;inset:0;pointer-events:none;z-index:20}
#selBox{position:absolute;border:2px solid #4c8dff;box-sizing:border-box;pointer-events:none}
#selBox .edge{position:absolute;pointer-events:auto;cursor:move}
#selBox .e-n{left:0;right:0;top:-5px;height:10px}
#selBox .e-s{left:0;right:0;bottom:-5px;height:10px}
#selBox .e-w{top:0;bottom:0;left:-5px;width:10px}
#selBox .e-e{top:0;bottom:0;right:-5px;width:10px}
#selBox .h{position:absolute;width:11px;height:11px;background:#fff;border:2px solid #4c8dff;border-radius:2px;pointer-events:auto;box-sizing:border-box}
#selBox .h[data-d=nw]{left:-7px;top:-7px;cursor:nwse-resize}
#selBox .h[data-d=n]{left:calc(50% - 6px);top:-7px;cursor:ns-resize}
#selBox .h[data-d=ne]{right:-7px;top:-7px;cursor:nesw-resize}
#selBox .h[data-d=e]{right:-7px;top:calc(50% - 6px);cursor:ew-resize}
#selBox .h[data-d=se]{right:-7px;bottom:-7px;cursor:nwse-resize}
#selBox .h[data-d=s]{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}
#selBox .h[data-d=sw]{left:-7px;bottom:-7px;cursor:nesw-resize}
#selBox .h[data-d=w]{left:-7px;top:calc(50% - 6px);cursor:ew-resize}
#selBox .move{position:absolute;left:-2px;top:-26px;height:24px;padding:0 9px;line-height:24px;background:#4c8dff;color:#fff;
  font:600 12px/24px Inter,sans-serif;border-radius:5px 5px 0 0;cursor:move;pointer-events:auto;white-space:nowrap;user-select:none}
#selBox .move.below{top:auto;bottom:-26px;border-radius:0 0 5px 5px}

/* toggle switch */
#inspector label.toggle{display:flex;align-items:center;gap:10px;margin:4px 0 12px;color:var(--text);font-size:13px;cursor:pointer}
label.toggle input{position:absolute;opacity:0;width:0;height:0}
label.toggle .sw{position:relative;width:38px;height:22px;border-radius:999px;background:#3a424a;transition:background .15s;flex:none}
label.toggle .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
label.toggle input:checked + .sw{background:var(--accent)}
label.toggle input:checked + .sw::after{transform:translateX(16px)}
label.toggle input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}