:root{
  --bg-primary:#f4f4f3; --bg-secondary:#fff;
  --text-primary:#111111; --text-secondary:#5c5c5c; --text-tertiary:#9b9b9b;
  --accent:#2563eb; --border:rgba(0,0,0,.09);
  --shadow:0 1px 1px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.04);
  --shadow-hover:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.11),0 20px 48px rgba(37,99,235,.07);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.88);
  --glass-bg:rgba(255,255,255,.72); --glass-border:rgba(255,255,255,.58);
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --chip-gradient:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  --ease-ios:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --dur-fast:.28s; --dur-med:.42s; --dur-slow:.55s;
  --accent-subtle:rgba(37,99,235,.08); --accent-border:rgba(37,99,235,.35);
  --accent-focus-shadow:rgba(37,99,235,.12); --accent-focus-border:rgba(37,99,235,.55);
  --card-border-light:rgba(255,255,255,.6); --card-border-bottom:rgba(0,0,0,.08); --card-border-right:rgba(0,0,0,.06);
  --player-chrome-bg:rgba(255,255,255,.94);
  --player-chrome-border:rgba(15,23,42,.10);
  --player-chrome-text:rgba(15,23,42,.82);
  --player-chrome-text-muted:rgba(15,23,42,.62);
  --player-chrome-text-soft:rgba(15,23,42,.38);
  --player-chrome-btn-bg:rgba(15,23,42,.04);
  --player-chrome-btn-border:rgba(15,23,42,.10);
  --player-chrome-btn-hover:rgba(37,99,235,.08);
  --player-chrome-kbd-bg:rgba(15,23,42,.04);
  --player-chrome-kbd-border:rgba(15,23,42,.10);
}
body.dark{
  --bg-primary:#0d1520; --bg-secondary:#111e2e;
  --text-primary:#f1f5f9; --text-secondary:#94a3b8; --text-tertiary:#64748b;
  --accent:#3b82f6; --border:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.26),0 8px 24px rgba(0,0,0,.20);
  --shadow-hover:0 4px 8px rgba(0,0,0,.34),0 12px 28px rgba(0,0,0,.40),0 24px 56px rgba(59,130,246,.08);
  --inset-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --glass-bg:rgba(13,21,32,.68); --glass-border:rgba(255,255,255,.08);
  --player-chrome-bg:rgba(10,16,28,.95);
  --player-chrome-border:rgba(255,255,255,.07);
  --player-chrome-text:rgba(255,255,255,.85);
  --player-chrome-text-muted:rgba(255,255,255,.68);
  --player-chrome-text-soft:rgba(255,255,255,.35);
  --player-chrome-btn-bg:rgba(255,255,255,.06);
  --player-chrome-btn-border:rgba(255,255,255,.12);
  --player-chrome-btn-hover:rgba(255,255,255,.13);
  --player-chrome-kbd-bg:rgba(255,255,255,.08);
  --player-chrome-kbd-border:rgba(255,255,255,.18);
  background-image:radial-gradient(ellipse 120% 55% at 50% -8%,rgba(59,130,246,.06) 0%,transparent 60%);
}
body.dark header{
  background:var(--glass-bg);
  border-bottom-color:var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 20px rgba(0,0,0,.30);
}
body.dark .video-action-btn{background:rgba(30,41,59,.9);}
body.dark .video-action-btn:hover{background:rgba(51,65,85,.95);}
*{margin:0;padding:0;box-sizing:border-box}
input,select,textarea{border-radius:var(--radius-xs);}
html{scrollbar-gutter:stable}
body{font-family:'Crimson Pro',serif;background:var(--bg-primary);background-image:radial-gradient(ellipse 120% 55% at 50% -8%,rgba(255,255,255,.55) 0%,transparent 60%);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.container{max-width:1400px;margin:0 auto;padding:0 2rem}

header,.mobile-nav{backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);}
.sidebar,.mobile-feed-menu,.bundle-bar{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);}
header{
  border-bottom:none;
  background:var(--glass-bg);
  position:sticky;top:0;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
header .container{max-width:none;margin-left:0;margin-right:0;padding-left:.75rem;}
.header-content{
  padding:.65rem 0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.header-search-area{
  width:clamp(300px,45vw,680px);display:flex;align-items:center;gap:8px;
}
.header-search-wrap{position:relative;flex:1;min-width:0;}
.header-search-input{
  width:100%;min-width:0;padding:.52rem 1.6rem .52rem .75rem;
  border:1px solid var(--border);background:var(--bg-secondary);
  color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.8rem;
  border-radius:var(--radius-xs);
}
.header-search-x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;box-shadow:none;
  color:var(--text-tertiary);font-size:12px;cursor:pointer;
  padding:2px 6px;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.header-search-x:not(:disabled){opacity:1;pointer-events:auto;}
.header-search-x:hover{color:var(--text-primary);background:none;border:none;box-shadow:none;transform:translateY(-50%);}
.header-search-clear{padding:.48rem .65rem;font-size:.68rem;}
button.ghost.header-search-clear{background:rgba(255,255,255,.50);border:none;border-radius:100px;}
button.ghost.header-search-clear:hover{background:rgba(255,255,255,.80);border:none;box-shadow:none;transform:translateY(-1px);}
#btnShuffle{
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
#btnShuffle.shuffle-visible{opacity:1;pointer-events:auto;}
.logo{
  justify-self:start;
  font-family:'Inter Tight',sans-serif;font-size:1rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:.5rem;
}
.sidebar-toggle,.gear-btn{
  padding:0;width:32px;height:32px;border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);
  font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-med) var(--ease-ios);border-radius:var(--radius-xs);line-height:1;
}
.sidebar-toggle:hover,.gear-btn:hover{background:var(--accent-subtle);border-color:var(--accent-border);color:var(--text-primary)}
.right{justify-self:end;display:flex;align-items:center;gap:.75rem;}

.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:200px;
  background:rgba(255,255,255,.82);
  border-right:1px solid rgba(255,255,255,.55);
  box-shadow:2px 0 24px rgba(0,0,0,.06),inset -1px 0 0 rgba(255,255,255,.75);
  padding-top:70px;z-index:90;
  transition:transform var(--dur-slow) var(--ease-ios);
  overflow-y:auto;
}
body.dark .sidebar{
  background:rgba(13,21,32,.82);
  border-right-color:rgba(255,255,255,.07);
  box-shadow:2px 0 24px rgba(0,0,0,.40),inset -1px 0 0 rgba(255,255,255,.04);
}
.sidebar-section{padding:6px 0;}
.sidebar-divider{height:1px;background:var(--border);margin:4px 12px;}
.sidebar-item{
  display:flex;align-items:center;gap:10px;width:calc(100% - 16px);
  padding:9px 12px;border:none;background:transparent;
  color:var(--text-secondary);font-family:'Inter',sans-serif;
  font-size:.8rem;letter-spacing:.02em;
  cursor:pointer;transition:all .28s var(--ease-std);text-align:left;
  text-transform:none;border-radius:var(--radius-xs);margin:0 8px;
  white-space:nowrap;overflow:hidden;
}
.sidebar-item:hover{background:rgba(37,99,235,.09);color:var(--accent)}
.sidebar-item.active{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(37,99,235,.30),inset 0 1px 0 rgba(255,255,255,.18);
}
body.app-booting .sidebar-item.active{background:transparent;color:var(--text-secondary);font-weight:400;}
.sidebar-icon{width:20px;text-align:center;font-size:14px;flex-shrink:0;}
.sidebar-badge{
  margin-left:auto;font-size:.7rem;color:var(--text-tertiary);
  background:var(--bg-primary);padding:2px 6px;border-radius:3px;
}

