/* Layout helper (consistent padding) */
.wrap{ max-width: var(--max, 1200px); margin: 0 auto; padding: 0 var(--pad, 24px); }

/* ───────────────────────────────────────────────────────────────────────────
   FULLSCREEN WORKSPACE (Annotate)
   Use the full available viewport for the PDF sketch tool.
   ─────────────────────────────────────────────────────────────────────────── */

/* Prevent the page from scrolling; the stage (canvas) is scrollable instead */
html, body.page-annotate{
  height: 100%;
}
body.page-annotate{
  overflow: hidden;
}

/* Remove site-like max-width constraints for this app */
.page-annotate .wrap{
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Hide sections that steal vertical real estate */
.page-annotate .hero.hero-mini{ display:none; }
.page-annotate .note{ display:none; }
.page-annotate .footer{ display:none; }

/* Main app fills the viewport below the topbar */
.page-annotate .annotate-wrap{
  padding: 0;
  height: calc(100vh - var(--topbarH, 72px));
}

.page-annotate .annotate-card{
  margin: 0;
  border-radius: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Keep top controls visible while working */
.page-annotate .annotate-top,
.page-annotate .toolbar{
  flex: 0 0 auto;
}

.page-annotate .workspace{
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.page-annotate .thumbs-panel,
.page-annotate .items-panel,
.page-annotate .stage{
  height: 100%;
  min-height: 0;
}

/* Tighten padding so the canvas grows */
.page-annotate .annotate-top{ padding: 10px 12px; }
.page-annotate .toolbar.toolbar-v2{ padding: 8px 10px; }

/* Make the stage occupy all remaining height */
.page-annotate .stage{
  padding: 8px;
  background: transparent;
}
.page-annotate .stage .stage-inner{
  height: 100%;
  max-height: none;
}

/* PDF schets mini-app (JABO) */
.annotate-wrap{ padding-top: 12px; padding-bottom: 48px; padding-left: 0; padding-right: 0; }
.hero-mini{ padding: 24px 0 10px; }
.hero-mini .lead{ max-width: 70ch; }

.annotate-card{
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  /* Fallback */
  background: var(--surface);
  /* Slightly brighter than the global surface so the PDF app doesn't feel "too dark" */
  background: color-mix(in oklab, var(--surface) 82%, white);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.annotate-top{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   Mode toggle (Klant/Pro)
   ───────────────────────────────────────────────────────────── */
.mode-toggle{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.mode-toggle #modeToggle{ white-space:nowrap; }

/* Level selector (niveaus / verdiepingen) */
.level-toggle{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.level-select{
  height:34px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(15,23,42,0.55);
  color:rgba(255,255,255,0.92);
  font:600 12px system-ui, -apple-system, Segoe UI, Roboto, Arial;
  outline:none;
}
.level-select:focus{ border-color:rgba(255,255,255,0.22); box-shadow:0 0 0 3px rgba(245,158,11,0.22); }
.level-add{ width:34px; height:34px; border-radius:999px; padding:0; }
body.is-guided .level-add{ display:none; }

@media (max-width: 720px){
  .level-select{ height:32px; padding:6px 8px; }
  .level-add{ width:32px; height:32px; }
}
.mode-pill{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  font:700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  opacity:0.85;
}
.mode-pill.is-pro{ background:rgba(20,180,120,0.18); }
.mode-pill.is-guided{ background:rgba(80,120,255,0.18); }

/* ─────────────────────────────────────────────────────────────
   Guided overlay (client mode)
   ───────────────────────────────────────────────────────────── */
.guided-overlay{ position:fixed; inset:0; z-index:40000; }
.guided-overlay[hidden]{ display:none; }
.guided-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.35); z-index:0; }
.guided-modal{
  z-index:1;
  position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border-radius:16px;
  background:var(--card, rgba(20,20,24,0.98));
  color:var(--text, #fff);
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
  padding:14px 14px 12px;
}
.guided-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.guided-title{ font:800 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.guided-close{ border-radius:999px; }
.guided-body{ margin-top:10px; font:500 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial; opacity:0.95; }
.guided-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.guided-actions .btn{ flex:1 1 auto; }

.guided-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  margin-top:10px;
}
.guided-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.guided-row .mini{ flex:1 1 160px; }

@media (min-width: 560px){
  .guided-grid{ grid-template-columns: 1fr 1fr; }
}

/* Highlight elements that are allowed to be clicked during guided steps */
.guided-highlight{
  position:relative;
  z-index:40001 !important;
  outline:3px solid rgba(255,255,255,0.75);
  outline-offset:2px;
  border-radius:12px;
  box-shadow:0 0 0 6px rgba(80,120,255,0.18);
}

/* Guided compact rail (shown only in client mark step) */
.guided-rail{
  position:fixed;
  left:10px; right:10px; bottom:10px;
  z-index:40002;
  display:flex; align-items:center; gap:8px;
  padding:10px;
  border-radius:16px;
  background:rgba(20,20,24,0.92);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.guided-rail[hidden]{ display:none; }
.guided-rail .gbtn{
  appearance:none; border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  font:700 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.guided-rail .gbtn.is-active{
  border-color:rgba(80,120,255,0.85);
  background:rgba(80,120,255,0.22);
  box-shadow:0 0 0 4px rgba(80,120,255,0.18);
}
.guided-rail .gbtn-primary{ background:rgba(80,120,255,0.9); border-color:rgba(80,120,255,1); font-weight:800; }
.guided-rail .gspacer{ flex:1; }

@media (max-width: 560px){
  .guided-modal{ top:auto; bottom:12px; transform:translate(-50%,0); }
  .guided-rail{ left:8px; right:8px; bottom:8px; padding:6px; gap:5px; }
  .guided-rail .gbtn{ padding:9px 9px; font-size:12px; border-radius:10px; }
}

@media (max-width: 420px){
  .guided-rail{ left:6px; right:6px; bottom:6px; }
  .guided-rail .gbtn{ padding:8px 8px; font-size:11px; }
}

/* In guided mode we hide pro-only menus to keep the UI calm */
body.is-guided .pizzaBtn,
body.is-guided details.dd{ display:none !important; }

.upload{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.file input{ position:absolute; left:-9999px; }
.pager{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pager-label{ opacity: .8; min-width: 64px; text-align:center; }
.zoom{ display:flex; gap:8px; align-items:center; }
.zoom-label{ opacity:.85; min-width: 62px; text-align:center; }

.toolbar{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* ───────────────────────────────────────────────────────────────────────────
   Toolbar v2 (compact + grouped)
   ─────────────────────────────────────────────────────────────────────────── */

.toolbar.toolbar-v2{
  align-items:center;
  gap:10px;
  padding:10px;
}

.toolbar.toolbar-v2 .toolrow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}

.toolbar.toolbar-v2 .toolspacer{ flex:1 1 auto; }

/* Details dropdown */
.dd{
  position:relative;
}
.dd > summary{
  list-style:none;
  cursor:pointer;
}
.dd > summary::-webkit-details-marker{ display:none; }

.dd[open] .dd-menu{
  display:block;
}

.dd-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  max-width:min(520px, 92vw);
  background:rgba(20, 28, 44, 0.98);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:10px;
  box-shadow:0 18px 55px rgba(0,0,0,0.45);
  z-index:50;
}

.dd-right .dd-menu{ left:auto; right:0; }

.dd-menu-wide{ min-width:320px; }

.dd-title{
  font-weight:700;
  opacity:0.92;
  margin:2px 0 8px;
}

.dd-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.dd-sep{
  height:1px;
  background:rgba(255,255,255,0.10);
  margin:10px 0;
}

.dd-hint{
  font-size:12px;
  opacity:0.75;
}

/* Make menu items comfortable on touch */
.dd-menu .toolbtn,
.dd-menu .seg-btn,
.dd-menu .btn{
  min-height:44px;
}

/* Use more of the viewport on the annotate page */
.page-annotate .hero.hero-mini{ display:none; }
.page-annotate .annotate-wrap{ padding-top:16px; }

@media (max-width: 820px){
  .annotate-top{ gap:10px; }
  .pager{ flex-wrap:wrap; justify-content:flex-start; }
  .dd-menu{ position:fixed; left:12px; right:12px; top:auto; bottom:12px; max-width:none; }
  .dd-right .dd-menu{ left:12px; right:12px; }
}

.toolgroup{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.toolgroup-right{ margin-left:auto; }

.tooltitle{
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  margin-right: 2px;
}

.seg{
  display:inline-flex;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow:hidden;
}
.seg-btn{
  padding: 8px 12px;
  border: 0;
  background: transparent;
  cursor:pointer;
  font-weight: 700;
  color: var(--ink);
  opacity: .85;
}
.seg-btn.is-active{ opacity: 1; background: rgba(255,255,255,0.65); }

.toolbtn{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.65);
  cursor:pointer;
  font-weight: 650;
}
.toolbtn.is-active{
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.mini{
  display:flex;
  gap: 8px;
  align-items:center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
}
.mini span{ font-size: 12px; opacity:.75; }
.mini input[type="range"]{ width: 120px; }

.stage{
  position: relative;
  padding: 16px;
  background: rgba(255,255,255,0.62);
}
.stage-inner{
  position: relative;
  width: 100%;
  height: clamp(360px, 62vh, 720px);
  max-height: 72vh;
  overflow: auto;
  /* Keep wheel/trackpad gestures contained inside the viewport */
  overscroll-behavior: contain;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

/* The PDF canvas defines the page size in normal flow. */
#pdfCanvas{
  display:block;
}

/* Fabric.js wraps #drawCanvas in a .canvas-container div.
   We absolutely overlay that container on top of the PDF canvas. */
.stage-inner .canvas-container{
  position: absolute !important;
  left: 0;
  top: 0;
  z-index: 5;
}

/* Make sure both Fabric canvases receive pointer events */
.stage-inner .canvas-container canvas{
  pointer-events: auto;
}
.hint{
  position:absolute;
  inset: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: rgba(11,27,58,0.75);
  background: rgba(255,255,255,0.75);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 18px;
  /* Never block interaction with the canvases underneath */
  pointer-events: none;
}

.note{ padding: 0; }
.note h2{ margin: 0 0 8px; }
.note p{ margin: 0; opacity: .9; }

/* Make the bottom area feel like the rest of the site (avoid a "black slab" feeling) */
.page-annotate .note{ padding: 34px 0; }
.page-annotate .note .container{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 18px;
}

@media (max-width: 720px){
  .mini input[type="range"]{ width: 90px; }
  .toolgroup-right{ width: 100%; justify-content:flex-start; }
  .stage{ padding: 12px; }
}


.toolbtn-secondary{opacity:.9}
.toolbtn-secondary.is-disabled{opacity:.45;pointer-events:none}


/* Workspace: stage + element list */
.workspace{
  display: grid;
  /* IMPORTANT (grid min-width trap):
     the stage contains a large scrollable canvas. Without minmax(0,1fr)
     the first grid column can refuse to shrink and will push the right
     sidebar off-screen when zooming in (>100%). */
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
  padding: 12px 16px 16px;
}

/* Collapse side panels to give the canvas maximum room */
.workspace.is-thumbs-collapsed{ grid-template-columns: 56px minmax(0, 1fr) 300px; }
.workspace.is-items-collapsed{  grid-template-columns: 220px minmax(0, 1fr) 56px; }
.workspace.is-thumbs-collapsed.is-items-collapsed{ grid-template-columns: 56px minmax(0, 1fr) 56px; }
@media (max-width: 980px){
  .workspace{ grid-template-columns: 1fr; }
  .thumbs-panel{ order: 1; }
  .items-panel{ order: 3; }
}

/* Thumbnails panel */
.thumbs-panel{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.thumbs-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.thumbs-head h3{ font-size: 14px; margin: 0; opacity: .9; }
.thumbs-body{ padding: 10px 10px; display:flex; flex-direction:column; gap:10px; max-height: 62vh; overflow:auto; }
.thumb{
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}
.thumb:hover{ filter: brightness(1.02); }
.thumb.is-active{ outline: 2px solid color-mix(in oklab, var(--accent) 65%, transparent); }
.thumb canvas, .thumb img{ width: 72px; height: auto; border-radius: 8px; display:block; border: 1px solid var(--line); background:#fff; }
.thumb-meta{ display:flex; flex-direction:column; gap:2px; }
.thumb-title{ font-weight: 750; font-size: 12px; }
.thumb-sub{ font-size: 12px; opacity: .75; }
.thumbs-panel.is-collapsed .thumbs-body{ display:none; }

.thumbs-panel.is-collapsed .thumbs-head{ justify-content:center; }
.thumbs-panel.is-collapsed .thumbs-head h3{ display:none; }
.thumbs-panel.is-collapsed #thumbsCollapse{
  width: 100%;
  border-radius: 12px;
}

.stage{
  margin: 0;
  min-width: 0; /* allow grid column to shrink (prevents sidebar from being pushed out) */
}
.stage .stage-inner{
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(360px, 62vh, 720px);
  overflow: auto; /* pan uses scroll */
  border-radius: 14px;
  overscroll-behavior: contain;
}
/* Let the PDF canvas define the scrollable area in normal flow.
   The Fabric overlay is absolutely positioned on top. */
#pdfCanvas{
  position: relative;
  left: auto;
  top: auto;
}
.canvas-container{
  position:absolute !important;
  left:0; top:0;
  z-index: 4;
}
#pdfCanvas{ z-index: 1; }
#drawCanvas{ z-index: 3; } /* fabric uses this element */
.hint{ z-index: 6; }

.items-panel{
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.items-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.items-head h3{ font-size: 14px; margin: 0; opacity: .9; }
.items-body{ padding: 10px 12px; }

/* ─────────────────────────────────────────────────────────
   Filters + lagen (Elementen paneel)
   ───────────────────────────────────────────────────────── */

.items-filters{ margin-bottom:10px; }

.items-filter-box{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

.items-filter-summary{
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.items-filter-summary::-webkit-details-marker{ display:none; }

.items-filter-inner{ padding: 8px 10px 10px; border-top: 1px solid var(--line); }

.items-filter-row{ margin-bottom: 10px; }
.items-filter-title{ font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; margin: 0 0 6px; }

.items-filter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.filter-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  user-select:none;
}

.filter-chip input{ margin:0; }
.filter-chip .chip-label{ font-size: 12px; opacity: 0.9; }
.filter-chip .chip-count{ margin-left:auto; font-size: 11px; opacity: 0.7; }

.items-filter-actions{ display:flex; gap:8px; justify-content: space-between; }
.items-filter-actions .btn{ flex: 1; }

/* Compact selection actions under Filters & layers */
.selection-actions{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  background:rgba(255,255,255,0.75);
}
.selection-actions-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
}
.selection-actions-title{
  font-weight:600;
  font-size:13px;
  opacity:0.9;
}
.selection-actions-btns{ display:flex; gap:8px; }
.selection-actions-hint{
  margin-top:8px;
  font-size:12px;
  opacity:0.85;
}
.items-empty{ font-size: 13px; opacity: .75; padding: 6px 4px 10px; }
.items-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.items-item{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}
.items-item:hover{ filter: brightness(1.02); }
.items-meta{ display:flex; flex-direction:column; gap:2px; }
.items-id{ font-weight: 700; font-size: 13px; }
.items-sub{ font-size: 12px; opacity: .8; }
.items-controls{ display:flex; gap:6px; align-items:center; }
.items-btn{
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.items-btn:hover{ filter: brightness(1.05); }

.items-panel.is-collapsed .items-body{ display:none; }

.items-panel.is-collapsed .items-head{ justify-content:center; }
.items-panel.is-collapsed .items-head h3{ display:none; }
.items-panel.is-collapsed #itemsCollapse{
  width: 100%;
  border-radius: 12px;
}


/* --- UX polish: toolbar clarity --- */
.annotate-top{ gap: 10px; }
.toolbar{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  justify-content:space-between;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.toolgroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  min-height: 40px;
}
.tooltitle{
  font-size:12px;
  letter-spacing:.02em;
  opacity:.75;
  margin-right: 4px;
}
.toolbtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 600;
}
.toolbtn::before{
  display:inline-block;
  width: 16px;
  margin-right: 8px;
  opacity: .9;
}
.toolbtn[data-tool="select"]::before{ content:"↖"; }
.toolbtn[data-tool="pan"]::before{ content:"✋"; }
/* Beam icon: use a clear glyph instead of a slash (slash looked like a stray character in the UI) */
.toolbtn[data-tool="beam"]::before{ content:"▬"; }
.toolbtn[data-tool="column"]::before{ content:"▣"; }
.toolbtn[data-tool="text"]::before{ content:"T"; font-weight:800; }

#finishBeam{ opacity: .85; }
#finishBeam.is-hidden{ display:none !important; }

.seg-btn{ height: 34px; padding: 0 12px; border-radius: 999px; font-weight:700; }
.segmented{ border-radius: 999px; overflow:hidden; }

@media (max-width: 760px){
  .annotate-top{ padding: 12px 12px; }
  .toolbtn{ padding: 0 10px; }
  .toolbtn::before{ margin-right:6px; }
}

/* --- Drag & drop overlay --- */
.stage-inner{ position: relative; }
.drop-overlay{
  position:absolute;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index: 20;
}

/* When hidden, the drop overlay should not intercept clicks */
.drop-overlay[aria-hidden="true"]{
  pointer-events: none;
}
.drop-overlay.is-active{ display:flex; }
.drop-card{
  pointer-events:none;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(9,18,38,.72);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  text-align:center;
}
.drop-title{ font-weight:800; font-size: 16px; }
.drop-sub{ margin-top: 4px; font-size: 13px; opacity:.85; }


/* Ensure overlay canvas receives input */
#stageInner { position: relative; }
#pdfCanvas { display:block; }
#drawCanvas { position:absolute; left:0; top:0; z-index:5; }
#hint { pointer-events:none; }


/* --- Pan/zoom interaction stability (desktop + mobile) --- */
/* IMPORTANT: only canvases should block browser scrolling/gestures.
   The page itself must remain scrollable on mobile. */
#stage, #stageInner{
  touch-action: pan-y; /* allow vertical page scroll */
}
#pdfCanvas, #drawCanvas, #pizzaOverlay, #pizzaCanvas{
  touch-action: none; /* prevent browser gestures stealing pointer events */
}
#stageInner{
  overscroll-behavior: contain;
}
#stage.is-panning, #stageInner.is-panning{
  cursor: grabbing !important;
}

#stageInner{ overflow-x:auto; overflow-y:auto; }


/* --- v16 pan fix: scroll works both directions by sizing a layout wrapper --- */
.stage-inner { overflow: auto; overflow-x: auto; overflow-y: auto; }
.canvas-wrap{
  position: relative;
  display: inline-block; /* contributes to scrollWidth/Height */
  line-height: 0;
}
#pdfCanvas, #drawCanvas{
  position: absolute;
  left: 0;
  top: 0;
}
#pdfCanvas{ z-index: 1; }
#drawCanvas{ z-index: 5; }
.drop-overlay{
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* --- Statusbar (tool + shortcuts) --- */
.statusbar{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
  font-size: 12px;
  opacity: .95;
}
.status-left{ font-weight: 700; }
.status-right{ opacity: .8; text-align:right; }

/* --- Items list classes (JS uses these) --- */
.items-list .items-item{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.02);
}
.items-list .items-item:hover{ filter: brightness(1.02); }
.items-list .items-item.is-selected{
  outline: 2px solid rgba(77,163,255,0.45);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
.items-list .items-id{ font-weight: 800; font-size: 13px; }
.items-list .items-sub{ font-size: 12px; opacity:.8; }
.items-list .items-btn{
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.items-list .items-btn:hover{ filter: brightness(1.05); }


/* Inline text editor */
.text-editor{
  position: fixed;
  z-index: 9999;
  transform: translate(6px, 6px);
}
.text-editor.hidden{ display:none; }
.text-editor-input{
  min-width: 180px;
  max-width: 420px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(10,14,20,0.92);
  color: #fff;
  outline: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* file:// guard banner */
.file-guard{
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 9998;
  pointer-events: auto;
}
.file-guard__inner{
  background: rgba(10,14,20,0.88);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px 14px;
  color: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
}
.file-guard code{
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 8px;
}
.file-guard__actions{ margin-left: 10px; }
.file-guard__hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
}

/* Viewer input robustness */
.stage-inner{
  overscroll-behavior: contain;
  touch-action: none; /* allow us to cancel ctrl/pinch gestures reliably */
}


/* (No page-specific footer overrides — keep consistent site-wide footer) */


/* PDF schets: keep background clean (no dark hero overlay) */
body.page-annotate .hero::before{
  background: none !important;
}


/* Touch ergonomics */
@media (pointer: coarse){
  .btn{ min-height: 44px; padding: 12px 14px; }
  .seg-btn{ min-height: 44px; }
  .toolbar{ gap: 10px; }
  .panel{ -webkit-overflow-scrolling: touch; }
}


/* Compact toolbar + embed mode */
/* Prevent toolbar from wrapping into multiple lines (use horizontal scroll instead) */
.toolbar{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  align-items: center;
}
.toolbar::-webkit-scrollbar{ height: 8px; }
.toolbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 999px; }
.toolgroup{ flex: 0 0 auto; }
.tooltitle{ font-size: 12px; opacity: .75; margin-right: 6px; }

/* Slightly smaller buttons so more fits */
.toolbtn{
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 999px;
  white-space: nowrap;
}
select, input[type="number"], input[type="text"]{
  font-size: 13px;
}

/* Embed mode: use the full available frame size */
html.embed, html.embed body{
  height: 100%;
}
html.embed body{
  overflow: hidden;
}
html.embed .topbar,
html.embed .hero{
  display:none !important;
}
html.embed .wrap.annotate-wrap{
  max-width: none;
  padding: 0;
  margin: 0;
}
html.embed .annotate-card{
  margin: 0;
  border-radius: 0;
  height: 100vh;
}
html.embed .annotate-top{
  padding: 10px;
}
html.embed .stage{
  height: calc(100vh - 52px);
}
html.embed .stage-inner,
html.embed .canvas-wrap{
  height: 100%;
}
@media (max-width: 720px){
  .tooltitle{ display:none; }
  .toolbtn{ padding: 6px 9px; }
}


/* ─────────────────────────────────────────────────────────────
   Properties panel (right) + Focus mode
   ───────────────────────────────────────────────────────────── */
.props{
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(2,6,23,.35);
}
.props h4{
  margin: 0 0 8px 0;
  font-size: 13px;
  opacity: .95;
}
.props .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0;
  font-size: 13px;
}
.props label{ opacity:.9; }
.props input, .props select{
  width: 140px;
  max-width: 55%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,23,42,.55);
  color: #e5e7eb;
  padding: 6px 8px;
}
.props .btn-mini{
  border-radius: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.40);
  color:#e5e7eb;
  cursor:pointer;
}
.props .hint{
  font-size: 12px;
  opacity: .8;
  margin-top: 6px;
}

/* Focus mode: collapse side panels + compact toolbar */
body.is-focus .thumbs{ width: 56px !important; }
body.is-focus .items-panel{ width: 56px !important; }
body.is-focus .thumbs-body,
body.is-focus .items-body,
body.is-focus #itemsList,
body.is-focus #propsPanel{
  display: none !important;
}
body.is-focus .thumbs-head h3,
body.is-focus .items-head h3{
  display:none !important;
}
body.is-focus .thumbs-head button,
body.is-focus .items-head button{
  width: 100%;
}
body.is-focus #toolbar .dd summary{
  padding-inline: 10px;
}
body.is-focus #toolbar .btn,
body.is-focus #toolbar .toolbtn{
  padding: 8px 10px;
}
body.is-focus #toolbar .toolspacer{ flex: 1; }


