:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: rgba(14, 28, 49, 0.86);
  --panel-strong: rgba(20, 39, 66, 0.96);
  --line: rgba(148, 163, 184, 0.22);
  --text: #e5eefc;
  --muted: #9fb0c7;
  --accent: #49d6ff;
  --accent-2: #8b5cf6;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #fb7185;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(73, 214, 255, 0.18), transparent 32rem),
    radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 28rem),
    linear-gradient(135deg, #050914 0%, #07111f 46%, #0b1728 100%);
}

button, input, select, textarea { font: inherit; }
button {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 0.72rem 1rem;
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.01em;
}
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #03101f; }
button.secondary { background: rgba(73, 214, 255, 0.12); border: 1px solid rgba(73, 214, 255, 0.35); }
button.ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
button.wide { width: 100%; margin-top: 0.75rem; }
button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid rgba(73, 214, 255, 0.35); outline-offset: 2px; }

#app-shell { width: min(1480px, 100%); margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
.boot-screen, .auth-layout, .panel, .topbar, .kpi-grid article {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}
.boot-screen { margin: 10vh auto; max-width: 760px; padding: 3rem; border-radius: 28px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.76rem; font-weight: 900; margin: 0 0 0.5rem; }
h1, h2 { line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2rem, 4vw, 4.5rem); }
h2 { font-size: 1.28rem; margin-bottom: 1rem; }
p, li, span, small, label { color: var(--muted); }
strong { color: var(--text); }

