:root{
  --bg:#06101c;
  --bg2:#091626;
  --bg3:#040913;
  --card:#0e1a31;
  --card2:#132342;
  --card3:#0c1630;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --txt:#eef4ff;
  --muted:#9cb0d3;
  --accent:#5ea0ff;
  --accent2:#7cf7c4;
  --accent3:#7b8cff;
  --ok:#42d392;
  --warn:#ffcb6b;
  --err:#ff6b7a;
  --chip:#152544;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:20px;
  --radius2:28px;
  --max:1600px;
  --font:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:var(--font);
  color:var(--txt);
  background:
    radial-gradient(circle at 10% 0%, rgba(94,160,255,.16), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(124,247,196,.10), transparent 18%),
    linear-gradient(180deg,var(--bg),var(--bg3) 70%);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.app-body{min-height:100vh}
.shell{max-width:var(--max);margin:0 auto;padding:28px}

.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(22px);
  background:rgba(4,8,16,.78);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 28px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand__logo{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;color:#05111e;
  background:linear-gradient(135deg,var(--accent),#9abcff 45%,var(--accent2));
  box-shadow:0 18px 44px rgba(45,102,204,.22);
}
.brand__title{font-size:15px;font-weight:900;letter-spacing:.01em}
.brand__sub{font-size:12px;color:var(--muted)}
.topbar__center{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.topbar__right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.status-line,
.status-chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 12px;
  border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.03)
}
.status-line--muted{color:var(--muted)}
.status-line__dot,
.status-chip__dot{
  width:8px;height:8px;border-radius:999px;background:var(--ok);
  box-shadow:0 0 14px rgba(66,211,146,.55)
}
.status-line__dot--blue{background:var(--accent)}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px;border-radius:999px;
  background:rgba(94,160,255,.12);
  color:#c0d8ff;border:1px solid rgba(94,160,255,.20);
  font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase
}
h1{margin:12px 0 8px;font-size:44px;line-height:1.02;max-width:1100px}
h2,h3{margin:0}
.muted{color:var(--muted)}
.small{font-size:12px;color:var(--muted)}

.card{
  background:
    linear-gradient(180deg, rgba(16,27,51,.98), rgba(19,35,66,.98));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{padding:20px}
.panel--tabs{padding:20px}
.panel--qr{display:flex;flex-direction:column;justify-content:space-between}
.panel--tabs > section:not(.hidden){animation:fadeIn .18s ease}

.mission-banner{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
  gap:18px;
  margin:2px 0 22px;
}
.mission-banner__left,
.mission-banner__right{
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(12,22,48,.96),rgba(9,18,38,.96));
  padding:22px;
}
.mission-banner__right{
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(circle at top right, rgba(94,160,255,.14), transparent 32%),
    linear-gradient(180deg,rgba(14,26,49,.98),rgba(10,20,40,.98));
}
.mission-banner__copy{max-width:1000px}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-tag{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:12px;color:#d7e6ff;font-weight:700
}
.hero-card{
  padding:18px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(21,37,68,.95),rgba(12,22,48,.95));
}
.hero-card--primary{
  background:
    radial-gradient(circle at top left, rgba(124,247,196,.08), transparent 28%),
    linear-gradient(180deg,rgba(21,37,68,.98),rgba(11,20,40,.98));
}
.hero-card__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.hero-card__value{margin-top:10px;font-size:32px;font-weight:900}
.hero-card__sub{margin-top:6px;font-size:12px;color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px}

.stats-grid{display:grid;gap:14px;margin-bottom:18px}
.stats-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.metric{
  padding:20px;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,32,60,.96),rgba(15,26,49,.98));
}
.metric--spotlight{
  background:
    radial-gradient(circle at top left, rgba(94,160,255,.14), transparent 35%),
    linear-gradient(180deg,rgba(18,32,60,.98),rgba(15,26,49,.98));
}
.metric--system{
  background:
    radial-gradient(circle at top right, rgba(124,247,196,.10), transparent 30%),
    linear-gradient(180deg,rgba(18,32,60,.98),rgba(15,26,49,.98));
}
.metric__label{font-size:13px;color:var(--muted)}
.metric__value{margin-top:8px;font-size:30px;font-weight:900}
.metric__value--sm{font-size:22px}
.metric__sub{margin-top:6px;font-size:12px;color:var(--muted)}

.control-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
  gap:18px;
}
.control-grid__rail{position:sticky;top:92px;height:fit-content}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}

.rail-block + .rail-block{margin-top:22px}
.rail-list{display:grid;gap:14px;margin-top:18px}
.rail-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)
}
.rail-item__index{
  width:36px;height:36px;flex:0 0 36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#d7e6ff;background:#132544;border:1px solid var(--line)
}

