:root{
  --rail-bg:#1a1c22;
  --rail-bg-soft:#21242c;
  --rail-border:#2c3038;
  --accent:#ff7a45;
  --accent-soft:rgba(255,122,69,0.16);
  --text-bright:#f4f1ea;
  --text-dim:#9aa0ad;
  --paper:#e7e4dd;
  --paper-deep:#cfccc4;
  --tab-bg:#24262d;
  --tab-active:#e7e4dd;
  --danger:#e85d5d;
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --pages-panel-w: max(16.6667vw, 170px);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:var(--font-body);background:var(--paper-deep);overflow:hidden;}

#app{display:flex;width:100vw;height:100vh;}

/* ============ TOOLBOX (left rail) ============ */
#toolbox{
  width:16.6667vw;
  min-width:170px;
  height:100vh;
  background:var(--rail-bg);
  color:var(--text-bright);
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--rail-border);
  overflow-y:auto;
  flex-shrink:0;
}
/* Text-size scaling (Settings → Display settings) is applied via CSS zoom
   on THIS inner wrapper only — never on #toolbox itself. #toolbox keeps a
   fixed, unzoomed height with its own scroll, so zooming text smaller
   never leaves an empty gap at the bottom, and zooming it larger never
   clips content with no way to scroll to it — editor.js sets a matching
   min-height here so the content always fills (or properly overflows/
   scrolls within) the full toolbox height at any zoom level. */
#toolboxZoom{
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.brand{
  padding:18px 16px 14px;
  border-bottom:1px solid var(--rail-border);
}
.brand-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-bright);
  display:flex;
  align-items:center;
  gap:8px;
}
.brand-mark .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;}
.brand-sub{font-size:11px;color:var(--text-dim);margin-top:4px;letter-spacing:0.02em;}

.brand-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Profile chip — avatar with the name underneath, top-right of the header */
.profile-chip{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; flex-shrink:0; padding:2px; border-radius:8px;
  transition:background .15s;
}
.profile-chip:hover{ background:var(--rail-bg-soft); }
.profile-avatar{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--accent); color:#1a1c22;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:12px;
  background-size:cover; background-position:center;
  border:1.5px solid var(--rail-border);
}
.profile-name{
  font-size:9.5px; color:var(--text-dim); font-weight:500;
  max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}

#accountRow{margin-top:12px;}
#accountRow a, #accountRow span{
  font-size:11px;color:var(--text-dim);text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
#accountRow a:hover{color:var(--accent);}
#accountRow .acct-name{color:var(--text-bright);font-weight:600;}

/* "Your projects" as a clearly distinct navigation button — deliberately
   NOT the orange accent color, since that's already used for "this tool
   is active" inside the list below. A different solid color makes it
   unmistakably a different kind of button, not another tool. */
.your-projects-btn{
  display:flex !important; align-items:center; justify-content:center; gap:7px;
  background:#4f5bd5; color:#ffffff !important;
  border:none; border-radius:10px;
  padding:10px 12px; font-size:12.5px !important; font-weight:700;
  transition:filter .15s, transform .08s;
  box-shadow:0 3px 10px rgba(79,91,213,0.35);
}
.your-projects-btn:hover{ filter:brightness(1.12); }
.your-projects-btn:active{ transform:scale(0.97); }
.your-projects-btn svg{ width:14px; height:14px; flex-shrink:0; }

#saveStatus{
  font-size:10.5px;color:var(--text-dim);text-align:center;min-height:14px;margin-top:-2px;
}
#saveStatus.unsaved{color:var(--accent);}
#saveStatus.saved{color:#34c759;}

.rail-section{padding:14px 12px;border-bottom:1px solid var(--rail-border);}
.rail-label{
  font-family:var(--font-display);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 4px 10px;
}

.tool-grid{display:flex;flex-direction:column;gap:4px;}

/* ── Accordion tool groups ──────────────────────────────── */
.tool-list{display:flex;flex-direction:column;padding:10px 10px 6px;}
.tool-group{display:flex;flex-direction:column;}
.tool-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 10px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--text-bright);font-family:var(--font-body);font-size:13px;font-weight:500;
  cursor:pointer;text-align:left;transition:background .12s,border-color .12s;
  position:relative;
}
.tool-btn svg{flex-shrink:0;width:18px;height:18px;stroke:var(--text-bright);}
.tool-btn:hover{background:var(--rail-bg-soft);}
.tool-btn.active{background:var(--accent-soft);border-color:rgba(255,122,69,0.45);color:var(--accent);}
.tool-btn.active svg{stroke:var(--accent);}
/* Chevron indicator for tools that have panels */
.tool-btn.has-panel::after{
  content:'';display:block;width:6px;height:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:auto;opacity:0.45;transition:transform .2s;
}
.tool-btn.has-panel.panel-open::after{transform:rotate(-135deg);opacity:0.8;}

