.app-shell{color:#2f2e2c;background:radial-gradient(circle at 20% 15%,#f3f0dd 0%,#f3f0dd00 40%),radial-gradient(circle at 85% 10%,#dde8f7 0%,#dde8f700 35%),#f2f0e8;grid-template-rows:auto 1fr;height:100%;display:grid;overflow:hidden}.top-header{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#f6f4ede6;border-bottom:1px solid #d9d5ca;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex}.brand-block{align-items:center;gap:12px;display:flex}.brand-home-button{cursor:pointer;text-align:left;background:0 0;border:none;padding:0}.logo{color:#2f3a44;background:#d8dde0;border-radius:10px;place-items:center;width:34px;height:34px;font-size:.86rem;font-weight:700;display:grid}.brand-text{gap:2px;display:grid}.brand-title{color:#293037;margin:0;font-size:1.05rem;font-weight:650}.brand-subtitle{color:#6b6b68;margin:0;font-size:.78rem}.auth-actions{align-items:center;gap:10px;display:flex}.header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.menu-anchor{position:relative}.user-menu{z-index:10;background:#f7f4ec;border:1px solid #d5d1c7;border-radius:12px;gap:8px;min-width:220px;padding:10px;display:grid;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #2627282e}.user-menu-email{color:#535652;word-break:break-all;margin:0;font-size:.85rem}.header-nav{align-items:center;gap:8px;display:flex}.user-email{color:#4f4f4d;font-size:.84rem}.library-layout{grid-template-columns:minmax(280px,1fr) minmax(320px,1.1fr);gap:14px;min-height:0;padding:16px;display:grid}.library-left-column{grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0;display:grid}.library-left-column .history-card{flex-direction:column;min-height:0;display:flex}.library-left-column .history-card .scroll-area{flex:1;max-height:none}.player-layout{place-items:center;min-height:0;padding:16px;display:grid}.player-card,.list-card{background:#fbf9f3e6;border:1px solid #d8d2c6;border-radius:16px;padding:14px;box-shadow:0 6px 20px #61626214}.player-card{align-content:start;gap:14px;display:grid}.player-card-main{width:min(680px,100%)}.now-playing-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.card-label{text-transform:uppercase;letter-spacing:.08em;color:#7a786f;margin:0;font-size:.76rem}h1,h2{color:#2e343a;margin:0}h1{font-size:1.5rem;font-weight:680}h2{font-size:1.08rem}.track-title{color:#4d4f50;text-align:left;flex:1;min-height:24px;margin:0;font-size:1.1rem;font-weight:600}.player-controls{flex-shrink:0;align-items:center;gap:10px;display:flex}.icon-button{color:#34414d;cursor:pointer;background:#e7ebee;border:1px solid #c5c9cc;border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.icon-button:hover:not(:disabled){background:#d8e0e8}.icon-button:disabled{cursor:not-allowed;opacity:.55}.icon-button.small{border-radius:10px;width:34px;height:34px}.playlist-mode-block{color:#5f605e;gap:8px;font-size:.9rem;display:grid}.active-playlist-banner{color:#3b4853;background:#e9eff4;border:1px solid #c9d3db;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex}.mode-switch,.auth-mode-switch{gap:8px;display:flex}.mode-button{color:#555a5d;cursor:pointer;background:#f4f1e9;border:1px solid #d3d0c7;border-radius:10px;padding:8px 12px}.mode-button-active{color:#31414e;background:#e1e7eb;border-color:#b7c3cb}.primary-button,.ghost-button{cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:9px 14px;font-size:.9rem;display:inline-flex}.primary-button{color:#2f3f4d;background:#dce5ec;border-color:#b4c2ce}.primary-button:hover:not(:disabled){background:#cfdae3}.primary-button:disabled{opacity:.6;cursor:not-allowed}.ghost-button{color:#5f605f;background:#efede7;border-color:#d7d2c9}.card-header-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.muted-text{color:#77766f;margin:6px 0 0;font-size:.88rem}.scroll-area{gap:8px;min-height:0;max-height:340px;margin-top:10px;padding-right:6px;display:grid;overflow-y:auto}.history-item,.playlist-track-item,.playlist-item{background:#f8f5ed;border:1px solid #ddd8cd;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;height:70px;padding:10px;display:flex}.playlist-item-active{border-left:3px solid #5b768f}.playlist-current-card{margin-top:12px}.playlist-current-title{color:#2f2e2c;letter-spacing:-.01em;margin:0;font-size:1.05rem;font-weight:700}.playlist-selector-block{gap:8px;margin-top:10px;display:grid}.playlist-autocomplete-input{color:#3e3f3d;background:#fffdf8;border:1px solid #d5d1c6;border-radius:10px;width:100%;padding:10px 12px}.playlist-select{color:#363d41;text-align:left;cursor:pointer;background:0 0;border:none;font-size:.94rem}.playlist-list{gap:8px;margin-top:10px;display:grid}.playlist-rename-form{align-items:center;gap:8px;width:100%;display:flex}.playlist-rename-form input{color:#3e3f3d;background:#fffdf8;border:1px solid #d5d1c6;border-radius:8px;width:100%;padding:7px 10px}.playlist-toolbar{margin-top:10px;margin-bottom:8px}.item-title{color:#3d3e3b;margin:0;font-size:.92rem}.item-subtitle{color:#7b7b79;margin:2px 0 0;font-size:.8rem}.item-actions{gap:6px;display:flex}.error-text{color:#b24a35;margin:0;font-size:.9rem}.modal-overlay{background:#22232452;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.auth-modal{background:#f8f5ee;border:1px solid #d7d3c8;border-radius:14px;gap:12px;width:min(440px,100%);padding:14px;display:grid;box-shadow:0 16px 40px #28282838}.auth-modal-header{justify-content:space-between;align-items:center;display:flex}.auth-form{gap:8px;display:grid}.field-label{color:#54544f;font-size:.85rem}.auth-form input{color:#3e3f3d;background:#fcfbf7;border:1px solid #d5d1c6;border-radius:10px;padding:10px}@media (width<=1160px){.library-layout{grid-template-columns:1fr}}@media (width<=860px){.top-header{flex-direction:column;align-items:start}.header-nav{justify-content:flex-start;width:100%}.header-actions{justify-content:flex-end;width:100%}.auth-actions{justify-content:space-between;width:100%}.active-playlist-banner{flex-direction:column;align-items:flex-start}.now-playing-row{flex-direction:column;align-items:stretch}.track-title{text-align:left}.scroll-area{max-height:260px}}:root{color:#2f2e2c;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f2f0e8;font-family:Segoe UI,Trebuchet MS,sans-serif;font-size:16px;line-height:1.45}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}