.cf-view { margin-inline: auto; max-width: 1100px; color: #173353; }
.cf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 20px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid #204e78;
  border-radius: 24px;
  background: radial-gradient(ellipse at 0% 105%, #247d90 0, transparent 55%), linear-gradient(115deg, #153a61, #102341 75%);
  box-shadow: 0 14px 36px #17355324;
  color: #fff;
}
.cf-hero::after {
  position: absolute;
  z-index: -1;
  inset: -160px auto auto -75px;
  width: 340px;
  height: 340px;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  box-shadow: 0 0 0 26px #ffffff09, 0 0 0 58px #ffffff09;
  content: '';
  pointer-events: none;
}
.cf-eyebrow { color: #3c5e7f; font-size: 13px; font-weight: 800; }
.cf-hero .cf-eyebrow { color: #fbe3a4; }
.cf-hero h2 { margin: 7px 0; color: #fff; font-size: clamp(25px, 4vw, 40px); line-height: 1.35; }
.cf-hero p { margin: 6px 0 0; color: #edf6ff; line-height: 1.7; }
.cf-hero .cf-hero-name { color: #fff; font-size: clamp(20px, 3vw, 30px); font-weight: 800; }
.cf-card-grid, .cf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.cf-panel, .cf-metric, .cf-trip-grid .sp-panel {
  min-width: 0;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid #dce7f2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px #1735530b;
  overflow-wrap: anywhere;
}
.cf-content > .cf-panel, .cf-content > .cf-metrics { margin-bottom: 16px; }
.cf-panel h3, .cf-trip-grid h3 { margin: 0 0 10px; color: #153e6b; font-size: 19px; }
.cf-panel .cf-badge + h3 { margin-top: 10px; }
.cf-metric { display: grid; gap: 4px; border-top: 3px solid #326593; }
.cf-metric-paid { border-top-color: #177353; background: #f2fbf7; }
.cf-metric span, .cf-caption { color: #48637e; font-size: 14px; }
.cf-metric strong { color: #163e68; font-size: clamp(19px, 3vw, 27px); }
.cf-progress { width: 100%; height: 12px; margin: 0 0 14px; accent-color: #177353; }
.cf-payment-deadline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: #f2f7fc; }
.cf-payment-deadline h3 { margin-bottom: 4px; }
.cf-payment-deadline strong { padding: 6px 12px; border-radius: 10px; background: #e0ecf9; color: #153e6b; font-variant-numeric: tabular-nums; }
.cf-payment-overdue strong { background: #fdecef; color: #a12842; }
.cf-empty { padding: 26px 18px; border: 1px dashed #abc2da; border-radius: 16px; background: #f7fbff; color: #385876; text-align: center; }
.cf-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.cf-item + .cf-item { border-top: 1px solid #e3ebf4; }
.cf-item p, .cf-caption { margin: 4px 0; }
.cf-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eaf2ff; color: #214c79; font-size: 13px; font-weight: 800; }
.cf-positive { background: #e3f5eb; color: #166044; }
.cf-negative { background: #fdecef; color: #a12842; }
.cf-test-badge { background: #fff4d6; color: #674609; }
.cf-ratings { display: grid; gap: 8px; }
.cf-ratings div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #f3f7fc; }
.cf-ratings dd { margin: 0; font-weight: 800; }
.cf-prose, .cf-credentials { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
.cf-form { display: grid; align-content: start; gap: 12px; }
.cf-form > button { justify-self: start; }
.cf-field { display: grid; gap: 5px; min-width: 0; color: #234b71; font-weight: 700; }
.cf-field :is(input, select, textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #b9cde2; border-radius: 10px; background: #fcfdff; color: #173353; font: inherit; }
.cf-checkbox { display: flex; align-items: flex-start; gap: 9px; }
.cf-checkbox input { width: 18px; height: 18px; margin-top: 4px; flex: 0 0 18px; accent-color: #235a89; }
.cf-student-picker { max-width: 420px; margin-bottom: 16px; }
.cf-test-note { padding: 8px 14px; border-radius: 10px; background: #fff4d6; color: #674609; }
.cf-account-action { display: block; margin-top: 6px; }
.cf-message { margin: 0; color: #254f73; }
.cf-message:empty { display: none; }
.cf-section-title { margin: 20px 0 10px; }
.cf-dialog { position: fixed; inset: 0; margin: auto; width: min(520px, calc(100% - 24px)); max-height: 90dvh; padding: 20px; border: 1px solid #b9cde2; border-radius: 20px; color: #173353; }
.cf-dialog::backdrop { background: #0c2346aa; }
.cf-dialog form { display: grid; gap: 10px; }
.cf-dialog h3, .cf-dialog p { margin: 0; }
.cf-sign-pad { display: block; width: 100%; height: 145px; border: 2px dashed #8eaac4; border-radius: 12px; background: #f8fbff; touch-action: none; cursor: crosshair; }
.cf-view .sp-actions, .cf-dialog .sp-actions, .cf-trip-grid .sp-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.cf-trip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cf-trip-grid .sp-span-two { grid-column: span 2; }
.cf-trip-grid .sp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-trip-grid .sp-kv > div { padding: 9px 11px; border-radius: 10px; background: #f2f7fc; }
.cf-trip-grid .sp-kv small { display: block; color: #48637e; }
.cf-trip-grid .sp-progress { height: 9px; border-radius: 10px; overflow: hidden; background: #e5edf5; }
.cf-trip-grid .sp-progress span { display: block; height: 100%; background: #21835b; }
@media (max-width: 720px) {
  .cf-trip-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-trip-grid .sp-span-two { grid-column: auto; }
}
@media (max-width: 420px) {
  .cf-trip-grid .sp-kv { grid-template-columns: minmax(0, 1fr); }
  .cf-hero { border-radius: 18px; }
  .cf-item .btn { max-width: 100%; }
}