:root{
  color-scheme:dark;
  --bg:#090b16;--surface:#141827;--surface-2:#191e30;--line:#ffffff16;
  --text:#f9f8ff;--muted:#9299b1;--purple:#a796ff;--coral:#ff9a9d;--mint:#85e7cc;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);overflow-x:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
.backdrop-glow{position:fixed;pointer-events:none;z-index:0;border-radius:50%;filter:blur(100px);opacity:.28}
.backdrop-glow-a{width:420px;height:420px;top:-210px;left:-140px;background:#694ce2}
.backdrop-glow-b{width:360px;height:360px;top:320px;right:-250px;background:#cc4b84}
.app-shell{position:relative;z-index:1;width:min(760px,100%);margin:0 auto;padding:0 20px 44px}
.topbar{height:84px;display:flex;align-items:center;gap:12px}
.brand-icon{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:21px;background:linear-gradient(145deg,#be9dff,#6b5ae8);box-shadow:0 6px 25px #795cff70}
.brand-copy{display:flex;flex-direction:column;line-height:1.1;gap:3px}
.brand-copy strong{font-size:19px;letter-spacing:-.08em;font-weight:850}
.brand-copy strong span{color:#aa96ff}
.brand-copy small{font-size:10px;color:#8e93a8;font-weight:600;letter-spacing:.025em}
.owner-avatar{margin-left:auto;width:36px;height:36px;border:1px solid #b6a2ff55;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#453f72,#242c48);color:#e8deff;font-weight:800;font-size:13px}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:29px 27px 20px;border-radius:27px;border:1px solid #a394ff42;background:radial-gradient(circle at 88% 13%,#4b4b9d 0,#352d6a 30%,transparent 58%),linear-gradient(145deg,#282243,#181d3b 58%,#20394a);box-shadow:0 24px 70px #0007, inset 0 1px #ffffff30}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,#ffffff0b,transparent 40%,#ffffff08)}
.hero-orbit{position:absolute;z-index:-1;border:1px solid #ffffff18;border-radius:50%;pointer-events:none}
.orbit-one{width:360px;height:360px;right:-150px;top:-95px;transform:rotate(20deg)}
.orbit-two{width:210px;height:210px;right:-22px;top:22px;border-color:#ffffff0d}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.overline{display:block;font-size:9px;line-height:1.3;font-weight:850;letter-spacing:.2em;color:#bfb4ff}
.live{font-size:8px;letter-spacing:.09em;font-weight:850;color:#bcf9db;border:1px solid #b9f7dc45;padding:7px 9px;border-radius:40px;background:#13493d70;white-space:nowrap}
.live i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#91f2c0;margin-right:4px;vertical-align:2px;box-shadow:0 0 8px #96ffd0}
.hero h1{font-size:clamp(34px,6vw,53px);line-height:1.06;letter-spacing:-.075em;margin:31px 0 10px;font-weight:850}
.hero h1 span{background:linear-gradient(95deg,#cab8ff,#ffa7b0);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero p{color:#c6c6dd;font-size:12px;line-height:1.5;margin:0 0 27px;max-width:430px}
.up-next{position:relative;display:flex;align-items:center;gap:12px;border:1px solid #ffffff26;background:#ffffff12;backdrop-filter:blur(18px);border-radius:17px;padding:13px 14px}
.up-next-symbol{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;font-size:22px;background:linear-gradient(145deg,#9b87ff,#6e6ce8);box-shadow:0 6px 16px #2e2767a6}
.up-next-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.up-next-content small{color:#b8b1d7;font-size:8px;font-weight:850;letter-spacing:.15em}
.up-next-content strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-next-content>span{font-size:10px;color:#c6cbe1}
.up-next-arrow{margin-left:auto;color:#dbd6fa;font-size:21px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0 25px}
.stat{display:flex;align-items:center;gap:14px;min-height:88px;padding:17px 18px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(155deg,#1a1e31,#141827);box-shadow:0 10px 30px #0002}
.stat-mark{width:39px;height:39px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:25px}
.stat-purple .stat-mark{color:#baa9ff;background:#8a76e828}
.stat-coral .stat-mark{color:#ffaeb0;background:#ff9a9d26}
.stat>div{display:flex;flex-direction:column;gap:1px}
.stat strong{font-size:25px;line-height:1;font-weight:850;letter-spacing:-.08em}
.stat small{font-size:10px;color:#a8adc0;font-weight:600}
.tabs{display:flex;gap:3px;padding:4px;border-radius:15px;background:#151928;border:1px solid #ffffff13;margin-bottom:25px}
.tab{flex:1;border:0;background:transparent;color:#949ab3;border-radius:11px;padding:11px 8px;font-size:11px;font-weight:750;transition:background .18s,color .18s,transform .18s}
.tab.active{background:linear-gradient(130deg,#3e365f,#3a3159);color:#f5f0ff;box-shadow:0 3px 15px #0005,inset 0 1px #ffffff1d}
.tab:active,.primary:active,.add-button:active{transform:scale(.98)}
.panel{display:none;animation:rise .22s ease}
.panel.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:8px;margin:0 1px 17px}
.section-head h2,.dialog-card h2{font-size:23px;line-height:1.12;letter-spacing:-.055em;margin:6px 0 0;font-weight:800}
.add-button,.primary{border:0;color:#fff;font-weight:800;white-space:nowrap;background:linear-gradient(115deg,#9b87fb,#7665ea);box-shadow:0 7px 20px #6d55cf58;transition:filter .15s,transform .15s}
.add-button:hover,.primary:hover{filter:brightness(1.1)}
.add-button{border-radius:12px;padding:10px 13px;font-size:11px}
.add-button span{font-size:17px;vertical-align:-1px;margin-right:1px;font-weight:500}
.primary{border-radius:12px;padding:13px 17px;font-size:12px}
.primary:disabled{opacity:.55;cursor:wait}
.reminder-list{display:grid;gap:9px}
.reminder{display:flex;align-items:center;gap:13px;min-height:75px;padding:12px 13px;background:linear-gradient(120deg,#1a2031,#141927);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 20px #0002}
.date-tile{flex:none;display:grid;place-items:center;align-content:center;width:49px;height:49px;border-radius:12px;color:#d7caff;background:#7763d12b}
.date-tile strong{font-size:19px;line-height:1;font-weight:800;letter-spacing:-.06em}
.date-tile small{font-size:9px;text-transform:uppercase;font-weight:750;margin-top:3px}
.reminder-info{min-width:0;flex:1}
.reminder-title{font-size:12px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
.reminder-meta{font-size:10px;color:#9aa2ba;margin-top:5px}
.reminder-meta b{color:#91e6ca;font-weight:750}
.icon-button,.close-button{display:grid;place-items:center;flex:none;border:1px solid #ffffff1d;background:#ffffff0b;color:#9da6c1;border-radius:10px;width:30px;height:30px;font-size:18px;line-height:1}
.icon-button:hover,.close-button:hover{color:#ffb8bd;border-color:#ff929a60}
.empty{background:#151a29;border:1px dashed #ffffff2c;border-radius:17px;text-align:center;color:#9aa1b8;padding:34px 18px;font-size:12px}
.empty .symbol{display:block;font-size:28px;color:#b5a0ff;margin-bottom:7px}
.pill-count{border:1px solid #a499fd41;background:#8376e523;color:#d5caff;border-radius:20px;padding:7px 10px;font-size:10px;font-weight:750;white-space:nowrap}
.user-list{display:grid;gap:9px}
.user-item{display:flex;align-items:center;gap:12px;min-height:69px;padding:11px 13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,#1b2031,#151a29)}
.user-avatar{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:13px;color:#f5e6ff;font-size:15px;font-weight:800;background:linear-gradient(140deg,#795fd0,#bb739f)}
.user-item:nth-child(3n+2) .user-avatar{background:linear-gradient(140deg,#3f8d9a,#6d69c9)}
.user-item:nth-child(3n+3) .user-avatar{background:linear-gradient(140deg,#b16c8e,#a77a5d)}
.user-info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.user-info strong{font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info a,.user-info span{font-size:11px;color:#b3a4ff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info a:hover{text-decoration:underline}
.user-id{font-size:10px;color:#78829d;white-space:nowrap}
.broadcast-card{position:relative;overflow:hidden;padding:24px;border-radius:20px;background:linear-gradient(145deg,#282344,#1b2033 42%,#171d2c);border:1px solid #7c6ebc4a;box-shadow:0 18px 48px #0004}
.broadcast-visual{display:grid;place-items:center;position:relative;width:54px;height:54px;margin-bottom:17px;border-radius:16px;color:#fff;background:linear-gradient(140deg,#b995ff,#7d6aef);font-size:25px;box-shadow:0 12px 32px #8661de55}
.broadcast-visual i{position:absolute;border:1px solid #cfb9ff55;border-radius:50%;width:75px;height:75px;left:-10px;top:-10px;pointer-events:none}
.broadcast-visual i:last-child{width:104px;height:104px;left:-25px;top:-25px;border-color:#cfb9ff28}
.broadcast-card p{font-size:15px;font-weight:700;letter-spacing:-.02em;margin:0 0 23px}
.broadcast-card p strong{color:#c0adff}
label{display:block;font-size:11px;color:#c8cce0;font-weight:750;margin:0 0 9px}
textarea,input{width:100%;border:1px solid #ffffff27;border-radius:12px;background:#0b1020cc;color:#f9f8ff;padding:13px 14px;outline:0;font-size:12px;line-height:1.5}
textarea{resize:vertical;min-height:134px}
textarea::placeholder,input::placeholder{color:#69728d}
textarea:focus,input:focus{border-color:#a896ff;box-shadow:0 0 0 3px #a896ff25}
.form-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;color:#9399b0;font-size:10px}
.form-footer .primary span{font-size:16px;margin-left:10px}
.access{margin-top:14px;border:1px solid #b7a6ff4d;background:#29233d;color:#eee8ff;padding:17px;border-radius:15px;font-size:12px;line-height:1.5}
dialog{width:min(440px,calc(100% - 18px));max-height:calc(100vh - 20px);border:0;padding:0;background:transparent;color:var(--text)}
dialog::backdrop{background:#02030bc9;backdrop-filter:blur(9px)}
.dialog-card{padding:25px;background:linear-gradient(145deg,#25223c,#171d2c);border:1px solid #a092ec60;border-radius:23px;box-shadow:0 25px 80px #000a}
.dialog-top{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:21px}
.dialog-card label{margin-top:15px}
.dialog-card .hint{color:#9fa5bb;font-size:10px;line-height:1.5;margin:12px 0 20px}
.full{width:100%;display:flex;justify-content:space-between;align-items:center}
#toast{position:fixed;left:50%;bottom:calc(21px + env(safe-area-inset-bottom));z-index:10;max-width:calc(100vw - 30px);padding:12px 17px;border-radius:12px;background:#e8e0ff;color:#26213b;box-shadow:0 15px 50px #0009;font-size:11px;font-weight:800;text-align:center;opacity:0;transform:translate(-50%,12px);transition:.2s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:490px){
  .app-shell{padding:0 16px 34px}
  .topbar{height:72px}
  .hero{padding:24px 21px 18px;border-radius:23px}
  .hero h1{font-size:35px;margin-top:26px}
  .hero p{font-size:11px;margin-bottom:23px}
  .live{font-size:7px;padding:6px 7px}
  .overline{font-size:8px}
  .up-next{padding:11px}
  .up-next-symbol{width:36px;height:36px}
  .stats{gap:9px;margin-bottom:22px}
  .stat{padding:13px;min-height:77px;gap:10px;border-radius:15px}
  .stat-mark{width:33px;height:33px;font-size:21px}
  .stat strong{font-size:22px}
  .stat small{font-size:9px}
  .section-head h2{font-size:21px}
  .reminder{padding:11px}
  .user-item{padding:10px}
  .user-id{font-size:9px}
}
@media(max-width:345px){.live{display:none}.hero h1{font-size:32px}.stat{gap:7px;padding:10px}.stat-mark{width:28px;height:28px}}