/* Meldix v6.2 — global owner theme + flat site-native UI
   Loaded last. Every newer subsystem inherits the active admin theme. */

body {
  --ui-accent: rgb(var(--accent-rgb, 255, 95, 198));
  --ui-accent-2: rgb(var(--accent-2-rgb, 255, 155, 224));
  --ui-violet: rgb(var(--violet-rgb, 167, 118, 255));
  --ui-text: var(--theme-text, #f7eff7);
  --ui-muted: var(--theme-muted, #b8afbb);
  --ui-soft: var(--theme-soft, rgba(255,255,255,.5));
  --ui-line: var(--theme-line, rgba(255,255,255,.065));
  --ui-line-strong: var(--theme-line-strong, rgba(255,255,255,.105));
  --ui-bg: var(--theme-bg, #030205);
  --ui-bg-2: var(--theme-bg-2, #07040a);
  --ui-bg-3: var(--theme-bg-3, #120b16);
  --ui-panel: var(--theme-panel, rgba(9,7,13,.92));
  --ui-input: var(--theme-input, rgba(255,255,255,.035));
  --ui-hover: var(--theme-hover, rgba(255,255,255,.026));
  --ui-glow: var(--theme-glow, rgba(255,95,198,.12));
  --ui-selection: var(--theme-selection, rgba(255,95,198,.22));
  --mx-accent: var(--ui-accent);
  --mx-accent2: var(--ui-accent-2);
  --mx-panel: var(--ui-panel);
  --mx-line: var(--ui-line-strong);
  --music-accent: var(--ui-accent);
}

::selection { background: var(--ui-selection); color: var(--ui-text); }

select {
  color-scheme: dark;
}
select option,
.mxv8-select option,
.admin-input option {
  background: var(--theme-admin-option-bg, #111014) !important;
  color: var(--theme-admin-option-text, #f7f2f8) !important;
}

/* ---------- FLAT GEOMETRY ---------- */
.card,
.main,
.support-box,
.project-card,
.project-row,
.guestbook-entry,
.comment-card,
.project-filter,
.status-chip,
.tag,
.btn,
button,
input,
textarea,
select,
.mx-chip,
.mx-icon-btn,
.mx-modal,
.mx-close,
.mx-card,
.mx-btn,
.mx-stat,
.mx-ach,
.mx-now,
.mx-now-cover,
.mx-provider-tag,
.mx-badge,
.mx-react,
.mx-ai-mode,
.mx-command-search,
.mx-terminal-input,
.mx-command-item,
.mx-terminal-output,
.mx-status-row,
.mx-gallery button,
.mx-lightbox img,
.mx-option,
.mx-auth-required,
.mx-bottom-nav,
.mx-bottom-nav button,
.music-player-v6,
.music-library-panel,
.music-proposal-modal,
.music-btn,
.music-toggle,
.music-cover,
.music-library-close,
.music-library-search,
.music-track-row,
.music-propose-btn,
.music-upload-card,
.music-form-input,
.music-form-textarea,
.admin-overlay,
.admin-panel,
.admin-login,
.admin-editor,
.admin-tabs,
.admin-tab,
.admin-section,
.admin-subcard,
.admin-input,
.admin-textarea,
.admin-btn,
.admin-file-card,
.admin-theme-card,
.admin-moderation-item,
.admin-stat-card,
.admin-dashboard-card,
.admin-music-item,
.admin-advanced-music,
.admin-upload-progress,
.admin-status,
.admin-login-card,
.admin-close {
  border-radius: 0 !important;
}

/* Only semantic dots/thumbs remain circular. */
.status-dot,
.presence-dot,
.mx-online-pill i,
.mx-status-dot,
.music-progress::-webkit-slider-thumb,
.music-volume::-webkit-slider-thumb,
.music-progress::-moz-range-thumb,
.music-volume::-moz-range-thumb,
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  border-radius: 50% !important;
}

.avatar-wrap,
.avatar-wrap img,
#avatar,
.mx-user-hero img,
.mx-verified-user img,
.mx-chip img {
  border-radius: 0 !important;
}

/* ---------- MAIN SITE ---------- */
body,
body .main,
body .card {
  color: var(--ui-text) !important;
}

body .card,
body .main {
  border-color: var(--ui-line) !important;
}

body .card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-3) 48%, transparent), color-mix(in srgb, var(--ui-bg) 30%, transparent)) !important;
}

body .main {
  background: color-mix(in srgb, var(--ui-bg) 16%, transparent) !important;
}

body .section-title,
body .block-title,
body .eyebrow,
body .admin-kicker,
body .mx-kicker,
body .music-eyebrow,
body .music-library-kicker {
  color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-soft)) !important;
}

