/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue-50:#f0f7ff;--blue-100:#dbeafe;--blue-200:#bfdbfe;
  --blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;
  --gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;
  --gray-900:#111827;
  --green-100:#dcfce7;--green-500:#22c55e;--green-700:#15803d;
  --red-100:#fee2e2;--red-500:#ef4444;--red-700:#b91c1c;
  --amber-100:#fef9c3;--amber-600:#d97706;
  --radius-sm:6px;--radius:10px;--radius-lg:16px;--radius-xl:24px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow:0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:0 12px 40px rgba(0,0,0,.14);
  --transition:.18s ease;

  /* Theme Colors */
  --primary: var(--blue-600);
  --primary-dark: var(--blue-700);
  --primary-light: var(--blue-100);
  --bg-app: var(--gray-50);
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --bg-soft: var(--gray-100);
  --text-main: var(--gray-800);
  --text-title: var(--gray-900);
  --text-muted: var(--gray-400);
  --border-color: var(--gray-200);
  --input-bg: #ffffff;
}

.dark-theme {
  --primary: var(--blue-500);
  --primary-dark: var(--blue-600);
  --primary-light: rgba(59, 130, 246, 0.2);
  --bg-app: #0f172a;
  --bg-card: #1e293b;
  --bg-header: #1e293b;
  --bg-soft: #334155;
  --text-main: #e2e8f0;
  --text-title: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --input-bg: #1e293b;
  
  --gray-50: #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-800: #e2e8f0;
  --gray-900: #f8fafc;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg-app);color:var(--text-main);min-height:100vh;line-height:1.5;transition: background var(--transition), color var(--transition)}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}
img{max-width:100%}

/* ── HEADER ── */
.app-header{background:var(--bg-header);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm);transition: background var(--transition), border var(--transition)}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.brand-icon svg{width:20px;height:20px}
.brand-name{display:block;font-size:1rem;font-weight:700;color:var(--text-title);line-height:1.2}
.brand-sub{display:block;font-size:.7rem;color:var(--text-muted);font-weight:400}
.main-nav{display:flex;gap:8px}
.nav-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius);font-size:.85rem;font-weight:500;color:var(--gray-500);transition:all var(--transition)}
.nav-btn svg{width:16px;height:16px;flex-shrink:0}
.nav-btn:hover{background:var(--gray-100);color:var(--gray-700)}
.nav-btn.active{background:var(--blue-50);color:var(--blue-600);font-weight:600}

/* ── MAIN ── */
.app-main{max-width:1200px;margin:0 auto;padding:32px 24px}
.view{display:none}.view.active{display:block}

/* ── CARD ── */
.card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition: background var(--transition), border var(--transition)}

/* ── THEME TOGGLE ── */
.theme-toggle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  background: var(--bg-soft);
  transition: all var(--transition);
  border: 1.5px solid var(--border-color);
}
.theme-toggle-btn:hover {
  background: var(--gray-200);
}
.theme-toggle-btn svg { width: 20px; height: 20px; }
.sun-icon { display: block; }
.moon-icon { display: none; }
.dark-theme .sun-icon { display: none; }
.dark-theme .moon-icon { display: block; }

/* ── CLIENT LAYOUT ── */
.client-layout{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start}
@media(max-width:820px){.client-layout{grid-template-columns:1fr}}

