@import url(https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap);*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#eceff2;--surface:#f4f6f8;--surface-strong:#fff;--border:#d3d8de;--border-hover:#aeb6bf;--text:#17191c;--muted:#5f6670;--muted-light:#8c949f;--red:#d94f4f;--accent:#13161a;--mono:"IBM Plex Mono",monospace;--sans:"Space Grotesk",sans-serif}body{background:radial-gradient(circle at 15% 20%,#fff 0,#f8f9fa 35%,#0000 72%),linear-gradient(180deg,#edf0f3,#e8ebef 48%,#e4e8ed);color:#17191c;color:var(--text);font-family:Space Grotesk,sans-serif;font-family:var(--sans);font-weight:700;min-height:100vh}.app{display:flex;flex-direction:column;gap:40px;margin:0 auto;max-width:1120px;padding:52px 32px 100px}header{align-items:baseline}.logo{color:#17191c;color:var(--text);font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.logo,.tagline{font-family:IBM Plex Mono,monospace;font-family:var(--mono)}.tagline{color:#8c949f;color:var(--muted-light);font-size:12px;font-weight:500}main{display:flex;flex-direction:column;gap:24px}@media (min-width:1024px){main{grid-gap:18px 20px;align-items:start;display:grid;gap:18px 20px;grid-template-areas:"input input" "player queue" "controls queue";grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr)}.input-section{grid-area:input}.player-wrap{grid-area:player}.controls{grid-area:controls}.queue-section{grid-area:queue;max-height:min(68vh,760px);overflow:auto;padding-right:4px}.queue-section::-webkit-scrollbar{width:8px}.queue-section::-webkit-scrollbar-thumb{background:#c8ced5;border-radius:8px}}.input-section{display:flex;flex-direction:column;gap:6px}.input-row{display:flex;gap:8px}.input-row input{background:#fff;background:var(--surface-strong);border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;color:#17191c;color:var(--text);flex:1 1;font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:13px;font-weight:500;outline:none;padding:11px 14px;transition:border-color .15s}.input-row input::placeholder{color:#8c949f;color:var(--muted-light)}.input-row input:focus{border-color:#aeb6bf;border-color:var(--border-hover)}.btn-add{align-items:center;background:#13161a;background:var(--accent);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:20px;font-weight:400;justify-content:center;transition:opacity .15s;width:42px}.btn-add:hover{opacity:.75}.error{color:#d94f4f;color:var(--red);font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:12px;font-weight:500}.player-wrap{aspect-ratio:16/9;background:#fff;background:var(--surface-strong);border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;box-shadow:0 12px 34px #1e242c1f;overflow:hidden;position:relative;width:100%}.player-placeholder{align-items:center;display:flex;inset:0;justify-content:center;position:absolute}.player-placeholder span{color:#8c949f;color:var(--muted-light);font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em}#yt-player{height:100%;width:100%}#yt-player iframe{height:100%!important;width:100%!important}.controls{align-items:center;display:flex;gap:8px}.btn-ctrl{background:#fff;background:var(--surface-strong);border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;color:#17191c;color:var(--text);cursor:pointer;font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.08em;padding:9px 20px;transition:border-color .15s}.btn-ctrl:hover:not(:disabled){border-color:#aeb6bf;border-color:var(--border-hover)}.btn-ctrl:disabled{cursor:default;opacity:.3}.btn-ctrl.primary{background:#13161a;background:var(--accent);border-color:#13161a;border-color:var(--accent);color:#fff}.btn-ctrl.primary:hover:not(:disabled){opacity:.8}.spacer{flex:1 1}.loop-tag{color:#8c949f;color:var(--muted-light);font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em}.queue-section{display:flex;flex-direction:column;gap:10px}.queue-header{align-items:center;display:flex;justify-content:space-between}.queue-label{color:#5f6670;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}.btn-clear,.queue-label{font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:11px;font-weight:700}.btn-clear{background:none;border:none;color:#8c949f;color:var(--muted-light);cursor:pointer;letter-spacing:.08em;transition:color .15s}.btn-clear:hover{color:#d94f4f;color:var(--red)}.queue-empty{color:#8c949f;color:var(--muted-light);font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:12px;font-weight:500;padding:12px 0}.queue-list{display:flex;flex-direction:column;gap:2px}.queue-item{align-items:center;background:#fff;background:var(--surface-strong);border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;display:flex;gap:10px;padding:10px 12px;transition:border-color .15s;-webkit-user-select:none;user-select:none}.queue-item.active{background:#f1f3f5;border-color:#aeb6bf;border-color:var(--border-hover)}.queue-item.dragging{box-shadow:0 4px 20px #00000014}.drag-handle{color:#8c949f;color:var(--muted-light);cursor:grab;flex-shrink:0;font-size:14px;line-height:1;transition:color .15s}.queue-item:hover .drag-handle{color:#5f6670;color:var(--muted)}.drag-handle:active{cursor:grabbing}.q-index{color:#8c949f;color:var(--muted-light);flex-shrink:0;font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:11px;font-weight:700;width:20px}.queue-item.active .q-index{color:#5f6670;color:var(--muted)}.q-id{color:#17191c;color:var(--text);flex:1 1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.q-id,.q-status{font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-weight:700}.q-status{color:#5f6670;color:var(--muted);flex-shrink:0;font-size:11px;width:14px}.btn-remove{background:none;border:none;color:#8c949f;color:var(--muted-light);cursor:pointer;flex-shrink:0;font-size:12px;line-height:1;padding:0 2px;transition:color .15s}.btn-remove:hover{color:#d94f4f;color:var(--red)}@media (max-width:900px){.app{gap:32px;max-width:760px;padding:40px 20px 80px}}@media (max-width:640px){.app{gap:24px;padding:22px 14px 56px}header{align-items:flex-start;flex-direction:column;gap:4px}main{gap:16px}.input-row{gap:6px}.input-row input{font-size:12px;min-width:0;padding:10px 12px}.btn-add{width:40px}.controls{flex-wrap:wrap;gap:6px}.btn-ctrl{flex:1 1;min-width:82px;padding:8px 12px}.spacer{display:none}.loop-tag{text-align:right;width:100%}.queue-item{gap:8px;padding:10px}.q-id{font-size:11px}}@media (max-width:380px){.logo{font-size:12px}.btn-ctrl,.loop-tag,.queue-label,.tagline{font-size:10px}.btn-ctrl{letter-spacing:.06em;min-width:0}.btn-remove,.q-index,.q-status{font-size:10px}}.btn-loop-toggle{background:none;border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;cursor:pointer;flex-shrink:0;font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:0 14px;transition:all .15s;white-space:nowrap}.btn-loop-toggle.on{background:#13161a;background:var(--accent);border-color:#13161a;border-color:var(--accent);color:#fff}.btn-loop-toggle.off{background:#fff;background:var(--surface-strong);border-color:#d3d8de;border-color:var(--border);color:#5f6670;color:var(--muted)}.btn-loop-toggle:hover{opacity:.8}.q-loading{color:#8c949f;color:var(--muted-light);font-weight:400;margin-left:2px}header{align-items:center;flex-wrap:wrap;justify-content:space-between}.header-left,header{display:flex;gap:12px}.header-left{align-items:baseline}.header-right{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.sync-badge{color:#8c949f;color:var(--muted-light);font-size:10px;font-weight:600}.btn-share,.sync-badge{font-family:IBM Plex Mono,monospace;font-family:var(--mono);letter-spacing:.08em}.btn-share{background:#fff;background:var(--surface-strong);border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;color:#17191c;color:var(--text);cursor:pointer;font-size:11px;font-weight:700;padding:7px 14px;transition:border-color .15s;white-space:nowrap}.btn-share:hover{border-color:#aeb6bf;border-color:var(--border-hover)}.btn-delete-session{background:none;border:1px solid #d3d8de;border:1px solid var(--border);border-radius:6px;color:#d94f4f;color:var(--red);cursor:pointer;font-family:IBM Plex Mono,monospace;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;padding:7px 14px;transition:all .15s;white-space:nowrap}.btn-delete-session:hover{background:#d94f4f;background:var(--red);border-color:#d94f4f;border-color:var(--red);color:#fff}
/*# sourceMappingURL=main.61b8cef4.css.map*/