/*
Theme Name: ADIview Medical Viewer
Theme URI: https://example.com/adiview
Author: ADIview
Author URI: https://example.com
Description: WordPress theme wrapper for the ADIview DICOM and medical image viewer.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: adiview
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:       #090c12;
  --bg2:      #0d1117;
  --bg3:      #111827;
  --bg4:      #1a2234;
  --border:   #1e2d42;
  --border2:  #243450;
  --accent:   #4dabf7;
  --accent2:  #818cf8;
  --green:    #34d399;
  --amber:    #fbbf24;
  --red:      #f87171;
  --text:     #d4e0f0;
  --text2:    #7a96b4;
  --text3:    #3d5470;
  --hdr:      48px;
  --left-w:   240px;
  --left-collapsed: 0px;
  --right-w:  256px;
  --tb-h:     44px;
  --vp-bar:   36px;
  --r:        5px;
  --glow:     0 0 14px rgba(77,171,247,0.25);
  --ease:     cubic-bezier(0.2,0.7,0.3,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --hairline: rgba(255,255,255,0.03);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden}
body{
  background:
    radial-gradient(ellipse 900px 500px at 12% -8%, rgba(77,171,247,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(129,140,248,0.04), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;font-size:13px;
  display:flex;flex-direction:column;height:100dvh;
  user-select:none;-webkit-user-select:none;
}
/* While the welcome/educational disclaimer hasn't been accepted yet,
   the app underneath is visually present but not interactive. */
body.disclaimer-locked #hdr,
body.disclaimer-locked #body,
body.disclaimer-locked #mob-nav{
  pointer-events:none;
  filter:blur(1.5px) saturate(0.85);
}

/* ── ACCESSIBILITY: visible keyboard focus ──
   Mouse/touch interactions keep the existing chrome-less look; keyboard
   users get a clear, consistent focus ring on every interactive element. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:3px;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
#hdr{
  height:var(--hdr);background:var(--bg2);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 var(--hairline) inset, var(--shadow-sm);
  display:flex;align-items:center;
  padding:0 12px;gap:0;flex-shrink:0;
  padding-top:env(safe-area-inset-top,0);
  z-index:100;
}
#logo{
  font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:500;
  color:var(--accent);letter-spacing:2px;padding:0 14px 0 4px;
  border-right:1px solid var(--border);margin-right:14px;flex-shrink:0;
  position:relative;
}
#logo::after{
  content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:0.5;
}
#logo em{color:var(--accent2);font-style:normal}

/* Study info in header */
#hdr-study{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#hdr-study .pt{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hdr-study .meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hdr-sep{width:1px;height:24px;background:var(--border);margin:0 12px;flex-shrink:0}
.hdr-right{display:flex;align-items:center;gap:6px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.hdr-right::-webkit-scrollbar{display:none}

.hdr-btn{
  height:30px;padding:0 10px;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--r);color:var(--text2);
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  cursor:pointer;display:flex;align-items:center;gap:5px;
  transition:color 0.15s var(--ease),border-color 0.15s var(--ease),background 0.15s var(--ease),transform 0.15s var(--ease),box-shadow 0.15s var(--ease);
  white-space:nowrap;
}
.hdr-btn:hover{color:var(--text);border-color:var(--accent);background:rgba(77,171,247,0.07);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.hdr-btn:active{transform:translateY(0)}
.hdr-btn.accent{background:rgba(77,171,247,0.12);border-color:rgba(77,171,247,0.4);color:var(--accent)}
.hdr-btn.accent:hover{background:rgba(77,171,247,0.22)}
.hdr-btn.purple{background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.35);color:var(--accent2)}
.hdr-btn.purple:hover{background:rgba(129,140,248,0.2)}
.badge-mod{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  padding:2px 7px;border-radius:3px;letter-spacing:1px;
  background:rgba(77,171,247,0.1);color:var(--accent);
  border:1px solid rgba(77,171,247,0.3);
}

/* ═══════════════════════════════════════
   BODY: left panel + center + right panel
═══════════════════════════════════════ */
#body{flex:1;display:flex;overflow:hidden;position:relative}

/* ═══════════════════════════════════════
   LEFT PANEL — series thumbnails (OHIF style)
═══════════════════════════════════════ */
#left-panel{
  width:var(--left-w);background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;
  transition:width 0.2s ease;
}
#left-panel.collapsed{width:0;border-right:none}
#left-toggle{
  position:absolute;top:50%;left:0;transform:translateY(-50%);
  z-index:20;width:16px;height:40px;
  background:var(--bg4);border:1px solid var(--border2);
  border-left:none;border-radius:0 4px 4px 0;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:10px;transition:all 0.12s;
}
#left-toggle:hover{background:var(--border2);color:var(--text)}
#left-panel.collapsed + #left-toggle{left:0}

/* Left panel header */
#lp-hdr{
  padding:10px 12px 8px;border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#lp-hdr h3{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-weight:600;margin-bottom:6px}
#lp-study-desc{font-size:11px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lp-study-meta{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);margin-top:2px}

/* Series list */
#series-list{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:8px;
}
#series-list::-webkit-scrollbar{width:4px}
#series-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.series-group{margin-bottom:6px}
.series-group-hdr{
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text3);padding:4px 4px 6px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
.series-group-hdr .s-count{
  background:var(--bg4);border:1px solid var(--border);
  border-radius:10px;padding:1px 6px;font-size:9px;color:var(--text2);
}

