:root{
  color-scheme:dark;
  --bg:#101722;
  --chrome:#172131;
  --panel:#1b2638;
  --panel-2:#222f43;
  --raised:#29384f;
  --line:#34435a;
  --line-soft:rgba(155,174,202,.16);
  --text:#edf3fb;
  --muted:#9cabc0;
  --faint:#728198;
  --accent:#5b8def;
  --accent-strong:#76a4ff;
  --accent-soft:rgba(91,141,239,.16);
  --ok:#3ac47d;
  --warn:#f1ac4b;
  --err:#ff6f7d;
  --editor:#fbfcfe;
  --editor-line:#e1e6ee;
  --shadow:0 16px 44px rgba(2,8,18,.34);
  --radius:8px;
  --actual-side-w:min(var(--side-w,248px),31vw);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,select,input{font:inherit}
button{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s,transform .14s;
}
button:hover{background:var(--raised);border-color:#4a5d78}
button:active{transform:translateY(1px)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,#slides:focus-visible{
  outline:2px solid var(--accent-strong);
  outline-offset:2px;
}
button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  font-weight:650;
  box-shadow:0 4px 12px rgba(49,101,204,.24);
}
button.primary:hover{background:#6a98f1;border-color:#6a98f1}
button.subtle,button.ghost{background:transparent;border-color:var(--line-soft);color:#c8d3e3}
button.subtle:hover,button.ghost:hover{background:var(--panel-2);border-color:var(--line);color:#fff}
button.icon-button{width:32px;padding:0;flex:0 0 32px}
button.danger{background:var(--err);border-color:#d95866;color:#fff;font-weight:650}
button.danger:hover{background:#e96270}
select{
  width:100%;
  height:32px;
  padding:4px 28px 4px 9px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  outline:none;
  background:var(--panel-2);
  color:var(--text);
  text-overflow:ellipsis;
}
select:hover{border-color:#4a5d78}
.spacer{flex:1}
.hidden{display:none!important}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* App header ------------------------------------------------------------- */
.app-header{
  position:relative;
  z-index:20;
  flex:0 0 auto;
  background:var(--chrome);
  border-bottom:1px solid var(--line);
  box-shadow:0 5px 18px rgba(2,8,18,.14);
}
.topbar{
  min-height:56px;
  display:grid;
  grid-template-columns:auto minmax(340px,1fr) auto;
  align-items:center;
  gap:18px;
  padding:8px 12px;
}
.brand{display:flex;align-items:center;gap:9px;min-width:max-content}
.brand-mark{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(145deg,#6b9af3,#426fd1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 5px 15px rgba(37,79,161,.28);
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:700;
}
.brand-name{font-weight:720;letter-spacing:.01em}
.brand-name small{color:var(--muted);font-size:1em;font-weight:430}
.document-nav{min-width:0;display:flex;align-items:flex-end;gap:7px}
.nav-field{min-width:0;display:grid;grid-template-rows:12px 32px;gap:2px}
.nav-label{
  padding-left:2px;
  color:var(--faint);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:12px;
  text-transform:uppercase;
}
.project-field{width:min(22vw,190px);flex:0 1 190px}
.file-field{flex:1 1 290px}
.nav-slash{align-self:center;margin-top:14px;color:#536279;font-size:18px}
.file-actions{display:flex;gap:5px;align-items:center}
.app-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.app-actions kbd{
  padding:1px 5px;
  border:1px solid rgba(151,170,200,.24);
  border-radius:4px;
  color:var(--muted);
  background:rgba(8,15,26,.22);
  font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.save-button{font-weight:600}
/* qmd web: files saved in this browser, not committed yet */
#commit .count:not(:empty){margin-left:2px;padding:0 6px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;line-height:16px}
#commit.has-pending{border-color:var(--accent);color:#fff}
body.is-dirty .save-button{
  border-color:rgba(241,172,75,.62);
  background:rgba(241,172,75,.12);
  color:#ffd798;
}
.status{
  max-width:180px;
  min-width:82px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-right:4px;
  color:var(--muted);
  font-size:11px;
}
#statetext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(58,196,125,.1)}
.dot.dirty{background:var(--warn);box-shadow:0 0 0 3px rgba(241,172,75,.1)}
.contextbar{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:5px 12px 6px 60px;
  border-top:1px solid var(--line-soft);
  background:rgba(12,20,32,.16);
}
.context-controls{display:flex;align-items:center;gap:8px}
.control-label,.toolbar .tlabel{
  color:var(--faint);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.context-sep{width:1px;height:20px;margin:0 4px;background:var(--line-soft)}
.seg{display:inline-flex;padding:2px;border:1px solid var(--line-soft);border-radius:9px;background:rgba(8,15,26,.28)}
.seg button{min-height:26px;padding:3px 10px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.seg button:hover{background:var(--panel-2);color:var(--text)}
.seg button.on{background:var(--raised);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.chk{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;cursor:pointer;white-space:nowrap}
.chk input{width:14px;height:14px;margin:0;accent-color:var(--accent);cursor:pointer}

/* Workspace shell -------------------------------------------------------- */
.layout{flex:1;display:grid;grid-template-columns:var(--actual-side-w) 1fr;min-height:0;position:relative}
body.side-collapsed .layout{grid-template-columns:0 1fr}
.sidebar{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--chrome);
  border-right:1px solid var(--line);
}
body.side-collapsed .sidebar{padding:0;border-right:0;visibility:hidden}
.sidebar-head{
  min-height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 11px 10px 14px;
  border-bottom:1px solid var(--line-soft);
}
.eyebrow{display:block;margin-bottom:2px;color:var(--faint);font-size:9px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.sidebar h2{display:flex;align-items:center;gap:7px;margin:0;font-size:15px;line-height:1.2}
.count{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--panel-2);color:var(--muted);font-size:10px;font-weight:650;text-align:center}
#slides{flex:1;min-height:0;overflow-y:auto;padding:10px 9px 12px;scrollbar-color:#42516a transparent}
.card{
  position:relative;
  margin-bottom:5px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  transition:background-color .12s,border-color .12s,box-shadow .12s;
}
.card-main{display:block;width:100%;min-height:0;padding:9px 10px 10px 12px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.card-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.card::before{content:"";position:absolute;inset:7px auto 7px 0;width:3px;border-radius:0 4px 4px 0;background:transparent}
.card:hover{background:rgba(41,56,79,.64);border-color:var(--line-soft)}
.card.active{background:var(--accent-soft);border-color:rgba(91,141,239,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.card.active::before{background:var(--accent-strong)}
.card .no{display:flex;align-items:center;color:var(--faint);font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}
.card .lintwarn{margin-left:6px;color:var(--warn);cursor:help}
.card .ttl{margin-top:4px;padding-right:3px;color:#d9e2ef;font-size:12.5px;font-weight:520;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.active .ttl{color:#fff}
.card.break .ttl{color:#f4bd6d;font-style:italic}
.card .ops{position:absolute;top:5px;right:5px;display:flex;gap:3px;opacity:0;pointer-events:none;transition:opacity .12s}
.card:hover .ops,.card:focus-within .ops{opacity:1;pointer-events:auto}
.card .ops button{min-height:22px;padding:0 6px;border-radius:5px;background:#111a28;border-color:#46566e;color:var(--muted);font-size:10px;line-height:20px}
.card .ops button:hover{border-color:var(--accent);color:#fff}
.card.drop-before{box-shadow:0 -2px 0 var(--accent)}
.card.drop-after{box-shadow:0 2px 0 var(--accent)}
.card.active.drop-before{box-shadow:0 -2px 0 var(--accent)}
.card.active.drop-after{box-shadow:0 2px 0 var(--accent)}
.sidebar-foot{flex:0 0 auto;padding:9px;border-top:1px solid var(--line-soft);background:rgba(12,20,32,.18)}
.addslide{width:100%;border-style:dashed;border-color:#40506a;background:transparent;color:#c1cddd}
.addslide:hover{border-color:var(--accent);background:var(--accent-soft);color:#fff}
.sidebar-hint{display:block;margin-top:7px;color:var(--faint);font-size:9px;letter-spacing:.02em;text-align:center}
.side-gutter{position:absolute;top:0;bottom:0;left:var(--actual-side-w);width:9px;margin-left:-4px;z-index:6;cursor:col-resize}
.side-gutter::after{content:"";position:absolute;inset:0 auto 0 4px;width:1px;background:transparent}
.side-gutter:hover::after,body.side-dragging .side-gutter::after{left:3px;width:2px;background:var(--accent)}
body.side-collapsed .side-gutter{display:none}
body.side-dragging{cursor:col-resize;user-select:none}
body.side-dragging #preview{pointer-events:none}
.side-expand{
  display:none;
  position:absolute;
  top:50%;
  left:0;
  z-index:7;
  width:28px;
  min-height:48px;
  padding:0;
  transform:translateY(-50%);
  border-left:0;
  border-radius:0 9px 9px 0;
  color:var(--muted);
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}
body.side-collapsed .side-expand{display:inline-flex}

/* Editor and insert toolbar --------------------------------------------- */
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.toolbar{
  flex:0 0 auto;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  flex-wrap:wrap;
  padding:7px 10px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.toolbar-group{display:flex;align-items:center;gap:5px;min-width:0}
.toolbar button{min-height:30px;padding:4px 8px;border-color:var(--line-soft);background:rgba(11,19,31,.2);color:#c8d3e3;font-size:12px}
.toolbar button:hover{border-color:#4a5d78;background:var(--raised);color:#fff}
.toolbar .tlabel{margin:0 3px 0 1px}
.toolbar-actions{margin-left:auto}
.toolbar .assist-tip{gap:6px;border-color:rgba(77,145,255,.42);background:rgba(57,116,211,.12);color:#bdd3f6}
.assist-tip .tip-label{padding:1px 5px;border-radius:4px;background:var(--accent);color:#fff;font-size:9px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.assist-tip kbd{padding:1px 5px;border:1px solid rgba(162,188,228,.3);border-radius:4px;background:rgba(8,15,26,.28);color:#d9e6fb;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace}
.site-link{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:7px;
  color:var(--muted);
  font-size:11px;
  text-decoration:none;
}
.site-link:hover{background:rgba(41,56,79,.64);color:#fff}
.editor-wrap{flex:1;min-height:0;position:relative;background:var(--editor)}
.CodeMirror{
  height:100%;
  background:var(--editor);
  color:#243044;
  font:14px/1.52 "Cascadia Code","SFMono-Regular",Consolas,Menlo,monospace;
}
.cm-s-default.CodeMirror{color:#243044}
.cm-s-default .cm-header{color:#174f9e;font-weight:680}
.cm-s-default .cm-comment{color:#68768b}
.cm-s-default .cm-string{color:#8a5705}
.cm-s-default .cm-meta{color:#08743a}
.cm-s-default .cm-quote{color:#4b596b}
.cm-s-default .cm-link,.cm-s-default .cm-url{color:#075eb5}
.cm-s-default .cm-keyword,.cm-s-default .cm-atom{color:#7540a5}
.cm-s-default .cm-md-list{color:#a05000}
.cm-s-default .cm-number{color:#9e4d09}
.cm-s-default .cm-tag{color:#08776c}
.cm-s-default .cm-attribute{color:#8b5704}
.cm-s-default .cm-hr{color:#6a7585}
.CodeMirror-gutters{background:#f1f4f8;border-right:1px solid var(--editor-line)}
.CodeMirror-linenumber{padding:0 7px 0 5px;color:#7c899c}
.qmd-lint-gutter{width:13px}
.qmd-lint-marker{display:block;width:12px;color:#c13d32;font-size:9px;text-align:center;cursor:help}
.qmd-lint-marker.fixable{cursor:pointer}
.qmd-div-ghost{padding-left:.9em;color:#93a0b1;font-style:italic;font-size:.86em;pointer-events:none;user-select:none}
.qmd-div-pair{background:#fdf0c8}
.qmd-preview-edit{background:#d3e2fd;box-shadow:0 0 0 1px #2f6feb;border-radius:2px}
.qmd-fix-menu{position:fixed;z-index:45;width:min(340px,calc(100vw - 16px));padding:8px 9px;background:#fff;border:1px solid #aab6c7;border-radius:7px;box-shadow:0 8px 24px rgba(20,32,50,.22);font:12px/1.45 system-ui,sans-serif;color:#253248}
.qmd-fix-menu p{margin:0 0 7px;white-space:pre-wrap}
.qmd-fix-menu button{display:block;width:100%;margin-top:5px;padding:5px 7px;border:1px solid #aab6c7;border-radius:5px;background:#eef3fb;color:#153f79;font:600 12px/1.4 system-ui,sans-serif;text-align:left;cursor:pointer}
.qmd-fix-menu button:hover{background:#dce9ff}
.qmd-assist{position:fixed;z-index:40;width:min(390px,calc(100vw - 16px));max-height:260px;overflow:auto;padding:4px;background:#fff;border:1px solid #aab6c7;border-radius:7px;box-shadow:0 8px 24px rgba(20,32,50,.22);font:12px/1.4 system-ui,sans-serif;color:#253248}
.qmd-assist-row{display:grid;grid-template-columns:minmax(105px,auto) 1fr;gap:12px;padding:5px 7px;border-radius:4px;cursor:pointer}
.qmd-assist-row.selected{background:#dce9ff}
.qmd-assist-label{font:600 12px/1.4 "Cascadia Code",Consolas,monospace;color:#153f79}
.qmd-assist-detail{overflow:hidden;color:#69778b;text-overflow:ellipsis;white-space:nowrap}
.CodeMirror-cursor{border-left:2px solid #243044}
.CodeMirror-selected{background:#d1e1ff!important}
.CodeMirror-focused .CodeMirror-selected{background:#bcd5ff!important}
.CodeMirror-dialog{border-color:#ccd4df;background:#f6f8fb;color:#273348}
.CodeMirror-dialog input{color:#273348!important}
.drop-hint{position:absolute;inset:12px;display:none;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:12px;background:rgba(32,81,170,.82);color:#fff;font-size:16px;font-weight:650;z-index:5;pointer-events:none}
.editor-wrap.dragover .drop-hint{display:flex}
#preview{width:100%;height:100%;display:none;border:0;background:#fff}
.pbanner{display:none;padding:5px 11px;border-bottom:1px solid #475673;background:#2b3b55;color:#cbdcf7;font-size:11px;text-align:center}
/* External-change banner (watch.js): non-modal, sits above the editor */
.extbar{
  position:relative;
  z-index:7;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 12px;
  border-bottom:2px solid #d58a12;
  background:linear-gradient(90deg,#fff3cf,#ffdfa0);
  box-shadow:inset 4px 0 0 #dc8e10,0 5px 18px rgba(80,48,0,.24);
  color:#3c2908;
  font-size:12px;
  line-height:1.4;
  animation:extbar-in .22s ease-out,extbar-attention .85s ease-in-out .3s 3;
}
.extbar.info{border-bottom-color:#d58a12;background:linear-gradient(90deg,#fff3cf,#ffdfa0);color:#3c2908}
.extbar-icon{width:30px;height:30px;flex:0 0 30px;padding:5px;border-radius:50%;background:#875300;color:#fff;stroke-width:2.2}
.extbar-copy{min-width:0;display:flex;flex-direction:column;gap:1px}
.extbar-copy strong{font-size:13px;line-height:1.25;letter-spacing:.01em}
.extbar .spacer{flex:1}
.extbar button{min-height:34px;font-size:12px;padding:4px 11px}
.extbar button.ghost{border-color:rgba(89,55,5,.34);background:rgba(255,255,255,.28);color:#503508}
.extbar button.ghost:hover{border-color:#79500e;background:rgba(255,255,255,.62);color:#332000}
.extbar.info #extbar-dismiss{border-color:#744700;background:#744700;color:#fff;font-weight:700;box-shadow:0 4px 12px rgba(94,56,0,.24)}
.extbar.info #extbar-dismiss:hover{border-color:#5d3900;background:#5d3900;color:#fff}
@keyframes extbar-in{from{opacity:.25;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes extbar-attention{0%,100%{box-shadow:inset 4px 0 0 #dc8e10,0 5px 18px rgba(80,48,0,.24)}50%{box-shadow:inset 7px 0 0 #b86c00,0 0 0 4px rgba(241,172,75,.34),0 7px 22px rgba(80,48,0,.32)}}
/* watch.js confirmed the rendered output matches the source: hide the notice */
.pbanner.current{display:none!important}
.pbanner[hidden]{display:none!important}
.pbanner.pmiss{background:#553527;border-color:#7d5540;color:#f8dccb}
/* livepreview.js: what the live preview shows, or how to turn it on */
.pbanner.plive{background:#24443a;border-color:#3f6b5c;color:#d3efe4}
.pbanner.plive.warn{background:#4d4224;border-color:#7a6a3a;color:#f4e7c0}
.pbanner.plive button{margin-left:8px;padding:1px 9px;font-size:11px;min-height:0}
.pbanner.plive button[hidden]{display:none}
/* Build id of the running server (toolbar corner) */
.buildid{align-self:center;font-family:ui-monospace,monospace;font-size:10px;color:var(--faint);white-space:nowrap;cursor:default}
/* Slide cards just changed by an external edit (watch.js badge, fades by re-render) */
.card.ext-changed{border-color:var(--warn);box-shadow:inset 3px 0 0 var(--warn)}
body.view-preview #preview{display:block}
body.view-preview .editor-wrap .CodeMirror{display:none}
body.view-preview .pbanner{display:block}
body.view-split .editor-wrap{display:grid;grid-template-columns:var(--split-pct,50%) 1fr;grid-template-rows:100%}
body.view-split .editor-wrap>.CodeMirror,body.view-split #preview{min-width:0}
body.view-split #preview{display:block}
body.view-split .pbanner{display:block}
.split-gutter{display:none}
body.view-split .split-gutter{display:block;position:absolute;top:0;bottom:0;left:var(--split-pct,50%);width:11px;margin-left:-5px;z-index:6;cursor:col-resize}
body.view-split .split-gutter::after{content:"";position:absolute;inset:0 auto 0 5px;width:1px;background:var(--line)}
body.view-split .split-gutter:hover::after,body.split-dragging .split-gutter::after{left:4px;width:2px;background:var(--accent)}
body.split-dragging{cursor:col-resize;user-select:none}
body.split-dragging #preview{pointer-events:none}

/* Progress --------------------------------------------------------------- */
@keyframes spin{to{transform:rotate(360deg)}}
button.running{position:relative;color:#d9e6ff}
button.running::after{content:"";width:11px;height:11px;margin-left:2px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}

/* Modals and forms ------------------------------------------------------- */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,9,16,.68);backdrop-filter:blur(3px);z-index:50}
.modal-box{width:min(760px,92vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.modal-head{min-height:50px;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;border-bottom:1px solid var(--line);font-weight:650}
.modal-head .spacer{flex:1}
.modal-body{padding:14px 16px 16px;overflow:auto}
.job-settings{margin-bottom:11px}
.job-settings .lbl{display:block;margin:0 0 5px;color:var(--muted);font-size:12px}
.job-settings input.cmd,#search-q,.dlg-field input[type="text"],.dlg-field select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;outline:none;background:#111a28;color:var(--text)}
.job-settings input.cmd{font:13px ui-monospace,SFMono-Regular,Consolas,monospace}
.job-settings input.cmd:focus,#search-q:focus,.dlg-field input[type="text"]:focus,.dlg-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.job-settings .note{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.6}
.job-settings code{padding:1px 5px;border-radius:4px;background:#111a28}
.job-choice{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.job-choice label{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#111a28;font-size:13px;cursor:pointer}
.job-choice input{accent-color:var(--accent);margin:0}
.job-actions{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.job-status{color:var(--muted);font-size:13px}
#job-log{height:300px;max-height:46vh;margin:0;padding:10px 12px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0a101a;color:#cdd8e7;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}

/* Format reference */
.manualbox{width:min(1280px,96vw)}
.manual-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:10px}
.manual-sec{overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#121b29}
.manual-sec summary{padding:10px 12px;color:var(--text);font-weight:650;cursor:pointer}
.manual-sec[open] summary{border-bottom:1px solid var(--line)}
.manual-sec .inside{padding:10px 12px;color:#cdd8e7;font-size:12px;line-height:1.55}
.manual-sec code{padding:1px 4px;border-radius:4px;background:#0a111c}
.manual-sec pre{position:relative;margin:7px 0 10px;padding:10px 11px;overflow:auto;border:1px solid var(--line);border-radius:7px;background:#080e17;color:#e7edf7;font-size:12px;line-height:1.45}
.copy-btn{min-height:22px;padding:1px 6px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2);color:var(--muted);font-size:12px;line-height:1.4}
.copy-btn:hover{background:var(--raised);color:var(--text)}
.copy-btn.copied{border-color:var(--ok);color:var(--ok)}
.manual-sec pre .copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .12s}
.manual-sec pre:hover .copy-btn,.manual-sec pre:focus-within .copy-btn{opacity:.9}
.manual-sec td.copy-cell,.manual-sec th.copy-cell{width:1%;text-align:right;white-space:nowrap}
.manual-sec table{width:100%;margin:7px 0;border-collapse:collapse;font-size:12px}
.manual-sec th,.manual-sec td{padding:5px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.manual-sec td:first-child code{white-space:nowrap}
.manual-sec th{color:var(--text)}
.manual-sec ul{margin:6px 0 9px;padding-left:18px}
.manual-note{margin-bottom:11px;color:var(--muted);font-size:12px}

/* Project search */
.searchbox{width:min(720px,92vw)}
#search-q{margin-bottom:10px;font:inherit}
#search-results{max-height:56vh;display:flex;flex-direction:column;gap:1px;overflow:auto}
#search-results .ll{padding:6px 2px;color:var(--muted);font-size:12px}
.sr-file{padding:8px 2px 3px;border-bottom:1px solid var(--line);color:var(--accent-strong);font-size:12px;font-weight:650}
.sr-hit{display:flex;width:100%;align-items:baseline;gap:10px;padding:5px 6px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sr-hit:hover{background:var(--panel-2)}
.sr-line{min-width:32px;color:var(--muted);font:11px ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}
.sr-text{overflow:hidden;color:#dce5f1;font-size:13px;text-overflow:ellipsis;white-space:nowrap}

/* Image cropper and library */
.imgbox{width:min(900px,94vw)}
.crop-stage{width:100%;height:52vh;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#0a101a}
.crop-stage>img{max-width:100%;display:block}
.paste-stage{height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;border:1px dashed #4b5d78;border-radius:9px;background:#0d1522;color:var(--muted)}
.paste-stage:focus{outline:2px solid var(--accent);outline-offset:-2px}
.paste-stage .big{color:var(--text);font-size:16px;font-weight:600}
.lib-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lib-head .ll{color:var(--muted);font-size:12px}
.lib-grid{height:48vh;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:8px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#0a101a}
.lib-item{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:#0d1522;cursor:pointer}
.lib-item:hover{border-color:var(--accent)}
.lib-item img{width:100%;height:92px;display:block;object-fit:contain;background:#080d15}
.lib-item .nm{padding:4px 5px 0;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.lib-item .meta{display:flex;align-items:center;gap:6px;padding:1px 5px 4px;color:var(--muted);font-size:10px}
.lib-item .unused{padding:0 4px;border:1px solid rgba(241,172,75,.48);border-radius:4px;background:rgba(241,172,75,.14);color:var(--warn);font-size:10px}
.lib-item .del{position:absolute;top:4px;right:4px;z-index:2;display:none;min-height:24px;padding:1px 7px;border-color:#53647d;background:rgba(13,21,34,.9);font-size:11px}
.lib-item:hover .del{display:inline-flex}
.lib-item .del:hover{border-color:var(--err);background:var(--err);color:#fff}
.crop-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.crop-tools .tlabel,.crop-tools .lbl2,.crop-tools .ll{color:var(--muted);font-size:12px}
.crop-tools .sep{width:1px;height:20px;margin:0 3px;background:var(--line)}
.crop-tools select{width:auto;background:#111a28}
.crop-tools input[type="range"]{width:180px;accent-color:var(--accent)}
.numin{width:92px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;outline:none;background:#111a28;color:var(--text)}

/* Generic dialogs and toasts */
.dlg{z-index:80}
.dlgbox{width:min(460px,92vw)}
.dlg-msg{margin-bottom:10px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.dlg-fields{display:flex;flex-direction:column;gap:9px;margin-bottom:4px}
.dlg-field{display:flex;flex-direction:column;gap:4px;font-size:13px}
.dlg-field .cap{color:var(--muted);font-size:12px}
.dlg-field.chkrow{flex-direction:row;align-items:center;gap:7px;cursor:pointer}
.dlg-field.chkrow .cap{color:var(--text);font-size:13px}
.dlg-field input[type="checkbox"]{margin:0;accent-color:var(--accent)}
.dlg-hint{margin-top:-5px;color:var(--muted);font-size:11px;line-height:1.5}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.dlg-choices{display:flex;flex-direction:column;gap:6px}
.dlg-choice{display:flex;align-items:baseline;gap:10px;padding:9px 12px;text-align:left}
.dlg-choice:hover,.dlg-choice:focus{border-color:var(--accent)}
.dlg-choice .l{min-width:120px;font-weight:650}
.dlg-choice .d{color:var(--muted);font-size:12px}
#toasts{position:fixed;right:14px;bottom:14px;z-index:90;max-width:min(420px,80vw);display:flex;flex-direction:column;gap:8px}
.toast{padding:10px 13px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:9px;background:var(--panel-2);box-shadow:0 10px 28px rgba(0,0,0,.4);color:var(--text);font-size:13px;line-height:1.5;white-space:pre-wrap;animation:toast-in .18s ease-out;transition:opacity .4s,transform .4s}
.toast.ok{border-left-color:var(--ok)}
.toast.warn{border-left-color:var(--warn)}
.toast.err{border-left-color:var(--err)}
.toast.fade{opacity:0;transform:translateY(6px)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Focus mode and responsive layout -------------------------------------- */
body.chrome-hidden .app-header,body.chrome-hidden .toolbar,body.chrome-hidden .pbanner{display:none}
#chrome-show{display:none;position:fixed;top:0;left:50%;z-index:95;width:54px;min-height:20px;padding:0;transform:translateX(-50%);border-top:0;border-radius:0 0 9px 9px;background:var(--panel-2);color:var(--accent-strong);box-shadow:0 3px 12px rgba(0,0,0,.35)}
#chrome-show .icon{transform:rotate(90deg)}
#chrome-show:hover{border-color:var(--accent);background:var(--accent);color:#fff}
body.chrome-hidden #chrome-show{display:inline-flex}

@media (max-width:1180px){
  .topbar{grid-template-columns:auto minmax(0,1fr);gap:8px 14px}
  .app-actions{grid-column:1/-1;padding-top:7px;border-top:1px solid var(--line-soft)}
  .status{max-width:none;margin-right:auto}
  .contextbar{padding-left:12px}
}

@media (max-width:820px){
  .topbar{grid-template-columns:1fr;padding:8px 10px}
  .brand{display:none}
  .document-nav{grid-column:1}
  .project-field{width:150px;flex-basis:150px}
  .nav-slash{display:none}
  .responsive-label,.app-actions kbd{display:none}
  .contextbar{padding:5px 10px 6px}
  .control-label{display:none}
  .toolbar{align-items:flex-start}
  .toolbar-group{flex-wrap:wrap}
  .toolbar-actions{margin-left:0}
  .extbar{align-items:flex-start;flex-wrap:wrap}
  .extbar-copy{flex:1 1 calc(100% - 42px)}
  .extbar .spacer{display:none}
  .manual-grid{grid-template-columns:1fr}
}

@media (max-width:620px){
  .status{display:none}
  .document-nav{flex-wrap:wrap}
  .project-field{width:calc(100% - 40px);flex:1 1 calc(100% - 40px)}
  .file-field{order:3;flex:1 1 calc(100% - 78px)}
  .file-actions{order:4}
  .app-actions{justify-content:flex-start;overflow-x:auto}
  .contextbar{align-items:flex-start;flex-direction:column;gap:7px}
  .toolbar .tlabel{width:100%}
  .modal{padding:8px}
  .modal-box{width:100%;max-height:94vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Sidebar heading: the slide list and its count */
.side-title{padding:4px 2px;color:var(--text);font-size:12px;font-weight:600}
.side-title .count{margin-left:2px}