/* ===================================================================
   RadioActive — Angelic Theme
   Ethereal midnight indigo with warm gold and soft lavender-white.
   WCAG 2.1 AA compliant (all text ≥ 4.5:1 contrast).
   =================================================================== */

:root {
  /* Desktop */
  --desktop:          #060412;

  /* Window chrome */
  --win-bg:           #100c24;
  --win-border-lo:    #5a4880;
  --win-border-hi:    #2a1c48;
  --win-border-edge:  #0e0a1e;

  /* Title bars */
  --title-start:      #160e30;
  --title-end:        #2c1c50;
  --title-inactive:   #120a20;
  --title-text:       #ffd888;   /* warm gold — contrast on #160e30 ≈ 12:1 ✓ */

  /* Buttons */
  --btn-face:         #1a1040;

  /* Text */
  --text:             #eee8ff;   /* soft lavender-white — contrast on #100c24 ≈ 14:1 ✓ */
  --text-inv:         #060412;

  /* Selection */
  --sel-bg:           #2e1c58;
  --sel-text:         #ffd888;   /* contrast on #2e1c58 ≈ 9:1 ✓ */

  /* Inputs */
  --input-bg:         #0a0818;
  --menu-bg:          #0e0c20;
  --status-bg:        #0e0c20;
  --scrollbar:        #1a1040;
  --shadow:           rgba(200,160,255,0.15);

  /* Accents */
  --accent:           #ffd080;   /* warm gold */
  --danger:           #ff6080;   /* rose — contrast on dark ≈ 7:1 ✓ */
  --success:          #80ffb8;   /* pale mint — contrast on dark ≈ 10:1 ✓ */
  --warn:             #ffc060;   /* amber — contrast on dark ≈ 11:1 ✓ */

  /* Structural overrides */
  --topbar-bg:        linear-gradient(90deg, #060412 0%, #130a28 40%, #1e1040 100%);
  --topbar-border:    #4a3070;
  --topbar-text:      #ffd888;
  --topbar-text-dim:  #b898e0;
  --art-panel-bg:     #060412;
  --player-bg:        linear-gradient(180deg, #0e0a20 0%, #060412 100%);
  --player-border:    #4a3070;
  --player-text:      #ffd888;
  --player-text-dim:  #7858a8;
  --cover-ph-bg:      linear-gradient(135deg, #060412 0%, #160e30 50%, #0e0a20 100%);
  --lb-list-bg:       #0a0818;
  --lb-hover-bg:      #160e30;
  --play-btn-bg:      #2a1858;
  --play-btn-hi:      #6040a8;
  --play-btn-lo:      #0e0a1e;
  --progress-fill:    linear-gradient(90deg, #3a2070 0%, #ffc060 100%);
  --radio-bg:         #060412;
  --radio-text:       #ffd888;
  --radio-text-dim:   #9878c8;
  --radio-border:     #3a2860;
  --font:             'Tahoma', 'Segoe UI', sans-serif;
  --text-muted:       #5a4870;
}

/* Body: soft radial light from above — the heavenly glow */
body {
  background: #060412;
  background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(180,140,255,0.07) 0%, transparent 70%);
}

/* Links */
a { color: #c8a0f8; }
a:hover { color: #ffd888; }

/* Bevel borders using violet-gold tones */
.raised {
  border-top:    2px solid #5a4880;
  border-left:   2px solid #5a4880;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}
.raised-sm {
  border-top:    1px solid #5a4880;
  border-left:   1px solid #5a4880;
  border-right:  1px solid #0e0a1e;
  border-bottom: 1px solid #0e0a1e;
}
.sunken {
  border-top:    2px solid #0e0a1e;
  border-left:   2px solid #0e0a1e;
  border-right:  2px solid #5a4880;
  border-bottom: 2px solid #5a4880;
}
.sunken-sm {
  border-top:    1px solid #0e0a1e;
  border-left:   1px solid #0e0a1e;
  border-right:  1px solid #5a4880;
  border-bottom: 1px solid #5a4880;
}

/* Window */
.window {
  background: #100c24;
  border-top:    2px solid #5a4880;
  border-left:   2px solid #5a4880;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
  box-shadow: 0 0 24px rgba(180,140,255,0.12), 3px 3px 8px rgba(0,0,0,0.85);
}

.window-titlebar {
  background: linear-gradient(90deg, #160e30 0%, #2c1c50 100%);
  color: #ffd888;
  border-bottom: 1px solid #3a2860;
  text-shadow: 0 0 8px rgba(255,216,136,0.45);
}

/* Panels */
.panel {
  background: #100c24;
  border-top:    2px solid #3a2860;
  border-left:   2px solid #3a2860;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}

.panel-header {
  background: #160e30;
  color: #ffd888;
  border-bottom: 1px solid #3a2860;
  text-shadow: 0 0 5px rgba(255,216,136,0.3);
}

/* Buttons */
.btn {
  background: #1a1040;
  color: #d8b8f8;
  border-top:    2px solid #5a4880;
  border-left:   2px solid #5a4880;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}
.btn:hover { background: #221450; color: #ffd888; }
.btn:active, .btn.pressed {
  border-top:    2px solid #0e0a1e;
  border-left:   2px solid #0e0a1e;
  border-right:  2px solid #5a4880;
  border-bottom: 2px solid #5a4880;
}

.btn-primary {
  background: #2a1858;
  color: #ffd888;
  border-color: #6040a8 #0e0a1e #0e0a1e #6040a8;
}
.btn-primary:hover { background: #341e68; color: #ffe8b0; }

.btn-danger {
  background: #3a0820;
  color: #ff90a8;
  border-color: #cc3060 #1a0010 #1a0010 #cc3060;
}
.btn-danger:hover { background: #501030; }

/* Forms */
input[type=text], input[type=password], input[type=email],
input[type=url], input[type=search], textarea, select {
  background: #0a0818;
  color: #eee8ff;
  border-top:    2px solid #0e0a1e;
  border-left:   2px solid #0e0a1e;
  border-right:  2px solid #5a4880;
  border-bottom: 2px solid #5a4880;
}
input:focus, textarea:focus, select:focus {
  outline: 1px solid #ffd080;
  outline-offset: 1px;
}

/* Flash messages */
.msg-success { background: #081a10; border-color: #40c870; color: #80ffb8; }
.msg-error   { background: #1a0818; border-color: #cc3060; color: #ff90a8; }
.msg-info    { background: #0a0a1e; border-color: #5040a0; color: #c8a0f8; }
.msg-warn    { background: #1a1000; border-color: #c08020; color: #ffc060; }

/* Section titles */
.section-title { color: #b898e0; border-bottom-color: #1e1440; }

/* Track cards */
.track-card {
  background: #100c24;
  border-top:    2px solid #3a2860;
  border-left:   2px solid #3a2860;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}
.track-card:hover { box-shadow: 0 0 14px rgba(180,140,255,0.28); }
.track-card .track-title  { color: #ffd888; }
.track-card .track-artist { color: #9878c8; }
.track-card .track-meta   { color: #4a3870; }
.track-card .play-overlay { background: rgba(42,24,88,0.88); }

/* Lightbox */
.lightbox-window {
  background: #100c24;
  border-top:    3px solid #5a4880;
  border-left:   3px solid #5a4880;
  border-right:  3px solid #0e0a1e;
  border-bottom: 3px solid #0e0a1e;
  box-shadow: 0 0 48px rgba(180,140,255,0.18), 6px 6px 20px rgba(0,0,0,0.9);
}

.lightbox-titlebar {
  background: linear-gradient(90deg, #160e30 0%, #2c1c50 100%);
  color: #ffd888;
  text-shadow: 0 0 8px rgba(255,216,136,0.4);
}

.lb-meta .lb-title  { color: #ffd888; }
.lb-meta .lb-artist { color: #c8a0f8; }
.lb-meta .lb-album  { color: #7858a8; }
.lb-meta .lb-extra  { color: #4a3870; }

.lb-track-item { color: #eee8ff; border-bottom-color: #160e30; }
.lb-track-item.active { background: #2a1858; color: #ffd888; }
.lb-track-item.active .lb-ti-artist,
.lb-track-item.active .lb-ti-dur { color: #b898e0; }

.lb-ti-num    { color: #4a3870; }
.lb-ti-title  { color: #eee8ff; }
.lb-ti-artist { color: #7858a8; }
.lb-ti-dur    { color: #4a3870; }
.lb-ti-plays  { color: #6848a8; }

/* Control buttons */
.ctrl-btn {
  background: #1a1040;
  border-top:    2px solid #5a4880;
  border-left:   2px solid #5a4880;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}
.ctrl-btn:hover { background: #221450; }
.ctrl-btn:active {
  border-top:    2px solid #0e0a1e;
  border-left:   2px solid #0e0a1e;
  border-right:  2px solid #5a4880;
  border-bottom: 2px solid #5a4880;
}
.ctrl-btn svg { fill: #7858a8; stroke: #7858a8; }
.ctrl-btn.active { background: #1e1248; }
.ctrl-btn.active svg { stroke: #ffd888; fill: none; }
.ctrl-btn.active .lb-loop-label { color: #ffd888; }

/* Progress bars */
.progress-bar-wrap {
  background: #060412;
  border-top:    1px solid #0e0a1e;
  border-left:   1px solid #0e0a1e;
  border-right:  1px solid #3a2860;
  border-bottom: 1px solid #3a2860;
}
.lb-progress {
  background: #060412;
  border-top:    1px solid #0e0a1e;
  border-left:   1px solid #0e0a1e;
}
.lb-times      { color: #4a3870; }
.progress-times { color: #4a3870; }

/* Volume slider */
.vol-slider { background: #160e30; }
.vol-slider::-webkit-slider-thumb {
  background: #221450;
  border-top:  1px solid #5a4880;
  border-left: 1px solid #5a4880;
  border-right:  1px solid #0e0a1e;
  border-bottom: 1px solid #0e0a1e;
}

/* Tables */
.data-table { background: #0a0818; }
.data-table th { background: #160e30; color: #ffd888; border-right-color: #221450; }
.data-table td { border-bottom-color: #160e30; color: #eee8ff; }
.data-table tr:nth-child(even) td { background: #0e0c20; }
.data-table tr:hover td { background: #160e30; }

/* Admin layout */
.admin-nav-item { color: #9878c8; border-bottom-color: #1a1040; }
.admin-nav-item:hover { background: #160e30; color: #ffd888; }
.admin-nav-item.active { background: #1e1448; color: #ffd888; font-weight: bold; }

/* Profile header */
.profile-header {
  background: linear-gradient(180deg, #060412 0%, #130a28 100%);
}

/* Subpage tabs */
.subtab {
  background: #0e0c20;
  color: #7858a8;
  border-top:    2px solid #3a2860;
  border-left:   2px solid #3a2860;
  border-right:  2px solid #0e0a1e;
}
.subtab:hover { background: #160e30; color: #c8a0f8; }
.subtab.active { background: #100c24; color: #ffd888; border-bottom-color: #100c24; }

/* Badges */
.badge-admin  { background: #2a0818; color: #ff90a8; }
.badge-editor { background: #081a10; color: #80ffb8; }
.badge-contrib{ background: #0e0a1e; color: #c8a0f8; }

/* Auth window */
.auth-logo {
  background: linear-gradient(180deg, #060412 0%, #160e30 100%);
  color: #ffd888;
}
.auth-logo h1 { text-shadow: 0 0 12px rgba(255,216,136,0.5); }
.auth-logo .tagline { color: #7858a8; }

/* Stat cards */
.stat-card { background: #0a0818; border-color: #3a2860 #0e0a1e #0e0a1e #3a2860; }
.stat-num  { color: #ffd888; }
.stat-label{ color: #4a3870; }

/* Upload zone */
.upload-zone { background: #0a0818; border-color: #3a2860; }
.upload-zone:hover, .upload-zone.drag-over { background: #160e30; border-color: #9878c8; }

/* Invite codes */
.invite-code { background: #060412; color: #ffd888; border-color: #3a2860; }

/* Title buttons */
.title-btn {
  background: #1a1040;
  border-top:    1px solid #5a4880;
  border-left:   1px solid #5a4880;
  border-right:  1px solid #0e0a1e;
  border-bottom: 1px solid #0e0a1e;
  color: #9878c8;
}
.title-btn:hover { background: #221450; color: #ffd888; }

/* Scrollbar */
::-webkit-scrollbar-track { background: #0a0818; }
::-webkit-scrollbar-thumb {
  background: #1a1040;
  border-top:    2px solid #3a2860;
  border-left:   2px solid #3a2860;
  border-right:  2px solid #0e0a1e;
  border-bottom: 2px solid #0e0a1e;
}
::-webkit-scrollbar-button {
  background: #1a1040;
  border-top:    1px solid #3a2860;
  border-left:   1px solid #3a2860;
  border-right:  1px solid #0e0a1e;
  border-bottom: 1px solid #0e0a1e;
}

/* Track list */
.track-list { background: #0a0818; border-color: #3a2860 #0e0a1e #0e0a1e #3a2860; }
.track-list-item { border-bottom-color: #160e30; color: #eee8ff; }
.track-list-item:hover { background: #160e30; }
.track-list-item.playing { background: #221450; color: #ffd888; }
.track-list-item.playing .tli-meta { color: #7858a8; }
.tli-num    { color: #4a3870; }
.tli-artist { color: #7858a8; }
.tli-meta   { color: #4a3870; }

/* Form hints */
.form-hint { color: #5a4870; }
.text-muted { color: #5a4870; }

/* Radio */
.radio-dot.live { background: #ffd080; box-shadow: 0 0 10px rgba(255,208,128,0.7); }

/* Landing panel */
.landing-content h2, .landing-content h3, .landing-content h4 { color: #ffd888; }
.landing-content blockquote { border-left-color: #3a2860; background: rgba(180,140,255,0.05); color: #9878c8; }
.landing-content hr  { border-top-color: #2a1c48; }
.landing-content a   { color: #c8a0f8; }
.landing-content a:hover { color: #ffd888; }
.landing-content code { background: rgba(180,140,255,0.08); border-color: #2a1c48; color: #ffd888; }
.landing-content pre { background: #060412; border-color: #2a1c48; }
.landing-poster-wrap img { border-color: #3a2860; }