:root {
  --ink: #123554;
  --muted: #6f879b;
  --line: #d9eaf5;
  --paper: #ffffff;
  --canvas: #f3faff;
  --lime: #69c7ff;
  --purple: #268fd9;
  --green: #35c894;
  --radius: 22px;
  --shadow: 0 16px 46px rgba(30, 105, 158, 0.09);
}

body {
  background:
    radial-gradient(circle at 82% 0, #dff3ff 0, transparent 29%),
    linear-gradient(180deg, #f8fcff 0, #f1f9ff 100%);
}

.sidebar {
  background: linear-gradient(180deg, #eaf7ff 0, #f7fbff 57%, #edf8ff 100%);
  color: var(--ink);
  border-right: 1px solid #d8edf9;
  box-shadow: 12px 0 44px rgba(43, 123, 176, 0.05);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #124b78;
  font-size: 24px;
  letter-spacing: -1.2px;
}

.brand strong,
.login-logo strong { color: #238dd6; }

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 17px;
  background: linear-gradient(145deg, #dff4ff, #ffffff);
  box-shadow: 0 9px 22px rgba(32, 137, 206, 0.16);
  overflow: hidden;
}

.brand-mark img {
  width: 66px;
  height: 52px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) brightness(1.2);
}

.brand-copy { white-space: nowrap; }
.brand small { margin-top: 5px; color: #79a5c3; font-size: 8px; letter-spacing: 2.1px; }
.nav-group { margin-top: 44px; color: #8ba9bd; }
.sidebar nav a { color: #648198; }
.sidebar nav a span { color: #7fa7c2; }
.sidebar nav a:hover { background: #ffffff; color: #17527f; box-shadow: 0 8px 24px rgba(39, 120, 174, 0.08); }
.sidebar nav a.active { background: linear-gradient(135deg, #4baee9, #86d5ff); color: #ffffff; border-color: #8bd7ff; box-shadow: 0 12px 30px rgba(45, 146, 211, 0.25); }
.sidebar nav a.active span { color: #ffffff; }
.sidebar nav a i { background: #dfeffd; color: #2d87c5; }
.sidebar nav a b { background: #dceef9; color: #357ca9; }
.sidebar-bottom button { color: #66849b; }
.sidebar-bottom small { color: #99b5c7; }
.main { position: relative; }
.page-header p { color: #2c91d2; }
.page-header h1 { color: #123d5f; }
.page-header > div > span { color: #7a91a3; }
.sync-badge { border-color: #d4e9f5; color: #376983; box-shadow: 0 8px 24px rgba(52, 133, 185, 0.06); }
.button.primary { background: linear-gradient(135deg, #1679c4, #3ca8e7); box-shadow: 0 8px 20px rgba(25, 128, 194, 0.2); }
.button.ghost,
.button.outline { border-color: #d7eaf5; color: #2b668c; }
.control-panel,
.metric-card,
.panel,
.loading-state,
.error-state { border-color: #dbeaf3; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); }
.control-panel { box-shadow: 0 16px 46px rgba(30, 105, 158, 0.08); }
.store-control > span { background: linear-gradient(145deg, #1b77b5, #42b6ed); color: #ffffff; box-shadow: 0 9px 22px rgba(25, 131, 194, 0.22); }
.range-tabs { background: #edf6fb; }
.range-tabs button.active { color: #176ca4; }
.hero-card { position: relative; overflow: hidden; background: linear-gradient(145deg, #0d4d79 0, #167fb9 58%, #40b9df 135%); border-color: #3aa4d1; box-shadow: 0 20px 48px rgba(15, 101, 151, 0.2); }
.hero-card::after { content: ""; position: absolute; right: -95px; bottom: -80px; width: 330px; height: 240px; background: url("assets/blue-whale-mark.png") center / contain no-repeat; opacity: 0.12; transform: rotate(-8deg); pointer-events: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .card-heading b { background: rgba(255, 255, 255, 0.13); color: #dff6ff; }
.source-track { background: rgba(255, 255, 255, 0.16); }
.source-track i { background: linear-gradient(90deg, #85d8ff, #d2f3ff); }
.metric-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.metric-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(30, 105, 158, 0.13); }
.metric-card > div b { background: #eaf6fd; color: #3685b6; }
.trend-line { stroke: #258fd2; }
.trend-dot { stroke: #258fd2; }
.legend i { background: #258fd2; }
.donut { background: conic-gradient(#258fd2 0 var(--video), #86d9ff var(--video) calc(var(--video) + var(--product)), #b8d7e9 calc(var(--video) + var(--product)) 100%); }
.text-button { color: #1d83c6; }
.login-overlay { background: radial-gradient(circle at 18% 16%, rgba(92, 198, 255, 0.26), transparent 31%), radial-gradient(circle at 84% 78%, rgba(181, 232, 255, 0.21), transparent 28%), linear-gradient(145deg, #083859, #0c668f); }
.login-overlay::after { content: ""; position: absolute; right: 4%; bottom: -7%; width: min(620px, 55vw); height: 460px; background: url("assets/blue-whale-mark.png") center / contain no-repeat; opacity: 0.14; pointer-events: none; }
.login-card { position: relative; z-index: 1; border-color: #d7ecf8; box-shadow: 0 36px 100px rgba(0, 41, 70, 0.36); }
.login-logo { display: flex; align-items: center; gap: 12px; color: #164d70; font-size: 25px; }
.login-logo .brand-mark { width: 52px; height: 52px; }
.login-card > p { color: #278dce; }
.login-card input:focus { border-color: #54b7e9; box-shadow: 0 0 0 4px rgba(85, 185, 236, 0.13); }
.toast { background: #104d71; }
.loader { border-top-color: #278fd0; }

@media (max-width: 900px) {
  .sidebar { box-shadow: 18px 0 55px rgba(21, 79, 116, 0.2); }
  .mobile-menu { color: #17699d; border-color: #d3eaf7; box-shadow: 0 8px 24px rgba(29, 108, 159, 0.12); }
}