.page { padding: 32px; display: flex; flex-direction: column; gap: 20px; min-height: 100vh; }
.topBar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.backBtn { display: flex; align-items: center; gap: 6px; color: var(--sage-400); font-size: 0.875rem; text-decoration: none; }
.backBtn:hover { color: var(--sage-500); }
.headerRight { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cancelBtn { background: none; border: 1px solid #dc2626; color: #dc2626; border-radius: var(--radius-md); padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.cancelBtn:hover { background: #fee2e2; }

.cancelBox { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-lg); padding: 16px; }
.cancelBox h4 { font-size: 0.875rem; font-weight: 600; color: #dc2626; margin-bottom: 10px; }
.cancelActions { display: flex; gap: 8px; margin-top: 10px; }
.btnDanger { background: #dc2626 !important; color: white !important; }

/* Card */
.card { background: var(--white); border: 1px solid var(--sage-100); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-sm); }
.cardTitle { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }

/* Timeline */
.timeline { display: flex; align-items: center; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.timelineItem { display: flex; align-items: center; flex-shrink: 0; }
.timelineDot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.dotDone { background: var(--sage-500); color: white; }
.dotActive { background: var(--sage-100); border: 2px solid var(--sage-500); color: var(--sage-500); }
.dotPending { background: var(--sage-50); border: 2px solid var(--sage-200); color: var(--sage-300); }
.timelineLabel { font-size: 0.7rem; color: var(--sage-400); margin-left: 6px; margin-right: 8px; white-space: nowrap; }
.timelineLine { width: 32px; height: 2px; background: var(--sage-200); flex-shrink: 0; }
.lineDone { background: var(--sage-500); }

/* Grid */
.gridTwo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.col2 { display: flex; flex-direction: column; gap: 16px; }

/* Info */
.infoGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.infoItem { display: flex; flex-direction: column; gap: 2px; }
.infoLabel { font-size: 0.75rem; color: var(--sage-300); text-transform: uppercase; letter-spacing: 0.04em; }
.infoValue { font-size: 0.9375rem; font-weight: 600; color: var(--text-dark); }
.divider { height: 1px; background: var(--sage-100); margin: 16px 0; }
.subTitle { display: flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--sage-400); margin-bottom: 6px; }
.address { font-size: 0.875rem; color: var(--text-dark); }
.addressSub { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--sage-300); margin-top: 4px; }
.noteText { font-size: 0.875rem; color: var(--sage-400); background: var(--sage-50); padding: 10px; border-radius: var(--radius-md); }

/* Person */
.personInfo { display: flex; gap: 12px; align-items: flex-start; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sage-200); color: var(--sage-500); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.avatarGreen { width: 36px; height: 36px; border-radius: 50%; background: var(--sage-500); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.personName { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.personSub { font-size: 0.78rem; color: var(--sage-300); display: flex; align-items: center; gap: 3px; }
.noTherapist { font-size: 0.85rem; color: var(--sage-300); font-style: italic; }

/* Payment */
.payRow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--sage-50); font-size: 0.85rem; color: var(--sage-400); }

/* Notes */
.textarea { width: 100%; border: 1px solid var(--sage-100); border-radius: var(--radius-md); padding: 10px; font-size: 0.875rem; color: var(--text-dark); resize: vertical; outline: none; font-family: inherit; margin-bottom: 10px; }
.textarea:focus { border-color: var(--sage-300); }

/* Review */
.reviewStars { color: var(--sage-500); font-size: 1.25rem; margin-bottom: 8px; }
.reviewText { font-size: 0.875rem; color: var(--sage-400); font-style: italic; }

/* Loading */
.loadingPage { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--sage-400); }

@media (max-width: 1024px) { .gridTwo { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .page { padding: 16px; } }