/* Thumbnail items */
.thumb-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 6px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;
  transition:background 0.15s var(--ease),border-color 0.15s var(--ease),box-shadow 0.15s var(--ease);
  margin-bottom:3px;
}
.thumb-item:hover{background:var(--bg4);border-color:var(--border)}
.thumb-item.act{
  background:rgba(77,171,247,0.08);
  border-color:rgba(77,171,247,0.4);
  box-shadow:0 2px 10px rgba(77,171,247,0.08);
}
.thumb-item.act .thumb-canvas-wrap{border-color:rgba(77,171,247,0.5)}
.thumb-canvas-wrap{
  width:54px;height:54px;flex-shrink:0;
  border-radius:4px;overflow:hidden;background:#000;
  border:1px solid var(--border);
}
.thumb-canvas-wrap canvas{width:100%;height:100%;display:block}
.thumb-info{flex:1;min-width:0}
.thumb-info .t-num{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--accent);margin-bottom:2px;font-weight:500;
}
.thumb-info .t-desc{
  font-size:10px;color:var(--text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thumb-info .t-meta{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--text2);margin-top:2px;
}

/* Left panel footer actions */
#lp-footer{
  padding:8px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;flex-direction:column;gap:5px;
}
.lp-btn{
  width:100%;padding:7px;border-radius:5px;cursor:pointer;
  font-size:11px;font-weight:500;transition:all 0.12s;
  text-align:center;border:1px solid;font-family:'Inter',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.lp-btn-add{background:rgba(77,171,247,0.08);border-color:rgba(77,171,247,0.3);color:var(--accent)}
.lp-btn-add:hover{background:rgba(77,171,247,0.16)}
.lp-btn-folder{background:rgba(129,140,248,0.08);border-color:rgba(129,140,248,0.3);color:var(--accent2)}
.lp-btn-folder:hover{background:rgba(129,140,248,0.16)}
.lp-btn-clear{background:rgba(248,113,113,0.06);border-color:rgba(248,113,113,0.2);color:var(--red)}
.lp-btn-clear:hover{background:rgba(248,113,113,0.14)}

/* ═══════════════════════════════════════
   CENTER: toolbar + viewport
═══════════════════════════════════════ */
#center{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ── TOOLBAR (OHIF style horizontal) ── */
#toolbar{
  height:var(--tb-h);background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 10px;gap:2px;flex-shrink:0;overflow-x:auto;overflow-y:hidden;
}
#toolbar::-webkit-scrollbar{display:none}

.tb-sep{width:1px;height:26px;background:var(--border);margin:0 6px;flex-shrink:0}

.tbtn{
  width:34px;height:32px;background:none;border:1px solid transparent;
  border-radius:5px;color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.12s var(--ease),color 0.12s var(--ease),border-color 0.12s var(--ease),box-shadow 0.12s var(--ease);
  position:relative;flex-shrink:0;
}
.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tbtn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.tbtn.act{background:rgba(77,171,247,0.14);color:var(--accent);border-color:rgba(77,171,247,0.45);box-shadow:0 0 0 3px rgba(77,171,247,0.06)}
.tbtn.act-p{background:rgba(129,140,248,0.14);color:var(--accent2);border-color:rgba(129,140,248,0.45);box-shadow:0 0 0 3px rgba(129,140,248,0.06)}
.tbtn .tip{
  display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--bg4);border:1px solid var(--border2);
  color:var(--text);padding:4px 9px;border-radius:4px;
  font-size:10px;white-space:nowrap;z-index:500;pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,0.5);
}
.tbtn:hover .tip{display:block}

/* toolbar tool labels (optional) */
.tbtn-lbl{
  font-size:8px;letter-spacing:0.5px;text-transform:uppercase;
  color:var(--text3);flex-shrink:0;padding:0 4px;align-self:center;
  font-weight:600;
}

/* view layout buttons in toolbar */
.layout-btn{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:3px 6px;border-radius:4px;cursor:pointer;border:1px solid transparent;
  transition:all 0.12s;flex-shrink:0;
}
.layout-btn .lbi{font-size:14px;line-height:1}
.layout-btn .lbt{font-size:8px;color:var(--text3);letter-spacing:0.5px}
.layout-btn:hover{background:var(--bg4);border-color:var(--border2)}
.layout-btn.act{background:rgba(77,171,247,0.1);border-color:rgba(77,171,247,0.4)}
.layout-btn.act .lbt,.layout-btn.act .lbi{color:var(--accent)}

/* toolbar spacer */
.tb-flex{flex:1}

/* preset selector in toolbar */
.tb-preset-wrap{position:relative;flex-shrink:0}
.tb-preset-btn{
  height:30px;padding:0 10px;background:var(--bg4);border:1px solid var(--border2);
  border-radius:var(--r);color:var(--text2);font-size:11px;font-weight:500;
  cursor:pointer;display:flex;align-items:center;gap:5px;
  font-family:'Inter',sans-serif;transition:all 0.12s;white-space:nowrap;
}
.tb-preset-btn:hover{color:var(--text);border-color:var(--accent)}
.tb-preset-btn.open{color:var(--accent);border-color:rgba(77,171,247,0.5)}
#preset-dropdown{
  display:none;position:absolute;top:calc(100%+4px);right:0;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--r);z-index:400;min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);padding:4px;
}
#preset-dropdown.show{display:block}
.pd-item{
  padding:7px 10px;border-radius:4px;cursor:pointer;
  font-size:12px;color:var(--text2);transition:all 0.1s;
  display:flex;justify-content:space-between;align-items:center;
}
.pd-item:hover{background:var(--bg4);color:var(--text)}
.pd-item.act{color:var(--accent)}
.pd-item .pd-wl{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text3)}

/* W/L readout in toolbar */
#tb-wl{
  display:flex;align-items:center;gap:6px;
  padding:0 10px;border-left:1px solid var(--border);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);
  flex-shrink:0;
}
#tb-wl .wlv{color:var(--accent);font-weight:500}

/* ── VIEWPORT AREA ── */
#vp-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);position:relative}

