.appointment-container {
     padding: 24px;
     background: transparent;
 }

 .appointment-card {
     background: #fff;
     border: 1px solid #e6e9ef;
     border-radius: 16px;
     box-shadow: 0 12px 24px rgba(23, 78, 166, 0.08);
     padding: 20px;
     max-width: 880px;
     margin: 0 auto;
 }

 .appointment-header {
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
     gap: 16px;
     margin-bottom: 16px;
 }

 .step-title {
     font-size: 20px;
     font-weight: 600;
     color: #202124;
 }

 .step-subtitle {
     font-size: 13px;
     color: #5f6368;
     margin-top: 2px;
 }

 .progress {
     width: 160px;
     height: 6px;
     background: #eef2f7;
     border-radius: 999px;
     overflow: hidden;
 }

 .progress-fill {
     height: 100%;
     width: 0%;
     background: #1a73e8;
     transition: width 0.3s ease;
 }

 .calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
 }

 .calendar-title {
     font-weight: 600;
     color: #202124;
 }

 .calendar-nav {
     display: flex;
     gap: 8px;
 }

 .calendar-nav button {
     border: 1px solid #e0e3e7;
     background: #f1f3f4;
     color: #202124;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     cursor: pointer;
 }

 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 8px;
     margin-top: 10px;
 }

 .calendar-day-name {
     font-size: 12px;
     color: #5f6368;
     text-align: center;
 }

 .calendar-cell {
     display: flex;
     align-items: center;
     justify-content: center;
     background: #eef2f7;
     color: #202124;
     border-radius: 12px;
     height: 42px;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.08s;
 }

 .calendar-cell:hover {
     background: #e2e7ef;
 }

 .calendar-cell:active {
     transform: scale(0.98);
 }

 .calendar-cell.selected {
     background: #1a73e8;
     color: #fff;
 }

 .calendar-cell.disabled {
     background: #f5f6f7;
     color: #9aa0a6;
     cursor: not-allowed;
 }

 .time-slots {
     margin-top: 18px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
     gap: 12px;
     background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
     border: 1px solid #e6e9ef;
     border-radius: 16px;
     padding: 12px;
 }

 .time-slot {
     border: 1px solid #e0e3e7;
     background: #ffffff;
     border-radius: 999px;
     padding: 10px 14px;
     text-align: center;
     cursor: pointer;
     color: #1f2937;
     font-weight: 500;
     box-shadow: 0 2px 6px rgba(23, 78, 166, 0.08);
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.08s;
 }

 .time-slot.selected {
     background: linear-gradient(180deg, #1a73e8 0%, #1557b0 100%);
     border-color: transparent;
     color: #ffffff;
     box-shadow: 0 6px 14px rgba(23, 78, 166, 0.18);
 }

 .time-slot:hover {
     background: #f6faff;
     border-color: #d2e3fc;
 }

 .time-slot:active {
     transform: scale(0.98);
 }

 .time-slot:focus-visible {
     outline: 3px solid #d2e3fc;
     outline-offset: 2px;
 }
 
 .time-slot.disabled {
     background: #f5f6f7;
     border-color: #eceff3;
     color: #9aa0a6;
     cursor: not-allowed;
     pointer-events: none;
     box-shadow: none;
 }

 .list-grid {
     margin-top: 16px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 14px;
 }

 .list-item {
     border: 1px solid #e6e9ef;
     background: #ffffff;
     border-radius: 16px;
     padding: 14px;
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
     gap: 12px;
     cursor: pointer;
     transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.08s;
     box-shadow: 0 6px 18px rgba(23, 78, 166, 0.06);
 }

 .list-item:hover {
     background: #fbfdff;
     box-shadow: 0 10px 22px rgba(23, 78, 166, 0.10);
 }

 .list-item:active {
     transform: scale(0.98);
 }

 .list-item.selected {
     border-color: #1a73e8;
     background: #f5f9ff;
     box-shadow: 0 12px 28px rgba(23, 78, 166, 0.14);
 }

 .service-icon {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #e8f0fe;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #1a73e8;
     font-size: 18px;
 }

 .service-title {
     font-size: 15px;
     font-weight: 600;
     color: #202124;
 }

 .service-subtitle {
     font-size: 12px;
     color: #5f6368;
     margin-top: 4px;
 }

 .service-price {
     font-weight: 600;
     color: #174ea6;
     background: #e8f0fe;
     border: 1px solid #d2e3fc;
     padding: 6px 10px;
     border-radius: 999px;
 }
 
 .service-duration {
     font-weight: 600;
     color: #1f2937;
     background: #f3f4f6;
     border: 1px solid #e5e7eb;
     padding: 6px 10px;
     border-radius: 999px;
 }
 
 .service-meta {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
 .service-desc {
     grid-column: 1 / -1;
     font-size: 12px;
     color: #5f6368;
     margin-top: 8px;
     line-height: 1.5;
 }
 
 .section-header {
     margin-top: 18px;
     display: flex;
     align-items: center;
     gap: 10px;
 }
 
 .section-title {
     font-size: 14px;
     font-weight: 600;
     color: #174ea6;
     background: #e8f0fe;
     border: 1px solid #d2e3fc;
     padding: 6px 10px;
     border-radius: 999px;
 }
 
 .employee-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #e8f0fe;
     color: #1a73e8;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     font-size: 16px;
 }
 
 .employee-title {
     font-size: 15px;
     font-weight: 600;
     color: #202124;
 }
 
 .employee-subtitle {
     font-size: 12px;
     color: #5f6368;
     margin-top: 4px;
 }
 
 .availability-legend {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 12px;
 }
 
 .legend-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 12px;
     color: #5f6368;
 }
 
 .legend-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     border: 1px solid #e0e3e7;
 }
 
 .legend-dot.available {
     background: #1a73e8;
     border-color: #1a73e8;
 }
 
 .legend-dot.busy {
     background: #eceff3;
     border-color: #e0e3e7;
 }

 .list-item:focus-visible {
     outline: 3px solid #d2e3fc;
     outline-offset: 2px;
 }

 .cta-row {
     margin-top: 18px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .book-btn {
     background: #1a73e8;
     color: #fff;
     border: none;
     border-radius: 12px;
     padding: 12px 18px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, box-shadow 0.2s;
 }

 .book-btn:hover {
     background: #1557b0;
     box-shadow: 0 6px 14px rgba(23, 78, 166, 0.18);
 }

 @media (max-width: 720px) {
     .appointment-card {
         padding: 16px;
     }

     .time-slots {
         grid-template-columns: repeat(3, 1fr);
     }

     .list-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Result Panel */
 .result-panel {
     padding: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 380px;
     background: transparent;
 }
 
 .result-card {
     width: 100%;
     max-width: 720px;
     border: 1px solid #e6e9ef;
     border-radius: 16px;
     box-shadow: 0 12px 24px rgba(23, 78, 166, 0.08);
     padding: 24px;
     background: #fff;
     text-align: center;
     animation: fadeIn 0.2s ease;
 }
 
 .result-card.success {
     border-color: #c7eac9;
     background: linear-gradient(180deg, #f6fffb 0%, #ffffff 100%);
 }
 
 .result-card.error {
     border-color: #f4c7c3;
     background: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
 }
 
 .result-icon {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin: 8px auto 16px auto;
     font-size: 28px;
     color: #fff;
 }
 
 .result-icon.success {
     background: #34a853;
 }
 
 .result-icon.error {
     background: #d93025;
 }
 
 .result-icon.loading {
     background: #1a73e8;
 }
 
 .result-title {
     font-size: 20px;
     font-weight: 600;
     color: #202124;
     margin-bottom: 8px;
 }
 
 .result-message {
     font-size: 14px;
     color: #5f6368;
     margin-bottom: 16px;
 }
 
 .result-actions {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
 }
 
 .retry-btn {
     background: #1a73e8;
     color: #fff;
     border: none;
     border-radius: 12px;
     padding: 10px 16px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, box-shadow 0.2s, transform 0.08s;
 }
 
 .retry-btn:hover {
     background: #1557b0;
     box-shadow: 0 6px 14px rgba(23, 78, 166, 0.18);
 }
 
 .retry-btn:active {
     transform: scale(0.98);
 }
 
 @media (max-width: 768px) {
     .result-panel {
         min-height: calc(100vh - 80px);
         padding: 16px;
     }
     .result-card {
         padding: 20px;
     }
 }
 
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(6px); }
     to { opacity: 1; transform: translateY(0); }
 }