*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#181a1f;background:#f5f6f8;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{background:#fff;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;min-height:92px;padding:0 42px;display:flex}.brand{letter-spacing:-.6px;font-size:25px;font-weight:750}.subtitle{color:#81858d;margin-top:4px;font-size:13px}.content{flex:1;width:min(1200px,100% - 80px);margin:0 auto;padding:38px 0 60px}.search-section{margin-bottom:36px}.search-box{background:#fff;border:1px solid #dfe2e6;border-radius:10px;align-items:center;width:100%;max-width:500px;height:48px;padding:0 14px;display:flex}.search-icon{color:#8b9098;margin-right:8px;font-size:23px}.search-box input{background:0 0;border:0;outline:0;width:100%}.section-heading{margin-bottom:22px}.section-heading h1{margin:0;font-size:28px}.section-heading p{color:#858990;margin:6px 0 0;font-size:14px}.cd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.cd-card{text-align:left;background:#fff;border:1px solid #e0e2e6;border-radius:14px;align-items:center;min-height:145px;padding:22px;transition:transform .15s,box-shadow .15s;display:flex}.cd-card:hover{transform:translateY(-2px);box-shadow:0 9px 25px #14161914}.cd-disc{background:radial-gradient(circle,#fff 0 9px,#d9dce0 10px 12px,#b8bcc2 13px 15px,#e7e8ea 16px 30px,#c8cbd0 31px 33px,#e9eaec 34px);border-radius:50%;width:68px;min-width:68px;height:68px;margin-right:17px;box-shadow:inset 0 0 0 1px #bfc2c7,0 3px 8px #00000014}.disc-center{background:#f5f6f8;border:1px solid #aeb2b8;border-radius:50%;width:9px;height:9px;position:relative;top:29.5px;left:29.5px}.extra-card{border-style:dashed}.extra-icon{background:#f1f2f4;border:1px solid #dfe1e4;border-radius:13px;justify-content:center;align-items:center;width:68px;min-width:68px;height:68px;margin-right:17px;font-size:30px;display:flex}.cd-info{flex-direction:column;gap:5px;min-width:0;display:flex}.cd-info strong{font-size:16px}.cd-info span{color:#858990;font-size:13px}.card-arrow{color:#a1a5ab;margin-left:auto;font-size:28px}.back-button{color:#666b73;background:0 0;border:0;margin-bottom:25px;padding:0;font-size:14px;font-weight:600}.back-button:hover{color:#181a1f}.cd-detail-header{align-items:center;gap:20px;margin-bottom:25px;display:flex}.large-disc{background:radial-gradient(circle,#fff 0 10px,#d9dce0 11px 14px,#b8bcc2 15px 18px,#e7e8ea 19px 34px,#c8cbd0 35px 38px);border-radius:50%;width:76px;height:76px;box-shadow:inset 0 0 0 1px #bfc2c7,0 5px 14px #00000017}.large-disc-center{background:#f5f6f8;border:1px solid #aeb2b8;border-radius:50%;width:10px;height:10px;position:relative;top:33px;left:33px}.cd-detail-header h1{margin:0;font-size:27px}.cd-detail-header p{color:#858990;margin:5px 0 0;font-size:14px}.now-playing{z-index:500;background:#fff;border:1px solid #dedfe3;border-radius:12px;width:100%;margin-bottom:22px;padding:14px 17px 12px;position:sticky;top:12px;box-shadow:0 4px 16px #14161914}.now-playing-top{justify-content:space-between;align-items:center;gap:20px;display:flex}.now-playing-info{align-items:center;gap:12px;min-width:0;display:flex}.now-playing-icon{background:#f0f1f3;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:21px;display:flex}.now-playing-title{flex-direction:column;gap:3px;min-width:0;display:flex}.now-playing-title span{color:#8a8e95;text-transform:uppercase;letter-spacing:.6px;font-size:10px;font-weight:700}.now-playing-title strong{text-overflow:ellipsis;white-space:nowrap;max-width:600px;font-size:14px;overflow:hidden}.player-controls{align-items:center;gap:9px;display:flex}.player-button{background:#fff;border:1px solid #d2d5da;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:14px;display:flex}.player-button:hover{background:#f0f1f3}.stop-button{border-radius:9px}.progress-area{margin-top:12px}.progress-slider{--progress:0%;appearance:none;background:linear-gradient(to right, #454a51 var(--progress), #e3e5e8 var(--progress));cursor:pointer;border-radius:10px;outline:none;width:100%;height:6px}.progress-slider::-webkit-slider-thumb{appearance:none;background:#30343a;border:2px solid #fff;border-radius:50%;width:15px;height:15px}.progress-slider::-moz-range-thumb{background:#30343a;border:2px solid #fff;border-radius:50%;width:15px;height:15px}.time-row{color:#858990;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:7px;font-size:11px;display:grid}.time-row strong{color:#555a62}.time-row span:last-child{text-align:right}.file-toolbar{justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:18px;display:flex}.file-toolbar h2{margin:0;font-size:21px}.file-toolbar p{color:#858990;margin:6px 0 0;font-size:13px}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.tool-button{background:#fff;border:1px solid #d9dce0;border-radius:8px;height:39px;padding:0 13px;font-size:13px;font-weight:600}.tool-button:hover:not(:disabled){background:#f1f2f4}.tool-button:disabled{opacity:.45;cursor:not-allowed}.file-list{background:#fff;border:1px solid #dedfe3;border-radius:12px;max-height:520px;overflow-y:auto}.file-list.dragging{border-color:#777d85}.file-row{border-bottom:1px solid #eceef0;align-items:center;min-height:74px;padding:10px 17px;display:flex;position:relative}.file-row:last-child{border-bottom:0}.file-row:hover{background:#fafbfc}.file-row-selected{background:#f1f3f5}.file-row input[type=checkbox]{width:18px;height:18px;margin:0 17px 0 5px}.file-icon{color:#5e636b;background:#f0f1f3;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:43px;height:43px;margin-right:14px;font-size:20px;display:flex}.file-name{flex-direction:column;gap:3px;min-width:0;display:flex}.file-name strong{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.file-name span{color:#8a8e95;font-size:12px}.row-player{align-items:center;gap:7px;margin-left:auto;padding-left:15px;display:flex}.row-control{color:#30343a;background:#fff;border:1px solid #d6d9dd;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:12px;display:flex}.row-control:hover:not(:disabled){background:#f0f1f3}.row-control:disabled{opacity:.35;cursor:default}.row-stop{border-radius:8px}.row-active{background:#f1f2f4}.open-button{background:#fff;border:1px solid #d8dade;border-radius:7px;height:36px;margin-left:auto;margin-right:8px;padding:0 13px;font-size:13px;font-weight:600}.open-button:hover{background:#f0f1f3}.menu-container{position:relative}.more-button{color:#747980;background:0 0;border:0;border-radius:7px;width:36px;height:36px;font-size:22px}.more-button:hover{background:#eef0f2}.item-menu{z-index:1000;background:#fff;border:1px solid #dedfe3;border-radius:9px;width:145px;padding:5px;position:absolute;top:42px;right:0;box-shadow:0 12px 30px #14161921}.item-menu button{text-align:left;background:0 0;border:0;border-radius:6px;width:100%;height:38px;padding:0 11px;font-size:13px;display:block}.item-menu button:hover{background:#f1f2f4}.drop-zone{text-align:center;border:2px dashed #d2d5da;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-height:190px;margin-top:18px;display:flex}.drop-icon{border:1px solid #d7dade;border-radius:10px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:10px;font-size:25px;display:flex}.drop-zone span{color:#858990;margin-top:5px;font-size:13px}.drop-browse{background:#fff;border:1px solid #d5d8dc;border-radius:7px;height:35px;margin-top:15px;padding:0 13px;font-size:13px;font-weight:600}.selection-bar{background:#fff;border:1px solid #dedfe3;border-radius:9px;margin-bottom:10px;padding:10px 13px;font-size:13px}.empty{text-align:center;color:#858990;padding:55px 20px}.footer{color:#888c93;background:#fff;border-top:1px solid #e2e4e7;justify-content:space-between;align-items:center;min-height:68px;padding:0 42px;font-size:13px;display:flex}.modal-overlay{z-index:9999;background:#14161a7a;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{background:#fff;border-radius:15px;width:100%;max-width:460px;padding:28px;box-shadow:0 25px 70px #00000038}.modal h2{margin:0;font-size:22px}.modal p{color:#747880;margin:9px 0 20px;line-height:1.5}.modal-input{border:1px solid #d1d4d9;border-radius:9px;outline:none;width:100%;height:48px;padding:0 14px}.modal-actions{justify-content:flex-end;gap:9px;margin-top:22px;display:flex}.modal-actions button{border-radius:8px;min-width:90px;height:42px;padding:0 16px;font-weight:600}.modal-cancel{background:#fff;border:1px solid #d5d7db}.modal-confirm,.modal-delete{color:#fff;background:#181a1f;border:0}@media (width<=900px){.content{width:calc(100% - 36px)}.cd-grid{grid-template-columns:repeat(2,1fr)}.file-toolbar{flex-direction:column;align-items:flex-start}.toolbar-actions{justify-content:flex-start}}@media (width<=600px){.topbar{padding:0 16px}.content{width:calc(100% - 24px)}.cd-grid{grid-template-columns:1fr}.file-row{padding:9px 8px}.file-row input[type=checkbox]{margin-right:8px}.file-icon{width:38px;height:38px;margin-right:9px}.row-player{gap:4px;padding-left:5px}.row-control{width:35px;height:35px}.footer{padding:0 16px}}