/* ===========================
   DentAura Mini App — Styles
   =========================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --white:#ffffff;
  --bg:#f0f6ff;
  --blue-light:#e8f2ff;
  --blue-mid:#b8d4f8;
  --blue:#4a90e2;
  --blue-dark:#2563c5;
  --mint:#d4f5ec;
  --mint-mid:#6dd4b8;
  --mint-dark:#0f9b7a;
  --text-primary:#1a2640;
  --text-secondary:#4e6080;
  --text-muted:#8fa3bf;
  --shadow-sm:0 2px 12px rgba(74,144,226,0.10);
  --shadow-md:0 6px 28px rgba(74,144,226,0.15);
  --shadow-lg:0 12px 48px rgba(37,99,197,0.18);
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px;
}

html{
  height:100%;
}

body{
  font-family:'DM Sans',sans-serif;
  background:#d6e8f7;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:0;
  margin:0;
  overflow:hidden;
}

/* ======== SPLASH SCREEN ======== */
.splash{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(160deg,#e8f4ff 0%,#d4f5ec 50%,#e8f2ff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  transition:opacity .6s ease, transform .6s ease;
}
.splash.hide{
  opacity:0;
  transform:scale(1.1);
  pointer-events:none;
}
.splash-inner{
  text-align:center;
  animation:splashFadeIn .8s ease;
}
.splash-logo{
  width:72px;height:72px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
  box-shadow:0 12px 40px rgba(74,144,226,0.35);
  animation:splashPulse 2s ease-in-out infinite;
}
.splash-logo svg{fill:#fff;width:36px;height:36px}
.splash-name{
  font-family:'DM Serif Display',serif;
  font-size:32px;
  color:#1a2640;
  margin-bottom:4px;
}
.splash-tagline{
  font-size:13px;
  color:#4e6080;
  font-weight:400;
}
.splash-dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:24px;
}
.splash-dots span{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--blue);
  opacity:0.3;
  animation:dotPulse 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2){animation-delay:.2s}
.splash-dots span:nth-child(3){animation-delay:.4s}

@keyframes splashFadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes splashPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes dotPulse{
  0%,100%{opacity:0.3;transform:scale(1)}
  50%{opacity:1;transform:scale(1.3)}
}

/* ======== APP CONTAINER ======== */
.app{
  width:100%;
  max-width:420px;
  height:100vh;
  height:100dvh;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 60px rgba(37,99,197,0.15);
}

/* ======== SCREENS ======== */
.screen{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateX(100%);
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
  overflow:hidden;
}
.screen.active{
  opacity:1;
  transform:translateX(0);
  pointer-events:all;
}
.screen.slide-left{
  transform:translateX(-100%);
}

