/* 입시로드 컨설팅 작업공간
   - design-tokens.css의 토큰만 사용한다.
   - 고객 화면은 넓은 작업 면적을, 입력과 긴 본문은 읽기 쉬운 폭을 쓴다.
   - 예약·심사·권한 상태는 서버 값으로 유지하고 이 파일은 표현만 담당한다. */

.cs-page {
  /* 컨설팅은 공용 베이지 화면과 분리해, 밝은 녹회색 바탕을 사용한다. */
  --surface-0: #f7faf8;
  --surface-1: #ffffff;
  --surface-2: #f1f5f2;
  --surface-3: #dce6df;
  --line: #dce6df;
  --foot-bg: #e7efe9;
  --ink: #1d3027;
  --brown: #5b6962;
  --soft: #5b6962;
  --faint: #829087;
  --beige: #e5eee8;
  --control-border: rgba(24, 61, 50, .16);
  --control-border-hover: rgba(24, 61, 50, .28);
  --cs-muted: #617067;
  min-height: 100vh;
  background: var(--surface-0);
  color: var(--primary-black);
  font-family: var(--font-sans);
}
.cs-page header.hd { background: rgba(247, 250, 248, .88); border-bottom-color: var(--line); }
.cs-shell { width: min(1440px, calc(100vw - 64px)); margin: 0 auto; padding: 0 0 96px; }
.cs-shell.cs-shell-narrow { width: min(1160px, calc(100vw - 64px)); }
.cs-shell.cs-shell-form { width: min(1200px, calc(100vw - 64px)); }

/* Page framing */
.cs-page-head, .cs-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 48px 0 28px; border-bottom: 1px solid var(--surface-3); }
.cs-page-head-copy { max-width: 740px; }
.cs-eyebrow { margin: 0 0 10px; color: var(--primary); font-size: var(--type-caption); font-weight: 800; letter-spacing: var(--tracking-label); }
.cs-page-head h1, .cs-hero h1 { margin: 0; color: var(--primary-black); font-size: clamp(2rem, 2.1vw, 2.7rem); font-weight: 850; line-height: var(--leading-title); letter-spacing: var(--tracking-title); word-break: keep-all; }
.cs-page-head p:not(.cs-eyebrow), .cs-hero > p:not(.cs-eyebrow) { max-width: 680px; margin: 14px 0 0; color: var(--cs-muted); font-size: var(--type-body); line-height: var(--leading-body); word-break: keep-all; }
.cs-page-actions, .cs-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.cs-badges { margin: 0; }
.cs-badge, .cs-status, .cs-verified, .cs-demo { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid var(--surface-3); border-radius: var(--radius-full); background: var(--surface-2); color: var(--primary-deep); font-size: 12px; font-weight: 750; line-height: 1.35; white-space: nowrap; }
.cs-badge.is-plain { background: var(--surface-1); color: var(--cs-muted); }
.cs-verified { border-color: #cbe4d6; background: #e8f3ec; color: var(--status-success); }
.cs-demo { border-color: #d6e3d8; background: #f2f7f3; color: #4a7057; }

.cs-btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: var(--primary-fg-on); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.35; padding: 10px 16px; text-align: center; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.cs-btn:hover { border-color: var(--primary-deep); background: var(--primary-deep); }
.cs-btn:disabled { cursor: not-allowed; opacity: .5; }
.cs-btn.is-ghost { border-color: var(--surface-3); background: var(--surface-1); color: var(--primary-deep); }
.cs-btn.is-ghost:hover { border-color: var(--primary); background: var(--primary-soft); }
.cs-btn.is-danger { border-color: var(--status-error); background: var(--status-error); }
.cs-btn.is-block { width: 100%; }
.cs-btn.is-sm { min-height: 36px; padding: 7px 11px; font-size: 12px; }

/* Consultant directory */
.cs-directory-summary { display: flex; align-items: baseline; gap: 10px; padding: 24px 0 12px; color: var(--cs-muted); font-size: var(--type-small); }
.cs-directory-summary strong { color: var(--primary-black); font-size: 18px; }
.cs-filters { margin: 0 0 28px; border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); background: var(--surface-1); }
.cs-filter-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; }
.cs-filter-row + .cs-filter-row { border-top: 1px solid var(--surface-2); }
.cs-filter-label { padding-top: 8px; color: var(--cs-muted); font-size: 13px; font-weight: 800; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--surface-3); border-radius: 9px; background: var(--surface-1); color: var(--cs-muted); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; padding: 6px 11px; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.cs-chip:hover { border-color: var(--primary); color: var(--primary-deep); }
.cs-chip.is-on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg-on); }
.cs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs-card { display: flex; min-width: 0; min-height: 280px; flex-direction: column; gap: 14px; border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface-1); color: inherit; padding: 22px; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
a.cs-card:hover { border-color: var(--primary); box-shadow: var(--shadow-1); }
.cs-card-top { display: flex; gap: 12px; align-items: flex-start; }
.cs-avatar, .cs-avatar-lg { display: grid; flex: none; place-items: center; border-radius: 13px; background: var(--primary-soft); color: var(--primary-deep); font-weight: 850; }
.cs-avatar { width: 48px; height: 48px; font-size: 18px; }
.cs-avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.cs-card-name { margin: 0 0 4px; color: var(--primary-black); font-size: 18px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-card-org, .cs-card-note { margin: 0; color: var(--cs-muted); font-size: 13px; line-height: var(--leading-small); }
.cs-card-headline { min-height: 45px; margin: 0; color: var(--primary-black); font-size: 15px; font-weight: 650; line-height: 1.6; word-break: keep-all; }
.cs-card-next { margin: 0; color: var(--primary-deep); font-size: 13px; line-height: 1.5; }
.cs-card-next b { font-weight: 850; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--cs-muted); font-size: 13px; line-height: 1.5; }
.cs-meta b { color: var(--primary-deep); font-weight: 850; }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-spacing-top-s { margin-top: 14px; }
.cs-spacing-top { margin-top: 16px; }
.cs-spacing-top-m { margin-top: 18px; }
.cs-tag { display: inline-flex; align-items: center; border-radius: 8px; background: var(--surface-2); color: var(--cs-muted); font-size: 12px; font-weight: 700; padding: 4px 8px; }
.cs-card-foot { display: flex; min-height: 41px; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--surface-2); }
.cs-price-from { color: var(--cs-muted); font-size: 13px; }
.cs-price-from b { color: var(--primary-black); font-size: 16px; font-weight: 850; }
.cs-go { color: var(--primary-deep); font-size: 13px; font-weight: 850; text-decoration: none; }
.cs-go:hover { text-decoration: underline; }
.cs-empty { max-width: 640px; margin: 42px auto; border: 1px dashed var(--surface-3); border-radius: 16px; background: var(--surface-1); padding: 46px 28px; text-align: center; }
.cs-empty h3 { margin: 0 0 10px; color: var(--primary-black); font-size: 20px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-empty p { margin: 0 0 20px; color: var(--cs-muted); font-size: var(--type-small); line-height: var(--leading-body); }
.cs-empty-inline { border: 1px dashed var(--surface-3); border-radius: 12px; background: var(--surface-2); color: var(--cs-muted); padding: 18px; }
.cs-empty-inline p { margin: 0 0 12px; font-size: 13px; line-height: var(--leading-body); }
.cs-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 52px; border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); padding: 28px 0; }
.cs-callout h2 { margin: 0 0 7px; font-size: 19px; letter-spacing: var(--tracking-card); }
.cs-callout p { max-width: 610px; margin: 0; color: var(--cs-muted); font-size: 14px; line-height: var(--leading-body); }

