:root{
  --bg:#070b10;
  --panel:#0b1220;
  --panel2:#0f172a;
  --teal:#22d3ee;
  --teal2:#2dd4bf;
  --mag:#ff4fd8;
  --text:#e6edf3;
  --muted:#9aa4b2;
  --line:#1f2a3a;
  --good:#2dd4bf;
  --warn:#fbbf24;
  --bad:#fb7185;
}
html,body{height:100%;}
body{
  background: radial-gradient(1200px 700px at 20% 0%, rgba(34,211,238,.12), transparent 55%),
              radial-gradient(1000px 650px at 90% 20%, rgba(255,79,216,.10), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:var(--teal); text-decoration:none;}
a:hover{color:var(--teal2); text-decoration:underline;}
.navbar{
  background:#05070c;
  border-bottom:1px solid var(--line);
}
.brand-glow{
  color:var(--teal);
  text-shadow: 0 0 12px rgba(34,211,238,.25);
}
.card, .panel{
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.hrline{height:1px; background:var(--line); border:none; opacity:1;}
.smallcaps{letter-spacing:.10em; text-transform:uppercase; font-size:.78rem; color:var(--muted);}
.text-muted2{color:var(--muted)!important;}
.btn-teal{
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border:none; color:#041018; font-weight:800;
  border-radius:14px;
}
.btn-teal:hover{filter:brightness(1.05);}
.btn-mag{
  background: linear-gradient(90deg, var(--mag), #ff7ae6);
  border:none; color:#1b0a15; font-weight:800;
  border-radius:14px;
}
.badge-teal{background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.35); color:var(--teal);}
.badge-mag{background:rgba(255,79,216,.12); border:1px solid rgba(255,79,216,.35); color:var(--mag);}
.form-control, .form-select{
  background:#071224; color:var(--text); border:1px solid var(--line);
  border-radius:14px;
}
.form-control:focus, .form-select:focus{
  border-color:rgba(34,211,238,.55);
  box-shadow:0 0 0 .2rem rgba(34,211,238,.12);
}
.kbd-hint{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  padding:.12rem .4rem;
  border-radius:10px;
  color:var(--muted);
}
.focus-ring:focus{outline:none; box-shadow:0 0 0 .25rem rgba(34,211,238,.18)!important;}
/* ADHD-friendly: reduce cognitive load */
.readable{max-width:72ch; line-height:1.6;}
.chunk{padding:16px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02);}
.progress{height:10px; border-radius:999px; background:#0a1220; border:1px solid var(--line);}
.progress-bar{background:linear-gradient(90deg, var(--teal), var(--teal2));}

/* Consistent action buttons across MMM */
.btn-outline-teal{
  background: transparent;
  border:1px solid rgba(34,211,238,.55);
  color: var(--teal);
  font-weight:800;
  border-radius:14px;
}
.btn-outline-teal:hover{background:rgba(34,211,238,.10); color:var(--teal2); text-decoration:none;}

.btn-outline-mag{
  background: transparent;
  border:1px solid rgba(255,79,216,.55);
  color: var(--mag);
  font-weight:800;
  border-radius:14px;
}
.btn-outline-mag:hover{background:rgba(255,79,216,.10); color:#ff7ae6; text-decoration:none;}

/* Canonical Dashboard button */
.btn-dashboard{
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border:none; color:#041018; font-weight:900;
  border-radius:999px;
  padding:.5rem .95rem;
}
.btn-dashboard:hover{filter:brightness(1.05); text-decoration:none;}

/* Canonical Details button (first action inside cards) */
.btn-mm-details{
  background: linear-gradient(90deg, var(--teal), var(--teal2));
  border:none; color:#041018; font-weight:900;
  border-radius:999px;
  padding:.45rem .9rem;
}
.btn-mm-details:hover{filter:brightness(1.05); text-decoration:none;}

.mmm-skip-link{
  position:absolute;
  left:12px;
  top:-48px;
  z-index:2000;
  padding:.65rem .9rem;
  border-radius:12px;
  background:#ffffff;
  color:#041018;
  font-weight:800;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.mmm-skip-link:focus{
  top:12px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid rgba(34,211,238,.9);
  outline-offset:2px;
  box-shadow:0 0 0 .25rem rgba(34,211,238,.18)!important;
}

body,
.form-control,
.form-select,
.btn,
.card,
.panel{
  line-height:1.5;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}


.mmm-shell{max-width:1280px;}
.mmm-shell--narrow{max-width:920px;}
.mmm-page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);
  gap:1.25rem;
  padding:1.75rem;
  margin-bottom:1.25rem;
  background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(11,18,32,.96));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.mmm-page-hero__title{font-size:clamp(2rem, 3vw, 3rem); line-height:1.05; font-weight:800; margin:0 0 .4rem;}
.mmm-page-hero__desc{max-width:70ch; color:var(--muted); font-size:1.02rem;}
.mmm-page-hero__meta,
.mmm-chip-row{display:flex; flex-wrap:wrap; gap:.65rem; align-items:center;}
.mmm-stat-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--text);
  font-size:.95rem;
}
.mmm-section-card{padding:1.35rem; border-radius:22px;}
.mmm-section-card--tight{padding:1rem 1.1rem;}
.mmm-action-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;}
.mmm-steps-grid .card,
.mmm-admin-grid .card,
.mmm-prescription-grid .card{height:100%;}
.mmm-card-title{font-size:1.4rem; line-height:1.15; font-weight:700; margin-bottom:.5rem;}
.mmm-card-copy{color:var(--muted); font-size:1rem; line-height:1.6;}
.mmm-pre{white-space:pre-wrap; word-break:break-word; max-height:560px; overflow:auto;}
.mmm-table-card .table{margin-bottom:0;}
.mmm-form-intro{max-width:68ch; color:var(--muted);}
.mmm-inline-help{color:var(--muted); font-size:.95rem;}
.mmm-grid-fit{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
@media (max-width: 991.98px){
  .mmm-page-hero{grid-template-columns:1fr; padding:1.25rem;}
}