*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-family); font-size: 1rem; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); min-height: 100vh; }

/* Header */
.header { background: var(--iwo-primary); color: var(--text-white); padding: var(--spacing-md); position: sticky; top: 0; z-index: 200; box-shadow: var(--shadow-md); }
.header__container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; }
.header__logo a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; }
.header__title { font-size: 1.1rem; font-weight: 500; display: none; }
.header__user { display: flex; align-items: center; gap: 8px; }
.header__user-info { display: flex; align-items: center; gap: 8px; }
.header__user-name { font-size: 0.875rem; }
.header__user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--iwo-secondary); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.875rem; }
.header__user-btn { background: var(--iwo-secondary); color: var(--text-white); border: none; padding: 6px 12px; border-radius: var(--border-radius); font-size: 0.8rem; cursor: pointer; }

/* Main */
.main { padding: var(--spacing-md); max-width: 1200px; margin: 0 auto; }

/* Card */
.card { background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); }
.card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border-color); }
.card__title { font-size: 1.1rem; font-weight: 600; }

/* Forms */
.form-group { margin-bottom: var(--spacing-md); }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 4px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--iwo-primary); box-shadow: 0 0 0 3px rgba(55,89,70,0.1); }
.form-textarea { min-height: 80px; resize: vertical; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; font-size: 1rem; font-weight: 500; text-decoration: none; border: none; border-radius: var(--border-radius); cursor: pointer; transition: all 0.15s; }
.btn--primary { background: var(--iwo-primary); color: var(--text-white); }
.btn--primary:hover { background: var(--iwo-primary-dark); }
.btn--secondary { background: var(--iwo-secondary); color: var(--text-white); }
.btn--secondary:hover { background: var(--iwo-secondary-dark); }
.btn--outline { background: transparent; border: 2px solid var(--iwo-primary); color: var(--iwo-primary); }
.btn--outline:hover, .btn--outline.active { background: var(--iwo-primary); color: var(--text-white); }
.btn--danger { background: var(--color-danger); color: var(--text-white); }
.btn--block { width: 100%; }
.btn--lg { padding: 12px 20px; font-size: 1.1rem; }
.btn--sm { padding: 4px 8px; font-size: 0.875rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Calendar */
.calendar { background: var(--bg-card); border-radius: var(--border-radius-lg); overflow: hidden; }
.calendar__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); background: var(--iwo-primary); color: var(--text-white); }
.calendar__title { font-size: 1.1rem; font-weight: 600; }
.calendar__nav-btn { background: none; border: none; color: var(--text-white); font-size: 1.5rem; cursor: pointer; padding: 4px; opacity: 0.8; }
.calendar__nav-btn:hover { opacity: 1; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-color); }
.calendar__day-name { padding: 8px; text-align: center; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-card); }
.calendar__day { padding: 8px; text-align: center; background: var(--bg-card); cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: center; }
.calendar__day:hover { background: var(--bg-primary); }
.calendar__day--disabled { color: var(--text-muted); cursor: not-allowed; }
.calendar__day--selected { background: var(--iwo-primary); color: var(--text-white); }
.calendar__day--today { font-weight: bold; border: 2px solid var(--iwo-secondary); }

/* Slots */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.slot { padding: 8px; text-align: center; background: var(--color-success); color: var(--text-white); border-radius: var(--border-radius); cursor: pointer; font-weight: 500; }
.slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.slot--selected { background: var(--iwo-primary); box-shadow: 0 0 0 3px var(--iwo-secondary); }

/* Appointment cards */
.appointment-card { background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: var(--spacing-md); border-left: 4px solid var(--iwo-primary); margin-bottom: var(--spacing-md); }
.appointment-card--cancelled { border-left-color: var(--text-muted); opacity: 0.7; }
.appointment-card__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.appointment-card__title { font-size: 1.1rem; font-weight: 600; }
.appointment-card__status { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; font-weight: 500; }
.appointment-card__status--active { background: var(--color-success); color: var(--text-white); }
.appointment-card__status--cancelled { background: var(--text-muted); color: var(--text-white); }
.appointment-card__details { font-size: 0.875rem; color: var(--text-secondary); }
.appointment-card__detail { margin-bottom: 4px; }
.appointment-card__actions { display: flex; gap: 8px; margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border-color); }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 400; opacity: 0; visibility: hidden; transition: all 0.3s; }
.modal-backdrop--active { opacity: 1; visibility: visible; }
.modal { background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; transform: translateY(-20px); transition: transform 0.3s; }
.modal-backdrop--active .modal { transform: translateY(0); }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg); border-bottom: 1px solid var(--border-color); }
.modal__title { font-size: 1.25rem; font-weight: 600; }
.modal__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); }
.modal__body { padding: var(--spacing-lg); }
.modal__footer { display: flex; justify-content: flex-end; gap: 8px; padding: var(--spacing-lg); border-top: 1px solid var(--border-color); }

/* Login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, var(--iwo-primary) 0%, var(--iwo-primary-dark) 100%); }
.login__card { background: var(--bg-card); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 32px; width: 100%; max-width: 400px; }
.login__logo { text-align: center; margin-bottom: 24px; }
.login__logo img { max-height: 80px; width: auto; }
.login__title { text-align: center; font-size: 1.25rem; margin-bottom: 24px; }

/* Alerts */
.alert { padding: 12px; border-radius: var(--border-radius); margin-bottom: 16px; }
.alert--error { background: rgba(231,76,60,0.1); border: 1px solid var(--color-danger); color: #721c24; }
.alert--success { background: rgba(26,200,122,0.1); border: 1px solid var(--color-success); color: #155724; }

/* Utils */
.text-center { text-align: center; }
.hidden { display: none !important; }