.main-with-sidebar{margin-left:200px;transition:margin-left var(--dur-slow) var(--ease-ios);padding:0 2rem;}
body.sidebar-collapsed .main-with-sidebar{margin-left:0}
body.sidebar-collapsed .sidebar{transform:translateX(-200px)}

.feed-sticky-bar{
  position:sticky;top:var(--header-h,57px);z-index:91;
  background:transparent;
  margin:0 -2rem;padding:.5rem 2rem;
  border-bottom:none;
  display:flex;align-items:center;
}
body.dark .feed-sticky-bar{background:transparent;}
.feed-sticky-bar:empty{display:none;}
.feed-sticky-bar .bundle-bar{padding:4px 6px;margin:6px 0 6px 10px;}

button{
  padding:.7rem 1.1rem;border:1px solid var(--text-primary);
  background:var(--text-primary);color:var(--bg-secondary);
  font-family:'Inter',sans-serif;font-size:.82rem;cursor:pointer;
  transition:all var(--dur-med) var(--ease-ios),transform .2s var(--ease-spring);
  text-transform:none;letter-spacing:.01em;
  border-radius:var(--radius-xs);
  box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.12);
}
button:hover{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 4px 14px rgba(37,99,235,.28),inset 0 1px 0 rgba(255,255,255,.15);
  transform:translateY(-1px);
}
button:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.15);}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent;color:var(--text-primary);border:1px solid var(--border);box-shadow:none}
button.ghost:hover{background:var(--accent-subtle);border-color:var(--accent-border);box-shadow:none;transform:none}
button.danger{background:transparent;color:var(--accent);border:1px solid var(--accent-border)}
button.danger:hover{background:var(--accent-subtle)}

.tab{
  padding:.6rem 1rem;font-size:.78rem;background:transparent;color:var(--text-primary);
  border:1px solid var(--border);letter-spacing:.04em;border-radius:var(--radius-xs)
}
.tab.active{background:var(--text-primary);color:var(--bg-secondary);border-color:var(--text-primary)}
.tab.subtle{background:var(--bg-primary);border-color:var(--border);color:var(--text-primary)}
#btnShuffle{min-width:92px}
.tab:hover{background:var(--accent-subtle);border-color:var(--accent-border)}
.stats{font-family:'Inter',sans-serif;font-size:.75rem;color:var(--text-tertiary);white-space:nowrap}

.loading,.error,.empty-state{text-align:center;padding:4rem 2rem;animation:fadeIn .45s var(--ease-ios)}

.video-grid{
  padding:2.25rem 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:2.25rem;
}
.video-card,.note-card,.stat-item{
  background:var(--bg-secondary);
  border:1px solid var(--card-border-light);
  border-bottom-color:var(--card-border-bottom);border-right-color:var(--card-border-right);
  box-shadow:var(--shadow),var(--inset-hi);
}
.video-card:hover,.note-card:hover,.stat-item:hover{box-shadow:var(--shadow-hover),var(--inset-hi);}
.video-card{
  border-radius:var(--radius);
  transition:transform .5s var(--ease-spring), box-shadow .4s var(--ease-ios), border-color .3s var(--ease-ios), opacity .35s var(--ease-ios);
  position:relative;cursor:pointer;opacity:1;overflow:hidden;
}
body.dark .video-card,body.dark .note-card,body.dark .stat-item{
  border-color:rgba(255,255,255,.08);
  border-bottom-color:rgba(0,0,0,.25);border-right-color:rgba(0,0,0,.2);
}
.video-card.watched{opacity:0.5}
.video-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 0%,rgba(37,99,235,.03) 100%);
  opacity:0;transition:opacity .3s ease
}
.video-card:hover::before{opacity:1}
.video-card:hover{transform:translateY(-4px);border-color:rgba(37,99,235,.28)}
.video-card.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(37,99,235,.2),0 8px 24px var(--shadow-hover);}
.video-card.selected::before{opacity:1}
.video-card.selected.watched{opacity:.85}

.thumbnail-wrapper{position:relative;padding-bottom:56.25%;background:var(--bg-primary);overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.thumbnail{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.video-card:hover .thumbnail{transform:scale(1.02)}

.duration-badge{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.80);color:#fff;
  padding:2px 8px;border-radius:var(--radius-xs);
  font-family:'Fragment Mono',monospace;font-size:.7rem;
  font-weight:400;letter-spacing:.02em;backdrop-filter:blur(4px);
}

.resume-badge{
  position:absolute;top:8px;left:8px;
  background:var(--chip-gradient);color:#fff;
  padding:3px 8px;border-radius:var(--radius-xs);
  font-family:'Fragment Mono',monospace;font-size:.68rem;
  font-weight:400;letter-spacing:.02em;backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  animation:resumeBadgePulse 2s ease-in-out infinite;
}

@keyframes resumeBadgePulse{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.85);
  width:60px;height:60px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px) saturate(150%);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 4px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:all .42s var(--ease-spring);pointer-events:none
}
.video-card:hover .play-overlay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.play-icon{width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}

.video-info{padding:1rem 1.5rem;display:flex;gap:12px;}
.video-info-text{flex:1;min-width:0;}
.video-actions-inline{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}