/* Load overlay — outside viewport so touch-action doesn't block file input */
#load-ov{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(9,12,18,0.96);z-index:50;padding:50px;
  touch-action:auto;pointer-events:all;
}
#load-ov.hidden{display:none}
.dz{
  position:relative;
  border:1px solid var(--border2);border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent 40%);
  box-shadow:var(--shadow-lg), 0 1px 0 var(--hairline) inset;
  padding:44px 36px 36px;text-align:center;width:100%;max-width:420px;
  transition:border-color 0.2s var(--ease),background 0.2s var(--ease);
}
/* scan-frame corner brackets — the signature element, echoing a viewfinder/reticle */
.dz::before,.dz::after{
  content:'';position:absolute;width:18px;height:18px;
  border:1.5px solid rgba(77,171,247,0.4);pointer-events:none;
  transition:border-color 0.2s var(--ease);
}
.dz::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.dz::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.dz-corner-tr,.dz-corner-bl{
  position:absolute;width:18px;height:18px;
  border:1.5px solid rgba(77,171,247,0.4);pointer-events:none;
  transition:border-color 0.2s var(--ease);
}
.dz-corner-tr{top:-1px;right:-1px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.dz-corner-bl{bottom:-1px;left:-1px;border-right:none;border-top:none;border-radius:0 0 0 6px}
.dz.drag{border-color:var(--accent);background:rgba(77,171,247,0.05)}
.dz.drag::before,.dz.drag::after,.dz.drag .dz-corner-tr,.dz.drag .dz-corner-bl{border-color:var(--accent)}
.dz-icon{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  background:radial-gradient(circle, rgba(77,171,247,0.14), rgba(77,171,247,0.02) 70%);
  border:1px solid rgba(77,171,247,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
}
.dz h2{
  font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;
  color:var(--text);margin-bottom:8px;letter-spacing:3px;text-transform:uppercase;
}
.dz p{color:var(--text2);font-size:12px;line-height:1.75;margin-bottom:24px}
.dz p b{color:var(--text2);font-weight:600}
.dz-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:20px}
.dz-tag{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.5px;
  color:var(--text2);background:var(--bg4);border:1px solid var(--border);
  border-radius:99px;padding:3px 9px;
}
.dz-btns{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.dz-btn{
  flex:1;padding:12px;border-radius:8px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:background 0.15s var(--ease),border-color 0.15s var(--ease),transform 0.15s var(--ease),box-shadow 0.15s var(--ease);
  border:1px solid;text-align:center;position:relative;
}
.dz-primary{background:rgba(77,171,247,0.1);border-color:rgba(77,171,247,0.4);color:var(--accent)}
.dz-primary:hover{background:rgba(77,171,247,0.18);transform:translateY(-1px);box-shadow:0 6px 16px rgba(77,171,247,0.15)}
.dz-folder{background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.4);color:var(--accent2)}
.dz-folder:hover{background:rgba(129,140,248,0.18);transform:translateY(-1px);box-shadow:0 6px 16px rgba(129,140,248,0.15)}
.dz-cd{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.4);color:var(--green)}
.dz-cd:hover{background:rgba(52,211,153,0.18);transform:translateY(-1px);box-shadow:0 6px 16px rgba(52,211,153,0.15)}
.dz-cd-note{font-size:10.5px;color:var(--text3);line-height:1.5;margin:2px 0 10px;text-align:center}
.dz-btn:active{transform:translateY(0)}
.dz-demo{
  width:100%;padding:11px;border-radius:8px;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;cursor:pointer;
  transition:background 0.15s var(--ease),transform 0.15s var(--ease);
  background:rgba(52,211,153,0.07);border:1px solid rgba(52,211,153,0.22);color:var(--green);
}
.dz-demo:hover{background:rgba(52,211,153,0.14);transform:translateY(-1px)}
.dz-demo:active{transform:translateY(0)}

/* Viewport grid */
#vp-grid{
  flex:1;display:grid;position:relative;overflow:hidden;
}
#vp-grid.mode-single{grid-template-columns:1fr;grid-template-rows:1fr}
#vp-grid.mode-2up{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
#vp-grid.mode-4up{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
#vp-grid.mode-mpr{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

.vp-cell{position:relative;overflow:hidden;background:#020407;touch-action:none}
.vp-cell+.vp-cell,.vp-cell:nth-child(3),.vp-cell:nth-child(4){border-top:1px solid var(--border)}
#vp-grid.mode-single .vp-cell+.vp-cell{display:none}
#vp-grid .vp-cell:nth-child(odd)+.vp-cell:nth-child(even){border-left:1px solid var(--border);border-top:none}
#vp-grid.mode-4up .vp-cell:nth-child(2){border-top:none;border-left:1px solid var(--border)}
#vp-grid.mode-4up .vp-cell:nth-child(3){border-top:1px solid var(--border);border-left:none}
#vp-grid.mode-4up .vp-cell:nth-child(4){border-top:1px solid var(--border);border-left:1px solid var(--border)}
#vp-grid.mode-2up .vp-cell:nth-child(2){border-top:none;border-left:1px solid var(--border)}
#vp-grid.mode-mpr .vp-cell:nth-child(2){border-top:none;border-left:1px solid var(--border)}
#vp-grid.mode-mpr .vp-cell:nth-child(3){border-top:1px solid var(--border);border-left:none}
#vp-grid.mode-mpr .vp-cell:nth-child(4){border-top:1px solid var(--border);border-left:1px solid var(--border)}

/* active cell highlight */
.vp-cell.focused::after{
  content:'';position:absolute;inset:0;
  border:2px solid rgba(77,171,247,0.55);
  pointer-events:none;z-index:12;
}
.vp-cell.drag-over::after{
  content:'';position:absolute;inset:0;
  border:2px dashed rgba(52,211,153,0.9);
  background:rgba(52,211,153,0.06);
  pointer-events:none;z-index:13;
}

/* per-cell viewport action bar (floats at top of cell) */
.vp-action-bar{
  position:absolute;top:0;left:0;right:0;height:var(--vp-bar);
  background:linear-gradient(to bottom,rgba(9,12,18,0.85),transparent);
  display:flex;align-items:center;padding:0 8px;gap:4px;
  z-index:10;pointer-events:none;opacity:0;transition:opacity 0.15s;
}
.vp-cell:hover .vp-action-bar{opacity:1;pointer-events:all}
.vp-cell.focused .vp-action-bar{opacity:1;pointer-events:all}

.vab-lbl{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;padding:2px 7px;
  border-radius:3px;border:1px solid;margin-right:4px;
}
.vab-lbl.axial{color:var(--accent);background:rgba(77,171,247,0.1);border-color:rgba(77,171,247,0.25)}
.vab-lbl.coronal{color:var(--green);background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.25)}
.vab-lbl.sagittal{color:var(--amber);background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.25)}
.vab-lbl.series{color:var(--accent2);background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.25)}
.vab-spacer{flex:1}
.vab-btn{
  width:26px;height:26px;background:rgba(9,12,18,0.7);
  border:1px solid var(--border2);border-radius:4px;
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all 0.12s;
}
.vab-btn:hover{color:var(--accent);border-color:rgba(77,171,247,0.5);background:rgba(77,171,247,0.1)}
.vp-cell.expanded .vab-btn.expand-vab{color:var(--accent);border-color:rgba(77,171,247,0.5)}

