/* ARWR MUSIC — Premium dark SaaS theme */
:root{
  --bg:#08090C; --sidebar:#0D0F14; --card:#12151C; --border:#252A35;
  --text:#F5F7FA; --muted:#8B93A5; --silver:#C9CFDA; --accent:#8F9DFF; --accent-ink:#0B0D14;
  --ok:#4ADE80; --warn:#F5B84B; --bad:#F26D6D; --info:#7DB4FF;
  --radius:10px; --radius-sm:7px; --sidebar-w:248px; --sidebar-w-collapsed:68px;
  --font:'Inter','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.1rem} h3{font-size:1rem}
p{margin:.4em 0 1em}
.muted{color:var(--muted)} .small{font-size:.82rem} .center{text-align:center} .num{text-align:right;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
i[data-lucide],svg.lucide{width:18px;height:18px;flex:none}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--text);font-weight:800;letter-spacing:.06em}
.brand:hover{text-decoration:none}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--text);color:var(--bg);font-weight:800}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .95rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--text);font:600 .9rem var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{text-decoration:none;border-color:#3a4151;background:#171b24}
.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)} .btn-primary:hover{background:#fff;border-color:#fff}
.btn-ghost{background:transparent}
.btn-danger{color:var(--bad);border-color:#4a2a2e} .btn-danger:hover{background:#221419}
.btn-sm{padding:.3rem .6rem;font-size:.8rem} .btn-lg{padding:.8rem 1.4rem;font-size:1rem} .btn-block{width:100%}

/* Forms */
.form{display:grid;gap:1rem} .form-wide{max-width:860px}
label{display:grid;gap:.35rem;font-size:.85rem;color:var(--silver);font-weight:500}
input,select,textarea{width:100%;padding:.62rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:#0C0E13;color:var(--text);font:400 .92rem var(--font)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input:disabled{opacity:.6}
.filters select,.filters input,.filters-bar input,.filters-bar select{width:auto}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin:0}
legend{padding:0 .4rem;color:var(--silver);font-size:.85rem}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.check{display:flex;gap:.6rem;align-items:flex-start;color:var(--text)} .check input{width:auto;margin-top:.25rem}
.check span{display:grid;gap:.1rem}

/* Cards, badges, alerts */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.15rem 1.25rem;margin-bottom:1rem}
.badge{display:inline-block;padding:.12rem .55rem;border-radius:99px;font-size:.72rem;font-weight:600;border:1px solid var(--border)}
.badge-ok{color:var(--ok);border-color:#1f4a31;background:#0f1e16}
.badge-warn{color:var(--warn);border-color:#55411c;background:#211a0c}
.badge-bad{color:var(--bad);border-color:#55262a;background:#211215}
.badge-info{color:var(--info);border-color:#27406a;background:#0e1829}
.badge-muted{color:var(--muted)}
.alert{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:1rem;background:var(--card)}
.alert-ok{border-color:#1f4a31;color:#b9f3cf} .alert-bad{border-color:#55262a;color:#ffc4c4}
.alert-warn{border-color:#55411c;color:#ffe2a8} .alert-info{border-color:#27406a;color:#cfe3ff}
.callout{border-color:#3a4378}
.copy-row{display:flex;gap:.6rem}
.tag{font-style:normal;margin-left:auto;font-size:.62rem;padding:.05rem .4rem;border-radius:99px;border:1px solid var(--border);color:var(--muted)}

/* Empty states */
.empty{display:grid;justify-items:center;text-align:center;gap:.3rem;padding:2rem 1rem;color:var(--muted)}
.empty i[data-lucide]{width:28px;height:28px;color:var(--muted)} .empty.small{padding:1rem}

/* Tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th{text-align:left;color:var(--muted);font-weight:500;font-size:.78rem;padding:.55rem .6rem;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:.7rem .6rem;border-bottom:1px solid #1b1f29;vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .actions{display:flex;gap:.4rem;justify-content:flex-end;white-space:nowrap}
.pager{display:flex;justify-content:space-between;align-items:center;padding-top:.8rem;gap:1rem}
.filters-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;padding:.8rem 1rem}
.filters-bar input[type=search]{flex:1;min-width:200px}

/* App shell */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;transition:grid-template-columns .2s}
.shell.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}
.sidebar-head{padding:1.1rem 1.1rem .9rem}
.nav{display:grid;gap:2px;padding:.4rem .6rem;flex:1;align-content:start}
.nav-link{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--muted);font-weight:500;font-size:.9rem;white-space:nowrap}
.nav-link:hover{background:#141821;color:var(--text);text-decoration:none}
.nav-link.active{background:#171b26;color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
.sidebar-foot{padding:1rem 1.1rem;font-size:.66rem;letter-spacing:.12em}
.shell.collapsed .brand-text,.shell.collapsed .nav-link span,.shell.collapsed .tag,.shell.collapsed .sidebar-foot{display:none}
.shell.collapsed .nav-link{justify-content:center} .shell.collapsed .sidebar-head{padding-inline:.6rem;text-align:center}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:20}
.crumbs{display:flex;gap:.5rem;align-items:center;color:var(--muted);font-size:.85rem;white-space:nowrap}
.crumbs a{color:var(--muted)} .crumbs .sep{opacity:.5} .crumbs span:last-child{color:var(--text)}
.search{position:relative;flex:1;max-width:420px;margin-left:auto}
.search i{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.search input{padding-left:2.2rem} .search-spacer{flex:1}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--silver);cursor:pointer}
.icon-btn:hover{color:var(--text);text-decoration:none;border-color:#3a4151}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer} .menu summary::-webkit-details-marker{display:none}
.avatar-btn{display:flex;align-items:center;gap:.6rem;padding:.25rem .5rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card)}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#232838;color:var(--text);font-size:.75rem;font-weight:700}
.who{display:grid;line-height:1.15;text-align:left} .who strong{font-size:.82rem} .who small{color:var(--muted);font-size:.7rem}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:230px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.4rem;display:grid;gap:2px;z-index:40}
.menu-pop a,.menu-btn{display:flex;gap:.6rem;align-items:center;padding:.55rem .6rem;border-radius:var(--radius-sm);color:var(--text);background:none;border:0;width:100%;font:500 .88rem var(--font);cursor:pointer;text-align:left}
.menu-pop a:hover,.menu-btn:hover{background:#171b26;text-decoration:none}
.menu-info{padding:.5rem .6rem;display:grid;gap:.35rem;border-bottom:1px solid var(--border);margin-bottom:.3rem}
.content{padding:1.5rem 1.4rem 3rem;max-width:1400px;width:100%}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.page-head h1{margin:0}

/* Dashboard */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1rem}
.stats .card{margin:0}
.stat-top{display:flex;justify-content:space-between;align-items:center;font-size:.82rem}
.stat-top i{color:var(--muted)}
.stat-value{font-size:1.6rem;font-weight:700;margin:.35rem 0 .1rem;font-variant-numeric:tabular-nums}
.grid-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;align-items:start}
.grid-main .card{margin-bottom:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card-head{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem}
.card-head h2{margin:0} .filters{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.chart-box{position:relative;min-height:200px}
.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);background:rgba(18,21,28,.8);border-radius:var(--radius-sm)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.timeline li{display:grid;gap:.1rem;padding:.55rem 0;border-bottom:1px solid #1b1f29} .timeline li:last-child{border:0}
.grid-main+.card,.stats+.grid-main{margin-top:1rem}
.grid-main{margin-bottom:1rem}

/* Toasts & modal */
.toasts{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;z-index:100}
.toast{background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);padding:.7rem 1rem;border-radius:var(--radius-sm);min-width:240px;animation:rise .2s ease}
.toast.ok{border-left-color:var(--ok)} .toast.bad{border-left-color:var(--bad)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
dialog{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;max-width:420px;width:calc(100% - 2rem)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog .row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.skeleton{background:linear-gradient(90deg,#161a22 25%,#1c212b 50%,#161a22 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius-sm)}
@keyframes sk{to{background-position:-200% 0}}

/* Public site */
body.public{background:var(--bg)}
.pub-header{position:sticky;top:0;z-index:30;background:rgba(8,9,12,.94);border-bottom:1px solid var(--border)}
.pub-wrap{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.pub-header .pub-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.pub-nav{display:flex;align-items:center;gap:1.4rem}
.pub-nav>a{color:var(--silver);font-size:.9rem;font-weight:500} .pub-nav>a:hover{color:var(--text);text-decoration:none}
.pub-actions{display:flex;gap:.6rem;margin-left:.6rem}
.pubnav-toggle{display:none} .pubnav-burger{display:none;cursor:pointer;padding:.5rem}
.pubnav-burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0}
.pub-flash{max-width:520px;margin:1rem auto}
.hero{padding:6rem 0 5rem;border-bottom:1px solid var(--border)}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.025em;margin:.3em 0}
.eyebrow{color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .6rem}
.lead{max-width:640px;font-size:1.1rem;color:var(--silver)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.section{padding:4.5rem 0} .section.alt{background:var(--sidebar);border-block:1px solid var(--border)}
.section h2{font-size:1.7rem;margin-bottom:1.2rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.narrow{max-width:760px;margin-inline:auto}
.card i[data-lucide]{color:var(--accent);margin-bottom:.4rem;width:22px;height:22px}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:.8rem}
.steps li{counter-increment:s;display:grid;gap:.15rem;padding:1rem 1rem 1rem 3.4rem;position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.steps li::before{content:counter(s);position:absolute;left:1rem;top:1rem;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.faq{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;margin-bottom:.6rem}
.faq summary{cursor:pointer;font-weight:600} .faq p{margin:.6rem 0 0}
.pub-footer{border-top:1px solid var(--border);padding:2.2rem 0;background:var(--sidebar)}
.pub-foot-grid{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot-links{display:flex;gap:1.2rem;flex-wrap:wrap} .foot-links a{color:var(--silver);font-size:.88rem}
.center-page{min-height:70vh;display:grid;place-items:center;padding:2rem 1rem}
.auth-card{width:100%;max-width:420px}
.center-card{text-align:center;max-width:420px}
.big-code{font-size:3.4rem;font-weight:800;color:var(--silver)}

/* Responsive */
.scrim{display:none}
@media (max-width:1000px){.grid-main,.grid-2,.two-col{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}
@media (max-width:820px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);transform:translateX(-100%);transition:transform .2s}
  .shell.collapsed .brand-text,.shell.collapsed .nav-link span,.shell.collapsed .sidebar-foot{display:revert}
  .shell.collapsed .nav-link{justify-content:flex-start}
  .shell.open .sidebar{transform:none}
  .shell.open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25}
  .topbar{padding:.6rem .9rem} .content{padding:1rem .9rem 3rem}
  .who,.crumbs .sep,.crumbs span:last-child{display:none}.crumbs a{display:none}
  .search{max-width:none}
  .pubnav-burger{display:block}
  .pub-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;padding:1rem 1.25rem;gap:1rem}
  .pubnav-toggle:checked~.pub-nav{display:flex}
  .hero{padding:3.5rem 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}