/* ── CLIENT TABS ── */
.client-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 2rem;
}
.client-tab-btn {
  padding: 10px 24px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  transition: all var(--transition);
}
.client-tab-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ── CALENDAR ── */
.calendar-panel{padding:24px}
.calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cal-nav-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:all var(--transition)}
.cal-nav-btn svg{width:18px;height:18px}
.cal-nav-btn:hover{background:var(--gray-100);color:var(--gray-800)}
.cal-title{font-size:1rem;font-weight:600;color:var(--text-main);text-transform:capitalize}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:8px}
.calendar-weekdays span{font-size:.72rem;font-weight:600;color:var(--gray-400);padding:4px 0;text-transform:uppercase}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1;border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.83rem;font-weight:500;color:var(--text-main);cursor:pointer;transition:all var(--transition);position:relative;gap:3px}
.cal-day:hover:not(.cal-empty):not(.cal-past):not(.cal-today){background:var(--blue-50);color:var(--blue-600)}
.cal-empty{cursor:default}
.cal-past{color:var(--gray-300);cursor:not-allowed}
.cal-today{background:var(--blue-600);color:#fff;font-weight:700}
.cal-today:hover{background:var(--blue-700)}
.cal-selected{background:var(--blue-100);color:var(--blue-700);font-weight:700}
.cal-dot{width:5px;height:5px;border-radius:50%}
.dot-green{background:var(--green-500)}
.dot-amber{background:#f59e0b}
.dot-red{background:var(--red-500)}
.calendar-legend{display:flex;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-color)}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-muted)}
.legend-dot{width:8px;height:8px;border-radius:50%}
.dot-available{background:var(--green-500)}
.dot-partial{background:#f59e0b}
.dot-full{background:var(--red-500)}

/* ── SLOTS ── */
.slots-panel{padding:24px;min-height:380px;display:flex;flex-direction:column}
.slots-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--gray-400);gap:12px}
.placeholder-icon svg{width:52px;height:52px;stroke:var(--gray-300)}
.slots-placeholder h3{font-size:1rem;font-weight:600;color:var(--gray-500)}
.slots-placeholder p{font-size:.85rem;max-width:220px;line-height:1.6}
.slots-content{flex:1;display:flex;flex-direction:column;gap:16px}
.slots-header{display:flex;align-items:center;justify-content:space-between}
.slots-date-info{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--text-main)}
.slots-date-info svg{width:16px;height:16px;color:var(--blue-500)}
.slots-count-badge{background:var(--blue-50);color:var(--blue-600);font-size:.75rem;font-weight:600;padding:3px 10px;border-radius:20px}
.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot-btn{padding:10px 8px;border-radius:var(--radius);border:1.5px solid var(--border-color);font-size:.82rem;font-weight:500;color:var(--text-main);text-align:center;transition:all var(--transition);cursor:pointer;background:var(--bg-card)}
.slot-btn:hover:not(.slot-taken){border-color:var(--blue-400);background:var(--blue-50);color:var(--blue-600)}
.slot-btn.slot-taken{background:var(--bg-soft);color:var(--text-muted);cursor:not-allowed;border-color:var(--border-color);text-decoration:line-through}
.hidden{display:none!important}

/* ── LOGIN ── */
.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px)}
.login-card{padding:40px;width:100%;max-width:420px}
.login-header{text-align:center;margin-bottom:28px}
.login-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--blue-100),var(--blue-200));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--blue-600)}
.login-avatar svg{width:32px;height:32px}
.login-header h2{font-size:1.4rem;font-weight:700;color:var(--text-title);margin-bottom:4px}
.login-header p{font-size:.87rem;color:var(--text-muted)}
.login-hint{font-size:.78rem;color:var(--text-muted);background:var(--bg-soft);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:16px;border:1px solid var(--border-color)}
.login-error{background:var(--red-100);color:var(--red-700);border-radius:var(--radius-sm);padding:10px 14px;font-size:.83rem;margin-bottom:16px}

