@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');
:root{--ink:#071510;--cream:#f4f1e8;--paper:#faf8f2;--green:#123c2d;--lime:#c8f36a;--muted:#738078;--line:#dcded5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:700;color:#567064;margin:0 0 12px}.shell{min-height:100vh;padding:0 0 106px 210px}.shell aside{position:fixed;inset:0 auto 0 0;width:210px;background:var(--ink);color:white;padding:28px 20px 120px;z-index:3}.logo{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;letter-spacing:.16em;font-size:13px}.logo span{width:34px;height:34px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;font-family:serif;color:var(--lime);font-size:22px}.shell nav{margin-top:55px;display:grid;gap:8px}.shell nav button{border:0;background:transparent;color:#85978e;text-align:left;padding:12px 14px;border-radius:10px;font-weight:600}.shell nav button.active{color:var(--lime);background:#142a21}.shell nav button:first-letter{font-size:18px}.shell nav span{margin-left:12px}.aside-bottom{position:absolute;bottom:120px;left:20px;right:20px}.add,.primary{border:0;background:var(--lime);color:var(--ink);font-weight:700;border-radius:100px;padding:12px 18px}.add{width:100%;margin-bottom:18px}.profile{border-top:1px solid #23372e;padding-top:15px;font-size:12px;display:flex;align-items:center;gap:9px}.profile img{width:32px;height:32px;border-radius:50%}.profile b,.profile span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px}.profile span{color:#829087}.content{padding:38px 5vw 40px;max-width:1450px;margin:auto}.content>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.content h1{margin:0;font-size:31px}.round{width:42px;height:42px;border:1px solid var(--line);background:white;border-radius:50%}.hero{min-height:330px;border-radius:20px;background:var(--green);color:white;padding:45px 55px;display:flex;justify-content:space-between;overflow:hidden}.hero h2{font-size:48px;line-height:1;margin:0}.hero em,.login em{font-family:'Playfair Display';color:var(--lime);font-weight:600}.hero p:not(.eyebrow){color:#b5c2bc}.hero-visual{width:45%;position:relative;display:grid;place-items:center;letter-spacing:.3em;text-align:center;font-weight:bold;color:white}.orb{position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eaffb7,#85a53c 35%,#173426 70%);box-shadow:0 0 70px #b9ed5944}.hero-visual span{z-index:1}.section-head{display:flex;align-items:center;justify-content:space-between;margin:36px 0 16px}.section-head h2{margin:0}.section-head button{border:0;background:none;color:#456353}.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.track-card{background:white;border:1px solid #e8e8df;border-radius:14px;padding:12px;text-align:left}.track-card .art,.library-card .art{height:140px;border-radius:10px;background:linear-gradient(135deg,#dbeab7,#204d37);background-size:cover;background-position:center;display:grid;place-items:center;color:white;font-size:24px}.track-card b,.track-card span{display:block;margin-top:10px}.track-card span{font-size:12px;color:var(--muted);margin-top:3px}.toolbar{display:flex;gap:15px;margin-bottom:24px}.toolbar input{flex:1}.library-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.library-card{background:#fff;padding:12px;border:1px solid var(--line);border-radius:14px}.library-card h3{margin:13px 0 4px;font-size:15px}.library-card p{margin:0;color:var(--muted);font-size:12px}.library-card button{margin-top:12px;border:0;color:var(--green);background:#eaf2e5;border-radius:20px;padding:8px 11px}.panel{background:white;border:1px solid var(--line);border-radius:16px;padding:25px}.intro{display:flex;justify-content:space-between;align-items:center}.intro h2,.panel h2{margin:0 0 7px}.intro p,.panel p{margin:0;color:var(--muted)}.manage-list,.users-list{margin-top:18px;display:grid;gap:8px}.manage-row,.user-row{background:white;border:1px solid var(--line);padding:11px 15px;border-radius:12px;display:grid;grid-template-columns:30px 48px 1fr auto;align-items:center;gap:12px}.manage-row.dragging{opacity:.45}.drag{color:#99a39d;cursor:grab}.thumb{width:48px;height:48px;border-radius:7px;background:#d8e8c0 center/cover}.track-meta b,.track-meta span{display:block}.track-meta span{font-size:12px;color:var(--muted)}.switch{position:relative;width:43px;height:24px}.switch input{opacity:0}.switch i{position:absolute;inset:0;background:#ccd1cc;border-radius:20px}.switch i:after{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+i{background:var(--green)}.switch input:checked+i:after{transform:translateX(19px)}input{border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;outline:none}input:focus{border-color:#648a72;box-shadow:0 0 0 3px #648a7218}.inline-form{display:flex;gap:10px;margin-top:22px}.inline-form input{flex:1}.user-row{grid-template-columns:1fr auto}.user-row p{margin:0;font-size:13px;color:var(--muted)}.player{position:fixed;z-index:5;bottom:0;left:210px;right:0;height:90px;background:#fbfaf6ee;backdrop-filter:blur(16px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;padding:12px 32px}.now{display:flex;gap:12px;align-items:center}.now .cover{width:54px;height:54px;border-radius:8px;background:#d9eabf center/cover;display:grid;place-items:center}.now b,.now span{display:block}.now span{color:var(--muted);font-size:12px}.transport{text-align:center}.controls button{border:0;background:none;font-size:17px}.controls .play{background:var(--ink);color:white;border-radius:50%;width:38px;height:38px;margin:0 15px}.timeline{display:flex;align-items:center;gap:8px;font-size:10px}.timeline input{padding:0;flex:1}.volume{display:flex;justify-content:flex-end;gap:9px}.volume input{padding:0;max-width:120px}dialog{border:0;border-radius:20px;padding:32px;width:min(520px,calc(100% - 30px));box-shadow:0 25px 80px #00180f44}dialog::backdrop{background:#06130da8;backdrop-filter:blur(4px)}dialog h2{font-size:30px;margin:0 0 22px}.close{position:absolute;right:18px;top:15px;border:0;background:none;font-size:28px}.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px}.tabs button{border:0;background:none;padding:10px 15px;color:var(--muted)}.tabs button.active{color:var(--ink);border-bottom:2px solid var(--green)}.tab-body{display:grid;gap:16px}.tab-body label{font-size:12px;font-weight:700}.tab-body input{display:block;width:100%;margin-top:7px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two span,.hint{font-weight:400;color:var(--muted)}.toasts{position:fixed;right:24px;top:24px;z-index:20;display:grid;gap:8px}.toast{background:#10251c;color:white;padding:14px 18px;border-radius:10px;box-shadow:0 8px 30px #0018;max-width:360px}.toast.error{background:#702f2b}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--cream)}.login-art{background:var(--green);position:relative;display:grid;place-items:center;overflow:hidden}.brandmark{width:150px;height:150px;border:1px solid var(--lime);border-radius:50%;display:grid;place-items:center;font:italic 90px serif;color:var(--lime);z-index:1}.rings{position:absolute;width:550px;height:550px;border:1px solid #a6d24b44;border-radius:50%;box-shadow:0 0 0 90px #a6d24b11,0 0 0 180px #a6d24b0b}.login main{display:flex;flex-direction:column;justify-content:center;padding:12%;max-width:650px}.login h1{font-size:58px;line-height:1.03;margin:0}.login h1 em{color:var(--green)}.lede{color:var(--muted);line-height:1.7;max-width:450px}.google{display:flex;gap:14px;justify-content:center;text-decoration:none;background:white;color:var(--ink);border:1px solid var(--line);padding:14px;border-radius:50px;font-weight:700;margin-top:15px}.google span{font-size:18px;color:#4285f4}.login small{text-align:center;color:#8c958f;margin-top:20px}.auth-message{color:#9b352d;font-weight:600}.login .auth-message:empty{display:none}
@media(max-width:900px){.shell{padding-left:0;padding-bottom:140px}.shell aside{width:100%;height:64px;bottom:auto;padding:10px 18px;display:flex;align-items:center;justify-content:space-between}.logo b{display:none}.shell nav{display:flex;margin:0}.shell nav button{padding:9px}.shell nav span{display:none}.aside-bottom{position:static}.add{width:auto;margin:0}.profile{display:none}.content{padding-top:90px}.player{left:0;height:126px;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr}.transport{grid-row:2;grid-column:1/3}.volume{display:none}.track-grid,.library-grid{grid-template-columns:repeat(2,1fr)}.login{grid-template-columns:1fr}.login-art{min-height:34vh}.login main{padding:40px 8%}.login h1{font-size:42px}.rings{width:300px;height:300px}.brandmark{width:100px;height:100px;font-size:58px}.hero{padding:35px}.hero-visual{display:none}}@media(max-width:520px){.track-grid,.library-grid{grid-template-columns:1fr 1fr}.content{padding-left:16px;padding-right:16px}.hero h2{font-size:38px}.intro{display:block}.intro button{margin-top:16px}.manage-row{grid-template-columns:22px 44px 1fr auto}.header-actions{display:none}}

/* Jeffis navy theme */
:root{--ink:#06162f;--green:#0b2f62;--lime:#78b7ff;--cream:#eef3fa;--paper:#f5f8fc;--muted:#65758a;--line:#d8e0eb}
.shell aside{background:#06162f}.shell nav button.active{background:#102b50}.profile{border-color:#1e3657}.hero,.login-art{background:#0b2f62}.orb{background:radial-gradient(circle at 35% 30%,#d8ebff,#4d91dc 35%,#08264e 70%);box-shadow:0 0 70px #4d9cff55}.track-card .art,.library-card .art{background-image:linear-gradient(135deg,#c8dcf3,#123f75)}.thumb,.now .cover{background-color:#d2e3f6}.library-card button{color:#0b2f62;background:#e4effb}.toast{background:#09254d}.login h1 em{color:#0b2f62}.rings{border-color:#76b8ff55;box-shadow:0 0 0 90px #5ca4ef17,0 0 0 180px #5ca4ef0d}