:root {
  --product-bg: #07090d;
  --product-bg-elevated: #0b0f15;
  --product-surface: #10161f;
  --product-surface-strong: #151d28;
  --product-border: #25303d;
  --product-border-hot: #3d5268;
  --product-text: #eef3f8;
  --product-muted: #94a1b2;
  --product-subtle: #637184;
  --product-accent: #32d6b0;
  --product-accent-2: #718cff;
  --product-danger: #ff6b7a;
  --product-radius: 8px;
  --product-font: "Segoe UI Variable", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

:root[data-system-theme="light"],
:root[data-theme="eye"] {
  --product-bg: #f4f6f8;
  --product-bg-elevated: #ffffff;
  --product-surface: #ffffff;
  --product-surface-strong: #edf1f5;
  --product-border: #d8dee7;
  --product-border-hot: #aeb9c7;
  --product-text: #141a22;
  --product-muted: #5f6b7a;
  --product-subtle: #8792a0;
  --product-accent: #087f68;
  --product-accent-2: #405fdb;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--product-font) !important;
  letter-spacing: 0 !important;
}

body {
  background-color: var(--product-bg) !important;
  color: var(--product-text);
}

button,
a,
input,
select,
textarea {
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 140ms ease !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--product-accent) 70%, white) !important;
  outline-offset: 2px !important;
}

.nav,
.app-nav {
  border-right: 1px solid var(--product-border) !important;
  background: color-mix(in srgb, var(--product-bg-elevated) 96%, transparent) !important;
  box-shadow: none !important;
}

.brand {
  border-color: color-mix(in srgb, var(--product-accent) 70%, var(--product-border)) !important;
  color: var(--product-accent) !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-accent) 12%, transparent) !important;
}

.nav .icon-button,
.app-nav .icon-button {
  color: var(--product-muted) !important;
  border-radius: 7px !important;
}

.nav .icon-button:hover,
.app-nav .icon-button:hover {
  color: var(--product-text) !important;
  background: var(--product-surface-strong) !important;
}

.nav .icon-button.active,
.app-nav .icon-button.active {
  color: var(--product-accent) !important;
  background: color-mix(in srgb, var(--product-accent) 12%, var(--product-surface)) !important;
  box-shadow: inset 3px 0 0 var(--product-accent) !important;
}