/* ── FORMS ── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-group label{font-size:.82rem;font-weight:600;color:var(--text-main)}
.required{color:var(--red-500)}
.form-group input,.form-group select,.form-input,.form-select{width:100%;padding:10px 14px;border:1.5px solid var(--border-color);border-radius:var(--radius);font-size:.88rem;color:var(--text-main);background:var(--input-bg);transition:border-color var(--transition),box-shadow var(--transition);outline:none}
.form-group input:focus,.form-group select:focus,.form-input:focus,.form-select:focus{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.input-wrapper{position:relative;display:flex;align-items:center}
.input-wrapper .input-icon{position:absolute;left:12px;width:16px;height:16px;color:var(--text-muted);pointer-events:none}
.input-wrapper input{padding-left:38px}
.input-action{position:absolute;right:10px;padding:4px;color:var(--text-muted);transition:color var(--transition)}
.input-action:hover{color:var(--text-main)}
.input-action svg{width:16px;height:16px}
.field-error{font-size:.77rem;color:var(--red-500);min-height:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.form-row{grid-template-columns:1fr}}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius);font-size:.87rem;font-weight:600;transition:all var(--transition);cursor:pointer;border:none}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--blue-600);color:#fff}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 4px 12px rgba(37,99,235,.3)}
.btn-danger{background:var(--red-500);color:#fff}
.btn-danger:hover{background:var(--red-700)}
.btn-outline{background:var(--bg-card);border:1.5px solid var(--border-color);color:var(--text-main)}
.btn-outline:hover{border-color:var(--gray-400);color:var(--text-title)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{background:var(--bg-soft);color:var(--text-main)}
.btn-full{width:100%}
.btn-sm{padding:8px 14px;font-size:.8rem}

/* ── DASHBOARD ── */
.dashboard-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
@media(max-width:900px){.dashboard-layout{grid-template-columns:1fr}}

/* ═══════════════ DOCTOR SELECTION ═══════════════ */
.doctor-selection {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}
.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.section-subtitle {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 3rem;
}
.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.doctor-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.doctor-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.doc-card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  object-fit: cover;
  border: 3px solid var(--primary-light);
}
.doc-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 0.25rem;
}
.doc-card-spec {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}
.doc-card-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.doc-card-location svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

/* ═══════════════ STEPPER UTILS ═══════════════ */
.calendar-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.selected-doc-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
}
.selected-doc-mini img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* ═══════════════ LOGIN/SIGNUP FOOTER ═══════════════ */
.login-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.login-footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.login-footer a:hover {
  text-decoration: underline;
}

