/* QK Webplayer theme — ported from the Quran project (quran/src/index.css).
   Normal mode = deep emerald + gold brand. html.dark = slate variant. */

:root {
  color-scheme: dark;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pt-bg-deep:    #073729;
  --pt-bg-darker:  #052119;
  --pt-bg-darkest: #03150f;
  --pt-surface:    #0a4a3a;
  --pt-surface-2:  #0f5a47;
  --pt-text:       #fdfaf5;
  --pt-text-muted: #a5b5b0;
  --pt-gold:       #d4af37;
  --pt-gold-soft:  #f3d774;
  --pt-green-ok:   #2ecc71;
  --pt-warn:       #f39c12;
  --pt-err:        #ff6b5b;
  --pt-gold-line:       rgba(212,175,55,0.18);
  --pt-gold-line-soft:  rgba(212,175,55,0.10);
  --pt-input-bg:   #ebe3ce;
  --pt-input-fg:   #0f1e1a;

  --accent: var(--pt-gold);
  --accent-soft: var(--pt-gold-soft);
  --glass-bg: linear-gradient(135deg, rgba(10,74,58,0.70), rgba(7,55,41,0.75));
  --glass-border: rgba(212,175,55,0.30);
  --glass-inset: rgba(212,175,55,0.20);
  --row-hover: rgba(212,175,55,0.08);

  --deck-green:  rgba(46,204,113,0.28);
  --deck-yellow: rgba(243,156,18,0.32);
  --deck-red:    rgba(255,107,91,0.38);
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(212,175,55,0.10), transparent 60%),
    radial-gradient(800px 500px at 90% 105%, rgba(20,120,95,0.20), transparent 65%),
    linear-gradient(180deg, #073729 0%, #052119 70%, #03150f 100%);
  background-attachment: fixed;
  color: var(--pt-text);
}

/* ── Dark (slate) variant ── */
html.dark {
  --pt-bg-deep:    #0f172a;
  --pt-bg-darker:  #0b0f17;
  --pt-bg-darkest: #020617;
  --pt-surface:    #111a2e;
  --pt-surface-2:  #1a2540;
  --pt-text:       #e2e8f0;
  --pt-text-muted: #8ea0b5;
  --pt-gold-line:      rgba(255,255,255,0.10);
  --pt-gold-line-soft: rgba(255,255,255,0.06);
  --pt-input-bg:   #1e293b;
  --pt-input-fg:   #e2e8f0;

  --accent: #10b981;
  --accent-soft: #34d399;
  --glass-bg: linear-gradient(135deg, rgba(20,30,52,0.78), rgba(11,15,23,0.82));
  --glass-border: rgba(255,255,255,0.10);
  --glass-inset: rgba(255,255,255,0.08);
  --row-hover: rgba(255,255,255,0.05);
}

html.dark body {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(16,185,129,0.08), transparent 60%),
    radial-gradient(800px 500px at 90% 105%, rgba(30,64,175,0.12), transparent 65%),
    linear-gradient(180deg, #0f172a 0%, #0b0f17 70%, #020617 100%);
  background-attachment: fixed;
}

/* ── Glass panel (signature card) ── */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.55),
              0 4px 12px -4px rgba(0,0,0,0.35),
              inset 0 1px 0 var(--glass-inset);
}
@supports (backdrop-filter: blur(20px)) {
  .glass {
    backdrop-filter: blur(32px) saturate(200%) brightness(108%);
    -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(108%);
  }
}

/* ── Base controls ── */
button {
  font: inherit;
  color: var(--pt-text);
  background: var(--pt-surface);
  border: 1px solid var(--pt-gold-line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
button:hover { background: var(--pt-surface-2); border-color: var(--glass-border); }
button:active { transform: scale(0.97); }
button:disabled { opacity: .45; cursor: default; }

button.primary {
  background: var(--accent);
  color: #0f1e1a;
  border-color: transparent;
  font-weight: 600;
}
button.primary:hover { background: var(--accent-soft); }
html.dark button.primary { color: #041016; }

button.danger { border-color: rgba(255,107,91,0.5); color: var(--pt-err); }
button.danger:hover { background: rgba(255,107,91,0.12); }

input, select, textarea {
  font: inherit;
  background: var(--pt-input-bg);
  color: var(--pt-input-fg);
  border: 1px solid var(--pt-gold-line);
  border-radius: 10px;
  padding: 9px 12px;
  outline: none;
  min-width: 0;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--pt-gold-line); }
input::placeholder { color: rgba(15,30,26,0.5); }
html.dark input::placeholder { color: rgba(226,232,240,0.4); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--pt-gold-line); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

.muted { color: var(--pt-text-muted); }
.gold { color: var(--accent); }
.mono { font-variant-numeric: tabular-nums; }

/* gold hairline divider */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--pt-gold-line), transparent);
  margin: 10px 0;
}