.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.tab{
  min-height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-weight:800
}
.tab.is-active{background:rgba(94,160,255,.15);color:#dbe8ff;border-color:rgba(94,160,255,.35)}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.toolbar__group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inline{display:flex;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}

.label{font-size:13px;font-weight:700;color:#d7e6ff}
.input, textarea, select{
  width:100%;min-height:46px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--line2);background:#0a1428;color:var(--txt)
}
textarea{min-height:112px;resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 15px;border-radius:12px;
  border:1px solid var(--line2);cursor:pointer;transition:.18s ease; font-weight:800;
  background:#13213f;color:var(--txt)
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn--primary{background:linear-gradient(135deg,#2b72ff,#5ea0ff);color:white;border-color:transparent}
.btn--ghost{background:rgba(255,255,255,.03)}
.btn--ok{background:linear-gradient(135deg,#1da76d,#42d392);color:#07120d;border-color:transparent}
.btn--warn{background:linear-gradient(135deg,#cc8b1d,#ffcb6b);color:#1d1405;border-color:transparent}
.btn--danger{background:linear-gradient(135deg,#ca4156,#ff6b7a);color:white;border-color:transparent}
.btn--sm{min-height:34px;padding:0 11px;font-size:13px}
.btn--block{width:100%}

.hidden{display:none !important}
.hr{height:1px;background:var(--line);margin:18px 0}

.table-wrap{
  overflow:auto;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.02)
}
table{width:100%;border-collapse:collapse;min-width:980px}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
th{
  position:sticky;top:0;background:#112040;color:#dce8ff;
  text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em
}
tbody tr:hover{background:rgba(255,255,255,.03)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.pill{
  display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;
  background:var(--chip);border:1px solid var(--line);font-size:12px
}
.pill--ok{background:rgba(66,211,146,.14);color:#7df0b7;border-color:rgba(66,211,146,.28)}
.pill--warn{background:rgba(255,203,107,.12);color:#ffd97f;border-color:rgba(255,203,107,.24)}
.pill--err{background:rgba(255,107,122,.12);color:#ff9aa5;border-color:rgba(255,107,122,.24)}
.pill--cold{background:rgba(94,160,255,.12);color:#bfd8ff;border-color:rgba(94,160,255,.24)}
.pill--hot{background:rgba(255,107,122,.12);color:#ff9aa5;border-color:rgba(255,107,122,.24)}

.notice{
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-size:13px
}
.notice--ok{border-color:rgba(66,211,146,.24);background:rgba(66,211,146,.10)}
.notice--err{border-color:rgba(255,107,122,.24);background:rgba(255,107,122,.10)}
.notice--warn{border-color:rgba(255,203,107,.24);background:rgba(255,203,107,.10)}

.modal{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px
}
.modal__bg{
  position:absolute;inset:0;background:rgba(4,8,16,.72);backdrop-filter:blur(8px)
}
.modal__card{
  position:relative;width:min(1040px,100%);max-height:92vh;overflow:auto;padding:20px
}
.modal__title{margin-top:10px}

.mono-box{
  white-space:pre-wrap;word-break:break-word;margin-top:12px;color:#dbe8ff;
  min-height:180px;max-height:420px;overflow:auto;
  border:1px solid var(--line);border-radius:16px;background:#081224;padding:14px;
}
.mono-box--short{min-height:120px}

.ops-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ops-stat{
  padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)
}
.ops-stat__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ops-stat__value{margin-top:8px;font-size:18px;font-weight:800}
.ops-stat__value--sm{font-size:14px}

.qr-card{
  margin-top:14px;display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.14);border-radius:20px;min-height:320px;
  background:rgba(255,255,255,.02);padding:18px;
}
.qr-card__image{width:min(100%, 360px);border-radius:22px;display:block;background:white}

.login-screen{
  min-height:calc(100vh - 110px);
  display:flex;align-items:center;justify-content:center
}
.login-screen--mission{
  background:
    radial-gradient(circle at left top, rgba(94,160,255,.10), transparent 22%),
    transparent;
}
.login-shell{
  width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch
}
.login-shell--wide{max-width:1320px}
.login-card{padding:28px}
.login-card--info{
  background:
    radial-gradient(circle at top left, rgba(94,160,255,.16), transparent 32%),
    linear-gradient(180deg,var(--card),var(--card2));
}
.login-card--form{
  background:
    radial-gradient(circle at top right, rgba(124,247,196,.06), transparent 24%),
    linear-gradient(180deg,var(--card),var(--card2));
}
.login-title{margin-top:12px;margin-bottom:8px}
.login-feature-list{display:grid;gap:16px;margin-top:24px}
.login-feature{display:flex;align-items:flex-start;gap:12px}
.login-feature__dot{
  width:10px;height:10px;border-radius:999px;background:var(--accent2);margin-top:7px;
  box-shadow:0 0 10px rgba(124,247,196,.45)
}
.login-form-grid{max-width:480px}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1400px){
  .stats-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .control-grid{grid-template-columns:1fr}
  .control-grid__rail{position:relative;top:auto}
}
@media (max-width:1180px){
  .mission-banner,.grid2,.grid3,.form-grid,.login-shell{grid-template-columns:1fr}
  .topbar__inner{grid-template-columns:1fr;justify-items:start}
  .topbar__center{justify-content:flex-start}
}
@media (max-width:760px){
  .shell{padding:14px}
  .topbar__inner{padding:12px 14px}
  h1{font-size:32px}
  .stats-grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ops-grid{grid-template-columns:1fr}
}


.btn--revenue{
  background:linear-gradient(135deg,#1f3567,#274988);
  border-color:rgba(94,160,255,.25);
}
.inline-link{
  color:#cfe0ff;
  text-decoration:underline;
  text-underline-offset:2px;
}
.revenue-cta-card{
  display:block;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(94,160,255,.12), transparent 32%),
    linear-gradient(180deg,rgba(18,32,60,.96),rgba(15,26,49,.98));
}
.revenue-cta-card h3{margin:12px 0 8px}
.revenue-cta-card:hover{
  transform:translateY(-1px);
  border-color:rgba(94,160,255,.24);
}