/* [REACHER+] Theme system — CSS variables + presets + luxury shine */
:root {
  --reacher-bg: #08090a;
  --reacher-bg-soft: #0b0c0e;
  --reacher-panel: rgba(18, 19, 22, 0.74);
  --reacher-line: rgba(255, 255, 255, 0.06);
  --reacher-line-strong: rgba(255, 255, 255, 0.13);
  --reacher-text: #f7f8f8;
  --reacher-text-2: #8a8f98;
  --reacher-text-3: #62666d;
  --reacher-accent: 52 211 153;
  --reacher-glow: 1;
  --reacher-radius: 22px;
  --reacher-shine-speed: 7s;
}
html[data-reacher-theme="light"] {
  --reacher-bg: #f5f6f8;
  --reacher-bg-soft: #ffffff;
  --reacher-panel: rgba(255, 255, 255, 0.9);
  --reacher-line: rgba(9, 12, 16, 0.08);
  --reacher-line-strong: rgba(9, 12, 16, 0.15);
  --reacher-text: #0b0d10;
  --reacher-text-2: #5a6068;
  --reacher-text-3: #8a9098;
}

/* ── helpers ── */
.reacher-themed { background: var(--reacher-bg); color: var(--reacher-text); }
.reacher-accent-text { color: rgb(var(--reacher-accent)); }
.reacher-muted { color: var(--reacher-text-2); }
.reacher-muted-2 { color: var(--reacher-text-3); }

/* ambient glow layer */
#reacherAmbient {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 42% at 50% -6%, rgb(var(--reacher-accent) / calc(0.11 * var(--reacher-glow))), transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0, calc(0.55 * var(--reacher-glow))) 100%);
  transition: opacity .25s ease;
}
html[data-reacher-ambient="off"] #reacherAmbient { opacity: 0; }

/* luxury card: gradient hairline + animated conic shine */
.lux-card {
  position: relative; border-radius: var(--reacher-radius); padding: 1px;
  background: linear-gradient(180deg, var(--reacher-line-strong), var(--reacher-line));
  box-shadow: 0 30px 80px -26px rgba(0,0,0, calc(0.95 * var(--reacher-glow)));
}
.lux-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgb(var(--reacher-accent) / 0.55) 45deg, transparent 130deg, transparent 235deg, rgb(var(--reacher-accent) / 0.35) 305deg, transparent 360deg);
  opacity: 0;
}
html[data-reacher-shine="static"] .lux-card::before { opacity: calc(0.35 * var(--reacher-glow)); }
html[data-reacher-shine="rgb"] .lux-card::before { opacity: calc(0.55 * var(--reacher-glow)); animation: reacher-hue var(--reacher-shine-speed) linear infinite; }
@keyframes reacher-hue { to { filter: hue-rotate(360deg); } }
.lux-inner {
  position: relative; border-radius: calc(var(--reacher-radius) - 1px);
  background: var(--reacher-panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.lux-hairline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--reacher-line-strong), transparent); }

/* ── Settings gear + panel ── */
#reacherGear {
  position: fixed; top: 14px; right: 14px; z-index: 70;
  width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--reacher-panel); border: 1px solid var(--reacher-line-strong); color: var(--reacher-text-2);
  backdrop-filter: blur(14px); cursor: pointer; transition: all .2s ease;
}
#reacherGear:hover { color: var(--reacher-text); transform: translateY(-1px); border-color: rgb(var(--reacher-accent) / 0.4); }
#reacherGear svg { width: 17px; height: 17px; }
#reacherGear.spin svg { animation: reacher-spin 5s linear infinite; }
@keyframes reacher-spin { to { transform: rotate(360deg); } }

#reacherBackdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
#reacherPanel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(370px, 92vw);
  background: var(--reacher-panel); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid var(--reacher-line); color: var(--reacher-text);
  transform: translateX(102%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
#reacherPanel.open { transform: translateX(0); }
.reacher-p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--reacher-line); }
.reacher-p-title { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.reacher-p-body { padding: 16px 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.reacher-p-foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--reacher-line); display: flex; flex-direction: column; gap: 8px; }
.reacher-lab { font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--reacher-text-3); margin-bottom: 8px; }
.reacher-row { display: flex; gap: 8px; flex-wrap: wrap; }
.reacher-btn {
  flex: 1 1 auto; padding: 8px 12px; border-radius: 10px; font-size: 11px; font-family: ui-monospace, monospace;
  background: rgb(var(--reacher-accent) / 0.06); border: 1px solid var(--reacher-line-strong); color: var(--reacher-text-2);
  cursor: pointer; transition: all .16s ease; white-space: nowrap;
}
.reacher-btn:hover { color: var(--reacher-text); border-color: rgb(var(--reacher-accent) / 0.4); }
.reacher-btn[aria-pressed="true"] { background: rgb(var(--reacher-accent) / 0.16); border-color: rgb(var(--reacher-accent) / 0.55); color: var(--reacher-text); }
.reacher-swatch { width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--reacher-line-strong); cursor: pointer; transition: transform .15s ease; }
.reacher-swatch:hover { transform: scale(1.08); }
.reacher-swatch[aria-pressed="true"] { outline: 2px solid rgb(var(--reacher-accent) / 0.7); outline-offset: 1px; }
.reacher-range { width: 100%; accent-color: rgb(var(--reacher-accent)); }
.reacher-val { font-family: ui-monospace, monospace; font-size: 10px; color: var(--reacher-text-3); }
.reacher-close { background: none; border: 0; color: var(--reacher-text-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 4px 6px; }
.reacher-close:hover { color: var(--reacher-text); }
.reacher-note { font-size: 10px; font-family: ui-monospace, monospace; color: var(--reacher-text-3); }

/* ── [REACHER+] มือถือ: เบาลง แต่คงลุคหรู (ไม่ปิด blur ทั้งหมดแล้ว) ── */
@media (max-width: 640px) {
  [class*="backdrop-blur"] { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
  .reacher-themed .panel-surface { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
  #reacherPanel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  [class*="blur-["] { filter: none !important; }
  #reacherAmbient { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-reacher-shine="rgb"] .lux-card::before { animation: none !important; }
  .animate-ping, .animate-pulse { animation: none !important; }
}

/* [REACHER+] reacher-scrollbar-web : สกรอลบาร์โทนเข้มทั้งเว็บ */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }