:root {
  --red: #146c77;
  --red-dark: #0e5360;
  --red-soft: #ecf7f7;
  --ink: #1d1d1f;
  --muted: #62666d;
  --line: #e7e4e1;
  --panel: #fffefd;
  --canvas: #faf9f7;
  --sidebar: 264px;
  --shadow: 0 12px 30px rgb(35 30 25 / .06);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 18px 20px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 34px; color: var(--ink); font-size: 22px; font-weight: 750; text-decoration: none; letter-spacing: -.03em; }
.brand-icon { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: #146c77 url("/favicon.svg") center / cover no-repeat; border-radius: 12px; box-shadow: 0 6px 14px rgb(20 108 119 / .2); }
.brand-icon span { display: none; }
nav { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 13px; color: #292a2d; text-decoration: none; border-radius: 11px; font-weight: 550; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { transform: translateX(2px); }
.nav-item:hover, .nav-item.active { color: var(--red-dark); background: #e8f4f3; }
.nav-item span { width: 20px; font-size: 20px; text-align: center; }
.account-card { margin-top: auto; display: flex; gap: 11px; align-items: center; padding: 14px 8px 0; border-top: 1px solid var(--line); }
.account-info { min-width: 0; display: grid; gap: 3px; }
.account-card strong, .account-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card span { color: var(--muted); font-size: 12px; }
.sidebar-signout { margin: 8px 8px 0 57px; padding: 4px 0; color: var(--red-dark); background: none; border: 0; text-align: left; font-size: 13px; font-weight: 600; }
.sidebar-links { display: flex; gap: 13px; padding: 18px 8px 0; }
.sidebar-links a { color: #74777c; font-size: 11px; text-decoration: none; }
.sidebar-links a:hover { color: var(--red-dark); }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: #83a2ad; font-weight: 600; }
.google-avatar { border: 1px solid var(--line); background: conic-gradient(#4285f4 0deg 95deg, #34a853 95deg 175deg, #fbbc05 175deg 245deg, #ea4335 245deg 305deg, #4285f4 305deg); background-clip: text; -webkit-background-clip: text; color: #4285f4; -webkit-text-fill-color: transparent; font-weight: 800; font-size: 23px; }
.avatar.large { width: 58px; height: 58px; font-size: 26px; }
main { grid-column: 2; min-width: 0; }
.hero { min-height: 194px; padding: 38px clamp(28px, 5vw, 76px); display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; background: radial-gradient(circle at 67% 10%, rgb(255 244 188 / .8), transparent 35%), linear-gradient(112deg, #d8eff0, #fff9e5 58%, #eaf1ef); border-bottom: 1px solid rgb(218 203 190 / .45); }
.hero-copy { display: flex; align-items: center; gap: 20px; }
.hero-account { border: 0; }
.hero p { margin: 0 0 7px; color: var(--red-dark); font-size: 14px; font-weight: 700; }
.hero-note { display: block; margin-top: 9px; color: #67625e; font-size: 14px; }
h1 { margin: 0; max-width: 710px; font-size: clamp(27px, 3vw, 42px); line-height: 1.08; letter-spacing: -.04em; }
h2 { margin: 0 0 10px; font-size: clamp(22px, 2.5vw, 32px); }
h3 { margin: 0 0 7px; font-size: 17px; }
p { line-height: 1.55; }
.search { display: flex; align-items: center; gap: 8px; width: min(270px, 25vw); padding: 12px 15px; border: 1px solid rgb(255 255 255 / .65); border-radius: 13px; color: var(--muted); background: rgb(255 255 255 / .68); transition: box-shadow .18s, border-color .18s; }
.search:focus-within { border-color: #ef9e98; box-shadow: 0 0 0 4px rgb(227 38 29 / .08); }
.search input { width: 100%; border: 0; outline: 0; background: transparent; }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }
.content { max-width: 1540px; margin: 0 auto; padding: 38px clamp(28px, 5vw, 76px) 70px; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: -66px; position: relative; }
.metrics article { min-height: 112px; padding: 25px 27px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); display: grid; align-content: center; gap: 10px; box-shadow: var(--shadow); }
.metrics span { color: var(--muted); }
.metrics strong { font-size: 30px; letter-spacing: -.04em; }
.home-status { display: grid; grid-template-columns: 150px minmax(260px, 1fr) minmax(280px, .8fr); align-items: center; gap: 28px; margin-top: 28px; padding: 24px 30px; overflow: hidden; border: 1px solid #eadfda; border-radius: 18px; background: linear-gradient(115deg, #fff5f2, #fffcef); box-shadow: 0 6px 22px rgb(35 30 25 / .035); }
.status-mascot { width: 140px; height: 140px; object-fit: contain; animation: tv-breathe 4s ease-in-out infinite; }
.status-copy h2 { margin-bottom: 7px; font-size: 25px; }
.status-copy > p:not(.eyebrow) { margin: 0; color: var(--muted); }
.status-copy > span { display: block; margin-top: 10px; color: #176b3a; font-size: 13px; font-weight: 700; }
.recent-activity { padding-left: 28px; border-left: 1px solid #eadfda; }
.recent-activity strong { font-size: 14px; }
.recent-activity ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.recent-activity li { display: flex; align-items: flex-start; gap: 8px; }
.recent-activity li::before { content: "✓"; flex: 0 0 auto; color: #176b3a; font-weight: 800; }
.recent-activity li span { min-width: 0; }
@keyframes tv-breathe { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 8px 12px rgb(229 45 32 / .08)); } 50% { transform: translateY(-3px); filter: drop-shadow(0 11px 15px rgb(229 45 32 / .15)); } }
.connection-panel { margin-top: 42px; padding: 48px 55px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.connection-panel p { max-width: 730px; margin: 0; color: var(--muted); font-size: 17px; }
.welcome-copy { max-width: 790px; }
.welcome-copy .eyebrow { margin: 0 0 10px; color: var(--red-dark); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.welcome-connect { margin-top: 24px; width: auto; }
.welcome-remember { display: flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 14px; color: var(--ink); }
.welcome-remember input { width: 17px; height: 17px; margin: 0; accent-color: var(--red); }
.welcome-assurance { display: block; margin-top: 12px; color: var(--muted); font-size: 13px; }
.welcome-mascot { position: relative; flex: 0 0 220px; height: 195px; margin-right: 22px; }
.welcome-mascot img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 10px rgb(13 54 61 / .17)); }
.welcome-mascot::after { content: ""; position: absolute; width: 47px; height: 34px; top: 96px; right: -32px; border-right: 3px solid var(--red); border-bottom: 3px solid var(--red); border-radius: 0 0 22px 0; opacity: .75; transform: rotate(12deg); }
.connection-panel .launch-nudge { margin-top: 15px; font-size: 14px; }
.launch-nudge a { color: var(--red-dark); font-weight: 700; }
.primary-button { border: 0; border-radius: 9px; padding: 14px 24px; color: #fff; background: var(--red); font-weight: 600; white-space: nowrap; }
.primary-button:hover { background: var(--red-dark); }
.alerts { display: grid; gap: 12px; margin: 30px 0; }
.alert { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; padding: 14px 17px; color: #0e5360; background: var(--red-soft); border: 1px solid #a8d8d9; border-radius: 9px; }
.alert span { margin-right: auto; }
.alert button { white-space: nowrap; }
.watched-actions { flex-wrap: wrap; }
.alert button { padding: 7px 10px; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 7px; }
.alert a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.feed-panel { margin-top: 45px; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 6px 22px rgb(35 30 25 / .035); }
.video-tabs { display: flex; gap: 22px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.video-tab { padding: 14px 2px 11px; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; font-weight: 650; }
.video-tab.active { color: var(--ink); border-color: var(--red); }
.video-toolbar { display: flex; justify-content: space-between; gap: 18px; margin: 20px 0; }
.video-filters { display: flex; gap: 14px; }
.video-search { width: min(440px, 55vw); background: #f5f3f1; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-height: 230px; }
.video-day { grid-column: 1 / -1; }
.video-day > h3 { margin: 12px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 16px; }
.video-day-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.video-grid > .empty-state { grid-column: 1 / -1; }
.load-older-row { display: flex; justify-content: center; padding-top: 22px; }
.video-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.video-thumbnail { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #efedeb; }
.video-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }
.video-card:hover .video-thumbnail img { transform: scale(1.02); }
.video-card-body { display: grid; gap: 8px; padding: 14px; }
.video-title { display: -webkit-box; overflow: hidden; color: var(--ink); font-weight: 700; line-height: 1.35; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.video-title:hover { color: var(--red-dark); }
.video-meta { color: var(--muted); font-size: 12px; }
.video-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 3px; }
.hide-video-button { color: var(--muted); }
.save-video-button.saved { color: #0e5360; background: var(--red-soft); border-color: #f3bbb7; }
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.section-title h2 { margin: 0; font-size: 22px; }
.quiet-badge { padding: 8px 11px; color: #176b3a; background: #e9f7ef; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
.tab { padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #787b80; }
.tab.active { color: var(--ink); border-color: var(--red); }
.filters { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.filter-button { margin-right: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.search.compact { background: #f3f2f1; }
.empty-state { min-height: 220px; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.empty-state strong { margin-top: 12px; color: var(--ink); font-size: 17px; }
.empty-state p { margin: 7px 0 0; }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; color: #176b3a; background: #e9f7ef; border-radius: 50%; font-size: 23px; }
.placeholder-card { max-width: 720px; margin: 70px auto; padding: 44px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-heading p { max-width: 720px; margin: 6px 0 0; color: var(--muted); }
.page-heading .eyebrow { margin: 0 0 6px; color: var(--red-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.count-pill { padding: 9px 13px; color: var(--red-dark); background: var(--red-soft); border-radius: 999px; white-space: nowrap; }
.subscription-toolbar { display: flex; justify-content: space-between; gap: 18px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.subscription-search { width: min(420px, 55vw); background: #f5f3f1; }
.status-filter { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.status-filter select { min-width: 120px; padding: 9px 34px 9px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.subscription-list { min-height: 260px; background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 10px 28px rgb(35 30 25 / .035); }
.subscription-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.subscription-row:hover { background: #fcfbfa; }
.subscription-row:last-child { border-bottom: 0; }
.channel-avatar { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: #789ba7; border-radius: 50%; font-weight: 700; overflow: hidden; }
.channel-avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.channel-details { min-width: 0; display: grid; gap: 5px; }
.channel-details strong, .channel-details span, .channel-details a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-details span { color: var(--muted); font-size: 13px; }
.channel-link { width: fit-content; color: var(--ink); font-weight: 700; text-decoration: none; }
.channel-link:hover { color: var(--red-dark); text-decoration: underline; }
.channel-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.status-badge { padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-badge.active { color: #176b3a; background: #e9f7ef; }
.status-badge.removed { color: #0e5360; background: var(--red-soft); }
.status-badge.dismissed { color: #5c6067; background: #efefef; }
.subscription-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.action-link { display: inline-block; color: var(--ink); text-decoration: none; }
.stop-monitoring-button { color: #0e5360; }
.subscription-empty { min-height: 260px; display: grid; place-items: center; padding: 30px; color: var(--muted); text-align: center; }
.subscription-empty.error { color: #0e5360; }
.watched-empty div { display: grid; gap: 8px; }
.watched-empty strong { color: var(--ink); font-size: 18px; }
.watched-empty span { color: var(--muted); }
.alert-avatar { width: 42px; height: 42px; display: grid; place-items: center; color: #0e5360; background: var(--red-soft); border-radius: 12px; font-weight: 800; }
.watched-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.secondary-button { padding: 7px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 600; }
.secondary-button:hover { color: var(--red-dark); border-color: #f1aaa5; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-card { min-height: 135px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.settings-card.full { grid-column: 1 / -1; }
.settings-card-copy { display: flex; align-items: flex-start; gap: 15px; }
.settings-card p { margin: 0; color: var(--muted); }
.stopped-channels-card { align-items: stretch; flex-direction: column; }
.stopped-channels-list { width: 100%; color: var(--muted); }
.stopped-channel-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--ink); }
.upload-channels-card { align-items: stretch; flex-direction: column; }
.upload-channels-list { width: 100%; max-height: 340px; overflow-y: auto; color: var(--muted); }
.upload-channel-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.upload-channel-row input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #0e5360; }
.settings-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; color: var(--red-dark); background: var(--red-soft); border-radius: 10px; font-weight: 800; }
.account-settings { min-height: 110px; }
.settings-actions { display: flex; gap: 10px; }
.email-test-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.upload-alert-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.upload-alert-toggle input { width: 18px; height: 18px; accent-color: #0e5360; }
.monitoring-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.scan-status { width: 100%; color: var(--muted); font-size: 12px; text-align: right; }
.scan-status.success { color: #176b3a; }
.scan-status.error { color: #0e5360; }
.secondary-button.large { padding: 11px 15px; font-size: 14px; }
.danger-button { padding: 11px 15px; color: #fff; background: var(--red); border: 0; border-radius: 8px; font-weight: 600; }
.danger-button:hover { background: var(--red-dark); }
.danger-button:disabled, .secondary-button:disabled { cursor: default; opacity: .6; }
.secondary-button:disabled[aria-busy="true"] { cursor: wait; }
.hidden { display: none !important; }
.backdrop { display: none; }
.legal-view { max-width: 1000px; }
.legal-card { padding: clamp(28px, 5vw, 58px); background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.legal-card h2 { margin-bottom: 4px; }
.legal-card h3 { margin-top: 30px; }
.legal-card p { color: var(--muted); }
.legal-card a { color: var(--red-dark); }
.legal-updated { margin-top: 0; font-size: 13px; }
.support-options { display: grid; gap: 12px; margin-top: 28px; }
.support-options div { display: grid; gap: 5px; padding: 18px; background: #faf9f7; border-radius: 12px; }
.support-options span { color: var(--muted); }
.pricing-heading { max-width: 820px; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1040px; margin: 0 auto; }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: 24px; min-height: 570px; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.pricing-card.featured { border: 2px solid #ef817a; box-shadow: 0 18px 45px rgb(227 38 29 / .1); }
.pricing-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plan-kicker { color: var(--red-dark); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.best-value { padding: 7px 10px; color: #176b3a; background: #e9f7ef; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pricing-card h3 { margin: 10px 0 8px; font-size: 42px; letter-spacing: -.05em; }
.pricing-card h3 small { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: 0; }
.pricing-card p { margin: 0; color: var(--muted); }
.pricing-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pricing-card li { position: relative; padding-left: 26px; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: #176b3a; font-weight: 800; }
.pricing-card > button { width: 100%; margin-top: auto; }
.billing-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; background: #fff4f3; border: 1px solid #efb2ac; border-radius: 12px; }
.billing-toggle button { padding: 14px 10px; color: #97302a; background: #fff; border: 1px solid #e8c4c0; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; }
.billing-toggle button.active { color: #fff; background: #0e5360; border-color: #0e5360; box-shadow: 0 3px 9px rgb(120 20 16 / .18); }
.billing-toggle button:focus-visible { outline: 3px solid #0e5360; outline-offset: 2px; }
.connection-panel:not(.hidden) + .metrics { margin-top: 20px; }
.sign-in-actions { display: grid; gap: 12px; justify-items: start; }
.remember-option { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.remember-option input { width: 18px; height: 18px; accent-color: #0e5360; }
.pricing-checkout { padding: 13px 18px; }
.pricing-note { text-align: center; font-size: 12px; }
.pricing-current:disabled { cursor: default; opacity: 1; color: #176b3a; background: #e9f7ef; border-color: transparent; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 40; max-width: 360px; padding: 13px 17px; color: #fff; background: #242526; border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .2); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast-undo { margin-left: 8px; padding: 0; color: #cee9e8; background: transparent; border: 0; font-weight: 800; text-decoration: underline; cursor: pointer; }
.toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgb(227 38 29 / .28); outline-offset: 2px; }

@media (max-width: 820px) {
  .app-shell { display: block; }
  main { grid-column: auto; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .backdrop.open { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / .3); z-index: 10; }
  .menu-button { display: block; position: absolute; top: 20px; left: 18px; }
  .hero { min-height: 230px; padding: 62px 20px 34px; flex-direction: column; }
  .hero .search { width: 100%; }
  .content { padding: 26px 16px 55px; }
  .metrics { margin-top: -48px; grid-template-columns: 1fr; }
  .metrics article { min-height: 92px; padding: 20px; }
  .home-status { grid-template-columns: 90px 1fr; padding: 22px 18px; gap: 16px; }
  .status-mascot { width: 90px; height: 90px; }
  .recent-activity { grid-column: 1 / -1; padding: 18px 0 0; border-top: 1px solid #eadfda; border-left: 0; }
  .connection-panel { padding: 30px 25px; align-items: flex-start; flex-direction: column; }
  .primary-button { width: 100%; }
  .filters { align-items: stretch; flex-direction: column; }
  .search.compact { width: 100%; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .subscription-toolbar { align-items: stretch; flex-direction: column; }
  .subscription-search { width: 100%; }
  .status-filter { justify-content: space-between; }
  .watched-row { grid-template-columns: auto 1fr; }
  .watched-actions { grid-column: 2; justify-content: flex-start; }
  .subscription-row { grid-template-columns: auto 1fr; }
  .subscription-row .channel-details { width: 100%; }
  .subscription-row .channel-link {
    display: -webkit-box;
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .subscription-actions { grid-column: 2; justify-content: flex-start; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-card.full { grid-column: auto; }
  .settings-card, .account-settings { align-items: flex-start; flex-direction: column; }
  .settings-actions { width: 100%; flex-direction: column; }
  .settings-actions button { width: 100%; }
  .email-test-actions { width: 100%; justify-content: flex-start; }
  .monitoring-actions { width: 100%; justify-content: flex-start; }
  .scan-status { text-align: left; }
  .feed-panel { padding: 22px 18px; }
  .video-toolbar { align-items: stretch; flex-direction: column; }
  .video-filters { align-items: stretch; flex-direction: column; }
  .video-search { width: 100%; }
  .video-grid { grid-template-columns: 1fr; }
  .video-day-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { min-height: auto; padding: 26px; }
  .section-title { align-items: flex-start; }
  .toast { right: 16px; bottom: 16px; left: 16px; }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .video-grid, .video-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-status { grid-template-columns: 120px 1fr; }
  .recent-activity { grid-column: 1 / -1; padding: 18px 0 0; border-top: 1px solid #eadfda; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.plan-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* Appearance is stored on this device and can be changed in Settings. */
.theme-control { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 650; cursor: pointer; }
.theme-control input { width: 20px; height: 20px; accent-color: var(--red); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --red: #267e89; --red-dark: #82d5dc; --red-soft: #17363e;
  --ink: #eef4f5; --muted: #b4c3c7; --line: #35474f;
  --panel: #1b2a31; --canvas: #111d23;
  --shadow: 0 12px 30px rgb(0 0 0 / .2);
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .connection-panel,
[data-theme="dark"] .feed-panel,
[data-theme="dark"] .video-card,
[data-theme="dark"] .placeholder-card,
[data-theme="dark"] .subscription-toolbar,
[data-theme="dark"] .subscription-list,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .legal-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .filter-button,
[data-theme="dark"] .status-filter select { background: var(--panel); color: var(--ink); }
[data-theme="dark"] .nav-item { color: var(--ink); }
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active { color: #c5f1f1; background: #22464f; }
[data-theme="dark"] .sidebar-links a { color: var(--muted); }
[data-theme="dark"] .hero { background: radial-gradient(circle at 67% 10%, rgb(51 79 76 / .5), transparent 35%), linear-gradient(112deg, #1c3a43, #302e30 58%, #1c3038); border-color: var(--line); }
[data-theme="dark"] .hero-note { color: var(--muted); }
[data-theme="dark"] .home-status { background: linear-gradient(115deg, #26373e, #2a3136); border-color: var(--line); }
[data-theme="dark"] .recent-activity { border-color: var(--line); }
[data-theme="dark"] .status-copy > span,
[data-theme="dark"] .recent-activity li::before,
[data-theme="dark"] .pricing-card li::before { color: #9be3b5; }
[data-theme="dark"] .search,
[data-theme="dark"] .video-search,
[data-theme="dark"] .subscription-search,
[data-theme="dark"] .search.compact { background: #253740; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .search input { color: var(--ink); }
[data-theme="dark"] .search input::placeholder { color: var(--muted); }
[data-theme="dark"] .subscription-row:hover { background: #263840; }
[data-theme="dark"] .video-thumbnail { background: #263840; }
[data-theme="dark"] .support-options div { background: #253740; }
[data-theme="dark"] .billing-toggle { background: #283b42; border-color: var(--line); }
[data-theme="dark"] .billing-toggle button { background: #1b2a31; border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .billing-toggle button.active { background: var(--red); color: #fff; }
[data-theme="dark"] .best-value,
[data-theme="dark"] .quiet-badge,
[data-theme="dark"] .status-badge.active,
[data-theme="dark"] .pricing-current:disabled { color: #b5ebc9; background: #204639; }
[data-theme="dark"] .status-badge.dismissed { color: var(--muted); background: #324149; }
[data-theme="dark"] .alert,
[data-theme="dark"] .save-video-button.saved { color: #c5f1f1; background: var(--red-soft); border-color: var(--line); }
[data-theme="dark"] .stop-monitoring-button,
[data-theme="dark"] .subscription-empty.error { color: #c5f1f1; }
[data-theme="dark"] .tab { color: var(--muted); }
[data-theme="dark"] .menu-button { color: var(--ink); }
@media (max-width: 820px) { .theme-control { width: 100%; } }

.mobile-mascot { display: none; }
@media (max-width: 820px) {
  .hero { position: relative; }
  .welcome-mascot { display: none; }
  .welcome-connect { width: 100%; }
  .hero-copy { display: block; width: 100%; }
  .hero-account { position: absolute; top: 19px; right: 20px; width: 38px !important; height: 38px !important; font-size: 17px !important; z-index: 2; }
  .mobile-mascot { display: block; align-self: center; width: 118px; height: 108px; margin: -29px 0 3px; position: relative; }
  .mobile-mascot img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 10px rgb(13 54 61 / .17)); }
  .mobile-mascot::after { content: ""; position: absolute; width: 39px; height: 28px; top: 65px; right: -32px; border-right: 3px solid var(--red); border-bottom: 3px solid var(--red); border-radius: 0 0 20px 0; opacity: .75; transform: rotate(12deg); }
  .home-status > .status-mascot { display: none; }
  .home-status { grid-template-columns: 1fr; }
  .recent-activity { grid-column: 1; }
}