:root {
  --marine-950: #06162d;
  --marine-900: #082242;
  --marine-800: #0b315d;
  --marine-700: #0d477c;
  --marine-600: #11639c;
  --marine-500: #1682bd;
  --marine-300: #80c8ec;
  --marine-100: #dff3fc;
  --marine-50: #f3faff;
  --glass: rgba(255, 255, 255, 0.70);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(102, 177, 218, 0.25);
  --marine-shadow: 0 18px 50px rgba(7, 42, 78, 0.10);
}

html { background: var(--marine-50); }

body {
  color: var(--marine-950);
  background:
    radial-gradient(circle at 88% 8%, rgba(22, 130, 189, 0.17), transparent 28rem),
    radial-gradient(circle at 16% 92%, rgba(128, 200, 236, 0.19), transparent 34rem),
    linear-gradient(145deg, #f8fcff 0%, #edf7fc 48%, #f8fbff 100%);
  background-attachment: fixed;
}

.sidebar {
  background: linear-gradient(180deg, rgba(6, 22, 45, 0.97), rgba(8, 49, 93, 0.94));
  border-right: 1px solid rgba(128, 200, 236, 0.18);
  box-shadow: 10px 0 35px rgba(6, 22, 45, 0.12);
}

.brand-mark {
  background: linear-gradient(145deg, var(--marine-500), var(--marine-800));
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  box-shadow: 0 8px 22px rgba(17, 99, 156, .28), inset 0 1px 0 rgba(255,255,255,.35);
}

.nav-item { color: rgba(237, 248, 255, .76); }
.nav-item:hover { background: rgba(128, 200, 236, .10); color: #fff; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(22,130,189,.35), rgba(128,200,236,.12));
  color: #fff;
  border-color: rgba(128,200,236,.28);
}
.status-dot { background: #66c7ef; box-shadow: 0 0 0 4px rgba(102,199,239,.13); }

.topbar {
  background: rgba(248, 252, 255, .64);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.panel, .job-card, .metric, .hero, .source-card, .table-wrap, .login-card,
.analysis-tile, dialog, .toolbar {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--marine-shadow);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
}

.job-card:hover, .source-card:hover {
  border-color: rgba(22, 130, 189, .42);
  box-shadow: 0 20px 54px rgba(7, 42, 78, .15);
  transform: translateY(-1px);
}

.job-card, .source-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }

.hero {
  background:
    linear-gradient(125deg, rgba(6,22,45,.95), rgba(13,71,124,.90)),
    rgba(6,22,45,.9);
  border-color: rgba(128,200,236,.24);
  color: #fff;
}
.hero p { color: rgba(235,247,255,.80); }
.mission, .eyebrow { color: var(--marine-600); }
.hero .mission { color: var(--marine-300); }

.button.primary {
  background: linear-gradient(135deg, var(--marine-600), var(--marine-800));
  border-color: var(--marine-700);
  color: #fff;
  box-shadow: 0 8px 20px rgba(17,99,156,.20);
}
.button.primary:hover { background: linear-gradient(135deg, var(--marine-500), var(--marine-700)); }
.button.secondary { background: rgba(255,255,255,.68); border-color: rgba(13,71,124,.24); color: var(--marine-800); }
.text-button, a { color: var(--marine-700); }

.badge.green { background: #dff3fc; color: #0b567f; }
.score { background: linear-gradient(145deg, #e5f6fd, #d8eef9); color: var(--marine-700); }

input, select, textarea {
  background: rgba(255,255,255,.74);
  border-color: rgba(13,71,124,.20);
  color: var(--marine-950);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--marine-500);
  box-shadow: 0 0 0 3px rgba(22,130,189,.13);
  outline: none;
}

table thead { background: rgba(223,243,252,.60); }
table tr, .activity li { border-color: rgba(13,71,124,.10); }
.toast { background: rgba(6,22,45,.94); border: 1px solid rgba(128,200,236,.25); backdrop-filter: blur(14px); }

@media (prefers-reduced-motion: reduce) {
  .job-card, .source-card { transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel, .job-card, .metric, .hero, .source-card, .table-wrap, .login-card,
  .analysis-tile, dialog, .toolbar, .topbar { background-color: var(--glass-strong); }
  .hero { background-color: var(--marine-900); }
}