:root{
  --bg:#050816;          /* page base */
  --sidebar:#030617;     /* left */
  --panel:#07112C;       /* card */
  --panel2:#08163A;      /* deeper card */
  --line:rgba(255,255,255,.08);

  --text:#EAF0FF;
  --muted:#9FB0D8;

  --blue:#2BB3EA;
  --red:#EB233C;

  --shadow:0 18px 44px rgba(0,0,0,.55);
  --r:14px;
  --r2:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ===== LAYOUT ===== */
.appShell{
  min-height:100vh;
  display:grid;
  grid-template-columns: 340px 1fr 320px;
}

/* ===== SIDEBAR ===== */
.sidebar{
  background:var(--sidebar);
  border-right:1px solid rgba(255,255,255,.06);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sideTop{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sideLogo{
  width:86px;height:86px;
  border-radius:16px;
  border:none;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
  object-fit:cover;
}
.sideTitle{
  font-weight:900;
  letter-spacing:1px;
  font-size:14px;
}
.sideSub{
  margin-top:6px;
  color:rgba(159,176,216,.75);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.sideSection{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  border-radius:var(--r2);
  padding:14px;
}
.sideLabel{
  color:rgba(159,176,216,.78);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:10px;
}

.sideBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  transition:transform .08s ease, background .18s ease, border-color .18s ease;
}
.sideBtn + .sideBtn{ margin-top:10px; }
.sideBtn:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(43,179,234,.28);
}
.sideBtn:active{ transform:translateY(0); }

.sideBtnPrimary{
  background:#071B3D;
  border-color:rgba(43,179,234,.40);
}
.sideBtnPrimary:hover{
  background:#082149;
  border-color:rgba(43,179,234,.70);
}

.sideHint{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.2px;
  color:rgba(159,176,216,.85);
  line-height:1.35;
}
.statusOk{ color:#BFEFFF; font-weight:800; }
.statusBad{ color:#FFD3DA; font-weight:800; }
.statusOk i, .statusBad i{ font-size:9px; vertical-align:middle; margin-right:8px; }

.sideFoot{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(159,176,216,.70);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.9px;
}
.muted{ color:rgba(159,176,216,.70); }

/* ===== MAIN ===== */
.main{
  padding:22px 18px;
  /* IMPORTANT: do NOT introduce a different "blue area" background */
  background:var(--bg);
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
}
.pageTitle{
  font-size:30px;
  font-weight:900;
  letter-spacing:.6px;
}
.pageSub{
  margin-top:6px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(159,176,216,.72);
}

.accessBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.85);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:12px;
}
.accessBox strong{
  color:var(--text);
  font-weight:900;
}
.accessBox.unlocked{
  border-color:rgba(43,179,234,.40);
}

/* filter row */
.filterRow{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.filterInput{
  flex:1 1 auto;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  padding:0 14px;
  font-weight:800;
  outline:none;
}
.filterInput::placeholder{ color:rgba(159,176,216,.55); }
.filterInput:focus{
  border-color:rgba(43,179,234,.40);
  box-shadow:0 0 0 3px rgba(43,179,234,.10);
}
.filterBtns{ display:flex; gap:10px; flex-wrap:wrap; }

/* Buttons (NO pills) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:48px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  cursor:pointer;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  transition:transform .08s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(43,179,234,.25);
}
.btn:active{ transform:translateY(0); }

.btnPrimary{
  background:#071B3D;
  border-color:rgba(43,179,234,.45);
}
.btnPrimary:hover{
  background:#082149;
  border-color:rgba(43,179,234,.72);
}
.btnDanger{
  border-color:rgba(235,35,60,.50);
}
.btnDanger:hover{
  border-color:rgba(235,35,60,.75);
}

.btnSmall{
  height:36px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
}

/* ===== GRID / CARDS ===== */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.category{
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.category.hidden{ opacity:.55; }

.categoryHead{
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.catTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.catTitle h2{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.catActions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.catHiddenHead{ border-bottom-color:rgba(235,35,60,.25); }

.items{ padding:12px 14px 14px; }

.item{
  border:1px solid rgba(255,255,255,.06);
  background:var(--panel2);
  border-radius:16px;
  padding:12px;
}
.item + .item{ margin-top:12px; }
.hiddenItem{ opacity:.55; }

.rowTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.itemText{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.25;
}
.rowRight{
  display:flex;
  gap:8px;
  flex-shrink:0;
}

.rowActions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Checks */
.check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.88);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:12px;
  cursor:pointer;
}
.check input{ accent-color:var(--blue); }

/* Notes button */
.noteBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.92);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:12px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .08s ease;
}
.noteBtn:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(235,35,60,.30); /* use your red */
}
.noteBtn:active{ transform:translateY(0); }

.inlineNote{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(235,35,60,.20);
  background:rgba(235,35,60,.06);
  color:rgba(234,240,255,.92);
  font-size:13px;
  line-height:1.35;
}

.catNote{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(43,179,234,.18);
  background:rgba(43,179,234,.06);
  color:rgba(234,240,255,.90);
  font-size:13px;
  line-height:1.35;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.85);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:11px;
}
.tagRed{
  border-color:rgba(235,35,60,.55);
  background:rgba(235,35,60,.08);
  color:#FFD3DA;
}

/* mini/ghost buttons */
.miniIcon,
.iconBtn,
.ghostBtn{
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  cursor:pointer;
  border-radius:12px;
  transition:background .18s ease, border-color .18s ease, transform .08s ease;
}
.miniIcon{
  width:38px;height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.miniIcon:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(43,179,234,.25);
}

.ghostBtn{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}
.ghostBtn:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(43,179,234,.25);
}
.ghostBtn.danger:hover{
  border-color:rgba(235,35,60,.70);
}

