:root {
  --bg:#eef3f8;
  --bg2:#f8fafc;
  --text:#172033;
  --muted:#64748b;
  --card:#ffffff;
  --border:#d8e0ea;
  --border-strong:#b6c3d4;
  --primary:#0f766e;
  --primary-dark:#115e59;
  --primary-soft:#e6fffb;
  --danger:#fff1f2;
  --danger-border:#fb7185;
  --warning:#fff7ed;
  --warning-border:#fb923c;
  --success:#ecfdf5;
  --success-border:#34d399;
  --blue:#2563eb;
  --blue-soft:#eff6ff;
  --shadow:0 18px 45px rgba(15, 23, 42, .08);
}
* { box-sizing: border-box; }
body {
  margin:0;
  min-height:100vh;
  background: radial-gradient(circle at top left, #dff7f3 0, rgba(223,247,243,0) 36%), linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}
a { color: var(--primary-dark); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:16px 28px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(12px);
}
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg, var(--primary), #38bdf8); color:white; font-weight:900; letter-spacing:-.04em; }
.brand strong { display:block; font-size:1.05rem; }
.brand small { display:block; color:var(--muted); font-size:.82rem; margin-top:1px; }
.nav-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.nav-links a { color:#334155; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:10px; }
.nav-links a:hover { background:#f1f5f9; color:#0f172a; }
.container { max-width: 1180px; margin: 26px auto; padding: 0 18px 56px; }
.hero { display:grid; grid-template-columns: minmax(0, 1fr) 330px; gap:22px; align-items:stretch; margin:24px 0 18px; }
.hero, .page-header-row { background:linear-gradient(135deg, #ffffff 0%, #f4fbfa 100%); border:1px solid var(--border); border-radius:24px; padding:26px; box-shadow:var(--shadow); }
.page-header-row { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.hero-panel { background:var(--primary-soft); border:1px solid #99f6e4; border-radius:18px; padding:18px; display:flex; flex-direction:column; justify-content:center; gap:8px; color:#134e4a; }
.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:.08em; color:var(--primary-dark); font-weight:900; font-size:.78rem; }
h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.05; margin:0 0 10px; letter-spacing:-.04em; }
h2 { font-size: 1.15rem; margin: 0 0 14px; letter-spacing:-.01em; }
.lead { color:#475569; font-size:1.08rem; max-width: 820px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px; margin:18px 0; box-shadow:0 10px 28px rgba(15,23,42,.05); }
.form-grid-main { display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap:18px; align-items:start; }
.side-card { position:sticky; top:90px; }
.check-list { padding-left:0; list-style:none; }
.check-list li { margin:10px 0; padding-left:28px; position:relative; }
.check-list li::before { content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:999px; background:var(--primary-soft); color:var(--primary-dark); display:inline-flex; align-items:center; justify-content:center; font-weight:900; }
.danger-banner, .error-box, .warning-box, .success-box, .info-box { border-radius:14px; padding:13px 16px; margin: 14px 0; }
.top-warning { margin-top:0; }
.danger-banner, .error-box { background:var(--danger); border:1px solid var(--danger-border); color:#8f1230; }
.warning-box { background:#fff7d6; border:1px solid #e1b842; color:#4d3a00; }
.success-box { background:var(--success); border:1px solid var(--success-border); color:#064e3b; }
.info-box { background:#ecfeff; border:1px solid #67e8f9; color:#164e63; }
label { display:block; font-weight:750; margin: 14px 0; color:#243145; }
input, select, textarea { display:block; width:100%; padding:12px 13px; border:1px solid var(--border-strong); border-radius:12px; margin-top:7px; font:inherit; background:white; color:var(--text); transition:border .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(15,118,110,.12); }
textarea { resize: vertical; }
.grid2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grid3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
button, .button-link { display:inline-flex; align-items:center; justify-content:center; border:0; background:var(--primary); color:white; padding:12px 18px; border-radius:12px; font-weight:850; text-decoration:none; cursor:pointer; box-shadow:0 10px 22px rgba(15,118,110,.18); }
button:hover, .button-link:hover { background:var(--primary-dark); }
.button-link.secondary { background:#e2e8f0; color:#0f172a; box-shadow:none; }
.button-link.secondary:hover { background:#cbd5e1; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; }
.checkbox-row { display:flex; gap:10px; align-items:flex-start; padding:14px; border:1px solid var(--danger-border); border-radius:14px; background:var(--danger); margin:0; }
.checkbox-row input { width:auto; margin-top:4px; }
.sticky-submit { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.help, .muted { color:var(--muted); font-size:.94rem; }
.status-line { background:#eef2ff; border:1px solid #c7d2fe; color:#1e1b4b; border-radius:14px; padding:11px 15px; margin: 12px 0 16px; }
.dot-separator { color:#94a3b8; margin:0 8px; }
.result-layout { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:20px; align-items:start; }
.result-card { margin-top:0; }
.side-stack { position:sticky; top:90px; }
.image-card img { width:100%; border-radius:14px; border:1px solid var(--border); display:block; background:#f8fafc; }
.stage-pill { display:inline-block; font-size:clamp(1.6rem, 4vw, 2.4rem); font-weight:950; border-radius:999px; background:#dff7f3; color:#134e4a; padding:12px 22px; margin: 8px 0; letter-spacing:-.03em; }
.grade-summary { border: 2px solid #5eead4; background:linear-gradient(135deg, #f0fdfa, #ecfeff); border-radius:20px; padding:20px; margin-bottom:20px; }
.grade-label { text-transform:uppercase; letter-spacing:.06em; font-weight:950; font-size:.8rem; color:#0f766e; }
.confidence-line { font-size:1.06rem; margin-top: 4px; }
.grading-reminder { background:#fffbeb; border:1px solid #f59e0b; color:#78350f; border-radius:14px; padding:13px 15px; margin-top:18px; }
.note { background:#f8fafc; border-left:4px solid #94a3b8; padding:14px; border-radius:10px; white-space:pre-wrap; }
pre { white-space:pre-wrap; overflow:auto; background:#0f172a; color:#e2e8f0; padding:16px; border-radius:14px; font-size:.92rem; }
details.tech-details summary { cursor:pointer; font-weight:850; }
details.tech-details[open] summary { margin-bottom: 10px; }
.expected-line { margin-top: .75rem; font-size: 1rem; }
.match-ok, .match-bad { display:inline-block; margin-left:.45rem; padding:.15rem .5rem; border-radius:999px; font-weight:850; font-size:.85rem; }
.match-ok { background:#dcfce7; color:#166534; }
.match-bad { background:#ffedd5; color:#9a3412; }
.stage23-warning { background:var(--warning); border:2px solid var(--warning-border); color:#7c2d12; border-radius:16px; padding:15px 17px; margin:16px 0; font-size:1.02rem; }
.meta-list { display:grid; grid-template-columns:110px 1fr; gap:8px 12px; margin:0; }
.meta-list dt { color:var(--muted); font-weight:800; }
.meta-list dd { margin:0; word-break:break-word; }
.table-wrap { overflow:auto; }
.history-table { width:100%; border-collapse:collapse; font-size:.94rem; }
.history-table th, .history-table td { padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.history-table th { color:#475569; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; background:#f8fafc; position:sticky; top:0; }
.history-table tr:hover td { background:#fbfdff; }
.mini-pill { display:inline-block; padding:.25rem .55rem; border-radius:999px; background:#e0f2fe; color:#075985; font-weight:850; }
.table-link { font-weight:850; text-decoration:none; }
.empty-state { text-align:center; padding:36px 16px; }
.login-hero { max-width:540px; margin:18px auto 12px; animation: loginFadeUp .55s ease-out both; }
.login-panel { background:linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%); border:1px solid var(--border); border-radius:20px; padding:18px 22px; box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden; }
.login-panel::before { content:''; position:absolute; inset:-60px auto auto -60px; width:150px; height:150px; background:radial-gradient(circle, rgba(20,184,166,.18), rgba(20,184,166,0) 70%); animation: softPulse 2.8s ease-in-out infinite; }
.login-icon { width:34px; height:34px; border-radius:12px; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--primary), #38bdf8); color:white; font-size:1rem; box-shadow:0 8px 20px rgba(15,118,110,.18); }
.login-panel h1 { font-size:clamp(1.45rem, 3vw, 2rem); margin:0; letter-spacing:-.03em; }
.login-card { max-width: 540px; margin:0 auto; animation: loginFadeUp .7s ease-out .08s both; }
@keyframes loginFadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes softPulse { 0%, 100% { transform:scale(1); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@media (max-width: 900px) {
  .hero, .form-grid-main, .result-layout { grid-template-columns:1fr; }
  .side-card, .side-stack { position:static; }
  .sticky-submit { display:block; }
  .sticky-submit button { margin-top:14px; width:100%; }
}
@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns:1fr; }
  .topbar { position:static; align-items:flex-start; flex-direction:column; padding:14px 16px; }
  .nav-links { width:100%; }
  .nav-links a { padding:7px 8px; }
  .container { margin-top:16px; padding:0 12px 40px; }
  .hero, .page-header-row { padding:20px; border-radius:18px; }
  .page-header-row { display:block; }
  .button-row { margin-top:12px; }
}

.bottom-compliance-notice { max-width:1180px; margin: 10px auto 24px; padding: 12px 18px; border-radius: 14px; background: var(--danger); border:1px solid var(--danger-border); color:#8f1230; font-size:.92rem; line-height:1.45; }

.camera-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #f8fafc; }
.camera-panel-header h3 { margin: 0 0 4px; font-size: 1rem; }
.camera-actions { display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0; }
.camera-actions .button-link { box-shadow:none; }
.camera-status { margin: 8px 0 12px; }
.camera-preview-grid { display:grid; grid-template-columns: minmax(0, 1fr); gap:12px; }
.camera-video, .captured-preview { width:100%; max-height:420px; object-fit:contain; border:1px solid var(--border-strong); border-radius:14px; background:#0f172a; }
.captured-preview { background:#f8fafc; }
@media (max-width: 720px) {
  .camera-actions .button-link { width:100%; }
}

.grid4 { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 18px; }
h3 { margin: 24px 0 10px; font-size: 1rem; color:#334155; }
details.form-card > summary { cursor:pointer; font-size:1.15rem; }
.details-section { margin-top:16px; }
.checkbox-option-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px 12px; margin:8px 0 16px; }
.checkbox-option { display:flex; align-items:flex-start; gap:8px; margin:0; padding:9px 10px; border:1px solid var(--border); border-radius:10px; background:#f8fafc; font-weight:650; }
.checkbox-option input { width:auto; margin:3px 0 0; }
@media (max-width: 900px) { .grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .checkbox-option-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid4, .checkbox-option-grid { grid-template-columns:1fr; } }


/* ahrwound4 structured wound-tracking additions */
.filter-card { margin-bottom: 1rem; }
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  align-items: end;
}
.filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.wide-table-wrap {
  overflow-x: auto;
}
.structured-history-table {
  min-width: 1600px;
}
.structured-history-table th,
.structured-history-table td {
  white-space: nowrap;
  vertical-align: top;
}
.model-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flagged-row {
  background: #fff9e8;
}
.flag-pill {
  display: inline-block;
  margin: 0.12rem;
  padding: 0.14rem 0.4rem;
  border-radius: 999px;
  background: #ffe8b3;
  border: 1px solid #e7be64;
  font-size: 0.78rem;
  font-weight: 700;
}
.calculated-box {
  margin: 0.75rem 0 1rem;
  padding: 0.8rem;
  border: 1px solid #c7d6e9;
  border-radius: 12px;
  background: #f8fbff;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.graph-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d3dce8;
  border-radius: 12px;
  background: #fff;
  padding: 0.5rem;
  margin: 1rem 0;
}
.graph-wrap svg {
  width: 100%;
  min-width: 650px;
  height: auto;
}
.axis-line {
  stroke: #8fa1b8;
  stroke-width: 1.5;
}
.graph-line {
  stroke: #20466f;
  stroke-width: 3;
}
.graph-point {
  fill: #20466f;
}
.graph-label {
  fill: #40556f;
  font-size: 12px;
}


/* ahrwound5 admin editing */
.form-card .grid3 label .help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
}