/* canvas wrapper */
.cell-canvas-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center center}
.cell-canvas{display:block;image-rendering:pixelated}
.cell-meas{position:absolute;top:0;left:0;pointer-events:none}

/* corner overlays */
.corner-ov{
  position:absolute;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:rgba(200,220,240,0.5);pointer-events:none;line-height:1.8;
}
.ov-tl{top:40px;left:8px}
.ov-tr{top:40px;right:8px;text-align:right}
.ov-bl{bottom:40px;left:8px}
.ov-br{bottom:40px;right:8px;text-align:right}

/* orientation labels */
.orient-lbl{position:absolute;font-family:'JetBrains Mono',monospace;font-size:11px;pointer-events:none;font-weight:500;opacity:0.6}
.or-t{top:40px;left:50%;transform:translateX(-50%);color:var(--accent)}
.or-b{bottom:40px;left:50%;transform:translateX(-50%);color:var(--accent)}
.or-l{left:8px;top:50%;transform:translateY(-50%);color:var(--accent)}
.or-r{right:8px;top:50%;transform:translateY(-50%);color:var(--accent)}

/* zoom indicator */
.zoom-ind{
  position:absolute;bottom:38px;right:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  color:rgba(77,171,247,0.55);background:rgba(0,0,0,0.6);
  padding:2px 6px;border-radius:3px;pointer-events:none;z-index:5;
}

/* EXPANDED CELL */
.vp-cell.expanded{
  position:absolute!important;inset:0!important;
  z-index:50!important;display:block!important;
  border:none!important;
}

/* ── SLICE SCRUBBER (bottom of viewport, OHIF-style) ── */
#slice-bar{
  height:32px;background:rgba(9,12,18,0.92);
  border-top:1px solid var(--border);
  display:flex;align-items:center;padding:0 12px;gap:10px;
  flex-shrink:0;
}
#slice-bar.hidden{display:none}
#slice-info{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);white-space:nowrap;flex-shrink:0}
#slice-info b{color:var(--accent)}
#slice-range{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;
  background:var(--border);border-radius:2px;outline:none;
  cursor:pointer;
}
#slice-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  background:var(--accent);border-radius:50%;cursor:pointer;
  box-shadow:0 0 8px rgba(77,171,247,0.4);
}
#px-readout{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);flex-shrink:0;white-space:nowrap}
#px-readout b{color:var(--green)}
#wl-readout{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text2);flex-shrink:0;white-space:nowrap}
#wl-readout b{color:var(--accent)}

/* upload progress HUD */
#up-progress{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0) + 12px);
  transform:translateX(-50%);z-index:650;
  width:min(440px, calc(100vw - 28px));
  background:rgba(9,12,18,0.95);
  border:1px solid var(--border2);
  border-radius:8px;
  padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
#up-progress.hidden{display:none}
#up-progress-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
#up-progress-label{font-size:11px;color:var(--text);font-weight:600;letter-spacing:0.3px}
#up-progress-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent)}
#up-progress-track{height:8px;background:var(--border);border-radius:99px;overflow:hidden}
#up-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width 0.12s linear}

/* scrubber (mobile, right side) */
.cell-scrubber{
  display:none;position:absolute;right:8px;top:50%;
  transform:translateY(-50%);z-index:10;
  flex-direction:column;align-items:center;gap:5px;
}
.cell-scrub-track{
  width:22px;height:140px;background:rgba(0,0,0,0.65);
  border:1px solid var(--border2);border-radius:11px;
  position:relative;cursor:pointer;touch-action:none;
}
.cell-scrub-thumb{
  width:16px;height:16px;background:var(--accent);
  border-radius:50%;position:absolute;left:2px;top:2px;
  box-shadow:0 0 8px rgba(77,171,247,0.45);
}
.cell-scrub-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--accent);background:rgba(0,0,0,0.7);padding:2px 4px;border-radius:3px}

/* ═══════════════════════════════════════
   RIGHT PANEL — W/L sliders + MPR controls
═══════════════════════════════════════ */
#right-panel{
  width:var(--right-w);background:var(--bg2);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;
  transition:width 0.2s ease;
}
#right-panel.collapsed{width:0;border-left:none}

#rp-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.rp-tab{
  flex:1;height:36px;background:none;border:none;
  border-bottom:2px solid transparent;
  color:var(--text2);font-size:11px;font-weight:500;
  cursor:pointer;transition:all 0.12s;font-family:'Inter',sans-serif;
}
.rp-tab:hover{color:var(--text)}
.rp-tab.act{color:var(--accent);border-bottom-color:var(--accent)}

#rp-body{flex:1;overflow-y:auto;overflow-x:hidden}
#rp-body::-webkit-scrollbar{width:3px}
#rp-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.rp-sec{padding:12px;border-bottom:1px solid var(--border)}
.rp-sec h4{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:10px;font-weight:600}

.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.wl-box{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:7px 9px}
.wl-box label{font-size:9px;color:var(--text3);display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:1px}
.wl-box .wval{font-family:'JetBrains Mono',monospace;font-size:16px;color:var(--accent);font-weight:500}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:var(--border);border-radius:2px;outline:none;margin:5px 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;
  background:var(--accent);border-radius:50%;cursor:pointer;
}
input[type=range].purple::-webkit-slider-thumb{background:var(--accent2)}

.sl-row{margin-bottom:8px}
.sl-row label{font-size:9px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:2px}

.xform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.xbtn{
  background:var(--bg4);border:1px solid var(--border);border-radius:5px;
  color:var(--text2);font-size:16px;padding:8px 0;
  cursor:pointer;transition:all 0.12s;text-align:center;
}
.xbtn:hover,.xbtn:active{color:var(--text);border-color:var(--accent)}
.xbtn.act{color:var(--accent);border-color:rgba(77,171,247,0.5);background:rgba(77,171,247,0.08)}
/* Filter option buttons hold text labels (e.g. "Sharp + Soft Enhance"),
   not single glyphs, so they need a smaller, wrappable font. */
#rp-filters-grid.xbtn,#rp-filters-grid .xbtn{font-size:11px;line-height:1.3;padding:9px 4px;white-space:normal;min-height:36px}