.video-action-btn{
  width:32px;height:32px;border-radius:var(--radius-xs);
  background:rgba(255,255,255,.95);border:1px solid var(--border);
  color:var(--text-primary);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .35s var(--ease-std);padding:0;box-shadow:0 2px 4px rgba(0,0,0,.08);
  position:relative;z-index:10;
}
.video-action-btn:hover{background:#fff;transform:scale(1.05);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.video-action-btn.watched{background:rgba(76,175,80,.1);color:#4caf50;border-color:#4caf50}
.video-action-btn.watched:hover{background:rgba(76,175,80,.2)}
.video-action-btn.favorited{background:rgba(37,99,235,.1);color:var(--accent);border-color:var(--accent)}
.video-action-btn.favorited:hover{background:rgba(37,99,235,.2)}
.video-action-btn.remove-btn{color:var(--text-tertiary)}
.video-action-btn.remove-btn:hover{background:rgba(37,99,235,.1);color:var(--accent);border-color:var(--accent)}
.video-action-btn.removed-active{background:rgba(37,99,235,.15);color:var(--accent);border-color:var(--accent)}
.video-action-btn.removed-active:hover{background:rgba(37,99,235,.25)}

.video-title{
  font-size:1.25rem;font-weight:600;line-height:1.4;margin-bottom:.5rem;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.video-meta{
  display:flex;gap:1rem;font-family:'Inter',sans-serif;font-size:.75rem;color:var(--text-tertiary);
  letter-spacing:.05em
}
.video-channel{color:var(--text-secondary)}
.video-date{position:relative}
.video-date::before{content:'•';position:absolute;left:-.6rem}

.modal{
  display:none;position:fixed;inset:0;background:#000;
  z-index:1000;padding:0;align-items:stretch;
  opacity:0;transition:opacity var(--dur-med) var(--ease-ios);
}
.modal.active{display:flex;opacity:1}
.modal.closing{opacity:0}
.modal-layout{
  width:100%;height:100%;
  position:relative;display:flex;gap:0;
  transform:translateY(0);opacity:1;
  transition:transform var(--dur-slow) var(--ease-ios), opacity var(--dur-med) var(--ease-ios);
}
.modal.closing .modal-layout{transform:translateY(20px);opacity:0}
.modal-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.video-player{
  flex:1;min-height:0;width:100%;background:#000;
  position:relative;overflow:hidden;
}
#ytPlayer{position:absolute;inset:0;width:100%;height:100%}

.player-top-bar,.player-bar{
  display:flex;align-items:center;justify-content:flex-end;
  padding:10px 16px;background:var(--player-chrome-bg);
  border:none;
  font-family:'Inter',sans-serif;
}
.player-bar-actions{display:flex;gap:8px;}
.player-chrome-btn,.modal-close-btn,.player-bar-btn{
  padding:6px 14px;border:1px solid var(--player-chrome-btn-border);
  font-family:'Inter',sans-serif;font-size:.78rem;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-ios);
}
.player-chrome-btn:hover,.modal-close-btn:hover,.player-bar-btn:hover{
  background:var(--player-chrome-btn-hover);color:var(--text-primary)
}
.modal-close-btn{background:transparent;color:var(--player-chrome-text-muted);}
.player-bar-btn{
  border-radius:var(--radius-xs);
  background:var(--player-chrome-btn-bg);color:var(--player-chrome-text);
  display:flex;align-items:center;gap:5px;
}
.player-bar-btn.watched{background:rgba(76,175,80,.2);color:#4caf50;border-color:rgba(76,175,80,.4)}
.player-bar-btn.favorited{background:rgba(37,99,235,.2);color:var(--accent);border-color:rgba(37,99,235,.4)}
.player-bar-btn.remove:hover{background:rgba(37,99,235,.2);color:var(--accent);border-color:rgba(37,99,235,.4)}
.player-bar-btn.active{background:rgba(212,72,45,.15);color:var(--accent);border-color:rgba(212,72,45,.35)}
.player-bar-mobile-close{display:none;}
.pb-icon{font-size:14px;}
.pb-label{font-size:.78rem;}

.glass-panel{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.65);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-radius:var(--radius);
  box-shadow:0 32px 80px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
body.dark .glass-panel{
  background:rgba(13,21,32,.84);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 32px 80px rgba(0,0,0,.50),0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
}
.cfg-modal{
  display:none;position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.55);
  padding:24px;align-items:center;justify-content:center;
  opacity:0;transition:opacity var(--dur-med) var(--ease-ios);
}
.cfg-modal.active{display:flex;opacity:1}
.cfg-modal.closing{opacity:0}
.cfg-panel{
  width:min(900px,100%);
  padding:18px;
  transform:translateY(0);opacity:1;
  transition:transform var(--dur-slow) var(--ease-ios), opacity var(--dur-med) var(--ease-ios);
  max-height:calc(100vh - 48px);overflow-y:auto;
}
.cfg-modal.closing .cfg-panel{transform:translateY(12px);opacity:0}
.cfg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.cfg-title{font-family:'Inter',sans-serif;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase}
.cfg-desc{color:var(--text-secondary);font-size:.95rem;margin-top:6px}
.cfg-error{margin-top:10px;color:var(--accent);font-family:'Inter',sans-serif;font-size:.78rem;display:none}

.search-result{
  display:flex;align-items:center;gap:12px;padding:12px;
  border:1px solid var(--border);background:var(--bg-primary);
  border-radius:var(--radius-xs);
  margin-bottom:8px;cursor:pointer;transition:all .35s var(--ease-std);
}
.search-result:hover{background:var(--bg-secondary);border-color:var(--accent)}
.search-result.added{opacity:0.5;cursor:default;pointer-events:none;}
.search-result-thumb{width:48px;height:48px;border-radius:50%;object-fit:cover;}
.search-result-info{flex:1;min-width:0;}
.search-result-title{font-weight:600;font-size:.9rem;margin-bottom:2px;}
.search-result-subs{font-size:.7rem;color:var(--text-tertiary);font-family:'Inter',sans-serif;margin-bottom:4px;}
.search-result-desc{font-size:.75rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-result-btn{padding:.5rem 1rem;font-size:.75rem;white-space:nowrap;}
.search-loading,.search-empty,.empty-channels{text-align:center;padding:2rem;color:var(--text-tertiary);font-family:'Inter',sans-serif;font-size:.85rem;}

.channel-item{
  display:flex;align-items:center;gap:12px;padding:10px;
  border:1px solid var(--border);background:var(--bg-secondary);
  border-radius:var(--radius-xs);
  margin-bottom:8px;transition:all .35s var(--ease-std);cursor:pointer;
}
.channel-item:hover{background:rgba(37,99,235,.05);border-color:rgba(37,99,235,.3);}
.channel-checkbox{width:20px;height:20px;cursor:pointer;accent-color:var(--accent);}
.channel-item-thumb{width:40px;height:40px;border-radius:50%;object-fit:cover;}
.channel-item-name{flex:1;font-weight:500;font-size:.9rem;font-family:'Inter',sans-serif;}
.recs-toggle{
  display:flex;align-items:center;gap:4px;cursor:pointer;flex-shrink:0;
  font-family:'Inter',sans-serif;font-size:.7rem;
}
.recs-toggle input{accent-color:var(--accent);cursor:pointer;width:14px;height:14px;}
.recs-toggle-label{color:var(--text-tertiary);white-space:nowrap;}

.settings-section{margin-bottom:1.25rem;}
.settings-label{display:block;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;margin-bottom:.5rem;}
.settings-select{width:100%;padding:.7rem;border:1px solid var(--border);background:var(--bg-primary);font-family:'Inter',sans-serif;font-size:.85rem;color:var(--text-primary);border-radius:var(--radius-xs);}
.settings-hint{font-size:.72rem;color:var(--text-tertiary);font-family:'Inter',sans-serif;margin-top:.4rem;}
.settings-group-label,.resurface-note-label,.stat-item-label,
.continue-watching-header,.stats-section-title,.channels-tab-title{
  font-family:'Inter',sans-serif;text-transform:uppercase;color:var(--text-tertiary);
}
.settings-group-label{
  font-size:.72rem;font-weight:600;
  letter-spacing:.08em;
  margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.settings-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.65rem .75rem;border:1px solid var(--border);background:var(--bg-primary);
  border-radius:var(--radius-xs);
  font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;
}
.settings-toggle-row input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;}
.settings-shortcuts-section{margin-top:.2rem;}
.settings-shortcuts-btn{padding:.45rem .8rem;font-size:.72rem;letter-spacing:.06em;}
.autosave-status{font-family:'Inter',sans-serif;font-size:.72rem;color:var(--accent);transition:opacity .3s ease;}
.ghost-label{
  display:flex;align-items:center;justify-content:center;flex:1;
  padding:.7rem 1.1rem;border:1px solid var(--border);background:transparent;
  color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.75rem;
  cursor:pointer;text-transform:none;letter-spacing:.01em;
  border-radius:var(--radius-xs);
  transition:all var(--dur-med) var(--ease-ios);text-align:center;
}
.ghost-label:hover{background:var(--accent-subtle);border-color:var(--accent-border)}
.danger-btn{
  width:100%;padding:.7rem;border:1px solid rgba(37,99,235,.4);
  background:transparent;color:var(--accent);
  font-family:'Inter',sans-serif;font-size:.82rem;
  cursor:pointer;transition:all var(--dur-med) var(--ease-ios);text-transform:none;letter-spacing:.01em;
}
.danger-btn:hover{background:rgba(37,99,235,.1);border-color:var(--accent)}

.logout-btn{background:#111;color:#fff;border:1px solid #111;padding:.4rem .8rem;font-size:.75rem;}
.logout-btn:hover{background:#000;border-color:#000;color:#fff;}

.app-popup-modal{z-index:2300}
.app-popup-panel{width:min(520px,100%);padding:20px;}
.app-popup-title{
  font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-primary);
}
.app-popup-message{margin-top:.7rem;color:var(--text-secondary);font-size:.95rem;line-height:1.55;white-space:pre-line;}
.app-popup-input{
  width:100%;margin-top:1rem;padding:.7rem .8rem;border:1px solid var(--border);
  background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.85rem;
  border-radius:var(--radius-xs);
}
.app-popup-input:focus{outline:none;border-color:var(--accent-focus-border);box-shadow:0 0 0 2px var(--accent-focus-shadow);}
.app-popup-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:1rem}
.app-popup-actions button{min-width:110px}

.note-editor-panel{width:min(600px,100%)}
.note-editor-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:4px}
.note-editor-title{font-family:'Inter',sans-serif;font-size:.88rem;font-weight:600;color:var(--text-primary);line-height:1.4;flex:1}
.note-editor-close{padding:4px 8px;font-size:14px;flex-shrink:0}
.note-editor-meta{color:var(--text-tertiary);font-size:.78rem;margin-bottom:12px}
.note-editor-textarea{
  width:100%;min-height:220px;resize:vertical;border:1px solid var(--border);
  border-radius:var(--radius-xs);background:var(--bg-primary);color:var(--text-primary);
  font-family:'IBM Plex Serif',serif;font-size:1rem;line-height:1.6;padding:12px;
  box-sizing:border-box;outline:none;
}
.note-editor-textarea:focus{border-color:var(--accent-focus-border);box-shadow:0 0 0 2px var(--accent-focus-shadow)}
.note-editor-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

