* { box-sizing:border-box; }
.account-shell { width:min(1200px,calc(100% - 32px)); margin:36px auto 60px; color:var(--text); }
.account-shell h1 { margin:0 0 8px; font-size:clamp(1.65rem,4vw,2.4rem); line-height:1.2; }
.account-shell h2 { margin:0 0 12px; font-size:1.3rem; }
.account-nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:24px; }
.account-nav a,.account-nav button { box-sizing:border-box; height:38px; min-height:0; padding:0 12px; display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--panel); text-decoration:none; font:inherit; cursor:pointer; }
.account-nav .account-spacer { margin-left:auto; }
.account-card { padding:20px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
.account-form { display:grid; gap:14px; }
.account-form label { display:grid; gap:6px; font-weight:700; }
.field { height:42px; min-height:42px; padding:0 12px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--field); font:inherit; -webkit-appearance:none; appearance:none; }
.field:focus { outline:none; border-color:var(--accent); }
select.field { padding-right:34px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
input.field[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
.btn { min-height:42px; padding:0 16px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--panel); font:inherit; font-weight:700; cursor:pointer; }
.btn:hover,.btn:focus-visible { border-color:var(--accent); }
.btn-primary,.primary-action { color:var(--accent-text)!important; background:var(--accent)!important; border-color:var(--accent)!important; font-weight:700; cursor:pointer; }
.btn-primary:hover,.btn-primary:focus-visible,.primary-action:hover,.primary-action:focus-visible { filter:brightness(1.08); }
.btn-secondary { color:var(--text); background:var(--panel); border-color:var(--border); }
.btn-danger { color:#fff; background:#a52a2a; border-color:#a52a2a; }
.btn-danger:hover,.btn-danger:focus-visible { filter:brightness(1.08); }
.account-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.account-muted { color:var(--muted); }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:24px; }
.section-heading h2 { margin:0 0 12px; }
.account-error,.account-success { padding:11px 13px; border-radius:8px; }
.account-error { color:#fff; background:#a52a2a; }
.account-success { color:#fff; background:#287a45; }
.playlist-toast { position:fixed; z-index:20; top:20px; right:20px; max-width:min(420px,calc(100% - 40px)); display:flex; align-items:center; gap:16px; padding:12px 14px; border-radius:10px; color:#fff; box-shadow:0 8px 24px rgb(0 0 0 / .18); }
.playlist-toast-success { background:#287a45; }
.playlist-toast-error { background:#a52a2a; }
.playlist-toast-close { flex:none; width:24px; height:24px; padding:0; border:0; color:inherit; background:transparent; font-size:22px; line-height:1; cursor:pointer; }
.playlist-list { display:grid; gap:8px; }
.playlist-row { display:flex; align-items:center; gap:16px; min-height:62px; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--panel); transition:border-color .15s,background .15s; }
.playlist-row:hover,.playlist-row:focus-within { border-color:var(--accent); background:var(--hover-panel); }
.playlist-row.selected { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.playlist-row[aria-busy="true"],#playlistManager[aria-busy="true"] { opacity:.65; pointer-events:none; }
.playlist-row-main { display:flex; align-items:center; gap:14px; flex:1; min-width:0; color:var(--text); text-decoration:none; }
.playlist-row-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-row-main .account-muted { white-space:nowrap; }
.playlist-row-action { flex:none; color:var(--link); font-weight:700; text-decoration:none; }
.playlist-row-action:hover,.playlist-row-action:focus-visible { text-decoration:underline; }
.playlist-links { display:grid; gap:6px; margin-top:16px; }
.playlist-links code { padding:7px; border-radius:6px; background:var(--field); overflow-wrap:anywhere; }
.playlist-link { position:relative; }
.playlist-link code { display:block; height:42px; padding:13px 44px 6px 7px; border-radius:6px; color:var(--tag-text); background:var(--field); font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-button { width:34px; min-height:34px; padding:0; display:inline-grid; place-items:center; border-radius:8px; }
.icon-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.copy-url,.playlist-download { position:absolute; bottom:4px; margin:0; color:var(--tag-text)!important; background:transparent!important; border-color:transparent!important; }
.copy-url { right:4px; }
.playlist-download { right:40px; }
.copy-url:hover,.copy-url:focus-visible { color:var(--accent)!important; background:transparent!important; border-color:var(--accent)!important; }
.playlist-download:hover,.playlist-download:focus-visible { color:var(--accent)!important; background:transparent!important; border-color:var(--accent)!important; }
.inline-form { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.inline-form label { display:flex; align-items:center; gap:6px; font-weight:700; }
.inline-form .field { height:38px; min-height:38px; padding:0 10px; border-radius:8px; }
.inline-form select.field { padding-right:32px; background-position:right 10px center; }
.inline-form .btn { min-height:38px; padding:0 12px; border-radius:8px; }
.playlist-settings-actions { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; }
.playlist-delete-form { margin:0; }
.playlist-rotate-form { margin:0; }
.channel-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.channel-row.reorder-row { justify-content:flex-start; flex-wrap:wrap; }
.channel-title-editor { display:flex; flex:1 1 220px; align-items:center; min-width:0; }
.channel-title-editor .channel-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drag-handle { background:transparent; border:0; color:var(--muted); cursor:grab; font:inherit; line-height:1; padding:4px 6px; border-radius:6px; }
.drag-handle:hover,.drag-handle:focus-visible { color:var(--text); background:var(--tag); }
.channel-row.dragging { opacity:.5; border-color:var(--accent); }
.channel-rename-toggle { width:30px; min-height:30px; margin:0; }
.channel-rename-form { display:flex; flex:1 1 100%; flex-wrap:wrap; gap:8px; align-items:center; }
.channel-rename-form[hidden] { display:none; }
.channel-rename-form .field { min-height:34px; flex:1 1 auto; min-width:0; }
.channel-rename-form .icon-button { flex:none; color:var(--muted); }
.channel-rename-save:hover,.channel-rename-save:focus-visible { color:#287a45; }
.channel-rename-cancel:hover,.channel-rename-cancel:focus-visible { color:#a52a2a; }
.channel-row-play { flex:none; color:var(--link); background:var(--panel); border:1px solid var(--border); text-decoration:none; }
.channel-row-play svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.channel-row-play:hover,.channel-row-play:focus-visible { color:var(--accent); background:var(--tag); }
.channel-remove-form .btn-danger { border:1px solid #a52a2a; }
.channel-remove-form { margin:0; }
.channel-remove-button { border:1px solid #a52a2a; }
body.account-page { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
@media (max-width:640px) { .account-shell { width:min(100% - 24px,1200px); margin-top:22px; } .playlist-row { align-items:flex-start; flex-wrap:wrap; gap:5px 12px; } .playlist-row-main { flex:1 1 100%; align-items:flex-start; flex-direction:column; gap:2px; } .playlist-row-action { margin-left:auto; } .channel-title-editor { flex-basis:calc(100% - 52px); } }