/* Panel that slides open below its tool-btn */
.tool-panel{
  display:none;
  background:#1d1f27;
  border:1px solid var(--rail-border);
  border-top:none;
  border-radius:0 0 10px 10px;
  padding:10px 10px 12px;
  margin-bottom:4px;
}
.tool-panel.open{display:block;}
.panel-label{
  font-family:var(--font-display);font-size:9.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-dim);margin:0 0 8px;
}
.panel-sep{height:1px;background:var(--rail-border);margin:8px 0;}

/* Shape sub-buttons inside the shapes panel */
/* Compact icon tiles — the toolbox is narrow, so names show as a tooltip
   and next to the "Shape type" label (see #shapeName) instead. */
.shape-sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;margin-bottom:4px;}
.shape-sub-btn{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;padding:0;
  background:var(--rail-bg-soft);border:1px solid var(--rail-border);border-radius:7px;
  color:var(--text-bright);font-size:0;
  cursor:pointer;transition:background .12s,border-color .12s;
}
.shape-sub-btn svg{flex-shrink:0;width:18px;height:18px;stroke:currentColor;fill:none;}
.shape-name{text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:11px;color:var(--accent);margin-left:4px;}
.shape-sub-btn:hover{background:var(--rail-bg-soft);}
.shape-sub-btn.active{
  background:var(--accent-soft);border-color:rgba(255,122,69,0.4);color:var(--accent);
}

/* Shared inline control styles (used inside panels) */
.field-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0;gap:8px;}
.field-row label{font-size:11px;color:var(--text-dim);}
input[type=color]{
  -webkit-appearance:none;appearance:none;
  width:30px;height:24px;border:1px solid var(--rail-border);border-radius:6px;
  background:none;padding:0;cursor:pointer;
}
input[type=range]{flex:1;accent-color:var(--accent);}
.size-val{font-size:11px;color:var(--text-dim);width:26px;text-align:right;}
.swatches{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 6px;}
.swatch{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,0.15);cursor:pointer;}
.swatch.selected{outline:2px solid var(--accent);outline-offset:1px;}
.symbol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.symbol-btn{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--rail-bg-soft);border:1px solid var(--rail-border);border-radius:8px;
  font-size:15px;cursor:pointer;color:var(--text-bright);
}
.symbol-btn.selected{border-color:var(--accent);background:var(--accent-soft);}
.symbol-group-label{
  grid-column:1 / -1;margin:6px 0 1px;
  font-family:var(--font-display);font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-dim);
}
.symbol-group-label:first-child{margin-top:0;}
.symbol-more-btn{
  grid-column:1 / -1;margin-top:4px;padding:7px 0;
  background:transparent;border:1px dashed var(--rail-border);border-radius:8px;
  color:var(--text-dim);font-family:var(--font-body);font-size:11.5px;font-weight:600;
  cursor:pointer;transition:border-color .12s,color .12s;
}
.symbol-more-btn:hover{border-color:var(--accent);color:var(--accent);}

/* keep old .key helper in case referenced */
.tool-btn .key{margin-left:auto;font-size:10px;color:var(--text-dim);}
.tool-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:9px 10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text-bright);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  text-align:left;
  transition:background .12s ease, border-color .12s ease;
}
.tool-btn svg{flex-shrink:0;width:18px;height:18px;stroke:var(--text-bright);}
.tool-btn:hover{background:var(--rail-bg-soft);}
.tool-btn.active{background:var(--accent-soft);border-color:rgba(255,122,69,0.45);}
.tool-btn.active svg{stroke:var(--accent);}
.tool-btn.active{color:var(--accent);}
.tool-btn .key{margin-left:auto;font-size:10px;color:var(--text-dim);}