.skeleton-grid{
  padding:2.25rem 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:2.25rem;
  animation:skeleton-fade-in .3s ease both;
}
@keyframes skeleton-fade-in{from{opacity:0}to{opacity:1}}
.skeleton-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.skeleton-thumb,.skeleton-line{
  background:linear-gradient(90deg,var(--bg-primary) 25%,var(--border) 50%,var(--bg-primary) 75%);
  background-size:200% 100%;animation:shimmer 1.9s infinite;
}
.skeleton-thumb{width:100%;padding-bottom:56.25%;}
.skeleton-info{padding:1rem 1.5rem;}
.skeleton-line{height:12px;border-radius:3px;margin-bottom:10px;}
.skeleton-line.short{width:60%;}
.skeleton-line.tiny{width:35%;height:10px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.video-card.card-entering{
  animation:card-in .6s var(--ease-spring) backwards;
  animation-delay:calc(var(--card-base-delay,0ms) + var(--card-i,0) * 28ms);
}
@keyframes card-in{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.video-card.watched.card-entering{
  animation:card-in-watched .6s var(--ease-spring) backwards;
  animation-delay:var(--card-base-delay,0ms);
}
@keyframes card-in-watched{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:0.5;transform:translateY(0) scale(1)}
}

.resurface-note-card{
  position:relative;
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:var(--radius);padding:1rem 1.25rem 1rem 1.25rem;
  margin-top:.75rem;margin-bottom:.5rem;
  overflow:hidden;
}
@keyframes resurfaceEnter{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:translateY(0); }
}
.resurface-note-card.appearing{ animation:resurfaceEnter .35s ease forwards; }
@keyframes resurfaceExit{
  0%  { opacity:1; transform:translateY(0);   max-height:400px; margin-bottom:1.5rem; padding-top:1rem; padding-bottom:1rem; }
  40% { opacity:0; transform:translateY(-6px); }
  100%{ opacity:0; transform:translateY(-6px); max-height:0;     margin-bottom:0;     padding-top:0;    padding-bottom:0; }
}
.resurface-note-card.dismissing{ animation:resurfaceExit .35s ease forwards; }
.resurface-note-label{
  font-size:.7rem;font-weight:500;letter-spacing:.07em;margin-bottom:.5rem;
}
.resurface-note-close{
  position:absolute;top:.6rem;right:.6rem;
  padding:.2rem .45rem;font-size:.72rem;min-width:0;
}
.resurface-note-title{
  font-family:'Crimson Pro',Georgia,serif;font-size:1.05rem;font-weight:600;
  color:var(--text-primary);margin-bottom:.15rem;padding-right:1.5rem;
}
.resurface-note-channel{font-size:.75rem;color:var(--text-tertiary);margin-bottom:.55rem;}
.resurface-note-text{
  font-family:'Crimson Pro',Georgia,serif;font-size:.95rem;
  color:var(--text-secondary);line-height:1.55;white-space:pre-wrap;word-break:break-word;
  margin-bottom:.75rem;
}
.resurface-note-open{font-size:.8rem;padding:.25rem .65rem;}
.continue-watching{margin-bottom:1.5rem;}
.continue-watching-header,.stats-section-title,.channels-tab-title{
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
}
.continue-watching-header{margin-bottom:1rem;}
.continue-watching-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;}

.status-msg{
  text-align:center;padding:3rem 2rem;color:var(--text-tertiary);
  font-family:'Inter',sans-serif;font-size:.85rem;animation:fadeIn .45s var(--ease-ios);
}
.status-msg .status-icon{font-size:2rem;margin-bottom:.75rem;}
.status-msg p{margin-bottom:.3rem;}