/* Customer profile and shared detail panels */
.cs-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; padding-top: 32px; }
.cs-detail-main { min-width: 0; }
.cs-panel { margin: 0 0 16px; border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface-1); padding: 24px; }
.cs-panel h2 { margin: 0 0 14px; color: var(--primary-black); font-size: 18px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-panel h3 { margin: 22px 0 8px; color: var(--primary-black); font-size: 14px; font-weight: 800; }
.cs-panel p { margin: 0 0 11px; color: var(--cs-muted); font-size: 15px; line-height: var(--leading-body); word-break: keep-all; }
.cs-preline { white-space: pre-line; }
.cs-panel > :last-child { margin-bottom: 0; }
.cs-panel.is-warn { border-color: #d5e0d8; background: #f1f5f2; }
.cs-panel.is-warn h2 { color: #64746a; }
.cs-profile-head { display: flex; gap: 18px; align-items: flex-start; }
.cs-profile-head h1 { margin: 0 0 5px; color: var(--primary-black); font-size: clamp(1.7rem, 2vw, 2.2rem); font-weight: 850; letter-spacing: var(--tracking-title); }
.cs-profile-head .cs-meta { margin-top: 10px; }
.cs-profile-intro { margin: 20px 0 0 !important; color: var(--primary-black) !important; font-size: 16px !important; font-weight: 650; }
.cs-list { margin: 0; padding-left: 20px; color: var(--cs-muted); font-size: 15px; line-height: 1.9; }
.cs-side { position: sticky; top: 88px; }
.cs-side .cs-panel { margin-bottom: 14px; }
.cs-side-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-products { display: flex; flex-direction: column; gap: 10px; }
.cs-product { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); color: inherit; padding: 15px 16px; text-align: left; }
button.cs-product { width: 100%; cursor: pointer; font-family: inherit; }
button.cs-product:hover, .cs-product.is-picked { border-color: var(--primary); background: var(--primary-soft); }
.cs-product > :first-child { min-width: 0; }
.cs-product-name { margin: 0 0 4px; color: var(--primary-black); font-size: 15px; font-weight: 850; }
.cs-product-sub { margin: 0; color: var(--cs-muted); font-size: 13px; line-height: 1.55; word-break: keep-all; }
.cs-product-price { flex: none; color: var(--primary-black); font-size: 16px; font-weight: 850; white-space: nowrap; }
.cs-slot-list { display: flex; max-height: 286px; flex-direction: column; gap: 8px; overflow-y: auto; }
.cs-slot { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; border: 1px solid var(--surface-3); border-radius: 10px; background: var(--surface-1); color: var(--primary-black); cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 750; padding: 10px 12px; text-align: left; }
.cs-slot small { color: var(--cs-muted); font-size: 12px; font-weight: 650; }
.cs-slot:hover { border-color: var(--primary); }
.cs-slot.is-on { border-color: var(--primary); background: var(--primary); color: var(--primary-fg-on); }
.cs-slot.is-on small { color: inherit; opacity: .88; }
.cs-notice, .cs-legal-note { margin: 20px 0; border-left: 3px solid var(--primary); background: var(--surface-2); color: var(--cs-muted); font-size: 13px; line-height: var(--leading-body); padding: 12px 14px; }
.cs-notice { border-left-color: #8aa092; background: #f1f5f2; color: #53655b; }

/* Booking form */
.cs-book-layout { display: grid; grid-template-columns: minmax(0, 760px) 340px; justify-content: space-between; gap: 40px; align-items: start; margin: 0 auto; padding-top: 32px; }
.cs-book { min-width: 0; }
.cs-book-aside { position: sticky; top: 88px; }
.cs-book-aside .cs-panel { margin: 0; }
.cs-wizard-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cs-wizard-steps li { position: relative; min-height: 42px; padding: 0 0 18px 30px; color: var(--cs-muted); font-size: 13px; font-weight: 700; }
.cs-wizard-steps li::before { position: absolute; top: 1px; left: 0; width: 18px; height: 18px; border: 1px solid var(--surface-3); border-radius: 50%; background: var(--surface-1); content: ""; }
.cs-wizard-steps li::after { position: absolute; top: 20px; bottom: 0; left: 9px; width: 1px; background: var(--surface-3); content: ""; }
.cs-wizard-steps li:last-child::after { display: none; }
.cs-wizard-steps li.is-current { color: var(--primary-deep); }
.cs-wizard-steps li.is-current::before, .cs-wizard-steps li.is-done::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px var(--surface-1); }
.cs-wizard-steps li.is-done::after { background: var(--primary); }
.cs-book-aside-summary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--surface-3); }
.cs-book-aside-summary dl { display: grid; gap: 10px; margin: 0; font-size: 13px; }
.cs-book-aside-summary div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.cs-book-aside-summary dt { color: var(--cs-muted); }
.cs-book-aside-summary dd { margin: 0; color: var(--primary-black); font-weight: 750; overflow-wrap: anywhere; }
.cs-progress { display: flex; gap: 5px; margin: 0 0 24px; }
.cs-progress span { height: 3px; flex: 1; border-radius: 99px; background: var(--surface-3); }
.cs-progress span.is-done { background: var(--primary); }
.cs-step { display: none; }
.cs-step.is-active { display: block; }
.cs-step h2 { margin: 0 0 8px; color: var(--primary-black); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 850; letter-spacing: var(--tracking-title); }
.cs-step .cs-help { margin: 0 0 24px; color: var(--cs-muted); font-size: 14px; line-height: var(--leading-body); }
.cs-field { margin: 0 0 20px; }
.cs-field > label { display: block; margin: 0 0 8px; color: var(--primary-black); font-size: 14px; font-weight: 800; }
.cs-field-label { margin: 0 0 8px; color: var(--primary-black); font-size: 14px; font-weight: 800; }
.cs-input, .cs-textarea, .cs-select { display: block; width: 100%; min-height: var(--control-height); box-sizing: border-box; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: var(--surface-1); color: var(--primary-black); font-family: inherit; font-size: 15px; line-height: 1.5; padding: 11px var(--control-padding-x); }
.cs-input:hover, .cs-textarea:hover, .cs-select:hover { border-color: var(--control-border-hover); }
.cs-input:focus, .cs-textarea:focus, .cs-select:focus { outline: 3px solid var(--control-ring); border-color: var(--primary); }
.cs-textarea { min-height: 112px; resize: vertical; }
.cs-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 30px; }
.cs-nav > :only-child { margin-left: auto; }
.cs-consent { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); color: var(--cs-muted); cursor: pointer; font-size: 13px; line-height: 1.65; padding: 14px; }
.cs-consent input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--primary); }
.cs-summary { margin: 0 0 16px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-2); padding: 16px; }
.cs-summary dl { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 14px; margin: 0; font-size: 14px; }
.cs-summary dt { color: var(--cs-muted); font-weight: 700; }
.cs-summary dd { margin: 0; color: var(--primary-black); font-weight: 750; overflow-wrap: anywhere; }
.cs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Customer request history */
.cs-history-list { display: grid; gap: 12px; margin-top: 24px; }
.cs-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; border: 1px solid var(--surface-3); border-radius: 14px; background: var(--surface-1); padding: 18px 20px; }
.cs-history-item-main { min-width: 0; }
.cs-history-item h2 { margin: 0 0 7px; color: var(--primary-black); font-size: 17px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-history-item p { margin: 0; color: var(--cs-muted); font-size: 13px; line-height: 1.55; }
.cs-history-item-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.cs-booking-flow, .cs-request-flow { display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.cs-booking-flow li, .cs-request-flow li { position: relative; padding-right: 24px; color: var(--cs-muted); font-size: 12px; font-weight: 700; }
.cs-booking-flow li:not(:last-child)::after, .cs-request-flow li:not(:last-child)::after { position: absolute; top: 50%; right: 9px; width: 6px; height: 6px; border-top: 1px solid var(--surface-3); border-right: 1px solid var(--surface-3); content: ""; transform: translateY(-50%) rotate(45deg); }
.cs-booking-flow li.is-done, .cs-request-flow li.is-done { color: var(--primary-deep); }
.cs-booking-flow li.is-current, .cs-request-flow li.is-current { color: var(--primary); font-weight: 850; }
.cs-status.is-requested, .cs-status.is-pending { border-color: #d5e0d8; background: #f1f5f2; color: #64746a; }
.cs-status.is-confirmed, .cs-status.is-approved, .cs-status.is-completed { border-color: #cbe4d6; background: #e8f3ec; color: var(--status-success); }
.cs-status.is-canceled, .cs-status.is-rejected, .cs-status.is-suspended { border-color: #ebd2cf; background: #fbefee; color: var(--status-error); }
.cs-status.is-draft { background: var(--surface-2); color: var(--cs-muted); }
.cs-status.is-received, .cs-status.is-reviewing { border-color: #c9d8cd; background: #eaf1ec; color: #4f6758; }
.cs-status.is-working, .cs-status.is-review-first, .cs-status.is-review_first, .cs-status.is-revision, .cs-status.is-review-final, .cs-status.is-review_final, .cs-status.is-awaiting-customer, .cs-status.is-awaiting_customer { border-color: #cfe0d3; background: var(--primary-soft); color: var(--primary-deep); }

/* Task request customer detail */
.cs-request-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; padding-top: 32px; }
.cs-request-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 4px 0 26px; padding: 0; }
.cs-request-stage li { position: relative; min-width: 0; padding-top: 26px; color: var(--cs-muted); font-size: 12px; font-weight: 700; list-style: none; text-align: center; }
.cs-request-stage li::before { position: absolute; z-index: 1; top: 0; left: 50%; width: 12px; height: 12px; border: 2px solid var(--surface-3); border-radius: 50%; background: var(--surface-1); content: ""; transform: translateX(-50%); }
.cs-request-stage li::after { position: absolute; top: 6px; right: 50%; left: -50%; height: 2px; background: var(--surface-3); content: ""; }
.cs-request-stage li:first-child::after { display: none; }
.cs-request-stage li.is-done, .cs-request-stage li.is-current { color: var(--primary-deep); }
.cs-request-stage li.is-done::before, .cs-request-stage li.is-current::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 2px var(--surface-1); }
.cs-request-stage li.is-done::after { background: var(--primary); }
.cs-request-stage li.is-complete, .cs-request-stage li.is-current { color: var(--primary-deep); }
.cs-request-stage li.is-complete::before, .cs-request-stage li.is-current::before { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 2px var(--surface-1); }
.cs-request-stage li.is-complete::after { background: var(--primary); }
.cs-request-stage li.is-exception { color: var(--status-error); }
.cs-request-stage li.is-exception::before { border-color: var(--status-error); background: var(--status-error); }
.cs-request-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-3); }
.cs-request-metadata div { min-width: 0; background: var(--surface-1); padding: 14px; }
.cs-request-metadata dt { margin: 0 0 4px; color: var(--cs-muted); font-size: 12px; font-weight: 700; }
.cs-request-metadata dd { margin: 0; color: var(--primary-black); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.cs-activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cs-activity li { position: relative; padding: 0 0 20px 26px; color: var(--cs-muted); font-size: 14px; line-height: 1.6; }
.cs-activity li::before { position: absolute; top: 5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); content: ""; }
.cs-activity li::after { position: absolute; top: 15px; bottom: 1px; left: 4px; width: 1px; background: var(--surface-3); content: ""; }
.cs-activity li:last-child { padding-bottom: 0; }
.cs-activity li:last-child::after { display: none; }
.cs-activity time { display: block; margin-bottom: 3px; color: var(--cs-muted); font-size: 12px; font-weight: 650; }
.cs-message { margin: 0 0 10px; border: 1px solid var(--surface-3); border-radius: 12px; padding: 13px 14px; }
.cs-message p { margin: 0; }
.cs-message-meta { margin: 0 0 4px !important; color: var(--cs-muted) !important; font-size: 12px !important; font-weight: 750; }

/* Consultant admission and operation */
.cs-pro-page { padding-top: 28px; }
.cs-pro-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: end; border-top: 1px solid var(--surface-3); border-bottom: 1px solid var(--surface-3); padding: 48px 0; }
.cs-pro-hero h1 { margin: 0; color: var(--primary-black); font-size: clamp(2rem, 3vw, 3.1rem); font-weight: 850; line-height: var(--leading-title); letter-spacing: var(--tracking-title); word-break: keep-all; }
.cs-pro-hero p:not(.cs-eyebrow) { margin: 14px 0 0; color: var(--cs-muted); font-size: var(--type-body); line-height: var(--leading-body); }
.cs-pro-hero-action { align-self: end; }
.cs-pro-section { margin-top: 48px; }
.cs-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 16px; }
.cs-section-heading h2 { margin: 0; color: var(--primary-black); font-size: 24px; font-weight: 850; letter-spacing: var(--tracking-title); }
.cs-section-heading p { max-width: 560px; margin: 0; color: var(--cs-muted); font-size: 14px; line-height: var(--leading-body); }
.cs-value { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs-value-item { min-width: 0; border-top: 2px solid var(--primary); background: var(--surface-1); padding: 18px 0 0; }
.cs-value-item h3 { margin: 0 0 8px; color: var(--primary-black); font-size: 15px; font-weight: 850; }
.cs-value-item p { margin: 0; color: var(--cs-muted); font-size: 14px; line-height: var(--leading-body); }
.cs-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cs-tier { border: 1px solid var(--surface-3); border-radius: 14px; background: var(--surface-1); padding: 20px; }
.cs-tier .t { margin: 0 0 8px; color: var(--primary); font-size: 13px; font-weight: 850; }
.cs-tier .p { margin: 0 0 6px; color: var(--primary-black); font-size: 22px; font-weight: 850; }
.cs-tier .d { margin: 0; color: var(--cs-muted); font-size: 13px; line-height: var(--leading-body); }
.cs-console-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; padding-top: 28px; }
.cs-console-nav { position: sticky; top: 88px; display: grid; gap: 5px; align-self: start; border-right: 1px solid var(--surface-3); padding: 6px 24px 6px 0; }
.cs-console-nav a { display: flex; min-height: 38px; align-items: center; border-radius: 8px; color: var(--cs-muted); font-size: 13px; font-weight: 750; padding: 0 10px; text-decoration: none; }
.cs-console-nav a:hover, .cs-console-nav a.is-active { background: var(--primary-soft); color: var(--primary-deep); }
.cs-console-main { min-width: 0; }
.cs-console-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 26px; padding-bottom: 22px; border-bottom: 1px solid var(--surface-3); }
.cs-console-head h1 { margin: 0; color: var(--primary-black); font-size: 28px; font-weight: 850; letter-spacing: var(--tracking-title); }
.cs-console-head p { margin: 7px 0 0; color: var(--cs-muted); font-size: 14px; }
.cs-console-section { margin: 0 0 28px; }
.cs-console-section > h2 { margin: 0 0 12px; color: var(--primary-black); font-size: 18px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-console-section > .cs-card-org { margin: -4px 0 14px; }
.cs-subsection-title { margin: 24px 0 10px; color: var(--primary-black); font-size: 15px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-queue-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
.cs-queue-card, .cs-stage-card { display: block; min-width: 0; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); color: var(--primary-black); cursor: pointer; font-family: inherit; padding: 14px; text-align: left; transition: border-color 160ms ease, background-color 160ms ease; }
.cs-queue-card:hover, .cs-queue-card.is-active, .cs-stage-card:hover, .cs-stage-card.is-active { border-color: var(--primary); background: var(--primary-soft); }
.cs-queue-card span, .cs-stage-card > span { display: block; color: var(--cs-muted); font-size: 12px; font-weight: 800; }
.cs-queue-card strong, .cs-stage-card strong { display: block; margin: 6px 0 3px; color: var(--primary-black); font-size: 22px; font-weight: 850; line-height: 1.1; }
.cs-queue-card small, .cs-stage-card small { display: block; color: var(--cs-muted); font-size: 11px; line-height: 1.4; }
.cs-stage-board { display: grid; grid-auto-columns: minmax(145px, 1fr); grid-auto-flow: column; gap: 10px; margin: 0 0 18px; overflow-x: auto; padding-bottom: 4px; }
.cs-stage-card { min-height: 132px; }
.cs-stage-card em { display: -webkit-box; overflow: hidden; margin-top: 10px; color: var(--primary-deep); font-size: 12px; font-style: normal; font-weight: 700; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cs-workspace-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 14px; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-2); padding: 12px; }
.cs-filter-control { display: grid; min-width: 136px; flex: 1 1 150px; gap: 5px; }
.cs-filter-control:first-child { flex-basis: 230px; }
.cs-filter-control label { color: var(--cs-muted); font-size: 12px; font-weight: 800; }
.cs-filter-control .cs-input, .cs-filter-control .cs-select { min-height: 38px; padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.cs-filter-context { min-height: 38px; align-content: center; color: var(--cs-muted); font-size: 13px; font-weight: 750; white-space: nowrap; }
.cs-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.cs-operational-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 28px; }
.cs-operational-item { border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); padding: 15px; }
.cs-operational-item span { display: block; color: var(--cs-muted); font-size: 12px; font-weight: 750; }
.cs-operational-item strong { display: block; margin-top: 6px; color: var(--primary-black); font-size: 21px; font-weight: 850; }
.cs-table-wrap { overflow-x: auto; border: 1px solid var(--surface-3); border-radius: 12px; background: var(--surface-1); }
.cs-table { width: 100%; min-width: 650px; border-collapse: collapse; color: var(--primary-black); font-size: 13px; }
.cs-table th, .cs-table td { padding: 13px 14px; border-bottom: 1px solid var(--surface-2); text-align: left; vertical-align: top; }
.cs-table th { background: var(--surface-2); color: var(--cs-muted); font-size: 12px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table a { color: var(--primary-deep); font-weight: 800; }
.cs-table a:hover { color: var(--primary); }
.cs-table td .cs-btn + .cs-btn { margin: 4px 0 0 4px; }
.cs-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.cs-toolbar-group { display: flex; min-width: 0; flex: 1 1 300px; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-toolbar .cs-input { width: min(260px, 100%); }

/* Public customer workspace — home, consultant comparison, requests and history. */
.cs-page header.hd .shell { width: min(1440px, calc(100vw - 64px)); max-width: none; box-sizing: border-box; padding-right: 0; padding-left: 0; }
.cs-directory-shell { padding-bottom: 112px; }
.cs-directory-head { padding-bottom: 24px; }
.cs-directory-context { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr); gap: 32px; align-items: center; border-bottom: 1px solid var(--surface-3); padding: 20px 0; }
.cs-context-kicker, .cs-panel-kicker { margin: 0 0 6px; color: var(--primary); font-size: 12px; font-weight: 850; letter-spacing: var(--tracking-label); }
.cs-directory-context > div > p:last-child { max-width: 690px; margin: 0; color: var(--cs-muted); font-size: 14px; line-height: var(--leading-body); }
.cs-directory-context-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.cs-directory-context-list li { min-width: 0; border-left: 1px solid var(--surface-3); color: var(--primary-deep); font-size: 13px; font-weight: 750; line-height: 1.45; padding: 3px 0 3px 14px; }
.cs-directory-workspace { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 32px; }
.cs-directory-filters { position: sticky; top: 88px; min-width: 0; align-self: start; }
.cs-filter-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cs-filter-panel-head h2 { margin: 0; color: var(--primary-black); font-size: 16px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-text-link { color: var(--primary-deep); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.cs-text-link:hover { color: var(--primary); }
.cs-directory-filters .cs-filters { margin: 0; overflow: hidden; border: 1px solid var(--surface-3); border-radius: 16px; background: var(--surface-1); }
.cs-directory-filters .cs-filter-row { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
.cs-directory-filters .cs-filter-label { padding-top: 0; color: var(--primary-black); }
.cs-directory-filters .cs-chips { gap: 6px; }
.cs-directory-filters .cs-chip { min-height: 32px; font-size: 12px; padding: 5px 9px; }
.cs-directory-results { min-width: 0; }
.cs-directory-results-head, .cs-history-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .62fr); gap: 28px; align-items: end; border-bottom: 1px solid var(--surface-3); padding: 0 0 16px; }
.cs-directory-results-head h2, .cs-history-overview h2 { margin: 0; color: var(--primary-black); font-size: 22px; font-weight: 850; letter-spacing: var(--tracking-card); }
.cs-directory-results-head h2 strong, .cs-history-overview h2 strong { color: var(--primary); font-weight: 850; }
.cs-directory-results-head > p, .cs-history-overview > p { max-width: 430px; margin: 0; color: var(--cs-muted); font-size: 13px; line-height: var(--leading-body); }
.cs-directory-results .cs-grid { margin-top: 20px; }
.cs-directory-results .cs-empty { margin: 42px 0; }
.cs-card { min-height: 296px; padding: 20px; }
.cs-card-headline { min-height: 50px; }
.cs-card:focus-visible, .cs-chip:focus-visible, .cs-btn:focus-visible, .cs-text-link:focus-visible { outline: 3px solid var(--control-ring); outline-offset: 3px; }

.cs-profile-overview { border-top: 3px solid var(--primary); padding: 28px; }
.cs-profile-facts, .cs-side-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--surface-3); }
.cs-profile-facts div, .cs-side-facts div { min-width: 0; padding: 14px 14px 0 0; }
.cs-profile-facts div + div { border-left: 1px solid var(--surface-3); padding-left: 14px; }
.cs-profile-facts dt, .cs-side-facts dt { margin: 0 0 4px; color: var(--cs-muted); font-size: 12px; font-weight: 750; }
.cs-profile-facts dd, .cs-side-facts dd { margin: 0; color: var(--primary-black); font-size: 14px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; }
.cs-section-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 16px; }
.cs-section-title-row .cs-card-note { margin: -8px 0 0; }
.cs-service-panel .cs-products { gap: 8px; }
.cs-side-primary { border-top: 3px solid var(--primary); }
.cs-side-primary .cs-panel-kicker { margin-bottom: 9px; }