/* ═══════════════════════════════════════
   MOBILE BOTTOM NAV
═══════════════════════════════════════ */
#mob-nav{
  display:none;height:56px;background:var(--bg2);
  border-top:1px solid var(--border);flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mob-nav-inner{height:56px;display:flex;align-items:stretch}
.mnav{
  flex:1;background:none;border:none;border-right:1px solid var(--border);
  color:var(--text2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  cursor:pointer;transition:all 0.12s;font-size:18px;
}
.mnav:last-child{border-right:none}
.mnav .lbl{font-size:9px;font-family:'Inter',sans-serif;letter-spacing:0.5px;text-transform:uppercase}
.mnav.act{color:var(--accent);background:rgba(77,171,247,0.06)}
.mnav:active{background:var(--bg4)}

/* Mobile slide panel */
#sp{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  border-radius:14px 14px 0 0;z-index:300;
  transform:translateY(100%);transition:transform 0.26s cubic-bezier(0.32,0.72,0,1);
  max-height:76dvh;overflow:hidden;flex-direction:column;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 56px)
}
#sp.open{transform:translateY(0)}
#sp-handle{width:32px;height:4px;background:var(--border2);border-radius:2px;margin:9px auto 5px;flex-shrink:0}
#sp-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text2);text-align:center;margin-bottom:8px;flex-shrink:0;font-weight:500}
#sp-content{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px 14px;flex:1}
#sp-content::-webkit-scrollbar{display:none}
.m-wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.m-wl-box{background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:10px;text-align:center}
.m-wl-box label{font-size:9px;color:var(--text3);display:block;margin-bottom:4px;letter-spacing:1px;text-transform:uppercase}
.m-wl-box .val{font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--accent)}
input[type=range].msl{height:5px;margin:6px 0 10px}
input[type=range].msl::-webkit-slider-thumb{width:20px;height:20px}
.m-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}
.m-preset-btn{background:var(--bg4);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:11px;padding:9px 4px;cursor:pointer;text-align:center;transition:all 0.12s;font-family:'Inter',sans-serif}
.m-preset-btn:active,.m-preset-btn.act{color:var(--accent);border-color:rgba(77,171,247,0.5);background:rgba(77,171,247,0.08)}
/* Filter option buttons (e.g. "Sharp + Soft Enhance") get their own 2-up
   grid so longer labels wrap cleanly instead of being squeezed 3-across. */
.m-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.m-filter-grid .m-preset-btn{line-height:1.3;min-height:40px;display:flex;align-items:center;justify-content:center}
.m-tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.m-tool-btn{background:var(--bg4);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:20px;padding:12px 0 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all 0.12s}
.m-tool-btn .lbl{font-size:9px;font-family:'Inter',sans-serif;text-transform:uppercase}
.m-tool-btn.act{color:var(--accent);border-color:rgba(77,171,247,0.5);background:rgba(77,171,247,0.08)}
.m-xrow{display:flex;gap:6px;margin-top:10px}
.m-xbtn{flex:1;background:var(--bg4);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:20px;padding:11px 0;cursor:pointer;text-align:center;transition:all 0.12s}
.m-xbtn:active{color:var(--text);border-color:var(--accent)}
.m-xbtn.act{color:var(--accent);border-color:rgba(77,171,247,0.5);background:rgba(77,171,247,0.08)}
.m-thumb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.m-thumb-item{border:2px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer;position:relative;aspect-ratio:1;background:#000;transition:all 0.12s}
.m-thumb-item.act{border-color:var(--accent);box-shadow:0 0 6px rgba(77,171,247,0.3)}
.m-thumb-item canvas{width:100%;height:100%;display:block}
.m-thumb-num{position:absolute;bottom:2px;right:3px;font-family:'JetBrains Mono',monospace;font-size:8px;color:rgba(255,255,255,0.35)}
#sp-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:299}
#sp-backdrop.show{display:block}

/* mobile-friendly touch targets */
.mnav, .m-tool-btn, .m-xbtn, .m-preset-btn, .m-thumb-item, .fm-btn, .lp-btn, .rp-tab{
  touch-action: manipulation;
}
.dz-btn{touch-action:manipulation}

/* ═══════════════════════════════════════
   FILE MANAGER MODAL
═══════════════════════════════════════ */
#fm{display:none;position:fixed;inset:0;z-index:400;align-items:center;justify-content:center;padding:16px}
#fm.open{display:flex}
#fm-bd{position:absolute;inset:0;background:rgba(0,0,0,0.78)}
#fm-box{
  position:relative;z-index:1;background:var(--bg2);
  border:1px solid var(--border2);border-radius:10px;
  width:100%;max-width:460px;max-height:80dvh;
  display:flex;flex-direction:column;overflow:hidden;
}
#fm-hdr{display:flex;align-items:center;padding:13px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
#fm-hdr h2{flex:1;font-size:13px;font-weight:600;color:var(--text)}
#fm-close{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:0;line-height:1}
#fm-close:hover{color:var(--text)}
#fm-acts{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.fm-btn{flex:1;padding:8px 4px;border-radius:5px;font-size:11px;cursor:pointer;text-align:center;transition:all 0.12s;border:1px solid;font-family:'Inter',sans-serif}
.fm-add{background:rgba(77,171,247,0.08);border-color:rgba(77,171,247,0.3);color:var(--accent)}
.fm-add:hover{background:rgba(77,171,247,0.16)}
.fm-folder{background:rgba(129,140,248,0.08);border-color:rgba(129,140,248,0.3);color:var(--accent2)}
.fm-folder:hover{background:rgba(129,140,248,0.16)}
.fm-clear{background:rgba(248,113,113,0.06);border-color:rgba(248,113,113,0.25);color:var(--red)}
.fm-clear:hover{background:rgba(248,113,113,0.14)}
#fm-list{overflow-y:auto;flex:1;padding:6px}
#fm-list::-webkit-scrollbar{width:3px}
#fm-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.fm-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;margin-bottom:3px;border:1px solid transparent;cursor:pointer;transition:all 0.12s}
.fm-item:hover{background:var(--bg4);border-color:var(--border)}
.fm-item.act{background:rgba(77,171,247,0.06);border-color:rgba(77,171,247,0.25)}
.fm-thumb{width:42px;height:42px;border-radius:4px;overflow:hidden;background:#000;flex-shrink:0;border:1px solid var(--border)}
.fm-thumb canvas{width:100%;height:100%;display:block}
.fm-info{flex:1;min-width:0}
.fm-info .fn{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-info .fm2{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);margin-top:2px}
.fm-rm{width:26px;height:26px;background:none;border:1px solid transparent;border-radius:4px;color:var(--text2);font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.12s}
.fm-rm:hover{color:var(--red);border-color:rgba(248,113,113,0.35);background:rgba(248,113,113,0.06)}
#fm-empty{text-align:center;padding:28px;color:var(--text2);font-size:12px}

/* ═══════════════════════════════════════
   WELCOME / EDUCATIONAL DISCLAIMER
═══════════════════════════════════════ */
#disclaimer-ov{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  overflow-y:auto;
  background:
    radial-gradient(circle at 20% 15%, rgba(77,171,247,0.10), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(129,140,248,0.08), transparent 45%),
    rgba(5,7,11,0.92);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#disclaimer-ov.hidden{display:none}
#disclaimer-box{
  width:100%;max-width:540px;max-height:90vh;max-height:90dvh;
  margin:auto;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 20%), var(--bg2);
  border:1px solid var(--border2);border-radius:14px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.02) inset;
  animation:disclaimer-in 0.25s var(--ease);
}
@keyframes disclaimer-in{
  from{opacity:0;transform:translateY(10px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
#disclaimer-hdr{
  padding:22px 26px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#disclaimer-logo{
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;
  color:var(--accent);letter-spacing:2px;margin-bottom:10px;
}
#disclaimer-logo em{color:var(--accent2);font-style:normal}
#disclaimer-hdr h1{
  font-size:19px;font-weight:300;color:var(--text);letter-spacing:0.3px;
}
#disclaimer-body{
  padding:18px 26px 4px;overflow-y:auto;flex:1;
}
#disclaimer-body::-webkit-scrollbar{width:4px}
#disclaimer-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}