.side-panel{
  width:0;overflow:hidden;background:var(--player-chrome-bg);
  border-left:1px solid var(--player-chrome-border);
  display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-ios);
}
.side-panel.open{width:380px;}
.side-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px 0 0;border-bottom:1px solid var(--player-chrome-border);
  font-family:'Inter',sans-serif;
}
.side-panel-tabs{display:flex;}
.side-panel-tab{
  padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--player-chrome-text-soft);font-family:'Inter',sans-serif;font-size:.78rem;
  cursor:pointer;transition:all .2s var(--ease-ios);text-transform:none;letter-spacing:0;
}
.side-panel-tab:hover{color:var(--player-chrome-text-muted)}
.side-panel-tab.active{color:var(--player-chrome-text);border-bottom-color:var(--accent)}
.side-panel-close{background:none;border:none;color:var(--player-chrome-text-soft);font-size:18px;cursor:pointer;padding:4px 8px;transition:color .2s var(--ease-ios);}
.side-panel-close:hover{color:var(--text-primary)}
.side-panel-body{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.notes-textarea{
  flex:1;resize:none;border:none;outline:none;
  background:transparent;color:var(--player-chrome-text);
  font-family:'IBM Plex Serif',serif;font-size:1rem;line-height:1.6;padding:16px;
}
.notes-textarea::placeholder{color:var(--player-chrome-text-soft)}
.notes-panel-status{
  padding:8px 16px;font-family:'Inter',sans-serif;font-size:.7rem;
  color:var(--player-chrome-text-soft);border-top:1px solid var(--player-chrome-border);
}
.desc-content{
  flex:1;overflow-y:auto;padding:16px;
  color:var(--player-chrome-text);font-family:'IBM Plex Serif',serif;font-size:.95rem;line-height:1.7;
}
.desc-content a{color:var(--accent);text-decoration:underline;}
.desc-placeholder,.desc-loading{color:var(--player-chrome-text-soft);font-family:'Inter',sans-serif;font-size:.82rem;padding-top:2rem;text-align:center;}

.notes-search-controls{padding:1.1rem 0 .3rem 0;}
.notes-search-row{display:flex;gap:8px;align-items:center;}
.notes-search-input{
  flex:1;min-width:0;padding:.65rem .75rem;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.8rem;
  border-radius:var(--radius-xs);
}
.notes-search-clear{padding:.58rem .75rem;font-size:.68rem;}
.notes-search-clear:disabled{opacity:.55;cursor:not-allowed;}
.notes-search-meta{margin-top:.45rem;color:var(--text-tertiary);font-family:'Inter',sans-serif;font-size:.72rem;}
.video-filter-wrapper{position:relative;}
.video-filter-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.48rem .6rem;border:none;border-radius:100px;
  background:rgba(255,255,255,.50);color:var(--text-primary);
  cursor:pointer;line-height:1;
}
.video-filter-btn:hover{background:rgba(255,255,255,.80);}
.video-filter-btn.has-filter{border-color:var(--accent);color:var(--accent);}
.video-filter-popup{
  position:absolute;top:calc(100% + 4px);left:0;z-index:200;
  background:var(--bg-secondary);border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:.75rem;min-width:230px;
  box-shadow:0 4px 16px rgba(0,0,0,.10);
}
@keyframes filterOpen{ from{opacity:0;transform:translateY(-6px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes filterClose{ from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-6px) scale(.98)} }
.video-filter-popup.opening{ animation:filterOpen .18s ease forwards; }
.video-filter-popup.closing{ animation:filterClose .15s ease forwards; }
.video-filter-popup-row{display:flex;align-items:center;gap:10px;margin-bottom:.55rem;}
.video-filter-popup-row:last-child{margin-bottom:0;}
.video-filter-popup-label{
  font-family:'Inter',sans-serif;font-size:.72rem;color:var(--text-tertiary);
  white-space:nowrap;min-width:46px;
}
.video-filter-select{
  flex:1;padding:.48rem .65rem;border:1px solid var(--border);
  background:var(--bg-primary);color:var(--text-secondary);
  font-family:'Inter',sans-serif;font-size:.75rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;
  padding-right:1.6rem;min-width:0;
}
.header-search-input:focus,.notes-search-input:focus,.video-filter-select:focus{outline:none;border-color:var(--accent-focus-border);box-shadow:0 0 0 2px var(--accent-focus-shadow);}
.notes-search-empty{
  display:none;text-align:center;padding:1.1rem 0 .2rem 0;
  color:var(--text-tertiary);font-family:'Inter',sans-serif;font-size:.8rem;
}
.notes-grid{padding:2.25rem 0;columns:3;column-gap:1.25rem;}
.note-card{
  break-inside:avoid;margin-bottom:1.25rem;
  border-radius:var(--radius-sm);
  padding:1.25rem;transition:transform .4s var(--ease-spring),box-shadow .35s var(--ease-ios),border-color .28s var(--ease-ios);cursor:default;
}
.note-card:hover{border-color:rgba(37,99,235,.28);transform:translateY(-2px)}
.note-card-title{font-family:'Inter',sans-serif;font-size:.82rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary);line-height:1.4;}
.note-card-text{font-size:.95rem;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;}
.note-card-meta{margin-top:.75rem;font-family:'Inter',sans-serif;font-size:.7rem;color:var(--text-tertiary);}
.note-card-delete{float:right;background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:14px;padding:2px 6px;transition:color .15s;}
.note-card-delete:hover{color:var(--accent)}
.note-timestamp{
  font-family:'Inter',sans-serif;font-size:.78em;
  color:var(--accent);text-decoration:none;
  border-bottom:1px dotted rgba(37,99,235,.4);cursor:pointer;
}
.note-timestamp:hover{border-bottom-color:var(--accent);}

.notes-panel-status kbd{
  background:var(--player-chrome-kbd-bg);border:1px solid var(--player-chrome-kbd-border);
  border-radius:3px;padding:0 4px;font-family:inherit;font-size:.85em;
  color:var(--player-chrome-text-muted);
}
.notes-ts-hint{
  margin-top:.5rem;font-family:'Inter',sans-serif;font-size:.7rem;
  color:var(--text-tertiary);line-height:1.5;
}
.notes-ts-hint kbd{
  background:var(--bg-primary);border:1px solid var(--border);
  border-radius:3px;padding:0 4px;font-family:inherit;font-size:.9em;
  color:var(--text-secondary);
}
.notes-ts-hint-example{
  font-family:'Inter',sans-serif;color:var(--accent);
  border-bottom:1px dotted rgba(37,99,235,.4);
}

.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:rgba(255,255,255,.80);
  border-top:1px solid rgba(255,255,255,.65);
  box-shadow:0 -4px 24px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.85);
  z-index:200;height:56px;justify-content:space-around;align-items:center;padding:0 16px;
}
body.dark .mobile-nav{
  background:rgba(13,21,32,.84);
  border-top-color:rgba(255,255,255,.07);
  box-shadow:0 -4px 24px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;padding:6px 20px;border:none;background:none;
  font-family:'Inter',sans-serif;transition:color .15s;color:var(--text-secondary);
}
.mobile-nav-item.active{color:var(--accent)}
.mobile-nav-icon{font-size:18px;}
.mobile-nav-label{font-size:.65rem;letter-spacing:.02em;}

.mobile-feed-menu{
  display:none;position:fixed;bottom:64px;left:8px;right:8px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius);
  box-shadow:0 -4px 32px rgba(0,0,0,.10),0 2px 12px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.9);
  z-index:210;padding:6px 0;
  animation:slideUpMobile .38s var(--ease-ios);
}
body.dark .mobile-feed-menu{
  background:rgba(13,21,32,.88);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 -4px 32px rgba(0,0,0,.40),0 2px 12px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.05);
}
.mobile-feed-menu.open{display:block}
.mobile-feed-option{
  display:block;width:100%;text-align:left;
  padding:14px 20px;border:none;background:transparent;
  color:var(--text-secondary);font-family:'Inter',sans-serif;
  font-size:.85rem;cursor:pointer;transition:all .25s var(--ease-std);text-transform:none;letter-spacing:0;
}
.mobile-feed-option:hover,.mobile-feed-option:active{background:rgba(37,99,235,.05);color:var(--text-primary)}
.mobile-feed-option.active{color:var(--accent);font-weight:500;background:rgba(37,99,235,.06)}
.mobile-feed-divider{height:1px;background:var(--border);margin:4px 16px;}