.cs-book-page-head { padding-bottom: 24px; }
.cs-book-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 10px; color: var(--cs-muted); font-size: 13px; font-weight: 750; }
.cs-book-progress-head strong { color: var(--primary-deep); font-size: 15px; font-weight: 850; }
.cs-book-aside-panel { border-top: 3px solid var(--primary); }
.cs-request-form-panel:first-child { border-top: 3px solid var(--primary); }
.cs-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cs-field-grid .cs-field { min-width: 0; }

.cs-history-workspace { padding-top: 32px; }
.cs-history-list { margin-top: 20px; }
.cs-history-item { grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); gap: 28px; padding: 22px 24px; }
.cs-history-item:hover { border-color: var(--primary); }
.cs-history-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0 14px; padding: 0; border-top: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2); }
.cs-history-facts div { min-width: 0; padding: 11px 12px 11px 0; }
.cs-history-facts div + div { border-left: 1px solid var(--surface-2); padding-left: 12px; }
.cs-history-facts dt { margin: 0 0 4px; color: var(--cs-muted); font-size: 11px; font-weight: 750; }
.cs-history-facts dd { margin: 0; color: var(--primary-black); font-size: 13px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.cs-booking-history-item .cs-history-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-history-next { margin: 14px 0 0 !important; color: var(--primary-deep) !important; font-size: 13px !important; }
.cs-history-next strong { margin-right: 7px; color: var(--primary-black); font-weight: 850; }
.cs-history-item-actions { align-content: start; }

.cs-request-page-head { padding-bottom: 24px; }
.cs-request-next-panel { border-top: 3px solid var(--primary); }
.cs-request-next-panel > h2 { margin-bottom: 8px; font-size: 22px; }
.cs-request-next-panel .cs-side-facts { grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
.cs-request-next-panel .cs-side-facts div { border-top: 1px solid var(--surface-2); padding: 10px 0; }
.cs-request-next-panel .cs-side-facts div:last-child { padding-bottom: 0; }
.cs-request-next-panel .cs-side-facts dt { display: inline; margin-right: 8px; }
.cs-request-next-panel .cs-side-facts dd { display: inline; font-size: 13px; }
.cs-operating-panel { background: var(--surface-2); }

/* Feedback */
.cs-toast { position: fixed; z-index: 300; bottom: 24px; left: 50%; max-width: min(420px, calc(100vw - 32px)); border-radius: 10px; background: var(--primary-black); color: var(--primary-fg-on); font-size: 14px; font-weight: 700; line-height: 1.5; opacity: 0; padding: 12px 16px; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 180ms ease, transform 180ms ease; visibility: hidden; }
.cs-toast.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; }

@media (max-width: 1280px) {
  .cs-shell { width: min(1180px, calc(100vw - 48px)); }
  .cs-page header.hd .shell { width: min(1180px, calc(100vw - 48px)); }
  .cs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-value, .cs-operational-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cs-detail, .cs-request-layout, .cs-book-layout, .cs-pro-hero { grid-template-columns: 1fr; gap: 22px; }
  .cs-directory-context, .cs-directory-results-head, .cs-history-overview { grid-template-columns: 1fr; gap: 12px; }
  .cs-directory-workspace { grid-template-columns: 1fr; gap: 24px; }
  .cs-directory-filters { position: static; }
  .cs-directory-filters .cs-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-directory-filters .cs-filter-row + .cs-filter-row { border-top: 0; }
  .cs-directory-filters .cs-filter-row:nth-child(n + 3) { border-top: 1px solid var(--surface-2); }
  .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-side, .cs-book-aside { position: static; }
  .cs-book-aside { order: -1; }
  .cs-book-aside .cs-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); column-gap: 24px; }
  .cs-book-aside .cs-panel > h2 { grid-column: 1 / -1; }
  .cs-book-aside-summary { margin-top: 0; padding-top: 0; border-top: 0; }
  .cs-console-shell { grid-template-columns: 1fr; gap: 16px; }
  .cs-console-nav { position: static; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--surface-3); padding: 0 0 12px; }
  .cs-console-nav a { flex: none; }
  .cs-queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cs-shell, .cs-shell.cs-shell-narrow, .cs-shell.cs-shell-form { width: min(100% - 32px, 1440px); padding-bottom: 64px; }
  .cs-page header.hd .shell { width: min(100% - 32px, 1440px); }
  .cs-page-head, .cs-hero { grid-template-columns: 1fr; gap: 16px; padding: 32px 0 22px; }
  .cs-page-actions, .cs-badges { justify-content: flex-start; }
  .cs-page-head h1, .cs-hero h1 { font-size: 28px; }
  .cs-filter-row { grid-template-columns: 1fr; gap: 7px; padding: 13px 0; }
  .cs-directory-context-list, .cs-directory-filters .cs-filters, .cs-field-grid { grid-template-columns: 1fr; }
  .cs-directory-context-list { gap: 8px; }
  .cs-directory-context-list li { border-left: 0; border-top: 1px solid var(--surface-3); padding: 9px 0 0; }
  .cs-directory-context-list li:first-child { border-top: 0; padding-top: 0; }
  .cs-directory-filters .cs-filter-row + .cs-filter-row, .cs-directory-filters .cs-filter-row:nth-child(n + 3) { border-top: 1px solid var(--surface-2); }
  .cs-filter-label { padding-top: 0; }
  .cs-grid, .cs-value, .cs-tier-grid, .cs-operational-strip { grid-template-columns: 1fr; }
  .cs-card { min-height: auto; padding: 18px; }
  .cs-callout, .cs-history-item, .cs-console-head, .cs-section-heading { display: grid; grid-template-columns: 1fr; align-items: start; }
  .cs-history-item-actions, .cs-page-actions { justify-content: flex-start; }
  .cs-history-facts, .cs-booking-history-item .cs-history-facts, .cs-profile-facts { grid-template-columns: 1fr; }
  .cs-history-facts div + div, .cs-profile-facts div + div { border-left: 0; border-top: 1px solid var(--surface-2); padding-left: 0; }
  .cs-profile-facts div + div { border-top-color: var(--surface-3); }
  .cs-panel { padding: 20px 16px; }
  .cs-profile-head { gap: 12px; }
  .cs-avatar-lg { width: 58px; height: 58px; font-size: 22px; }
  .cs-request-stage { overflow-x: auto; grid-template-columns: repeat(4, 100px); justify-content: start; }
  .cs-request-metadata { grid-template-columns: 1fr; }
  .cs-book-aside .cs-panel { display: block; }
  .cs-book-aside-summary { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--surface-3); }
  .cs-summary dl { grid-template-columns: 78px minmax(0, 1fr); }
  .cs-table { min-width: 600px; }
  .cs-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-workspace-tools { display: grid; grid-template-columns: 1fr; }
  .cs-filter-control, .cs-filter-control:first-child { width: 100%; min-width: 0; }
  .cs-filter-context { min-height: 0; }
  .cs-pro-hero { padding: 34px 0; }
  .cs-pro-hero h1 { font-size: 29px; }
}
@media (max-width: 480px) {
  .cs-chip { min-height: 36px; font-size: 12px; }
  .cs-card-foot, .cs-nav { align-items: stretch; flex-direction: column; }
  .cs-card-foot > .cs-btn, .cs-nav > .cs-btn { width: 100%; }
  .cs-nav > :only-child { margin-left: 0; }
  .cs-history-item-actions .cs-btn { flex: 1 1 auto; }
  .cs-product { align-items: flex-start; flex-direction: column; }
  .cs-product-price { white-space: normal; }
  .cs-booking-flow li, .cs-request-flow li { padding-right: 18px; font-size: 11px; }
}