.disclaimer-sec{margin-bottom:20px}
.disclaimer-sec h2{
  display:flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text3);font-weight:600;margin-bottom:9px;
}
.disclaimer-ic{font-size:14px;line-height:1}
.disclaimer-sec p{
  font-size:13px;line-height:1.65;color:var(--text2);margin-bottom:8px;
}
.disclaimer-sec p:last-child{margin-bottom:0}
.disclaimer-sec ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.disclaimer-sec li{
  font-size:13px;line-height:1.55;color:var(--text2);padding-left:20px;position:relative;
}
.disclaimer-sec li::before{
  content:'';position:absolute;left:2px;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);
}
.disclaimer-sec-edu{
  background:rgba(248,113,113,0.05);border:1px solid rgba(248,113,113,0.22);
  border-radius:9px;padding:14px 16px;
}
.disclaimer-sec-edu h2{color:var(--red)}
.disclaimer-strong{color:var(--text)!important;font-weight:500}
.disclaimer-strong strong{color:var(--red)}
.disclaimer-signoff{
  margin-top:10px;font-style:italic;color:var(--text3);font-size:12px;
}
.disclaimer-techcredit{
  margin-top:6px;color:var(--text3);font-size:11px;
}
.disclaimer-techcredit a{color:var(--accent);text-decoration:none}
.disclaimer-techcredit a:hover{text-decoration:underline}

#disclaimer-actions{
  display:flex;flex-direction:column;gap:10px;
  padding:18px 26px 24px;border-top:1px solid var(--border);flex-shrink:0;
}
#disclaimer-accept{
  width:100%;padding:13px;border-radius:8px;border:1px solid rgba(16,153,102,0.55);
  background:linear-gradient(180deg, #22b378, #189464);
  color:#ffffff;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.15s;letter-spacing:0.2px;
}
#disclaimer-accept:hover{background:linear-gradient(180deg, #26c684, #1ca470);box-shadow:0 0 0 3px rgba(34,179,120,0.22)}
#disclaimer-accept:focus-visible{outline:2px solid #22b378;outline-offset:2px}

@media(max-width:560px){
  #disclaimer-ov{padding:0;align-items:flex-end}
  #disclaimer-box{
    max-width:100%;max-height:92dvh;border-radius:16px 16px 0 0;
    animation:disclaimer-in-mobile 0.25s ease-out;
  }
  @keyframes disclaimer-in-mobile{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
  }
  #disclaimer-hdr{padding:18px 18px 14px}
  #disclaimer-body{padding:14px 18px 4px}
  #disclaimer-actions{padding:14px 18px 20px}
}


.hdr-btn.ai-coming-soon{
  background:rgba(129,140,248,0.07);border-color:rgba(129,140,248,0.28);color:var(--accent2);
  cursor:pointer;
}
.hdr-btn.ai-coming-soon:hover{background:rgba(129,140,248,0.16)}
.ai-soon-pill{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.5px;
  text-transform:uppercase;padding:2px 6px;border-radius:999px;
  background:rgba(129,140,248,0.16);color:var(--accent2);
  border:1px solid rgba(129,140,248,0.35);margin-left:2px;
}
.hdr-btn.ai-coming-soon.ai-available .ai-soon-pill{
  background:rgba(52,211,153,0.16);color:var(--green);border-color:rgba(52,211,153,0.35);
}

#ai-modal{display:none;position:fixed;inset:0;z-index:420;align-items:center;justify-content:center;padding:16px}
#ai-modal.open{display:flex}
#ai-modal-bd{position:absolute;inset:0;background:rgba(0,0,0,0.78)}
#ai-modal-box{
  position:relative;z-index:1;background:var(--bg2);
  border:1px solid var(--border2);border-radius:10px;
  width:100%;max-width:440px;max-height:80dvh;overflow-y:auto;
  display:flex;flex-direction:column;
}
#ai-modal-hdr{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
#ai-modal-hdr h2{flex:1;font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
#ai-modal-close{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:0;line-height:1}
#ai-modal-close:hover{color:var(--text)}
#ai-modal-body{padding:16px}
.ai-modal-lede{color:var(--text);font-size:13px;line-height:1.65;margin-bottom:14px}
.ai-modal-points{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ai-modal-points li{
  font-size:12px;color:var(--text2);line-height:1.5;padding-left:18px;position:relative;
}
.ai-modal-points li::before{
  content:'✓';position:absolute;left:0;color:var(--accent2);font-weight:600;
}
.ai-modal-note{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text3);
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;
  padding:8px 10px;line-height:1.5;
}

