:root {
  --ink: #172133;
  --muted: #667085;
  --line: #d7dee8;
  --blue: #006cff;
  --blue-dark: #0056cc;
  --pale-blue: #edf5ff;
  --green: #05a660;
  --purple: #6236ff;
  --bg: #f6f7f9;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.site-header {
  height: 72px; padding: 0 48px; display: flex; align-items: center; justify-content: space-between;
  background: white; border-bottom: 1px solid #e8ebef; position: sticky; top: 0; z-index: 20;
}
.brand { color: #111827; text-decoration: none; font-weight: 800; font-size: 25px; letter-spacing: -.7px; display: flex; align-items: center; gap: 9px; }
.brand-tree { width: 25px; height: 31px; position: relative; display: inline-block; }
.brand-tree i { width: 7px; height: 7px; border-radius: 50%; position: absolute; }
.brand-tree i:nth-child(1) { background:#f3cf00; left:9px; top:0; }
.brand-tree i:nth-child(2) { background:#f04c39; left:1px; top:7px; }
.brand-tree i:nth-child(3) { background:#e44498; left:17px; top:7px; }
.brand-tree i:nth-child(4) { background:#8638b2; left:5px; top:14px; }
.brand-tree i:nth-child(5) { background:#176ee8; left:14px; top:14px; }
.brand-tree i:nth-child(6) { background:#05a660; left:9px; top:21px; }
.brand-tree i:nth-child(7) { background:#05a660; left:9px; top:27px; width:7px; height:4px; border-radius: 2px; }
.header-actions { display:flex; align-items:center; gap:22px; }
.avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#eff3f7; font-weight:700; }

.hero { width:min(980px, calc(100% - 32px)); margin:0 auto; padding: 46px 0 28px; }
.eyebrow, .section-kicker { color: var(--blue); letter-spacing: .1em; font-size: 12px; font-weight: 800; margin:0 0 8px; }
.hero h1 { font-size: 38px; letter-spacing:-1.25px; margin:0; }
.hero p:last-child { color:var(--muted); margin:10px 0 0; font-size:17px; }

.content-shell { width:min(980px, calc(100% - 32px)); margin:0 auto 60px; }
.panel { background:white; border:1px solid #e2e6eb; border-radius:16px; box-shadow: 0 5px 22px rgba(30,42,61,.06); }
.single-page-form { display:flex; flex-direction:column; gap:22px; }
.page-section { scroll-margin-top:94px; }
.panel { padding:38px 42px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:30px; }
.panel-heading h2 { font-size:27px; letter-spacing:-.5px; margin:0 0 7px; }
.panel-heading p:last-child { color:var(--muted); margin:0; }
.tag { color:#2756a3; background:#eaf2ff; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:700; white-space:nowrap; }

.form-grid { display:grid; gap:21px 24px; }
.two-col { grid-template-columns: 1fr 1fr; }
label > span, .availability-row > div > span { display:block; font-weight:700; font-size:14px; margin-bottom:8px; }
input, select, textarea { width:100%; border:1.5px solid #cdd5df; border-radius:9px; background:white; color:var(--ink); padding:13px 14px; outline:none; transition:.15s; }
input:focus, select:focus, textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,108,255,.12); }
.field-error { border-color:#d92d20 !important; box-shadow:0 0 0 3px rgba(217,45,32,.09) !important; }
textarea { resize:vertical; }
.full-field { display:block; margin-top:24px; }
.full-field small { display:block; text-align:right; color:#8b95a5; margin-top:6px; }
.full-field em { color:#8b95a5; font-weight:400; font-style:normal; }

.count-card { border:1.5px solid #d7dee8; border-radius:12px; padding:20px; display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.count-card[hidden] { display:none; }
.count-card h3 { font-size:16px; margin:0 0 5px; }
.count-card p { color:var(--muted); margin:0; font-size:14px; }
.counter { display:flex; align-items:center; border:1.5px solid #ccd5df; border-radius:9px; overflow:hidden; }
.counter button { width:42px; height:42px; border:0; color:var(--blue); background:#f6f9fd; font-size:24px; }
.counter output { width:48px; text-align:center; font-weight:800; }

.listing-type-block { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:26px; padding-top:24px; border-top:1px solid #e5e9ef; }
.listing-type-block h3, .mother-photo-copy h3 { margin:0 0 6px; font-size:16px; }
.listing-type-block p, .mother-photo-copy p { color:var(--muted); margin:0; font-size:14px; line-height:1.5; }
.type-switch { display:flex; border:1.5px solid #cbd4df; border-radius:10px; overflow:hidden; flex:none; }
.type-switch button { min-width:118px; padding:12px 15px; border:0; border-right:1px solid #cbd4df; background:white; color:#243044; }
.type-switch button:last-child { border-right:0; }
.type-switch button.selected { background:var(--blue); color:white; font-weight:750; }
.mother-photo-card { display:grid; grid-template-columns:1fr 205px; gap:16px; align-items:center; margin:0 0 14px; border:1px solid #d6e1f1; border-radius:9px; padding:11px 13px; background:#f8faff; }
.mother-photo-card[hidden] { display:none; }
.mother-photo-title { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.mother-photo-title h3 { margin:0; }
.required-badge { display:inline-block; padding:3px 7px; border-radius:5px; background:#fff1f0; color:#b42318; font-size:11px; font-weight:800; }
.mother-photo-copy ul { margin:12px 0 0; padding-left:19px; color:#475467; font-size:13px; line-height:1.65; }
.mother-photo-button { height:58px; border:1.5px dashed #6d91c8; border-radius:8px; background:white; color:var(--blue); display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; overflow:hidden; padding:7px 10px; font-size:13px; text-align:left; }
.mother-upload-label { display:flex; min-width:0; flex-direction:column; gap:2px; }
.mother-photo-button small { color:var(--muted); }
.mother-photo-button img { width:100%; height:58px; object-fit:cover; border-radius:6px; }
.family-photo-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%; background:#edf5ff; font-size:16px; }
.mother-photo-button.field-error { border-style:solid; }

.info-banner { border-radius:10px; padding:15px 17px; background:var(--pale-blue); color:#29466e; display:flex; gap:12px; font-size:14px; line-height:1.5; }
.info-icon { width:23px; height:23px; border-radius:50%; background:var(--blue); color:white; display:grid; place-items:center; font-weight:800; font-family:serif; flex:none; }
.health-list { margin-top:21px; border-top:1px solid #e6eaf0; }
.health-row { display:flex; align-items:center; justify-content:space-between; min-height:76px; border-bottom:1px solid #e6eaf0; gap:20px; }
.health-row > span { font-weight:650; }
.segmented { display:flex; border:1.5px solid #cbd4df; border-radius:10px; overflow:hidden; flex:none; }
.segmented button { width:94px; height:43px; border:0; border-right:1px solid #cbd4df; background:white; color:#243044; }
.segmented button:last-child { border-right:0; }
.segmented button.selected { background:var(--blue); color:white; font-weight:700; }

#saleUnitsSection .listing-type-block { margin-top:0; padding-top:0; border-top:0; }
#saleUnitsSection .count-card { margin:18px 0; }
.individual-divider { display:flex; align-items:baseline; gap:10px; margin:17px 0 11px; }
.individual-divider span { color:var(--muted); font-size:13px; }
.units-list { display:grid; gap:10px; }
.unit-row { border:1px solid #dce2e9; border-radius:10px; background:#fbfcfd; overflow:hidden; }
.unit-row-header { min-height:40px; padding:8px 12px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e4e8ee; background:white; }
.unit-row-header > b { font-size:14px; }
.unit-status { display:inline-flex; align-items:center; gap:5px; color:#157347; background:#ecf8f1; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:750; }
.unit-status i { width:6px; height:6px; border-radius:50%; background:var(--green); }
.copy-unit { margin-left:auto; border:0; background:transparent; color:var(--blue); padding:4px 6px; font-size:12px; font-weight:700; }
.unit-row-body { display:grid; grid-template-columns:78px 1fr; gap:13px; padding:12px; align-items:end; }
.compact-photo-button { width:78px; height:72px; border:1.5px dashed #aeb9c7; border-radius:8px; background:white; color:var(--blue); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; overflow:hidden; padding:0 5px; font-size:11px; }
.compact-photo-button img { width:100%; height:100%; object-fit:cover; }
.compact-photo-button small { color:var(--muted); font-size:10px; }
.pet-illustration { font-size:18px; }
.unit-fields-grid { display:grid; grid-template-columns:1.25fr .8fr 1.1fr .85fr; gap:10px; }
.unit-field > span { display:block; color:#475467; font-size:11px; font-weight:750; margin-bottom:5px; }
.unit-field em { color:#98a2b3; font-style:normal; font-weight:500; }
.unit-field input, .unit-field select { padding:9px 10px; border-radius:7px; font-size:13px; }
.money-input { position:relative; display:block; }
.money-input i { position:absolute; z-index:2; left:10px; top:9px; font-style:normal; color:#637083; font-size:13px; }
.money-input input { padding-left:26px; }

.primary-button:hover { background:var(--blue-dark); }

.form-actions { position:sticky; bottom:16px; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:0; padding:16px 18px; background:rgba(255,255,255,.96); border:1px solid #dfe4ea; border-radius:13px; box-shadow:0 10px 34px rgba(24,34,50,.14); backdrop-filter:blur(10px); }
.action-note b, .action-note small { display:block; }
.action-note small { color:var(--muted); margin-top:3px; }
.action-right { display:flex; align-items:center; gap:12px; }
.primary-button, .secondary-button { border-radius:8px; padding:12px 22px; font-weight:750; }
.primary-button { border:1px solid var(--blue); background:var(--blue); color:white; }
.secondary-button { border:1.5px solid #bfc8d3; background:white; color:#243044; }

.toast { position:fixed; right:24px; bottom:24px; background:#162032; color:white; padding:13px 18px; border-radius:8px; opacity:0; transform:translateY(14px); transition:.2s; pointer-events:none; z-index:40; }
.toast.show { opacity:1; transform:translateY(0); }
.modal-backdrop { position:fixed; inset:0; background:rgba(18,26,38,.6); z-index:50; display:grid; place-items:center; padding:20px; }
.modal-backdrop[hidden] { display:none; }
.success-modal { width:min(460px,100%); background:white; border-radius:18px; padding:38px; text-align:center; }
.success-check { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:white; background:var(--green); font-size:34px; margin:0 auto 18px; }
.success-modal h2 { margin:0 0 9px; font-size:28px; }
.success-modal > p { color:var(--muted); line-height:1.5; }
.success-summary { display:grid; grid-template-columns:1fr auto; gap:13px; text-align:left; background:#f5f7f9; border-radius:10px; padding:17px; margin:20px 0; }
.success-summary b { text-align:right; }
.success-modal .primary-button { width:100%; }

@media (max-width: 740px) {
  .site-header { padding:0 18px; }
  .hero { padding-top:32px; }
  .hero h1 { font-size:31px; }
  .panel { padding:26px 20px; }
  .two-col { grid-template-columns:1fr; }
  .listing-type-block { align-items:flex-start; flex-direction:column; }
  .type-switch { width:100%; }
  .type-switch button { flex:1; min-width:0; }
  .mother-photo-card { grid-template-columns:1fr; }
  .unit-row-body { grid-template-columns:62px 1fr; }
  .compact-photo-button { width:62px; height:62px; }
  .unit-fields-grid { grid-template-columns:1fr 1fr; }
  .form-actions { position:static; align-items:stretch; flex-direction:column; gap:12px; }
  .action-right { width:100%; display:grid; }
  .action-note { display:none; }
}