:root {
  --bg: #05090b;
  --panel: #0e1719;
  --panel-2: #142326;
  --line: #294347;
  --text: #edf7f0;
  --muted: #8fa6a3;
  --green: #79ff9f;
  --amber: #f6c34b;
  --red: #ff4f4f;
  --cyan: #47d7ff;
  --blue: #2f7dff;
  --shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(71,215,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(121,255,159,.035) 1px, transparent 1px),
    radial-gradient(circle at 76% 8%, rgba(71,215,255,.16), transparent 30%),
    radial-gradient(circle at 20% 82%, rgba(121,255,159,.08), transparent 26%),
    var(--bg);
  background-size: 36px 36px, 36px 36px, auto, auto;
  font-family: "Bahnschrift", "DIN Condensed", "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0, rgba(121,255,159,.08) 50%, transparent 100%);
  height: 16vh;
  animation: scanline 7s linear infinite;
  opacity: .45;
  z-index: 10;
}

@keyframes scanline {
  from { transform: translateY(-20vh); }
  to { transform: translateY(120vh); }
}

body.auth-locked {
  overflow: hidden;
}

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

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 42px;
  align-items: center;
  padding: 48px;
}

.auth-brand {
  position: fixed;
  top: 28px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.brand-logo {
  width: 76px;
  height: 58px;
  object-fit: contain;
  padding: 6px;
  border: 1px solid rgba(119, 255, 155, .35);
  background: rgba(255, 255, 255, .08);
  filter: drop-shadow(0 0 14px rgba(119, 255, 155, .18));
}

.auth-copy h1 {
  max-width: 900px;
}

.hero-logo {
  width: min(560px, 84vw);
  max-height: 260px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin: 0 0 24px;
  padding: 18px 0;
  filter:
    drop-shadow(0 0 20px rgba(119, 255, 155, .2))
    drop-shadow(0 24px 46px rgba(0, 0, 0, .38));
}

.shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 24px;
  border-right: 1px solid var(--line);
  background: rgba(8, 13, 15, .84);
  backdrop-filter: blur(14px);
}

.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mark .brand-logo {
  width: 102px;
  height: 62px;
  border-color: rgba(119, 255, 155, .22);
  background: rgba(255, 255, 255, .06);
}

.mark-core {
  width: 34px;
  height: 34px;
  border: 2px solid var(--green);
  display: inline-grid;
  place-items: center;
  box-shadow: 0 0 24px rgba(119, 255, 155, .28);
}

.mark-core::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--green);
}

.nav {
  display: grid;
  gap: 8px;
  margin-top: 42px;
}

.nav-item {
  height: 44px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  text-align: left;
  padding: 0 14px;
  cursor: pointer;
}

.nav-item.active, .nav-item:hover {
  color: var(--text);
  border-color: var(--line);
  background: linear-gradient(90deg, rgba(119,255,155,.16), rgba(119,255,155,.02));
}

.rail-status {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.rail-status small { display: block; color: var(--muted); margin-top: 3px; }
.signal { width: 10px; height: 10px; margin-top: 5px; background: var(--green); box-shadow: 0 0 18px var(--green); }
.signal.offline { background: var(--amber); box-shadow: 0 0 18px var(--amber); }
.signal.bad { background: var(--red); box-shadow: 0 0 18px var(--red); }

.main { padding: 28px; }

.topbar {
  min-height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(71,215,255,.10), rgba(14,23,25,.78) 45%, rgba(121,255,159,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.04), var(--shadow);
}

.topbar > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.status-pill {
  color: #06100a;
  background: var(--green);
  border: 1px solid rgba(121,255,159,.7);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  align-items: stretch;
}

.hero.compact {
  display: block;
  position: relative;
  padding: 12px 0 8px;
}

.hero.compact::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  width: min(42vw, 520px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--green));
  box-shadow: 0 0 22px rgba(71,215,255,.5);
}

.eyebrow {
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 800;
}

h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(40px, 6vw, 82px);
  line-height: .9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead {
  max-width: 680px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.login-panel, .metrics article, .workspace, .policy-grid article, .client-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,35,38,.96), rgba(8,14,16,.96));
  box-shadow: var(--shadow);
}

.login-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.panel-head, .section-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.panel-head strong, .section-title span {
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #071012;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.search-input {
  max-width: 360px;
  border-color: rgba(71,215,255,.38);
  background: rgba(4,10,12,.92);
}

.filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(160px, .35fr) minmax(150px, .3fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 8px;
  border: 1px solid rgba(71,215,255,.28);
  background: rgba(4,10,12,.72);
}

.filter-bar .search-input {
  max-width: none;
}

input:focus, select:focus, textarea:focus { border-color: var(--green); }
textarea { resize: vertical; min-height: 92px; }

button {
  border: 1px solid rgba(119,255,155,.45);
  background: rgba(119,255,155,.12);
  color: var(--text);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
}

