:root {
  --bg: #f5f7fb;
  --ink: #172033;
  --muted: #657187;
  --line: #dfe5ee;
  --panel: #ffffff;
  --dark: #eef3f9;
  --dark2: #e7edf5;
  --green: #137c72;
  --green2: #e2f4f1;
  --blue: #315fce;
  --shadow: 0 16px 40px rgba(35, 54, 88, .08);
}

body {
  background:
    radial-gradient(circle at 82% 0, rgba(73, 118, 214, .07), transparent 28%),
    var(--bg);
}

.sidebar {
  color: #26344b;
  background: rgba(245, 248, 252, .97);
  border-right: 1px solid #dce3ed;
  box-shadow: 8px 0 30px rgba(51, 69, 99, .035);
}

.brand-icon {
  color: #fff;
  background: linear-gradient(145deg, #3769d5, #159082);
  box-shadow: 0 8px 18px rgba(49, 95, 206, .2);
}

.brand small, .nav-group label { color: #8490a3; }
.nav-group { border-color: #dce3ec; }
.nav { color: #67758b; }
.nav:hover { color: #24334a; background: #e8eef6; }
.nav.active {
  color: #204fae;
  background: #e3ebfa;
  box-shadow: inset 3px 0 #376bd5;
  font-weight: 700;
}
.nav b { color: #52647d; background: #dce5f2; }

.sync {
  color: #314057;
  border-color: #d8e2ec;
  background: #fff;
  box-shadow: 0 7px 20px rgba(43, 64, 96, .05);
}
.sync small, .user small { color: #7d899b; }
.sync i { background: #1da783; box-shadow: 0 0 0 4px #dbf2eb; }
.user > span { background: #dce8fa; color: #315a9e; }
.user button { color: #8290a5; }

.topbar {
  background: rgba(255, 255, 255, .87);
  box-shadow: 0 5px 24px rgba(43, 59, 85, .035);
}
.search-trigger, .catalog-search, .catalog-toolbar select, .planner-form select, .form-grid select {
  background: #fbfcfe;
}
.add-button, .primary-wide {
  border-color: #315fce;
  background: #315fce;
  box-shadow: 0 8px 18px rgba(49, 95, 206, .16);
}

.feature-release {
  color: #16243b;
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .65), transparent 30%),
    linear-gradient(135deg, #e7efff 0%, #e0f4f1 55%, #f4f8ff 100%);
  border: 1px solid #cfdaea;
  box-shadow: 0 18px 44px rgba(47, 78, 128, .1);
}
.feature-release:after {
  border-color: rgba(49, 95, 206, .13);
  box-shadow: 0 0 0 60px rgba(49, 95, 206, .025), 0 0 0 120px rgba(19, 124, 114, .02);
}
.release-badge {
  color: #176d67;
  border-color: rgba(19, 124, 114, .18);
  background: rgba(255, 255, 255, .65);
}
.feature-release .summary { color: #53657e; }
.release-facts div { border-color: #b9c9dc; }
.release-facts span, .release-date { color: #6d7d93; }
.source-link { color: #244f9f; border-color: #8198bf; }

.watch-card, .signal-card, .catalog-shell, .quality-table, .model-row,
.compare-slot, .compare-table-wrap, .planner-card, .candidate-panel,
.hardware-card, .quality-card, .period, .release-aside {
  box-shadow: 0 7px 24px rgba(44, 64, 97, .035);
}

.compare-group {
  color: #244269;
  background: #e7eef8;
  border-top: 1px solid #d5deeb;
}
.compare-check.selected { color: #fff; background: #315fce; }
.compare-value.diff { background: #edf7f5; }
.compare-label { background: #f6f8fb; }
.planner-head > span { color: #fff; background: linear-gradient(145deg, #3769d5, #168c80); }

.drawer-backdrop { background: rgba(37, 50, 72, .22); backdrop-filter: blur(2px); }
.detail-drawer { box-shadow: -18px 0 48px rgba(44, 60, 85, .13); }
.drawer-header {
  color: #17243a;
  background: linear-gradient(135deg, #edf3ff, #e8f6f3);
  border-bottom: 1px solid #d8e2ed;
}
.drawer-title p { color: #6b7b92; }
.drawer-close {
  color: #43516a;
  border-color: #cdd8e5;
  background: rgba(255, 255, 255, .75);
}
.drawer-tab.active { color: #2859bd; border-color: #315fce; }
.spec, .hardware-facts div, .formula-note { background: #f5f8fc; }
.source-item:hover { border-color: #9db4db; background: #f7faff; }
.command, .modal-backdrop { background: rgba(42, 54, 75, .32); }
.toast { background: #284f9f; }

@media (max-width: 780px) {
  .sidebar { background: #f5f8fc; }
}