@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #131314;
  --panel: #1b1c1f;
  --panel-raised: #202124;
  --panel-soft: #18191c;
  --line: rgba(232, 234, 237, .09);
  --line-strong: rgba(232, 234, 237, .15);
  --text: #e8eaed;
  --muted: #a1a4aa;
  --quiet: #72767e;
  --blue: #8ab4f8;
  --purple: #b7a0ff;
  --pink: #f5a6d8;
  --gradient: linear-gradient(110deg, #77a9ff 0%, #b096ff 48%, #f4a2d1 100%);
  --sidebar-width: 252px;
  font-family: "Google Sans", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column;
  width: var(--sidebar-width); padding: 23px 16px 18px; overflow-y: auto;
  background: #0f1012; border-right: 1px solid rgba(255,255,255,.045);
}
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; margin: 3px 0 30px 8px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; background: var(--gradient); box-shadow: 0 0 22px rgba(162,139,255,.2); }
.brand-mark svg { width: 23px; height: 23px; fill: #17151d; }
.brand-name { font-size: 16px; font-weight: 700; letter-spacing: -.04em; }
.brand-name span { margin-left: 4px; color: #9ba0a8; font-weight: 500; }
.new-analysis-button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 43px; padding: 0 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #1b1c1f; color: #e6e7e9; text-align: left; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.new-analysis-button:hover { background: #24252a; border-color: rgba(255,255,255,.15); transform: translateY(-1px); }
.plus-icon { font-size: 21px; line-height: 1; color: #c4b2ff; }
.sidebar-section-title { display: flex; justify-content: space-between; align-items: center; margin: 33px 8px 11px; color: #787c83; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.history-count { display: grid; min-width: 19px; height: 19px; padding: 0 5px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.06); color: #9ea1a7; letter-spacing: 0; }
.history-list { display: grid; gap: 4px; }
.history-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #a7a9ae; text-align: left; cursor: pointer; transition: background .18s, color .18s; }
.history-item:hover { background: rgba(255,255,255,.05); color: #e8eaed; }
.history-item-icon { flex: 0 0 auto; width: 15px; height: 15px; color: #81858d; }
.history-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.history-item-mode { margin-left: auto; padding-left: 6px; color: #777b82; font-size: 9px; letter-spacing: .05em; }
.sidebar-empty { padding: 4px 9px; color: #666a72; font-size: 12px; line-height: 1.6; }
.sidebar-bottom { margin-top: auto; padding: 15px 13px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 14px; background: linear-gradient(145deg, rgba(42,39,54,.7), rgba(24,25,28,.65)); }
.sidebar-note-icon { display: grid; width: 23px; height: 23px; place-items: center; margin-bottom: 10px; border-radius: 8px; background: rgba(174,151,255,.13); color: #c9b6ff; }
.sidebar-bottom p { margin: 0 0 16px; color: #9598a0; font-size: 11px; line-height: 1.55; }
.sidebar-bottom p strong { color: #dfe1e5; font-weight: 600; }
.sidebar-foot { display: flex; align-items: center; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); color: #858991; font-size: 10px; }
.online-dot, .status-glow { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8bd7ae; box-shadow: 0 0 8px rgba(139,215,174,.65); }

.main-content { min-height: 100vh; margin-left: var(--sidebar-width); overflow: hidden; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 13px; height: 62px; padding: 0 clamp(22px, 4.5vw, 70px); border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(19,19,20,.82); backdrop-filter: blur(16px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; color: #888c93; font-size: 12px; }
.breadcrumb strong { color: #d8dade; font-weight: 550; }
.breadcrumb-slash { color: #51545a; }
.topbar-status { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #999ca3; font-size: 11px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.035); color: #b3b5bc; cursor: pointer; font-size: 10px; transition: border-color .18s, background .18s, color .18s, transform .18s; }
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(177,156,255,.25); background: rgba(255,255,255,.07); color: #ececf0; }
.theme-toggle-icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.theme-moon { display: none; }
.icon-button { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #9da0a7; cursor: pointer; }
.icon-button:hover { border-color: var(--line); background: rgba(255,255,255,.045); color: white; }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.menu-button { display: none; }
.workspace-content { width: min(100%, 1370px); min-height: calc(100vh - 62px); margin: 0 auto; padding: 0 clamp(22px, 4.5vw, 70px); }

.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: clamp(55px, 8.4vw, 104px) 0 59px; text-align: center; transition: padding .25s ease; }
.hero.hero-compact { padding-top: 38px; padding-bottom: 34px; }
.hero.hero-compact .eyebrow { margin-bottom: 13px; }
.hero.hero-compact h1 { font-size: clamp(34px, 4vw, 47px); }
.hero.hero-compact .hero-copy { margin: 12px 0 19px; font-size: 13px; }
.hero.hero-compact .hero-footnote { display: none; }
.hero.hero-compact .hero-orb { opacity: .07; }
.hero-orb { position: absolute; z-index: -1; pointer-events: none; filter: blur(72px); opacity: .15; }
.hero-orb-one { top: 34px; left: 28%; width: 190px; height: 170px; border-radius: 50%; background: #517bff; }
.hero-orb-two { top: 80px; right: 27%; width: 170px; height: 130px; border-radius: 50%; background: #bc63e8; opacity: .12; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 21px; color: #a5a8af; font-size: 10px; font-weight: 650; letter-spacing: .15em; }
.eyebrow-sparkle { color: #c4a4ff; font-size: 14px; }
.hero h1 { margin: 0; font-size: clamp(38px, 5.2vw, 62px); font-weight: 520; line-height: 1.08; letter-spacing: -.055em; }
.gradient-text { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
.hero-copy { max-width: 530px; margin: 20px 0 31px; color: #a3a6ad; font-size: 15px; line-height: 1.7; }
.search-panel { width: min(100%, 735px); padding: 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 21px; background: linear-gradient(145deg, rgba(33,34,37,.94), rgba(24,25,28,.95)); box-shadow: 0 18px 55px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035); text-align: left; }
.mode-tabs { display: flex; gap: 4px; padding: 1px 2px 8px; }
.mode-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #92959c; cursor: pointer; font-size: 11px; transition: color .15s, background .15s; }
.mode-tab svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.mode-tab:hover { color: #d9dbe0; }
.mode-tab.is-active { border-color: rgba(173,157,255,.13); background: rgba(168,148,255,.095); color: #d5c8ff; }
.search-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 5px 6px 5px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: #151619; }
.search-leading-icon { display: inline-flex; flex: 0 0 auto; color: #777c85; }
.search-leading-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; }
.search-row input { flex: 1 1 auto; width: 100px; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: #f0f1f3; font-size: 13px; }
.search-row input::placeholder { color: #737780; }
.search-row input:focus-visible { outline: 0; }
.sort-select { flex: 0 0 auto; max-width: 140px; padding: 8px 26px 8px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; outline: 0; background: #202125; color: #c1c3c9; font-size: 11px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 41px; padding: 0 17px; border: 0; border-radius: 12px; background: var(--gradient); color: #17151b; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 22px rgba(142,121,242,.2); transition: filter .18s, transform .18s, box-shadow .18s; }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 26px rgba(142,121,242,.28); }
.primary-button:disabled { opacity: .55; cursor: wait; transform: none; }
.primary-button svg, .secondary-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.search-helper { padding: 10px 11px 2px; color: #7e828a; font-size: 10px; }
.hero-footnote { display: flex; align-items: center; gap: 8px; margin-top: 19px; color: #747880; font-size: 10px; }
.privacy-dot { width: 5px; height: 5px; border-radius: 50%; background: #a99bff; box-shadow: 0 0 9px rgba(169,155,255,.7); }

.loading-state { width: min(100%, 1080px); margin: -6px auto 50px; padding: 24px; border: 1px solid var(--line); border-radius: 23px; background: rgba(26,27,30,.83); }
.loading-mark { display: flex; align-items: center; gap: 5px; height: 17px; margin-bottom: 13px; }
.loading-mark span { width: 5px; height: 5px; border-radius: 50%; background: var(--gradient); animation: dotPulse 1.25s ease-in-out infinite; }
.loading-mark span:nth-child(2) { animation-delay: .15s; }
.loading-mark span:nth-child(3) { animation-delay: .3s; }
.loading-title { margin: 0 0 4px; color: #e7e8eb; font-size: 14px; font-weight: 600; }
.loading-subtitle { margin: 0; color: #858991; font-size: 11px; }
.shimmer-track { height: 3px; margin: 21px 0 24px; overflow: hidden; border-radius: 6px; background: #25262a; }
.shimmer-track span { display: block; width: 43%; height: 100%; border-radius: inherit; background: var(--gradient); filter: blur(.2px); animation: progressShimmer 1.65s ease-in-out infinite; box-shadow: 0 0 15px rgba(177,146,255,.35); }
.skeleton-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.skeleton-metrics span, .skeleton-cards span { display: block; border: 1px solid rgba(255,255,255,.04); border-radius: 15px; background: linear-gradient(100deg, #202124 15%, #2b2c30 35%, #202124 55%); background-size: 220% 100%; animation: skeletonShimmer 1.9s linear infinite; }
.skeleton-metrics span { height: 78px; }
.skeleton-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 13px; }
.skeleton-cards span { height: 190px; }

.error-box { display: flex; align-items: flex-start; gap: 13px; width: min(100%, 735px); margin: -12px auto 34px; padding: 15px 16px; border: 1px solid rgba(255,131,131,.22); border-radius: 15px; background: rgba(99,42,49,.18); color: #e5d5d7; }
.error-icon { display: grid; flex: 0 0 auto; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: rgba(255,125,137,.18); color: #ffabb2; font-size: 12px; font-weight: 700; }
.error-box strong { color: #f3dfe1; font-size: 12px; }
.error-box p { margin: 5px 0 0; color: #c6aeb1; font-size: 11px; line-height: 1.55; }
.error-dismiss { margin: -3px 0 0 auto; border: 0; background: transparent; color: #b99298; cursor: pointer; font-size: 22px; }

.results-section { padding-bottom: 36px; scroll-margin-top: 78px; animation: riseIn .35s ease both; }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 2px 0 21px; }
.results-kicker { margin-bottom: 8px; color: #a99aff; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.results-heading h2 { margin: 0; color: #f0f1f3; font-size: clamp(24px, 3vw, 32px); font-weight: 520; letter-spacing: -.04em; }
.results-description { margin: 7px 0 0; color: #94979e; font-size: 12px; }
.cache-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 20px; background: rgba(255,255,255,.025); color: #92969d; font-size: 10px; white-space: nowrap; }
.cache-badge.is-cached { border-color: rgba(138,180,248,.16); color: #a9c8f7; }
.cache-badge.is-cached .cache-dot { background: #8ab4f8; box-shadow: 0 0 7px rgba(138,180,248,.55); }
.cache-dot { width: 6px; height: 6px; border-radius: 50%; background: #8cc9ac; box-shadow: 0 0 7px rgba(140,201,172,.55); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.metric-card { min-height: 112px; padding: 17px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #202124, #1a1b1e); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.metric-label { color: #a0a3aa; font-size: 10px; font-weight: 540; }
.metric-icon { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(177,156,255,.11); border-radius: 8px; background: rgba(177,156,255,.075); color: #c0b0ff; font-size: 12px; }
.metric-value { display: block; margin: 12px 0 3px; color: #f0f0f2; font-size: clamp(20px, 2.2vw, 27px); font-weight: 520; letter-spacing: -.04em; }
.metric-hint { color: #777b82; font-size: 9px; }
.metric-card.accent .metric-value { color: #d5c8ff; }
.metric-card.pink .metric-icon { border-color: rgba(244,158,210,.14); background: rgba(244,158,210,.075); color: #f0afd6; }
.metric-card.pink .metric-value { color: #efb8d9; }
.outlier-summary { display: flex; align-items: center; gap: 13px; min-height: 68px; margin: 13px 0 35px; padding: 13px 15px; border: 1px solid rgba(184,160,255,.14); border-radius: 15px; background: linear-gradient(100deg, rgba(104,87,175,.13), rgba(202,112,171,.055) 68%, rgba(33,34,38,.45)); }
.summary-sparkle { display: grid; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; border-radius: 11px; background: rgba(177,151,255,.12); color: #c9b5ff; font-size: 16px; }
.outlier-summary strong { display: block; color: #e5dfff; font-size: 12px; font-weight: 600; }
.outlier-summary p { margin: 4px 0 0; color: #a3a1ac; font-size: 10px; line-height: 1.45; }
.threshold-pill { margin-left: auto; padding: 7px 10px; border: 1px solid rgba(206,186,255,.16); border-radius: 20px; color: #c9b7ff; font-size: 9px; white-space: nowrap; }
.video-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.video-section-heading h3 { margin: 0; color: #e8e9ec; font-size: 17px; font-weight: 560; letter-spacing: -.025em; }
.video-section-heading p { margin: 6px 0 0; color: #878b92; font-size: 10px; }
.filter-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; background: #1a1b1e; }
.filter-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #898d94; cursor: pointer; font-size: 10px; transition: color .15s, background .15s; }
.filter-tab span { display: grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: 6px; background: rgba(255,255,255,.055); color: #a1a4aa; font-size: 9px; }
.filter-tab.is-active { border-color: rgba(255,255,255,.07); background: #2a2b2f; color: #e5e6e9; }
.filter-tab.is-active span { background: rgba(185,162,255,.14); color: #d0c0ff; }
.videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 13px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 16px; background: linear-gradient(155deg, rgba(31,32,35,.97), rgba(24,25,28,.98)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.video-card:hover { transform: translateY(-3px); border-color: rgba(187,166,255,.25); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: radial-gradient(circle at 25% 35%, rgba(127,106,207,.34), transparent 38%), linear-gradient(135deg, #25262c, #17181b); }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.video-card:hover .video-thumb img { transform: scale(1.035); }
.video-thumb::after { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.2)); content: ""; pointer-events: none; }
.video-badge { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 6px 8px; border: 1px solid rgba(221,204,255,.22); border-radius: 8px; background: rgba(22,20,30,.8); color: #dfd2ff; font-size: 9px; font-weight: 650; backdrop-filter: blur(8px); }
.video-badge.regular { border-color: rgba(255,255,255,.12); color: #d2d3d7; }
.video-copy { padding: 13px 14px 14px; }
.video-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; overflow: hidden; color: #81858d; font-size: 9px; white-space: nowrap; }
.video-meta .meta-channel { overflow: hidden; text-overflow: ellipsis; }
.meta-separator { color: #555961; }
.video-title { display: -webkit-box; min-height: 40px; overflow: hidden; color: #e4e5e8; text-decoration: none; font-size: 12px; font-weight: 570; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-title:hover { color: #d4c6ff; }
.video-description { display: -webkit-box; min-height: 44px; margin: 8px 0 11px; overflow: hidden; color: #898d95; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.video-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.055); }
.video-views { color: #d3d4d7; font-size: 10px; font-weight: 600; white-space: nowrap; }
.video-tags { display: flex; gap: 4px; overflow: hidden; }
.video-tag { max-width: 88px; overflow: hidden; padding: 4px 6px; border: 1px solid rgba(255,255,255,.065); border-radius: 6px; color: #8b8f98; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.empty-results { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 178px; padding: 28px; border: 1px dashed rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.015); text-align: center; }
.empty-results-icon { margin-bottom: 10px; color: #b7a1ff; font-size: 28px; }
.empty-results strong { color: #d8dae0; font-size: 13px; }
.empty-results p { margin: 7px 0 0; color: #898d95; font-size: 10px; }

.ai-panel { margin-top: 31px; padding: 19px; border: 1px solid rgba(184,160,255,.16); border-radius: 18px; background: radial-gradient(ellipse at 1% 0%, rgba(117,99,190,.11), transparent 44%), linear-gradient(135deg, #1c1d21, #191a1d); }
.ai-panel-header { display: flex; align-items: center; gap: 13px; }
.ai-symbol { display: grid; flex: 0 0 auto; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(187,162,255,.17); border-radius: 13px; background: linear-gradient(145deg, rgba(124,154,255,.16), rgba(215,124,213,.13)); color: #d4bdff; font-size: 18px; }
.ai-heading-copy { min-width: 0; }
.ai-label { margin-bottom: 5px; color: #b7a6ed; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.ai-heading-copy h3 { margin: 0; color: #e6e4eb; font-size: 14px; font-weight: 570; }
.ai-heading-copy p { margin: 5px 0 0; color: #90929a; font-size: 10px; }
.secondary-button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-left: auto; padding: 0 12px; border: 1px solid rgba(202,181,255,.22); border-radius: 10px; background: rgba(165,143,239,.09); color: #d7caff; cursor: pointer; font-size: 10px; white-space: nowrap; transition: background .18s, border-color .18s; }
.secondary-button:hover:not(:disabled) { border-color: rgba(202,181,255,.4); background: rgba(165,143,239,.17); }
.secondary-button:disabled { opacity: .43; cursor: not-allowed; }
.secondary-button svg { fill: currentColor; stroke: none; }
.ai-loading { display: flex; align-items: center; gap: 10px; margin-top: 19px; padding: 12px; border-radius: 11px; background: rgba(255,255,255,.035); color: #b6b0c8; font-size: 10px; }
.ai-loading-orb { width: 10px; height: 10px; border-radius: 50%; background: var(--gradient); animation: pulseGlow 1.1s ease-in-out infinite alternate; }
.ai-output { margin-top: 18px; padding: 18px; border: 1px solid rgba(255,255,255,.065); border-radius: 13px; background: rgba(11,12,14,.36); color: #c6c8cd; font-size: 12px; line-height: 1.75; }
.ai-output h4 { margin: 17px 0 7px; color: #e0d7ff; font-size: 13px; font-weight: 600; }
.ai-output h4:first-child { margin-top: 0; }
.ai-output p { margin: 7px 0; }
.ai-output ul { margin: 6px 0 12px; padding-left: 20px; }
.ai-output li { margin: 4px 0; padding-left: 3px; }
.ai-output strong { color: #eeedf2; font-weight: 600; }
.ai-output code { padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.07); color: #d2c4ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.ai-provider { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); color: #757982; font-size: 9px; }
.method-note { margin: 15px 2px 0; color: #71757d; font-size: 9px; line-height: 1.55; }
.page-footer { display: flex; justify-content: space-between; gap: 14px; padding: 27px 0 21px; border-top: 1px solid rgba(255,255,255,.04); color: #62666e; font-size: 9px; }

.sidebar-backdrop { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes progressShimmer { 0% { transform: translateX(-115%); } 100% { transform: translateX(255%); } }
@keyframes skeletonShimmer { to { background-position: -220% 0; } }
@keyframes dotPulse { 0%, 100% { transform: translateY(0) scale(.82); opacity: .55; } 50% { transform: translateY(-3px) scale(1.1); opacity: 1; } }
@keyframes pulseGlow { from { transform: scale(.78); opacity: .55; box-shadow: 0 0 5px rgba(177,146,255,.2); } to { transform: scale(1.12); opacity: 1; box-shadow: 0 0 15px rgba(177,146,255,.75); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) {
  :root { --sidebar-width: 224px; }
  .workspace-content { padding-right: 30px; padding-left: 30px; }
  .videos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 820px) {
  :root { --sidebar-width: 0px; }
  .sidebar { width: 270px; transform: translateX(-103%); transition: transform .25s ease; box-shadow: 20px 0 45px rgba(0,0,0,.3); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop.is-visible { position: fixed; inset: 0; z-index: 20; display: block; background: rgba(0,0,0,.48); backdrop-filter: blur(3px); }
  .main-content { margin-left: 0; }
  .menu-button { display: inline-grid; }
  .topbar { padding-right: 24px; padding-left: 17px; }
  .workspace-content { padding-right: 24px; padding-left: 24px; }
}
@media (max-width: 620px) {
  .topbar { height: 56px; }
  .topbar-status { display: none; }
  .workspace-content { padding-right: 17px; padding-left: 17px; }
  .hero { padding-top: 54px; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(37px, 10vw, 49px); }
  .hero-copy { max-width: 400px; margin: 16px 0 23px; font-size: 13px; }
  .search-panel { border-radius: 17px; }
  .search-row { flex-wrap: wrap; gap: 7px; padding: 7px; }
  .search-leading-icon { padding-left: 3px; }
  .search-row input { flex: 1 1 calc(100% - 40px); }
  .sort-select { flex: 1 1 auto; max-width: none; margin-left: 29px; }
  .primary-button { min-height: 39px; padding: 0 12px; }
  .search-helper { line-height: 1.5; }
  .hero-footnote { align-items: flex-start; text-align: left; line-height: 1.5; }
  .hero-footnote .privacy-dot { flex: 0 0 auto; margin-top: 4px; }
  .loading-state { padding: 17px; }
  .skeleton-metrics { grid-template-columns: repeat(2,1fr); }
  .skeleton-cards { grid-template-columns: 1fr; }
  .skeleton-cards span:not(:first-child) { display: none; }
  .results-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .results-heading h2 { font-size: 27px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .metric-card { min-height: 100px; padding: 14px 13px 12px; }
  .metric-value { margin-top: 10px; }
  .outlier-summary { align-items: flex-start; padding: 12px; }
  .threshold-pill { align-self: flex-start; padding: 6px 7px; font-size: 8px; }
  .video-section-heading { align-items: flex-start; flex-direction: column; }
  .filter-tabs { width: 100%; }
  .filter-tab { flex: 1; justify-content: center; }
  .videos-grid { grid-template-columns: 1fr; }
  .video-card { display: grid; grid-template-columns: 38% minmax(0,1fr); align-items: stretch; }
  .video-thumb { min-height: 100%; aspect-ratio: auto; }
  .video-copy { padding: 11px; }
  .video-title { min-height: 36px; font-size: 11px; }
  .video-description { min-height: 30px; margin: 6px 0 8px; -webkit-line-clamp: 2; }
  .video-footer { flex-wrap: wrap; }
  .video-tags { display: none; }
  .ai-panel { padding: 14px; }
  .ai-panel-header { align-items: flex-start; flex-wrap: wrap; }
  .ai-heading-copy { flex: 1; }
  .secondary-button { width: 100%; justify-content: center; margin: 1px 0 0; }
  .page-footer { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Light/day mode. The same layout and Gemini gradient remain; surfaces and text
   are tuned for crisp contrast instead of simply inverting the dark palette. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f8;
  --panel: #ffffff;
  --panel-raised: #ffffff;
  --panel-soft: #f7f8fb;
  --line: rgba(32, 33, 36, .10);
  --line-strong: rgba(32, 33, 36, .16);
  --text: #202124;
  --muted: #5f6368;
  --quiet: #777c85;
}
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .sidebar { background: #f8f9fc; border-right-color: rgba(32,33,36,.09); }
:root[data-theme="light"] .brand { color: #202124; }
:root[data-theme="light"] .brand-name span { color: #6c717b; }
:root[data-theme="light"] .new-analysis-button { border-color: rgba(32,33,36,.10); background: #eef0f5; color: #30323a; }
:root[data-theme="light"] .new-analysis-button:hover { border-color: rgba(91,76,158,.2); background: #e8eaf1; }
:root[data-theme="light"] .sidebar-section-title { color: #747984; }
:root[data-theme="light"] .history-count { background: rgba(32,33,36,.07); color: #5f6368; }
:root[data-theme="light"] .history-item { color: #555b65; }
:root[data-theme="light"] .history-item:hover { background: rgba(73,78,91,.07); color: #202124; }
:root[data-theme="light"] .history-item-icon { color: #777d87; }
:root[data-theme="light"] .history-item-mode { color: #777c85; }
:root[data-theme="light"] .sidebar-empty { color: #7c818b; }
:root[data-theme="light"] .sidebar-bottom { border-color: rgba(70,62,111,.10); background: linear-gradient(145deg, rgba(229,225,247,.9), rgba(247,248,251,.94)); }
:root[data-theme="light"] .sidebar-bottom p { color: #5f626d; }
:root[data-theme="light"] .sidebar-bottom p strong { color: #282833; }
:root[data-theme="light"] .sidebar-foot { border-top-color: rgba(32,33,36,.09); color: #646975; }
:root[data-theme="light"] .topbar { border-bottom-color: rgba(32,33,36,.08); background: rgba(248,249,252,.88); }
:root[data-theme="light"] .breadcrumb { color: #747984; }
:root[data-theme="light"] .breadcrumb strong { color: #30323a; }
:root[data-theme="light"] .breadcrumb-slash { color: #a0a4ad; }
:root[data-theme="light"] .topbar-status { color: #626873; }
:root[data-theme="light"] .icon-button { color: #686e78; }
:root[data-theme="light"] .icon-button:hover { color: #252832; background: rgba(32,33,36,.05); }
:root[data-theme="light"] .theme-toggle { border-color: rgba(32,33,36,.12); background: rgba(255,255,255,.72); color: #4f5560; }
:root[data-theme="light"] .theme-toggle:hover { border-color: rgba(100,78,177,.28); background: #fff; color: #342c50; }
:root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }
:root[data-theme="light"] .hero-orb-one { opacity: .09; }
:root[data-theme="light"] .hero-orb-two { opacity: .075; }
:root[data-theme="light"] .eyebrow { color: #6d727e; }
:root[data-theme="light"] .hero-copy { color: #616672; }
:root[data-theme="light"] .search-panel { border-color: rgba(33,36,45,.10); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,249,252,.98)); box-shadow: 0 18px 55px rgba(43,49,69,.09), inset 0 1px 0 rgba(255,255,255,.8); }
:root[data-theme="light"] .mode-tab { color: #6d727c; }
:root[data-theme="light"] .mode-tab:hover { color: #353844; }
:root[data-theme="light"] .mode-tab.is-active { border-color: rgba(108,86,184,.14); background: rgba(158,137,230,.12); color: #5e4b9d; }
:root[data-theme="light"] .search-row { border-color: rgba(32,33,36,.11); background: #fff; }
:root[data-theme="light"] .search-leading-icon { color: #747985; }
:root[data-theme="light"] .search-row input { color: #242630; }
:root[data-theme="light"] .search-row input::placeholder { color: #858a94; }
:root[data-theme="light"] .sort-select { border-color: rgba(32,33,36,.12); background: #f6f7fa; color: #414651; }
:root[data-theme="light"] .search-helper { color: #747984; }
:root[data-theme="light"] .hero-footnote { color: #717681; }
:root[data-theme="light"] .loading-state { border-color: rgba(32,33,36,.10); background: rgba(255,255,255,.9); }
:root[data-theme="light"] .loading-title { color: #292c34; }
:root[data-theme="light"] .loading-subtitle { color: #727783; }
:root[data-theme="light"] .shimmer-track { background: #e4e7ee; }
:root[data-theme="light"] .skeleton-metrics span,
:root[data-theme="light"] .skeleton-cards span { border-color: rgba(32,33,36,.04); background: linear-gradient(100deg, #eceef3 15%, #f7f8fb 35%, #eceef3 55%); background-size: 220% 100%; }
:root[data-theme="light"] .error-box { border-color: rgba(184,55,70,.2); background: rgba(255,238,240,.92); color: #722e38; }
:root[data-theme="light"] .error-icon { background: rgba(209,75,93,.12); color: #a83848; }
:root[data-theme="light"] .error-box strong { color: #712d37; }
:root[data-theme="light"] .error-box p { color: #8a4e57; }
:root[data-theme="light"] .error-dismiss { color: #98515b; }
:root[data-theme="light"] .results-kicker { color: #6956a7; }
:root[data-theme="light"] .results-heading h2 { color: #202124; }
:root[data-theme="light"] .results-description { color: #646a75; }
:root[data-theme="light"] .cache-badge { border-color: rgba(32,33,36,.09); background: rgba(255,255,255,.7); color: #626873; }
:root[data-theme="light"] .cache-badge.is-cached { border-color: rgba(63,116,191,.17); color: #3f6ca3; }
:root[data-theme="light"] .metric-card { border-color: rgba(32,33,36,.09); background: linear-gradient(145deg, #fff, #f9fafc); box-shadow: 0 4px 15px rgba(48,54,73,.035); }
:root[data-theme="light"] .metric-label { color: #616672; }
:root[data-theme="light"] .metric-value { color: #242630; }
:root[data-theme="light"] .metric-hint { color: #787e88; }
:root[data-theme="light"] .metric-card.accent .metric-value { color: #6551a5; }
:root[data-theme="light"] .metric-card.pink .metric-value { color: #a8467e; }
:root[data-theme="light"] .metric-card.pink .metric-icon { border-color: rgba(174,73,135,.14); background: rgba(225,154,197,.13); color: #984a7a; }
:root[data-theme="light"] .outlier-summary { border-color: rgba(121,98,187,.17); background: linear-gradient(100deg, rgba(225,218,250,.75), rgba(248,231,243,.63) 68%, rgba(255,255,255,.8)); }
:root[data-theme="light"] .summary-sparkle { background: rgba(144,119,213,.14); color: #6955aa; }
:root[data-theme="light"] .outlier-summary strong { color: #342c50; }
:root[data-theme="light"] .outlier-summary p { color: #666174; }
:root[data-theme="light"] .threshold-pill { border-color: rgba(105,83,171,.17); color: #62509a; }
:root[data-theme="light"] .video-section-heading h3 { color: #292c34; }
:root[data-theme="light"] .video-section-heading p { color: #737984; }
:root[data-theme="light"] .filter-tabs { border-color: rgba(32,33,36,.08); background: #e9ebf1; }
:root[data-theme="light"] .filter-tab { color: #666c77; }
:root[data-theme="light"] .filter-tab span { background: rgba(32,33,36,.06); color: #636975; }
:root[data-theme="light"] .filter-tab.is-active { border-color: rgba(32,33,36,.07); background: #fff; color: #292c34; box-shadow: 0 1px 4px rgba(32,33,36,.07); }
:root[data-theme="light"] .filter-tab.is-active span { background: rgba(155,132,224,.15); color: #62509c; }
:root[data-theme="light"] .video-card { border-color: rgba(32,33,36,.10); background: linear-gradient(155deg, #fff, #fafbfc); box-shadow: 0 5px 18px rgba(41,46,63,.045); }
:root[data-theme="light"] .video-card:hover { border-color: rgba(132,107,204,.28); box-shadow: 0 12px 28px rgba(49,48,73,.10); }
:root[data-theme="light"] .video-meta { color: #747984; }
:root[data-theme="light"] .meta-separator { color: #a1a5ad; }
:root[data-theme="light"] .video-title { color: #292c34; }
:root[data-theme="light"] .video-title:hover { color: #6852a8; }
:root[data-theme="light"] .video-description { color: #696f79; }
:root[data-theme="light"] .video-footer { border-top-color: rgba(32,33,36,.08); }
:root[data-theme="light"] .video-views { color: #414650; }
:root[data-theme="light"] .video-tag { border-color: rgba(32,33,36,.09); color: #656b75; }
:root[data-theme="light"] .empty-results { border-color: rgba(32,33,36,.14); background: rgba(255,255,255,.55); }
:root[data-theme="light"] .empty-results strong { color: #333640; }
:root[data-theme="light"] .empty-results p { color: #717782; }
:root[data-theme="light"] .ai-panel { border-color: rgba(132,107,204,.18); background: radial-gradient(ellipse at 1% 0%, rgba(177,157,232,.18), transparent 44%), linear-gradient(135deg, #fff, #f7f6fb); box-shadow: 0 8px 25px rgba(45,43,68,.04); }
:root[data-theme="light"] .ai-symbol { border-color: rgba(132,107,204,.17); background: linear-gradient(145deg, rgba(124,154,255,.15), rgba(215,124,213,.13)); color: #6551a6; }
:root[data-theme="light"] .ai-label { color: #6c58a7; }
:root[data-theme="light"] .ai-heading-copy h3 { color: #292c34; }
:root[data-theme="light"] .ai-heading-copy p { color: #6e737d; }
:root[data-theme="light"] .secondary-button { border-color: rgba(112,88,183,.22); background: rgba(154,132,218,.10); color: #5e4c98; }
:root[data-theme="light"] .secondary-button:hover:not(:disabled) { border-color: rgba(112,88,183,.38); background: rgba(154,132,218,.17); }
:root[data-theme="light"] .ai-loading { background: rgba(120,101,177,.07); color: #615678; }
:root[data-theme="light"] .ai-output { border-color: rgba(32,33,36,.08); background: rgba(255,255,255,.8); color: #464b55; }
:root[data-theme="light"] .ai-output h4 { color: #5e4c98; }
:root[data-theme="light"] .ai-output strong { color: #292c34; }
:root[data-theme="light"] .ai-output code { background: rgba(108,85,167,.08); color: #5b498e; }
:root[data-theme="light"] .ai-provider { border-top-color: rgba(32,33,36,.08); color: #717681; }
:root[data-theme="light"] .method-note { color: #747984; }
:root[data-theme="light"] .page-footer { border-top-color: rgba(32,33,36,.07); color: #777c85; }
@media (max-width: 620px) {
  :root[data-theme="light"] .theme-toggle { margin-left: auto; }
}