/* ═══════════════════════════════════════
   HEADER ICON BUTTONS (Settings / Shortcuts)
   ═══════════════════════════════════════ */
.hdr-icon-btn{width:30px;padding:0;justify-content:center;font-size:13px}

/* ═══════════════════════════════════════
   SHARED MODAL SHELL — Metadata / Shortcuts / Settings
   (mirrors #ai-modal so the whole app has one consistent dialog language)
   ═══════════════════════════════════════ */
#meta-modal,#shortcuts-modal,#settings-modal,#cd-modal{display:none;position:fixed;inset:0;z-index:420;align-items:center;justify-content:center;padding:16px}
#meta-modal.open,#shortcuts-modal.open,#settings-modal.open,#cd-modal.open{display:flex}
#meta-modal-bd,#shortcuts-modal-bd,#settings-modal-bd,#cd-modal-bd{position:absolute;inset:0;background:rgba(0,0,0,0.78)}
#meta-modal-box,#shortcuts-modal-box,#settings-modal-box,#cd-modal-box{
  position:relative;z-index:1;background:var(--bg2);
  border:1px solid var(--border2);border-radius:10px;
  width:100%;max-width:560px;max-height:82dvh;overflow-y:auto;
  display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
}
#meta-modal-hdr,#shortcuts-modal-hdr,#settings-modal-hdr,#cd-modal-hdr{
  display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--bg2);
  padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;z-index:1;
}
#meta-modal-hdr h2,#shortcuts-modal-hdr h2,#settings-modal-hdr h2,#cd-modal-hdr h2{flex:1;font-size:14px;font-weight:600;color:var(--text)}
#meta-modal-close,#shortcuts-modal-close,#settings-modal-close,#cd-modal-close{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer;padding:4px;line-height:1;border-radius:4px}
#meta-modal-close:hover,#shortcuts-modal-close:hover,#settings-modal-close:hover,#cd-modal-close:hover{color:var(--text);background:var(--bg3)}
#meta-modal-body,#shortcuts-modal-body,#settings-modal-body,#cd-modal-body{padding:14px 16px 18px}

/* ── CD/DVD disc-contents tree ── */
.cd-patient{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.cd-patient:last-child{border-bottom:none;margin-bottom:0}
.cd-patient-hdr{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:8px}
.cd-study{margin:0 0 10px 14px;padding-left:10px;border-left:2px solid var(--border2)}
.cd-study-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--text2);margin-bottom:6px}
.cd-series{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;margin-bottom:4px;background:var(--bg3);border-radius:6px}
.cd-series-info{font-size:11px;color:var(--text2);font-family:'JetBrains Mono',monospace}
.cd-load-btn{
  flex-shrink:0;padding:5px 10px;background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.35);
  color:var(--green);border-radius:5px;font-size:10.5px;font-family:'Inter',sans-serif;font-weight:600;cursor:pointer;white-space:nowrap;
}
.cd-load-btn:hover{background:rgba(52,211,153,0.2)}
.cd-load-series{background:rgba(77,171,247,0.1);border-color:rgba(77,171,247,0.35);color:var(--accent)}
.cd-load-series:hover{background:rgba(77,171,247,0.18)}

/* ── Metadata panel content ── */
.meta-empty{color:var(--text3);font-size:12.5px;padding:20px 4px;text-align:center}
.meta-summary{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.meta-group{margin-bottom:16px}
.meta-group h4{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);font-weight:600;margin-bottom:8px}
.meta-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12px}
.meta-k{color:var(--text2);white-space:nowrap}
.meta-v{color:var(--text);word-break:break-word}
.meta-k.mono,.meta-v.mono{font-family:'JetBrains Mono',monospace;font-size:10.5px}
.meta-tag-name{display:block;color:var(--text3);font-family:'Inter',sans-serif;font-size:9.5px;margin-top:1px}
.meta-advanced{margin-top:6px;border-top:1px solid var(--border);padding-top:12px}
.meta-advanced summary{cursor:pointer;font-size:11px;color:var(--text2);font-weight:600;list-style:none;user-select:none}
.meta-advanced summary::-webkit-details-marker{display:none}
.meta-advanced summary::before{content:'▸ ';color:var(--accent)}
.meta-advanced[open] summary::before{content:'▾ '}
.meta-search{
  width:100%;margin:10px 0;padding:7px 9px;background:var(--bg3);border:1px solid var(--border);
  border-radius:5px;color:var(--text);font-size:11.5px;font-family:'Inter',sans-serif;
}
.meta-search:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.meta-grid-raw{max-height:280px;overflow-y:auto;padding-right:4px}

/* ── Keyboard shortcuts ── */
.kbd-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center;font-size:12px}
.kbd-k kbd{
  display:inline-block;min-width:20px;text-align:center;padding:3px 7px;
  background:var(--bg4);border:1px solid var(--border2);border-bottom-width:2px;
  border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--text);
}
.kbd-d{color:var(--text2)}

/* ── Settings ── */
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.settings-row label{font-size:12.5px;color:var(--text)}
.settings-note{font-size:11.5px;color:var(--text3);line-height:1.5;margin-bottom:10px}
.seg-control{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:2px}
.seg-btn{
  background:none;border:none;color:var(--text2);font-family:'Inter',sans-serif;font-size:11px;
  padding:6px 12px;border-radius:4px;cursor:pointer;transition:all 0.12s var(--ease);
}
.seg-btn.act{background:rgba(77,171,247,0.15);color:var(--accent)}
.settings-danger-btn{
  width:100%;padding:9px;background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.3);
  border-radius:6px;color:var(--red);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;
}
.settings-danger-btn:hover{background:rgba(248,113,113,0.16)}

