@font-face{font-family:Roboto;src:url('/portal/assets/fonts/Roboto.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{color-scheme:light;--bg:#fafafa;--paper:#fff;--paper2:#f5f5f5;--text:#212121;--muted:#757575;--primary:#3f51b5;--primary-dark:#303f9f;--accent:#ff4081;--line:#e0e0e0;--hover:rgba(0,0,0,.045);--selected:#e8eaf6;--error:#d32f2f;--bar:#3f51b5;--shadow:0 2px 4px rgba(0,0,0,.16),0 2px 3px rgba(0,0,0,.09);--shadow-up:0 4px 8px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.13)}
:root[data-theme=dark]{color-scheme:dark;--bg:#303030;--paper:#424242;--paper2:#383838;--text:#fff;--muted:#bdbdbd;--primary:#9fa8da;--primary-dark:#7986cb;--line:#565656;--hover:rgba(255,255,255,.06);--selected:#515a76;--error:#ef9a9a;--bar:#303f9f}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 Roboto,Arial,sans-serif;letter-spacing:.1px;color:var(--text);background:var(--bg);transition:background-color .25s,color .25s}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}button:disabled{opacity:.42;cursor:default}button,a{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.brand{display:flex;align-items:center;gap:13px;font-size:20px;font-weight:400;letter-spacing:.2px;white-space:nowrap}.logo-mark{display:flex;align-items:center;justify-content:center;gap:3px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.17);flex:0 0 auto}.logo-mark i{display:block;width:3px;height:12px;border-radius:1px;background:currentColor}.logo-mark i:nth-child(2){height:20px}.logo-mark i:nth-child(3){height:16px}.logo-mark i:nth-child(4){height:9px}.loading{height:100vh;display:grid;align-content:center;justify-items:center;gap:20px;color:var(--muted)}.loading:before{content:'';width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loading .logo-mark{display:none}.loading p{font-size:14px}.auth-layout{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:100px 24px 48px}.auth-story{position:fixed;z-index:4;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;background:var(--bar);color:#fff;padding:0 24px;box-shadow:var(--shadow);transition:background .2s}.story-copy,.story-foot,.record-art{display:none}.auth-side{width:100%;max-width:408px}.auth-card{padding:32px;background:var(--paper);box-shadow:0 6px 18px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.09);border-radius:3px;animation:card-in .35s cubic-bezier(.2,.8,.2,1)}h1,h2,p{margin-top:0}.auth-card h2{font-size:24px;line-height:1.35;font-weight:400;letter-spacing:0;margin:0 0 12px}.eyebrow{color:var(--primary);font-size:11px;letter-spacing:1px;font-weight:500;margin:0 0 10px}.auth-card .eyebrow{display:none}.muted{font-size:14px;color:var(--muted);line-height:1.6}.auth-card form{margin-top:28px}label{font-size:12px;display:block;margin:20px 0 6px;color:var(--muted)}input{width:100%;min-width:0;padding:10px 0 8px;border:0;border-bottom:1px solid var(--muted);border-radius:0;background:transparent;color:var(--text);font-size:16px;outline:0;transition:border-color .18s,box-shadow .18s}input:focus{border-bottom-color:var(--primary);box-shadow:0 1px 0 var(--primary)}input[readonly]{color:var(--text)}input::placeholder{color:#9e9e9e;font-weight:400}.floating-field{position:relative;margin:22px 0 8px;padding-top:8px}.floating-field label{position:absolute;left:0;top:16px;margin:0;font-size:16px;transform-origin:left top;pointer-events:none;transition:transform .2s cubic-bezier(.4,0,.2,1),color .2s}.floating-field input{padding:14px 0 7px}.floating-field:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:center;transition:transform .2s cubic-bezier(.4,0,.2,1)}.floating-field.filled label,.floating-field:focus-within label{transform:translateY(-20px) scale(.75)}.floating-field:focus-within label{color:var(--primary)}.floating-field:focus-within:after{transform:scaleX(1)}.floating-field:focus-within input{box-shadow:none}.floating-field.touched:has(input:invalid):after{background:var(--error);transform:scaleX(1)}.floating-field.touched:has(input:invalid) label{color:var(--error)}.primary,.secondary,.quiet,.icon-button,.material-fab{position:relative;overflow:hidden;isolation:isolate;user-select:none;transition:box-shadow .2s,background-color .2s,color .2s}.primary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:38px;border:0;border-radius:2px;background:var(--primary);color:#fff;padding:9px 18px;box-shadow:var(--shadow);font-size:14px;font-weight:500;letter-spacing:.45px;text-transform:uppercase}.primary:hover{background:var(--primary-dark);box-shadow:var(--shadow-up)}.primary:active{box-shadow:0 7px 13px rgba(0,0,0,.24)}:root[data-theme=dark] .primary{color:#212121}.primary span{font-size:20px;line-height:1}.auth-card .primary{width:100%;margin-top:26px}.secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;border:0;border-radius:2px;padding:8px 14px;color:var(--primary);background:transparent;font-size:12px;letter-spacing:.3px;font-weight:500;text-transform:uppercase}.secondary:hover,.quiet:hover{background:var(--hover)}.quiet{border:0;background:transparent;padding:8px 10px;min-height:32px;border-radius:2px;color:var(--primary);font-size:12px;font-weight:500;letter-spacing:.25px;text-transform:uppercase}.form-note{font-size:12px;color:var(--muted);line-height:1.65;margin:24px 0 0}.auth-foot{font-size:12px;color:var(--muted);text-align:center;line-height:1.7;margin:24px 8px 0}.back-link{display:inline-block;color:var(--primary);font-size:13px;font-weight:500;margin-top:24px}.large-icon{display:block;color:var(--primary);font-size:32px;margin-bottom:20px}.notice{padding:12px 16px;border-radius:2px;background:var(--selected);color:var(--text);font-size:13px;line-height:1.6}.notice.error{background:rgba(211,47,47,.07);color:var(--error);margin:16px 0;border-left:3px solid var(--error)}.app-header{position:sticky;top:0;height:64px;z-index:16;display:flex;align-items:center;gap:12px;padding:0 24px;background:var(--bar);color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.26);transition:background .25s}.app-header .brand{margin-right:auto}.header-right{display:flex;align-items:center;gap:14px}.app-header .quiet{color:#fff}.role-chip{font-size:12px;opacity:.8}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#7986cb;color:#fff;font-size:15px;font-weight:500;box-shadow:0 1px 2px #0002}.icon-button{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:transparent;color:inherit;padding:8px}.icon-button:hover{background:rgba(255,255,255,.13)}.icon-button svg{width:24px;height:24px;fill:currentColor}.menu-toggle{display:none}.app-layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100dvh - 64px)}.sidebar{position:sticky;top:64px;height:calc(100dvh - 64px);display:flex;flex-direction:column;padding:24px 0 18px;background:var(--paper);border-right:1px solid var(--line);transition:transform .25s cubic-bezier(.4,0,.2,1),background .25s}.sidebar-label{padding:0 24px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.6px;margin:0 0 12px}.sidebar #admin-nav>.sidebar-label{margin-top:28px}.sidebar nav a{position:relative;display:flex;align-items:center;gap:20px;min-height:48px;padding:12px 24px;font-size:14px;font-weight:500;color:var(--muted);overflow:hidden;transition:background .2s,color .2s}.sidebar nav a>span:first-child{width:22px;text-align:center;font-size:22px;line-height:1;font-weight:400}.sidebar nav a:hover{background:var(--hover)}.sidebar nav a.active{background:var(--selected);color:var(--primary)}.sidebar nav a.active:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);animation:selection-in .2s}.sidebar-footer{margin: auto 24px 0;padding-top:20px;display:flex;gap:9px;border-top:1px solid var(--line);align-items:flex-start}.dot{display:inline-block;width:6px;height:6px;background:#4caf50;border-radius:50%;flex:0 0 auto}.sidebar-footer .dot{margin-top:5px}.sidebar-footer strong{font-size:11px;font-weight:500;color:var(--muted)}.sidebar-footer p{font-size:11px;margin:4px 0 0;word-break:break-all;color:var(--muted)}.tiny-count{margin-left:auto;font-size:11px;color:var(--primary);font-weight:500}.main-content{padding:28px 32px 40px;min-width:0;max-width:1920px;width:100%}.section-view:not([hidden]){animation:section-in .22s cubic-bezier(.4,0,.2,1)}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.section-heading .eyebrow{display:none}.section-heading h1{font-size:24px;font-weight:400;letter-spacing:0;line-height:1.3;margin:0 0 7px}.section-heading .muted{font-size:13px;margin:0}.owner-tag{font-size:12px;color:var(--muted)}.player-shell{height:calc(100dvh - 214px);min-height:450px;overflow:hidden;background:var(--paper);border-radius:2px;box-shadow:var(--shadow)}.player-shell iframe{display:block;width:100%;height:100%;border:0;background:var(--paper)}.panel{background:var(--paper);border:0;border-radius:2px;padding:24px;box-shadow:var(--shadow);transition:box-shadow .2s,background .25s}.panel h2{font-size:18px;line-height:1.4;font-weight:400;margin:0 0 10px}.friend-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.friend-stats>div{background:var(--paper);box-shadow:var(--shadow);border-radius:2px;padding:22px 24px;border-top:3px solid var(--primary)}.friend-stats>div:nth-child(2){border-top-color:#ffb300}.friend-stats>div:nth-child(3){border-top-color:#9e9e9e}.friend-stats span{font-size:13px;color:var(--muted);display:block}.friend-stats strong{font-size:34px;font-weight:300;color:var(--text);display:block;margin-top:7px;line-height:1.2}.invite-panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;margin-bottom:24px}.invite-panel p{font-size:13px;color:var(--muted);margin:0}.invite-panel form{display:flex;align-items:center;gap:16px}.invite-panel .primary{flex:0 0 auto;font-size:12px}.invite-panel input{font-size:14px}.people-panel{padding:0;overflow:hidden}.people-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 24px}.people-heading h2{margin:0}.people-table-header{display:grid;grid-template-columns:minmax(210px,1.4fr) .8fr 1fr;padding:14px 24px;background:var(--paper2);border-top:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.4px}.person-row{display:grid;grid-template-columns:minmax(210px,1.4fr) .8fr 1fr;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid var(--line);transition:background .18s;animation:row-in .2s}.person-row:hover{background:var(--hover)}.person-ident{display:flex;align-items:center;gap:16px;min-width:0}.person-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#5c6bc0;color:#fff;font-size:18px;font-weight:400;flex:0 0 auto}.person-row:nth-child(3n+2) .person-avatar{background:#26a69a}.person-row:nth-child(3n) .person-avatar{background:#ef6c00}.person-email{font-size:14px;margin:0;overflow-wrap:anywhere}.person-meta{font-size:11px;color:var(--muted);margin:4px 0 0}.status{font-size:12px;justify-self:start;display:inline-flex;align-items:center;gap:8px;color:var(--muted)}.status.active{color:#2e7d32}.status.invited{color:#bf7900}.status.invited .dot{background:#ffb300}.status.disabled .dot{background:#9e9e9e}.person-actions{display:flex;justify-content:flex-end;gap:0;flex-wrap:wrap}.person-actions .quiet{font-size:10px;min-height:32px;padding:7px 8px}.person-actions .disable{color:var(--error)}.owner-text{font-size:11px;color:var(--muted);justify-self:end}.access-note{display:flex;align-items:flex-start;gap:12px;margin:20px 4px 28px;color:var(--muted)}.access-note>span{font-size:24px;line-height:1.1;color:var(--primary)}.access-note p{font-size:12px;line-height:1.75;margin:0;max-width:860px}.audit-panel h2{margin-bottom:8px}.audit-event{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line);font-size:12px;color:var(--text)}.audit-event:first-child{border:0}.audit-event time{white-space:nowrap;color:var(--muted);font-size:11px}.empty{font-size:13px;color:var(--muted);padding:15px 0;margin:0}.account-view{max-width:850px}.phone-card{display:flex;align-items:center;gap:28px;margin-bottom:24px}.phone-icon{width:64px;height:90px;flex:0 0 auto;background:var(--primary);border:5px solid #263238;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:28px;box-shadow:0 3px 5px #0003}.phone-card .muted{font-size:13px;max-width:560px}.connection-card{max-width:720px}.copy-row{display:flex;align-items:center;gap:16px}.copy-row input{font-size:14px}.copy-row .secondary{flex:0 0 auto}.connection-card>p.muted{font-size:13px;margin-top:24px}.connection-card .notice{margin-bottom:0}.modal-backdrop{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.4);animation:fade-in .18s ease-out}.modal{position:relative;width:100%;max-width:460px;padding:28px;background:var(--paper);border-radius:2px;box-shadow:0 16px 40px #0005,0 8px 12px #0003;animation:dialog-in .23s cubic-bezier(.2,.8,.2,1)}.close-modal{position:absolute;right:10px;top:7px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:27px;line-height:1}.close-modal:hover{background:var(--hover)}.modal-icon,.modal>.eyebrow{display:none}.modal h2{font-size:22px;font-weight:400;letter-spacing:0;margin:0 25px 14px 0}.modal .muted{font-size:14px}.modal input{font-size:11px;padding-bottom:10px}.modal .primary{margin-top:24px;width:100%}.modal .form-note{font-size:12px}.modal-backdrop.closing{animation:fade-out .15s ease-in forwards}.modal-backdrop.closing .modal{animation:dialog-out .15s ease-in forwards}.toast{position:fixed;z-index:60;left:24px;bottom:24px;min-width:288px;max-width:calc(100vw - 48px);background:#323232;color:#fff;box-shadow:var(--shadow-up);padding:15px 24px;border-radius:2px;font-size:14px;animation:snackbar-in .22s cubic-bezier(.4,0,.2,1)}.material-fab{position:fixed;z-index:18;right:28px;bottom:28px;width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:30px;line-height:1;font-weight:300;box-shadow:0 6px 10px #0004,0 2px 5px #0003;animation:fab-in .25s cubic-bezier(.2,1.5,.5,1)}.material-fab:hover{box-shadow:0 8px 15px #0005,0 3px 7px #0003;background:#f50057}.material-fab:active{box-shadow:0 12px 18px #0005}.material-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);z-index:0;animation:ripple .58s cubic-bezier(.1,.65,.5,1) forwards}.primary .material-ripple,.material-fab .material-ripple{background:#fff;opacity:.32}.drawer-scrim{position:fixed;inset:64px 0 0;z-index:21;background:rgba(0,0,0,.4);animation:fade-in .18s}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}::selection{background:#c5cae9;color:#1a237e}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ripple{to{transform:scale(1);opacity:0}}@keyframes card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes section-in{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes selection-in{from{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes row-in{from{opacity:.3}to{opacity:1}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}@keyframes dialog-out{to{opacity:0;transform:translateY(8px) scale(.97)}}@keyframes snackbar-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes fab-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@media(max-width:1200px){.app-layout{grid-template-columns:216px minmax(0,1fr)}.sidebar nav a{padding:12px 20px;gap:15px}.main-content{padding:25px 24px 36px}.invite-panel{grid-template-columns:1fr;gap:16px}.people-table-header,.person-row{grid-template-columns:minmax(180px,1.2fr) .7fr 1fr;padding-left:20px;padding-right:20px}.person-actions .quiet{font-size:9px}}@media(max-width:900px){.app-layout{display:block}.app-header{padding:0 16px;gap:8px}.menu-toggle{display:inline-flex;margin-left:-7px}.sidebar{position:fixed;z-index:22;top:64px;bottom:0;left:0;width:256px;height:calc(100dvh - 64px);transform:translateX(-103%);box-shadow:0 8px 24px #0004;border:0}.drawer-open .sidebar{transform:translateX(0)}.drawer-open{overflow:hidden}.main-content{padding:24px}.role-chip{font-size:11px}.header-right{gap:9px}.friend-stats{gap:16px}.person-row,.people-table-header{grid-template-columns:minmax(180px,1.2fr) .8fr 1fr}.player-shell{height:calc(100dvh - 205px)}}@media(max-width:600px){.app-header,.auth-story{height:56px;padding:0 16px}.brand{font-size:20px;gap:10px}.logo-mark{width:28px;height:28px}.header-right{gap:4px}.role-chip,.app-header .avatar{display:none}.app-header .quiet{font-size:11px;padding:7px}.icon-button{width:36px;height:36px}.sidebar{top:56px;height:calc(100dvh - 56px)}.drawer-scrim{top:56px}.auth-layout{padding:88px 16px 30px;align-items:flex-start}.auth-card{padding:26px 24px}.auth-foot{font-size:11px;margin-top:22px}.main-content{padding:22px 16px 35px}.section-heading{align-items:flex-start;margin-bottom:20px;gap:10px}.section-heading h1{font-size:22px}.section-heading .muted{font-size:12px}.section-heading>.secondary{font-size:0;padding:7px 8px;min-width:30px}.section-heading>.secondary:after{content:'↗';font-size:19px}.player-shell{height:calc(100dvh - 200px);min-height:470px}.owner-tag{display:none}.friend-stats{gap:9px;margin-bottom:18px}.friend-stats>div{padding:15px 13px}.friend-stats span{font-size:11px;line-height:1.4;min-height:30px}.friend-stats strong{font-size:29px}.panel{padding:20px}.invite-panel{margin-bottom:18px}.invite-panel form{flex-wrap:wrap;gap:15px}.invite-panel form input{flex-basis:100%}.invite-panel .primary{width:100%;min-height:36px}.people-panel{padding:0}.people-heading{padding:18px 20px}.people-table-header{display:none}.person-row{grid-template-columns:1fr auto;gap:13px;padding:16px 20px}.person-ident{grid-column:1 / -1}.person-row .status{grid-column:1}.person-actions .quiet{font-size:10px;padding:6px}.person-email{font-size:14px}.person-meta{font-size:11px}.owner-text{font-size:11px}.audit-event{display:block}.audit-event time{display:block;margin-top:5px}.phone-card{align-items:flex-start;gap:20px}.phone-icon{width:49px;height:75px;font-size:24px}.phone-card h2{font-size:17px}.phone-card .secondary{padding:8px 0;font-size:11px}.copy-row{gap:10px}.copy-row input{font-size:12px}.copy-row .secondary{padding:8px;font-size:10px}.toast{bottom:0;left:0;right:0;border-radius:0;max-width:none;width:100%;min-width:0}.material-fab{bottom:20px;right:20px}.modal-backdrop{padding:20px}.modal{padding:25px}.modal h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001s!important;transition-duration:.001s!important;scroll-behavior:auto!important}}
body[data-page=library] .main-content{padding:0}body[data-page=library] #player-view>.section-heading{display:none}body[data-page=library] .player-shell{height:calc(100dvh - 64px);min-height:0;border-radius:0;box-shadow:none}iframe{color-scheme:inherit}@media(max-width:600px){body[data-page=library] .player-shell{height:calc(100dvh - 56px)}}