body .subtitle,
body .project-desc,
body .stack-items,
body .social,
body .fav-line,
body .mx-muted,
body .mx-provider small,
body .mx-stat span,
body .mx-ach p,
body .mx-command-item small,
body .music-status,
body .music-time,
body .admin-note,
body .admin-label,
body .admin-login-hero small {
  color: var(--ui-muted) !important;
}

body .social-list,
body .stats,
body .projects,
body .stack,
body .guestbook,
body .now-playing,
body .live-discord,
body .mx-head,
body .mx-card,
body .mx-stat,
body .mx-ach,
body .mx-now,
body .mx-status-row,
body .mx-command-item,
body .mx-gallery button {
  border-color: var(--ui-line) !important;
}

body .project-filter.active,
body .project-filter:hover,
body .mx-react.active,
body .mx-react:hover,
body .mx-ai-mode.active,
body .mx-option.active {
  border-color: color-mix(in srgb, var(--ui-accent) 56%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 9%, transparent) !important;
  color: var(--ui-text) !important;
}

/* Background effects also use active theme instead of hard-coded pink/purple. */
.mx-dynamic-bg {
  background:
    radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--ui-accent) 18%, transparent), transparent 33%),
    radial-gradient(circle at 16% 76%, color-mix(in srgb, var(--ui-violet) 13%, transparent), transparent 35%) !important;
}
.mx-bg-night {
  background:
    radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--ui-violet) 16%, transparent), transparent 35%),
    radial-gradient(circle at 16% 76%, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 35%) !important;
}
.mx-bg-online {
  background:
    radial-gradient(circle at 80% 15%, rgba(112,240,172,.08), transparent 32%),
    radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--ui-accent) 13%, transparent), transparent 36%) !important;
}
.mx-bg-dnd {
  background:
    radial-gradient(circle at 80% 15%, rgba(255,86,108,.12), transparent 34%),
    radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--ui-accent) 8%, transparent), transparent 35%) !important;
}

/* ---------- FEATURE PACK ---------- */
#mxFeatureBar .mx-chip,
#mxFeatureBar .mx-icon-btn {
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--ui-panel) 88%, transparent) !important;
  border-color: var(--ui-line-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#mxFeatureBar .mx-chip:hover,
#mxFeatureBar .mx-icon-btn:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-panel)) !important;
}

.mx-overlay {
  background: color-mix(in srgb, var(--ui-bg) 84%, rgba(0,0,0,.78)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.mx-modal {
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-3) 62%, rgba(0,0,0,.15)), color-mix(in srgb, var(--ui-bg) 92%, rgba(0,0,0,.1))) !important;
  box-shadow: 0 28px 100px rgba(0,0,0,.55) !important;
}

.mx-card,
.mx-stat,
.mx-ach,
.mx-command-item,
.mx-status-row,
.mx-gallery button,
.mx-terminal-output,
.mx-command-search,
.mx-terminal-input {
  background: var(--ui-input) !important;
  border-color: var(--ui-line) !important;
  color: var(--ui-text) !important;
}

.mx-btn,
.mx-option,
.mx-ai-mode,
.mx-react {
  border-color: var(--ui-line-strong) !important;
  color: var(--ui-muted) !important;
  background: transparent !important;
}
.mx-btn:hover,
.mx-option:hover,
.mx-ai-mode:hover,
.mx-react:hover,
.mx-option.active,
.mx-ai-mode.active,
.mx-react.active {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 54%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent) !important;
}

.mx-settings-note {
  margin: 0 0 18px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-muted);
  font: 700 10px/1.55 var(--mono, ui-monospace, monospace);
}

/* Legacy per-user theme classes must never override the global owner theme. */
body.mx-theme-noir,
body.mx-theme-cyber,
body.mx-theme-anime,
body.mx-theme-blood,
body.mx-theme-ice {
  filter: none !important;
}

/* ---------- MUSIC ---------- */
.music-player-v6,
.music-library-panel,
.music-proposal-modal {
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-3) 72%, transparent), color-mix(in srgb, var(--ui-bg) 94%, rgba(0,0,0,.05))) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.music-player-v6,
.music-library-panel,
.music-proposal-modal {
  border-radius: 6px !important;
}

.music-btn,
.music-toggle,
.music-cover,
.music-library-close,
.music-library-search,
.music-track-row,
.music-propose-btn,
.music-upload-card,
.music-form-input,
.music-form-textarea {
  border-radius: 5px !important;
}

.music-player-v6:hover,
.music-track-row:hover,
.music-track-row.active {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-line-strong)) !important;
}

.music-player-body,
.music-library-head,
.music-library-footer,
.music-form-actions {
  border-color: var(--ui-line) !important;
}