/* ═══════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════ */
#toast-host{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:600;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:92vw}
.toast{
  display:flex;align-items:center;gap:8px;pointer-events:auto;
  background:var(--bg2);border:1px solid var(--border2);border-radius:8px;
  padding:9px 10px 9px 12px;box-shadow:var(--shadow-md);font-size:12px;color:var(--text);
  opacity:0;transform:translateY(8px);transition:opacity 0.18s var(--ease),transform 0.18s var(--ease);
  max-width:420px;
}
.toast.in{opacity:1;transform:translateY(0)}
.toast.out{opacity:0;transform:translateY(4px)}
.toast-ic{flex-shrink:0;font-size:13px}
.toast-error .toast-ic{color:var(--red)}
.toast-success .toast-ic{color:var(--green)}
.toast-info .toast-ic{color:var(--accent)}
.toast-error{border-color:rgba(248,113,113,0.35)}
.toast-msg{flex:1;line-height:1.4}
.toast-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:2px;flex-shrink:0}
.toast-x:hover{color:var(--text)}

/* ═══════════════════════════════════════
   LIGHT THEME (optional — dark stays the diagnostic default)
   ═══════════════════════════════════════ */
body.theme-light{
  --bg:      #f4f6fa;
  --bg2:     #ffffff;
  --bg3:     #eef1f6;
  --bg4:     #e4e9f1;
  --border:  #d7dee8;
  --border2: #c3ccdb;
  --text:    #182234;
  --text2:   #55637c;
  --text3:   #93a1b8;
  --hairline:rgba(0,0,0,0.04);
}
/* The diagnostic image viewport itself stays dark even in light theme —
   consistent with professional viewers, so windowed pixel values never
   compete with a bright UI chrome for the eye's attention. */
body.theme-light #vp-area,body.theme-light .vp-cell,body.theme-light #slice-bar{background:#0a0d13}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  :root{--hdr:44px;--tb-h:40px}
  body{font-size:14px;overscroll-behavior:none}
  #hdr{padding:0 8px}
  #logo{font-size:14px;padding-right:10px;margin-right:10px}
  #hdr-study .pt{font-size:11px}
  #hdr-study .meta{font-size:9px}
  #left-panel{display:none}#right-panel{display:none}#slice-bar{display:none}
  #mob-nav{display:block}#sp{display:flex}.cell-scrubber{display:flex}
  #toolbar{padding:0 6px;gap:1px}
  .tbtn-lbl,.tb-sep,.tb-flex,#tb-wl,.tb-preset-wrap{display:none}
  .tbtn{width:30px;height:28px}
  .layout-btn{padding:2px 5px}
  .layout-btn .lbt{display:none}
  .layout-btn .lbi{font-size:13px}
  .vp-action-bar{opacity:1;pointer-events:all;height:30px}
  .vp-cell:hover .vp-action-bar{opacity:1}
  .vab-lbl{font-size:9px;padding:2px 6px}
  .vab-btn{width:24px;height:24px}
  .corner-ov{font-size:8px}
  .ov-tl,.ov-tr{top:32px}
  .ov-bl,.ov-br{bottom:34px}
  .or-t,.or-b,.or-l,.or-r{font-size:10px}
  .zoom-ind{bottom:32px;font-size:8px}
  .ov-br{right:36px}
  #sp{max-height:82dvh}
  #sp-content{padding:0 12px 12px}
  .m-tool-grid,.m-preset-grid,.m-filter-grid,.m-thumb-grid{gap:6px}
  .m-tool-btn{padding:10px 0 7px;font-size:18px;min-height:62px}
  .m-tool-btn .lbl{font-size:8px}
  .m-xbtn{padding:10px 0;min-height:46px}
  .m-preset-btn{min-height:38px}
  .m-thumb-item{min-height:64px}
  #sp-title{font-size:10px}
  .hdr-btn.ai-coming-soon .ai-soon-pill{display:none}
  .hdr-btn.ai-coming-soon{padding:0 8px}
  #ai-modal-box{max-width:100%}
  #meta-modal-box,#shortcuts-modal-box,#settings-modal-box,#cd-modal-box{max-width:100%}
  .kbd-grid{grid-template-columns:auto 1fr}
}
@media(min-width:701px) and (max-width:1100px){
  #right-panel{
    display:flex;position:fixed;top:var(--hdr);right:0;bottom:0;z-index:250;
    box-shadow:-6px 0 24px rgba(0,0,0,0.45);
    transition:transform 0.2s ease;transform:translateX(0);width:var(--right-w);
  }
  #right-panel.collapsed{transform:translateX(100%);width:var(--right-w);border-left:1px solid var(--border)}
  #rp-toggle-btn{display:flex!important}
}

/* ── 3D SURFACE RECONSTRUCTION viewport ── */
#vp-3d{
  position:absolute;inset:0;width:100%;height:100%;
  background:#0b0d12;overflow:hidden;
}
#canvas-3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vp3d-hint{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;pointer-events:none;
}
.vp3d-hint-inner{max-width:420px}
.vp3d-hint-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
#vp3d-hint p{color:var(--text3);font-size:12px;line-height:1.6;margin:0}
#vp3d-progress{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(11,13,18,0.8);
}
.vp3d-progress-inner{width:220px;text-align:center}
.vp3d-spinner{
  width:28px;height:28px;margin:0 auto 12px;
  border:3px solid rgba(255,255,255,0.15);border-top-color:var(--accent2);
  border-radius:50%;animation:vp3d-spin 0.8s linear infinite;
}
@keyframes vp3d-spin{to{transform:rotate(360deg)}}
#vp3d-progress-label{color:var(--text2);font-size:12px;margin-bottom:10px}
.vp3d-bar-track{width:100%;height:4px;background:rgba(255,255,255,0.12);border-radius:2px;overflow:hidden}
.vp3d-bar-fill{height:100%;width:0%;background:var(--accent2);transition:width 0.15s linear}
#vp3d-toolbar{
  position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:10px;z-index:2;
}
#vp3d-toolbar .vab-btn{
  position:static;width:auto;padding:0 12px;height:28px;border-radius:var(--r);
  background:rgba(20,24,32,0.85);border:1px solid var(--border);color:var(--text2);
  font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
}
#vp3d-toolbar .vab-btn:hover{color:var(--text);border-color:var(--accent2)}
#vp3d-stats{color:var(--text3);font-size:11px;font-family:'JetBrains Mono',monospace}