.field-row{display:flex;align-items:center;justify-content:space-between;margin:8px 4px;gap:8px;}
.field-row label{font-size:11px;color:var(--text-dim);}
input[type=color]{
  -webkit-appearance:none;appearance:none;
  width:30px;height:24px;border:1px solid var(--rail-border);border-radius:6px;
  background:none;padding:0;cursor:pointer;
}
input[type=range]{flex:1;accent-color:var(--accent);}
.size-val{font-size:11px;color:var(--text-dim);width:26px;text-align:right;}
.size-val-input{
  font-size:11px;color:var(--text-bright);width:36px;text-align:center;
  background:var(--rail-bg-soft);border:1px solid var(--rail-border);border-radius:5px;
  padding:3px 2px;font-family:var(--font-body);
  -moz-appearance:textfield;
}
.size-val-input::-webkit-outer-spin-button,
.size-val-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
.size-val-input:focus{ border-color:var(--accent);outline:none;background:var(--rail-bg); }

.swatches{display:flex;gap:6px;flex-wrap:wrap;margin:6px 4px 0;}
.swatch{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,0.15);cursor:pointer;}
.swatch.selected{outline:2px solid var(--accent);outline-offset:1px;}

.symbol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px;}
.symbol-btn{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--rail-bg-soft);border:1px solid var(--rail-border);border-radius:8px;
  font-size:16px;cursor:pointer;color:var(--text-bright);
}
.symbol-btn.selected{border-color:var(--accent);background:var(--accent-soft);}

.rail-actions{margin-top:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rail-border);}
.undo-redo-row{display:flex;gap:8px;}
.undo-redo-row .btn{flex:1;padding:10px 8px;}
.btn{
  border:none;border-radius:8px;padding:10px 12px;font-family:var(--font-body);
  font-weight:600;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary{background:var(--accent);color:#1a1c22;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:var(--rail-bg-soft);color:var(--text-bright);border:1px solid var(--rail-border);}
.btn-ghost:hover{background:#2a2d35;}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(232,93,93,0.4);}
.btn-danger:hover{background:rgba(232,93,93,0.1);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ---- Save Project / Export PDF dropdowns ---- */
.dropdown-wrap{ position:relative; width:100%; }
.dropdown-trigger{ width:100%; }
.dropdown-trigger .caret{ margin-left:auto; flex-shrink:0; transition:transform .15s; }
.dropdown-trigger.open .caret{ transform:rotate(180deg); }

.dropdown-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--rail-bg-soft); border:1px solid var(--rail-border);
  border-radius:9px; padding:5px; display:none; flex-direction:column; gap:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.4); z-index:60;
}
.dropdown-menu.open{ display:flex; }
.dropdown-item{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:none; border-radius:7px;
  padding:9px 10px; font-family:var(--font-body); font-size:12.5px; font-weight:500;
  color:var(--text-bright); cursor:pointer; text-align:left;
}
.dropdown-item:hover{ background:var(--accent-soft); color:var(--accent); }
.dropdown-item svg{ width:15px; height:15px; flex-shrink:0; }

/* ============ MAIN AREA ============ */
#main{
  flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;
  transition:margin-right .22s ease;
}
#main.pages-open{ margin-right:var(--pages-panel-w); }