.music-btn,
.music-library-close,
.music-track-row,
.music-propose-btn,
.music-upload-card,
.music-form-input,
.music-form-textarea,
.music-library-search {
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
  background: var(--ui-input) !important;
}
.music-btn:hover,
.music-library-close:hover,
.music-track-row:hover,
.music-propose-btn:hover,
.music-upload-card:hover {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 46%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-input)) !important;
}
.music-title,
.music-library-head strong,
.music-track-row strong,
.music-proposal-modal h2,
.music-proposal-modal h3 {
  color: var(--ui-text) !important;
}
.music-status,
.music-track-row small,
.music-proposal-modal p,
.music-proposal-modal label,
.music-upload-card small {
  color: var(--ui-muted) !important;
}
.music-cover,
.music-track-cover {
  border-color: var(--ui-line) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-bg-3)) !important;
  color: var(--ui-accent) !important;
}
.music-progress::-webkit-slider-runnable-track,
.music-volume::-webkit-slider-runnable-track {
  border-radius: 0 !important;
}
.music-progress::-moz-range-track,
.music-volume::-moz-range-track,
.music-progress::-moz-range-progress,
.music-volume::-moz-range-progress {
  border-radius: 0 !important;
}

/* ---------- ADMIN ---------- */
#adminOverlay,
.admin-overlay {
  color: var(--ui-text) !important;
}

.admin-panel {
  border-color: var(--ui-line-strong) !important;
  background: color-mix(in srgb, var(--ui-bg) 97%, black) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.62) !important;
}

.admin-header,
.admin-tabs,
.admin-editor,
.admin-footer,
.admin-section,
.admin-login-card,
.admin-subcard {
  background: transparent !important;
  border-color: var(--ui-line) !important;
}

.admin-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--ui-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.admin-tab .admin-tab-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  fill: none !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.admin-tab:hover {
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
  background: var(--ui-hover) !important;
}
.admin-tab.active {
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
  border-left: 2px solid var(--ui-accent) !important;
  background: color-mix(in srgb, var(--ui-accent) 6%, transparent) !important;
  box-shadow: none !important;
}
.admin-tab svg,
.admin-section-title-icon svg,
.admin-login-hero svg,
.admin-btn svg,
.admin-file-card svg {
  color: var(--ui-accent) !important;
  stroke: currentColor !important;
}

#adminModerationList {
  display: grid;
  gap: 10px;
  margin-top: 14px !important;
}
[data-admin-section="backup"] > .admin-grid {
  margin-bottom: 16px !important;
}

.admin-kicker,
.admin-section-title-icon,
.admin-theme-card.active strong {
  color: var(--ui-accent) !important;
}

.admin-input,
.admin-textarea,
.admin-file-card,
.admin-subcard,
.admin-moderation-item,
.admin-stat-card,
.admin-dashboard-card,
.admin-music-item,
.admin-login-card,
.admin-advanced-music {
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
  background: var(--ui-input) !important;
}
.admin-input:focus,
.admin-textarea:focus,
.admin-file-card:hover,
.admin-music-item:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-line-strong)) !important;
  box-shadow: none !important;
}

.admin-btn {
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.admin-btn:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 7%, transparent) !important;
}
.admin-btn.primary {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 60%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 10%, transparent) !important;
}

.admin-status {
  color: var(--ui-muted) !important;
  border-color: var(--ui-line) !important;
  background: transparent !important;
}

/* New global theme chooser */
.admin-theme-headline { margin-bottom: 18px; }
.admin-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-line);
}
.admin-theme-card {
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0 !important;
  background: color-mix(in srgb, var(--ui-bg) 96%, transparent) !important;
  color: var(--ui-text) !important;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.admin-theme-card:hover {
  background: color-mix(in srgb, var(--ui-accent) 5%, var(--ui-bg)) !important;
}
.admin-theme-card.active {
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-bg)) !important;
  box-shadow: inset 2px 0 0 var(--ui-accent) !important;
}
.admin-theme-card > span:last-child { min-width:0; }
.admin-theme-card strong { display:block; color:var(--ui-text); font-size:12px; }
.admin-theme-card small { display:block; margin-top:5px; color:var(--ui-muted); font-size:9px; line-height:1.4; }
.admin-theme-swatch {
  width: 42px;
  height: 42px;
  display:block;
  border: 1px solid var(--ui-line-strong);
  background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
}
.admin-theme-hint {
  margin-top: 14px;
  padding: 10px 0;
  border-top:1px solid var(--ui-line);
  color:var(--ui-muted);
  font:700 9px/1.55 var(--mono,ui-monospace,monospace);
}
.admin-theme-hint b { color:var(--ui-text); }

