/* ══════════════════════════════════════════════════════
   VIDEOCCULT THEME TUNER  v4 — readable, polished
   ══════════════════════════════════════════════════════ */

/* ── Panel shell ── */
.vct {
  position:fixed; right:20px; bottom:20px; z-index:99999;
  width:620px; max-height:90vh; display:none; flex-direction:column;
  background:rgba(22,20,35,.97);
  border:1px solid rgba(201,151,58,.32);
  border-top:2px solid rgba(201,151,58,.65);
  border-radius:16px;
  box-shadow:0 40px 100px rgba(0,0,0,.85), 0 0 0 1px rgba(201,151,58,.08) inset;
  backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
  font-family:ui-monospace,'Cascadia Code','Fira Code',monospace;
  overflow:hidden;
}
.vct.vct--open { display:flex; animation:vctIn .2s cubic-bezier(.22,.68,0,1.18) both; }
@keyframes vctIn { from{opacity:0;transform:translateY(12px) scale(.97)} to{opacity:1;transform:none} }

/* ── Header ── */
.vct__head {
  display:flex; align-items:center; gap:10px;
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(201,151,58,.14);
  background:linear-gradient(180deg,rgba(201,151,58,.13) 0%,rgba(201,151,58,.03) 100%);
  flex-shrink:0;
}
.vct__sigil { font-size:16px; opacity:.8; }
.vct__title { flex:1; font-size:11px; font-weight:700; letter-spacing:.20em; text-transform:uppercase; color:rgba(201,151,58,1); }
.vct__theme-badge {
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(201,151,58,.75); background:rgba(201,151,58,.10); border:1px solid rgba(201,151,58,.25);
  padding:4px 10px; border-radius:20px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.vct__theme-badge:hover { color:rgba(201,151,58,1); border-color:rgba(201,151,58,.5); }
.vct__kbd {
  font-size:9px; color:rgba(201,151,58,.5); letter-spacing:.04em;
  background:rgba(201,151,58,.07); border:1px solid rgba(201,151,58,.18);
  padding:3px 8px; border-radius:5px;
}
.vct__close {
  width:26px; height:26px; border-radius:8px; border:1px solid rgba(201,151,58,.22);
  background:rgba(0,0,0,.4); color:rgba(201,151,58,.7); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  transition:.12s; flex-shrink:0;
}
.vct__close:hover { background:rgba(201,151,58,.12); color:rgba(201,151,58,1); border-color:rgba(201,151,58,.5); }

/* ── Tabs ── */
.vct__tabs {
  display:flex; padding:0 14px; gap:2px;
  border-bottom:1px solid rgba(201,151,58,.12);
  flex-shrink:0; background:rgba(201,151,58,.04);
}
.vct__tab {
  padding:11px 14px 10px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(201,151,58,.45); cursor:pointer; border-bottom:2px solid transparent;
  transition:.12s; border-radius:4px 4px 0 0; margin-bottom:-1px;
}
.vct__tab:hover { color:rgba(201,151,58,.8); background:rgba(201,151,58,.06); }
.vct__tab.vct--active { color:rgba(201,151,58,1); border-bottom-color:rgba(201,151,58,.9); background:rgba(201,151,58,.08); }

/* ── Body ── */
.vct__body {
  flex:1; overflow-y:auto; padding:16px 20px;
  scrollbar-width:thin; scrollbar-color:rgba(201,151,58,.22) transparent;
}
.vct__body::-webkit-scrollbar { width:4px; }
.vct__body::-webkit-scrollbar-thumb { background:rgba(201,151,58,.25); border-radius:2px; }
.vct__pane { display:none; }
.vct__pane.vct--active { display:block; }

/* ── Section headings ── */
.vct__sec {
  font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(201,151,58,.85); margin:18px 0 10px;
  display:flex; align-items:center; gap:10px;
}
.vct__sec::before, .vct__sec::after { content:''; flex:1; height:1px; background:rgba(201,151,58,.14); }
.vct__sec:first-child { margin-top:4px; }

/* ── Color grid ── */
.vct__colgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; margin-bottom:8px; }
.vct__colvars { display:grid; grid-template-columns:1fr 1fr; gap:6px 20px; }

.vct__colrow {
  display:flex; align-items:center; gap:8px; padding:5px 8px;
  border-radius:8px; background:rgba(255,255,255,.025);
  border:1px solid rgba(201,151,58,.10);
  transition:.12s;
}
.vct__colrow:hover { background:rgba(201,151,58,.04); border-color:rgba(201,151,58,.14); }

