:root {
  --bg: #121414;
  --bg-deep: #0c0f0f;
  --surface: #1e2020;
  --surface-2: #282a2b;
  --surface-3: #333535;
  --line: #3d3d3d;
  --line-soft: #44474e;
  --text: #e2e2e2;
  --muted: #c5c6cf;
  --dim: #8f9098;
  --primary: #b6c6ef;
  --navy: #1a2b4b;
  --red: #c8222a;
  --orange: #f7941d;
  --yellow: #ffd200;
  --green: #24a148;
  --danger: #ffb4ab;
  --radius: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 10%, rgba(200, 34, 42, .10), transparent 28rem),
    radial-gradient(circle at 16% 88%, rgba(247, 148, 29, .10), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
}
.login-access {
  background:
    linear-gradient(90deg, rgba(0,0,0,.42), rgba(18,20,20,.92)),
    radial-gradient(circle at 24% 18%, rgba(200,34,42,.18), transparent 24rem),
    var(--bg);
}
.login-card {
  margin: auto;
  width: min(100% - 32px, 440px);
  padding: 30px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(28,28,32,.86);
  backdrop-filter: blur(16px);
}
.auth-card {
  width: min(100% - 32px, 500px);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.055), transparent);
  transform: translateX(-100%);
  animation: shimmer 4s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.login-logo-wrap {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}
