:root {
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe3ee;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --danger:#dc2626;
  --shadow:0 8px 24px rgba(15,23,42,.07);
  --radius:20px;
  --surface-soft:#f8fbff;
  --surface-tint:#eef5ff;
  --focus-ring:0 0 0 3px rgba(37,99,235,.16);
}


*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{text-decoration:none;color:inherit}
a:hover{color:var(--primary-2)}

.wrap{
  max-width:1540px;
  margin:0 auto;
  padding:24px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.topbar-copy{max-width:760px}

.topbar-right{
  display:flex;
  flex:1;
  justify-content:flex-end;
}

.page-lead{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width:760px;
}

.eyebrow{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-bottom:10px;
}

.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}

h1{
  margin:0;
  font-size:34px;
  line-height:1.1;
}

.section-title{
  margin:8px 0 0 0;
  font-size:28px;
}

.session-box{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
  width:min(100%,780px);
  margin-left:auto;
}

.session-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.session-name{
  font-size:16px;
  font-weight:700;
}

.session-role{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

button,.button{
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}

button:focus-visible,.button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}

.button-primary{
  background:var(--primary);
  color:#fff;
}

.button-primary:hover{
  background:var(--primary-2);
}

.button-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}

.button-secondary:hover{
  background:#f8fafc;
}

.button-danger{
  background:#dc2626;
  color:#fff;
  border:1px solid #dc2626;
}

.button-danger:hover{
  background:#b91c1c;
}

.button.is-current{
  border-color:#93c5fd;
  background:#eff6ff;
}

.flash{
  margin-bottom:18px;
  border-radius:18px;
  padding:14px 16px;
  border:1px solid transparent;
  font-size:14px;
  line-height:1.5;
}

.flash-success{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#047857;
}

.flash-error{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}

.metrics{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-bottom:20px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}


