/*
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.1
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);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;width:100%;overflow:hidden}
body{
  background: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;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
#hdr{
  height:var(--hdr);background:var(--bg2);
  border-bottom:1px solid var(--border);
  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;
}
#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}

.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:all 0.12s;white-space:nowrap;
}
.hdr-btn:hover{color:var(--text);border-color:var(--accent);background:rgba(77,171,247,0.07)}
.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:all 0.12s;margin-bottom:3px;
}
.thumb-item:hover{background:var(--bg4);border-color:var(--border)}
.thumb-item.act{
  background:rgba(77,171,247,0.07);
  border-color:rgba(77,171,247,0.35);
}
.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:all 0.12s;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)}
.tbtn.act-p{background:rgba(129,140,248,0.14);color:var(--accent2);border-color:rgba(129,140,248,0.45)}
.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:20px;
  touch-action:auto;pointer-events:all;
}
#load-ov.hidden{display:none}
.dz{
  border:2px dashed var(--border2);border-radius:12px;
  padding:40px 32px;text-align:center;width:100%;max-width:420px;
  transition:all 0.18s;
}
.dz.drag{border-color:var(--accent);background:rgba(77,171,247,0.04)}
.dz-icon{font-size:52px;margin-bottom:18px;line-height:1;opacity:0.85}
.dz h2{font-size:20px;font-weight:300;color:var(--text);margin-bottom:6px;letter-spacing:0.5px}
.dz p{color:var(--text2);font-size:12px;line-height:1.8;margin-bottom:22px}
.dz-btns{display:flex;gap:8px;margin-bottom:8px}
.dz-btn{
  flex:1;padding:11px;border-radius:7px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:all 0.14s;
  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)}
.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)}
.dz-demo{
  width:100%;padding:10px;border-radius:7px;font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;cursor:pointer;transition:all 0.14s;
  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)}

/* 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)}

/* ═══════════════════════════════════════
   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)}
.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-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}

/* ═══════════════════════════════════════
   AI ANALYSIS MODAL
═══════════════════════════════════════ */
#ai-modal{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:14px}
#ai-modal.open{display:flex}
#ai-bd{position:absolute;inset:0;background:rgba(0,0,0,0.85)}
#ai-box{
  position:relative;z-index:1;background:var(--bg2);
  border:1px solid rgba(129,140,248,0.3);border-radius:12px;
  width:100%;max-width:600px;max-height:92dvh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 0 40px rgba(129,140,248,0.1);
}
#ai-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;border-bottom:1px solid rgba(129,140,248,0.15);flex-shrink:0;
  background:linear-gradient(135deg,rgba(129,140,248,0.06),rgba(77,171,247,0.02));
}
#ai-hdr h2{font-size:14px;font-weight:600;color:#c4b5fd;letter-spacing:0.5px}
#ai-hdr-right{display:flex;align-items:center;gap:8px}
.ai-badge{font-family:'JetBrains Mono',monospace;font-size:9px;padding:2px 7px;border-radius:3px;border:1px solid rgba(129,140,248,0.3);color:#a78bfa;background:rgba(129,140,248,0.08);letter-spacing:1px}
#ai-close{background:none;border:none;color:var(--text2);font-size:18px;cursor:pointer}
#ai-close:hover{color:var(--text)}
#ai-disclaimer{font-size:10px;padding:7px 14px;background:rgba(248,113,113,0.05);border-bottom:1px solid rgba(248,113,113,0.12);color:#fca5a5;flex-shrink:0;line-height:1.6}
#ai-slices{border-bottom:1px solid rgba(129,140,248,0.15);flex-shrink:0}
#ai-sl-hdr{display:flex;align-items:center;justify-content:space-between;padding:7px 12px}
#ai-sl-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:#a78bfa}
.ai-sel-btns{display:flex;gap:4px}
.ai-sel-btn{background:var(--bg4);border:1px solid rgba(129,140,248,0.25);color:#a78bfa;border-radius:4px;padding:3px 8px;font-size:10px;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.12s}
.ai-sel-btn:hover{background:rgba(129,140,248,0.14)}
#ai-sl-grid{display:flex;flex-wrap:wrap;gap:4px;padding:5px 12px 10px;max-height:120px;overflow-y:auto}
#ai-sl-grid::-webkit-scrollbar{width:3px}
#ai-sl-grid::-webkit-scrollbar-thumb{background:rgba(129,140,248,0.3)}
.ai-sthumb{position:relative;width:50px;height:50px;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:#000;flex-shrink:0;transition:all 0.12s}
.ai-sthumb canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.ai-sthumb.sel{border-color:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,0.4)}
.ai-sthumb .snum{position:absolute;bottom:1px;right:2px;font-family:'JetBrains Mono',monospace;font-size:7px;color:rgba(255,255,255,0.4);pointer-events:none}
.ai-sthumb .scheck{position:absolute;top:2px;left:2px;width:13px;height:13px;background:#a78bfa;border-radius:2px;display:none;align-items:center;justify-content:center;font-size:8px;color:#fff}
.ai-sthumb.sel .scheck{display:flex}
#ai-meta{padding:7px 14px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text2);border-bottom:1px solid var(--border);flex-shrink:0;line-height:1.9}
#ai-meta b{color:var(--text);font-family:'Inter',sans-serif;font-size:10px}
#ai-report-area{flex:1;overflow-y:auto;padding:12px 14px;-webkit-overflow-scrolling:touch;min-height:90px}
#ai-report-area::-webkit-scrollbar{width:3px}
#ai-report-area::-webkit-scrollbar-thumb{background:rgba(129,140,248,0.3)}
#ai-placeholder{text-align:center;padding:16px;color:var(--text2);font-size:12px;line-height:1.8}
#ai-report{font-size:12px;line-height:1.8;color:var(--text)}
#ai-report h3{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#a78bfa;margin:12px 0 5px;font-weight:600;padding-bottom:3px;border-bottom:1px solid rgba(129,140,248,0.15)}
#ai-report h3:first-child{margin-top:0}
#ai-report p{margin-bottom:7px}
#ai-report ul{padding-left:16px;margin-bottom:7px}
#ai-report li{margin-bottom:3px}
.ai-thinking{display:flex;align-items:center;gap:10px;color:#a78bfa;font-size:12px;padding:8px 0}
.ai-dot{width:6px;height:6px;border-radius:50%;background:#a78bfa;animation:ai-pulse 1.2s ease-in-out infinite}
.ai-dot:nth-child(2){animation-delay:0.2s}.ai-dot:nth-child(3){animation-delay:0.4s}
@keyframes ai-pulse{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}
#ai-footer{padding:10px 12px;border-top:1px solid rgba(129,140,248,0.15);flex-shrink:0;display:flex;gap:7px}
#ai-analyse-btn{flex:1;padding:10px;border-radius:7px;cursor:pointer;background:linear-gradient(135deg,rgba(129,140,248,0.16),rgba(77,171,247,0.07));border:1px solid rgba(129,140,248,0.4);color:#c4b5fd;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;transition:all 0.15s}
#ai-analyse-btn:hover:not(:disabled){background:linear-gradient(135deg,rgba(129,140,248,0.26),rgba(77,171,247,0.12))}
#ai-analyse-btn:disabled{opacity:0.45;cursor:not-allowed}
#ai-copy-btn{padding:10px 14px;border-radius:7px;cursor:pointer;background:var(--bg4);border:1px solid var(--border);color:var(--text2);font-family:'Inter',sans-serif;font-size:11px;transition:all 0.12s}
#ai-copy-btn:hover{color:var(--text);border-color:var(--accent)}

/* ── 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-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}
}
@media(min-width:701px) and (max-width:1100px){
  #right-panel{display:none}
  #rp-toggle-btn{display:flex!important}
}