.ghost { background: transparent; border-color: var(--line); }
.danger { border-color: rgba(255,79,79,.55); color: #ffd4d4; }
.row-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.row-actions button {
  padding: 7px 9px;
  min-width: 72px;
  font-size: 13px;
}
.form-note { color: var(--muted); margin: 0; font-size: 13px; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0;
}

.metrics article {
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.metrics article::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--green), transparent);
}
.metrics span, .metrics small { color: var(--muted); }
.metrics strong { display: block; font-size: 38px; margin: 8px 0 4px; }

.workspace { min-height: 520px; padding: 22px; }
.view { display: none; }
.view.active { display: block; }
.section-title { margin-bottom: 18px; }
.section-title h2 { margin: 0; font-size: 28px; text-transform: uppercase; }

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 18px;
}

.map-panel {
  min-height: 380px;
  border: 1px solid var(--line);
  background: #091012;
  position: relative;
  overflow: hidden;
}

.map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 34%, rgba(121,255,159,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 66% 48%, rgba(246,195,75,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 52% 72%, rgba(71,215,255,.22) 0 4px, transparent 5px);
  filter: drop-shadow(0 0 12px rgba(121,255,159,.45));
}

.radar {
  position: absolute;
  inset: 32px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(119,255,155,.18) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(119,255,155,.18) 50%, transparent 50.2%);
}

.ring { position: absolute; border: 1px solid rgba(119,255,155,.24); border-radius: 50%; }
.r1 { width: 28%; aspect-ratio: 1; }
.r2 { width: 58%; aspect-ratio: 1; }
.r3 { width: 88%; aspect-ratio: 1; }
.dot { position: absolute; width: 10px; height: 10px; background: var(--green); box-shadow: 0 0 18px var(--green); }
.d1 { left: 22%; top: 32%; }
.d2 { right: 18%; top: 42%; background: var(--amber); }
.d3 { left: 48%; bottom: 18%; }
.d4 { right: 36%; top: 18%; background: var(--red); }

.legend {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
}

.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
.ok { background: var(--green); }
.warn { background: var(--amber); }
.bad { background: var(--red); }

.timeline, .table-wrap {
  border: 1px solid var(--line);
  background: rgba(8,13,15,.62);
  padding: 18px;
}

.crud-form {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(8,13,15,.62);
}

.crud-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  gap: 14px;
  align-items: end;
  margin: 0 0 18px;
}

.inventory-form {
  grid-template-columns: minmax(190px, .75fr) minmax(220px, 1fr) minmax(135px, .45fr) auto auto;
}

.device-console {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid rgba(71,215,255,.22);
  background: rgba(4,10,12,.58);
}

.compact-filters,
.compact-editor {
  margin: 0;
}

.compact-editor {
  background: transparent;
  border-color: rgba(119,255,155,.18);
}

.table-wrap {
  overflow-x: auto;
}

.access-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.role-form {
  grid-template-columns: minmax(150px, .8fr) minmax(140px, .8fr) minmax(180px, 1fr) minmax(280px, 2fr) auto;
}

.assign-form {
  grid-template-columns: minmax(220px, 1.2fr) minmax(160px, .8fr) minmax(220px, 1.2fr) auto;
}

.permission-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(5,9,11,.72);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
}

.check-row input { width: auto; }

.compact-table { box-shadow: none; }

.timeline h3 { margin-top: 0; }
.timeline ol { margin: 0; padding-left: 18px; color: var(--muted); }
.timeline li { margin: 0 0 14px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.badge { padding: 4px 8px; border: 1px solid var(--line); color: var(--green); }
.badge.warn { color: var(--amber); }
.badge.bad { color: var(--red); }

.client-grid, .policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.client-card, .policy-grid article { padding: 18px; }
.client-card p, .policy-grid p { color: var(--muted); line-height: 1.5; }

.profile-grid {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(280px, 1.1fr);
  gap: 14px;
}

.profile-card {
  padding: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,35,38,.96), rgba(8,14,16,.96));
}

.profile-card.wide { grid-column: 1 / -1; }
.profile-card h3 { margin: 0 0 14px; text-transform: uppercase; }
.profile-card dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; }
.profile-card dt { color: var(--muted); }
.profile-card dd { margin: 0; overflow-wrap: anywhere; }

.permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-tags span {
  padding: 6px 8px;
  border: 1px solid rgba(71,215,255,.35);
  color: var(--green);
  background: rgba(71,215,255,.08);
  font-size: 12px;
}

.activity-list { margin: 0; padding-left: 18px; color: var(--muted); }
.activity-list li { margin-bottom: 10px; }

.contract {
  margin: 0;
  min-height: 330px;
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  background: #071012;
  color: var(--green);
}

@media (max-width: 980px) {
  .auth-screen { grid-template-columns: 1fr; padding: 96px 20px 24px; }
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .rail-status { position: static; margin-top: 20px; }
  .hero, .ops-grid { grid-template-columns: 1fr; }
  .filter-bar, .crud-form, .role-form, .assign-form, .inventory-form { grid-template-columns: 1fr; }
  .permission-box { grid-template-columns: 1fr; }
  .metrics, .client-grid, .policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .main, .rail { padding: 16px; }
  .metrics, .client-grid, .policy-grid, .profile-grid { grid-template-columns: 1fr; }
  .profile-card.wide { grid-column: auto; }
  th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { display: none; }
}