*{box-sizing:border-box}
body{margin:0;font-family:system-ui;height:100vh;display:flex;flex-direction:column}
#topbar{position:sticky;top:0;z-index:60;background:#0b1220;border-bottom:1px solid #1f2937}
#tabBar{display:flex;align-items:center;gap:8px;padding:8px 10px;overflow:visible}
#tabs{display:flex;gap:6px;flex:1;min-width:0;overflow:auto;padding-bottom:2px}
.tab{display:flex;align-items:center;gap:8px;background:#111827;color:#cbd5e1;border:1px solid #1f2937;border-radius:999px;padding:6px 10px;cursor:pointer;user-select:none;white-space:nowrap}
.tab.active{background:#1f2937;color:#fff;border-color:#334155}
.tab .name{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.tab .close{background:transparent;border:0;color:inherit;cursor:pointer;font-size:14px;line-height:1}
#newTabBtn{background:#2563eb;color:#fff;border:0;border-radius:10px;padding:8px 10px;cursor:pointer}
#newTabBtn:hover{filter:brightness(1.05)}

#toolbar{background:#1f2937;color:#fff;padding:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sep{width:1px;height:22px;background:#4b5563;margin:0 4px;display:inline-block}
#layout{flex:1;display:flex;min-height:0}
#viewer{flex:1;background:#0b0f18;overflow:auto;position:relative}
#pages{padding:18px 0}
.pageWrap{position:relative;margin:14px auto;background:#111827;border:1px solid #1f2937;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.35);width:fit-content}
.pageInner{position:relative}
.pageInner canvas{display:block}
.pageInner .pdfCanvas{position:absolute;inset:0;z-index:0}
.pageInner .drawCanvas{position:absolute;inset:0;z-index:1;touch-action:none;outline:none;cursor:crosshair}
.pageInner .uiCanvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.pageLabel{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;z-index:3}
#statusBar{position:sticky;bottom:0;background:#0b1220;color:#cbd5e1;padding:6px 10px;font-size:12px;border-top:1px solid #334155}
#properties{width:340px;background:#f9fafb;padding:12px;border-left:1px solid #e5e7eb;overflow:auto}
.hidden{display:none}
textarea{width:100%;resize:vertical}
label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.hint{font-size:12px;color:#6b7280;margin-top:6px;line-height:1.35}
.loadingOverlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;z-index:99}

#toolbar button.active{outline:2px solid rgba(255,255,255,.6)}

#straightenLabel{color:#cbd5e1;font-size:12px;min-width:42px;display:inline-block}

#snapDistLabel{color:#cbd5e1;font-size:12px;min-width:46px;display:inline-block}

#openPdfBtn{
  background:#2563eb;color:#fff;border:0;border-radius:10px;
  padding:8px 10px;cursor:pointer;white-space:nowrap
}
#openPdfBtn:hover{filter:brightness(1.05)}
#newTabPlus{
  width:34px;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:#111827;color:#e5e7eb;border:1px solid #334155;border-radius:10px;cursor:pointer;font-size:18px;line-height:1
}
#newTabPlus:hover{background:#1f2937}

.tab.plus{
  width:34px;min-width:34px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#0b1220;color:#e5e7eb;
  border:1px dashed #334155;
  border-radius:999px;
  font-size:18px;line-height:1;
}
.tab.plus:hover{background:#111827}

html,body{overscroll-behavior: none;}
#viewer{overscroll-behavior: contain;}

#viewer:focus{outline:none;}