/* Music -- app shell CSS (structure from URLHub, violet + cyan palette) */
:root {
  --bg:            #07050d;
  --bg-1:          #0e0a18;
  --bg-2:          #141021;
  --bg-3:          #1c162d;
  --border:        #261e3b;
  --border-hi:     #3a2e58;
  --text:          #ece8f7;
  --text-mid:      #c8c0de;
  --text-dim:      #9a91b4;
  --text-muted:    #776e91;
  --accent:        #8b5cf6;
  --accent-2:      #7c3aed;
  --accent-deep:   #1e1238;
  --accent-hot:    #a78bfa;
  --cyan:          #22d3ee;
  --cyan-dim:      rgba(34,211,238,.14);
  --brand-glow:    rgba(139,92,246,.45);
  --ok:            #34d399;
  --warn:          #fbbf24;
  --err:           #f87171;
  --mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; min-height: 100vh; }
a { color: var(--accent-hot); text-decoration: none; }
a:hover { color: var(--cyan); }

/* -- App shell -- */
.mu-app { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.mu-sidebar {
  background: linear-gradient(180deg, #110c1f, #07050d);
  border-right: 1px solid var(--border);
  padding: 18px 12px 14px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.mu-brand { display:flex; align-items:center; gap:10px; padding: 4px 6px 20px; color: var(--text); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.mu-brand-mark { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:10px; background: linear-gradient(135deg, var(--accent-2), #4c1d95); color:#fff; font-size:19px; box-shadow: 0 6px 20px var(--brand-glow); }
.mu-brand-text { display:flex; flex-direction:column; line-height:1.1; }
.mu-brand-text strong { font-size:16px; letter-spacing:-.01em; color:#fff; }
.mu-brand-text em { color: var(--cyan); font-size:9.5px; font-style:normal; letter-spacing:.08em; white-space:nowrap; text-transform:uppercase; margin-top:3px; font-weight:700; }

.mu-nav { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }
.mu-nav-section { color: var(--text-muted); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding: 12px 10px 6px; }
.mu-nav-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color: var(--text-mid); font-size:13px; margin-bottom:2px; transition: background .12s ease, color .12s ease; }
.mu-nav-item:hover { background: rgba(139,92,246,.08); color:#fff; }
.mu-nav-active { background: linear-gradient(90deg, rgba(139,92,246,.22), rgba(139,92,246,.03)); color:#fff; border-left: 2px solid var(--cyan); padding-left: 8px; }
.mu-nav-ico { width: 20px; text-align:center; font-size:14px; }

.mu-user { display:flex; align-items:center; gap:10px; padding: 12px 8px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.mu-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--cyan)); color:#0b0716; font-weight:800; display:grid; place-items:center; font-size:12px; flex-shrink:0; }
.mu-user-meta { flex: 1 1 auto; min-width: 0; }
.mu-user-name { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-user-email { font-size:10.5px; color: var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-logout { color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.mu-logout:hover { background: rgba(248,113,113,0.10); color: var(--err); }

/* -- Topbar + main -- */
.mu-main { display:flex; flex-direction:column; min-width: 0; }
.mu-topbar { display:flex; align-items:center; gap:12px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: rgba(20,16,33,.78); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
.mu-menu { display:none; background:transparent; border:1px solid var(--border); border-radius:6px; padding:6px 10px; color:var(--text); cursor:pointer; }
.mu-topbar-title { flex: 1 1 auto; font-weight:700; font-size:15px; letter-spacing:-.01em; color:#fff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mu-topbar-right { display:flex; gap:10px; align-items:center; }
.mu-btn { display:inline-block; padding: 8px 14px; border-radius:8px; font-size:12.5px; font-weight:700; border:1px solid var(--border); background: var(--bg-2); color: var(--text); cursor:pointer; font-family: inherit; transition: transform .1s ease, filter .1s ease, border-color .1s ease; }
.mu-btn:hover { transform: translateY(-1px); border-color: var(--border-hi); color:#fff; }
.mu-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-color: var(--accent); box-shadow: 0 8px 22px -10px var(--accent); }
.mu-btn-ghost { background:transparent; }
.mu-btn-danger { background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.30); color: #fecaca; }
.mu-btn-sm { padding: 4px 9px; font-size: 11px; }

.mu-content { padding: 24px; max-width: 1280px; width: 100%; }

/* -- Page head -- */
.mu-page-head { margin-bottom: 22px; }
.mu-page-eyebrow { display:inline-flex; align-items:center; gap:6px; color: var(--cyan); font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
.mu-page-eyebrow .dot { width:7px; height:7px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.mu-page-title { font-size: 1.55rem; margin: 8px 0 6px; letter-spacing:-.02em; color:#fff; }
.mu-page-subtitle { color: var(--text-dim); font-size: 13.5px; margin: 0; max-width: 720px; }

/* -- Panels + tables -- */
.mu-panel { background: var(--bg-2); border:1px solid var(--border); border-radius:12px; padding: 16px 18px; margin-bottom: 16px; }
.mu-panel-h { font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-muted); font-weight:800; margin: 0 0 12px; display:flex; align-items:center; justify-content:space-between; }

.mu-table { width:100%; border-collapse:collapse; font-size: 13px; }
.mu-table th, .mu-table td { padding: 9px 10px; text-align:left; border-bottom:1px solid var(--border); vertical-align: middle; }
.mu-table thead th { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-muted); font-weight:800; background: rgba(139,92,246,.05); }
.mu-table .right { text-align:right; }
.mu-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mu-table tr:hover td { background: rgba(139,92,246,.05); }

/* Forms */
.mu-form { display:flex; flex-direction:column; gap: 12px; }
.mu-fld { display:flex; flex-direction:column; gap:5px; }
.mu-fld label { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-dim); font-weight:800; }
.mu-fld input[type=text], .mu-fld input[type=email], .mu-fld input[type=password], .mu-fld select {
  width: 100%; padding: 9px 11px; background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit;
}
.mu-fld input:focus, .mu-fld select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139,92,246,.18); }

.mu-flash { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.mu-flash-ok  { background: rgba(52,211,153,.10);  border: 1px solid rgba(52,211,153,.30);  color: #a7f3d0; }
.mu-flash-err { background: rgba(248,113,113,.10); border: 1px solid rgba(248,113,113,.30); color: #fecaca; }

/* Empty */
.mu-empty { text-align:center; padding: 44px 20px; color: var(--text-dim); }
.mu-empty .big { font-size: 40px; margin-bottom: 8px; }
.mu-empty h3 { color:#fff; font-size:1.05rem; margin: 0 0 6px; }
.mu-empty p { margin: 0 0 16px; font-size: 13px; }

/* Responsive */
@media (max-width: 900px) {
  .mu-app { grid-template-columns: 1fr; }
  .mu-sidebar { position: fixed; top: 0; left: -280px; width: 250px; z-index: 30; transition: left .2s ease; }
  body.mu-sidebar-open .mu-sidebar { left: 0; }
  .mu-menu { display: block; }
  .mu-content { padding: 16px; }
  .mu-topbar { padding: 12px 16px; }
}
@media (max-width: 640px) {
  .mu-topbar { gap: 8px; }
  .mu-topbar-right { gap: 6px; }
  .mu-topbar-right .mu-btn { padding: 7px 9px; font-size: 11.5px; white-space: nowrap; }
}