:root{--bg:#090c15;--panel:#131723;--panel2:#191d2b;--line:#292d3d;--ink:#f7f7fc;--muted:#9294ab;--purple:#9e78ff;--purple-light:#c9b6ff;--cyan:#59e7db;--green:#6ae6ae;--danger:#ff9c9c;--radius:17px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.52}a{text-decoration:none;color:inherit}input,select{outline:none}input:focus,select:focus{border-color:var(--purple)!important;box-shadow:0 0 0 4px #a17dff1a}button:focus-visible,a:focus-visible{outline:2px solid var(--purple);outline-offset:3px}.hidden{display:none!important}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.3px;color:var(--purple-light)}.muted{color:var(--muted)}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#b9a0ff,#7148d7);box-shadow:0 12px 27px #5d3bce40;color:#121020;font-weight:1000;font-size:23px;letter-spacing:-2px}.brand-mark span{color:#fff}.brand strong{display:block;font-size:14px;letter-spacing:1.25px;font-weight:850}.brand small{display:block;margin-top:4px;color:#8a8a9e;font-size:8px;letter-spacing:2px;font-weight:750}.signal,.green-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#6ceab0;box-shadow:0 0 0 4px #6ceab015,0 0 14px #68ffb588}.primary-button,.secondary-button{border-radius:11px;min-height:41px;padding:11px 17px;border:1px solid transparent;font-weight:740;transition:transform .16s,border .16s,background .16s}.primary-button{background:linear-gradient(115deg,#b8a0ff,#8f6af2);color:#161026;box-shadow:0 10px 24px #8d68d02b}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.secondary-button{background:#212435;border-color:#3e4056;color:#eeeef8}.secondary-button:hover{border-color:#8d77c0;background:#302944}.field-label{display:block;font-size:12px;font-weight:750;margin:17px 0 10px;color:#c4c4d4}.notice{font-size:12px;margin-top:12px;min-height:16px;color:#ffaaa4;opacity:0}.notice.visible{opacity:1}
/* Owner login */
.login-body{min-height:100svh;background:#0c0d16}.login-shell{min-height:100svh;display:grid;grid-template-columns:minmax(460px,1.03fr) minmax(430px,.97fr);max-width:2000px;margin:auto}.login-showcase{position:relative;overflow:hidden;padding:50px 7.5%;background:radial-gradient(ellipse at 72% 48%,#402973 0,transparent 40%),radial-gradient(circle at 7% 100%,#191d55,transparent 42%),linear-gradient(137deg,#121627,#11111e 72%);border-right:1px solid #29263b}.login-showcase:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(90deg,transparent,#0007);pointer-events:none}.login-showcase>.brand{position:relative;z-index:2}.showcase-copy{position:relative;z-index:2;margin-top:clamp(95px,18vh,175px);max-width:450px}.showcase-copy .eyebrow{display:inline-flex;align-items:center;gap:13px}.showcase-copy h1{font-size:clamp(46px,5.2vw,81px);line-height:1.05;letter-spacing:-3.8px;margin:26px 0 21px;font-weight:850}.showcase-copy h1 em{font-style:normal;background:linear-gradient(105deg,#b39dff 5%,#7ae4de 100%);color:transparent;background-clip:text}.showcase-copy p{max-width:365px;color:#a5a5bd;line-height:1.9;font-size:14px}.showcase-features{display:flex;flex-wrap:wrap;gap:11px;margin-top:31px}.showcase-features span{border:1px solid #444058;border-radius:100px;padding:9px 13px;background:#171725aa;color:#c8c1dd;font-size:11px;font-weight:650}.hero-vinyl{position:absolute;width:min(36vw,520px);aspect-ratio:1;right:-22%;top:24%;pointer-events:none;opacity:.8;transform:rotate(-19deg)}.vinyl-disc{width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle at center,#0c0c13 0px,#171825 2px,#2b2840 3px,#10101b 5px),conic-gradient(#10101a,#595078,#151525);border:2px solid #8c72c255;box-shadow:0 0 100px #a28aff24,inset 0 0 70px #151421,0 35px 60px #06060b;display:grid;place-items:center;animation:spin 24s linear infinite}.vinyl-disc:before{content:"";position:absolute;width:55%;height:55%;border-radius:50%;background:radial-gradient(circle,#b3a2ff33,transparent 70%);filter:blur(12px)}.vinyl-center{width:28%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1.45;font-size:12px;font-weight:900;letter-spacing:2px;color:#1d1531;background:radial-gradient(circle at 30% 30%,#decaff,#9d7fe5);box-shadow:0 0 0 5px #c2acff33}.vinyl-beam{height:4px;width:62%;background:linear-gradient(90deg,transparent,#a78dffbb);position:absolute;right:4%;top:29%;transform:rotate(-35deg);filter:blur(1px)}@keyframes spin{to{transform:rotate(360deg)}}.showcase-footer{position:absolute;bottom:42px;left:7.5%;font-size:10px;letter-spacing:2px;color:#7b7d9d}.showcase-footer span{padding:0 12px;color:var(--cyan)}.login-form-wrap{display:grid;place-items:center;background:radial-gradient(circle at 95% 0,#18132a,transparent 34%),#0e101a;padding:55px}.login-form-inner{width:100%;max-width:390px}.login-icon{width:54px;height:54px;border:1px solid #403654;border-radius:16px;display:grid;place-items:center;background:#201c33;color:#b7a0ff;margin-bottom:36px}.login-icon svg{width:24px}.login-form-inner h2{font-size:37px;letter-spacing:-1.5px;margin:13px 0 10px}.login-form-inner p{line-height:1.8;color:var(--muted);margin:0 0 34px}.login-form-inner label{font-weight:760;font-size:12px;display:block;margin-bottom:11px}.password-box{position:relative}.password-box input{width:100%;background:#1b1e2b;color:white;border:1px solid #35374b;border-radius:12px;height:52px;padding:0 72px 0 16px}.password-box button{position:absolute;right:13px;top:14px;border:none;background:none;color:#b7a2f1;font-size:10px;letter-spacing:1px;font-weight:850}.large-button{margin-top:19px;width:100%;height:53px;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.large-button span{font-size:20px}.login-safety{border-top:1px solid #292c39;padding-top:26px;margin-top:51px;font-size:11px;color:#85869e}.login-safety span{font-size:18px;padding-right:8px;color:var(--purple)}
/* Dashboard shell */
.app-shell{display:grid;grid-template-columns:255px minmax(0,1fr);min-height:100vh}.sidebar{background:#10131e;border-right:1px solid #282c3b;padding:29px 19px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand-side{padding:0 8px 38px}.sidebar-label{font-size:9px;font-weight:850;letter-spacing:2px;color:#696d83;margin:15px 12px}.side-nav{display:grid;gap:5px}.side-nav a{display:flex;align-items:center;gap:14px;padding:13px 13px;border-radius:10px;color:#9598ad;font-size:12px;font-weight:675;position:relative}.side-nav a:hover{background:#1a1e30;color:white}.side-nav a.active{background:linear-gradient(90deg,#302849,#211c35);color:#d8cdff}.side-nav .nav-ico{font-size:19px;min-width:21px;text-align:center}.nav-pip{position:absolute;right:12px;background:#b9a3ff;width:5px;height:5px;border-radius:50%}.nav-count{margin-left:auto;background:#342a47;color:#c6b4ff;font-size:10px;border-radius:6px;padding:3px 7px}.side-spacer{flex:1}.sidebar-support{display:flex;align-items:center;gap:12px;margin:0 7px 21px;background:#191e29;padding:15px;border:1px solid #303545;border-radius:12px}.sidebar-support strong{font-size:11px;display:block}.sidebar-support small{display:block;margin-top:4px;color:#8b8fa5;font-size:10px}.logout{background:none;border:0;color:#a7a5b9;text-align:left;padding:14px 17px;font-weight:680;font-size:12px}.logout span{font-size:19px;margin-right:16px}.logout:hover{color:#fff}.main-content{min-width:0;background:radial-gradient(ellipse at 65% 0,#241a3929,transparent 45%),#0d101a}.topbar{height:76px;padding:0 48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #282b38}.breadcrumbs{font-size:12px;color:#878ba2}.breadcrumbs span{margin:0 12px;color:#484a5b}.breadcrumbs b{color:#e2e0ed}.top-right{display:flex;align-items:center;gap:20px}.status{border:1px solid #293e3b;border-radius:100px;color:#97d8bf;padding:10px 13px;display:flex;align-items:center;gap:11px;letter-spacing:1px;font-size:9px;font-weight:760;background:#12241f88}.owner-avatar{height:35px;width:35px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#554288,#a892e6);font-weight:800}.page-content{max-width:1500px;padding:45px 48px 25px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.page-head h1{font-size:34px;letter-spacing:-1.5px;margin:11px 0 9px;line-height:1.2}.purple-punctuation{color:#b499ff}.page-head p,.section-row p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.live-pill{border:1px solid #393451;background:#211e30;padding:13px 15px;border-radius:11px;display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.8px;font-weight:750;color:#d7cdf9}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.metric-card{background:linear-gradient(147deg,#1b1e2d,#131722);border:1px solid #2b2e40;border-radius:15px;padding:21px 21px 22px;position:relative;overflow:hidden}.metric-card:first-child:after{content:"";position:absolute;width:105px;height:105px;border-radius:50%;background:#a281ff18;filter:blur(28px);right:-25px;top:-20px}.metric-top{display:flex;justify-content:space-between;align-items:center;color:#9998b3;font-size:9px;letter-spacing:1.1px;font-weight:790}.metric-top i{font-size:18px;color:#b29dff;font-style:normal;font-weight:450}.metric-card b{font-size:39px;letter-spacing:-2px;display:block;padding-top:14px;line-height:1.1}.metric-card small{font-size:10px;color:#878a9f;display:block;margin-top:12px}.section-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:44px;margin-bottom:21px}.section-row h2,.panel-heading h2{font-size:21px;letter-spacing:-.6px;margin:10px 0 5px}.panel{border:1px solid #292d3e;border-radius:15px;background:#151925;overflow:hidden}.panel-tabs{display:flex;align-items:center;gap:3px;padding:15px 19px 0;border-bottom:1px solid #292d3e;overflow-x:auto}.tab{display:flex;align-items:center;gap:10px;background:none;border:none;color:#9699b0;font-size:11px;font-weight:780;padding:0 16px 15px;border-bottom:2px solid transparent;white-space:nowrap}.tab.active{color:#cab9ff;border-bottom-color:#ad91ff}.tab span{color:#8989a0;background:#222535;border-radius:6px;padding:3px 7px;font-size:10px}.table-wrap{overflow-x:auto}.groups-table{border-collapse:collapse;width:100%;text-align:left}.groups-table th{color:#797f96;font-size:9px;letter-spacing:1.3px;font-weight:790;padding:19px 24px;border-bottom:1px solid #282c3b;white-space:nowrap}.groups-table td{padding:19px 24px;border-bottom:1px solid #242837;color:#d7d7e2;font-size:11px}.groups-table tr:last-child td{border-bottom:0}.group-cell{display:flex;align-items:center;gap:12px}.group-avatar{height:37px;width:37px;min-width:37px;display:grid;place-items:center;border:1px solid #4f416e;border-radius:10px;background:#332b4b;color:#dac9ff;font-weight:850;font-size:15px}.group-label strong{display:block;font-size:12px;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-label small{display:block;margin-top:5px;color:#797e96;font-size:10px;font-variant-numeric:tabular-nums}.access-badge{font-size:10px;font-weight:750;text-transform:capitalize;display:inline-block;padding:7px 10px;border-radius:7px;background:#2b2938;color:#acb0c7}.access-badge.approved{background:#18352d;color:#8de2b6}.access-badge.pending{background:#3a3124;color:#f5cb88}.access-badge.revoked,.access-badge.rejected{background:#39272e;color:#f2acb6}.track-cell{display:flex;align-items:center;gap:9px;max-width:220px}.track-cell span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.play-indicator{color:var(--cyan);font-size:9px}.muted-text{color:#82869e}.action-buttons{display:flex;gap:7px}.tiny-button{border:1px solid #3b4054;border-radius:7px;background:#232739;color:#d6d6e9;padding:8px 10px;font-size:10px;white-space:nowrap;font-weight:750}.tiny-button.approve{background:#332c52;color:#d8ccff;border-color:#5a467b}.tiny-button.reject{background:#242432;color:#b2b3c6}.tiny-button:hover{filter:brightness(1.16)}.empty-state{text-align:center;color:#8f92a8!important;padding:35px!important}.bottom-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:21px}.player-panel,.activity-panel{padding:24px}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.panel-heading h2{margin-bottom:0}.mini-live{border:1px solid #32433f;border-radius:50px;padding:8px 11px;font-size:9px;letter-spacing:1px;color:#7de0bc;font-weight:800;display:flex;align-items:center;gap:9px}.player-panel .field-label{margin:12px 0 8px}.player-panel select,.player-panel input[type=url],.modal-card input{width:100%;height:43px;color:#dddbe9;background:#1b1f2d;border:1px solid #343749;border-radius:10px;padding:0 13px}.player-panel select{cursor:pointer}.player-now{display:flex;align-items:center;gap:13px;background:linear-gradient(110deg,#29213b,#1c2230);border:1px solid #40364f;border-radius:12px;padding:15px;margin-top:16px;min-height:90px}.cover-art{width:57px;height:57px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#bba4ff,#6959b1);color:#1a1731;font-size:31px;flex-shrink:0;box-shadow:0 10px 22px #5e419633}.player-details{min-width:0;flex:1}.player-details small{font-size:9px;color:#b4aacd;letter-spacing:1px}.player-details strong{display:block;font-size:13px;margin:8px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-details>span{display:block;color:#aaa2be;font-size:10px}.audio-bars{display:flex;align-items:center;gap:3px;height:29px}.audio-bars i{width:3px;height:9px;background:#ad9bfb;border-radius:2px;opacity:.55}.player-now.is-playing .audio-bars i{animation:bars .75s ease-in-out infinite alternate}.audio-bars i:nth-child(2){animation-delay:.2s;height:19px}.audio-bars i:nth-child(3){animation-delay:.3s;height:26px}.audio-bars i:nth-child(4){animation-delay:.12s;height:13px}.audio-bars i:nth-child(5){animation-delay:.45s;height:19px}@keyframes bars{to{height:5px;opacity:1}}.play-fields{margin-top:21px}.play-button-row{display:flex;gap:9px;margin-top:10px}.play-button-row button{flex:1}.transport{display:flex;align-items:center;gap:9px;border-top:1px solid #292d3e;margin-top:20px;padding-top:20px}.transport>button{background:#222536;border:1px solid #37394d;color:#cfc8ea;border-radius:10px;min-width:39px;height:37px}.transport>button:hover{background:#3a2d52}.volume-control{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:125px}.volume-control span{color:#8f93a7;font-size:9px;font-weight:750}.volume-control input{width:70px;accent-color:#ae90ff}.volume-control button{border:0;background:none;color:#b9a0ff;font-weight:900}.activity-list{display:grid;gap:0}.activity-item{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid #292c3b}.activity-icon{background:#2a2541;color:#b9a0ff;border-radius:10px;width:35px;height:35px;min-width:35px;display:grid;place-items:center;font-size:17px}.activity-info{min-width:0}.activity-info strong{font-size:12px}.activity-info p{margin:6px 0;color:#9394aa;font-size:11px;line-height:1.45;overflow-wrap:anywhere}.activity-info time{font-size:10px;color:#696e88}.empty-activity{color:#8d91a7;font-size:12px}.activity-foot{padding-top:15px;color:#696f84;font-size:10px}.main-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #292d3b;margin-top:33px;padding:22px 0 4px;color:#777b93;font-size:10px}.main-footer b{color:#ad9afd;margin-left:6px}.footer-dot{color:#81d9b2;padding:0 7px}
/* Dialog and toast */
.modal-backdrop{position:fixed;inset:0;background:#020306d6;backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;z-index:50}.modal-card{width:100%;max-width:460px;background:#191c2a;border:1px solid #48405f;border-radius:19px;padding:28px 30px;box-shadow:0 30px 100px #000a}.modal-top{display:flex;justify-content:space-between}.modal-top button{border:0;background:none;color:#aea8c3;font-size:28px}.modal-card h2{font-size:25px;letter-spacing:-.8px;margin:12px 0}.modal-card p{font-size:12px;color:#a0a0b5;line-height:1.7}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.toast{position:fixed;bottom:23px;right:23px;max-width:min(400px,90vw);background:#31274d;color:#e8dfff;border:1px solid #7560aa;border-radius:12px;padding:17px 20px;box-shadow:0 14px 45px #030207aa;z-index:100;font-size:12px;line-height:1.5}.toast.error{background:#442b35;color:#ffcfce;border-color:#a65c70}
@media(max-width:1200px){.app-shell{grid-template-columns:215px minmax(0,1fr)}.sidebar{padding:23px 12px}.topbar{padding:0 27px}.page-content{padding:40px 27px 20px}.metric-grid{gap:10px}.metric-card{padding:18px}.groups-table td,.groups-table th{padding:15px 14px}.bottom-grid{grid-template-columns:1fr 1fr}.player-panel,.activity-panel{padding:20px}}
@media(max-width:900px){.app-shell{grid-template-columns:70px minmax(0,1fr)}.sidebar{padding:24px 11px}.brand-side{padding:0 2px 27px}.brand-side>div:last-child,.sidebar-label,.side-nav a:not(.active) .nav-count,.nav-pip,.sidebar-support,.logout{font-size:0}.brand-side .brand-mark{height:41px;width:41px}.side-nav a{justify-content:center;padding:13px 8px;font-size:0;gap:0}.side-nav .nav-ico{font-size:20px}.sidebar-support{padding:11px;justify-content:center}.sidebar-support>div{display:none}.logout{padding:12px;text-align:center}.logout span{font-size:22px;margin:0}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.login-showcase{display:none}.login-form-wrap{min-height:100svh}}
@media(max-width:600px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid #282c3b;padding:11px 16px}.brand-side{padding:0}.brand-side .brand-mark{height:35px;width:35px;font-size:20px}.side-nav{display:flex}.side-nav a{padding:8px}.side-nav .nav-ico{font-size:18px}.sidebar-label,.side-spacer,.sidebar-support{display:none}.logout{padding:8px}.topbar{height:60px;padding:0 18px}.status{font-size:0;padding:9px}.page-content{padding:27px 16px}.page-head{align-items:flex-start;gap:8px}.page-head h1{font-size:27px}.live-pill{font-size:0;padding:11px}.metric-grid{gap:9px}.metric-card{padding:16px}.metric-card b{font-size:32px}.metric-top{font-size:8px}.section-row{align-items:flex-start;flex-direction:column}.section-row .secondary-button{align-self:flex-end}.panel-tabs{padding-left:10px}.tab{padding:0 10px 12px}.groups-table{min-width:720px}.bottom-grid{margin-top:15px}.main-footer{flex-direction:column;gap:7px}.login-form-wrap{padding:30px 22px}.transport{flex-wrap:wrap}.volume-control{margin-left:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

.topbar .status.offline{border-color:#654350;color:#d4a1a8;background:#2b2028}.topbar .status.offline .signal{background:#e7a5b2;box-shadow:none}