.auth-layout { min-height: calc(100vh - 2rem); border-radius: 32px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1rem; padding: 1rem; align-items: stretch; }
.auth-hero { padding: clamp(2rem, 7vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.auth-hero p { max-width: 64ch; font-size: 1.1rem; }
.auth-hero ul { display: grid; gap: 0.8rem; margin-top: 2rem; padding-left: 1.2rem; }
.auth-card { background: var(--panel-strong); border: 1px solid var(--line); border-radius: 24px; padding: 1.25rem; align-self: center; }

label { display: grid; gap: 0.38rem; margin-bottom: 0.75rem; font-weight: 700; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 44px;
  padding: 0.72rem 0.82rem;
  background: rgba(3, 10, 22, 0.68);
  color: var(--text);
}
textarea { min-height: 86px; resize: vertical; }
.button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.status-line { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,0.05); color: var(--muted); }
.status-line.success { border-color: rgba(52, 211, 153, 0.4); color: var(--ok); }
.status-line.warning { border-color: rgba(251, 191, 36, 0.45); color: var(--warn); }
.status-line.error { border-color: rgba(251, 113, 133, 0.45); color: var(--danger); }

.topbar { border-radius: 26px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.topbar nav { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; justify-content: flex-end; }
.connectivity { border-radius: 999px; padding: 0.5rem 0.75rem; border: 1px solid var(--line); font-weight: 900; }
.connectivity.online { color: var(--ok); }
.connectivity.offline { color: var(--warn); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin: 0.9rem 0; }
.kpi-grid article { border-radius: 22px; padding: 1rem; }
.kpi-grid span { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; }
.kpi-grid strong { font-size: 2rem; }
.workspace { display: grid; grid-template-columns: 320px 1fr; gap: 0.9rem; align-items: start; }
.panel { border-radius: 24px; padding: 1rem; }
.nav-panel { position: sticky; top: 1rem; }
.main-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0.9rem; }
.main-grid .panel:first-child, .audit-panel { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.form-grid.compact { grid-template-columns: repeat(2, 1fr); }
.span-2 { grid-column: span 2; }
.flight-list, .audit-panel ol { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.65rem; }
.flight-card, .mini-card, .audit-panel li {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  padding: 0.85rem;
  display: grid;
  gap: 0.25rem;
}
.flight-card { cursor: pointer; }
.flight-card.selected { border-color: rgba(73, 214, 255, 0.8); box-shadow: 0 0 0 3px rgba(73, 214, 255, 0.12); }
.cards { display: grid; gap: 0.65rem; margin-top: 0.85rem; }
.mini-card.danger { border-color: rgba(251, 113, 133, 0.5); }
.empty { color: var(--muted); font-style: italic; }
.audit-panel li span { display: block; font-size: 0.82rem; }

.full { grid-column: 1 / -1; }
.safety-banner {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 1rem;
  margin: 0.9rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255,255,255,0.055);
}
.safety-banner.green { border-color: rgba(52, 211, 153, 0.5); }
.safety-banner.orange { border-color: rgba(251, 191, 36, 0.55); }
.safety-banner.red { border-color: rgba(251, 113, 133, 0.58); }
.copilot-box {
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1rem;
}
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; }
.check-tile {
  text-align: left;
  background: rgba(255,255,255,0.055);
  border: 1px solid var(--line);
  min-height: 76px;
}
.check-tile.checked { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.09); }
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  border: 1px solid var(--line);
}
.badge.green { color: var(--ok); border-color: rgba(52, 211, 153, 0.5); }
.badge.orange { color: var(--warn); border-color: rgba(251, 191, 36, 0.5); }
.badge.red { color: var(--danger); border-color: rgba(251, 113, 133, 0.5); }
.badge.grey { color: var(--muted); }
.cockpit-panel {
  background: linear-gradient(135deg, rgba(73, 214, 255, 0.1), rgba(139, 92, 246, 0.11)), var(--panel);
}
.flow-step {
  border: 1px solid rgba(73, 214, 255, 0.3);
  border-radius: 22px;
  padding: 1rem;
  background: rgba(3, 10, 22, 0.48);
}
.flow-step h3 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 3.2rem); }
.timeline { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.timeline li, .compact-list li {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.7rem;
  background: rgba(255,255,255,0.045);
}
.compact-list { padding-left: 0; list-style: none; display: grid; gap: 0.5rem; }
.risk-form { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.lexicon-list { display: grid; gap: 0.5rem; }
.lexicon-list details {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.75rem;
  background: rgba(255,255,255,0.045);
}
.lexicon-list summary { cursor: pointer; color: var(--text); }
.data-cards small { white-space: pre-wrap; }
.table-wrap { overflow-x: auto; margin: 0.85rem 0; border: 1px solid var(--line); border-radius: 18px; }
.cockpit-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.cockpit-table th, .cockpit-table td { padding: 0.72rem; border-bottom: 1px solid var(--line); text-align: left; color: var(--muted); }
.cockpit-table th { color: var(--text); background: rgba(255,255,255,0.055); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.cockpit-table tr:last-child td { border-bottom: 0; }
.decision-panel.green { border-color: rgba(52, 211, 153, 0.5); }
.decision-panel.orange { border-color: rgba(251, 191, 36, 0.55); }
.decision-panel.red { border-color: rgba(251, 113, 133, 0.58); }
.decision-panel h3 { margin: 1rem 0 0.5rem; }
.scratch-fab {
  position: fixed;
  z-index: 30;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--warn), var(--accent));
  color: #07111f;
  box-shadow: 0 18px 50px rgba(0,0,0,0.38);
}
.scratch-overlay {
  position: fixed;
  z-index: 40;
  inset: 1rem;
  max-width: 920px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 1rem;
  background: rgba(5, 12, 25, 0.98);
  box-shadow: 0 30px 120px rgba(0,0,0,0.62);
  overflow: auto;
}
.scratch-overlay header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quick-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0; }
.quick-tags button { min-height: 34px; padding: 0.4rem 0.62rem; background: rgba(255,255,255,0.08); border: 1px solid var(--line); }
#scratch-canvas {
  width: 100%;
  height: 240px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  touch-action: none;
}
.danger-btn { background: rgba(251, 113, 133, 0.18); border: 1px solid rgba(251, 113, 133, 0.55); color: #fecdd3; }

@media (max-width: 1100px) {
  .auth-layout, .workspace, .main-grid { grid-template-columns: 1fr; }
  .nav-panel { position: static; }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  #app-shell { padding: 0.75rem; }
  .auth-layout, .topbar { border-radius: 20px; }
  .auth-hero { padding: 1.2rem; }
  .topbar { align-items: stretch; flex-direction: column; }
  .topbar nav { justify-content: stretch; }
  .topbar nav > * { flex: 1; text-align: center; }
  .kpi-grid, .module-grid, .check-grid { grid-template-columns: 1fr; }
  .form-grid, .form-grid.compact { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .safety-banner { flex-direction: column; }
  .scratch-overlay { inset: 0.5rem; border-radius: 20px; }
  h1 { font-size: 2rem; }
}

@media (display-mode: standalone) {
  body { user-select: none; }
  input, textarea { user-select: text; }
}