:root{
  --mk-blue:#18225a;
  --mk-navy:#010F40;
  --mk-orange:#ff9f23;
  --mk-orange-2:#ffc376;
  --mk-gray:#808080;
  --bg0:#070a10;
  --bg1:#0b1020;
  --panel:#0a0f1f;
  --edge:rgba(180,190,210,.18);
  --txt:#e9efff;
  --muted:#9fb3d9;
  --ok:#22c55e;
  --bad:#ef4444;
  --warn:#f59e0b;
}

html,body{height:100%;}
body.theme-dark{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(56,189,248,.06), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(255,159,35,.05), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--txt);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Navbar */
.bg-blue{ background: linear-gradient(180deg, rgba(24,34,90,.95), rgba(1,15,64,.95)); }
.app-navbar{ border-bottom:1px solid rgba(255,255,255,.06); }
.btn-pill{ border-radius:999px; }
.LEAD{display:flex; align-items:center; gap:10px;}
.typewriter{opacity:.9}

/* Status pills */
.api-status-pill{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
}
.api-status-pill .api-dot{width:9px; height:9px; border-radius:50%; background:var(--mk-gray);}
.api-status-pill.idle .api-dot{background:var(--mk-gray);}
.api-status-pill.online .api-dot{background:var(--ok);}
.api-status-pill.offline .api-dot{background:var(--warn);}
.api-status-pill.sending .api-dot{background:var(--mk-orange);}
.api-status-pill.error .api-dot{background:var(--bad);}

.rec-indicator{
  width:10px; height:10px; border-radius:50%;
  background: rgba(239,68,68,.25);
  box-shadow: 0 0 0 0 rgba(239,68,68,.35);
  opacity:.35;
}
.rec-indicator.on{
  opacity:1;
  background: rgba(239,68,68,.95);
  animation: recPulse 1.1s infinite;
}
@keyframes recPulse{
  0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.35);}
  70%{ box-shadow: 0 0 0 12px rgba(239,68,68,0);}
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0);}
}

/* Shell */
.app-shell{max-width: 1100px; margin:0 auto; padding:14px;}
.questions-card{
  background: rgba(10,15,31,.75);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.panel-title-small{display:flex; justify-content:space-between; align-items:flex-end;}
.panel-title-small span{font-weight:700;}
.panel-subtitle{font-size:12px; color: rgba(233,239,255,.72);}

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width:720px){ .grid2{grid-template-columns:1fr;} }

.kpi{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:10px;
}
.kpi .label{ font-size:12px; color: rgba(233,239,255,.65); }
.kpi .val{ font-size:18px; font-weight:900; margin-top:2px; }

.sep{ height:1px; background: rgba(255,255,255,.08); margin:12px 0; }

.mono-box{
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
  white-space:pre-wrap;
  font-size:13px;
  min-height: 76px;
}
.tag{
  display:inline-flex; align-items:center;
  padding:4px 9px; border-radius:999px;
  background: rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
  font-size:12px;
  margin: 4px 6px 0 0;
}
.tag.orange{
  background: rgba(255,159,35,.12);
  border:1px solid rgba(255,159,35,.25);
}

.live-bar{
  position:fixed; left:0; right:0; bottom:0;
  background: rgba(1,15,64,.92);
  border-top:1px solid rgba(255,255,255,.08);
  padding:8px 12px;
  z-index: 1030;
}
.live-bar-inner{max-width: 1100px; margin:0 auto; display:flex; justify-content:space-between; gap:10px; align-items:center;}
.status-msg{font-size:12px; color: rgba(233,239,255,.85); max-width: 58vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.live-preview-wrap{flex:1;}
.msg-row{ display:flex; }
.msg-bubble{
  display:inline-block; padding:8px 10px; border-radius:14px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  font-size:13px;
}

/* Floating circle button */
.rec-fab{
  position:fixed;
  right:16px;
  bottom:74px;
  z-index: 1040;
}
.rec-fab button{
  width:64px; height:64px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  font-weight:900;
  display:flex;
  align-items:center; justify-content:center;
}
.rec-fab button .i{ font-size:20px; line-height:1; }
.rec-fab button.small{ width:52px; height:52px; }

/* Offcanvas */
.drawer-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index: 2000;
}
.drawer{
  position:fixed; top:0; right:0;
  height:100%;
  width:min(420px, 92vw);
  background: rgba(10,15,31,.98);
  border-left:1px solid rgba(255,255,255,.08);
  z-index: 2001;
  padding:12px;
  overflow:auto;
}
.drawer .h{display:flex; justify-content:space-between; align-items:center;}
.drawer .h .t{font-weight:900;}
.drawer .btn{border-radius:999px;}
.drawer .btn-link{color: rgba(233,239,255,.75);}

/* Modal */
.pwa-modal-backdrop{
  position:fixed; inset:0; display:flex;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 2100;
}
.pwa-modal{
  width:min(780px, 92vw);
  background: rgba(10,15,31,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.pwa-modal-header{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:12px;
}
.pwa-modal-title{font-weight:900;}
.pwa-modal-body{padding:12px 14px;}
.pwa-modal-actions{padding:12px 14px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid rgba(255,255,255,.08);}
.list-row{
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background: rgba(255,255,255,.03);
  margin-bottom:10px;
}
.list-row .top{display:flex; justify-content:space-between; gap:10px; align-items:center;}
.list-row .meta{font-size:12px; color: rgba(233,239,255,.70);}
.list-row .actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.btn-ghost{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(233,239,255,.92);
}
.legal-footer{
  margin-top: 80px;
  padding: 20px 14px;
  opacity:.7;
  font-size:12px;
  text-align:center;
}