/* ─────────────────────────────────────────────────────────────
   Dropdown menus: keep above viewer/canvas (fix clipping/behind)
   ───────────────────────────────────────────────────────────── */
#top, #toolbar{
  position: relative;
  z-index: 5000;
}
.dd, .dd > summary{
  position: relative;
  z-index: 5001;
}
.dd .dd-menu{
  z-index: 6000;
}
#stage, #stageInner, #canvasWrap, #pdfCanvas, #drawCanvas{
  z-index: 1;
}


/* dd-menu portaled: prefer natural height (no scroll unless needed) */
.dd-menu{
  max-height: none;
  overflow: visible;
}

/* Allow normal page scrolling.
   We only block gesture scrolling on the canvases themselves (touch-action:none on canvases/overlays).
   This prevents "stuck" mobile behavior and avoids desktop cases where the toolbar appears missing
   because the inner layout scrolled while the page couldn't. */
html, body{
  height: 100%;
  overflow: auto;
}

/* Desktop: keep controls visible */
@media (min-width: 981px){
  .page-annotate .annotate-top{
    position: sticky;
    top: 0;
    z-index: 7000;
    background: rgba(2,6,23,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .page-annotate .toolbar{
    position: sticky;
    top: 66px; /* approx annotate-top height */
    z-index: 6999;
    background: rgba(2,6,23,.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Small screens: prioritize canvas by default (still reversible via Focus) */
@media (max-width: 980px){
  /* Reduce toolbar height pressure */
  .page-annotate .toolbar{
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Hide left/right panels unless explicitly opened or in non-focus desktop */
  body:not(.is-focus) .thumbs,
  body:not(.is-focus) .items-panel{
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   Pizza menu (radial) - overlay
   ───────────────────────────────────────────────────────────── */
#pizzaOverlay{
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  pointer-events: none;
  /* Mobile reliability: prevent browser scroll/zoom gestures from stealing PointerEvents */
  touch-action: none;
}
#pizzaOverlay.is-open{
  display: block;
  pointer-events: auto;
}
#pizzaCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action: none;
}
#pizzaHint{
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.92);
  font-size: 13px;
  display:none;
}
#pizzaOverlay.is-open #pizzaHint{ display:block; }

/* Hide dropdown lists for Constructie/Annotatie (pizza menu replaces) */
#ddConstructie .dd-menu,
#ddAnnotatie .dd-menu{
  display: none !important;
}
#ddMateriaal .dd-menu,
#ddStijl .dd-menu{
  display: none !important;
}
#ddConstructie > summary::after,
#ddAnnotatie > summary::after{
  content: '';
}

