:root {
  color-scheme: dark;
  --ink: #e7edf1;
  --ink-soft: #c3ced4;
  --muted: #9aa9b2;
  --line: #39474f;
  --paper: #1c262d;
  --canvas: #11181d;
  --green: #69d7a4;
  --green-dark: #86e6b5;
  --green-soft: #203a31;
  --mint: #bde4cc;
  --gold: #f0bd67;
  --gold-soft: #41331e;
  --red: #ff9292;
  --red-soft: #422628;
  --surface-raised: #253139;
  --surface-hover: #2d3b43;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 15px; line-height: 1.5; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(31, 135, 100, 0.28); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, 'Segoe UI', sans-serif; letter-spacing: -0.035em; }
h1 { margin-bottom: 8px; font-size: clamp(2rem, 3vw, 2.7rem); line-height: 1.12; font-weight: 800; }
h2 { margin-bottom: 0; font-size: 1.24rem; line-height: 1.3; font-weight: 750; }
p { margin-bottom: 0; }
.page-frame, .app-frame { min-height: 100vh; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 5vw, 72px); background: #142a2d; color: #f7fbf8; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #f7fbf8; font-family: Manrope, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -0.03em; }
.brand:hover { color: white; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(219, 245, 226, 0.42); border-radius: 11px; background: #bde4cc; color: #173b34; font-size: 1.02rem; }
.public-nav, .app-nav, .account-menu { display: flex; align-items: center; gap: 20px; }
.public-nav a:not(.button), .app-nav a { color: #d6e5de; font-size: 0.9rem; font-weight: 600; }
.public-nav a:hover, .app-nav a:hover, .app-nav a.is-current { color: white; }
.app-nav { align-self: stretch; gap: 24px; margin-right: auto; margin-left: clamp(28px, 6vw, 92px); }
.app-nav a { position: relative; display: inline-flex; align-items: center; }
.app-nav a.is-current::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 4px 4px 0 0; background: #bde4cc; content: ''; }
.account-menu { gap: 16px; }
.account-identity { display: grid; justify-items: end; gap: 1px; }
.account-name { max-width: 145px; overflow: hidden; color: #f7fbf8; font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.role-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px; border: 1px solid rgba(209, 233, 218, 0.35); border-radius: 99px; color: #d6e5de; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.signout-form { margin: 0; }
.text-button { padding: 7px 0; border: 0; background: transparent; color: #d6e5de; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.text-button:hover { color: white; }
.auth-page { background: #eaf0ec; }
.auth-layout { width: min(1120px, calc(100% - 48px)); min-height: calc(100vh - 142px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.8fr); align-items: center; gap: clamp(48px, 8vw, 112px); margin: 0 auto; padding: 68px 0; }
.auth-layout-register { grid-template-columns: minmax(0, 1fr) minmax(370px, 0.82fr); }
.auth-intro { max-width: 520px; padding: 16px 0; }
.eyebrow { margin-bottom: 9px; color: var(--green); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; line-height: 1.3; text-transform: uppercase; }
.auth-intro h1 { max-width: 480px; font-size: clamp(2.8rem, 5vw, 4.7rem); }
.lead { max-width: 460px; margin-top: 20px; color: #51636b; font-size: 1.1rem; line-height: 1.7; }
.auth-feature-list { display: grid; gap: 17px; margin-top: 42px; color: #344d4a; font-weight: 650; }
.auth-feature-list > div { display: flex; align-items: center; gap: 12px; }
.feature-mark { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #bdd7c5; border-radius: 10px; background: #f4faf5; color: var(--green); font-size: 0.65rem; font-weight: 800; }
.signup-note { display: flex; align-items: flex-start; gap: 13px; max-width: 420px; margin-top: 38px; padding: 18px; border: 1px solid #d0e2d6; border-radius: 16px; background: rgba(255, 255, 255, 0.63); color: #49615a; }
.signup-note p { line-height: 1.6; }
.signup-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); font-size: 1.15rem; font-weight: 700; }
.auth-card, .card { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }
.auth-card { padding: clamp(26px, 4vw, 38px); }
.card-heading { margin-bottom: 28px; }
.card-heading h2 { margin-bottom: 7px; font-size: 1.65rem; }
.card-heading > p:last-child { color: var(--muted); font-size: 0.92rem; }
.form-stack { display: grid; gap: 10px; }
.form-stack label { margin-top: 4px; color: #34454e; font-size: 0.84rem; font-weight: 700; }
.form-stack input, .reset-form input[type='password'], select { width: 100%; min-height: 45px; padding: 10px 12px; border: 1px solid #d7e0e0; border-radius: 9px; background: #fff; color: var(--ink); }
.form-stack input::placeholder, .reset-form input::placeholder { color: #97a3a7; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-size: 0.86rem; font-weight: 750; line-height: 1.15; text-align: center; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled, select:disabled { cursor: not-allowed; opacity: 0.55; }
.button-primary { background: var(--green); color: white; }
.button-primary:hover:not(:disabled) { background: var(--green-dark); color: white; }
.button-secondary { border-color: #c9ddd0; background: #f3f8f4; color: var(--green-dark); }
.button-secondary:hover:not(:disabled) { border-color: #9fc8ad; background: #e9f4ec; }
.button-light { background: #f0f8f2; color: #173f35; }
.button-light:hover:not(:disabled) { background: white; color: #173f35; }
.button-danger-quiet { border-color: #f0d4cf; background: #fff7f5; color: var(--red); }
.button-danger-quiet:hover:not(:disabled) { border-color: #e5bcb5; background: var(--red-soft); }
.button-small { min-height: 35px; padding: 8px 12px; font-size: 0.82rem; }
.button-wide { width: 100%; min-height: 48px; margin-top: 12px; }
.form-footnote { margin-top: 23px; color: var(--muted); font-size: 0.86rem; text-align: center; }
.form-footnote a { font-weight: 750; }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 12px 14px; border: 1px solid; border-radius: 10px; font-size: 0.85rem; line-height: 1.45; }
.notice-danger { border-color: #f0d1ca; background: var(--red-soft); color: #8d3431; }
.notice-success { border-color: #c8e0cf; background: var(--green-soft); color: #276044; }
.site-footer, .app-footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px clamp(20px, 5vw, 72px); color: #708079; font-size: 0.77rem; }
.app-page { background: #f2f5f3; }
.app-frame { display: flex; flex-direction: column; }
.app-main { width: min(1440px, calc(100% - 64px)); flex: 1; margin: 0 auto; padding: 36px 0 54px; }
.app-footer { width: min(1440px, calc(100% - 64px)); margin: 0 auto; padding: 19px 0 28px; border-top: 1px solid #dfe7e2; }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-subtitle { margin-top: 8px; color: var(--muted); font-size: 0.96rem; }
.welcome-chip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 3px; padding: 8px 12px; border: 1px solid #dbe6dd; border-radius: 99px; background: #f9fcfa; color: #66746d; font-size: 0.78rem; }
.welcome-chip strong { color: #2e4439; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #40a56d; box-shadow: 0 0 0 3px #def1e3; }
.dashboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 8px; border: 1px solid #dfe7e2; border-radius: 14px; background: #e9efeb; }
.provider-tabs, .period-tabs, .provider-subtabs { display: flex; align-items: center; gap: 4px; }
.provider-navigation { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.provider-tabs { min-width: 0; overflow-x: auto; }
.provider-tabs a, .period-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border-radius: 9px; color: #5f7169; font-size: 0.83rem; font-weight: 700; white-space: nowrap; }
.provider-tabs a:hover, .period-tabs a:hover { background: rgba(255, 255, 255, 0.6); color: #244c3e; }
.provider-tabs a.is-active, .period-tabs a.is-active { background: #fff; color: #135c46; box-shadow: 0 2px 7px rgba(25, 60, 44, 0.08); }
.provider-subtabs { padding-left: 13px; }
.provider-subtabs a { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px; border-radius: 7px; color: #718079; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.provider-subtabs a:hover { background: rgba(255, 255, 255, 0.6); color: #244c3e; }
.provider-subtabs a.is-active { background: #d6e5dc; color: #135c46; }
.period-tabs { flex: 0 0 auto; padding-left: 12px; border-left: 1px solid #d5e0d9; }
.period-label { padding: 0 6px; color: #83918a; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.period-tabs a { min-width: 48px; padding: 7px 9px; }
.card { padding: 22px; }
.set-picker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 18px 22px; }
.set-picker h2 { margin-bottom: 5px; font-size: 1.04rem; }
.muted { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.set-select-form { display: flex; align-items: center; gap: 9px; min-width: min(430px, 48%); }
.set-select-form select { min-width: 150px; }
.set-select-form .button { flex: 0 0 auto; }
.set-picker .empty-hint { color: var(--muted); font-size: 0.82rem; }
.owner-tools-page { display: grid; gap: 16px; margin-bottom: 28px; }
.streaker-panel, .followed-usage-panel, .streaker-log-panel { min-width: 0; }
.streaker-panel > .muted, .followed-usage-panel > .muted, .streaker-log-panel > .muted { margin-bottom: 12px; }
.streaker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.streaker-actions form { margin: 0; }
.streaker-summary, .followed-usage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.followed-usage-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.streaker-summary article, .followed-usage-summary article { display: grid; gap: 5px; min-width: 0; padding: 13px; border: 1px solid #edf0ee; border-radius: 11px; background: #fbfcfb; }
.streaker-summary article span, .followed-usage-summary article span { display: block; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.streaker-summary article strong, .followed-usage-summary article strong { display: block; color: #183b32; font-family: Manrope, sans-serif; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.streaker-panel .table-scroll { margin-top: 14px; border: 1px solid #edf0ee; border-radius: 11px; }
.streaker-table-panel { margin-top: 12px; border: 1px solid #edf0ee; border-radius: 11px; background: #fff; }
.streaker-table-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: #183b32; font-size: 0.86rem; font-weight: 750; cursor: pointer; list-style-position: inside; }
.streaker-table-panel[open] > summary { border-bottom: 1px solid #edf0ee; }
.streaker-table-panel .table-scroll { margin: 0; border: 0; border-radius: 0 0 11px 11px; }
.streaker-table-controls { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; padding: 12px 14px 0; color: var(--muted); font-size: 0.76rem; }
.streaker-table-controls label { display: grid; gap: 5px; min-width: min(320px, 100%); }
.streaker-table-controls input { min-height: 36px; }
.streaker-table-controls [data-table-row-count] { padding-bottom: 8px; font-variant-numeric: tabular-nums; }
.streaker-table-panel th button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.streaker-table-panel th button::after { content: "↕"; color: #8a9790; font-size: 0.72em; }
.streaker-table-panel th[aria-sort="ascending"] button::after { content: "↑"; color: #216d50; }
.streaker-table-panel th[aria-sort="descending"] button::after { content: "↓"; color: #216d50; }
.streaker-table-panel .table-column-filters th { padding: 4px 8px 9px; }
.streaker-table-panel .table-column-filters input { width: 100%; min-width: 86px; min-height: 32px; padding: 6px 8px; border: 1px solid #dfe7e2; border-radius: 7px; background: #fff; color: #233c33; font: inherit; font-size: 0.68rem; letter-spacing: normal; text-transform: none; }
.streaker-table-panel .table-column-filters input:focus { outline: 2px solid #91bea2; outline-offset: 1px; }
.streaker-table-panel .table-empty td { padding: 18px; color: #77857c; text-align: center; }
.followed-usage-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.followed-usage-panel .suggestion-list { margin-top: 15px; }
.followed-usage-panel .suggestion-row { grid-template-columns: 36px minmax(130px, 0.7fr) minmax(190px, 0.85fr) minmax(220px, 1.45fr) auto; align-items: center; }
.followed-usage-panel .suggestion-image { grid-row: auto; }
.followed-usage-panel .suggestion-main { grid-column: 2; }
.followed-usage-panel .suggestion-evidence { grid-column: 3; }
.followed-usage-panel .candidate-list { grid-column: 4; }
.followed-usage-panel .suggestion-action-form { grid-column: 5; margin: 0; }
.followed-usage-panel .suggestion-action-form .button { min-height: 34px; padding: 7px 10px; font-size: 0.72rem; }
.followed-usage-panel .suggestion-main { display: grid; justify-content: start; gap: 2px; }
.followed-usage-panel .suggestion-main a { color: #216d50; text-decoration: underline; text-underline-offset: 2px; }
.followed-usage-panel .suggestion-main > span { text-align: left; }
.followed-usage-panel .suggestion-evidence { align-items: flex-start; flex-direction: column; gap: 4px; }
.suggestion-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 16px; padding: 14px; border: 1px solid #edf0ee; border-radius: 11px; background: #fbfcfb; }
.suggestion-settings > label { display: grid; gap: 5px; color: #526459; font-size: 0.76rem; }
.suggestion-settings > label input[type="number"] { width: 100%; min-height: 36px; }
.suggestion-settings .suggestion-toggle { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; color: #183b32; font-weight: 750; }
.suggestion-settings .suggestion-toggle input { width: 17px; height: 17px; }
.suggestion-settings button { justify-self: start; }
.dismissed-suggestions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.dismissed-suggestions > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); font-weight: 750; }
.dismissed-suggestions > .chart-caption { margin: 10px 0; }
.dismissed-suggestion-list { display: grid; gap: 7px; }
.dismissed-suggestion-row { display: grid; grid-template-columns: 36px minmax(100px, 1fr) minmax(130px, auto) auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.dismissed-suggestion-row > img, .dismissed-suggestion-row > .emote-placeholder { width: 36px; height: 36px; border-radius: 7px; object-fit: contain; }
.dismissed-suggestion-name { display: grid; gap: 2px; min-width: 0; }
.dismissed-suggestion-name strong { overflow-wrap: anywhere; color: var(--ink); font-size: 0.8rem; }
.dismissed-suggestion-name span { color: var(--muted); font-size: 0.68rem; }
.dismissed-suggestion-row form { margin: 0; }
.dismissed-suggestion-row .button { min-height: 34px; padding: 7px 10px; font-size: 0.72rem; }
.streaker-action-list { display: grid; gap: 0; max-height: 360px; overflow: auto; margin: 14px 0 0; padding: 0; border: 1px solid #edf0ee; border-radius: 11px; list-style: none; }
.streaker-action-list li { display: grid; grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); align-items: start; column-gap: 16px; row-gap: 4px; padding: 10px 12px; border-top: 1px solid #edf0ee; color: #526459; font-size: 0.78rem; line-height: 1.5; }
.streaker-action-list li:first-child { border-top: 0; }
.streaker-action-list time { color: #68786f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.streaker-action-list li span { overflow-wrap: anywhere; }
.streaker-log-panel [data-action-update-status] { margin: -8px 0 0; font-size: 0.72rem; }
.streaker-log-panel [data-action-empty] { margin-top: 14px; }
.streaker-log-panel [data-action-empty].is-hidden { display: none; }
.streaker-log-panel .streaker-action-list.is-hidden { display: none; }
.notice-stack { display: grid; gap: 8px; margin-bottom: 17px; }
.notice-warning { align-items: center; margin: 0; border-color: #efdcae; background: var(--gold-soft); color: #73500d; }
.notice-info { align-items: flex-start; margin: 0; border-color: #d8e6ef; background: #f1f7fb; color: #39596c; }
.graphql-authorization { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: stretch; padding: 0; overflow: hidden; }
.graphql-authorization > .section-heading { min-width: 0; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.graphql-authorization > .section-heading h2 { font-size: 1rem; }
.graphql-authorization-status { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.graphql-authorization-status > strong { color: var(--ink); font-size: 0.78rem; }
.graphql-authorization-status > p, .graphql-authorization-guidance { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.graphql-authorization-guidance { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8rem; }
.graphql-har-import-form { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.graphql-har-import-form label { color: var(--ink); font-size: 0.78rem; font-weight: 700; }
.graphql-har-import-form input[type="file"] { width: 100%; min-width: 0; color: var(--ink-soft); font-size: 0.76rem; }
.graphql-har-import-form .button { grid-column: 2; justify-self: start; }
.graphql-authorization-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; }
.graphql-authorization-actions > p { margin: 0; }
.graphql-authorization-actions form { margin: 0; }
.notice-icon { display: grid; flex: 0 0 22px; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #f5dfaa; color: #74500e; font-weight: 800; }
.notice-warning a { color: #76500b; text-decoration: underline; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.summary-card { display: flex; min-height: 130px; flex-direction: column; align-items: flex-start; padding: 20px 21px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 6px 22px rgba(26, 53, 44, 0.035); }
.summary-card-primary { border-color: #b9d9c4; background: linear-gradient(135deg, #f1faf3, #fff 90%); }
.summary-label { color: #66776e; font-size: 0.77rem; font-weight: 700; }
.summary-value { margin: 7px 0 4px; color: #183b32; font-family: Manrope, sans-serif; font-size: 1.95rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1.1; }
.summary-unit { margin-left: 2px; font-size: 1.05rem; }
.summary-note { color: #8a9790; font-size: 0.74rem; }
.summary-date { margin: 10px 0 4px; color: #233c33; font-family: Manrope, sans-serif; font-size: 1.2rem; font-weight: 750; letter-spacing: -0.03em; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr); gap: 16px; margin-bottom: 16px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.chart-card, .channels-card, .freshness-card, .table-card, .suggestions-card, .conflicts-card { min-width: 0; }
.chart-legend { display: inline-flex; align-items: center; gap: 7px; color: #86928c; font-size: 0.72rem; white-space: nowrap; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; background: #288c68; }
.chart-wrap { position: relative; height: 250px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #87938d; font-size: 0.88rem; }
.chart-empty[hidden] { display: none; }
.chart-caption { margin-top: 13px; color: #87938d; font-size: 0.73rem; }
.channels-card { padding-bottom: 15px; }
.count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 25px; padding: 3px 8px; border: 1px solid #dce7df; border-radius: 99px; background: #f4f8f5; color: #4d685a; font-size: 0.72rem; font-weight: 750; }
.channel-list, .accounts-list, .conflict-list { margin: 0; padding: 0; list-style: none; }
.channel-list li { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #edf0ee; }
.channel-list li:first-child { border-top: 0; padding-top: 1px; }
.channel-avatar, .account-avatar { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 12px; background: #e9f3ed; color: #27634d; font-family: Manrope, sans-serif; font-size: 0.79rem; font-weight: 800; text-transform: uppercase; }
.channel-details { display: grid; flex: 1; min-width: 0; gap: 2px; }
.channel-details strong { overflow: hidden; font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.channel-details > span { color: #89948e; font-size: 0.67rem; }
.channel-state { display: grid; justify-items: end; gap: 4px; }
.status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid #e1e7e3; border-radius: 99px; background: #f6f8f6; color: #6d7b73; font-size: 0.64rem; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.status-good { border-color: #c9e4d1; background: #edf8ef; color: #36734d; }
.status-warning { border-color: #efdcae; background: #fff7e3; color: #8a5d0c; }
.status-muted { border-color: #e2e5e4; background: #f4f5f5; color: #737d7c; }
.coverage-mini { color: #748178; font-size: 0.67rem; }
.freshness-card { margin-bottom: 16px; }
.freshness-card .section-heading { margin-bottom: 13px; }
.freshness-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.freshness-item { display: grid; justify-items: start; gap: 8px; min-width: 0; padding: 13px; border: 1px solid #edf0ee; border-radius: 12px; background: #fbfcfb; }
.freshness-provider { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; }
.provider-dot { width: 7px; height: 7px; border-radius: 50%; background: #45a77a; }
.freshness-time { overflow-wrap: anywhere; color: #87938d; font-size: 0.68rem; line-height: 1.45; }
.lower-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr); align-items: start; }
.table-card { padding: 0; overflow: hidden; }
.table-card .section-heading { margin: 0; padding: 22px 22px 15px; }
.table-context { padding: 5px 9px; border-radius: 7px; background: #eef5f0; color: #4c6a5b; font-size: 0.69rem; font-weight: 750; }
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: #f6f8f6; }
th { padding: 10px 13px; color: #839087; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 22px; }
th:last-child, td:last-child { padding-right: 22px; }
td { padding: 13px; border-top: 1px solid #edf0ee; color: #586a60; font-size: 0.77rem; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.emote-cell { display: flex; align-items: center; gap: 8px; min-width: 145px; max-width: 300px; }
.emote-name-stack { display: grid; gap: 3px; min-width: 0; }
.emote-provider-link { color: #73857a; font-size: 0.65rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.emote-provider-link:hover { color: var(--green); }
.emote-channel-alias { color: var(--muted); font-size: 0.65rem; overflow-wrap: anywhere; }
.emote-image, .emote-placeholder { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #edf5ef; object-fit: contain; }
.emote-placeholder { color: #47745d; font-size: 0.69rem; font-weight: 800; }
.emote-name { color: #253c31; font-weight: 750; white-space: normal; overflow-wrap: anywhere; }
.suggestion-tag { margin-left: 2px; padding: 3px 6px; border-radius: 6px; background: #fff4df; color: #93600a; font-size: 0.59rem; font-weight: 750; white-space: nowrap; }
.rate-cell { color: #285e46; font-weight: 750; }
.table-footnote { padding: 12px 22px 16px; color: #87938d; font-size: 0.69rem; }
.table-empty { min-width: 330px; }
.table-sort { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table-sort::after { content: "↕"; margin-left: 6px; color: var(--muted); font-size: 0.72rem; }
th[aria-sort="ascending"] .table-sort::after { content: "↑"; color: var(--green); }
th[aria-sort="descending"] .table-sort::after { content: "↓"; color: var(--green); }
.table-column-filters th { padding-top: 4px; padding-bottom: 8px; }
.table-column-filters input, .table-column-filters select { width: 100%; min-width: 5rem; min-height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); padding: 5px 7px; font: inherit; font-size: 0.7rem; }
.table-column-filters label + label { display: block; margin-top: 4px; }
.range-filter { display: grid; gap: 4px; min-width: 5.2rem; text-align: left; }
.range-filter label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; color: var(--muted); font-size: 0.59rem; font-weight: 700; }
.range-filter input { min-width: 0; width: 100%; min-height: 28px; padding: 4px 5px; }
.usage-table-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 0 22px 12px; }
.usage-table-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 0.68rem; font-weight: 700; }
.usage-table-controls input { min-width: min(22rem, 60vw); min-height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); padding: 6px 9px; font: inherit; }
.usage-table-controls [data-table-row-count] { margin-left: auto; color: var(--muted); font-size: 0.7rem; }
.table-filter-error { margin: 0 22px 10px; color: #ffaaaa; font-size: 0.74rem; }
.table-filter-error[hidden] { display: none; }
.ui-segment-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.ui-segment-heading strong { font-size: 0.78rem; }
.ui-segment-toggle { flex: 0 0 auto; min-height: 26px; margin: 0 0 0 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-raised); color: var(--ink-soft); font: inherit; font-size: 0.66rem; font-weight: 700; cursor: pointer; }
.ui-segment-toggle:hover { border-color: #5d8e70; color: var(--green); }
.section-heading .ui-segment-toggle { margin-left: auto; }
[data-ui-segment] > [hidden] { display: none !important; }
.suggestions-card .section-heading { margin-bottom: 12px; }
.suggestion-symbol { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #fff4e0; color: #9d6a11; font-size: 1.1rem; font-weight: 800; }
.suggestions-card > .muted { min-height: 18px; margin-bottom: 14px; }
.evidence-strip { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 12px 0 14px; padding: 12px; border: 1px solid #ecf0e9; border-radius: 10px; background: #fafbf8; }
.evidence-strip > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #728076; font-size: 0.69rem; }
.evidence-strip strong { color: #3f5b4a; font-size: 0.67rem; }
.evidence-strip time, .evidence-strip > span > span { color: #273d31; font-weight: 700; }
.suggestion-list { display: grid; gap: 8px; }
.suggestion-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 12px; border: 1px solid #f0e3c2; border-radius: 10px; background: #fffdfa; }
.suggestion-image { grid-row: span 2; width: 36px; height: 36px; flex-basis: 36px; }
.suggestion-evidence { grid-column: 2; }
.suggestion-main, .suggestion-evidence { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.suggestion-name-stack { display: grid; gap: 3px; min-width: 0; }
.suggestion-main strong { color: #273d31; font-size: 0.83rem; }
.suggestion-main > span { color: #829087; font-size: 0.67rem; text-align: right; }
.suggestion-evidence { color: #879187; font-size: 0.67rem; }
.suggestion-evidence strong { color: #79621f; font-size: 0.77rem; }
.human-action-note { margin-top: 13px; color: #8a948d; font-size: 0.68rem; line-height: 1.45; }
.conflicts-card { margin-bottom: 5px; }
.conflicts-card .section-heading { margin-bottom: 5px; }
.conflict-intro { margin-bottom: 15px; }
.conflict-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid #edf0ee; }
.conflict-info { display: grid; gap: 7px; min-width: 0; }
.conflict-title { display: flex; align-items: center; gap: 10px; }
.conflict-title > strong { font-family: Manrope, sans-serif; font-size: 0.92rem; }
.conflict-meta { color: #7e8a82; font-size: 0.72rem; }
.conflict-meta strong { color: #3b5143; }
.candidate-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.candidate-label { margin-right: 3px; color: #8a958e; font-size: 0.68rem; }
.candidate-chip { padding: 3px 7px; border: 1px solid #e5ebe6; border-radius: 7px; background: #f8faf8; color: #526459; font-size: 0.67rem; }
.candidate-preview { display: flex; align-items: center; gap: 7px; min-width: 145px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; }
.candidate-preview:hover { border-color: #5d8e70; color: var(--ink); }
.candidate-preview > img, .candidate-preview-placeholder { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 7px; object-fit: contain; }
.candidate-preview-label { display: grid; gap: 2px; min-width: 0; }
.candidate-preview-label strong { color: var(--ink); font-size: 0.72rem; }
.candidate-preview-label > span { color: var(--muted); font-size: 0.61rem; }
.candidate-preview-placeholder { font-size: 0.68rem; }
.conflict-form { display: flex; align-items: center; gap: 8px; flex: 0 1 420px; }
.conflict-form select { min-width: 130px; min-height: 39px; font-size: 0.77rem; }
.conflict-form .button { flex: 0 0 auto; }
.readonly-label { flex: 0 0 auto; color: #89948d; font-size: 0.72rem; }
.empty-state { display: grid; justify-items: center; gap: 5px; padding: 34px 20px; border: 1px dashed #dfe7e1; border-radius: 13px; background: #fbfcfb; text-align: center; }
.empty-state strong { color: #42574a; font-size: 0.82rem; }
.empty-state span { color: #89958d; font-size: 0.73rem; line-height: 1.5; }
.compact-empty { padding: 21px 15px; }
.accounts-card { padding: 0; overflow: hidden; }
.accounts-card > .section-heading { margin: 0; padding: 22px; }
.account-limit-banner { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 15px 18px; border: 1px solid #cfe2d3; border-radius: 13px; background: #f1f8f2; }
.limit-symbol { display: grid; flex: 0 0 35px; width: 35px; height: 35px; place-items: center; border-radius: 11px; background: #deefe1; color: #27704f; font-size: 1.2rem; }
.account-limit-banner > div:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.account-limit-banner strong { color: #335442; font-size: 0.83rem; }
.account-limit-banner > div:nth-child(2) span { color: #7b8c80; font-size: 0.73rem; }
.account-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 20px 22px; border-top: 1px solid #edf0ee; }
.account-summary { display: flex; align-items: flex-start; gap: 12px; min-width: 190px; padding-top: 3px; }
.account-avatar { flex-basis: 40px; width: 40px; height: 40px; }
.account-details { display: grid; gap: 7px; }
.account-details > strong { color: #25392e; font-size: 0.88rem; }
.account-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.account-tags .role-pill { border-color: #e1e8e2; background: #f7faf7; color: #68786e; font-size: 0.58rem; }
.account-actions { display: grid; justify-items: end; gap: 9px; }
.account-actions > form:not(.reset-form) { margin: 0; }
.reset-form { display: grid; grid-template-columns: minmax(155px, 220px) auto auto; align-items: center; gap: 8px; }
.reset-form input[type='password'] { min-height: 38px; font-size: 0.78rem; }
.account-note { padding: 0 22px 18px; color: #89948d; font-size: 0.7rem; }
.account-title-row { align-items: center; margin-bottom: 25px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

@media (max-width: 1050px) {
  .auth-layout { gap: 48px; }
  .content-grid, .lower-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, 0.8fr); }
  .reset-form { grid-template-columns: minmax(150px, 1fr) auto; }
  .reset-form .button { grid-column: 2; grid-row: 1; }
}

@media (max-width: 820px) {
  .site-header { padding-right: 22px; padding-left: 22px; }
  .app-nav { margin-left: 28px; }
  .account-name { max-width: 100px; }
  .auth-layout, .auth-layout-register { grid-template-columns: 1fr minmax(320px, 0.92fr); gap: 28px; }
  .auth-intro h1 { font-size: clamp(2.5rem, 6vw, 3.4rem); }
  .app-main, .app-footer { width: min(100% - 40px, 1440px); }
  .content-grid, .lower-grid { grid-template-columns: 1fr; }
  .freshness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channels-card { min-height: auto; }
  .channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .channel-list li:nth-child(2) { border-top: 0; padding-top: 1px; }
  .account-row { flex-direction: column; }
  .account-actions { width: 100%; justify-items: stretch; }
  .account-actions > form:not(.reset-form) { justify-self: end; }
  .reset-form { grid-template-columns: minmax(180px, 1fr) auto auto; }
  .reset-form .button { grid-column: auto; grid-row: auto; }
}

@media (max-width: 620px) {
  .site-header { min-height: 66px; flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .public-nav, .app-nav, .account-menu { gap: 12px; }
  .brand { font-size: 0.93rem; }
  .brand-mark { width: 31px; height: 31px; }
  .app-nav { order: 3; width: 100%; height: 34px; margin: 0; }
  .app-nav a.is-current::after { bottom: -8px; }
  .account-menu { margin-left: auto; }
  .account-identity { display: none; }
  .auth-layout, .auth-layout-register { width: min(100% - 32px, 460px); min-height: auto; grid-template-columns: 1fr; gap: 28px; padding: 44px 0 36px; }
  .auth-intro { padding: 0; }
  .auth-intro h1 { max-width: 400px; font-size: clamp(2.35rem, 11vw, 3.3rem); }
  .lead { margin-top: 13px; font-size: 0.98rem; }
  .auth-feature-list { display: none; }
  .signup-note { margin-top: 20px; padding: 13px; }
  .auth-card { padding: 24px; }
  .site-footer { padding: 14px 18px; font-size: 0.68rem; }
  .app-main, .app-footer { width: calc(100% - 32px); }
  .app-main { padding-top: 27px; }
  .page-title-row { align-items: flex-start; margin-bottom: 20px; }
  .page-title-row h1 { font-size: 2.1rem; }
  .welcome-chip { display: none; }
  .dashboard-controls { align-items: stretch; flex-direction: column; padding: 7px; }
  .provider-navigation { width: 100%; }
  .provider-tabs { width: 100%; padding-bottom: 5px; border-bottom: 1px solid #d5e0d9; }
  .provider-tabs a { padding: 8px 12px; }
  .provider-subtabs { padding: 3px 2px 0; }
  .period-tabs { justify-content: space-between; padding: 4px 2px 1px; border-left: 0; }
  .period-label { padding-left: 5px; }
  .period-tabs a { flex: 1; }
  .set-picker { align-items: flex-start; flex-direction: column; padding: 17px; }
  .set-select-form { width: 100%; min-width: 0; }
  .set-select-form select { min-width: 0; }
  .summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .summary-card { min-height: 115px; padding: 15px; }
  .summary-card:last-child { grid-column: 1 / -1; min-height: 97px; }
  .summary-value { font-size: 1.65rem; }
  .card { padding: 17px; border-radius: 15px; }
  .table-card { padding: 0; }
  .table-card .section-heading { padding: 18px 17px 13px; }
  .chart-wrap { height: 218px; }
  .chart-legend { max-width: 105px; white-space: normal; }
  .channel-list { grid-template-columns: 1fr; }
  .channel-list li:nth-child(2) { border-top: 1px solid #edf0ee; padding-top: 12px; }
  .freshness-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .freshness-item { padding: 11px; }
  .freshness-time { font-size: 0.63rem; }
  .conflict-row { align-items: flex-start; flex-direction: column; gap: 13px; }
  .conflict-form { width: 100%; flex-basis: auto; }
  .conflict-form select { flex: 1; min-width: 0; }
  .account-title-row { align-items: flex-start; flex-direction: column; }
  .account-title-row .button { width: 100%; }
  .account-limit-banner { align-items: flex-start; flex-wrap: wrap; padding: 13px; }
  .account-limit-banner .count-pill { margin-left: 48px; }
  .reset-form { grid-template-columns: 1fr auto; }
  .reset-form .button { grid-column: 2; grid-row: 1; }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 5px; font-size: 0.68rem; }
}

@media (max-width: 390px) {
  .public-nav { gap: 8px; }
  .public-nav a:not(.button) { font-size: 0.8rem; }
  .button-small { padding-right: 9px; padding-left: 9px; font-size: 0.74rem; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card:last-child { grid-column: auto; }
  .freshness-grid { grid-template-columns: 1fr; }
  .reset-form { grid-template-columns: 1fr; }
  .reset-form .button { grid-column: auto; grid-row: auto; }
  .reset-form .button { justify-self: stretch; }
}

.dashboard-filter-form {
  display: flex;
  align-items: end;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  margin-top: 0.8rem;
}

.dashboard-filter-form label {
  color: var(--muted, #68756e);
  font-size: 0.78rem;
  font-weight: 650;
}

.dashboard-filter-form input,
.dashboard-filter-form select {
  min-height: 2.6rem;
  border: 1px solid var(--line, #dce5df);
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.5rem 0.7rem;
  color: var(--ink, #18231d);
  font: inherit;
}

.twitch-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.4rem;
  margin: 1.3rem 0;
}

.twitch-details > div { display: grid; gap: 0.25rem; }
.twitch-details dt { color: var(--muted); font-size: 0.77rem; font-weight: 700; }
.twitch-details dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.twitch-action { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.twitch-action form { margin: 0; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.settings-card { min-width: 0; }
.settings-card .section-heading { margin-bottom: 8px; }
.settings-form { display: grid; gap: 9px; margin-top: 18px; }
.settings-form label { color: var(--ink); font-size: 0.78rem; font-weight: 700; }
.settings-form input, .channel-add-form input { min-height: 42px; width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fff; color: var(--ink); font: inherit; }
.settings-form .button { justify-self: start; margin-top: 4px; }
.field-hint { margin: 3px 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.5; }
.channel-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin: 17px 0; }
.channel-add-form input:disabled { background: #f3f5f3; color: #87938d; }
.settings-note { margin-top: 12px; font-size: 0.75rem; }
.settings-channel-list { display: grid; gap: 8px; margin-top: 16px; }
.settings-channel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdfc; }
.settings-channel-summary { display: grid; gap: 4px; min-width: 0; }
.settings-channel-summary > strong { color: var(--ink); font-size: 0.84rem; }
.settings-channel-id, .settings-channel-event { color: var(--muted); font-size: 0.68rem; overflow-wrap: anywhere; }
.settings-channel-row form { margin: 0; flex: 0 0 auto; }

@media (max-width: 760px) {
  .settings-grid { grid-template-columns: 1fr; }
  .followed-usage-panel .suggestion-row { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); }
  .followed-usage-panel .suggestion-main { grid-column: 2; }
  .followed-usage-panel .suggestion-evidence { grid-column: 3; }
  .followed-usage-panel .candidate-list { grid-column: 2 / -1; }
  .followed-usage-panel .suggestion-action-form { grid-column: 2 / -1; justify-self: end; }
}

@media (max-width: 520px) {
  .channel-add-form { grid-template-columns: 1fr; }
  .channel-add-form .button { width: 100%; }
  .settings-channel-row { align-items: flex-start; }
  .settings-channel-row .button { padding: 7px 9px; }
}

@media (max-width: 520px) {
  .twitch-details { grid-template-columns: 1fr; }
  .streaker-summary, .followed-usage-summary { grid-template-columns: 1fr 1fr; }
  .followed-usage-panel .suggestion-row { grid-template-columns: 36px minmax(0, 1fr); }
  .followed-usage-panel .suggestion-main, .followed-usage-panel .suggestion-evidence,
  .followed-usage-panel .candidate-list { grid-column: 2; }
  .followed-usage-panel .suggestion-action-form { grid-column: 2; justify-self: start; }
  .dismissed-suggestion-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .dismissed-suggestion-row > time { grid-column: 2; grid-row: 2; }
  .dismissed-suggestion-row > form { grid-column: 3; grid-row: 1 / span 2; }
  .streaker-action-list li { grid-template-columns: 1fr; gap: 4px; }
  .suggestion-settings { grid-template-columns: 1fr; }
  .graphql-authorization-status, .graphql-har-import-form, .graphql-authorization-actions { grid-template-columns: 1fr; }
  .graphql-har-import-form .button { grid-column: 1; justify-self: stretch; }
  .graphql-authorization-actions .button { width: 100%; }
}

@media (max-width: 760px) {
  .dashboard-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-filter-form input,
  .dashboard-filter-form select,
  .dashboard-filter-form button {
    width: 100%;
  }
}

/* Dark theme is the default across public, account, dashboard, and owner pages. */
html, body, .auth-page, .app-page { background: var(--canvas); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: rgba(105, 215, 164, 0.62); }
a { color: var(--green); }
a:hover { color: var(--green-dark); }
.lead, .signup-note, .auth-feature-list, .form-stack label, .settings-form label,
.suggestion-settings > label, .streaker-action-list li { color: var(--ink-soft); }
.site-footer, .app-footer, .muted, .form-footnote, .chart-caption, .table-footnote,
.account-note, .field-hint, .settings-channel-id, .settings-channel-event { color: var(--muted); }
.auth-card, .card, .streaker-table-panel, .streaker-summary article,
.followed-usage-summary article, .summary-card, .freshness-item, .suggestion-settings,
.suggestion-row, .evidence-strip, .candidate-chip, .empty-state, .settings-channel-row,
.signup-note, .welcome-chip, .account-tags .role-pill { border-color: var(--line); background-color: var(--paper); }
.app-page, .auth-page { background: var(--canvas); }
.auth-card, .card { box-shadow: var(--shadow); }
.feature-mark, .signup-icon, .channel-avatar, .account-avatar, .emote-image, .emote-placeholder,
.limit-symbol, .suggestion-symbol, .table-context, .candidate-chip { background: var(--surface-raised); color: var(--green); }
.feature-mark { border-color: var(--line); }
.signup-note { color: var(--ink-soft); }
.form-stack input, .reset-form input[type='password'], select,
.dashboard-filter-form input, .dashboard-filter-form select,
.settings-form input, .channel-add-form input,
.streaker-table-panel .table-column-filters input {
  border-color: var(--line);
  background: #151e23;
  color: var(--ink);
}
.form-stack input::placeholder, .reset-form input::placeholder { color: #81919a; }
.channel-add-form input:disabled { background: #202a30; color: var(--muted); }
.button-primary { background: #55c991; color: #10251b; }
.button-primary:hover:not(:disabled) { background: #77e0aa; color: #10251b; }
.button-secondary { border-color: #426450; background: #20342b; color: #9aebbb; }
.button-secondary:hover:not(:disabled) { border-color: #5d8e70; background: #294437; color: #b4f4cc; }
.button-light { background: #26353b; color: var(--ink); }
.button-light:hover:not(:disabled) { background: #34464d; color: var(--ink); }
.button-danger-quiet { border-color: #754448; background: #382427; color: #ffaaaa; }
.button-danger-quiet:hover:not(:disabled) { border-color: #96555a; background: #4a2b30; color: #ffc0c0; }
.notice-danger { border-color: #754448; background: var(--red-soft); color: #ffaaaa; }
.notice-success { border-color: #38664a; background: var(--green-soft); color: #9be9b6; }
.notice-warning { border-color: #725a2f; background: var(--gold-soft); color: #f4d18b; }
.notice-info { border-color: #3b5b70; background: #1d303d; color: #b6d8eb; }
.notice-icon { background: #634d27; color: #ffdc91; }
.notice-warning a { color: #ffe2a1; }
.welcome-chip { color: var(--muted); }
.welcome-chip strong, .summary-value, .summary-date, .streaker-summary article strong,
.followed-usage-summary article strong, .streaker-table-panel > summary,
.suggestion-settings .suggestion-toggle, .emote-name, .evidence-strip time,
.evidence-strip > span > span, .suggestion-main strong, .conflict-meta strong,
.account-details > strong, .account-limit-banner strong { color: var(--ink); }
.dashboard-controls { border-color: var(--line); background: #1a252b; }
.provider-tabs a, .period-tabs a, .period-label, .provider-subtabs a { color: var(--muted); }
.provider-tabs a:hover, .period-tabs a:hover, .provider-subtabs a:hover { background: var(--surface-hover); color: var(--ink); }
.provider-tabs a.is-active, .period-tabs a.is-active { background: #33434a; color: #b3f0ce; box-shadow: none; }
.provider-subtabs a.is-active { background: #29383e; color: #a6e9c1; }
.period-tabs { border-left-color: var(--line); }
.provider-tabs { border-bottom-color: var(--line); }
.streaker-summary article, .followed-usage-summary article, .streaker-table-panel,
.streaker-panel .table-scroll, .streaker-table-panel[open] > summary,
.suggestion-settings, .streaker-action-list, .streaker-action-list li,
.channel-list li, .conflict-row, .account-row, .settings-channel-row,
.streaker-table-panel .table-column-filters input { border-color: var(--line); }
.streaker-table-panel { background: var(--paper); }
.streaker-table-panel > summary { color: var(--ink); }
.streaker-table-panel th button::after { color: var(--muted); }
.streaker-table-panel th[aria-sort="ascending"] button::after,
.streaker-table-panel th[aria-sort="descending"] button::after { color: var(--green); }
.streaker-table-panel .table-column-filters input:focus { outline-color: var(--green); }
.streaker-table-panel .table-empty td { color: var(--muted); }
.streaker-action-list li { color: var(--ink-soft); }
.streaker-action-list time { color: var(--muted); }
.summary-card { background: var(--paper); }
.summary-card-primary { border-color: #38664a; background: linear-gradient(135deg, #1b3428, var(--paper) 90%); }
.summary-label, .summary-note, .chart-legend, .chart-empty, .channel-details > span,
.coverage-mini, .freshness-time, .table-footnote, .emote-provider-link,
.suggestion-main > span, .suggestion-evidence, .human-action-note,
.conflict-meta, .candidate-label, .readonly-label, .account-note,
.account-limit-banner > div:nth-child(2) span { color: var(--muted); }
.chart-legend i, .provider-dot, .online-dot { background: var(--green); }
.online-dot { box-shadow: 0 0 0 3px #234b39; }
.count-pill { border-color: var(--line); background: var(--surface-raised); color: var(--ink-soft); }
.status-pill { border-color: var(--line); background: #273239; color: var(--ink-soft); }
.status-good { border-color: #37674a; background: #203d2b; color: #9ae8b4; }
.status-warning { border-color: #755d31; background: #40341f; color: #f4d38f; }
.status-muted { border-color: #46535a; background: #293238; color: #bec8cd; }
.status-info { border-color: #3c6178; background: #203746; color: #add9f0; }
.freshness-item { background: var(--paper); }
.table-context { background: #263a31; color: #a6eac0; }
thead { background: #222d33; }
th { color: var(--muted); }
td { border-top-color: var(--line); color: var(--ink-soft); }
.owner-channel-link { color: #8be4b5; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.owner-channel-link:hover { color: #bbf5d1; }
.candidate-chip.owner-channel-link { text-decoration: none; }
.emote-image, .emote-placeholder { background: #293a34; }
.emote-placeholder { color: #b0e7c3; }
.emote-provider-link { color: #9aa9a1; }
.followed-usage-panel .suggestion-main a { color: var(--green-dark); }
.suggestion-tag { background: #42351f; color: #f2d18d; }
.rate-cell { color: #9ae8b4; }
.suggestion-symbol { background: #40331f; color: #f2c879; }
.evidence-strip { border-color: var(--line); background: #202b30; }
.evidence-strip > span, .evidence-strip strong { color: var(--ink-soft); }
.suggestion-row { border-color: #55452a; background: #252a29; }
.suggestion-evidence strong { color: #f0d188; }
.candidate-chip { border-color: var(--line); background: #273239; color: var(--ink-soft); }
.empty-state { border-color: var(--line); background: #1a242a; }
.empty-state strong { color: var(--ink); }
.account-limit-banner { border-color: #38664a; background: #1d3428; }
.limit-symbol { background: #294635; color: #a0e7b8; }
.account-row { border-top-color: var(--line); }
.account-tags .role-pill { border-color: var(--line); background: #28333a; color: var(--ink-soft); }
.settings-channel-row { background: var(--paper); }
.table-state-pill { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 99px; font-size: 0.66rem; font-weight: 750; line-height: 1.15; white-space: nowrap; }
.streak-shareable { color: #8be4b5 !important; font-weight: 850; }
.can-share-row > td { background: #203a2b; }
.can-share-row > td:first-child { box-shadow: inset 3px 0 var(--green); }
.can-share-channel { color: #b0f0c6 !important; }