/*
 * DJHOUSE GOLD / AMBER DESIGN SYSTEM
 * Loaded after the legacy presentation layers.  This file intentionally only
 * changes presentation: routes, streams, authentication and data flows stay
 * exactly as they are.
 */
:root {
  color-scheme: dark;
  --dj-gold: #ffd700;
  --dj-gold-light: #fff0a3;
  --dj-amber: #ff9f00;
  --dj-amber-deep: #b96800;
  --dj-ink: #0d0d0d;
  --dj-obsidian: #12100c;
  --dj-glass: rgba(20, 17, 10, .78);
  --dj-glass-strong: rgba(14, 13, 10, .94);
  --dj-line: rgba(255, 215, 0, .34);
  --dj-line-strong: rgba(255, 209, 52, .74);
  --dj-text: #fffdf4;
  --dj-muted: #c9c1ab;
  --dj-shadow: 0 20px 60px rgba(0, 0, 0, .48), 0 0 28px rgba(255, 170, 0, .08);

  /* Existing dashboard, club and Music Store tokens map to the same palette. */
  --ui-bg: var(--dj-ink);
  --ui-bg-2: #17120a;
  --ui-panel: var(--dj-glass);
  --ui-panel-strong: var(--dj-glass-strong);
  --ui-panel-soft: rgba(47, 34, 8, .52);
  --ui-text: var(--dj-text);
  --ui-muted: var(--dj-muted);
  --ui-cyan: var(--dj-gold);
  --ui-cyan-2: var(--dj-gold-light);
  --ui-purple: var(--dj-amber);
  --ui-pink: #ffb000;
  --ui-green: #ffbf2f;
  --ui-yellow: var(--dj-gold);
  --ui-line: var(--dj-line);
  --ui-line-strong: var(--dj-line-strong);
  --ui-neon: 0 0 34px rgba(255, 193, 22, .16);
  --ui-focus: 0 0 0 3px rgba(255, 215, 0, .28);
  --aq-bg: var(--dj-ink);
  --aq-line-cyan: var(--dj-line);
  --aq-text: var(--dj-text);
  --aq-cyan: var(--dj-gold);
  --aq-pink: var(--dj-amber);
  --aq-lime: #ffd45a;
  --aq-amber: var(--dj-gold-light);
  --text-main: var(--dj-text);
  --text-soft: #ded5be;
  --text-muted: #a99e86;
  --neon-cyan: var(--dj-gold);
  --neon-blue: #ffc642;
  --neon-pink: var(--dj-amber);
  --neon-purple: #e58a00;
  --neon-green: #ffe27a;
  --neon-yellow: var(--dj-gold);
  --panel-bg: var(--dj-glass);
  --panel-border: var(--dj-line);
}

html { background: var(--dj-ink) !important; }

body,
body.aq-fit-screen100 {
  color: var(--dj-text) !important;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 184, 0, .16), transparent 32%),
    radial-gradient(ellipse at 92% 9%, rgba(255, 121, 0, .12), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(142, 76, 0, .11), transparent 42%),
    linear-gradient(150deg, #0d0d0d 0%, #15120b 49%, #090909 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
  background:
    linear-gradient(rgba(255, 215, 0, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 215, 0, .024) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
}

/* Clear, techno display hierarchy without adding a network font dependency. */
h1, h2, h3, .brand, .eyebrow, .kicker, .topbar b, .music-topbar strong,
.aq-admin-title, .qr-main-title, .music-sale-eyebrow, .room-player-eyebrow {
  font-family: Orbitron, "Arial Black", Inter, ui-sans-serif, sans-serif !important;
  letter-spacing: .075em !important;
}

h1, .brand h1, .card.center h1, .music-hero h1, .dj-title {
  color: var(--dj-text) !important;
  text-shadow: 0 0 16px rgba(255, 206, 52, .16), 0 2px 0 rgba(0, 0, 0, .7) !important;
}

a { color: var(--dj-gold-light); }
a:hover { color: #fff7c9 !important; }

/* Primary surfaces: dark glass, fine gold outline and a restrained edge glow. */
:is(.card, .dj-card, .admin-card, .panel, .support-card, .request, .guide,
  .stage, .right-card, .contact-card, .qr-panel, .music-panel, .music-topbar,
  .music-hero, .music-player, .site-footer, #adminPanel, #salePanel,
  #musicSaleBox, #aqViewerPanelPro, #aqListenerNamesBox, #listenerNamesBox,
  .aq-video-live-card, .top-banner, .auth-shell, .dj-cookie-bar,
  .dj-cookie-dialog) {
  border-color: var(--dj-line) !important;
  /* Use the shorthand so old blue/purple background-image declarations do
     not survive underneath this colour system. */
  background: linear-gradient(145deg, rgba(29, 24, 13, .88), rgba(12, 11, 9, .95)) !important;
  box-shadow: var(--dj-shadow), inset 0 1px 0 rgba(255, 244, 196, .07) !important;
}

.card.center,
.card.center.djh-club-ready,
.music-hero {
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 197, 20, .13), transparent 43%),
    radial-gradient(ellipse at 92% 86%, rgba(255, 131, 0, .11), transparent 38%),
    linear-gradient(145deg, rgba(25, 21, 12, .96), rgba(12, 12, 10, .98)) !important;
  border-color: rgba(255, 215, 0, .44) !important;
}