/* empty */
.empty{
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel);
  border-radius:var(--r2);
  padding:18px;
  color:rgba(159,176,216,.88);
}

/* ===== RIGHT PANEL ===== */
.rightPanel{
  background:var(--bg);
  border-left:1px solid rgba(255,255,255,.06);
  padding:22px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  border:1px solid rgba(255,255,255,.08);
  background:var(--panel);
  border-radius:var(--r2);
  padding:16px;
  box-shadow:var(--shadow);
}
.cardLabel{
  color:rgba(159,176,216,.75);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:900;
}
.cardBig{
  margin-top:10px;
  font-size:52px;
  font-weight:900;
  letter-spacing:1px;
  color:var(--blue);
}
.cardSub{
  margin-top:6px;
  color:rgba(159,176,216,.70);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:900;
}

/* Mission ring */
.ringWrap{ display:flex; justify-content:center; padding:14px 0 6px; }
.ring{
  --pct:0;
  width:180px;
  height:180px;
  border-radius:50%;
  background:conic-gradient(var(--blue) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ringInner{
  width:140px;
  height:140px;
  border-radius:50%;
  background:#050B1F;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.ringPct{
  font-size:36px;
  font-weight:900;
  color:var(--blue);
}
.ringSub{
  margin-top:6px;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(159,176,216,.75);
  font-weight:900;
}

/* ===== FLOATING GEAR ===== */
.fab{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:#071B3D;
  color:var(--text);
  box-shadow:var(--shadow);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  z-index:999;
  transition:transform .08s ease, background .18s ease, border-color .18s ease;
}
.fab:hover{
  transform:translateY(-1px);
  background:#082149;
  border-color:rgba(235,35,60,.35); /* your red */
}
.fab:active{ transform:translateY(0); }

/* ===== MODALS ===== */
.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.modalBackdrop.open{ display:flex; }

.modal{
  width:min(760px, 100%);
  border-radius:var(--r2);
  border:1px solid rgba(255,255,255,.12);
  background:var(--panel);
  box-shadow:0 34px 80px rgba(0,0,0,.78);
  overflow:hidden;
}

.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.modalTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:13px;
}

.modalBody{ padding:14px; }

.iconBtn{
  width:42px;height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconBtn:hover{
  transform:translateY(-1px);
  background:#091741;
  border-color:rgba(43,179,234,.25);
}

.callout{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#060D22;
  color:rgba(159,176,216,.88);
}
.calloutTitle{
  color:var(--text);
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:12px;
}
.calloutText{
  margin-top:4px;
  font-size:13px;
  line-height:1.35;
}

.fieldRow{ margin-top:12px; }
.fieldLabel{
  display:block;
  color:rgba(159,176,216,.75);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  font-weight:900;
  margin-bottom:8px;
}
.field{
  width:100%;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  padding:0 14px;
  font-weight:800;
  outline:none;
}
.field:focus{
  border-color:rgba(43,179,234,.40);
  box-shadow:0 0 0 3px rgba(43,179,234,.10);
}

.textarea{
  width:100%;
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:var(--text);
  padding:12px 14px;
  font-weight:700;
  outline:none;
  resize:vertical;
  min-height:160px;
}
.textarea:focus{
  border-color:rgba(235,35,60,.35);
  box-shadow:0 0 0 3px rgba(235,35,60,.10);
}

.modalActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.modalActions .spacer{ flex:1 1 auto; }

.toast{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.88);
  display:none;
  font-size:13px;
}
.toast.ok{ border-color:rgba(43,179,234,.35); }
.toast.bad{ border-color:rgba(235,35,60,.55); color:#FFD3DA; }

/* settings row */
.settingsRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:#060D22;
}
.settingsText{ min-width:0; }
.settingsMain{
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:13px;
}
.settingsSub{
  margin-top:6px;
  color:rgba(159,176,216,.78);
  font-size:13px;
  line-height:1.25;
}

/* switch */
.switch{ position:relative; display:inline-block; width:54px; height:30px; }
.switch input{ display:none; }
.slider{
  position:absolute; inset:0;
  background:#07112C;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  cursor:pointer;
  transition:.2s;
}
.slider:before{
  content:"";
  position:absolute;
  height:22px;width:22px;
  left:4px; top:3px;
  background:#EAF0FF;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider{
  border-color:rgba(235,35,60,.45);
  background:rgba(235,35,60,.10);
}
.switch input:checked + .slider:before{
  transform:translateX(24px);
  background:var(--red);
}

/* Export/Import layout */
.xioGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.xioCard{
  border:1px solid rgba(255,255,255,.08);
  background:#060D22;
  border-radius:16px;
  padding:14px;
}
.xioHead{
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:13px;
}
.xioText{
  margin-top:8px;
  color:rgba(159,176,216,.80);
  font-size:13px;
  line-height:1.3;
}
.file{
  margin-top:12px;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:#07112C;
  color:rgba(159,176,216,.88);
  padding:10px 12px;
}
.xioWarn{
  margin-top:10px;
  color:#FFD3DA;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:11px;
}
.xioWarn i{ margin-right:8px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px){
  .appShell{ grid-template-columns: 320px 1fr; }
  .rightPanel{ display:none; }
}
@media (max-width: 860px){
  .appShell{ grid-template-columns: 1fr; }
  .sidebar{
    position:sticky;
    top:0;
    z-index:50;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
}
@media (max-width: 520px){
  .filterRow{ flex-direction:column; align-items:stretch; }
  .btn, .sideBtn{ width:100%; }
  .xioGrid{ grid-template-columns:1fr; }
}