:root{--primary:#0d9488;--primary-light:#14b8a6;--accent:#f59e0b;--bg:#f0fdfa;--bg-card:#fff;--text-dark:#0f172a;--text-muted:#64748b;--border:#e2e8f0;--success:#10b981;--danger:#ef4444;--radius:16px;--radius-sm:10px;--shadow:0 4px 20px rgba(0,0,0,0.08)}
*{box-sizing:border-box;margin:0;padding:0}
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
  /* Mobil Tətbiq Üçün Optimizasiyalar */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
input, textarea, select { user-select: auto; }

.top-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 5%;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.top-logo{font-size:1.3rem;font-weight:800;color:var(--text-dark);text-decoration:none;display:flex;align-items:center}
.top-logo span{color:var(--accent)}
.top-links{display:flex;gap:20px}
.top-links a{color:var(--text-muted);text-decoration:none;font-size:0.9rem;font-weight:500;transition:color 0.3s}
.top-links a:hover{color:var(--primary)}

.patient-app{max-width:800px;margin:0 auto;padding:32px 20px}
.page-header{text-align:center;margin-bottom:32px}
.page-header h1{font-size:2rem;font-weight:800;margin-bottom:8px}
.page-header p{color:var(--text-muted)}

.booking-card,.bookings-card{background:var(--bg-card);border-radius:var(--radius);padding:32px;border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:24px}
.booking-card h2,.bookings-card h2{font-size:1.3rem;font-weight:700;margin-bottom:20px;color:var(--primary)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:0.85rem;font-weight:600;color:var(--text-dark)}
.form-group input,.form-group select,.form-group textarea{padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);font-family:'Inter',sans-serif;font-size:0.95rem;outline:none;transition:border-color 0.3s;background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}
.form-group select option:disabled{color:#ef4444}
.form-group{margin-bottom:12px}

.book-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:1.05rem;font-weight:700;font-family:'Inter',sans-serif;transition:all 0.3s;margin-top:8px}
.book-btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(13,148,136,0.3)}

.booking-item{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;transition:all 0.3s}
.booking-item:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.bi-date{text-align:center;min-width:60px;padding:8px;background:linear-gradient(135deg,rgba(13,148,136,0.1),rgba(13,148,136,0.05));border-radius:10px}
.bi-day{font-size:1.5rem;font-weight:800;color:var(--primary)}
.bi-month{font-size:0.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase}
.bi-info{flex:1}
.bi-info strong{display:block;font-size:1rem;margin-bottom:4px}
.bi-info span{display:block;font-size:0.85rem;color:var(--text-muted)}
.bi-status{font-size:0.8rem;font-weight:600;padding:6px 14px;border-radius:50px;white-space:nowrap}
.bi-status.confirmed{background:rgba(16,185,129,0.1);color:var(--success)}
.bi-status.cancelled{background:rgba(239,68,68,0.1);color:var(--danger)}

.empty-msg{text-align:center;color:var(--text-muted);padding:30px;font-size:0.95rem}

.toast{position:fixed;top:24px;right:24px;z-index:9999;background:#fff;border-radius:var(--radius-sm);padding:16px 24px;box-shadow:0 10px 40px rgba(0,0,0,0.15);border-left:4px solid var(--success);transform:translateX(120%);transition:transform 0.4s ease}
.toast.show{transform:translateX(0)}
.toast h4{font-size:0.95rem;margin-bottom:4px}
.toast p{font-size:0.85rem;color:var(--text-muted)}

@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
  .top-links{display:none}
  .booking-item{flex-direction:column;text-align:center}
}