/* Pizza trigger buttons (replace <details> dropdowns) */

/* Pizza trigger buttons: compact + uncluttered (touch friendly) */
.pizzaBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,23,42,0.38);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.pizzaBtn .pico{ font-size: 15px; line-height: 1; }
.pizzaBtn .plbl{ font-size: 12px; letter-spacing: .2px; }
.pizzaBtn:hover{ background: rgba(15,23,42,0.55); }
.pizzaBtn:active{ transform: translateY(1px); }

/* Reduce clutter on small screens: show icon only */
@media (max-width: 820px){
  .pizzaBtn{ padding: 10px 10px; }
  .pizzaBtn .plbl{ display:none; }
}

/* pizza toolbar pointer-events */
#toolbar, #toolbar *{ pointer-events: auto; }

/* ─────────────────────────────────────────────────────────────
   Slab picker (Rect/Poly + span direction)
   ───────────────────────────────────────────────────────────── */
#slabPicker.slab-picker{
  position: fixed;
  z-index: 31000;
  min-width: 220px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(2,6,23,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.92);
}
.slab-picker__hdr{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.slab-picker__title{
  font: 800 12px system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing: .2px;
}
.slab-picker__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font: 900 14px system-ui;
  line-height: 1;
  cursor: pointer;
}
.slab-picker__section{ margin-bottom: 8px; }
.slab-picker__label{
  font: 700 11px system-ui;
  color: rgba(255,255,255,0.72);
  margin: 6px 0 6px;
}
.slab-picker__row{
  display:flex;
  gap: 8px;
}
.slab-picker__btn{
  flex: 1;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  font: 800 12px system-ui;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: keep it compact and out of the way (bottom sheet style) */
@media (max-width: 520px){
  #slabPicker.slab-picker{
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 16px;
  }
  .slab-picker__hdr{ margin-bottom: 8px; }
  .slab-picker__btn{ padding: 9px 10px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   v188 Mobile-Pro: bottom sheets + compact controls
   ─────────────────────────────────────────────────────────────────────────── */

/* Keep the actual page scrollable (never lock body on mobile) */
@media (max-width: 720px){
  html, body{ height:auto; overflow:auto !important; }
  body{ -webkit-overflow-scrolling: touch; }
}

/* Compact button sizing on phones */
@media (max-width: 520px){
  .btn, .toolbtn, .seg-btn{
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .toolbtn{ border-radius: 999px; }
  .pager, .upload, .zoom{ gap:6px; }
  .pager-label, .zoom-label{ min-width: 52px; font-size: 12px; }
  .statusbar{ display:none; }
}

/* Mobile sheet launcher buttons (Pages + Elements) */
.mobile-sheets{
  display:none;
}
@media (max-width: 720px){
  .mobile-sheets{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 86px; /* above guided rail / browser UI */
    display:flex;
    gap:10px;
    justify-content: space-between;
    pointer-events:none;
    z-index: 70;
  }
  .mobile-sheet-btn{
    pointer-events:auto;
    flex: 1 1 auto;
    max-width: 48%;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(15,22,36,0.82);
    color: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .2px;
  }
}

/* Convert side panels into bottom sheets on mobile (Pro mode friendly) */
@media (max-width: 720px){
  .thumbs-panel,
  .items-panel{
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    top: auto;
    width: auto !important;
    max-width: none !important;
    height: min(62vh, 520px);
    border-radius: 18px;
    transform: translateY(calc(100% + 16px));
    transition: transform .18s ease;
    z-index: 80;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
  }
  .thumbs-panel.is-sheet-open,
  .items-panel.is-sheet-open{
    transform: translateY(0);
  }

  /* When sheets are used, the workspace should be full width */
  .workspace{
    grid-template-columns: 1fr !important;
  }

  /* Hide the collapse buttons inside panels; we close via launcher or header close */
  #thumbsCollapse, #itemsCollapse{ display:none !important; }

  /* Make panel bodies scroll nicely */
  .thumbs-body, .items-body{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Backdrop for bottom sheets */
.sheet-backdrop{
  display:none;
}
@media (max-width: 720px){
  .sheet-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    z-index: 75;
    display:none;
  }
  .sheet-backdrop.is-open{ display:block; }
}

/* ─────────────────────────────────────────────────────────────
   Mobile Pro: compact UI (standard pattern: canvas-first)
   - Hide marketing header actions
   - One-line tool feel (icon-first)
   - Reduce vertical chrome
   ───────────────────────────────────────────────────────────── */

@media (max-width: 560px){
  /* Make the site topbar minimal on annotate page */
  .page-annotate header.topbar{
    position: sticky;
    top: 0;
    z-index: 20000;
    padding: 6px 10px;
  }
  .page-annotate header.topbar .nav,
  .page-annotate header.topbar .nav-actions{ display:none !important; }
  .page-annotate header.topbar .brand{ padding: 0; }
  .page-annotate header.topbar .brand-logo{ height: 22px; width:auto; }

  /* Tighten the app top strip */
  .page-annotate .annotate-top{ padding: 6px 8px; gap: 8px; }
  .page-annotate .annotate-top .btn{ padding: 8px 10px; font-size: 12px; }
  .page-annotate .pager{ gap: 6px; }
  .page-annotate .pager .btn{ padding: 7px 9px; }
  .page-annotate .zoom{ display:none; } /* zoom via pinch / gestures */

  /* Toolbar: shrink and icon-first */
  .page-annotate .toolbar.toolbar-v2{ padding: 6px 6px; }
  .page-annotate .toolbar .toolrow{ gap: 6px; }

  .page-annotate .toolbtn{
    padding: 8px 10px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1;
  }
  .page-annotate .toolbtn.iconOnly{
    width: 42px;
    padding: 0;
    height: 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 16px;
  }

  /* Pizza buttons: hide text label to save space */
  .page-annotate .toolbtn .plbl{ display:none; }

  /* Statusbar is nice on desktop but steals height on mobile */
  .page-annotate #statusbar{ display:none; }

  /* Give the stage more room */
  .page-annotate .stage{ padding: 6px; }

  /* Bottom sheet launchers: keep slim */
  .mobile-sheet-launchers{ left:8px; right:8px; bottom:8px; }
  .mobile-sheet-launchers .sheet-launch{ padding: 8px 10px; font-size: 12px; border-radius: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   Pro touch action rail (shown on coarse pointers while drawing)
   Keeps drawing UX workable on mobile/tablet without eating screen.
   ───────────────────────────────────────────────────────────── */
.touch-rail{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: none;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(10,12,16,0.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.touch-rail.is-open{ display: flex; }
.touch-rail .tspacer{ flex: 1; }
.touch-rail .tbtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-height: 44px;
}
.touch-rail .tbtn:active{ transform: translateY(1px); }
.touch-rail .tbtn.primary{
  background: rgba(255,140,0,0.9);
  border-color: rgba(255,140,0,0.9);
  color: #0b0f14;
}
.touch-rail .tbtn.danger{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
@media (min-width: 980px){
  /* Desktop: never show this rail */
  .touch-rail{ display: none !important; }
}


/* ─────────────────────────────────────────────────────────────
   Pro touch action rail (shown on coarse pointers while drawing)
   ───────────────────────────────────────────────────────────── */
.touch-rail{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: none;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 16px;
  background: rgba(15, 18, 24, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.touch-rail .tspacer{ flex: 1; }
.touch-rail .tbtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  min-height: 44px;
  min-width: 64px;
  touch-action: manipulation;
}
.touch-rail .tbtn:active{ transform: translateY(1px); }
.touch-rail .tbtn-primary{
  background: var(--jabo-accent, #f39c12);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.88);
}
@media (hover: hover) and (pointer: fine){
  /* Desktop: never show this rail (Pro uses regular toolbar & keyboard shortcuts) */
  .touch-rail{ display: none !important; }
}


/* --- v225 mobile fit overrides --- */
@media (max-width: 720px){
  /* keep app usable on small screens */
  .status-right{display:none !important;}
  .statusbar{font-size:12px;}
  .annotate-top{flex-wrap:wrap; gap:8px;}
  .zoom{margin-left:auto;}
  .workspace{min-height:0;}
  .thumbs-panel, .items-panel{
    max-height: calc(100dvh - 160px);
    overflow: hidden;
  }
  .thumbs-body, .items-body{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* filters/layers should not eat vertical space */
  .items-filter-row{margin-top:10px;}
  .items-filter-grid{display:flex; flex-wrap:wrap; gap:6px;}
  .items-filter-title{font-size:12px;}
}
@media (max-width: 560px){
  /* reduce padding so everything fits */
  .annotate-card{padding:10px;}
  .canvas-wrap{touch-action:none;}
  .items-head, .thumbs-head{position:sticky; top:0; background:inherit; z-index:2;}
}


/* v229: compact filter box header */
.items-filter-summary{
  padding: 10px 12px;
  font-weight: 700;
}
.items-filter-inner{
  padding-top: 8px;
}

/* v239: level controls (+/−/menu) */
.level-toggle{ display:flex; align-items:center; gap:8px; }
.level-toggle .level-select{ min-width: 170px; }
.level-toggle .level-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}
@media (max-width: 520px){
  .level-toggle .level-select{ min-width: 140px; }
  .level-toggle .level-btn{ width: 38px; height: 38px; border-radius: 11px; }
}