#tabbar{
  display:flex;align-items:flex-end;
  background:var(--tab-bg);
  padding:8px 8px 0;
  gap:4px;
  flex-shrink:0;
  border-bottom:1px solid #14151a;
}
#tabsScroll{
  display:flex;align-items:flex-end;gap:4px;
  overflow-x:auto;flex:1;min-width:0;
}
.tab{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 14px;
  background:#2c2f38;
  color:var(--text-dim);
  border-radius:9px 9px 0 0;
  font-size:12.5px;
  font-family:var(--font-body);
  cursor:pointer;
  max-width:200px;
  white-space:nowrap;
  flex-shrink:0;
  position:relative;
  top:1px;
}
.tab.active{background:var(--tab-active);color:#1f2024;font-weight:600;}
.tab:hover:not(.active){background:var(--accent-tab-hover, #383c48);color:var(--text-bright);}
.tab .tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;}

/* Drag-to-reorder tabs (like Chrome tabs) — horizontal-only movement */
.tab{ cursor:grab; touch-action:none; }
.tab.dragging-tab{
  opacity:0.85; cursor:grabbing; z-index:20;
  box-shadow:0 6px 16px rgba(0,0,0,0.35);
  transition:none;
}
.tab.drop-before::before,
.tab.drop-after::after{
  content:''; position:absolute; top:2px; bottom:2px; width:2px;
  background:var(--accent); border-radius:2px;
}
.tab.drop-before::before{ left:-3px; }
.tab.drop-after::after{ right:-3px; }
.tab .tab-close{
  width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;color:inherit;opacity:0.6;flex-shrink:0;
}
.tab .tab-close:hover{opacity:1;background:rgba(0,0,0,0.12);}
.tab-add{
  flex-shrink:0;width:30px;height:30px;margin-bottom:4px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);font-size:18px;cursor:pointer;background:transparent;border:1px dashed #444753;
}
.tab-add:hover{color:var(--text-bright);border-color:var(--accent);}

/* Pages toggle button — pinned to the right of the tab strip */
#tabbarActions{ display:flex;align-items:center;flex-shrink:0;margin-left:6px;margin-bottom:4px; }
#pagesToggleBtn{
  display:flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;
  background:transparent;border:1px solid #3a3d46;
  color:var(--text-dim);font-family:var(--font-body);font-size:12px;font-weight:500;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
  white-space:nowrap;
}
#pagesToggleBtn svg{width:14px;height:14px;stroke:currentColor;flex-shrink:0;}
#pagesToggleBtn:hover{border-color:var(--accent);color:var(--text-bright);}
#pagesToggleBtn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}

#viewerWrap{flex:1;position:relative;overflow:hidden;background:var(--paper-deep);}

/* ── Zoom controls (top-left of the PDF canvas) ─────────────── */
#zoomControls{
  position:absolute;top:14px;left:14px;z-index:40;
  display:flex;align-items:center;gap:1px;
  background:var(--rail-bg);border:1px solid var(--rail-border);
  border-radius:10px;padding:3px;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}
#zoomControls button{
  width:28px;height:28px;border:none;border-radius:7px;
  background:transparent;color:var(--text-bright);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
#zoomControls button:hover{ background:var(--rail-bg-soft); }
#zoomControls button svg{width:15px;height:15px;flex-shrink:0;}
#zoomLabel{
  min-width:42px;text-align:center;font-size:11.5px;font-weight:600;
  color:var(--text-dim);font-family:var(--font-body);user-select:none;
}
.doc-viewer{
  position:absolute;inset:0;
  overflow-x:auto;
  overflow-y:auto;
  display:none;
  padding:28px 24px 80px;
}
.doc-viewer.active{display:block;}

/* ── Pages drawer panel (right side) ─────────────────────── */
#pagesPanel{
  position:fixed;top:0;right:0;height:100vh;
  width:var(--pages-panel-w);
  background:var(--rail-bg);
  border-left:1px solid var(--rail-border);
  z-index:80;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .22s ease;
  box-shadow:-8px 0 24px rgba(0,0,0,0.35);
}
#pagesPanel.open{ transform:translateX(0); }
#pagesPanel .pages-panel-header{
  padding:16px 14px 12px;border-bottom:1px solid var(--rail-border);flex-shrink:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  cursor:pointer;transition:background .12s;
}
#pagesPanel .pages-panel-header:hover{ background:var(--rail-bg-soft); }
#pagesPanel .pages-panel-header-text{ min-width:0; }
#pagesPanel .pages-panel-title{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:0.04em;color:var(--text-bright);margin:0 0 3px;
}
#pagesPanel .pages-panel-sub{
  font-size:11px;color:var(--text-dim);margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#pagesPanel .pages-panel-close-ico{
  width:15px;height:15px;flex-shrink:0;margin-top:2px;
  color:var(--text-dim);transition:color .12s;
}
#pagesPanel .pages-panel-header:hover .pages-panel-close-ico{ color:var(--accent); }
#pagesPanel .pages-panel-body{
  flex:1;overflow-y:auto;padding:10px 10px;
  display:flex;flex-direction:column;gap:8px;
}
.page-thumb{
  cursor:pointer;border-radius:6px;overflow:hidden;
  border:2px solid transparent;background:#111318;
  transition:border-color .12s;
  width:70%;
  margin:0 auto;
  position:relative;
}
.page-thumb:hover{ border-color:rgba(255,122,69,0.5); }
.page-thumb.current{ border-color:var(--accent); }
.page-thumb img{ display:block;width:100%;height:auto; }
.page-thumb-menu{
  position:absolute;inset:0;background:rgba(13,14,18,0.9);
  display:none;flex-direction:column;align-items:stretch;justify-content:center;
  gap:6px;padding:10px;
}
.page-thumb.menu-open .page-thumb-menu{ display:flex; }
.page-thumb-menu button{
  border:none;border-radius:6px;padding:7px 6px;font-size:10.5px;font-weight:700;
  cursor:pointer;font-family:var(--font-body);
  display:flex;align-items:center;justify-content:center;gap:5px;
  letter-spacing:0.01em;
}
.page-thumb-menu button svg{width:12px;height:12px;flex-shrink:0;}
.page-thumb-menu .pt-export{
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(255,122,69,0.45);
}
.page-thumb-menu .pt-export:hover{ background:rgba(255,122,69,0.28); }
.page-thumb-menu .pt-newpage{
  background:rgba(52,199,89,0.14);color:#34c759;border:1px solid rgba(52,199,89,0.4);
}
.page-thumb-menu .pt-newpage:hover{ background:rgba(52,199,89,0.26); }
.page-thumb-menu .pt-delete{
  background:rgba(232,93,93,0.14);color:var(--danger);border:1px solid rgba(232,93,93,0.4);
}
.page-thumb-menu .pt-delete:hover{ background:rgba(232,93,93,0.26); }
.page-thumb-label{
  text-align:center;font-size:9.5px;color:var(--text-dim);
  padding:2px 0 0;font-family:var(--font-body);
}
.page-thumb.current + .page-thumb-label,
.page-thumb.current ~ .page-thumb-label{ color:var(--text-bright); }