.login-logo-wrap.compact { padding: 12px 16px; }
.login-logo {
  display: block;
  width: min(270px, 70vw);
  height: auto;
  object-fit: contain;
}
.login-form {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.login-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,180,171,.34);
  border-radius: 7px;
  color: var(--danger);
  background: rgba(255,180,171,.10);
  font-size: 13px;
  font-weight: 700;
}
.login-hero {
  display: grid;
  align-items: center;
  padding: 64px;
  background:
    linear-gradient(135deg, rgba(18,20,20,.78), rgba(12,15,15,.98)),
    radial-gradient(circle at 80% 18%, rgba(200,34,42,.17), transparent 30rem);
}
.brand { display:flex; align-items:center; gap:12px; }
.mark {
  width: 46px;
  height: 46px;
  display:grid;
  place-items:center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: white;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 900;
  font-style: italic;
}
.sidebar-logo {
  width: 58px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.sidebar-logo img {
  width: 54px;
  height: auto;
  display: block;
}
.brand strong, h1, h2, h3 { font-family: Montserrat, Inter, sans-serif; letter-spacing: 0; }
.brand small, .eyebrow, .label {
  display:block;
  color: var(--dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.login h1 { margin: 28px 0 12px; font-size: 36px; line-height: 1.05; }
.login-hero h2 { max-width: 860px; margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; }
.muted { color: var(--muted); line-height: 1.55; }
.dim { color: var(--dim); }

.role-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top: 18px; }
.role {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  text-align:left;
}
.role:hover { border-color: var(--red); background: var(--surface-2); }

.app { min-height: 100vh; display:grid; grid-template-columns: 260px minmax(0, 1fr); }
.backdrop { display:none; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow-y:auto;
  padding:20px 14px;
  border-right:1px solid var(--line);
  background: rgba(30,32,32,.94);
}
.nav { display:grid; gap:5px; }
.nav button {
  min-height: 42px;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding: 10px 12px;
  border:1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  text-align:left;
  font-weight:700;
}
.nav button i {
  width: 28px;
  height: 28px;
  display:grid;
  place-items:center;
  border-radius:6px;
  background: rgba(255,255,255,.06);
  font-style:normal;
  font-size:11px;
}
.nav button:hover, .nav button.active {
  color: var(--text);
  background: var(--navy);
  border-left: 4px solid var(--primary);
}
.side-status {
  margin-top:auto;
  padding:14px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.main { min-width:0; }
.topbar {
  position:sticky;
  top:0;
  z-index:20;
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  border-bottom:1px solid var(--line);
  background: rgba(18,20,20,.90);
  backdrop-filter: blur(12px);
}
.menu {
  display:none;
  width: 40px;
  height:40px;
  border:1px solid var(--line);
  border-radius: 7px;
  color:var(--text);
  background:var(--surface);
}
.search {
  width:min(520px, 42vw);
  min-height: 40px;
  padding: 9px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--text);
  background:var(--bg-deep);
  outline:none;
}
.search:focus, input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(182,198,239,.12); }
.content { max-width: 1580px; margin: 0 auto; padding: 24px 24px 96px; }
.page-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.page-title h1 { margin:0; font-size: 32px; line-height:1.1; }
.hero {
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap:16px;
  margin-bottom:16px;
}
.panel, .card, .metric, .table-wrap {
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(30,32,32,.88);
}
.panel { padding: 24px; background: linear-gradient(135deg, rgba(26,43,75,.65), rgba(30,32,32,.88)); }
.card { padding:16px; min-width:0; }
.metric { padding:15px; min-width:0; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.metric strong { display:block; margin-top:8px; font-size:26px; font-variant-numeric: tabular-nums; }
.metric span { display:block; margin-top:8px; color:var(--green); font-size:12px; font-weight:800; }
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.main-grid { grid-template-columns: minmax(0, 1.35fr) 390px; }
.wide-grid { grid-template-columns: 320px minmax(0, 1fr); }
.split { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn {
  min-height:39px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 13px;
  border:1px solid rgba(200,34,42,.55);
  border-radius:7px;
  color:white;
  background: var(--red);
  font-size: 13px;
  font-weight:800;
}
.btn.secondary { background:transparent; border-color:var(--line); color:var(--text); }
.btn.orange { background:var(--orange); border-color:var(--orange); color:#111; }
.chip {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.04);
  font-size:11px;
  font-weight:800;
}
.chip.ok { color:#9ff2bd; border-color:rgba(36,161,72,.34); background:rgba(36,161,72,.10); }
.chip.warn { color:var(--yellow); border-color:rgba(255,210,0,.34); background:rgba(255,210,0,.10); }
.chip.risk { color:var(--danger); border-color:rgba(255,180,171,.34); background:rgba(255,180,171,.10); }
.chip.ai { color:var(--primary); border-color:rgba(182,198,239,.34); background:rgba(182,198,239,.10); }
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(.96); } }

.activity { display:grid; gap:9px; max-height: 620px; overflow:auto; }
.item, .row {
  display:grid;
  gap:6px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:7px;
  background:rgba(255,255,255,.035);
}
.item { border-left:3px solid var(--orange); }
.item p, .row p { margin:0; font-size:13px; line-height:1.4; }
.item span, .row span { color:var(--dim); font-size:11px; }
.table-wrap { overflow:auto; }
table { width:100%; min-width: 850px; border-collapse:collapse; }
th, td { padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th { color:var(--dim); background:rgba(255,255,255,.035); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.bars { display:grid; gap:11px; }
.bar-row { display:grid; gap:7px; }
.bar-row span { color:var(--muted); font-size:12px; font-weight:700; }
.track { height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.08); }
.track div { height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--red), var(--orange), var(--green)); }
.heatmap { display:grid; grid-template-columns: repeat(8, minmax(30px, 1fr)); gap:7px; }
.heat { aspect-ratio:1; border-radius:5px; border:1px solid var(--line); background:var(--surface-2); }
.heat.ok { background:rgba(36,161,72,.42); }
.heat.warn { background:rgba(255,210,0,.42); }
.heat.risk { background:rgba(200,34,42,.58); }
.order-grid { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:16px; }
.field { display:grid; gap:7px; margin-bottom:12px; }
.field label { color:var(--dim); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.input, select {
  min-height:40px;
  width:100%;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:7px;
  color:var(--text);
  background:var(--bg-deep);
  outline:none;
}
.sim-dock {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  width:min(460px, calc(100vw - 36px));
  max-height:58vh;
  overflow:auto;
  padding:14px;
  border:1px solid rgba(247,148,29,.48);
  border-radius:12px;
  background:rgba(18,20,20,.94);
  backdrop-filter:blur(14px);
  box-shadow: 0 0 40px rgba(247,148,29,.16);
}
.sim-dock.minimized { width:auto; max-height:none; }
.sim-step { display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:center; padding:8px; border-radius:7px; color:var(--muted); }
.sim-step.done { color:var(--text); background:rgba(36,161,72,.09); }
.sim-step b { width:22px; height:22px; display:grid; place-items:center; border-radius:5px; background:var(--line); color:var(--text); font-size:11px; }
.sim-step.done b { background:var(--green); color:white; }
.floating-day {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:55;
}
.app.has-sim .floating-day { bottom: calc(18px + min(58vh, 430px) + 12px); }

@media (max-width: 1180px) {
  .login { grid-template-columns:1fr; }
  .login-hero { padding:24px; }
  .app { grid-template-columns:1fr; }
  .menu { display:inline-grid; place-items:center; }
  .sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:min(86vw, 320px);
    z-index:45;
    transform:translateX(-104%);
    transition:transform .2s ease;
  }
  .app.sidebar-open .sidebar { transform:translateX(0); }
  .backdrop {
    position:fixed;
    inset:0;
    z-index:40;
    border:0;
    background:rgba(0,0,0,.58);
  }
  .app.sidebar-open .backdrop { display:block; }
  .hero, .main-grid, .wide-grid, .order-grid, .cols-5, .cols-4, .cols-3, .cols-2 { grid-template-columns:1fr; }
  .search { width:100%; }
  .topbar { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 680px) {
  .content, .topbar { padding:16px; }
  .login-card { padding:22px; }
  .login h1, .page-title h1 { font-size:28px; }
  .login-hero h2 { font-size:32px; }
  .role-grid { grid-template-columns:1fr; }
  .page-title, .split { align-items:flex-start; flex-direction:column; }
  .heatmap { grid-template-columns: repeat(5, minmax(28px,1fr)); }
}