/* ======== SCREEN 1: DASHBOARD ======== */
.screen-dashboard{
  background:linear-gradient(160deg,#e8f4ff 0%,#f0f9f6 100%);
}

.dash-header{
  background:var(--white);
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e6eefc;
  flex-shrink:0;
}
.dash-logo{
  display:flex;
  align-items:center;
  gap:8px;
}
.logo-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-icon svg{fill:#fff;width:17px;height:17px}
.logo-name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}
.logo-sub{font-size:10px;color:var(--text-muted);margin-top:-1px}

.header-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.notif-bell{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  cursor:pointer;
  border-radius:50%;
  transition:background .2s;
}
.notif-bell:active{background:#f0f5ff}
.notif-bell svg{width:20px;height:20px}
.notif-dot{
  position:absolute;top:6px;right:6px;
  width:7px;height:7px;
  background:#ff4757;
  border-radius:50%;
  border:1.5px solid #fff;
}
.header-avatar{
  width:34px;height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#b8d4f8,#6dd4b8);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#1a4070;
  border:2px solid #e8f2ff;
  cursor:pointer;
  transition:transform .2s;
}
.header-avatar:active{transform:scale(0.92)}

.dash-greeting{
  padding:16px 18px 10px;
  flex-shrink:0;
}
.dash-greet-text{
  font-size:11px;color:var(--text-muted);font-weight:400;margin-bottom:2px;
}
.dash-greet-name{
  font-size:17px;font-weight:600;color:var(--text-primary);
}

/* Scrollable area for dashboard content */
.screen-dashboard{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Appointment card glass */
.appt-card{
  margin:0 16px 14px;
  background:linear-gradient(135deg,rgba(74,144,226,0.92),rgba(37,99,197,0.95));
  border-radius:var(--r-lg);
  padding:16px 18px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  cursor:pointer;
  transition:transform .2s, box-shadow .2s;
  flex-shrink:0;
}
.appt-card:active{
  transform:scale(0.98);
  box-shadow:0 4px 16px rgba(74,144,226,0.2);
}
.appt-card::before{
  content:'';position:absolute;
  top:-30px;right:-30px;
  width:120px;height:120px;
  background:rgba(255,255,255,0.1);
  border-radius:50%;
}
.appt-card::after{
  content:'';position:absolute;
  bottom:-20px;left:-10px;
  width:80px;height:80px;
  background:rgba(109,212,184,0.2);
  border-radius:50%;
}
.appt-badge{
  display:inline-block;
  background:rgba(255,255,255,0.2);
  border-radius:20px;
  padding:3px 10px;
  font-size:9px;font-weight:500;color:rgba(255,255,255,0.9);
  margin-bottom:10px;letter-spacing:.4px;text-transform:uppercase;
}
.appt-title{
  font-size:13px;font-weight:600;color:#fff;margin-bottom:3px;
}
.appt-sub{font-size:11px;color:rgba(255,255,255,0.75)}
.appt-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.15);
  position:relative;
  z-index:1;
  flex-wrap:wrap;
  gap:6px;
}
.appt-detail{
  display:flex;align-items:center;gap:5px;
}
.appt-detail-icon{
  width:22px;height:22px;
  background:rgba(255,255,255,0.15);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.appt-detail-icon svg{fill:#fff;width:11px;height:11px}
.appt-detail-text{font-size:10px;color:rgba(255,255,255,0.85);font-weight:500}
.appt-btn{
  background:rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:20px;
  padding:5px 12px;
  font-size:10px;font-weight:600;color:#fff;
  cursor:pointer;backdrop-filter:blur(8px);
  transition:background .2s;
  font-family:inherit;
}
.appt-btn:active{background:rgba(255,255,255,0.35)}

/* Quick actions */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 18px 10px;
  flex-shrink:0;
}
.section-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.section-link{font-size:10px;color:var(--blue);font-weight:500;cursor:pointer}

.quick-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;margin:0 16px 14px;
  flex-shrink:0;
}
.quick-btn{
  background:var(--white);
  border-radius:var(--r-md);
  padding:12px 14px;
  display:flex;align-items:center;gap:9px;
  box-shadow:var(--shadow-sm);
  border:1px solid #edf2fc;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.quick-btn:active{
  transform:scale(0.97);
  box-shadow:0 1px 6px rgba(74,144,226,0.08);
}
.quick-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.quick-icon svg{width:15px;height:15px}
.quick-text{font-size:10px;font-weight:600;color:var(--text-primary)}
.quick-sub{font-size:9px;color:var(--text-muted);margin-top:1px}

/* Doctors section */
.doctors-scroll{
  display:flex;gap:10px;
  padding:0 18px 16px;
  overflow-x:auto;
  flex-shrink:0;
  -webkit-overflow-scrolling:touch;
}
.doctors-scroll::-webkit-scrollbar{display:none}
.doctor-card{
  background:var(--white);
  border-radius:var(--r-md);
  padding:14px 12px 12px;
  min-width:118px;
  box-shadow:var(--shadow-sm);
  text-align:center;
  border:1px solid #edf2fc;
  flex-shrink:0;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.doctor-card:active{
  transform:scale(0.96);
}
.doctor-av{
  width:46px;height:46px;
  border-radius:50%;
  margin:0 auto 8px;
  position:relative;
}
.doc-av-img{
  width:46px;height:46px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.doc-online{
  width:10px;height:10px;
  background:#0f9b7a;
  border:2px solid #fff;
  border-radius:50%;
  position:absolute;bottom:0;right:0;
}
.doctor-name{font-size:10px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.doctor-spec{font-size:9px;color:var(--text-muted)}
.doctor-rating{
  display:flex;align-items:center;justify-content:center;gap:2px;
  margin-top:6px;
}
.star-icon{width:9px;height:9px;fill:#f5a623}
.rating-val{font-size:9px;color:var(--text-secondary);font-weight:500}

/* Nav bar */
.nav-bar{
  background:var(--white);
  display:flex;
  padding:10px 16px 14px;
  border-top:1px solid #e6eefc;
  flex-shrink:0;
  margin-top:auto;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;
  transition:opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.nav-item:active{opacity:0.6}
.nav-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.nav-icon svg{width:18px;height:18px}
.nav-label{font-size:9px;color:var(--text-muted);font-weight:500}
.nav-item.active .nav-label{color:var(--blue)}

/* ======== SCREEN 2: BOOKING ======== */
.screen-booking{
  background:var(--white);
}
.booking-header{
  background:var(--white);
  padding:14px 18px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid #edf2fc;
  flex-shrink:0;
}
.back-btn{
  width:32px;height:32px;
  background:#f0f5ff;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  cursor:pointer;
  transition:background .2s;
}
.back-btn:active{background:#dde8ff}
.back-btn svg{width:14px;height:14px;stroke:#4a90e2;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.booking-htitle{font-size:14px;font-weight:600;color:var(--text-primary)}
.booking-hsub{font-size:10px;color:var(--text-muted);margin-top:1px}

.booking-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.calendar-section{padding:12px 18px}
.cal-nav{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.cal-month{font-size:13px;font-weight:600;color:var(--text-primary)}
.cal-arrow{
  width:26px;height:26px;background:#f0f5ff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s;
}
.cal-arrow:active{background:#dde8ff}
.cal-arrow svg{width:12px;height:12px;stroke:#4a90e2;fill:none;stroke-width:2;stroke-linecap:round}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{font-size:9px;color:var(--text-muted);text-align:center;font-weight:500;padding-bottom:4px}
.cal-day{
  width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text-secondary);font-weight:400;
  border-radius:10px;cursor:pointer;
  transition:all .2s;
}
.cal-day.other{color:#c5d0df}
.cal-day.has-slot{color:var(--blue);font-weight:600;background:#f0f7ff}
.cal-day.selected{
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  color:#fff;font-weight:700;
  box-shadow:0 4px 12px rgba(74,144,226,0.35);
}
.cal-day.today{border:1.5px solid var(--blue);color:var(--blue);font-weight:600}
.cal-day:not(.other):not(.empty):active{
  transform:scale(0.9);
}

/* Time slots */
.time-section{padding:0 18px 16px}
.time-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:10px}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.time-slot{
  border:1.5px solid #e0eaf8;
  border-radius:12px;padding:8px 4px;
  text-align:center;
  font-size:10px;font-weight:600;color:var(--blue);
  background:var(--white);
  cursor:pointer;
  transition:all .2s;
}
.time-slot:active{transform:scale(0.95)}
.time-slot.taken{
  background:#f8fafc;border-color:#e8eef5;color:var(--text-muted);
  text-decoration:line-through;
  cursor:default;
}
.time-slot.selected-t{
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  border-color:transparent;color:#fff;
  box-shadow:0 3px 10px rgba(74,144,226,0.3);
}

/* Doctor mini select */
.doc-select-row{
  display:flex;gap:10px;padding:0 18px 14px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.doc-select-row::-webkit-scrollbar{display:none}
.doc-mini{
  display:flex;align-items:center;gap:7px;
  background:#f4f8ff;border-radius:20px;padding:6px 10px 6px 6px;
  flex-shrink:0;border:1.5px solid transparent;
  cursor:pointer;
  transition:all .2s;
}
.doc-mini:active{transform:scale(0.96)}
.doc-mini.selected-doc{
  background:#e8f2ff;border-color:var(--blue);
}
.doc-mini-av{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
}
.doc-mini-name{font-size:9px;font-weight:600;color:var(--text-primary)}
.doc-mini-spec{font-size:8px;color:var(--text-muted)}

.confirm-btn{
  margin:4px 18px 16px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  border-radius:var(--r-md);padding:13px 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:700;color:#fff;
  box-shadow:0 6px 20px rgba(74,144,226,0.35);cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.confirm-btn:active{
  transform:scale(0.97);
  box-shadow:0 3px 10px rgba(74,144,226,0.2);
}

/* ======== SCREEN 3: MESSAGES ======== */
.screen-messages{
  background:#f7fbff;
}
.messages-header{
  background:#fff;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #edf2fc;
  flex-shrink:0;
}
.chat-status{
  margin:12px 16px 8px;
  background:#fff;
  border:1px solid #edf2fc;
  border-radius:var(--r-md);
  padding:11px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  box-shadow:var(--shadow-sm);
  flex-shrink:0;
}
.chat-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--mint-dark);
  box-shadow:0 0 0 5px rgba(15,155,122,0.1);
  flex-shrink:0;
}
.chat-status-title{font-size:11px;font-weight:800;color:var(--text-primary)}
.chat-status-sub{font-size:9px;color:var(--text-muted);margin-top:1px}
.chat-list{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.chat-message{
  display:flex;
  width:100%;
}
.chat-message.user{justify-content:flex-end}
.chat-message.clinic{justify-content:flex-start}
.chat-bubble{
  max-width:82%;
  border-radius:18px;
  padding:9px 11px 7px;
  box-shadow:var(--shadow-sm);
}
.chat-message.user .chat-bubble{
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  color:#fff;
  border-bottom-right-radius:6px;
}
.chat-message.clinic .chat-bubble{
  background:#fff;
  color:var(--text-primary);
  border:1px solid #edf2fc;
  border-bottom-left-radius:6px;
}
.chat-text{
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.chat-time{
  font-size:8px;
  opacity:.7;
  text-align:right;
  margin-top:4px;
}
.chat-form{
  display:flex;
  gap:8px;
  padding:10px 16px;
  background:#fff;
  border-top:1px solid #edf2fc;
  flex-shrink:0;
}
.chat-input{
  min-width:0;
  flex:1;
  border:1.5px solid #e1eaf8;
  background:#f7fbff;
  border-radius:999px;
  padding:11px 13px;
  font-family:inherit;
  font-size:12px;
  color:var(--text-primary);
  outline:none;
}
.chat-input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(74,144,226,0.1);
}
.chat-send{
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  box-shadow:0 5px 16px rgba(74,144,226,0.28);
}

/* ======== SCREEN 3: DOCTOR PROFILE ======== */
.screen-profile{
  background:var(--white);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.profile-hero{
  background:linear-gradient(160deg,#e8f4ff 0%,#d4f5ec 100%);
  padding:20px 20px 0;
  text-align:center;position:relative;
  flex-shrink:0;
}
.profile-back{
  position:absolute;top:16px;left:16px;
  width:30px;height:30px;
  background:rgba(255,255,255,0.8);
  border-radius:10px;backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s;
  z-index:2;
}
.profile-back:active{background:rgba(255,255,255,1)}
.profile-back svg{width:12px;height:12px;stroke:#4a90e2;fill:none;stroke-width:2.5;stroke-linecap:round}
.profile-av-wrap{
  width:80px;height:80px;margin:0 auto 10px;position:relative;
}
.profile-av{
  width:80px;height:80px;border-radius:50%;
  background:linear-gradient(135deg,#b8d4f8,#6dd4b8);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;color:#1a4070;
  border:3px solid #fff;
  box-shadow:0 4px 20px rgba(74,144,226,0.25);
}
.profile-verify{
  position:absolute;bottom:0;right:0;
  width:22px;height:22px;
  background:var(--blue);
  border-radius:50%;
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
}
.profile-verify svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.profile-name{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.profile-spec{font-size:11px;color:var(--text-muted);margin-bottom:8px}
.profile-tags{
  display:flex;gap:6px;justify-content:center;margin-bottom:14px;
  flex-wrap:wrap;
}
.profile-tag{
  background:rgba(74,144,226,0.12);
  border-radius:20px;padding:3px 10px;
  font-size:9px;font-weight:600;color:var(--blue);
}
.profile-tag.mint{background:rgba(15,155,122,0.1);color:var(--mint-dark)}

.profile-stats{
  display:flex;padding:0;margin-bottom:0;
  border-top:1px solid rgba(74,144,226,0.1);
}
.p-stat{
  flex:1;padding:12px 8px;text-align:center;
  border-right:1px solid rgba(74,144,226,0.08);
}
.p-stat:last-child{border-right:none}
.p-stat-val{font-size:14px;font-weight:700;color:var(--text-primary)}
.p-stat-lab{font-size:9px;color:var(--text-muted);margin-top:1px}

.profile-body{
  padding:16px 18px;
}
.info-card{
  background:#f4f8ff;
  border-radius:var(--r-md);padding:14px 14px;margin-bottom:12px;
}
.info-card-title{font-size:11px;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.info-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.info-row:last-child{margin-bottom:0}
.info-dot{
  width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;
}
.info-text{font-size:10px;color:var(--text-secondary);line-height:1.4}

.review-row{
  display:flex;gap:6px;
  margin-bottom:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.review-row::-webkit-scrollbar{display:none}
.review-card{
  background:var(--white);
  border:1px solid #e8f0fc;
  border-radius:var(--r-sm);
  padding:10px 12px;
  min-width:170px;
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
}
.rev-header{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.rev-av{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
  flex-shrink:0;
}
.rev-name{font-size:10px;font-weight:600;color:var(--text-primary)}
.rev-stars{display:flex;gap:1px}
.rev-star{width:8px;height:8px;fill:#f5a623}
.rev-text{font-size:9px;color:var(--text-secondary);line-height:1.5}

.book-fixed{
  margin:0 0 16px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  border-radius:var(--r-md);padding:13px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 6px 20px rgba(74,144,226,0.35);cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.book-fixed:active{
  transform:scale(0.98);
  box-shadow:0 3px 10px rgba(74,144,226,0.2);
}
.book-fixed-text{font-size:12px;font-weight:700;color:#fff}
.book-fixed-sub{font-size:9px;color:rgba(255,255,255,0.7)}
.book-fixed-arrow{
  width:28px;height:28px;
  background:rgba(255,255,255,0.2);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.book-fixed-arrow svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ======== 3D Tooth ======== */
.tooth-3d{margin:0 auto;display:block;}

/* ======== SCREEN 4: CLIENT PROFILE ======== */
.screen-client{
  background:#f7fbff;
}
.client-header{
  position:relative;
  padding:22px 18px 16px;
  text-align:center;
  overflow:hidden;
  flex-shrink:0;
  background:linear-gradient(160deg,#e8f4ff 0%,#edf9f6 100%);
  border-bottom:1px solid #e6eefc;
}
.client-header-bg{
  position:absolute;
  inset:auto -36px -62px;
  height:120px;
  background:rgba(74,144,226,0.09);
  border-radius:50%;
}
.client-av-wrap{
  position:relative;
  width:78px;
  margin:0 auto 10px;
  z-index:1;
}
.client-av{
  width:78px;height:78px;
  border-radius:50%;
  background:linear-gradient(135deg,#b8d4f8,#6dd4b8);
  border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;color:#1a4070;
  box-shadow:0 8px 24px rgba(74,144,226,0.22);
}
.client-level-badge{
  position:absolute;
  right:-10px;bottom:2px;
  display:flex;align-items:center;gap:3px;
  background:#fff;
  color:#8a5b00;
  border:1px solid #ffe1a1;
  border-radius:999px;
  padding:4px 7px;
  font-size:8px;font-weight:700;
  box-shadow:var(--shadow-sm);
}
.client-name{position:relative;z-index:1;font-size:17px;font-weight:700;color:var(--text-primary)}
.client-since{position:relative;z-index:1;font-size:10px;color:var(--text-muted);margin-top:2px}
.client-contact-row{
  position:relative;z-index:1;
  display:flex;gap:7px;justify-content:center;flex-wrap:wrap;
  margin-top:12px;
}
.client-contact-chip{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.76);
  border:1px solid rgba(74,144,226,0.14);
  border-radius:999px;
  padding:6px 9px;
  font-size:9px;font-weight:600;color:var(--text-secondary);
}
.client-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 18px;
}
.client-stats{
  background:#fff;
  border:1px solid #edf2fc;
  border-radius:var(--r-md);
  display:flex;align-items:center;
  padding:12px 8px;
  box-shadow:var(--shadow-sm);
  margin-bottom:12px;
}
.client-stat{flex:1;text-align:center}
.client-stat-val{font-size:15px;font-weight:800;color:var(--text-primary)}
.client-stat-lab{font-size:9px;color:var(--text-muted);margin-top:2px}
.client-stat-divider{width:1px;height:28px;background:#e8eef8}
.bonus-card,
.dental-card,
.settings-list{
  background:#fff;
  border:1px solid #edf2fc;
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  margin-bottom:12px;
}
.bonus-card{padding:14px}
.bonus-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.bonus-card-title{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--text-primary);
}
.bonus-tier{
  background:#fff6dc;
  color:#8a5b00;
  border-radius:999px;
  padding:4px 9px;
  font-size:9px;font-weight:800;
}
.bonus-progress-bar{
  height:8px;
  background:#eef3fa;
  border-radius:999px;
  overflow:hidden;
}
.bonus-progress-fill{
  height:100%;
  background:linear-gradient(90deg,#f5a623,#6dd4b8);
  border-radius:inherit;
}
.bonus-progress-labels{
  display:flex;align-items:center;justify-content:space-between;
  color:var(--text-muted);
  font-size:9px;font-weight:600;
  margin-top:6px;
}
.bonus-next-tier{color:var(--mint-dark)}
.bonus-perks{
  display:grid;
  gap:7px;
  margin-top:12px;
}
.bonus-perk{
  display:flex;align-items:center;gap:6px;
  font-size:10px;color:var(--text-secondary);
}
.bonus-perk-locked{color:var(--text-muted)}
.history-tabs{
  display:flex;gap:7px;
  overflow-x:auto;
  padding-bottom:10px;
  -webkit-overflow-scrolling:touch;
}
.history-tabs::-webkit-scrollbar{display:none}
.history-tab{
  flex-shrink:0;
  border:1px solid #e1eaf8;
  background:#fff;
  color:var(--text-muted);
  border-radius:999px;
  padding:7px 11px;
  font-size:9px;font-weight:700;
  cursor:pointer;
  transition:all .2s;
}
.history-tab.active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 4px 12px rgba(74,144,226,0.22);
}
.history-list{
  display:grid;
  gap:9px;
  margin-bottom:12px;
}
.history-card{
  background:#fff;
  border:1px solid #edf2fc;
  border-radius:var(--r-md);
  padding:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:var(--shadow-sm);
}
.history-main{display:flex;align-items:center;gap:9px;min-width:0}
.history-av{
  width:38px;height:38px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;
  flex-shrink:0;
}
.history-copy{min-width:0}
.history-proc{
  font-size:11px;font-weight:700;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-doc,
.history-meta{
  font-size:9px;color:var(--text-muted);
  margin-top:2px;
}
.history-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex-shrink:0;
}
.history-status{
  border-radius:999px;
  padding:3px 7px;
  font-size:8px;font-weight:800;
  background:#eef5ff;color:var(--blue);
}
.history-status.completed{background:#edf9f6;color:var(--mint-dark)}
.history-status.cancelled{background:#fff0f2;color:#ff4757}
.history-action{
  border:0;
  background:#f0f5ff;
  color:var(--blue);
  border-radius:999px;
  padding:5px 9px;
  font-family:inherit;
  font-size:9px;font-weight:800;
  cursor:pointer;
}
.history-empty{
  background:#fff;
  border:1px dashed #dce7f6;
  border-radius:var(--r-md);
  padding:18px;
  text-align:center;
  font-size:10px;
  color:var(--text-muted);
}
.dental-card{padding:4px 12px}
.dental-card-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;
  border-bottom:1px solid #edf2fc;
}
.dental-card-row:last-child{border-bottom:0}
.dental-card-icon{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dental-card-label{font-size:9px;color:var(--text-muted)}
.dental-card-value{font-size:11px;font-weight:700;color:var(--text-primary);margin-top:1px}
.settings-list{overflow:hidden}
.settings-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid #edf2fc;
  cursor:pointer;
}
.settings-item:last-child{border-bottom:0}
.settings-item-left{
  display:flex;align-items:center;gap:9px;
  font-size:11px;font-weight:700;color:var(--text-primary);
}
.settings-icon{
  width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.toggle-switch{
  width:42px;height:24px;
  border-radius:999px;
  background:#dce7f6;
  padding:3px;
  transition:background .2s;
  flex-shrink:0;
}
.toggle-switch.active{background:var(--blue)}
.toggle-knob{
  width:18px;height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(26,38,64,0.16);
  transition:transform .2s;
}
.toggle-switch.active .toggle-knob{transform:translateX(18px)}
.logout-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:#fff;
  border:1px solid #ffe0e5;
  border-radius:var(--r-md);
  padding:12px;
  color:#ff4757;
  font-size:11px;font-weight:800;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

/* ======== REVIEW MODAL ======== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(26,38,64,0.28);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  z-index:200;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.show{
  opacity:1;
  pointer-events:all;
}
.modal-card{
  width:100%;
  max-width:388px;
  background:#fff;
  border-radius:24px;
  padding:18px;
  box-shadow:0 18px 60px rgba(26,38,64,0.25);
  position:relative;
  transform:translateY(16px);
  transition:transform .25s ease;
}
.modal-overlay.show .modal-card{transform:translateY(0)}
.modal-close{
  position:absolute;
  top:14px;right:14px;
  width:30px;height:30px;
  border-radius:50%;
  background:#f4f8ff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.modal-title{font-size:15px;font-weight:800;color:var(--text-primary);margin-bottom:12px}
.modal-doc-info{
  display:flex;align-items:center;gap:10px;
  background:#f7fbff;
  border-radius:var(--r-md);
  padding:10px;
  margin-bottom:14px;
}
.modal-doc-av{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  background:linear-gradient(135deg,#b8d4f8,#d4e8ff);
  color:#1a4070;
  flex-shrink:0;
}
.modal-doc-name{font-size:11px;font-weight:800;color:var(--text-primary)}
.modal-doc-proc{font-size:9px;color:var(--text-muted);margin-top:2px}
.modal-label{font-size:10px;font-weight:800;color:var(--text-primary);margin:10px 0 7px}
.modal-stars{display:flex;gap:7px;margin-bottom:4px}
.modal-star{
  width:26px;height:26px;
  fill:#d5deeb;
  cursor:pointer;
  transition:fill .15s, transform .15s;
}
.modal-star.active{fill:#f5a623}
.modal-star:active{transform:scale(0.9)}
.modal-textarea{
  width:100%;
  resize:none;
  border:1.5px solid #e1eaf8;
  border-radius:var(--r-sm);
  padding:10px;
  font-family:inherit;
  font-size:11px;
  color:var(--text-primary);
  outline:none;
}
.modal-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(74,144,226,0.1)}
.modal-submit{
  margin-top:12px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  color:#fff;
  border-radius:var(--r-md);
  padding:12px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11px;font-weight:800;
  cursor:pointer;
}

.appointment-modal-card{padding-bottom:16px}
.appt-modal-summary{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border-radius:var(--r-md);
  background:linear-gradient(135deg,#eef5ff,#edf9f6);
  margin-bottom:12px;
}
.appt-modal-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.appt-modal-title{
  font-size:13px;
  font-weight:800;
  color:var(--text-primary);
}
.appt-modal-doctor{
  font-size:10px;
  color:var(--text-muted);
  margin-top:2px;
}
.appt-modal-details{
  border:1px solid #edf2fc;
  border-radius:var(--r-md);
  overflow:hidden;
  margin-bottom:12px;
}
.appt-modal-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border-bottom:1px solid #edf2fc;
}
.appt-modal-row:last-child{border-bottom:0}
.appt-modal-row span{
  font-size:10px;
  color:var(--text-muted);
}
.appt-modal-row strong{
  text-align:right;
  font-size:10px;
  color:var(--text-primary);
  line-height:1.35;
}
.appt-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.modal-primary-btn,
.modal-secondary-btn{
  border:0;
  border-radius:var(--r-md);
  padding:12px 10px;
  font-family:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.modal-primary-btn{
  background:linear-gradient(135deg,#4a90e2,#2563c5);
  color:#fff;
  box-shadow:0 5px 16px rgba(74,144,226,0.25);
}
.modal-secondary-btn{
  background:#f0f5ff;
  color:var(--blue);
}

/* ======== TOAST ======== */
.toast{
  position:fixed;
  bottom:-80px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#0f9b7a,#0a7d62);
  color:#fff;
  padding:12px 20px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 30px rgba(15,155,122,0.35);
  transition:bottom .5s cubic-bezier(.34,1.56,.64,1);
  z-index:100;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  pointer-events:none;
}
.toast.show{
  bottom:40px;
}
.toast-icon{
  width:22px;height:22px;
  background:rgba(255,255,255,0.2);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.toast-icon svg{width:12px;height:12px}

/* ======== SAFE AREA ======== */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  .nav-bar{
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
  }
}

/* ======== RESPONSIVE ======== */
@media(min-width:421px){
  body{
    background:#d6e8f7;
  }
  .app{
    border-radius:40px;
    height:min(100vh, 720px);
    margin:auto;
    border:6px solid #c8dff7;
  }
}