/* Drag-to-reorder — vertical-only movement */
.page-thumb-wrap{ cursor:grab; position:relative; touch-action:none; }
.page-thumb-wrap.dragging-page{
  opacity:0.85; cursor:grabbing; z-index:20;
  box-shadow:0 8px 18px rgba(0,0,0,0.35); border-radius:8px;
  transition:none;
}
.page-thumb-wrap.drop-target .page-thumb{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,122,69,0.35);
}

/* "+" insert-blank-page strips, between/around thumbnails */
.page-add-strip{
  display:flex;align-items:center;justify-content:center;
  height:14px;margin:2px 0;position:relative;
}
.page-add-strip::before{
  content:'';position:absolute;left:8%;right:8%;top:50%;height:1px;
  background:var(--rail-border);opacity:0;transition:opacity .12s;
}
.page-add-strip:hover::before{ opacity:1; }
.page-add-btn{
  width:18px;height:18px;border-radius:50%;
  background:var(--rail-bg-soft);border:1px solid var(--rail-border);
  color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .12s,background .12s,color .12s,border-color .12s;
  position:relative;z-index:1;flex-shrink:0;
}
.page-add-btn svg{width:11px;height:11px;flex-shrink:0;}
.page-add-strip:hover .page-add-btn{ opacity:1; }
.page-add-btn:hover{ background:var(--accent-soft);color:var(--accent);border-color:var(--accent); }

#pagesPanel .pages-empty{
  color:var(--text-dim);font-size:12px;text-align:center;margin-top:30px;padding:0 10px;
  line-height:1.5;
}
.page-scale-wrap{
  margin:0 auto 22px;
  position:relative;
}
.page-wrap{
  position:relative;
  box-shadow:0 6px 22px rgba(0,0,0,0.28);
  background:#fff;
}
.page-wrap canvas{display:block;}
.pdf-canvas{position:relative;z-index:0;}
.annot-canvas{position:absolute;top:0;left:0;touch-action:none;z-index:1;}
.page-num-badge{
  position:absolute;bottom:-20px;left:0;right:0;text-align:center;
  font-size:10.5px;color:#6b6f7a;font-family:var(--font-body);
}

/* Shared base for anything placed on a page (image / text / symbol).
   Only draggable/deletable while the Select tool is active — otherwise
   pointer-events are off so pen/highlight/erase can work underneath. */
.placed-item{
  position:absolute;z-index:2;border:1.5px solid transparent;touch-action:none;
  pointer-events:none;
}
#app.tool-select .placed-item{ pointer-events:auto; cursor:move; }
.placed-item:hover, .placed-item.dragging, .placed-item.resizing{
  border-color:var(--accent);
}
.placed-item .img-handle{
  position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;cursor:nwse-resize;
  opacity:0;transition:opacity .12s ease;pointer-events:none;
}
#app.tool-select .placed-item:hover .img-handle,
#app.tool-select .placed-item.resizing .img-handle{opacity:1;pointer-events:auto;}
/* An item stays resizable/deletable once selected, even outside Select
   tool — this is what lets clicking an existing image while the Image
   tool is active both move AND resize it, not just move it. */