.music-panel, .music-topbar, .music-hero, .music-player,
.grid > .card, .room-grid > .card, .side-stack > .card {
  -webkit-backdrop-filter: blur(13px) saturate(120%) !important;
  backdrop-filter: blur(13px) saturate(120%) !important;
}

/* Shared buttons, nav actions and CTAs. */
:is(button, .btn, .help-btn, .control-btn, .admin-btn, .play-btn, .download-btn,
  .pager button, .request-submit, .request-action, .image-label, .live-signup,
  .logout, .music-sale-item-btn) {
  border-color: rgba(255, 215, 0, .65) !important;
  background: linear-gradient(135deg, #ffd700 0%, #ffb30f 48%, #ff8f00 100%) !important;
  color: #171006 !important;
  font-family: Orbitron, Inter, ui-sans-serif, sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .36) !important;
  box-shadow: 0 5px 0 rgba(137, 78, 0, .9), 0 10px 24px rgba(255, 160, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

:is(button, .btn, .help-btn, .control-btn, .admin-btn, .play-btn, .download-btn,
  .pager button, .request-submit, .request-action, .image-label, .live-signup,
  .logout, .music-sale-item-btn):hover:not(:disabled) {
  border-color: #fff2a3 !important;
  color: #0d0b07 !important;
  filter: brightness(1.08) saturate(1.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 rgba(137, 78, 0, .9), 0 15px 30px rgba(255, 184, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

:is(button, .btn, .help-btn, .control-btn, .admin-btn, .play-btn, .download-btn,
  .pager button, .request-submit, .request-action, .image-label, .live-signup,
  .logout, .music-sale-item-btn):active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 2px 0 rgba(137, 78, 0, .9), 0 5px 14px rgba(255, 160, 0, .16) !important;
}

/* Secondary controls remain glass rather than becoming visually noisy. */
:is(.btn.alt, .control-btn.pause, .control-btn.mute, .small-btn, .iconbtn,
  .player-controls button:not(.main), .pause-row-btn, .report-btn, .admin-btn.danger,
  .request-action.delete) {
  background: rgba(48, 37, 12, .66) !important;
  color: var(--dj-gold-light) !important;
  border-color: rgba(255, 197, 60, .52) !important;
  box-shadow: inset 0 1px 0 rgba(255, 240, 169, .10), 0 7px 18px rgba(0,0,0,.22) !important;
}

:is(.btn.alt, .control-btn.pause, .control-btn.mute, .small-btn, .iconbtn,
  .player-controls button:not(.main), .pause-row-btn, .report-btn, .admin-btn.danger,
  .request-action.delete):hover:not(:disabled) {
  color: #fff8cd !important;
  background: rgba(101, 66, 8, .62) !important;
  box-shadow: 0 0 19px rgba(255, 191, 0, .18), inset 0 1px 0 rgba(255, 240, 169, .16) !important;
}

button:focus-visible, a:focus-visible, label:focus-within,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-color: var(--dj-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .25), 0 0 21px rgba(255, 193, 19, .16) !important;
}

:is(input, select, textarea, .input, .select, .admin-input, .locked-name) {
  color: var(--dj-text) !important;
  background: rgba(10, 10, 9, .88) !important;
  border-color: rgba(255, 205, 70, .31) !important;
}

:is(input, select, textarea, .input, .select, .admin-input):focus {
  border-color: var(--dj-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .16), inset 0 1px 0 rgba(255, 239, 170, .08) !important;
}

input::placeholder, textarea::placeholder { color: #a99b7e !important; }
input[type="range"] { accent-color: var(--dj-gold) !important; }

/* Tags, live status and info emphasis. */
:is(.sub, .eyebrow, .kicker, .status-pill, .chip, .tag, .status-badge,
  .music-sale-eyebrow, .room-player-eyebrow, .music-topbar strong,
  .music-footer b, .track-row.is-playing .track-title b, .stat b,
  .request-meta, .admin-report-meta, .track-title small) {
  color: var(--dj-gold-light) !important;
}

:is(.status-pill, .chip, .tag, .status-badge, .aq-video-live-status, .request-lock) {
  border-color: rgba(255, 215, 0, .46) !important;
  background: rgba(109, 76, 0, .18) !important;
}

.dot.live, .lamp-live { background: var(--dj-gold) !important; box-shadow: 0 0 12px rgba(255, 215, 0, .76) !important; }
.equalizer span, .eq span, .eq i, .aq-viz-bar-stable, .aq-viz-moving-bar { background: linear-gradient(180deg, #fff0a3, #ffd700 50%, #ff9f00) !important; }

/* Music Store receives its own dense library treatment in the new system. */
.music-shell { width: min(1320px, 94vw) !important; }
.music-hero h1 {
  background: linear-gradient(105deg, #fff7bd, #ffd700 45%, #ff9f00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.stat, .genre-item, .request-item, .admin-report-item, .music-report-dialog {
  border-color: rgba(255, 215, 0, .30) !important;
  background: rgba(29, 23, 10, .66) !important;
}
.track-list { border-top-color: rgba(255, 215, 0, .24) !important; }
.library-head { color: #e5c46c !important; }
.track-row { border-bottom-color: rgba(255, 215, 0, .17) !important; }
.track-row:hover, .track-row.is-playing { background: linear-gradient(90deg, rgba(255, 203, 33, .10), rgba(255, 145, 0, .04)) !important; }
.track-row.is-playing { border-left-color: var(--dj-gold) !important; }
.track-cover {
  border-color: rgba(255, 221, 89, .82) !important;
  background: linear-gradient(145deg, #221a08, #503200) !important;
  box-shadow: 0 9px 18px rgba(0,0,0,.40), inset 0 1px 1px rgba(255,255,255,.32), 0 0 15px rgba(255, 183, 0, .18) !important;
}
.track-row .download-action {
  border-color: #ffe998 !important;
  background: linear-gradient(115deg, #fff19b 0%, #ffd700 31%, #ffae00 63%, #ff7b00 100%) !important;
  color: #160d02 !important;
  box-shadow: 0 8px 0 rgba(142, 75, 0, .86), 0 16px 28px rgba(255, 161, 0, .20), inset 0 1px 1px rgba(255,255,255,.82) !important;
}
.music-player {
  border-color: rgba(255, 215, 0, .65) !important;
  background: linear-gradient(145deg, rgba(35, 27, 10, .97), rgba(11, 11, 9, .98)) !important;
}

/* Account, OTP and cookie screens are separate HTML pages rather than part of
   the dashboard, so they receive explicit tokens here as well. */
.auth-shell {
  background: linear-gradient(145deg, rgba(28, 22, 10, .96), rgba(12, 11, 9, .98)) !important;
  border-color: rgba(255, 215, 0, .48) !important;
}
.auth-shell .brand p, .auth-shell .field label, .auth-shell .small a { color: var(--dj-gold-light) !important; }
.auth-shell .tabs a, .auth-shell .secondary, .auth-shell .captcha-refresh {
  color: var(--dj-gold-light) !important;
  border-color: rgba(255, 215, 0, .35) !important;
  background: rgba(61, 45, 11, .48) !important;
  box-shadow: none !important;
}
.auth-shell .tabs a.active {
  color: #191105 !important;
  border-color: var(--dj-gold) !important;
  background: linear-gradient(110deg, #fff0a3, #ffd700 48%, #ff9f00) !important;
  box-shadow: 0 4px 0 rgba(137, 78, 0, .76), 0 9px 21px rgba(255, 172, 0, .16) !important;
}
.auth-shell .info {
  color: #fff4be !important;
  border-color: rgba(255, 215, 0, .34) !important;
  background: rgba(103, 73, 7, .19) !important;
}
.auth-shell .captcha-box img {
  border-color: rgba(255, 215, 0, .44) !important;
  background: #121008 !important;
  filter: sepia(.92) saturate(1.35) hue-rotate(347deg) brightness(1.12) !important;
}
.auth-shell .fb, .auth-shell .google {
  background: linear-gradient(135deg, #fff0a3, #ffd700 48%, #ff9f00) !important;
  color: #171006 !important;
  border-color: rgba(255, 232, 136, .85) !important;
}
.dj-cookie-bar, .dj-cookie-dialog {
  color: var(--dj-text) !important;
  background: linear-gradient(145deg, rgba(29, 23, 10, .96), rgba(12, 11, 9, .98)) !important;
}
.dj-cookie-copy, .dj-cookie-choice span { color: #d7ccb0 !important; }
.dj-cookie-copy a, .dj-cookie-dialog a { color: var(--dj-gold-light) !important; }
.dj-cookie-button--primary { background: linear-gradient(135deg, #fff0a3, #ffd700 48%, #ff9f00) !important; color: #171006 !important; }
.dj-cookie-choice input { accent-color: var(--dj-gold) !important; }

/* Community lobby route extensions are intentionally generated as inline
   style blocks. These selectors are kept here, in the final stylesheet, to
   remove the old rainbow/blue treatment without changing room logic. */
.lobby-hero, .room-info-panel, .rental-panel,
#list.lobby .room-card:nth-child(n),
#list.lobby .collection-card:nth-child(n) {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 185, 0, .14), transparent 35%),
    radial-gradient(circle at 16% 92%, rgba(255, 122, 0, .09), transparent 40%),
    linear-gradient(145deg, rgba(31, 25, 12, .97), rgba(13, 12, 9, .99)) !important;
  border-color: rgba(255, 215, 0, .36) !important;
  box-shadow: var(--dj-shadow), inset 0 1px 0 rgba(255, 240, 170, .09) !important;
}
#list.lobby .room-card:nth-child(n) .room-owner-label,
#list.lobby .collection-card:nth-child(n) .room-owner-label {
  color: var(--dj-gold-light) !important;
  border-color: rgba(255, 215, 0, .42) !important;
  background: linear-gradient(110deg, rgba(113, 75, 5, .38), rgba(43, 31, 8, .64), rgba(134, 78, 0, .24)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.22) !important;
  animation: none !important;
}
.rgb-neon-title {
  color: var(--dj-gold) !important;
  background: linear-gradient(105deg, #fff5a8, #ffd700 45%, #ff9f00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 13px rgba(255, 194, 17, .22) !important;
  animation: none !important;
}
.lobby-section-title, .policy-note b { color: var(--dj-text) !important; text-shadow: 0 0 14px rgba(255, 199, 20, .17) !important; }
.lobby-section-title::after,
#list.lobby .room-card > .eyebrow::after {
  background: linear-gradient(90deg, transparent, #ffd700 24%, #ff9f00 70%, transparent) !important;
  box-shadow: 0 0 12px rgba(255, 191, 0, .38) !important;
}
.feature-chips span, .track, .equalizer, .chat-list, .chat-msg,
.room-admin, .room-admin details, .room-admin-page .form details {
  color: var(--dj-text) !important;
  border-color: rgba(255, 215, 0, .28) !important;
  background: rgba(25, 21, 11, .72) !important;
}
.track b, .chat-msg b, .room-admin summary, .policy-note { color: var(--dj-gold-light) !important; }
.banner3d {
  border-color: rgba(255, 215, 0, .42) !important;
  filter: grayscale(1) sepia(1) saturate(3.4) hue-rotate(350deg) brightness(.78) contrast(1.12) !important;
}
.topbar > b { filter: grayscale(1) sepia(1) saturate(3.2) hue-rotate(350deg) brightness(1.18) contrast(1.04) !important; }
.music-player .main { background: linear-gradient(135deg, #fff5a6, #ffd700 45%, #ff9f00) !important; color: #160d02 !important; }
.timeline, .player-track small, .track-cell, .music-footer { color: #d8ceb5 !important; }
.music-report-note, .music-report-alert {
  border-color: rgba(255, 197, 55, .58) !important;
  background: linear-gradient(135deg, rgba(83, 53, 4, .48), rgba(20, 15, 7, .92)) !important;
}

/* Navigation reads as one premium, high-contrast system. */
:is(.topbar, .music-topbar, .site-footer, .music-footer) :is(a, button) {
  font-family: Orbitron, Inter, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

/* Preserve semantic success and destructive actions without returning to blue. */
:is(.danger, .aq-ag-reject, .aq-ag-kick) { border-color: rgba(255, 135, 58, .66) !important; }
:is(.online, .is-done .request-status, .aq-live-now) { color: #ffe27a !important; }

@media (max-width: 760px) {
  .music-shell { width: min(94vw, 680px) !important; }
  h1, .music-hero h1 { letter-spacing: .035em !important; }
  :is(.music-panel, .music-hero, .music-topbar, .card) { border-radius: 16px !important; }
  .music-player { box-shadow: 0 13px 35px rgba(0,0,0,.62), 0 0 18px rgba(255, 180, 0, .11) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}