@keyframes slideUpMobile{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:900px){
  .notes-grid{columns:2;}
  .side-panel.open{width:280px;}
  .sidebar{width:180px;padding-top:60px;}
  .main-with-sidebar{margin-left:180px;}
}
.mobile-search-btn,.mobile-search-close{display:none;}
@media(max-width:768px){
  .sidebar{display:none!important;}
  .sidebar-toggle{display:none!important;}
  .main-with-sidebar{margin-left:0!important;padding:0 1rem;padding-bottom:64px;}
  .container{padding:0;}
  .feed-sticky-bar{margin:0 -1rem;padding:.45rem 1rem;}
  .mobile-nav{display:flex;}
  .header-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1rem;}
  .header-search-area{display:none;}
  .mobile-search-btn{display:flex;}
  .header-content.search-open .header-search-area{display:flex;flex:1;width:auto;min-width:0;}
  .header-content.search-open .logo,
  .header-content.search-open .mobile-search-btn{display:none;}
  .header-content.search-open .right{display:none;}
  .header-content.search-open .mobile-search-close{display:flex;}
  .logo{font-size:.85rem;}
  .logo-text{display:flex;flex-direction:column;line-height:1.1;}
  .stats{font-size:.68rem;}
  .video-grid{grid-template-columns:1fr;gap:1rem;padding:1rem 0;}
  .video-card:hover{transform:none;box-shadow:none;}
  .video-info{padding:.75rem 1rem;}
  .video-title{font-size:1.05rem;margin-bottom:.3rem;}
  .video-meta{font-size:.68rem;gap:.6rem;}
  .modal-layout{flex-direction:column!important;overflow-y:hidden;}
  .modal-main{flex:none;width:100%;}
  .video-player{aspect-ratio:16/9;flex:none;}
  .player-top-bar{display:none!important;}
  .player-bar-mobile-close{display:flex;}
  .player-bar{padding:6px 8px;gap:4px;flex-wrap:nowrap;}
  .modal-close-btn{font-size:.75rem;padding:6px 10px;flex-shrink:0;}
  .player-bar-actions{display:flex;gap:3px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .player-bar-btn{padding:6px 8px;flex-shrink:0;gap:3px;}
  .pb-label{display:none;}
  .pb-icon{font-size:16px;}
  .side-panel{width:100%!important;border-left:none!important;border-top:1px solid var(--player-chrome-border);transition:none;flex:1;min-height:0;}
  .side-panel-header{display:none;}
  .side-panel:not(.open){display:none;}
  .side-panel-body{overflow-y:auto;}
  .notes-textarea{min-height:160px;font-size:.95rem;}
  .notes-grid{columns:1;}
  .note-card{margin-bottom:1rem;}
  .cfg-panel{padding:12px;max-height:90vh;overflow-y:auto;}
  .cfg-top{flex-direction:column;gap:8px;}
  .app-popup-panel{padding:14px;}
  .app-popup-actions{flex-direction:column-reverse;}
  .app-popup-actions button{width:100%;}
  .continue-watching-grid{grid-template-columns:1fr;}
  .skeleton-grid{grid-template-columns:1fr;gap:1rem;padding:1rem 0;}
  .resume-badge{font-size:.62rem;padding:2px 6px;}
}