.placed-item.item-selected .img-handle{opacity:1;pointer-events:auto;}
.placed-item .img-del{
  position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
  background:var(--danger);color:#fff;border:2px solid #fff;font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .12s ease;pointer-events:none;
}
#app.tool-select .placed-item:hover .img-del{opacity:1;pointer-events:auto;}
.placed-item.item-selected .img-del{opacity:1;pointer-events:auto;}
.placed-item.item-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,122,69,0.35);
}

/* Right-click-drag marquee selection rectangle */
.marquee-rect{
  position:absolute;z-index:70;pointer-events:none;
  border:1.5px dashed var(--accent);
  background:rgba(255,122,69,0.12);
}

.placed-image img{
  width:100%;height:100%;display:block;pointer-events:none;user-select:none;
}
.placed-text, .placed-symbol{
  white-space:pre;user-select:none;line-height:1.25;padding:1px 2px;
}
.placed-symbol{line-height:1;}

/* ---- Linked text boxes (Live Sync tool) ---- */
.placed-linked{
  background:transparent;
  color:#1a1c22;
  font-family:Inter,sans-serif;
  font-size:13px;
  line-height:1.45;
  padding:6px 10px;
  min-width:80px;
  min-height:30px;
  word-break:break-word;
  cursor:default;
}
.placed-linked .linked-text{ pointer-events:none; user-select:none; }
/* Border only shows on hover/select in select mode — not normally visible */
.placed-linked.placed-item{ border-color:transparent; }
#app.tool-select .placed-linked:hover{ border-color:#007aff; }
.placed-linked.item-selected{ border-color:#007aff !important; }
.placed-linked .link-badge{
  position:absolute;top:-8px;right:-8px;
  background:#007aff;color:#fff;border:2px solid #fff;
  border-radius:50%;width:18px;height:18px;font-size:9px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  /* badge only visible when hovered / selected */
  opacity:0;transition:opacity .15s;
}
#app.tool-select .placed-linked:hover .link-badge,
.placed-linked.item-selected .link-badge{ opacity:1; }

/* ---- Link & Sync Blanks panel ---- */
#linkpdfSection{ display:none; }
#linkpdfSection .blanks-list{ display:flex;flex-direction:column;gap:8px; }
.blank-item{
  background:#1f2228;border:1px solid var(--rail-border);border-radius:9px;
  overflow:hidden;cursor:grab;
  transition:border-color .15s, box-shadow .15s;
}
.blank-item:active{ cursor:grabbing; }
.blank-item:hover{
  border-color:rgba(255,122,69,0.5);
  box-shadow:0 0 0 2px rgba(255,122,69,0.12);
}
.blank-item.dragging-blank{
  border-color:var(--accent);
  box-shadow:0 4px 18px rgba(255,122,69,0.25);
  opacity:0.85;
}
.blank-item-header{
  display:flex;align-items:center;gap:7px;padding:8px 8px 6px;
  /* The header row is the visual "drag zone" hint */
}
.blank-num-badge{
  min-width:20px;height:20px;border-radius:5px;background:var(--accent-soft);
  color:var(--accent);font-size:10px;font-weight:700;font-family:var(--font-display);
  display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;
}
/* Editable blank name */
.blank-name-input{
  flex:1;background:transparent;border:none;border-bottom:1px solid transparent;
  color:var(--text-bright);font-family:var(--font-body);font-size:12px;font-weight:600;
  padding:1px 2px;outline:none;min-width:0;cursor:text;
  transition:border-color .12s;
}
.blank-name-input:hover{ border-bottom-color:var(--rail-border); }
.blank-name-input:focus{ border-bottom-color:var(--accent); cursor:text; }
.blank-del-btn{
  background:transparent;border:none;color:var(--danger);cursor:pointer;
  font-size:13px;padding:2px 4px;opacity:0.55;flex-shrink:0;
}
.blank-del-btn:hover{opacity:1;}
.blank-drag-hint{
  display:flex;align-items:center;gap:5px;
  padding:4px 8px 3px;
  color:var(--text-dim);font-size:10px;letter-spacing:0.04em;
  border-top:1px solid var(--rail-border);
  background:#161820;user-select:none;
}
.blank-drag-hint svg{ opacity:0.7; }
.blank-textarea{
  display:block;width:100%;padding:7px 8px;
  background:#2a2d36;border:none;border-top:1px solid var(--rail-border);
  color:var(--text-bright);font-family:var(--font-body);font-size:12px;
  line-height:1.5;resize:none;height:60px;outline:none;cursor:text;
}
.blank-textarea::placeholder{ color:#555; }
.blank-textarea:focus{ background:#30333e; }
.blank-link-count{
  padding:4px 8px 6px;font-size:10px;color:var(--text-dim);
  background:#161820;user-select:none;
}
.blank-link-count.linked{ color:#34c759; }
#addBlankBtn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:8px;margin-top:6px;
  background:transparent;border:1.5px dashed #3a3d46;border-radius:8px;
  color:var(--text-dim);font-size:12px;cursor:pointer;font-family:var(--font-body);
  transition:border-color .12s,color .12s;
}
#addBlankBtn:hover{ border-color:var(--accent);color:var(--accent); }

/* eraser cursor */
#eraserCursor{
  position:fixed;pointer-events:none;border:2px solid var(--accent);
  background:rgba(255,122,69,0.14);border-radius:50%;
  transform:translate(-50%,-50%);display:none;z-index:999;
}
#app.tool-erase .annot-canvas{cursor:none;}

/* Live "ghost" preview of the symbol about to be placed — follows the
   cursor exactly where it will land, so aligning it into a small box
   (checkbox cells etc.) is a matter of watching it line up before you
   click, rather than guessing and re-adjusting after. */
#symbolPreview{
  position:fixed;pointer-events:none;
  transform:translate(-50%,-50%);display:none;z-index:999;
  font-family:sans-serif;line-height:1;opacity:0.55;
  text-shadow:0 0 1px rgba(255,255,255,0.6);
}
#app.tool-symbol .annot-canvas{cursor:none;}

#emptyState{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;color:#6b6f7a;text-align:center;
}
#emptyState.hidden{display:none;}
#emptyState .ico{width:56px;height:56px;stroke:#8b8f9b;}
#emptyState h2{font-family:var(--font-display);font-size:18px;color:#43464f;margin:0;}
#emptyState p{font-size:13px;margin:0;max-width:280px;}

