:root{color-scheme:dark;--bg:#101414;--panel:#171b1b;--raised:#1c2221;--line:#303936;--text:#f5f7f5;--muted:#aeb9b4;--green:#69e78f;--danger:#ffaaa7;font:15px system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{min-width:0}body{margin:0;min-width:0;min-height:100vh;background:radial-gradient(circle at 55% -15%,#23372b 0,#111717 34%,var(--bg) 78%);color:var(--text)}button,input,select{font:inherit}button,select,.button{border:1px solid var(--line);border-radius:10px;background:#242a29;color:var(--text);padding:.58rem .85rem;cursor:pointer}button:hover,.button:hover,select:hover{border-color:#688576}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:3px}a{color:var(--text)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.csrf{display:none}.eyebrow{font-size:.68rem;letter-spacing:.25em;color:var(--muted);font-weight:650}
.masthead{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,2vw,2rem);font-size:.6rem;letter-spacing:.3em;color:#85938d}.masthead-title{font-size:.9rem;letter-spacing:.5em;color:#b8c1bf}.shell{display:grid;grid-template-columns:270px minmax(0,1fr);gap:8px;padding:0 16px 170px;min-height:calc(100vh - 56px)}#sidebar,.hero,.content-panel,#player{border:1px solid #202725;background-color:rgba(19,23,23,.93);border-radius:16px}#sidebar{position:sticky;top:12px;height:calc(100vh - 190px);min-height:460px;display:flex;flex-direction:column;overflow:hidden;padding:18px 10px 14px}.brand{text-align:center;padding:24px 8px 19px}.brand-small{display:block;font-size:.65rem;letter-spacing:.55em;margin-bottom:3px}.brand strong{display:block;font-size:1.35rem;letter-spacing:.28em;font-weight:560}.brand-line{display:block;width:160px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,#769887,transparent);position:relative}.brand-line:after{content:"";position:absolute;width:55px;height:12px;left:50%;top:-6px;transform:translateX(-50%);background:repeating-linear-gradient(90deg,transparent 0 3px,#82a294 3px 4px,transparent 4px 7px);clip-path:polygon(0 43%,15% 20%,34% 50%,56% 0,75% 70%,100% 40%,100% 60%,0 60%)}.brand-private{font-size:.69rem;letter-spacing:.08em;color:var(--muted)}.side-nav{display:grid;gap:4px;margin:12px 0 16px}.side-link{width:100%;border:0;background:transparent;text-align:left;padding:11px 16px;color:#d2dad5}.side-link span{display:inline-block;width:26px;font-size:1.25rem;vertical-align:middle}.side-link.active{background:#26332e;border-left:3px solid var(--green);color:white}.side-head{padding:14px 15px 9px;border-top:1px solid var(--line);font-size:.65rem;letter-spacing:.26em;color:var(--muted)}#tree{min-height:0;overflow:auto;flex:1;padding:0 4px 6px;scrollbar-color:#53675a transparent}#tree ul{list-style:none;padding:0;margin:0}#tree li{margin:1px 0;min-width:0}#tree li>ul{padding-left:12px;margin-left:10px;border-left:1px solid #303a35}.tree-row{display:flex;align-items:center;min-width:0;border-radius:8px}.tree-row.current{background:#24342a}.tree-row:hover{background:#242e29}.tree-toggle{flex:none;width:26px;height:34px;padding:0;border:0;background:none;color:var(--muted)}.tree-toggle.empty{visibility:hidden}.tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;border:0;background:none;padding:7px 6px;color:#cbd6cf}.tree-name[aria-current="location"]{color:var(--green);font-weight:700}.side-foot{padding:18px 16px 2px;line-height:1.75;font-size:.57rem;letter-spacing:.34em;color:#87958e}.account{font-size:.7rem;letter-spacing:normal;margin-top:15px;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.account button{border:0;background:transparent;padding:0;color:var(--muted)}.account a{color:var(--muted)}.drawer-close{display:none}
#browser{min-width:0}.hero{min-height:228px;padding:clamp(22px,3vw,38px);background:radial-gradient(ellipse at 55% -60%,#385b42 0,#1a2a21 50%,#151a18 100%);box-shadow:inset 0 -50px 80px #1118156b}.hero-top{display:flex;align-items:center;gap:15px;min-width:0}.nav-controls{display:flex;gap:5px;flex:none}.nav-controls button{padding:4px 9px;border:0;background:#26302b;font-size:1.1rem}.mobile-only{display:none}#breadcrumbs{display:flex;gap:3px;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}#breadcrumbs button{border:0;background:none;padding:3px 5px;color:#c4cfc8;white-space:nowrap}#breadcrumbs button:not(:last-child):after{content:" /";padding-left:8px;color:#6d8074}#breadcrumbs button[aria-current="location"]{color:white}.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-top:25px}.hero h1{font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1.05;margin:8px 0}.hero p{color:#bbc8c0;margin:0}.hero-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.search input{width:clamp(205px,23vw,330px);max-width:100%;border:1px solid #526158;border-radius:10px;background:#222a27;color:white;padding:.72rem .85rem}.search input::placeholder{color:#aab8af}.primary{background:var(--green)!important;color:#07140c!important;border-color:var(--green)!important;font-weight:750}.primary:hover{background:#8af3a9!important}.content-panel{margin-top:8px;min-height:330px;padding:22px clamp(14px,2.5vw,32px) 34px}.content-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:17px}.content-head h2{margin:3px 0 0;font-size:1.35rem}.content-head label{font-size:.78rem;color:var(--muted);white-space:nowrap}.content-head select{padding:.35rem .55rem;font-size:.8rem}.storage{color:var(--muted);font-size:.75rem;margin:8px 0}#drop-zone{border:1px dashed #3b5144;color:var(--muted);border-radius:10px;padding:.7rem;text-align:center;font-size:.79rem;margin:12px 0 6px}#drop-zone.drag{border-color:var(--green);background:#234232}.table-wrap{overflow:visible}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;border-bottom:1px solid #323a37;padding:13px 9px;vertical-align:middle}th{font-size:.69rem;font-weight:600;color:#aab6af}th:first-child{width:43%}th:nth-child(2){width:10%}th:nth-child(3){width:10%}th:nth-child(4){width:10%}th:nth-child(5){width:13%}th:nth-child(6){width:10%}th:last-child{width:78px}td{font-size:.83rem;color:#c9d4cd}tbody tr:hover{background:#1d2621}tbody tr.playing{background:#22362b}tbody tr.playing .entry-icon{color:var(--green)}td.name{min-width:0}.entry-main{display:flex;align-items:center;min-width:0;gap:10px}.entry-icon{flex:none;width:25px;color:#d1dcd3;font-size:1.2rem;text-align:center}.entry-text{min-width:0}.entry-text button,.entry-text span{display:block;max-width:100%;padding:2px 0;border:0;background:none;text-align:left;color:#f1f5f1;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-text button:hover{text-decoration:underline;color:var(--green)}.entry-text small{display:block;max-width:100%;color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.format-badge{display:inline-block;padding:.26rem .44rem;border:1px solid #3a4840;border-radius:5px;font-size:.67rem;text-transform:uppercase}.actions{white-space:nowrap;text-align:right;position:relative}.download-link{display:inline-block;color:#c5d3c9;text-decoration:none;font-size:1.15rem;padding:4px 7px}.actions-menu{display:inline-block;position:relative}.actions-menu summary{list-style:none;cursor:pointer;padding:6px 8px;border-radius:5px}.actions-menu summary::-webkit-details-marker{display:none}.actions-menu[open] summary{background:#26362c}.actions-menu>div{display:grid;position:absolute;z-index:4;right:0;top:100%;width:165px;padding:6px;gap:2px;background:#242b28;border:1px solid #536156;border-radius:9px;box-shadow:0 12px 24px #0009;text-align:left}.actions-menu button,.actions-menu a{display:block;text-align:left;width:100%;padding:7px;border:0;background:none;text-decoration:none;border-radius:5px;font-size:.8rem}.actions-menu button:hover,.actions-menu a:hover{background:#344439}.danger-button{color:var(--danger)!important}.empty{padding:55px 15px;text-align:center;color:var(--muted)}.empty:before{content:"♫";display:block;margin:auto auto 10px;width:48px;height:48px;line-height:48px;border:1px solid #405047;border-radius:50%;font-size:1.5rem;color:var(--green)}.upload-row{display:grid;grid-template-columns:minmax(8rem,1fr) 3fr auto;align-items:center;gap:.75rem;background:#212b25;border-radius:8px;padding:.5rem;margin:.4rem 0;font-size:.78rem}.upload-row progress{width:100%;accent-color:var(--green)}.error{color:#ffd9d7;background:#4c2222;padding:.7rem;border-radius:7px}.status{position:fixed;z-index:10;right:1rem;bottom:152px;max-width:min(28rem,calc(100vw - 2rem));background:#29332e;border:1px solid #4c6652;padding:.75rem;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s}.status.show{opacity:1}.status.error{color:#ffd2d2;border-color:#ad5757}
dialog{width:min(29rem,calc(100% - 2rem));border:1px solid #526357;border-radius:14px;background:#1c2520;color:var(--text);padding:1.3rem}dialog::backdrop{background:#000b}dialog h2{margin-top:0}dialog label,dialog select{display:block;width:100%}dialog select{margin-top:.5rem}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
#player{position:fixed;z-index:5;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));min-height:118px;display:grid;grid-template-columns:minmax(190px,1fr) minmax(260px,2fr) minmax(120px,1fr);align-items:center;gap:22px;padding:16px 22px;background:linear-gradient(150deg,#1c2420,#141918);box-shadow:0 10px 35px #0008}.now{display:flex;align-items:center;gap:12px;min-width:0}.now>div{min-width:0}.now b,.now small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now small{color:var(--muted);font-size:.68rem;letter-spacing:.06em;margin-top:4px}.track-symbol{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:8px;background:linear-gradient(145deg,#34453a,#1b2920);color:var(--green);font-size:1.6rem}.player-main{min-width:0}.transport{display:flex;align-items:center;justify-content:center;gap:15px}.transport button{border:0;background:none;font-size:1.2rem;padding:.3rem;color:#e7f2e9}.transport .play-toggle{display:grid;place-items:center;width:42px;height:42px;border:2px solid white;border-radius:50%;font-size:1rem}.transport #repeat[aria-pressed="true"]{color:var(--green)}.timeline{display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--muted)}.timeline input{flex:1;min-width:40px;accent-color:var(--green)}.player-extra{display:flex;justify-content:flex-end;align-items:center;gap:15px}.player-extra input{width:75px;accent-color:var(--green)}.player-extra a{font-size:1.4rem;text-decoration:none;padding:4px}.volume{display:flex;align-items:center;gap:8px;color:var(--muted)}
.login-page{display:grid;place-items:center;padding:1rem;min-height:100vh}.login-card{width:min(420px,100%);border:1px solid #314b3a;border-radius:18px;padding:2.5rem;background:radial-gradient(circle at 50% 0,#203c29,#151c19 55%);box-shadow:0 20px 60px #0007}.login-card .eyebrow,.login-card .brand-small{text-align:center}.login-card .brand-small{margin-top:30px}.login-card h1{text-align:center;letter-spacing:.25em;font-size:1.5rem;font-weight:550;margin:0}.login-card p{text-align:center;color:var(--muted);margin:0 0 26px}.login-card label{display:block;margin:15px 0 5px;color:#c7d2ca}.login-card input:not([type=hidden]){width:100%;padding:.75rem;background:#101714;color:white;border:1px solid #49594d;border-radius:8px}.login-card button{width:100%;margin-top:24px;padding:.75rem}
@media(max-width:1050px){.hero-bottom{align-items:flex-start;flex-direction:column}.hero-actions{width:100%;justify-content:flex-start}th:nth-child(4),td:nth-child(4),th:nth-child(6),td:nth-child(6){display:none}th:first-child{width:49%}th:nth-child(2),th:nth-child(3){width:12%}th:nth-child(5){width:17%}}
@media(max-width:760px){.masthead{height:40px;justify-content:center}.masthead>span:first-child,.masthead>span:last-child{display:none}.masthead-title{font-size:.67rem}.shell{display:block;padding:0 8px 220px}.mobile-only{display:inline-block}.drawer-close{display:block;position:absolute;right:14px;top:12px;border:0;background:none;font-size:1.8rem}#sidebar{position:fixed;z-index:9;left:0;top:0;bottom:0;width:min(86vw,330px);height:100dvh;min-height:0;border-radius:0;transform:translateX(-102%);transition:transform .2s;box-shadow:15px 0 40px #0009}#sidebar.open{transform:none}#sidebar[inert]{visibility:hidden}#drawer-backdrop:not([hidden]){position:fixed;z-index:8;inset:0;background:#000a}.hero{padding:19px 15px;min-height:0}.hero-top{gap:6px}.nav-controls button{padding:5px 8px}.hero-bottom{margin-top:19px;gap:14px}.hero h1{font-size:2rem}.hero p{font-size:.83rem}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.hero-actions .search{grid-column:1/-1}.search input{width:100%}.hero-actions button{padding:.6rem .3rem;font-size:.8rem}.content-panel{padding:18px 11px 28px}.content-head{align-items:center}.content-head h2{font-size:1.12rem}.content-head label{font-size:.7rem}table{table-layout:fixed}th:first-child{width:auto}th:nth-child(2){width:50px}th:nth-child(3){width:52px}th:last-child{width:68px}th:nth-child(5),td:nth-child(5){display:none}th,td{padding:10px 4px;font-size:.72rem}.entry-main{gap:4px}.entry-icon{width:20px;font-size:1rem}.entry-text button,.entry-text span{font-size:.74rem}.format-badge{padding:.2rem .26rem;font-size:.58rem}.actions-menu summary{padding:4px}.download-link{padding:3px}.content-panel .storage{font-size:.68rem}#drop-zone{display:none}#player{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));min-height:174px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"now extra" "main main";gap:8px;padding:10px 13px}.now{grid-area:now}.track-symbol{width:38px;height:38px}.now b{font-size:.78rem}.player-main{grid-area:main}.player-extra{grid-area:extra}.volume{display:none}.transport{gap:20px}.timeline{margin-top:4px}.status{bottom:190px}.upload-row{grid-template-columns:1fr auto}.upload-row progress{grid-row:2;grid-column:1/-1}}
@media(max-width:390px){.hero-actions button{font-size:.73rem}.content-head .eyebrow{display:none}.entry-icon{display:none}.download-link{padding:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{display:inline-block;width:1.1em;height:1.1em;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:-.15em}.side-link .icon{width:1.3em;height:1.3em;margin-right:10px}.brand-private .icon{width:.85em;height:.85em}.entry-icon .icon{width:20px;height:20px}.download-link .icon{width:18px;height:18px}.hero-bottom{align-items:flex-start;flex-direction:column}.hero-actions{justify-content:flex-start}.entry-text small button{display:inline;border:0;background:none;padding:0;color:var(--green);font-size:inherit;white-space:nowrap}.entry-text small button:hover{text-decoration:underline}#browser,.hero,.content-panel,.table-wrap,.entry-text{max-width:100%;min-width:0}#tree li>ul{padding-left:6px;margin-left:4px}.transport button{min-width:42px;min-height:42px}
@media(max-width:760px){.hero-actions{width:100%}.entry-text small{max-width:100%;overflow:hidden}.entry-text small button{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}.table-wrap{overflow-x:hidden}.entry-text button,.entry-text span{min-width:0}.transport{gap:8px}}
.track-symbol .icon{width:25px;height:25px}.transport .icon{width:20px;height:20px}.player-extra .icon{width:20px;height:20px}
.hero-bottom>div:first-child{min-width:0;max-width:100%}.hero h1,.hero p{overflow-wrap:anywhere}
.tree-toggle.empty{width:26px;height:34px;padding:0;margin:0}.tree-toggle.empty:before{display:none;content:none}#tree li>div[id^="tree-children"]>ul{margin-left:8px;padding-left:4px;border-left:1px solid #425348}.tree-row{min-height:36px}.tree-toggle{font-size:1.25rem;font-weight:700;color:#a9c4af}
.content-head{justify-content:flex-end;margin-bottom:6px}.content-panel{position:relative;padding-top:12px}th:first-child{width:auto}th:nth-child(2){width:90px}th:nth-child(3){width:90px}th:nth-child(4){width:130px}th:last-child{width:100px}th,td{padding:8px 12px}td{height:58px}td.name button{line-height:1.3}.entry-meta{display:flex;align-items:baseline;gap:8px;max-width:100%;min-width:0}.entry-meta small{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-meta button{flex:none!important;display:inline!important;max-width:none!important;font-size:.69rem!important;color:var(--green)!important;white-space:nowrap}.side-foot .storage{font-size:.69rem;letter-spacing:normal;line-height:1.35;margin:0 0 8px;color:var(--muted)}#drop-zone{margin:0}.dragging .content-panel{outline:2px dashed var(--green);outline-offset:-5px}.dragging .content-panel:after{content:"Drop MP3 or WAV files to upload";position:absolute;inset:10px;display:grid;place-items:center;border-radius:10px;background:#142b20ed;color:var(--green);font-weight:700;pointer-events:none}
@media(max-width:1050px){th:nth-child(2){width:75px}th:nth-child(3){width:75px}th:last-child{width:92px}}
@media(max-width:760px){th:nth-child(4),td:nth-child(4){display:none}th:nth-child(5),td:nth-child(5){display:table-cell}th:nth-child(2){width:47px}th:nth-child(3){width:49px}th:last-child{width:80px}th,td{padding:7px 4px}td{height:54px}.entry-meta{gap:4px}.entry-meta button{font-size:.62rem!important}.content-head{margin-bottom:3px}}
@media(min-width:761px) and (max-height:800px){#sidebar{padding:8px}.brand{padding:8px 5px 5px}.brand-line{margin:10px auto}.side-nav{margin:4px 0 8px}.side-link{padding:7px 12px}.side-head{padding:8px 12px 4px}.side-foot{padding:5px 12px 0}.account{margin-top:5px;padding-top:5px}}
@media(max-width:760px){.table-wrap{overflow:visible}}
.tree-row{height:36px;min-height:36px;max-height:36px}.tree-row>.tree-toggle,.tree-row>.tree-name{height:36px;min-height:36px;max-height:36px;line-height:36px;padding-top:0;padding-bottom:0;white-space:nowrap}.tree-toggle.leaf{visibility:hidden}
#name-dialog input{display:block;width:100%;margin-top:.5rem;padding:.7rem;border:1px solid #526357;border-radius:8px;background:#101714;color:var(--text)}#confirm-dialog p{color:var(--muted)}
.tree-name .icon{width:16px;height:16px;margin-right:8px;vertical-align:-3px;color:#ccd8d0}
.password-help{color:var(--muted);font-size:.78rem;line-height:1.4;margin:.35rem 0}.password-help ul{padding-left:1.25rem;margin:.35rem 0}.login-card .sign-out{margin-top:10px;background:transparent;color:var(--muted)}
.login-entry{display:block;place-items:normal;padding:0;background:radial-gradient(ellipse at 35% 0,#203529 0,#111717 38%,var(--bg) 80%)}
.login-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:8px;width:min(1180px,calc(100% - 32px));min-height:min(690px,calc(100vh - 88px));margin:0 auto 16px}
.login-intro,.login-entry .login-card{border:1px solid #26312c;border-radius:16px}
.login-intro{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:clamp(26px,5vw,64px);background:radial-gradient(ellipse at 60% 5%,#385b42 0,#1a2a21 42%,#151a18 85%);box-shadow:inset 0 -60px 100px #0a120d80}
.login-intro h1{font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.055em;line-height:1.05;margin:0 0 18px}.login-intro p{max-width:30rem;color:#c2cec5;font-size:1.05rem;line-height:1.6;margin:0}
.login-intro-brand{width:max-content;max-width:100%;text-align:center}.login-intro-brand strong{display:block;font-size:1.3rem;letter-spacing:.3em;font-weight:560}.login-intro-brand .brand-line{margin:20px auto}.login-intro-brand>span:last-child{font-size:.65rem;letter-spacing:.24em;color:var(--muted)}
.login-entry .login-card{align-self:stretch;display:flex;flex-direction:column;justify-content:center;width:auto;padding:clamp(28px,5vw,72px);background:rgba(19,23,23,.96);box-shadow:none}
.login-entry .login-card .eyebrow,.login-entry .login-card p{text-align:left}.login-entry .login-card h2{font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.04em;margin:12px 0 6px}.login-entry .login-card p{margin:0 0 24px;line-height:1.5}
.login-entry .login-card label{font-size:.82rem;font-weight:600;margin:20px 0 8px}.login-entry .login-card input:not([type=hidden]){min-height:46px;border-color:#526158;border-radius:10px;background:#222a27}.login-entry .login-card button{min-height:46px;margin-top:26px}.login-entry .login-card .error{margin-bottom:8px}
@media(max-width:760px){.login-layout{grid-template-columns:1fr;min-height:0;width:calc(100% - 16px);margin-bottom:8px}.login-intro{min-height:220px;padding:24px;gap:35px}.login-intro h1{font-size:clamp(2.2rem,9vw,3.2rem)}.login-intro-brand{display:none}.login-entry .login-card{padding:30px 24px 36px}.login-entry .masthead{height:48px}}
@media(max-width:390px){.login-intro{min-height:0}.login-intro p{font-size:.9rem}.login-entry .login-card{padding:26px 20px 32px}}