:root {
  --sr-yellow: #ffd400;
  --sr-orange: #ff8f00;
  --sr-red: #e53935;
  --sr-dark: #0f172a;
  --sr-ink: #1f2937;
  --sr-muted: #667085;
  --sr-line: #d9e3ee;
  --sr-cyan: #20d4ff;
}

#spine-report-app { font-family: Arial, Helvetica, sans-serif; color: var(--sr-ink); }
.sr-app-wrap { display: grid; grid-template-columns: 350px 1fr; gap: 26px; align-items: start; }

.sr-panel, .sr-report-card {
  background: #fff;
  border: 1px solid var(--sr-line);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.sr-brand-band {
  position: absolute; inset: 0 auto auto 0; height: 6px; width: 100%;
  background: linear-gradient(90deg, var(--sr-cyan), #6ae2ff 34%, var(--sr-orange) 68%, var(--sr-red));
}

.sr-sub { margin-top: -6px; color: var(--sr-muted); line-height: 1.45; }
.sr-label { display: block; margin: 14px 0 6px; font-weight: 700; }

.sr-input, .sr-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 13px;
  border: 1px solid #cdd9e5; border-radius: 12px; font: inherit; background: #fff;
}
.sr-input:focus, .sr-textarea:focus {
  outline: none; border-color: var(--sr-cyan); box-shadow: 0 0 0 3px rgba(32, 212, 255, 0.15);
}
.sr-textarea { resize: vertical; }

.sr-severity { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-pill, .sr-btn {
  appearance: none; border: 1px solid #c7d2dc; background: #fff; border-radius: 999px;
  padding: 10px 14px; cursor: pointer; font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sr-pill:hover, .sr-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08); }
.sr-pill.is-active { outline: 2px solid var(--sr-dark); }
.sr-pill-mild { background: linear-gradient(180deg, #fff7a8, var(--sr-yellow)); border-color: #e3b600; }
.sr-pill-moderate { background: linear-gradient(180deg, #ffb74d, var(--sr-orange)); border-color: #e27b00; color: #fff; }
.sr-pill-severe { background: linear-gradient(180deg, #ff7961, var(--sr-red)); border-color: #cf2f2f; color: #fff; }
.sr-pill-clear { background: #f8fafc; }
.sr-btn-primary { background: linear-gradient(180deg, #172554, var(--sr-dark)); color: #fff; border-color: var(--sr-dark); }

.sr-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; }
.sr-legend i {
  display: inline-block; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%;
  vertical-align: -3px; border: 1px solid rgba(0,0,0,0.16);
}
.sr-legend i.mild { background: var(--sr-yellow); }
.sr-legend i.moderate { background: var(--sr-orange); }
.sr-legend i.severe { background: var(--sr-red); }

.sr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sr-help { margin-top: 14px; color: var(--sr-muted); font-size: 14px; line-height: 1.5; }

.sr-report-card {
  max-width: 980px;
  background:
    radial-gradient(circle at top right, rgba(32, 212, 255, 0.15), transparent 240px),
    linear-gradient(180deg, #ffffff, #fbfdff);
}
.sr-report-page { padding: 8px 0 16px; }
.sr-cover-header {
  display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 14px;
}
.sr-clinic-name { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.sr-clinic-sub { color: var(--sr-muted); margin-top: 4px; font-size: 16px; }

.sr-meta {
  text-align: right; font-size: 14px; line-height: 1.8; background: rgba(255,255,255,0.9);
  border: 1px solid #e6eef6; border-radius: 14px; padding: 10px 14px;
}

.sr-summary-box {
  border: 1px solid #dce8f3; background: linear-gradient(180deg, #eefaff 0%, #ffffff 100%);
  border-radius: 24px; padding: 22px; overflow: hidden; margin-bottom: 20px;
}
.sr-summary-ribbon {
  display: inline-block; padding: 7px 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--sr-cyan), #7ce7ff); color: #082f49; font-weight: 700; font-size: 13px; margin-bottom: 12px;
}
.sr-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.sr-severity-showcase, .sr-mini-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.sev-pill {
  display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 700; border: 1px solid rgba(0,0,0,0.12);
}
.sev-pill.mild { background: var(--sr-yellow); color: #5a4900; }
.sev-pill.moderate { background: var(--sr-orange); color: #fff; }
.sev-pill.severe { background: var(--sr-red); color: #fff; }

.sr-figure {
  border: 1px solid #dfeaf4;
  background:
    radial-gradient(circle at 90% 10%, rgba(32, 212, 255, 0.12), transparent 160px),
    linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
  border-radius: 24px;
  padding: 12px;
}
.sr-figure-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 4px 6px 10px;
}
.sr-figure-title { font-size: 17px; font-weight: 700; }
.sr-figure-sub { color: var(--sr-muted); font-size: 13px; }

.sr-illustration-frame {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.sr-illustration-frame img {
  width: 100%;
  display: block;
  height: auto;
}
.sr-hotspots {
  position: absolute;
  inset: 0;
}
.sr-hotspot {
  position: absolute;
  background: rgba(255,255,255,0.01);
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sr-hotspot:hover {
  border-color: rgba(32,212,255,0.8);
  box-shadow: 0 0 0 4px rgba(32,212,255,0.15);
}
.sr-hotspot.sev-mild { background: rgba(255,212,0,0.45); border-color: rgba(227,182,0,0.95); }
.sr-hotspot.sev-moderate { background: rgba(255,143,0,0.45); border-color: rgba(226,123,0,0.95); }
.sr-hotspot.sev-severe { background: rgba(229,57,53,0.45); border-color: rgba(207,47,47,0.95); }

.sr-section-title { font-size: 21px; font-weight: 700; margin: 20px 0 14px; letter-spacing: -0.01em; }
.sr-mt { margin-top: 24px; }
.sr-notes-box {
  margin-top: 16px; background: #fbfdff; border: 1px solid #dfeaf4; border-radius: 14px; padding: 14px; line-height: 1.6;
}
.sr-findings-table {
  border: 1px solid #dfeaf4; border-radius: 16px; overflow: hidden; background: #fff;
}
.sr-table { width: 100%; border-collapse: collapse; }
.sr-table th, .sr-table td {
  padding: 12px 14px; border-bottom: 1px solid #edf2f7; text-align: left;
}
.sr-table th { background: linear-gradient(180deg, #f5fbff, #eef7fc); font-weight: 700; }
.sr-badge {
  display: inline-block; padding: 6px 11px; border-radius: 999px; font-weight: 700; border: 1px solid rgba(0,0,0,0.12);
}
.sev-mild.sr-badge { background: var(--sr-yellow); color: #5a4900; }
.sev-moderate.sr-badge { background: var(--sr-orange); color: #fff; }
.sev-severe.sr-badge { background: var(--sr-red); color: #fff; }

@media (max-width: 980px) {
  .sr-app-wrap { grid-template-columns: 1fr; }
  .sr-cover-header, .sr-figure-head { flex-direction: column; }
  .sr-meta { text-align: left; }
  .sr-summary-grid { grid-template-columns: 1fr; }
}

@media print {
  .sr-controls { display: none !important; }
  .sr-app-wrap { grid-template-columns: 1fr; }
  .sr-report-card { max-width: none; box-shadow: none; border: none; padding: 0; background: #fff; }
}