.dashboard-two-up{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.dashboard-subpanel{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.dashboard-mini-list,
.dashboard-comms-log-list{
  display:grid;
  gap:10px;
}

.dashboard-pattern-row,
.dashboard-comms-log-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.dashboard-pattern-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.dashboard-comms-log-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
}

@media (max-width: 1180px){
  .dashboard-two-up{
    grid-template-columns:1fr;
  }
}

.metric{
  padding:16px 18px;
  display:grid;
  gap:4px;
  align-items:start;
  min-height:96px;
  border-radius:18px;
}

.metric:hover{
  transform:translateY(-1px);
  transition:.2s ease;
}

.icon{
  display:none;
}

.metric small{
  display:block;
  color:var(--muted);
  margin-bottom:2px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.metric strong{
  font-size:24px;
  line-height:1.1;
}

.metric.metric-orange{
  background:#fff7ed;
  border-color:#fdba74;
}

.metric.metric-orange small,
.metric.metric-orange strong{
  color:#c2410c;
}

.metric.metric-blue{
  background:#eff6ff;
  border-color:#93c5fd;
}

.metric.metric-blue small,
.metric.metric-blue strong{
  color:#1d4ed8;
}

.metric.metric-purple{
  background:#f5f3ff;
  border-color:#c4b5fd;
}

.metric.metric-purple small,
.metric.metric-purple strong{
  color:#7c3aed;
}

.metric.metric-green{
  background:#ecfdf5;
  border-color:#86efac;
}

.metric.metric-green small,
.metric.metric-green strong{
  color:#15803d;
}

.metric.metric-neutral{
  background:#f8fafc;
  border-color:#dbe3ee;
}

.metric.metric-neutral small{
  color:#64748b;
}

.metric.metric-neutral strong{
  color:#334155;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1.1fr .95fr;
  gap:24px;
}

.archive-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.panel-head{
  padding:22px 22px 16px;
  border-bottom:1px solid rgba(219,227,238,.85);
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.panel-head h2{
  margin:0;
  font-size:20px;
}

.panel-head h3{
  margin:0;
  font-size:18px;
}

.panel-head p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.panel-body{
  padding:18px 22px 22px;
}

.stack{
  display:grid;
  gap:14px;
}

label{
  display:grid;
  gap:8px;
  font-size:14px;
  font-weight:600;
}

input,textarea,select{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
  color:var(--text);
  min-height:46px;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

input:hover,textarea:hover,select:hover{
  border-color:#bfccdc;
}

input:focus,textarea:focus,select:focus{
  border-color:#60a5fa;
}

textarea{
  min-height:110px;
  resize:vertical;
}

.filters{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}

[hidden]{display:none !important}

.inline-add{
  margin-top:-4px;
  margin-bottom:4px;
  padding:12px 14px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:#f8fafc;
}

.inline-add label{margin:0}

.job-list,
.archive-results{
  max-height:700px;
  overflow:auto;
  padding-right:4px;
}

.job-item,
.archive-result-card{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:#fff;
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:10px;
}

.job-item.active,
.archive-result-card.active{
  border-color:#93c5fd;
  background:#eff6ff;
}

.row-between{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.job-title{font-weight:700}
.job-subtitle{font-size:14px}

.job-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.job-list-empty{
  border:1px dashed var(--border);
  border-radius:20px;
  background:#f8fafc;
  padding:28px 20px;
  text-align:center;
}

.job-list-empty-title,
.empty-state-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.job-list-empty-text,
.empty-state-text{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  max-width:420px;
  margin:0 auto;
}

.empty-state{
  border:1px dashed var(--border);
  border-radius:20px;
  background:#f8fafc;
  padding:28px 20px;
  text-align:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
}

.badge.status-new{background:#f1f5f9;color:#334155;border-color:#cbd5e1}
.badge.status-assigned{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.badge.status-progress{background:#fef3c7;color:#b45309;border-color:#fde68a}
.badge.status-signoff{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.badge.status-submitted{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.badge.status-closed{background:#e5e7eb;color:#374151;border-color:#d1d5db}
.badge.priority-high{background:#ffe4e6;color:#be123c;border-color:#fecdd3}
.badge.priority-medium{background:#fef3c7;color:#b45309;border-color:#fde68a}
.badge.priority-low{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.badge.jobtype{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}

.badge.age-fresh{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.badge.age-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge.age-old{background:#fee2e2;color:#991b1b;border-color:#fecaca}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}

.info-box{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#fff;
}

.info-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.summary{
  border:1px solid var(--border);
  border-radius:18px;
  background:#f8fafc;
  padding:16px;
  margin-bottom:16px;
}

.summary p{
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.6;
}

.note-item,
.audit-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:14px;
}

.note-head,
.audit-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.note-body,
.audit-body{
  color:#334155;
  font-size:14px;
  line-height:1.5;
}

.tiny{
  font-size:12px;
  color:var(--muted);
}

.mt-14{margin-top:14px}
.mb-12{margin-bottom:12px}

.site-footer{
  margin-top:24px;
  border-top:1px solid var(--border);
  padding:22px 4px 8px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:24px;
  align-items:start;
}

.footer-left,
.footer-right{
  display:grid;
  gap:6px;
}

.footer-title{
  font-size:15px;
  font-weight:700;
}

.footer-meta,
.footer-copy{
  font-size:13px;
  color:var(--muted);
}

.footer-gdpr-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.footer-gdpr-text{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

/* Cleaned login page */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at top, rgba(37,99,235,.08), transparent 38%),
    linear-gradient(180deg,#eef4ff 0%,#f8fbff 52%,#f4f7fb 100%);
}

.login-shell{
  width:min(560px,100%);
  display:grid;
  gap:18px;
}

.login-shell-wide{
  width:min(1120px,100%);
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  align-items:start;
}

.login-hero,
.login-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.login-hero{
  padding:28px 28px 20px;
  text-align:center;
  display:grid;
  gap:14px;
}

.login-hero-polished{
  padding:34px;
  text-align:left;
  align-content:start;
  background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
}

.login-hero-copy{
  display:grid;
  gap:12px;
}
.login-logo-placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:72px;
  min-width:190px;
  padding:0 18px;
  border-radius:18px;
  border:1px dashed rgba(37,99,235,0.28);
  background:rgba(255,255,255,0.72);
  color:#1e3a8a;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
}


.login-hero .eyebrow{
  justify-content:center;
  margin-bottom:0;
}

.login-hero-polished .eyebrow{
  justify-content:flex-start;
}

.login-title{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.login-copy{
  margin:0 auto;
  max-width:420px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.login-hero-polished .login-copy{
  margin:0;
  max-width:56ch;
}

.login-card{
  padding:26px;
  display:grid;
  gap:18px;
}

.login-card-polished{
  padding:32px;
  align-content:start;
}

.login-card .section-title{
  margin:0;
  font-size:22px;
  line-height:1.2;
}

.login-card form.stack{
  gap:16px;
}

.login-card label{
  gap:8px;
  font-size:14px;
  font-weight:600;
}

.login-card input{
  height:48px;
  border-radius:14px;
  background:#fff;
}

.login-card .button{
  width:100%;
  min-height:48px;
  border-radius:14px;
  margin-top:4px;
}

.login-kicker,
.login-grid,
.login-tile,
.login-tile-title,
.login-tile-text,
.login-form-note{
  display:none;
}

.login-card-kicker{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
  font-weight:700;
  margin-bottom:8px;
}

.login-form-note-live{
  margin:10px 0 0;
  color:var(--muted);
  line-height:1.55;
  font-size:14px;
}

.login-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:6px;
}

.login-feature-card{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(6px);
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:8px;
}

.login-feature-title{
  font-size:14px;
  font-weight:700;
}

.login-feature-text{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.login-assist-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding-top:4px;
}

.login-muted-link{
  color:var(--muted);
  font-size:14px;
}

.login-muted-link.is-disabled{
  opacity:.7;
  cursor:not-allowed;
  text-decoration:line-through;
}

.login-muted-meta{
  color:var(--muted);
  font-size:13px;
}

.inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}

.lookup-list{
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}

.lookup-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}

.grid-single{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.mt-24{margin-top:24px}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.team-chip{
  border:1px solid var(--border);
  background:#f8fbff;
  border-radius:18px;
  padding:18px;
  font-weight:700;
  text-align:center;
}

.form-grid.two-up{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.form-note-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#f8fbff;
  color:#516173;
}

.lookup-copy{
  display:grid;
  gap:4px;
}

.lookup-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.layout-two-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.info-box,
.lookup-item,
.form-note-box,
.summary,
.empty-state,
.job-list-empty{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

.info-box{
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}

.info-box > :last-child{
  color:#1e293b;
  font-weight:600;
}

.lookup-item{
  border-radius:18px;
  padding:16px 18px;
}

.lookup-copy strong,
.job-title{
  color:#0f172a;
}

.tiny{
  line-height:1.5;
}

.form-note-box{
  line-height:1.55;
}

.admin-split-item{
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.admin-tight-actions{
  margin-left:auto;
}

.admin-inline-form{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin:0;
}

.admin-inline-chip-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
}

.admin-callout{
  border-radius:18px;
  border:1px solid var(--border);
  padding:16px 18px;
}

.admin-callout-warning{
  background:linear-gradient(180deg,#fff7ed 0%,#fffbf5 100%);
  border-color:#fdba74;
  color:#9a3412;
}

.admin-subsection-head{
  padding:0 0 10px;
  background:transparent;
  border-bottom:none;
}

.admin-subsection-body{
  padding:0;
}

.admin-accordion-card{
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.admin-accordion-card:hover{
  border-color:#cbd8e6;
}

.admin-accordion-card .panel-head{
  transition:background-color .2s ease;
}

.admin-accordion-card .panel-head:hover{
  background:linear-gradient(180deg,#ffffff 0%,#eef5ff 100%);
}

.admin-accordion-card.is-open{
  border-color:#c7d8ec;
}

.admin-warning-banner .panel-body{
  padding:16px 18px;
}

.admin-summary-card .panel-body{
  padding-top:20px;
}

.danger-zone .panel-head{
  background:linear-gradient(180deg,#fff7f7 0%,#fff1f1 100%);
  border-bottom-color:#f7c4c4;
}


@media (max-width:1200px){
  .grid,
  .archive-grid,
  .layout-two-col{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .topbar-right{
    width:100%;
  }

  .session-box{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }

  .actions{
    justify-content:flex-start;
  }

  .site-footer{
    grid-template-columns:1fr;
  }

  .inline-form{
    grid-template-columns:1fr;
  }

  .team-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .wrap{
    padding:16px;
  }

  .metrics{
    grid-template-columns:1fr;
  }

  h1{
    font-size:28px;
  }

  .login-page{
    padding:16px;
  }

  .login-shell{
    gap:14px;
  }

  .login-shell-wide{
    grid-template-columns:1fr;
  }

  .login-feature-grid{
    grid-template-columns:1fr;
  }

  .login-assist-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .login-hero{
    padding:22px 18px 18px;
  }

  .login-card{
    padding:20px 18px;
  }

  .login-title{
    font-size:28px;
  }

  .login-copy{
    font-size:14px;
  }

  .login-card .section-title{
    font-size:20px;
  }

  .team-grid{
    grid-template-columns:1fr;
  }
}

.job-item-alert {
    border-left: 4px solid #d97706;
}

.badge-alert-under18 {
    background: #b91c1c;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #7f1d1d;
    animation: under18-pulse 1.2s infinite;
}

.badge-alert-bodycam {
    background: #7c3aed;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid #5b21b6;
}

.job-item-under18 {
    border-left: 5px solid #b91c1c;
    background: #fff5f5;
}

.job-item-bodycam {
    border-left: 5px solid #7c3aed;
}

@keyframes under18-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.45);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 6px rgba(185, 28, 28, 0.00);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.00);
    }
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dbe3ea;
    border-radius: 10px;
    background: #fff;
}

.danger-zone {
    border: 2px solid #d92d20;
    background: #fff5f5;
}

.danger-form + .danger-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f1c0c0;
}

.danger-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.danger-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.button-danger {
    background: #b42318;
    color: #fff;
    border: 1px solid #b42318;
}

.button-danger:hover {
    background: #912018;
    border-color: #912018;
}

.login-access-notice {
    margin: 16px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.45);
    color: #111111;
    font-size: 0.92rem;
    line-height: 1.45;
}

.login-access-notice strong {
    color: #111111;
}


.logout-inline-form {
    display: inline-flex;
    margin: 0;
}

.logout-inline-form .button {
    margin: 0;
}


.recovery-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.recovery-code-item,
.mono-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.08em;
}

.recovery-code-item {
  border: 1px dashed rgba(146, 64, 14, 0.35);
  background: #fff7ed;
  color: #7c2d12;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  text-align: center;
}

.mono-block {
  display: block;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 6px;
  word-break: break-all;
}

.danger-outline {
  border-color: #dc2626 !important;
  color: #991b1b !important;
}

.badge.status-review {
  background: #f5f3ff;
  color: #6d28d9;
  border-color: #ddd6fe;
}

.security-page-stack {
  width: 100%;
}

.security-account-strip {
  margin-bottom: 8px;
}

.security-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.security-stat-card .panel-body {
  gap: 4px;
}

.security-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.security-inline-note-box,
.security-manual-key-box,
.security-action-card,
.security-setup-box {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
}

.security-inline-note-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #f8fafc;
}

.security-step-list {
  display: grid;
  gap: 10px;
}

.security-step-list.compact {
  margin-bottom: 2px;
}

.security-step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 12px 14px;
}

.security-step-item strong,
.security-action-copy strong,
.security-manual-key-box strong,
.security-inline-note-box strong {
  display: block;
  margin-bottom: 4px;
}

.security-step-number {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 28px;
}

.security-step-number-live {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.security-manual-key-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.security-details summary {
  cursor: pointer;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.security-details .mono-block {
  margin-top: 10px;
}

.security-action-card {
  display: grid;
  gap: 14px;
}

.security-action-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.security-recovery-reveal {
  border-color: #f59e0b;
  background: #fffbeb;
}

.security-recovery-reveal .panel-head h2 {
  color: #92400e;
}

.security-recovery-reveal .panel-head p {
  color: #78350f;
}

.security-empty-state-left {
  text-align: left;
}

@media (max-width: 1100px) {
  .security-overview-grid,
  .security-two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .security-overview-grid,
  .security-two-up {
    grid-template-columns: 1fr;
  }
}


.security-setup-box {
  display: grid;
  gap: 14px;
}

.security-qr-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
  padding: 14px;
}

.security-qr-frame {
  width: 252px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.security-qr-canvas {
  width: 228px;
  min-height: 228px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}

.security-qr-canvas svg,
.security-qr-canvas canvas,
.security-qr-canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.security-qr-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.security-action-row-split {
  justify-content: flex-start;
}

@media (max-width: 700px) {
  .security-qr-shell {
    grid-template-columns: 1fr;
  }

  .security-qr-frame,
  .security-qr-canvas {
    width: 100%;
  }
}