[data-unified-switcher] {
  border-radius: 8px !important;
  border-color: var(--product-border) !important;
  background: var(--product-bg-elevated) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

[data-unified-switcher] a {
  border-radius: 5px !important;
  color: var(--product-muted) !important;
}

[data-unified-switcher] a:hover {
  color: var(--product-text) !important;
  background: var(--product-surface-strong) !important;
}

[data-unified-switcher] a.active {
  color: var(--product-text) !important;
  background: color-mix(in srgb, var(--product-accent-2) 24%, var(--product-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-accent-2) 50%, var(--product-border)) !important;
}

.dark-mode-toggle {
  border-radius: 7px !important;
  border-color: var(--product-border) !important;
  background: var(--product-surface) !important;
  box-shadow: none !important;
}

/* Source management */
body:has(.app-nav) .shell {
  left: 84px !important;
  right: 24px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px 0 42px !important;
}

@media (min-width: 861px) {
  body:has(.app-nav) {
    padding-left: 64px !important;
  }

  .app-nav {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 64px !important;
    height: 100vh !important;
    margin: 0 !important;
    transform: none !important;
  }

  body:has(.app-nav) .shell {
    left: 84px !important;
  }
}

.page-head {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(390px, auto) !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 56px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
}

.page-head [data-unified-switcher] {
  justify-self: start !important;
}

.page-head > div:not([data-unified-switcher]) {
  justify-self: center !important;
  text-align: center !important;
}

.page-head h1 {
  margin: 2px 0 0 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.page-head .eyebrow,
.view-head .eyebrow {
  margin-bottom: 4px !important;
  color: var(--product-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.page-head > .settings-tabs {
  grid-column: 2 !important;
  justify-self: end !important;
  min-width: 390px !important;
}

.settings-tabs {
  padding: 4px !important;
  border: 1px solid var(--product-border) !important;
  border-radius: 8px !important;
  background: var(--product-bg-elevated) !important;
}

.settings-tab {
  border-radius: 5px !important;
  color: var(--product-muted) !important;
}

.settings-tab.active {
  color: var(--product-text) !important;
  background: color-mix(in srgb, var(--product-accent-2) 24%, var(--product-surface)) !important;
}

.settings-view,
.settings-view.active {
  max-width: 100% !important;
  margin: 0 !important;
}

.view-head {
  margin-bottom: 14px !important;
}

.sync-panel,
.panel,
.backup-panel,
.table-wrap,
.status-panel,
.stats {
  border-color: var(--product-border) !important;
  border-radius: var(--product-radius) !important;
  background: var(--product-surface) !important;
  box-shadow: none !important;
}

.sync-panel:hover,
.panel:hover,
.backup-panel:hover {
  border-color: var(--product-border-hot) !important;
}

.sync-panel input,
.field input,
.field select,
.field textarea {
  border-radius: 6px !important;
  border-color: var(--product-border) !important;
  background: var(--product-bg-elevated) !important;
  color: var(--product-text) !important;
}

.section-actions button,
.backup-actions button,
.inline-action button,
.primary-button {
  min-height: 38px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.section-actions button:not(.secondary),
.inline-action button:not(.secondary),
.primary-button {
  background: var(--product-accent-2) !important;
  color: white !important;
}

.stats > div {
  background: transparent !important;
  border-color: var(--product-border) !important;
}

/* Daily intelligence */
.daily-shell {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  background: var(--product-bg) !important;
}

.newspaper {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 32px 48px !important;
  background: transparent !important;
}

.daily-head {
  min-height: 112px !important;
  margin: 0 0 20px !important;
  padding: 4px 0 20px !important;
  border-bottom: 1px solid var(--product-border) !important;
}

.daily-head h1 {
  margin: 4px 0 8px !important;
  font-family: var(--product-font) !important;
  font-size: 48px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.daily-head .head-actions {
  align-self: flex-start !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.daily-content {
  max-width: none !important;
  margin: 0 !important;
}

.daily-content .stats,
.daily-content .story-grid,
.daily-content .section {
  border-color: var(--product-border) !important;
}

.story,
.daily-content article,
.detail-card,
.modal-card {
  border-radius: var(--product-radius) !important;
  border-color: var(--product-border) !important;
  background: var(--product-surface) !important;
  box-shadow: none !important;
}

/* Reader */
.reader {
  background: var(--product-bg) !important;
}

.reader .sources,
.reader .entries,
.reader .article {
  border-color: var(--product-border) !important;
  background: var(--product-bg) !important;
}

.reader .sources {
  background: var(--product-bg-elevated) !important;
}

.mode-switch,
.entries-head,
.article-tools {
  border-color: var(--product-border) !important;
  background: var(--product-bg-elevated) !important;
}

.mode-switch {
  border-radius: 8px !important;
  padding: 4px !important;
}

.mode-button,
.source,
.entry,
.video-card {
  border-radius: 6px !important;
}

.mode-button.active,
.source.active {
  color: var(--product-text) !important;
  background: color-mix(in srgb, var(--product-accent-2) 20%, var(--product-surface)) !important;
  box-shadow: inset 3px 0 0 var(--product-accent-2) !important;
}

.entry:hover,
.video-card:hover {
  background: var(--product-surface) !important;
}

.article-body {
  background: var(--product-bg) !important;
}

.article-body > .content,
.article-body > article,
.article-body .article-content {
  max-width: 920px !important;
  margin-inline: auto !important;
}

.ai-summary-card {
  border-radius: var(--product-radius) !important;
  border-color: color-mix(in srgb, var(--product-accent) 38%, var(--product-border)) !important;
  background: var(--product-surface) !important;
  box-shadow: inset 3px 0 0 var(--product-accent) !important;
}

@media (max-width: 1180px) {
  .page-head {
    grid-template-columns: 1fr auto !important;
  }

  .page-head > div:not([data-unified-switcher]) {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body:has(.app-nav) .shell {
    left: auto !important;
    right: auto !important;
    margin: 12px auto !important;
    padding: 12px !important;
  }

  .page-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .page-head > .settings-tabs {
    justify-self: stretch !important;
    min-width: 0 !important;
  }
}

/* Final unified layout pass */
@media (min-width: 821px) {
  body:has(.app-nav) {
    padding-left: 84px !important;
  }

  body:has(.app-nav) .shell {
    position: relative !important;
    inset: auto !important;
    width: calc(100vw - 108px) !important;
    max-width: none !important;
    margin: 0 24px 0 0 !important;
    padding: 18px 0 44px !important;
    transform: none !important;
  }

  .app-nav,
  .nav {
    width: 64px !important;
    min-width: 64px !important;
  }
}

.page-head {
  display: grid !important;
  grid-template-columns: minmax(390px, auto) 1fr minmax(360px, auto) !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 42px !important;
  margin: 0 0 18px !important;
}

.page-head [data-unified-switcher].is-inline {
  grid-column: 1 !important;
  justify-self: start !important;
}

.page-head > div:not([data-unified-switcher]) {
  display: none !important;
}

.page-head > .settings-tabs {
  grid-column: 3 !important;
  justify-self: end !important;
  width: min(520px, 100%) !important;
  min-width: 0 !important;
}

.settings-tabs {
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  border-radius: 999px !important;
}

.settings-tab {
  min-width: 0 !important;
  height: 28px !important;
  border-radius: 999px !important;
}

.view-head {
  margin-top: 0 !important;
}

.view-head .eyebrow {
  color: var(--product-accent) !important;
}

.sync-panel {
  grid-template-columns: minmax(260px, 360px) minmax(210px, auto) minmax(260px, 1fr) auto !important;
}

.sync-panel-head {
  min-width: 0 !important;
}

.inline-status {
  overflow-wrap: anywhere !important;
}

@media (max-width: 1180px) {
  .page-head {
    grid-template-columns: 1fr !important;
  }

  .page-head [data-unified-switcher].is-inline,
  .page-head > .settings-tabs {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }
}