/* ═══════════════ CONFIGURATION ═══════════════ */
.config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 900px) {
  .config-grid { grid-template-columns: 1fr; }
}
.config-card h3 {
  margin-bottom: 1rem;
  color: var(--text-title);
  font-size: 1.2rem;
}
.config-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.availability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
}
.avail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s;
  color: var(--text-main);
}
.avail-item:hover {
  border-color: var(--primary);
  background: var(--bg-soft);
}
.avail-item.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dashboard-sidebar{padding:24px;display:flex;flex-direction:column;gap:20px;position:sticky;top:88px}
.sidebar-profile{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--border-color)}
.sidebar-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue-100),var(--blue-200));display:flex;align-items:center;justify-content:center;color:var(--blue-600);flex-shrink:0}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sidebar-avatar svg{width:22px;height:22px}
.sidebar-name{font-size:.9rem;font-weight:700;color:var(--text-title)}
.sidebar-role{font-size:.75rem;color:var(--text-muted)}
.sidebar-nav{display:flex;flex-direction:column;gap:4px}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);font-size:.85rem;font-weight:500;color:var(--text-muted);transition:all var(--transition);width:100%;text-align:left;position:relative}
.sidebar-link svg{width:17px;height:17px;flex-shrink:0}
.sidebar-link:hover{background:var(--bg-soft);color:var(--text-main)}
.sidebar-link.active{background:var(--blue-50);color:var(--blue-700);font-weight:600}
.nav-badge{margin-left:auto;background:var(--blue-600);color:#fff;border-radius:20px;font-size:.7rem;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.sidebar-footer{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--border-color);margin-top:auto}
.dashboard-content{min-width:0}
.dash-tab{display:none}.dash-tab.active{display:block}

/* ── DASH HEADER ── */
.dash-section-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dash-title{font-size:1.2rem;font-weight:700;color:var(--text-title)}
.dash-subtitle{font-size:.83rem;color:var(--text-muted);margin-top:2px}
.dash-header-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dash-header-actions .form-input,.dash-header-actions .form-select{width:auto;min-width:140px}

/* ── TODAY STATS ── */
.today-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat-chip{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:4px}
.stat-chip-value{font-size:1.6rem;font-weight:800;color:var(--text-title)}
.stat-chip-label{font-size:.77rem;color:var(--text-muted);font-weight:500}
.stat-chip.chip-blue{border-left:3px solid var(--blue-500)}
.stat-chip.chip-green{border-left:3px solid var(--green-500)}
.stat-chip.chip-red{border-left:3px solid var(--red-500)}

/* ── APPOINTMENT CARD ── */
.appointments-list{display:flex;flex-direction:column;gap:10px}
.appt-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:16px 20px;display:flex;align-items:center;gap:16px;transition:box-shadow var(--transition)}
.appt-card:hover{box-shadow:var(--shadow)}
.appt-time{font-size:1.1rem;font-weight:800;color:var(--blue-600);min-width:56px;text-align:center;background:var(--blue-50);border-radius:var(--radius-sm);padding:6px 4px}
.appt-info{flex:1;min-width:0}
.appt-name{font-size:.93rem;font-weight:700;color:var(--text-title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt-meta{font-size:.78rem;color:var(--text-muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.appt-actions{display:flex;gap:6px;flex-wrap:wrap}
.action-btn{padding:6px 12px;border-radius:var(--radius-sm);font-size:.77rem;font-weight:600;transition:all var(--transition);cursor:pointer;border:1.5px solid transparent}
.action-attend{background:var(--green-100);color:var(--green-700);border-color:var(--green-100)}
.action-attend:hover{border-color:var(--green-500)}
.action-edit{background:var(--blue-50);color:var(--blue-600);border-color:var(--blue-50)}
.action-edit:hover{border-color:var(--blue-400)}
.action-cancel{background:var(--red-100);color:var(--red-700);border-color:var(--red-100)}
.action-cancel:hover{border-color:var(--red-400)}
.status-badge{padding:3px 10px;border-radius:20px;font-size:.73rem;font-weight:700}
.badge-Reservado{background:var(--blue-100);color:var(--blue-700)}
.badge-Asistido{background:var(--green-100);color:var(--green-700)}
.badge-Cancelado{background:var(--red-100);color:var(--red-700)}

/* ── STATS GRID ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.stats-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;text-align:center}
.stats-card-value{font-size:2.4rem;font-weight:800;color:var(--blue-600);line-height:1}
.stats-card-label{font-size:.82rem;color:var(--text-muted);margin-top:8px;font-weight:500}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.45);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--bg-card);border-radius:var(--radius-xl);width:100%;max-width:520px;box-shadow:var(--shadow-lg);animation:slideUp .18s ease}
@keyframes slideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0}
.modal-title-group{display:flex;align-items:center;gap:14px}
.modal-icon{width:44px;height:44px;border-radius:12px;background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--blue-600);flex-shrink:0}
.modal-icon svg{width:22px;height:22px}
.modal-title{font-size:1.05rem;font-weight:700;color:var(--text-title)}
.modal-close-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all var(--transition)}
.modal-close-btn:hover{background:var(--bg-soft);color:var(--text-main)}
.modal-body{padding:20px 24px}
.modal-footer{padding:0 24px 24px;display:flex;justify-content:flex-end;gap:10px}
.booking-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--blue-50);border-radius:var(--radius);padding:14px 16px;margin-top:4px}
.summary-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--blue-700)}

/* ── SUCCESS ── */
.success-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(6px);z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.success-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:40px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.success-icon{width:64px;height:64px;border-radius:50%;background:var(--green-100);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--green-700)}
.success-card h2{font-size:1.3rem;font-weight:800;color:var(--text-title);margin-bottom:10px}
.success-card p{font-size:.87rem;color:var(--text-muted);line-height:1.6;margin-bottom:24px}

/* ── TOASTS ── */
#toast-container{position:fixed;bottom:24px;right:24px;z-index:400;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;font-size:.83rem;font-weight:500;min-width:260px;max-width:340px;animation:toastIn .2s ease;pointer-events:auto}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.toast-success{border-left:3px solid var(--green-500)}
.toast-info{border-left:3px solid var(--blue-500)}
.toast-error{border-left:3px solid var(--red-500)}
.toast-icon{width:18px;height:18px;flex-shrink:0}
.toast-body{flex:1}
.toast-title{font-weight:700;color:var(--text-title);margin-bottom:1px}
.toast-msg{color:var(--text-muted);font-size:.79rem}