/* PredIQ Material 3 refinement layer
   Applied after the production stylesheet so the existing information architecture
   stays intact while surfaces, spacing and interaction states feel calmer and more polished. */
:root {
  --bg: #f4f8f6;
  --surface: #ffffff;
  --surface-low: #edf5f1;
  --surface-mid: #e4efea;
  --surface-high: #d9e8e1;

  --ink: #16211d;
  --ink-2: #31423b;
  --muted: #60736b;
  --quiet: #84968f;

  --outline: #d5e2dc;
  --outline-soft: #e7efeb;

  --blue: #087c6d;
  --blue-dark: #075f55;
  --blue-mid: #149382;
  --blue-soft: #dff4ed;
  --blue-softer: #eef9f5;

  --green: #17784d;
  --green-soft: #e2f5e9;
  --green-mid: #c7ead5;
  --teal: #087c6d;
  --teal-soft: #dff4ed;

  --amber: #895510;
  --amber-soft: #fff3d6;
  --amber-mid: #ffe3a0;
  --red: #b23a48;
  --red-soft: #ffedf0;
  --red-mid: #ffd6dc;

  --decision-top: #17784d;
  --decision-top-bg: #e2f5e9;
  --decision-pick: #087c6d;
  --decision-pick-bg: #dff4ed;
  --decision-watch: #895510;
  --decision-watch-bg: #fff3d6;

  --shadow-xs: 0 1px 2px rgba(22,33,29,.04), 0 6px 18px rgba(22,33,29,.035);
  --shadow-sm: 0 2px 5px rgba(22,33,29,.05), 0 12px 32px rgba(22,33,29,.055);
  --shadow-md: 0 8px 28px rgba(22,33,29,.08);
  --shadow-lg: 0 20px 64px rgba(22,33,29,.14);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
}

body {
  background:
    radial-gradient(ellipse 70% 44% at 90% -8%, rgba(8,124,109,.07), transparent 70%),
    var(--bg);
}

.side-nav {
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  border: 1px solid var(--outline-soft);
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
  padding: 18px 12px;
}

.app-content { margin-left: calc(var(--sidebar-w) + 12px); }

.brand-icon {
  border-radius: 14px;
  background: linear-gradient(145deg, #0f8b78, #075f55);
  box-shadow: 0 8px 20px rgba(8,124,109,.22);
}
.brand-name { color: var(--ink); }
.nav-link { border-radius: 14px; min-height: 46px; }
.nav-link.active { background: var(--blue-soft); color: var(--blue-dark); }
.nav-icon-wrap { border-radius: 10px; background: transparent; }
.nav-link.active .nav-icon-wrap { background: rgba(8,124,109,.10); }

.topbar {
  margin: 10px 16px 0;
  border: 1px solid rgba(213,226,220,.8);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-xs);
}

.workspace { padding-top: 22px; }
.page-title { letter-spacing: -.045em; }
.page-subtitle { max-width: 720px; line-height: 1.6; }

.card,
.summary-tile,
.decision-card,
.prediction-card,
.state-card,
.account-card,
.plan-card,
.ticket-panel,
.search-result-row,
.compare-layout,
.pick-leg-card {
  border-color: var(--outline-soft);
  box-shadow: var(--shadow-xs);
}

.summary-tile {
  border-radius: 22px;
  background: var(--surface);
  min-height: 116px;
}
.summary-tile-value { letter-spacing: -.045em; }

.decision-card,
.prediction-card {
  border-radius: 24px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.decision-card:hover,
.prediction-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--outline);
}

.btn {
  min-height: 44px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.btn-sm { min-height: 38px; border-radius: 12px; }
.btn-primary {
  background: var(--blue);
  box-shadow: 0 5px 14px rgba(8,124,109,.18);
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-secondary { background: var(--surface); border-color: var(--outline); }

.chip,
.subtab,
.ticket-target-chip,
.risk-profile-btn {
  border-radius: 999px;
  min-height: 38px;
}
.chip.active,
.subtab.active,
.ticket-target-chip.active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  border-color: transparent;
}

.form-select,
.form-input,
.form-label input,
.form-label select,
.topbar-search,
.topbar-search input,
.search-input-wrap input,
.share-row input {
  border-radius: 14px;
}

.account-btn,
.icon-btn,
.freshness-pill { border-radius: 999px; }

.modal { border-radius: 30px; }
.modal-body { padding: 30px; }

.setting-row,
.ticket-stat,
.compare-metric,
.squad-group,
.affiliate-metric {
  border-radius: 16px;
}

/* Preserve proximity: related sections feel grouped without becoming dense. */
.content-block { margin-bottom: 36px; }
.block-head { margin-bottom: 16px; }
.card-grid, .top-picks-grid { gap: 14px; }

.site-footer { border-top-color: var(--outline-soft); color: var(--muted); }
#tuku-product-attribution {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--outline-soft);
}

@media (max-width: 900px) {
  .side-nav { margin: 0; height: 100vh; border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0; }
  .app-content { margin-left: 0; }
  .topbar { margin: 8px 10px 0; border-radius: 18px; }
  .workspace { padding-left: 14px; padding-right: 14px; }

  .mobile-nav {
    left: 12px;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 70px;
    padding: 7px;
    border: 1px solid rgba(213,226,220,.9);
    border-radius: 27px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 34px rgba(22,33,29,.14);
  }
  .mobile-nav a {
    min-height: 54px;
    border-radius: 20px;
    color: var(--muted);
  }
  .mobile-nav a.active {
    background: var(--blue-soft);
    color: var(--blue-dark);
  }
}

@media (max-width: 620px) {
  .topbar { box-shadow: none; background: rgba(255,255,255,.94); }
  .page-heading { gap: 14px; }
  .page-title { font-size: clamp(28px, 9vw, 38px); }
  .summary-grid { gap: 10px; }
  .summary-tile { min-height: 100px; border-radius: 20px; }
  .decision-card, .prediction-card, .account-card, .ticket-panel { border-radius: 22px; }
  .content-block { margin-bottom: 30px; }
  .workspace { padding-bottom: 100px; }
}