/* Custom colour swatch button — replaces <input type=color> */
.vct__colswatch {
  width:28px; height:28px; flex-shrink:0; border-radius:7px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  padding:0; cursor:pointer; transition:.12s;
  position:relative; overflow:visible;
}
.vct__colswatch:hover { transform:scale(1.12); box-shadow:0 2px 8px rgba(0,0,0,.5), 0 0 0 2px rgba(201,151,58,.4); }
.vct__colswatch:disabled { opacity:.25; cursor:not-allowed; transform:none; }

.vct__collabel {
  font-size:10px; font-weight:600; color:rgba(245,232,205,.92); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default;
  letter-spacing:.01em;
}
.vct__coltext {
  width:80px; flex-shrink:0; font-size:9px; font-weight:600;
  padding:5px 7px; background:rgba(30,26,48,.8); border:1px solid rgba(201,151,58,.20);
  border-radius:6px; color:rgba(240,230,200,.97); outline:none; font-family:inherit;
  transition:.12s;
}
.vct__coltext:focus { border-color:rgba(201,151,58,.5); background:rgba(201,151,58,.06); color:#fff; }

/* ── Custom HSL Color Picker Popup ── */
.vct__picker-popup {
  position:fixed; z-index:100001;
  width:240px;
  background:rgba(24,22,38,.98);
  border:1px solid rgba(201,151,58,.35);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(201,151,58,.08) inset;
  padding:14px;
  display:none;
  flex-direction:column;
  gap:10px;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.vct__picker-popup.vct--open { display:flex; animation:vctIn .15s ease both; }

/* Hue/Sat canvas */
.vct__picker-canvas-wrap {
  position:relative; width:100%; padding-top:66%; border-radius:8px;
  overflow:hidden; cursor:crosshair;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.vct__picker-canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
/* Crosshair cursor */
.vct__picker-cursor {
  position:absolute; width:12px; height:12px;
  border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Hue strip */
.vct__picker-hue {
  width:100%; height:14px; border-radius:7px; cursor:pointer;
  background:linear-gradient(to right,
    #f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vct__picker-hue-thumb {
  position:absolute; top:50%; width:16px; height:16px;
  background:#fff; border-radius:50%; border:2px solid rgba(0,0,0,.3);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Alpha strip */
.vct__picker-alpha {
  width:100%; height:14px; border-radius:7px; cursor:pointer;
  position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vct__picker-alpha-thumb {
  position:absolute; top:50%; width:16px; height:16px;
  background:#fff; border-radius:50%; border:2px solid rgba(0,0,0,.3);
  box-shadow:0 1px 4px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Hex input row */
.vct__picker-hexrow {
  display:flex; gap:6px; align-items:center;
}
.vct__picker-preview {
  width:30px; height:30px; border-radius:7px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vct__picker-hex {
  flex:1; background:rgba(0,0,0,.4); border:1px solid rgba(201,151,58,.22);
  border-radius:7px; color:#fff; padding:6px 8px;
  font:600 11px/1 ui-monospace,monospace; outline:none; transition:.12s;
  text-transform:uppercase;
}
.vct__picker-hex:focus { border-color:rgba(201,151,58,.55); background:rgba(201,151,58,.07); }
.vct__picker-apply {
  padding:6px 12px; border-radius:7px; border:1px solid rgba(201,151,58,.3);
  background:rgba(201,151,58,.12); color:rgba(201,151,58,1);
  font:700 9px/1 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:.12s; white-space:nowrap; flex-shrink:0;
}
.vct__picker-apply:hover { background:rgba(201,151,58,.22); border-color:rgba(201,151,58,.55); }

/* ── Search ── */
.vct__search-wrap { position:relative; margin-bottom:12px; }
.vct__search-wrap::before { content:'◈'; position:absolute; left:11px; top:50%; transform:translateY(-50%); font-size:11px; color:rgba(201,151,58,.4); pointer-events:none; }
.vct__search {
  width:100%; box-sizing:border-box; padding:9px 12px 9px 32px;
  background:rgba(30,26,48,.8); border:1px solid rgba(201,151,58,.22);
  border-radius:10px; color:rgba(240,230,200,.97);
  font:600 11px/1.4 ui-monospace,monospace; outline:none; transition:.15s;
}
.vct__search:focus { border-color:rgba(201,151,58,.45); background:rgba(201,151,58,.05); }
.vct__search::placeholder { color:rgba(201,151,58,.28); }

/* ── Generic row ── */
.vct__row { display:flex; align-items:center; gap:10px; margin:7px 0; }
.vct__lbl { width:120px; flex-shrink:0; font-size:10.5px; font-weight:600; color:rgba(230,215,185,.7); letter-spacing:.02em; }
.vct__ctrl { flex:1; display:flex; gap:6px; align-items:center; }

/* ── Inputs ── */
.vct__input {
  flex:1; background:rgba(30,26,48,.8); border:1px solid rgba(201,151,58,.22);
  border-radius:8px; color:rgba(240,230,200,.97); padding:7px 10px;
  font:600 11px/1.3 ui-monospace,monospace; outline:none; transition:.15s;
}
.vct__input:focus { border-color:rgba(201,151,58,.48); background:rgba(201,151,58,.06); }
.vct__input::placeholder { color:rgba(201,151,58,.25); }
.vct__select {
  flex:1; background:rgba(30,26,48,.8); border:1px solid rgba(201,151,58,.22);
  border-radius:8px; color:rgba(240,230,200,.95); padding:7px 10px;
  font:600 11px/1.3 ui-monospace,monospace; outline:none; cursor:pointer; transition:.15s;
}
.vct__select:focus { border-color:rgba(201,151,58,.45); }
.vct__select option { background:#0c0b18; }

/* ── Range ── */
.vct__range-row { display:flex; align-items:center; gap:8px; flex:1; }
.vct__range {
  flex:1; -webkit-appearance:none; appearance:none; height:3px;
  background:rgba(201,151,58,.22); border-radius:3px; outline:none; cursor:pointer;
}
.vct__range::-webkit-slider-thumb {
  -webkit-appearance:none; width:15px; height:15px;
  background:rgba(201,151,58,.95); border-radius:50%;
  border:2px solid rgba(201,151,58,.5); cursor:pointer; transition:.1s;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.vct__range::-webkit-slider-thumb:hover { transform:scale(1.2); background:#e8b84b; }
.vct__range-val { width:38px; text-align:right; font-size:10px; color:rgba(201,151,58,.75); flex-shrink:0; font-weight:700; }

/* ── Font preview ── */
.vct__preview {
  margin:12px 0 8px; padding:14px 16px;
  background:rgba(201,151,58,.03); border:1px solid rgba(201,151,58,.12);
  border-radius:12px; line-height:1.6;
}
.vct__preview-occult { font-size:22px; color:rgba(201,151,58,.9); margin-bottom:6px; }
.vct__preview-vhs { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(201,151,58,.5); margin-bottom:6px; }
.vct__preview-body { font-size:15px; color:rgba(200,188,170,.75); font-style:italic; }

/* ── Themes pane ── */
.vct__theme-sel-row { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.vct__dot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(201,151,58,.3); flex-shrink:0; }
.vct__info-box {
  margin-top:14px; padding:12px 14px;
  background:rgba(201,151,58,.04); border:1px solid rgba(201,151,58,.12);
  border-radius:10px; font-size:10.5px; color:rgba(201,151,58,.5); line-height:1.7;
}
.vct__info-box b { color:rgba(201,151,58,.75); font-weight:700; }

/* ── Stat bar ── */
.vct__stat { font-size:9.5px; color:rgba(201,151,58,.38); margin:8px 0 0; text-align:right; font-weight:600; }

/* ── Footer ── */
.vct__foot {
  display:flex; gap:6px; padding:10px 16px 13px;
  border-top:1px solid rgba(201,151,58,.16); flex-shrink:0;
  background:rgba(201,151,58,.04);
}

/* ── Buttons ── */
.vct__btn {
  flex:1; padding:8px 8px; border-radius:9px; border:1px solid rgba(201,151,58,.22);
  background:rgba(0,0,0,.3); color:rgba(201,151,58,.85);
  font:700 10px/1.2 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:.14s; text-align:center;
}
.vct__btn:hover { background:rgba(201,151,58,.10); color:rgba(201,151,58,1); border-color:rgba(201,151,58,.45); }
.vct__btn--primary { background:rgba(201,151,58,.14); border-color:rgba(201,151,58,.38); color:rgba(201,151,58,1); }
.vct__btn--primary:hover { background:rgba(201,151,58,.24); border-color:rgba(201,151,58,.6); }
.vct__btn--danger { border-color:rgba(200,60,60,.35); color:rgba(230,110,110,.8); }
.vct__btn--danger:hover { background:rgba(180,50,50,.12); border-color:rgba(220,90,90,.5); color:rgba(245,130,130,1); }
.vct__btn--wide { flex:2; }