/* Thin site-native scrollbar, including admin/music lists. */
html,
body,
.admin-editor,
.admin-tabs,
.admin-moderation-list,
.music-track-list,
.mx-modal,
.mx-terminal-output {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-accent) 24%, rgba(255,255,255,.08)) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.admin-editor::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar,
.admin-moderation-list::-webkit-scrollbar,
.music-track-list::-webkit-scrollbar,
.mx-modal::-webkit-scrollbar,
.mx-terminal-output::-webkit-scrollbar { width: 5px; height: 5px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.admin-editor::-webkit-scrollbar-track,
.admin-tabs::-webkit-scrollbar-track,
.admin-moderation-list::-webkit-scrollbar-track,
.music-track-list::-webkit-scrollbar-track,
.mx-modal::-webkit-scrollbar-track,
.mx-terminal-output::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.admin-editor::-webkit-scrollbar-thumb,
.admin-tabs::-webkit-scrollbar-thumb,
.admin-moderation-list::-webkit-scrollbar-thumb,
.music-track-list::-webkit-scrollbar-thumb,
.mx-modal::-webkit-scrollbar-thumb,
.mx-terminal-output::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-accent) 24%, rgba(255,255,255,.08));
  border-radius:0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .admin-theme-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .admin-theme-grid { grid-template-columns: 1fr; }
  .admin-theme-card { min-height: 74px; grid-template-columns: 34px minmax(0,1fr); padding:12px; }
  .admin-theme-swatch { width:34px; height:34px; }
}

/* Absolute flat pass: site screenshot uses hard rectangular geometry. */
body * { border-radius: 0 !important; }
body .status-dot,
body .presence-dot,
body .mx-online-pill i,
body .mx-status-dot,
body .discord-status-dot,
body .online-dot,
body input[type="range"]::-webkit-slider-thumb,
body input[type="range"]::-moz-range-thumb,
body .music-progress::-webkit-slider-thumb,
body .music-volume::-webkit-slider-thumb,
body .music-progress::-moz-range-thumb,
body .music-volume::-moz-range-thumb { border-radius: 50% !important; }

/* Extra v6 admin/music classes */
.music-library-item,
.music-file-field,
.music-proposal-head button,
.music-admin-card,
.music-admin-cover,
.music-admin-actions button,
.admin-empty-state,
.admin-login-hero-icon,
.admin-section-banner-icon {
  border-radius: 0 !important;
}
.music-library-item,
.music-file-field,
.music-admin-card,
.admin-empty-state {
  border-color: var(--ui-line) !important;
  background: var(--ui-input) !important;
  color: var(--ui-text) !important;
}
.music-library-item.is-active,
.music-library-item:hover,
.music-file-field:hover,
.music-admin-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 44%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-input)) !important;
}
.music-library-copy strong,
.music-admin-copy strong,
.admin-subcard-title,
.admin-login-hero strong,
.admin-section-banner-copy strong,
.admin-file-card strong {
  color: var(--ui-text) !important;
}
.music-library-copy span,
.music-admin-copy span,
.music-admin-state,
.admin-empty-state,
.admin-login-hero small,
.admin-section-banner-copy small,
.admin-file-card small,
.admin-advanced-music summary,
.admin-upload-progress strong {
  color: var(--ui-muted) !important;
}
.music-admin-cover,
.admin-login-hero-icon,
.admin-section-banner-icon,
.admin-file-card > svg {
  border-color: var(--ui-line) !important;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-input)) !important;
  color: var(--ui-accent) !important;
  box-shadow: none !important;
}
.music-admin-actions button,
.music-proposal-head button {
  color: var(--ui-muted) !important;
  border-color: var(--ui-line) !important;
  background: transparent !important;
}
.music-admin-actions button:hover,
.music-proposal-head button:hover {
  color: var(--ui-text) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 44%, var(--ui-line-strong)) !important;
  background: color-mix(in srgb, var(--ui-accent) 6%, transparent) !important;
}
.admin-advanced-music,
.admin-upload-progress {
  border-color: var(--ui-line) !important;
  background: transparent !important;
}
.admin-upload-progress::before {
  background: linear-gradient(90deg, color-mix(in srgb,var(--ui-accent) 18%,transparent), color-mix(in srgb,var(--ui-accent) 6%,transparent)) !important;
}

/* Eliminate glossy/pill look in old public controls. */
body .project-actions button,
body .project-actions a,
body .reactions button,
body .guestbook button,
body .comments button,
body .mobile-nav button,
body .feature-toolbar button,
body [class*="pill"],
body [class*="chip"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.mx-theme-noir,
body.mx-theme-cyber,
body.mx-theme-anime,
body.mx-theme-blood,
body.mx-theme-ice {
  --pink: var(--ui-accent) !important;
  --pink-2: var(--ui-accent-2) !important;
  --accent: var(--ui-accent) !important;
}