:root {
  --bg: #08090d;
  --surface: rgba(19, 20, 27, .88);
  --surface-strong: #171820;
  --line: rgba(255, 255, 255, .09);
  --line-bright: rgba(255, 255, 255, .16);
  --text: #f7f5fb;
  --muted: #9896a4;
  --violet: #9f7aea;
  --violet-bright: #b794f6;
  --green: #57d7a0;
  --blue: #65a8ff;
  --amber: #f4bd68;
  --red: #ff7d87;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(117, 76, 180, .11), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(67, 91, 160, .08), transparent 26rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

button, input, select { font: inherit; }
a { color: inherit; text-decoration: none; }
.ambient { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .13; }
.ambient-one { width: 26rem; height: 26rem; background: #6d48ae; left: -12rem; top: 28%; }
.ambient-two { width: 22rem; height: 22rem; background: #275689; right: -10rem; bottom: 2%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 13, .82);
  backdrop-filter: blur(20px);
}
.brand, .login-logo { display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand strong, .login-logo strong { display: block; font-size: 17px; letter-spacing: .02em; }
.brand small, .login-logo small, .account-copy small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; background: linear-gradient(145deg, #a881ec, #69459e); box-shadow: 0 7px 25px rgba(159, 122, 234, .28); }
.brand-mark i { width: 3px; border-radius: 4px; background: white; }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 13px; }.brand-mark i:nth-child(4) { height: 21px; }
.brand-mark.large { width: 44px; height: 44px; border-radius: 13px; gap: 4px; }
.brand-mark.large i { width: 4px; }

nav { display: flex; align-self: stretch; gap: 30px; }
nav a { position: relative; display: flex; align-items: center; color: var(--muted); font-weight: 600; font-size: 14px; }
nav a:hover, nav a.active { color: var(--text); }
nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--violet-bright); border-radius: 4px 4px 0 0; }
.account { justify-self: end; display: flex; align-items: center; gap: 10px; }
.account-copy { margin-right: 6px; }
.account-copy strong { display: block; font-size: 13px; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(183, 148, 246, .25); border-radius: 50%; background: rgba(159, 122, 234, .13); color: #d9c3ff; font-weight: 800; }

.page-shell { position: relative; z-index: 1; width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 58px 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--violet-bright); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { width: 23px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
.page-heading h1 { margin: 9px 0 8px; font-size: clamp(35px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; }
.page-heading p { margin-bottom: 0; color: var(--muted); font-size: 16px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid rgba(87, 215, 160, .18); border-radius: 999px; background: rgba(87, 215, 160, .07); color: #a5edca; font-size: 12px; font-weight: 700; }
.status-pill i, .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(87, 215, 160, .65); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 22px; }
.metric-card { min-height: 108px; padding: 22px; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(140deg, rgba(26, 27, 36, .95), rgba(16, 17, 23, .86)); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.metric-icon { width: 49px; height: 49px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; font-size: 20px; font-weight: 800; }
.metric-icon.violet { color: #ccb4fa; background: rgba(159, 122, 234, .13); }.metric-icon.green { color: #96e9c1; background: rgba(87, 215, 160, .11); }.metric-icon.blue { color: #a5cbff; background: rgba(101, 168, 255, .11); }.metric-icon.amber { color: #f7cf90; background: rgba(244, 189, 104, .11); }
.metric-card small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; font-size: 25px; line-height: 1.05; letter-spacing: -.03em; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(14px); }
.panel-heading { min-height: 78px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin-bottom: 3px; font-size: 18px; letter-spacing: -.015em; }
.panel-heading p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.count-badge { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 13px 20px; color: #777582; background: rgba(255, 255, 255, .018); font-size: 10px; letter-spacing: .11em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.055); color: #c7c5ce; font-size: 13px; white-space: nowrap; }
tbody tr { transition: background .16s ease; } tbody tr:hover { background: rgba(255,255,255,.025); }
.album-cell { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.album-cell strong { display: block; max-width: 300px; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; }
.album-cell small { color: #6f6d79; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.cover { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(145deg, rgba(159,122,234,.24), rgba(101,168,255,.1)); color: #d5c2f8; }
.user-chip { padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.05); color: #d3d1d9; font-size: 11px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; }
.status.uploading { color: #b5cfee; }.status.uploading i { background: var(--blue); box-shadow: 0 0 10px rgba(101,168,255,.55); }
.status.completing { color: #efd2a4; }.status.completing i { background: var(--amber); box-shadow: 0 0 10px rgba(244,189,104,.55); }
.status.complete { color: #8de1ba; }
.status.disabled-status { color: var(--muted); }.status.disabled-status i { background: #66646f; box-shadow: none; }
time { color: #8f8d98; font-size: 11px; }
.empty-state { min-height: 310px; padding: 55px 24px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-record { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid rgba(159,122,234,.16); border-radius: 50%; background: radial-gradient(circle, rgba(159,122,234,.13), transparent); color: #b89be9; font-size: 28px; }
.empty-state h3 { margin-bottom: 7px; }.empty-state p { max-width: 440px; margin-bottom: 0; color: var(--muted); }
.future-note { margin-top: 18px; padding: 18px 22px; display: flex; align-items: center; gap: 18px; border: 1px dashed rgba(159,122,234,.22); border-radius: 14px; background: rgba(159,122,234,.045); }
.future-note > span { padding: 4px 8px; border-radius: 6px; background: rgba(159,122,234,.12); color: #c8adf7; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.future-note strong { font-size: 13px; }.future-note p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.button { min-height: 38px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; color: white; font-weight: 700; font-size: 12px; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg, #9b72e4, #7650ae); box-shadow: 0 10px 25px rgba(118,80,174,.22); }
.button.ghost { border-color: var(--line); background: rgba(255,255,255,.035); color: #c4c2cb; }
.button.danger { border-color: rgba(255,125,135,.18); background: rgba(255,125,135,.08); color: #ffadb4; }
.button.compact { min-height: 32px; padding: 5px 10px; font-size: 11px; }.button.wide { width: 100%; min-height: 46px; }

.login-shell { min-height: 100vh; position: relative; z-index: 1; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(440px, .9fr); }
.login-story { padding: clamp(50px, 9vw, 140px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(120deg, rgba(159,122,234,.07), transparent 62%); }
.login-story h1 { margin: 22px 0 26px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 6.5vw, 92px); font-weight: 400; letter-spacing: -.055em; line-height: .94; }
.login-story h1 em { color: #bca1ec; font-weight: 400; }
.login-story > p { max-width: 590px; color: #aaa7b3; font-size: 18px; }
.signal { height: 92px; max-width: 600px; margin: 36px 0; display: flex; align-items: center; gap: clamp(4px, .7vw, 9px); }
.signal i { width: 100%; height: var(--height); border-radius: 10px; background: linear-gradient(to top, rgba(159,122,234,.2), #b99ae9); opacity: .6; }
.trust-list { padding: 0; display: flex; flex-wrap: wrap; gap: 22px; list-style: none; color: #8f8c98; font-size: 12px; }
.trust-list span { color: var(--green); margin-right: 5px; }
.login-card-wrap { padding: 30px; display: grid; place-items: center; border-left: 1px solid var(--line); background: rgba(7,8,11,.44); }
.login-card { width: min(420px, 100%); padding: 42px; border: 1px solid var(--line-bright); border-radius: 22px; background: linear-gradient(145deg, rgba(26,27,35,.96), rgba(16,17,22,.96)); box-shadow: 0 35px 100px rgba(0,0,0,.48); }
.login-logo { margin-bottom: 38px; }.login-card h2 { margin-bottom: 4px; font-size: 28px; letter-spacing: -.035em; }.muted { color: var(--muted); }
label { display: block; margin: 20px 0 0; color: #c9c7d0; font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 43px; margin-top: 7px; padding: 9px 12px; border: 1px solid var(--line-bright); border-radius: 9px; outline: none; background: rgba(5,6,9,.58); color: var(--text); }
input:focus, select:focus { border-color: rgba(183,148,246,.62); box-shadow: 0 0 0 3px rgba(159,122,234,.09); }
.login-card .button { margin-top: 26px; }.help { margin: 20px 0 0; color: #777480; font-size: 11px; text-align: center; }
.form-error, .notice { padding: 11px 13px; border-radius: 9px; font-size: 12px; }
.form-error, .notice.error { border: 1px solid rgba(255,125,135,.2); background: rgba(255,125,135,.08); color: #ffc0c5; }
.notice.success { border: 1px solid rgba(87,215,160,.2); background: rgba(87,215,160,.08); color: #a4ebca; }
.notices { display: grid; gap: 8px; margin-bottom: 18px; }

.admin-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; align-items: start; gap: 20px; }
.create-panel { position: sticky; top: 94px; }.stack-form { padding: 5px 24px 25px; }.stack-form .button { margin-top: 24px; }.form-hint { margin: 12px 0 0; color: #777480; font-size: 10px; text-align: center; }
.user-list { display: grid; }
.user-row { padding: 18px 22px; display: grid; grid-template-columns: minmax(210px, 1fr) 150px minmax(300px, auto); align-items: center; gap: 20px; border-top: 1px solid var(--line); }
.user-row:first-child { border-top: 0; }.user-row.disabled { opacity: .57; }
.user-identity { display: flex; align-items: center; gap: 12px; }.large-avatar { width: 42px; height: 42px; }
.user-identity strong { margin-right: 8px; }.user-identity small, .user-state small { display: block; margin-top: 4px; color: #777480; font-size: 10px; }
.role-badge { padding: 3px 6px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.role-badge.admin { background: rgba(159,122,234,.13); color: #c7adf3; }.role-badge.user { background: rgba(101,168,255,.1); color: #9dc5f8; }
.user-actions { display: flex; justify-content: flex-end; gap: 7px; }.user-actions form { display: flex; align-items: end; gap: 5px; }.user-actions select, .password-small { width: 110px; min-height: 32px; margin: 0; padding: 5px 8px; font-size: 11px; }.password-small { width: 125px; }
.error-page { max-width: 600px; margin: 8vh auto; padding: 70px 35px; text-align: center; }.error-page > span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: rgba(255,125,135,.1); color: var(--red); font-size: 25px; }.error-page p { color: var(--muted); }.error-page .button { margin-top: 10px; }

.player-heading { align-items: center; }
.quality-control { width: 190px; margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.quality-control select { margin-top: 6px; color: var(--text); font-size: 12px; letter-spacing: 0; text-transform: none; }
.playlist-panel { margin-bottom: 20px; }
.playlist-toolbar { padding: 22px 24px; display: flex; align-items: end; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.playlist-toolbar h2 { margin: 5px 0 2px; font-size: 21px; }.playlist-toolbar p { margin: 0; color: var(--muted); font-size: 11px; }
.playlist-create { display: grid; grid-template-columns: minmax(180px, 260px) auto; align-items: end; gap: 8px; }.playlist-create label { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.playlist-create input { margin: 0; }
.playlist-grid { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.playlist-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.018); }
.playlist-card > header { min-height: 61px; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.playlist-symbol { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(159,122,234,.13); color: var(--violet-bright); font-size: 18px; font-weight: 800; }
.playlist-rename { display: flex; align-items: center; gap: 6px; }.playlist-rename input { min-width: 0; min-height: 32px; margin: 0; padding: 5px 8px; font-weight: 700; }
.playlist-tracks { margin: 0; padding: 6px; list-style: none; }.playlist-tracks li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; }.playlist-tracks .track-button { min-height: 52px; }
.remove-track, .add-track { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; cursor: pointer; background: transparent; color: #777480; font-size: 17px; }.remove-track:hover { border-color: rgba(255,125,135,.18); background: rgba(255,125,135,.08); color: var(--red); }
.playlist-empty { margin: 0; padding: 24px; color: var(--muted); font-size: 11px; text-align: center; }.playlist-empty.standalone { padding: 32px; }
.music-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 112px; }
.album-panel { overflow: hidden; }
.album-header { min-height: 132px; padding: 23px; display: flex; align-items: center; gap: 19px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(159,122,234,.1), rgba(101,168,255,.035)); }
.album-art { width: 79px; height: 79px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: radial-gradient(circle at 35% 25%, #a783e5, #64448f 48%, #28213a); box-shadow: 0 15px 35px rgba(0,0,0,.3); }
.album-art span { width: 31px; height: 31px; display: grid; place-items: center; border: 6px solid rgba(8,9,13,.65); border-radius: 50%; color: white; font-size: 13px; }
.album-header p { margin-bottom: 2px; color: var(--violet-bright); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.album-header h2 { max-width: 460px; margin-bottom: 5px; overflow: hidden; font-size: 22px; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.album-header small { color: var(--muted); font-size: 11px; }
.track-list { margin: 0; padding: 7px 0; list-style: none; }
.track-list li { margin: 0; padding: 0 8px; }
.album-track-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.add-playlist-form { display: flex; align-items: center; gap: 3px; }.add-playlist-form select { width: 115px; min-height: 29px; margin: 0; padding: 4px 6px; color: var(--muted); font-size: 9px; }.add-track { background: rgba(159,122,234,.08); color: var(--violet-bright); }.add-track:hover { border-color: rgba(159,122,234,.25); background: rgba(159,122,234,.16); }
.track-button { width: 100%; min-height: 58px; padding: 8px 12px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 10px; cursor: pointer; color: #cac8d1; background: transparent; text-align: left; transition: background .15s ease, color .15s ease; }
.track-button:hover { background: rgba(255,255,255,.04); color: white; }
.track-button.playing { background: rgba(159,122,234,.12); color: white; }
.track-number { display: grid; place-items: center; color: #777480; font-size: 11px; }.track-number i { display: none; color: var(--violet-bright); font-style: normal; font-size: 10px; }.track-button:hover .track-number b, .track-button.playing .track-number b { display: none; }.track-button:hover .track-number i, .track-button.playing .track-number i { display: block; }
.track-copy { min-width: 0; }.track-copy strong, .track-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.track-copy strong { font-size: 13px; }.track-copy small { margin-top: 2px; color: #777480; font-size: 10px; }
.track-button time { color: #777480; font-size: 10px; }
.player-dock { position: fixed; z-index: 30; left: 50%; bottom: 18px; width: min(900px, calc(100% - 32px)); min-height: 78px; padding: 13px 17px; display: grid; grid-template-columns: 44px minmax(150px, 1fr) minmax(280px, 1.4fr); align-items: center; gap: 14px; border: 1px solid var(--line-bright); border-radius: 18px; background: rgba(20,21,28,.96); box-shadow: 0 22px 70px rgba(0,0,0,.5); backdrop-filter: blur(20px); transform: translateX(-50%); }
.now-playing-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #9973da, #624390); font-size: 18px; }
.now-playing-copy { min-width: 0; }.now-playing-copy small, .now-playing-copy strong, .now-playing-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.now-playing-copy small { color: var(--violet-bright); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.now-playing-copy strong { font-size: 13px; }.now-playing-copy span { color: var(--muted); font-size: 10px; }
.player-dock audio { width: 100%; height: 40px; accent-color: var(--violet); }

@media (max-width: 1080px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .login-layout { grid-template-columns: 1fr 430px; }.login-story { padding: 70px 50px; }
  .admin-layout { grid-template-columns: 1fr; }.create-panel { position: static; }
  .user-row { grid-template-columns: 1fr 130px; }.user-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .music-grid, .playlist-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .site-header { min-height: auto; padding: 14px 18px; grid-template-columns: 1fr auto; }.site-header nav { grid-row: 2; grid-column: 1 / -1; height: 42px; }.account-copy, .account .avatar { display: none; }
  .page-shell { width: min(100% - 24px, 1440px); padding-top: 36px; }.page-heading { align-items: flex-start; flex-direction: column; }.metric-grid { grid-template-columns: 1fr 1fr; }
  .login-layout { grid-template-columns: 1fr; }.login-story { display: none; }.login-card-wrap { min-height: 100vh; padding: 20px; border-left: 0; }.login-card { padding: 32px 24px; }
  .user-row { grid-template-columns: 1fr; }.user-actions { flex-direction: column; align-items: stretch; }.user-actions form { width: 100%; }.user-actions select, .password-small { width: 100%; }.user-actions .button { flex: 0 0 auto; }
  .future-note { align-items: flex-start; flex-direction: column; }
  .player-heading { align-items: flex-start; }.quality-control { width: 100%; }.player-dock { grid-template-columns: 38px 1fr; }.player-dock audio { grid-column: 1 / -1; }.music-grid { padding-bottom: 155px; }
  .playlist-toolbar { align-items: stretch; flex-direction: column; }.playlist-create { grid-template-columns: 1fr auto; width: 100%; }.playlist-grid { padding: 10px; }.playlist-card > header { grid-template-columns: 34px minmax(0, 1fr); }.playlist-card > header > form:last-child { grid-column: 2; }.add-playlist-form select { width: 92px; }
}
@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 88px; }.page-heading h1 { font-size: 38px; }
}