/* ============================================================
   JuckBox — shared theme
   Readark / AnnealX design language: dark + teal/amber, Geist
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* Backgrounds */
  --bg:#0A0E13; --bg-2:#11171F; --card:#161E28; --card-2:#1C2530; --panel-3:#232D3A;
  /* Hairlines / borders */
  --border:rgba(255,255,255,0.06); --border-strong:rgba(255,255,255,0.12); --border-teal:rgba(0,180,200,0.25);
  /* Text */
  --text:#E2E8EE; --txt-2:#B4BFCA; --muted:#7A8896; --txt-faint:#4A5666;
  /* Accents — straight from the firmware palette */
  --accent:#00B4C8; --accent-deep:#00788B; --teal-glow:rgba(0,180,200,0.18);
  --accent2:#E8A83C; --success:#3CA656; --ok:#3CA656; --danger:#D04848;
  /* Type + layout */
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius:14px; --radius-sm:8px;
}

/* subtle printed-circuit glow behind everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(0,180,200,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(232,168,60,0.04), transparent 60%);
}
body > *{ position:relative; z-index:1; }
::selection{ background:var(--accent); color:var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--card-2); border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--teal-glow); }

/* ── Brand bar (Readark logo + product + page chip) ── */
.brandbar{ border-bottom:1px solid var(--border); margin-bottom:20px; }
.brandbar__in{ display:flex; align-items:center; gap:12px; padding:14px 2px; }
.brandbar__logo{ height:22px; width:auto; opacity:0.92; }
.brandbar__sep{ width:1px; height:22px; background:var(--border-strong); }
.brandbar__product{ font-weight:600; letter-spacing:-0.02em; font-size:18px; color:var(--text); }
.brandbar__page{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-left:auto; }

/* ── helpers ── */
.eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent); opacity:0.7; }
.mono{ font-family:var(--font-mono); font-feature-settings:"tnum","zero"; }

/* ── Panel geçişi (Hesap Yönetim ↔ Kasa) ── */
.panelswitch{ margin-left:auto; display:inline-flex; gap:4px; background:var(--bg-2); border:1px solid var(--border); border-radius:10px; padding:4px; }
.panelswitch a{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border-radius:7px; transition:background .15s, color .15s; white-space:nowrap; }
.panelswitch a:hover{ color:var(--text); }
.panelswitch a.active{ background:var(--accent); color:#001014; font-weight:600; }