:root {
  --color-primary: #f28a22;
  --color-primary-contrast: #ffffff;
  --color-bg: #fffaf5;
  --color-surface: rgba(255, 255, 255, 0.78);
  --color-text: #30271f;
  --color-muted: #897c70;
  --color-border: rgba(225, 157, 98, 0.2);
  --color-shadow: rgba(123, 74, 32, 0.12);
  --color-glow: rgba(255, 159, 67, 0.2);
  --color-scrollbar: #efc49e;
  --color-soft: rgba(255, 238, 220, 0.82);
  --font-sans: sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --radius: 18px;

  --tone-slate-50: #fffdfb;
  --tone-slate-100: #fff7ef;
  --tone-slate-200: #f4e7da;
  --tone-slate-400: #b7a697;
  --tone-slate-500: #897c70;
  --tone-slate-600: #6f6258;
  --tone-slate-700: #51463e;
  --tone-slate-900: #30271f;
  --tone-orange-50: #fff6ec;
  --tone-orange-100: #ffebd6;
  --tone-orange-200: #ffd6ad;
  --tone-orange-600: #e87516;
  --tone-orange-700: #c45b0c;
  --tone-blue-50: #eff7ff;
  --tone-blue-100: #dceeff;
  --tone-blue-600: #3276b8;
  --tone-blue-700: #285f96;
  --tone-blue-800: #204b76;
  --tone-green-50: #effaf4;
  --tone-green-500: #35a873;
  --tone-green-600: #24885a;
  --tone-green-700: #1c7049;
  --tone-red-50: #fff2f0;
  --tone-red-500: #e76a58;
  --tone-red-600: #cb4e3d;
  --tone-amber-50: #fff8e8;
  --tone-amber-700: #9b6714;
  --tone-violet-50: #f7f2ff;
  --tone-violet-600: #7952b3;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 8% 4%, var(--color-glow), transparent 34rem),
    radial-gradient(ellipse at 92% 15%, rgba(255, 219, 181, 0.28), transparent 32rem),
    linear-gradient(135deg, var(--color-bg), #fff 54%, #fff5e9);
  color: var(--color-text);
  font-family: var(--font-body);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.terminal-shell .scan-title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.terminal-shell .phase-name,
.terminal-shell #feedback {
  font-family: var(--font-heading);
}

button {
  cursor: pointer;
}

.page-shell {
  min-height: 100vh;
}

.login-glow {
  background: radial-gradient(circle, var(--color-glow) 0, rgba(255, 225, 195, 0.16) 38%, transparent 72%);
  filter: blur(12px);
}

#loginScreen>section {
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-top: 3px solid var(--color-primary);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 28px 80px var(--color-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

#sidebar,
#appScreen header {
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 30px rgba(123, 74, 32, 0.045);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#pageContent .metric-card,
#pageContent section,
#pageContent article {
  box-shadow: 0 12px 34px rgba(123, 74, 32, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#pageContent .metric-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(123, 74, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.sidebar {
  transition: transform 0.25s ease;
}

.nav-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-item:hover,
.nav-item.active {
  background: var(--color-soft);
  color: var(--color-primary);
}

.nav-item:hover {
  transform: translateX(2px);
}

.metric-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar);
  border-radius: var(--radius);
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --color-surface: #ffffff;
  }

  #loginScreen>section,
  #sidebar,
  #appScreen header,
  #pageContent .metric-card,
  #pageContent section,
  #pageContent article {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}