@media(max-width:400px){
  .video-action-btn{width:28px;height:28px;font-size:14px;}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================
   STATS TAB
   ============================================ */
.stats-page{padding:2.25rem 0;}

.stats-section{margin-bottom:3rem;}

.stats-section-header{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;
}
.stats-section-total{
  font-family:'Inter',sans-serif;font-size:.8rem;color:var(--text-secondary);
}

.stats-chart{
  display:flex;align-items:flex-end;gap:6px;
}
.stats-chart-year{gap:3px;}

.chart-col{
  display:flex;flex-direction:column;align-items:center;
  flex:1;min-width:0;
}
.chart-bar-track{
  width:100%;height:120px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.stats-chart-year .chart-bar-track{height:90px;}

.chart-bar-fill{
  width:100%;background:var(--border);
  border-radius:2px 2px 0 0;
  transition:height .3s ease;
  min-height:2px;
}
.chart-col.active .chart-bar-fill{
  background:var(--accent-focus-border);
}

.chart-col-label{
  font-family:'Inter',sans-serif;font-size:.68rem;
  color:var(--text-tertiary);margin-top:6px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;text-align:center;
}
.chart-col.active .chart-col-label{color:var(--text-secondary);}

.chart-col-value{
  font-family:'Inter',sans-serif;font-size:.65rem;
  color:var(--text-tertiary);margin-top:2px;text-align:center;
  min-height:1em;
}

.stats-all-time{
  display:flex;gap:1rem;flex-wrap:wrap;
}
.stat-item{
  flex:1;min-width:120px;padding:1.1rem 1.25rem;
  border-radius:var(--radius-sm);
  transition:transform .35s var(--ease-spring),box-shadow .3s var(--ease-ios);
}
.stat-item:hover{transform:translateY(-2px);}

.stat-item-value{
  font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:500;
  color:var(--text-primary);margin-bottom:.3rem;
}
.stat-item-label{font-size:.72rem;letter-spacing:.05em;}

@media(max-width:600px){
  .stats-chart{gap:3px;}
  .stats-chart-year{gap:2px;}
  .chart-bar-track{height:80px;}
  .stats-chart-year .chart-bar-track{height:60px;}
  .chart-col-label{font-size:.6rem;}
  .chart-col-value{font-size:.58rem;}
  .stat-item{min-width:90px;padding:.8rem 1rem;}
  .stat-item-value{font-size:1.2rem;}
  .channels-search-row{flex-direction:column;}
}

/* ============================================
   BUNDLES
   ============================================ */

/* Modal tab bar */
.cfg-tab-bar{
  display:flex;border-bottom:1px solid var(--border);
  margin:0 -1.5rem;padding:0 1.5rem;
}

/* Channels tab — full-page layout (no panel padding to compensate for) */
.channels-tab-bar{margin:0;padding:0;}
@keyframes cfgTabFromRight{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes cfgTabFromLeft {from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
.channels-tab-panel.tab-enter-right{animation:cfgTabFromRight 200ms var(--ease-ios) both}
.channels-tab-panel.tab-enter-left {animation:cfgTabFromLeft  200ms var(--ease-ios) both}
.channels-tab-header{padding:2.25rem 0 1rem;}
.channels-tab-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.channels-search-section{padding:1.25rem 0 1.5rem;}
.channels-search-row{display:flex;gap:8px;}
.channels-search-input{
  flex:1;padding:.7rem;border:1px solid var(--border);
  background:var(--bg-primary);font-family:'Inter',sans-serif;
  font-size:.85rem;color:var(--text-primary);border-radius:var(--radius-xs);
}
.channels-search-input:focus{outline:none;border-color:var(--accent-focus-border);box-shadow:0 0 0 2px var(--accent-focus-shadow);}
.channels-list{display:flex;flex-direction:column;}
.cfg-tab{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:.6rem .9rem;margin-bottom:-1px;
  font-family:'Inter',sans-serif;font-size:.72rem;
  text-transform:none;letter-spacing:.01em;
  color:var(--text-tertiary);cursor:pointer;white-space:nowrap;
}
.cfg-tab.active{color:var(--text-primary);border-bottom-color:var(--accent);}
.cfg-tab:hover:not(.active){color:var(--text-secondary);}

/* Bundle list items (in modal) */
.bundle-list{display:flex;flex-direction:column;}
.bundle-list-item{border-bottom:1px solid var(--border);}
.bundle-list-header{
  display:flex;align-items:center;gap:.6rem;padding:.65rem 0;
}
.bundle-list-icon{font-size:1.1rem;width:1.5rem;text-align:center;flex-shrink:0;}
.bundle-list-name{
  flex:1;font-family:'Inter',sans-serif;font-size:.82rem;color:var(--text-primary);
}
.bundle-list-count{
  font-size:.72rem;color:var(--text-tertiary);font-family:'Inter',sans-serif;
}
.bundle-list-edit,.bundle-list-delete,.bundle-list-pencil{
  padding:.2rem .45rem;font-size:.72rem;min-width:0;letter-spacing:0;
}
.bundle-list-delete{color:var(--accent);}
.bundle-channels-list{
  padding:.4rem 0 .75rem 2.1rem;
  display:flex;flex-direction:column;gap:.4rem;
}

/* Channel checkbox rows (used in bundle expand, new bundle form, assign prompt) */
.bundle-channel-checkbox-row,.bundle-assign-row{
  display:flex;align-items:center;gap:.5rem;
  font-family:'Inter',sans-serif;font-size:.8rem;
  color:var(--text-secondary);cursor:pointer;
}
.bundle-ch-thumb{
  width:20px;height:20px;border-radius:50%;
  object-fit:cover;flex-shrink:0;
}

/* New bundle creation form */
.new-bundle-form{
  padding:.75rem 0 1rem;display:flex;flex-direction:column;
  gap:.65rem;border-bottom:1px solid var(--border);margin-bottom:.75rem;
}
.bundle-form-row{display:flex;gap:.5rem;}
.bundle-name-input,.bundle-emoji-input{
  padding:.45rem .6rem;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);
  font-family:'Inter',sans-serif;font-size:.82rem;
  border-radius:var(--radius-xs);
}
.bundle-name-input{flex:1;}
.bundle-emoji-input{width:3.5rem;text-align:center;font-size:1rem;}
.bundle-form-channels{
  display:flex;flex-direction:column;gap:.4rem;
  max-height:180px;overflow-y:auto;padding:.25rem 0;
}
.bundle-form-actions{display:flex;gap:.5rem;justify-content:flex-end;}

/* Bundle bar (persistent feed-top selector) */
.bundle-bar{
  display:inline-flex;gap:.3rem;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
  padding:.38rem .6rem;margin-bottom:0;
  background:rgba(255,255,255,.68);
  border:none;
  border-radius:100px;
  box-shadow:0 2px 4px rgba(0,0,0,.07), 0 6px 18px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.07);
  max-width:100%;
}
.bundle-bar::-webkit-scrollbar{display:none;}
body.dark .bundle-bar{
  background:rgba(13,21,32,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.20);
}
.bundle-pill{
  padding:.25rem .72rem;border:none;
  background:rgba(255,255,255,.50);font-family:'Inter',sans-serif;
  font-size:.72rem;color:var(--text-secondary);
  cursor:pointer;border-radius:100px;white-space:nowrap;flex-shrink:0;
  transition:all .25s var(--ease-ios);
  text-transform:none;letter-spacing:0;
}
.bundle-pill.active{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 10px var(--accent-border),inset 0 1px 0 rgba(255,255,255,.08);
}
.bundle-pill:hover:not(.active){background:rgba(255,255,255,.80);color:var(--text-primary);}
body.dark .bundle-pill{background:rgba(255,255,255,.08);}
body.dark .bundle-pill:hover:not(.active){background:rgba(255,255,255,.10);}
body.dark button.ghost.header-search-clear{background:rgba(255,255,255,.08);}
body.dark button.ghost.header-search-clear:hover{background:rgba(255,255,255,.15);}
body.dark .video-filter-btn{background:rgba(255,255,255,.08);}
body.dark .video-filter-btn:hover{background:rgba(255,255,255,.15);}

/* Bundle stats note */
.stats-bundle-note{
  margin-top:1rem;font-size:.75rem;color:var(--text-tertiary);
  font-family:'Inter',sans-serif;
}

/* Bundle assign prompt (after adding a channel) */
.bundle-assign-prompt{
  background:var(--bg-primary);border:1px solid var(--border);
  border-radius:var(--radius-xs);
  padding:.75rem 1rem;margin-bottom:1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.bundle-assign-title{
  font-family:'Inter',sans-serif;font-size:.78rem;font-weight:500;
  color:var(--text-primary);margin-bottom:.15rem;
}

@media(max-width:600px){
  .bundle-bar{gap:.25rem;padding:.25rem .35rem;}
  .bundle-pill{font-size:.68rem;padding:.2rem .55rem;}
  .cfg-tab{font-size:.68rem;padding:.5rem .65rem;}
}

/* ============================================
   ONBOARDING OVERLAY
   ============================================ */

.onb-overlay{
  position:fixed;inset:0;z-index:3000;
  background:var(--bg-primary);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
}
.onb-card{
  width:100%;max-width:460px;
  padding:2.5rem;
}
.onb-step{ display:flex;flex-direction:column;gap:1rem; }
@keyframes onbEnter{ from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes onbExit{ from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-12px) scale(.98)} }
.onb-step-enter{ animation:onbEnter .28s ease forwards; }
.onb-step-exit{ animation:onbExit .18s ease forwards; }
.onb-logo{
  font-family:'Inter Tight',sans-serif;font-size:1rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:.25rem;
}
.onb-headline{
  font-family:'Crimson Pro',serif;font-size:2.2rem;font-weight:600;
  line-height:1.25;color:var(--text-primary);margin:0;
}
.onb-sub{
  font-size:1rem;color:var(--text-secondary);line-height:1.6;margin:0;
}
.onb-step-title{
  font-family:'Inter',sans-serif;font-size:.95rem;font-weight:500;
  color:var(--text-primary);letter-spacing:.02em;margin:0;
}
.onb-step-sub{
  font-size:.9rem;color:var(--text-secondary);margin:0;
}
.onb-optional{
  font-size:.78rem;color:var(--text-tertiary);font-weight:400;
}
.onb-signin-hint{
  font-size:.85rem;color:var(--text-secondary);text-align:center;margin:0;
}
.onb-signin-hint a{color:var(--accent);text-decoration:none;}
.onb-signin-hint a:hover{text-decoration:underline;}
.onb-back-row{margin-bottom:-.25rem;}
.onb-back-row a{
  font-family:'Inter',sans-serif;font-size:.78rem;color:var(--text-secondary);
  text-decoration:none;
}
.onb-back-row a:hover{color:var(--text-primary);}

/* Inputs */
.onb-input{
  width:100%;padding:.75rem;
  border:1px solid var(--border);
  background:var(--bg-primary);color:var(--text-primary);
  font-family:'Inter',sans-serif;font-size:.85rem;
  border-radius:var(--radius-xs);outline:none;
}
.onb-input:focus{border-color:var(--text-tertiary);}

/* Primary button — reuses base button style, full-width */
.onb-primary{width:100%;margin-top:.25rem;}
.onb-divider{display:flex;align-items:center;gap:.75rem;color:var(--text-tertiary);font-size:.78rem;font-family:'Inter',sans-serif;margin:.25rem 0;}
.onb-divider::before,.onb-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.onb-google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg-primary);border:1px solid var(--border);color:var(--text-primary);
  padding:.75rem 1rem;font-family:'Inter',sans-serif;font-size:.85rem;cursor:pointer;
  border-radius:var(--radius-xs);transition:border-color .28s var(--ease-std),background .28s var(--ease-std);text-transform:none;letter-spacing:0;
}
.onb-google-btn:hover{border-color:var(--text-secondary);background:var(--bg-secondary);}
.onb-google-btn:disabled{opacity:.5;cursor:not-allowed;}
.onb-skip{
  width:100%;background:transparent;color:var(--text-secondary);
  border:none;font-size:.82rem;cursor:pointer;padding:.4rem;
  text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;
}
.onb-skip:hover{color:var(--text-primary);background:transparent;border:none;}

