:root{
  --mk-blue:#18225a;
  --mk-navy:#010F40;
  --mk-sky:#004b91;
  --mk-orange:#ff9f23;
  --mk-orange-2:#ffc376;
  --mk-gray:#808080;

  --bg:#f7f9fc;
  --card:#ffffff;
  --text:#0b163a;
  --muted:#5e6b89;
  --border:rgba(1,15,64,.12);

  --shadow:0 8px 26px rgba(1,15,64,.10);
  --shadow2:0 2px 10px rgba(1,15,64,.08);

  --radius:14px;
  --radius2:18px;

  --pill:999px;
}

html,body{height:100%;}
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(0,75,145,.14), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, rgba(255,159,35,.12), transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "DM Sans", sans-serif;
}

.app-navbar{border-bottom:1px solid var(--border);}
.navbar-brand img{width:22px;height:22px;border-radius:6px;margin-right:8px;box-shadow: var(--shadow2);}
.LEAD{display:flex;align-items:center;}
.typewriter{letter-spacing:.2px;}
.btn-pill{border-radius:var(--pill)!important;}

.api-status-pill{
  display:flex; align-items:center;
  padding:6px 10px;
  border-radius:var(--pill);
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  margin-left:10px;
  font-size:12px;
  gap:8px;
}
.api-dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;}
.api-status-pill.ok .api-dot{background:#16a34a;}
.api-status-pill.bad .api-dot{background:#ef4444;}
.api-status-pill.busy .api-dot{background:#f59e0b;}

.rec-indicator{
  width:10px;height:10px;border-radius:50%;
  background:#cbd5e1;
  box-shadow:0 0 0 0 rgba(239,68,68,.0);
}
.rec-indicator.on{
  background:#ef4444;
  animation: pulse 1.1s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.40);}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,.0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,.0);}
}

.app-shell{padding-top:66px; padding-bottom:88px;}
.app-main{max-width:1000px;margin:0 auto; padding:14px;}
.cardx{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius2);
  box-shadow:var(--shadow);
}
.panel-title-small{
  display:flex;justify-content:space-between;align-items:flex-end;
  color:var(--mk-navy);
  font-weight:700;
  font-size:13px;
  letter-spacing:.2px;
}
.panel-subtitle{color:var(--muted);font-weight:500;font-size:12px;}

.questions-card{padding:14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius2); box-shadow:var(--shadow);}
.footer-meta-inline{
  display:flex;justify-content:space-between;
  margin-top:12px; padding-top:10px; border-top:1px dashed rgba(1,15,64,.14);
  color:var(--muted); font-size:12px;
}

