*{box-sizing:border-box}:root{--bg:#f3f7ff;--surface:#fff;--surface2:#f8fbff;--text:#071a40;--muted:#61779f;--line:#d7e2f4;--primary:#1672ff;--primary2:#0c5fe4;--soft:#eaf3ff;--danger:#dc3c52;--shadow:0 14px 34px rgba(21,54,100,.07)}html[data-theme="dark"]{--bg:#0c1320;--surface:#121c2b;--surface2:#162234;--text:#eef5ff;--muted:#9db0ce;--line:#2a3b55;--primary:#4f96ff;--primary2:#2d7fee;--soft:#1a2c46;--shadow:0 14px 34px rgba(0,0,0,.22)}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{font-size:15px}button,input,select{font:inherit}a{color:var(--primary);text-decoration:none}button{cursor:pointer}.topbar{min-height:64px;padding:10px 22px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--text)}.brand-mark{width:34px;height:34px;display:grid;place-items:center;font-size:25px;font-weight:1000;font-style:italic;color:var(--primary)}.brand strong{display:block;font-size:17px}.brand small{display:block;color:var(--muted);margin-top:1px}.top-controls{display:flex;align-items:center;gap:9px;white-space:nowrap}.top-controls a{color:var(--muted)}.top-controls a.active{color:var(--primary);font-weight:800}.divider{height:22px;width:1px;background:var(--line);display:inline-block;margin:0 4px}.page-shell{width:min(1460px,calc(100% - 32px));margin:22px auto 34px}.browser-notice{border:1px solid #f0d59d;background:#fff7e7;color:#6c4a00;border-radius:13px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.browser-notice[hidden]{display:none}html[data-theme="dark"] .browser-notice{background:#312610;color:#ffe2a6;border-color:#624d20}.browser-notice strong{display:block;margin-bottom:2px}.browser-notice span{font-size:13px}.notice-close{border:0;background:transparent;color:inherit;font-size:22px}.hero-card,.player-card,.playlist-card,.library-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.hero-card{padding:26px 28px}.hero-copy{max-width:900px}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:900;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2rem,4vw,3.25rem);line-height:1.04;margin:8px 0 10px;letter-spacing:-.03em}.hero-copy p{color:var(--muted);max-width:850px;line-height:1.55}.quick-contexts{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 18px}.quick-chip{border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:999px;padding:9px 14px;font-weight:750}.quick-chip:hover,.quick-chip.active{border-color:var(--primary);background:var(--soft);color:var(--primary)}.generator-form{border-top:1px solid var(--line);padding-top:18px}.generator-form>label,.field label{display:block;font-weight:800;margin-bottom:7px}.intent-row{display:grid;grid-template-columns:1fr auto;gap:10px}input,select{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;min-height:44px;padding:10px 12px}input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--primary) 20%,transparent);border-color:var(--primary)}.generate-btn,.primary,.btn,.icon-btn,.tab-btn{border-radius:10px;border:1px solid var(--line);min-height:42px;padding:10px 14px;font-weight:800}.primary,.generate-btn{background:var(--primary);border-color:var(--primary);color:#fff}.primary:hover,.generate-btn:hover{background:var(--primary2)}.btn{background:var(--surface);color:var(--primary)}.btn.subtle{background:var(--surface2);color:var(--muted)}.preference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.loading-panel{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}.loading-panel[hidden]{display:none}.loading-panel p{margin:3px 0 0;color:var(--muted)}.spinner{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(370px,.75fr);gap:14px;margin-top:14px}.result-layout[hidden]{display:none}.player-card,.playlist-card,.library-card{padding:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.section-heading h2{margin:4px 0 0;font-size:22px}.player-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}#youtubePlayer{position:absolute;inset:0;width:100%;height:100%}.now-playing{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px}.now-playing strong{display:block;font-size:17px}.now-playing span{display:block;color:var(--muted);margin-top:4px}.player-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.icon-btn{width:44px;padding:0;background:var(--surface2);color:var(--primary)}.count-badge{min-width:34px;height:34px;border-radius:999px;background:var(--soft);color:var(--primary);display:grid;place-items:center;font-weight:900}.plan-summary{font-size:13px;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:12px}.playlist-items{display:grid;gap:8px;max-height:620px;overflow:auto;padding-right:3px}.playlist-item{display:grid;grid-template-columns:112px 1fr;gap:11px;border:1px solid var(--line);border-radius:12px;padding:9px;background:var(--surface2)}.playlist-item.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.playlist-thumb{width:112px;aspect-ratio:16/9;border-radius:8px;object-fit:cover;background:#111}.item-title{font-weight:850;line-height:1.28;margin-bottom:5px}.item-meta{font-size:12px;color:var(--muted);margin-bottom:8px}.item-actions{display:flex;gap:6px;flex-wrap:wrap}.item-actions button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:8px;padding:6px 8px;font-size:12px;font-weight:750}.item-actions button:hover{color:var(--primary);border-color:var(--primary)}.item-actions .danger:hover{color:var(--danger);border-color:var(--danger)}.library-card{margin-top:14px}.library-heading{align-items:flex-end}.library-tabs{display:flex;gap:7px;flex-wrap:wrap}.tab-btn{background:var(--surface2);color:var(--muted)}.tab-btn.active{background:var(--soft);border-color:var(--primary);color:var(--primary)}.table-tools{display:grid;grid-template-columns:minmax(260px,1fr) 220px 150px;gap:9px;margin-bottom:10px}.page-size-control{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding-left:11px;color:var(--muted)}.page-size-control select{border:0;min-height:42px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}.library-table{width:100%;border-collapse:collapse;min-width:980px}.library-table th,.library-table td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line)}.library-table th{font-size:12px;color:var(--muted);background:var(--surface2);white-space:nowrap}.library-table th[data-sort]{cursor:pointer}.library-table tbody tr:last-child td{border-bottom:0}.table-title{font-weight:800;max-width:420px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;background:var(--soft);color:var(--primary);font-size:12px;font-weight:800}.table-actions{display:flex;gap:6px;white-space:nowrap}.table-actions button{border:1px solid var(--line);background:var(--surface);color:var(--primary);border-radius:8px;padding:6px 9px;font-size:12px;font-weight:800}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}.pagination{display:flex;gap:5px}.page-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:8px;min-width:34px;height:34px;padding:0 9px}.page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.muted{color:var(--muted)}.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:var(--text);color:var(--surface);padding:12px 15px;border-radius:11px;box-shadow:var(--shadow);max-width:420px;font-weight:750}.footer{text-align:center;color:var(--muted);font-size:12px;padding:8px 16px 26px}@media(max-width:1050px){.result-layout{grid-template-columns:1fr}.playlist-items{max-height:none}.preference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.topbar{align-items:flex-start;flex-direction:column;padding:10px 14px}.top-controls{width:100%;overflow:auto}.page-shell{width:min(100% - 18px,1460px);margin-top:10px}.hero-card,.player-card,.playlist-card,.library-card{padding:15px;border-radius:14px}.intent-row{grid-template-columns:1fr}.generate-btn{width:100%}.preference-grid{grid-template-columns:1fr}.now-playing{align-items:flex-start;flex-direction:column}.table-tools{grid-template-columns:1fr}.library-heading{align-items:flex-start;flex-direction:column}.pagination-row{align-items:flex-start;flex-direction:column}}

.error-panel{
  margin-top:14px;border:1px solid color-mix(in srgb,var(--danger) 45%,var(--line));
  background:color-mix(in srgb,var(--danger) 8%,var(--surface));
  color:var(--text);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)
}
.error-panel strong{display:block;color:var(--danger);margin-bottom:4px}
.error-panel span{display:block;color:var(--muted);line-height:1.45;word-break:break-word}

.plan-summary{display:flex;align-items:flex-start;gap:9px}
.ai-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;border-radius:999px;
  padding:4px 8px;background:color-mix(in srgb,var(--primary) 14%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 45%,var(--line));
  color:var(--primary);font-size:11px;font-weight:900;white-space:nowrap
}
.ai-reason{
  margin:7px 0 9px;padding:7px 9px;border-left:3px solid var(--primary);
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
  border-radius:0 8px 8px 0;color:var(--muted);font-size:12px;line-height:1.4
}
.ai-reason strong{color:var(--primary)}
.bulk-tools{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0 11px;color:var(--muted);font-size:12px
}
.bulk-tools>div{display:flex;gap:7px;flex-wrap:wrap}
.danger-btn{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.danger-btn:hover{border-color:var(--danger)}
.danger-btn:disabled{opacity:.45;cursor:not-allowed}
.check-col{width:38px;text-align:center!important}
.check-col input{width:16px;min-height:16px;height:16px;padding:0}
.table-actions .danger-action{color:var(--danger)}
@media(max-width:720px){
  .bulk-tools{align-items:flex-start;flex-direction:column}
}