/* Inline text editor — no box, no border, no background.
   Just a transparent contenteditable that shows the native blinking
   text caret exactly where the user clicked. */
.inline-text-edit{
  position:absolute;
  background:transparent;
  border:none;
  outline:none;
  padding:0;
  margin:0;
  min-width:2px;
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.25;
  font-family:Inter,sans-serif;
  cursor:text;
  z-index:40;
}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#3a3d46;border-radius:6px;}
#toolbox::-webkit-scrollbar-thumb{background:#33363e;}

.hint-banner{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  background:#1a1c22;color:#f4f1ea;padding:8px 16px;border-radius:20px;
  font-size:12px;font-family:var(--font-body);box-shadow:0 8px 20px rgba(0,0,0,0.3);
  display:none;z-index:60;border:1px solid #2c3038;
}

/* Floating right-click context menu for a PDF page (thumbnail or canvas) */
#pageCtxMenu{
  position:fixed;z-index:200;display:none;flex-direction:column;gap:2px;
  background:var(--rail-bg);border:1px solid var(--rail-border);border-radius:10px;
  padding:5px;box-shadow:0 10px 28px rgba(0,0,0,0.4);min-width:150px;
}
#pageCtxMenu.open{ display:flex; }
#pageCtxMenu button{
  display:flex;align-items:center;gap:8px;
  border:none;border-radius:7px;background:transparent;
  padding:8px 9px;font-size:12.5px;font-weight:500;font-family:var(--font-body);
  color:var(--text-bright);cursor:pointer;text-align:left;
}
#pageCtxMenu button svg{width:14px;height:14px;flex-shrink:0;}
#pageCtxExport:hover{ background:var(--accent-soft);color:var(--accent); }
#pageCtxNewPage:hover{ background:rgba(52,199,89,0.14);color:#34c759; }
#pageCtxDelete{ color:var(--danger); }
#pageCtxDelete:hover{ background:rgba(232,93,93,0.14); }