:root{
  --bg:#0b0f17;
  --panel:#121826;
  --panel2:#0f1524;
  --line:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#3b82f6;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:radial-gradient(1200px 600px at 10% -10%, #162044, transparent),
             radial-gradient(1200px 600px at 90% -20%, #0b3a2e, transparent),
             var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

.wrap{
  max-width:1300px;
  margin:0 auto;
  padding:18px;
}

.hidden{display:none !important}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.headerLeft{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.cidHeaderLogo{
  height:56px;
  width:auto;
  object-fit:contain;
  flex:0 0 auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}

.brandTitle{
  font-size:20px;
  font-weight:800;
  letter-spacing:.4px;
}

.headerRight{
  display:flex;
  align-items:center;
  gap:16px;
}

.headerBtns{
  display:flex;
  gap:8px;
}

/* App layout */
.app{
  margin-top:16px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Toolbar */
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.tabs{
  display:flex;
  gap:8px;
}

.tab{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
}

.tab.active{
  color:var(--text);
  background:rgba(59,130,246,.15);
  border-color:rgba(59,130,246,.5);
}

.tools{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Inputs & buttons */
.input{
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  min-width:220px;
}

.btn{
  background:linear-gradient(180deg, rgba(59,130,246,.25), rgba(59,130,246,.15));
  border:1px solid rgba(59,130,246,.5);
  color:var(--text);
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
}

.btnGhost{
  background:transparent;
  border:1px solid var(--line);
}

.btn:hover{filter:brightness(1.1)}

.btn.danger{
  border-color:rgba(239,68,68,.6);
  background:rgba(239,68,68,.15);
}

/* Panels */
.panel{
  margin-top:8px;
}

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--line);
}

.table th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}

.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.table tr:last-child td{border-bottom:none}
.table tr:hover{background:rgba(255,255,255,.03)}

.actions{
  display:flex;
  gap:6px;
}

/* Text helpers */
.muted{color:var(--muted)}
.small{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Modal */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}

.modalCard{
  width:min(780px,100%);
  max-height:90vh;
  background: var(--panel);        /* SOLID */
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;

  display:flex;
  flex-direction:column;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.modalTitle{
  font-weight:800;
  font-size:16px;
}

#modalBody{
  overflow-y:auto;
  padding-right:6px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Fields inside modal */
.field{
  margin-bottom:12px;
}

.label{
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}

.textarea{
  width:100%;
  min-height:90px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  resize:vertical;
}

/* Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

.colorBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  background:var(--badge-color, rgba(255,255,255,.08));
  border:1px solid var(--line);
  text-transform:capitalize;
  min-width:64px;
}

/* Collapsible (details/summary) */
.acc{
  border:1px solid var(--line);
  border-radius:14px;
  background: rgba(255,255,255,.02);
  margin: 10px 0;
  overflow:hidden;
}

.acc > summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  font-weight:700;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border-bottom:1px solid var(--line);
}

.acc > summary::-webkit-details-marker{display:none}

.accBody{
  padding:12px;
}

/* Modal search row */
.modalSearchRow{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}

.modalSearch{
  width:100%;
  min-width: 0;
}

/* Responsive */
@media (max-width:700px){
  .header{flex-direction:column; align-items:flex-start}
  .headerLeft{width:100%}
  .cidHeaderLogo{height:44px}
  .headerRight{width:100%; justify-content:space-between}
  .tools{width:100%; justify-content:space-between}
  .input{flex:1}
}

/* =========================
   Mobile-friendly tweaks
   (no functionality changes)
   ========================= */

@media (max-width: 820px) {
  /* Keep layout from feeling cramped */
  body {
    padding: 12px;
  }

  /* Buttons: easier to tap */
  .btn {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Inputs/textareas: easier to tap/type */
  .input,
  .textarea,
  select.input {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }

  .textarea {
    min-height: 120px;
  }

  /* Tabs: allow wrap instead of squishing */
  .tabs {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tab {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 10px 12px;
  }

  /* Tables: allow sideways scroll instead of breaking layout */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 14px;
  }

  /* Actions row: wrap buttons nicely */
  .actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Modal: fit the screen and allow scrolling */
  #modalOverlay {
    padding: 12px;
  }

  .modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Accordion summary: bigger tap target */
  .acc > summary {
    padding: 12px 12px;
  }

  /* Modal search row: stack nicely if needed */
  .modalSearchRow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .modalSearchRow .modalSearch {
    flex: 1 1 240px;
  }
}

/* Extra small phones */
@media (max-width: 420px) {
  /* Slightly tighter but still tappable */
  .btn {
    padding: 10px 12px;
  }

  /* Chips don't overflow weirdly */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* Force solid-black app background */
:root {
  --bg: #000;
  --panel: #0a0a0a;     /* cards / modals */
  --line: #1a1a1a;      /* borders */
  --text: #f2f2f2;      /* primary text */
  --muted: #b5b5b5;     /* secondary text */
}

html, body {
  background: #000 !important;
  background-color: #000 !important;
}

/* If you have a main wrapper */
#app,
.app,
.container,
main {
  background: transparent !important;
}

/* Panels + modal should still be readable */
.card,
.panel,
.modal,
.modalCard,
.accBody,
.table,
thead,
tbody {
  background-color: var(--panel) !important;
}

/* Remove any gradient overlays if they exist */
* {
  background-image: none !important;
}