/* Error */
.onb-error{
  padding:.75rem;background:var(--accent-subtle);
  color:var(--accent);font-size:.83rem;font-family:'Inter',sans-serif;
  border:1px solid rgba(37,99,235,.2);display:none;
}

/* Channel search */
.onb-search-row{display:flex;gap:8px;}
.onb-search-input{flex:1;}
.onb-search-btn{flex-shrink:0;padding:.75rem 1.25rem;white-space:nowrap;}
.onb-results{
  max-height:240px;overflow-y:auto;
  display:flex;flex-direction:column;gap:1px;
}
.onb-result-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.55rem 0;border-bottom:1px solid var(--border);
}
.onb-result-item:last-child{border-bottom:none;}
.onb-result-thumb{
  width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.onb-result-info{flex:1;min-width:0;}
.onb-result-name{
  font-family:'Inter',sans-serif;font-size:.8rem;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.onb-result-subs{font-size:.72rem;color:var(--text-tertiary);}
.onb-add-btn{
  flex-shrink:0;padding:.35rem .75rem;font-size:.75rem;
  min-width:52px;white-space:nowrap;
}
.onb-add-btn.onb-added{
  background:transparent;color:var(--text-tertiary);
  border-color:var(--border);cursor:default;
}
.onb-add-btn.onb-added:hover{
  background:transparent;border-color:var(--border);color:var(--text-tertiary);
}
.onb-search-loading,.onb-search-empty{
  padding:.75rem 0;font-size:.83rem;color:var(--text-tertiary);
  font-family:'Inter',sans-serif;text-align:center;
}

/* My channels list in onboarding */
.onb-my-channels{ min-height:0; }
.onb-my-channels-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:120px;overflow-y:auto;
  border:1px solid var(--border);padding:.5rem;
}
.onb-my-channel-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.2rem 0;
}

/* Bundle step */
.onb-bundle-row{display:flex;gap:.5rem;}
.onb-emoji-input{width:4rem;text-align:center;font-size:1.1rem;}
.onb-bundle-name-input{flex:1;}
.onb-bundle-channels{
  display:flex;flex-direction:column;gap:.35rem;
  max-height:150px;overflow-y:auto;
}
.onb-bundle-ch-row{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.8rem;color:var(--text-secondary);
}
.onb-bundle-ch-row:hover{color:var(--text-primary);}

@media(max-width:480px){
  .onb-card{padding:1.75rem 1.25rem;}
  .onb-headline{font-size:1.6rem;}
}

/* ============================================
   SETTINGS NEW-DOT
   ============================================ */

#btnSettings{ position:relative; }
.settings-new-dot{
  display:none;
  position:absolute;top:3px;right:3px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  pointer-events:none;
}
.settings-new-dot.visible{ display:block; }

/* ============================================
   EMPTY STATES WITH CTAs
   ============================================ */

.empty-state{
  text-align:center;padding:4rem 2rem;
  animation:fadeIn .45s var(--ease-ios);
}
.empty-state p{ margin:.25rem 0; }
.empty-sub{
  font-size:.9rem;color:var(--text-secondary);
}
.empty-hint{
  font-size:.85rem;color:var(--text-tertiary);
  font-family:'Inter',sans-serif;margin-top:.5rem !important;
}
.empty-hint kbd{
  background:var(--bg-primary);border:1px solid var(--border);
  padding:1px 5px;font-family:'Inter',sans-serif;font-size:.8em;
}
.empty-state button{
  margin-top:1.25rem;
}

/* ============================================
   NOTES FIRST-VIDEO TIP
   ============================================ */

.notes-first-tip{
  display:flex;flex-direction:column;gap:.5rem;
  padding:.75rem 1rem;margin:.5rem;
  background:var(--bg-primary);border:1px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:.82rem;color:var(--text-secondary);
  font-family:'Inter',sans-serif;line-height:1.5;
  flex-shrink:0;
}
.notes-first-tip kbd{
  background:var(--bg-secondary);border:1px solid var(--border);
  padding:1px 5px;font-family:inherit;font-size:.85em;
}
.notes-first-tip button{
  align-self:flex-end;padding:.3rem .75rem;font-size:.72rem;
  text-transform:none;letter-spacing:.01em;
  margin-top:.25rem;
}

/* ============================================
   AUTH MODAL
   ============================================ */
#authModal{background:rgba(0,0,0,.7);z-index:2000;}
#authModal .modal-content{max-width:400px;padding:2.5rem;background:var(--bg-secondary);border:1px solid var(--border);}
.auth-modal-header{text-align:center;margin-bottom:2rem;}
.auth-modal-title{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:500;margin-bottom:.5rem;color:var(--text-primary);}
.auth-modal-subtitle{font-size:.9rem;color:var(--text-secondary);}
.auth-field{margin-bottom:1rem;}
.auth-field-last{margin-bottom:1.5rem;}
.auth-input{width:100%;padding:.8rem;border:1px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',sans-serif;font-size:.9rem;}
#loginForm > button,#signupForm > button{width:100%;margin-bottom:1rem;}
.auth-link-row{text-align:center;font-size:.85rem;color:var(--text-secondary);}
.auth-link{color:var(--accent);text-decoration:none;font-weight:500;}
#authError{margin-top:1rem;padding:.8rem;background:rgba(37,99,235,.08);color:var(--accent);font-size:.85rem;border-radius:var(--radius-xs);}

/* ============================================
   SETTINGS MODAL — EXTRA
   ============================================ */
.settings-body{padding:.5rem 0;}
.settings-group-label-spaced{margin-top:1.5rem;}
.account-info-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem;border:1px solid var(--border);background:var(--bg-primary);}
.account-user-label{font-family:'Inter',sans-serif;font-size:.85rem;}
.data-actions{display:flex;gap:8px;}
.data-actions .ghost{flex:1;font-size:.75rem;}
.danger-section{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem;}
.danger-section .settings-hint{margin-top:.5rem;}