.view{display:none;}
.view.active{display:block;}
.view-head{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.view-title{font-size:15px; font-weight:800; color:var(--mk-navy);}
.view-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.kpi-pill{
  border:1px solid var(--border);
  border-radius:var(--pill);
  padding:6px 10px;
  background:#fff;
  box-shadow:var(--shadow2);
  font-size:12px;
  color:var(--muted);
}

.nav-tabs-mini{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.nav-tabs-mini .tabbtn{
  padding:6px 10px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:var(--pill);
  font-size:12px;
  color:var(--mk-navy);
  box-shadow: var(--shadow2);
}
.nav-tabs-mini .tabbtn.active{
  background: linear-gradient(135deg, rgba(0,75,145,.12), rgba(255,159,35,.10));
  border-color: rgba(0,75,145,.25);
}

.qtable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.qtable th, .qtable td{
  padding:10px 10px;
  font-size:13px;
  border-bottom:1px solid rgba(1,15,64,.08);
  vertical-align:top;
}
.qtable th{
  background:rgba(0,75,145,.06);
  color:var(--mk-navy);
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.qtable tr:last-child td{border-bottom:none;}
.qrow-active{outline:2px solid rgba(255,159,35,.35); outline-offset:-2px; background:rgba(255,159,35,.06);}
.qbadge{
  font-size:11px;
  padding:3px 8px;
  border-radius:var(--pill);
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
}
.qbadge.ok{border-color:rgba(22,163,74,.25); background:rgba(22,163,74,.08); color:#166534;}
.qbadge.warn{border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.10); color:#92400e;}
.qbadge.bad{border-color:rgba(239,68,68,.25); background:rgba(239,68,68,.10); color:#991b1b;}

.smallmono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; color:var(--muted);}

.input-lite{
  width:100%;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(1,15,64,.14);
  background:#fff;
  outline:none;
}
.input-lite:focus{border-color: rgba(0,75,145,.35); box-shadow:0 0 0 3px rgba(0,75,145,.10);}

.matches-panel{
  position:fixed;
  right:12px;
  top:88px;
  width:min(360px, calc(100vw - 24px));
  z-index:20;
  pointer-events:none;
}
.matches-inner{
  pointer-events:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:10px;
}
.match-list-box{max-height:54vh; overflow:auto; padding:6px;}
.match-item{
  border:1px solid rgba(1,15,64,.10);
  border-radius:14px;
  padding:10px;
  margin-bottom:8px;
  background: linear-gradient(180deg, rgba(0,75,145,.05), rgba(255,159,35,.04));
}
.match-item .mi-top{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.match-item .mi-title{font-weight:800; font-size:12px; color:var(--mk-navy);}
.match-item .mi-text{font-size:13px; color:var(--text); margin-top:6px;}
.match-item .mi-meta{font-size:11px; color:var(--muted); margin-top:6px;}
.match-item .mi-actions{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}

.live-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  z-index:25;
}
.live-bar-inner{
  max-width:1000px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.status-msg{font-size:12px; color:var(--muted);}
.msg-row{display:flex; gap:8px; align-items:flex-start;}
.msg-bubble{
  display:inline-block;
  padding:8px 10px;
  border-radius: 14px;
  background: rgba(0,75,145,.08);
  border:1px solid rgba(0,75,145,.10);
  color:var(--mk-navy);
  font-size:12px;
  max-width:520px;
}

.rec-fab{position:fixed; bottom:96px; z-index:30;}
.rec-fab-right{right:14px;}
.rec-fab-left{left:14px;}
.rec-fab .btn{box-shadow:var(--shadow);}

.deck{display:grid; grid-template-columns: 1.3fr .7fr; gap:12px;}
@media (max-width: 980px){
  .deck{grid-template-columns:1fr;}
  .matches-panel{position:static; width:100%; margin:12px 0; pointer-events:auto;}
}
.slide{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background:#fff;
  box-shadow: var(--shadow);
  padding:14px;
}
.slide h2{font-size:18px; margin:0 0 8px 0; color:var(--mk-navy); font-weight:900;}
.slide ul{margin:0; padding-left:18px; color:var(--text); font-size:14px;}
.slide .meta{margin-top:10px; color:var(--muted); font-size:12px;}
.notes{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  background:#fff;
  box-shadow: var(--shadow);
  padding:14px;
}
.notes label{font-size:12px; color:var(--muted); font-weight:800; letter-spacing:.3px;}
.notes textarea{
  width:100%; min-height:220px;
  border-radius:14px;
  border:1px solid rgba(1,15,64,.14);
  padding:10px;
  outline:none;
}
.notes textarea:focus{border-color: rgba(255,159,35,.45); box-shadow:0 0 0 3px rgba(255,159,35,.16);}

.kanban{display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;}
@media (max-width: 1100px){ .kanban{grid-template-columns:1fr;} }
.kcol{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding:10px;
}
.kcol h3{font-size:13px; font-weight:900; margin:0 0 8px 0; color:var(--mk-navy);}
.kdrop{min-height:80px;}
.kcard{
  border:1px solid rgba(1,15,64,.12);
  border-radius: 14px;
  padding:10px;
  margin-bottom:8px;
  background: #fff;
}
.kcard.dragging{opacity:.5;}
.kcard .t{font-size:13px; font-weight:800; color:var(--mk-navy);}
.kcard .m{font-size:11px; color:var(--muted); margin-top:4px;}
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:var(--pill);
  border:1px solid rgba(255,159,35,.25);
  background:rgba(255,159,35,.12);
  color:#7a3f00;
  font-size:11px;
  margin-right:6px;
}

.table-lite{
  width:100%;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
}
.table-lite th, .table-lite td{
  padding:10px;
  border-bottom:1px solid rgba(1,15,64,.08);
  font-size:13px;
}
.table-lite th{
  background:rgba(0,75,145,.06);
  color:var(--mk-navy);
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.table-lite tr:last-child td{border-bottom:none;}
.money{font-weight:900; color:var(--mk-navy);}
.minihelp{font-size:12px; color:var(--muted);}

.canvas-wrap{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:10px;
}

.modalx-backdrop{
  position:fixed; inset:0;
  background:rgba(1,15,64,.42);
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
}
.modalx-backdrop.show{display:flex;}
.modalx{
  width:min(720px, 100%);
  background:#fff;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modalx .mh{
  padding:12px 14px;
  border-bottom:1px solid rgba(1,15,64,.10);
  display:flex; justify-content:space-between; align-items:center;
}
.modalx .mh .t{font-weight:900; color:var(--mk-navy);}
.modalx .mb{padding:14px;}
.modalx .mf{
  padding:12px 14px;
  border-top:1px solid rgba(1,15,64,.10);
  display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;
}

.legal-footer{
  opacity:.65;
  font-size:11px;
  color:var(--muted);
  padding:18px 14px 120px;
  text-align:center;
}

/* PWA install modal */
.pwa-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(1,15,64,.38);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  z-index:90;
}
.pwa-modal{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid rgba(1,15,64,.12);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.pwa-modal-header{
  padding:12px 14px;
  display:flex; gap:12px; align-items:center;
  border-bottom:1px solid rgba(1,15,64,.10);
}
.pwa-modal-header img{width:44px;height:44px;border-radius:12px; box-shadow: var(--shadow2);}
.pwa-modal-title{font-weight:900;color:var(--mk-navy);}
.pwa-modal-body{padding:12px 14px; color:var(--text); font-size:14px;}
.pwa-modal-actions{
  padding:12px 14px;
  border-top:1px solid rgba(1,15,64,.10);
  display:flex; justify-content:flex-end; gap:8px;
}

/* Print */
@media print{
  .matches-panel,.live-bar,.rec-fab,.navbar,.legal-footer,.view-actions{display:none !important;}
  body{background:#fff;}
  .app-shell{padding-top:0;}
}