/* ============================================================
   BREAK THE CIRCLE — UI Components
   ============================================================ */

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
  user-select: none;
  text-decoration: none;
  line-height: 1;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t-fast);
}
.btn:hover::after { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Primary */
.btn-primary {
  background: var(--clr-primary);
  color: white;
  border-color: var(--clr-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--clr-primary-hover);
  border-color: var(--clr-primary-hover);
  box-shadow: var(--glow-md);
  transform: translateY(-1px);
  color: white;
}

/* Secondary */
.btn-secondary {
  background: var(--bg-card);
  color: var(--clr-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--clr-primary-glow);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--text-sub);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--border); color: var(--text); }

/* Danger */
.btn-danger {
  background: var(--clr-error);
  color: white;
  border-color: var(--clr-error);
}
.btn-danger:hover { box-shadow: 0 0 20px rgba(239,68,68,.35); }

/* Sizes */
.btn-sm  { padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); }
.btn-lg  { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); border-radius: var(--r-lg); }
.btn-xl  { padding: var(--sp-5) var(--sp-10); font-size: var(--text-lg); border-radius: var(--r-lg); }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--r-md); }
.btn-icon-sm { width: 32px; height: 32px; padding: 0; border-radius: var(--r-sm); }

/* Google OAuth */
.btn-google {
  background: var(--bg-surface);
  color: var(--text);
  border-color: var(--border-strong);
  gap: var(--sp-3);
  font-weight: 600;
}
.btn-google:hover { box-shadow: var(--shadow-md); background: var(--bg-card); }

/* Loading state */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
.btn-secondary.is-loading::before,
.btn-ghost.is-loading::before { border-top-color: var(--clr-primary); }

/* ===== THEME TOGGLE ===== */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--clr-primary);
  border-color: var(--clr-primary);
  box-shadow: var(--glow-xs);
}
.theme-toggle svg { width: 18px; height: 18px; }

/* ===== CARDS ===== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: all var(--t-base);
}
.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--glow-xs), var(--shadow-md);
  transform: translateY(-2px);
}
.card-glow {
  border-color: var(--border-strong);
  box-shadow: var(--glow-sm);
}
.card-green {
  background: linear-gradient(135deg, var(--clr-primary-glow) 0%, var(--bg-surface) 60%);
  border-color: var(--border-strong);
}
.card-dark {
  background: linear-gradient(135deg, #0c1a0e 0%, #071009 100%);
  border-color: rgba(34,197,94,.15);
}

/* Glass card */
.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
}

/* ===== STAT CARDS ===== */
.stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  position: relative;
  overflow: hidden;
  transition: all var(--t-base);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary), transparent);
}
.stat-card:hover { border-color: var(--border-strong); box-shadow: var(--glow-xs); }
.stat-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--clr-primary-glow);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-primary);
  margin-bottom: var(--sp-3);
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-value {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--clr-primary);
  line-height: 1;
  margin-bottom: var(--sp-1);
}
.stat-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }
.stat-delta {
  font-size: var(--text-xs);
  color: var(--clr-success);
  margin-top: var(--sp-2);
  display: flex; align-items: center; gap: 3px;
}

/* ===== FORM ELEMENTS ===== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-sub);
}
.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  transition: all var(--t-fast);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-glow);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input.error { border-color: var(--clr-error); }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }

.form-error {
  font-size: var(--text-xs);
  color: var(--clr-error);
  display: flex; align-items: center; gap: var(--sp-1);
}
.form-error svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
}
.toggle-row-info { flex: 1; }
.toggle-row-info strong { font-size: var(--text-sm); display: block; }
.toggle-row-info span  { font-size: var(--text-xs); color: var(--text-muted); }

.toggle {
  position: relative;
  width: 46px; height: 26px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border-strong);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider {
  background: var(--clr-primary);
  box-shadow: var(--glow-xs);
}
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Radio pills */
.radio-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.radio-pill input { display: none; }
.radio-pill label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.radio-pill label:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.radio-pill input:checked + label {
  background: var(--clr-primary-glow);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  font-weight: 600;
  box-shadow: var(--glow-xs);
}

/* Checkbox pills */
.check-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.check-pill input { display: none; }
.check-pill label {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-sub);
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
.check-pill label:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.check-pill input:checked + label {
  background: var(--clr-primary-glow);
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  font-weight: 600;
}

/* Number stepper */
.num-stepper {
  display: flex; align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-card);
  width: fit-content;
}
.num-stepper:focus-within { border-color: var(--clr-primary); box-shadow: 0 0 0 3px var(--clr-primary-glow); }
.num-stepper button {
  padding: var(--sp-3) var(--sp-4);
  font-size: 1.15rem; font-weight: 700;
  color: var(--clr-primary);
  background: transparent;
  transition: background var(--t-fast);
}
.num-stepper button:hover { background: var(--border); }
.num-stepper input {
  width: 70px; text-align: center;
  border: none; background: transparent;
  font-weight: 700; font-size: var(--text-base);
  color: var(--text); outline: none;
}

/* ===== BADGES ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--sp-3);
  border-radius: var(--r-full);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
}
.badge-green   { background: var(--clr-primary-glow);       color: var(--clr-primary); border: 1px solid var(--border-strong); }
.badge-warning { background: rgba(245,158,11,.14);           color: #d97706;            border: 1px solid rgba(245,158,11,.3); }
.badge-error   { background: rgba(239,68,68,.12);            color: #dc2626;            border: 1px solid rgba(239,68,68,.25); }
.badge-info    { background: rgba(56,189,248,.12);           color: #0ea5e9;            border: 1px solid rgba(56,189,248,.25); }
.badge-muted   { background: var(--bg-card);                 color: var(--text-muted);  border: 1px solid var(--border); }

/* Rank badges */
.rank-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--text-xs);
  flex-shrink: 0;
}
.rank-badge.r1 { background: linear-gradient(135deg,#FFD700,#FFA500); color: white; box-shadow: 0 0 14px rgba(255,215,0,.5); }
.rank-badge.r2 { background: linear-gradient(135deg,#C0C0C0,#9CA3AF); color: white; box-shadow: 0 0 10px rgba(192,192,192,.4); }
.rank-badge.r3 { background: linear-gradient(135deg,#CD7F32,#A0522D); color: white; box-shadow: 0 0 10px rgba(205,127,50,.4); }
.rank-badge.other { background: var(--bg-card); color: var(--text-muted); border: 1px solid var(--border); }

/* ===== STREAK DISPLAY ===== */
.streak-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(135deg, rgba(239,68,68,.1), rgba(245,158,11,.1));
  border: 1px solid rgba(239,68,68,.2);
  border-radius: var(--r-full);
}
.streak-fire  { font-size: 1.3em; line-height: 1; }
.streak-count { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--text); line-height: 1; }
.streak-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }

/* ===== LEADERBOARD ===== */
.lb-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  transition: background var(--t-fast);
  cursor: pointer;
  text-decoration: none;
}
.lb-item:hover { background: var(--border); }
.lb-item.is-me {
  background: var(--clr-primary-glow);
  border: 1px solid var(--border-strong);
}
.lb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.lb-avatar-fallback {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--clr-primary-glow);
  border: 2px solid var(--clr-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-sm);
  color: var(--clr-primary);
  flex-shrink: 0;
}
.lb-info { flex: 1; min-width: 0; }
.lb-name {
  font-weight: 600; font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-sub  { font-size: var(--text-xs); color: var(--text-muted); }
.lb-pts  { font-weight: 800; font-size: var(--text-sm); color: var(--clr-primary); white-space: nowrap; }

/* ===== TABS ===== */
.tabs {
  display: flex; gap: 2px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.tab-btn {
  flex: 1;
  padding: var(--sp-2) var(--sp-4);
  border-radius: calc(var(--r-md) - 2px);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted);
  background: transparent; border: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.tab-btn.active {
  background: var(--bg-surface);
  color: var(--clr-primary);
  box-shadow: var(--shadow-sm);
}

/* ===== ALERTS / BANNERS ===== */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  border-left: 4px solid;
}
.alert-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.alert-warning { background: rgba(245,158,11,.1); border-color: #f59e0b; }
.alert-warning .alert-icon { color: #f59e0b; }
.alert-success { background: var(--clr-primary-glow); border-color: var(--clr-primary); }
.alert-success .alert-icon { color: var(--clr-primary); }
.alert-error   { background: rgba(239,68,68,.1); border-color: var(--clr-error); }
.alert-error .alert-icon  { color: var(--clr-error); }
.alert-info    { background: rgba(56,189,248,.1); border-color: var(--clr-info); }
.alert-info .alert-icon   { color: var(--clr-info); }

/* ===== LOADER ===== */
.loader {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--clr-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.loader-sm { width: 20px; height: 20px; border-width: 2px; }
.loader-wrap {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ===== DIVIDER ===== */
.divider {
  display: flex; align-items: center; gap: var(--sp-4);
  color: var(--text-muted); font-size: var(--text-sm);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}

/* ===== AVATAR ===== */
.avatar {
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--border-strong);
  display: block;
}
.avatar-sm  { width: 32px;  height: 32px;  }
.avatar-md  { width: 44px;  height: 44px;  }
.avatar-lg  { width: 72px;  height: 72px;  }
.avatar-xl  { width: 96px;  height: 96px;  }
.avatar-fallback {
  border-radius: 50%;
  background: var(--clr-primary-glow);
  border: 2px solid var(--clr-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--font-serif);
  color: var(--clr-primary);
}

/* ===== ACCORDION (FAQ) ===== */
.accordion-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.accordion-item.open { border-color: var(--border-strong); box-shadow: var(--glow-xs); }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-weight: 600; font-size: var(--text-base); color: var(--text);
  background: var(--bg-surface);
  cursor: pointer;
  transition: background var(--t-fast);
  border: none;
  font-family: var(--font-sans);
}
.accordion-trigger:hover { background: var(--bg-card); }
.accordion-chevron {
  width: 20px; height: 20px;
  color: var(--clr-primary);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-slow);
}
.accordion-item.open .accordion-body { max-height: 500px; }
.accordion-content {
  padding: var(--sp-5) var(--sp-6);
  color: var(--text-sub); font-size: var(--text-sm); line-height: 1.75;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}

/* ===== POINTS PREVIEW ===== */
.points-preview-box {
  background: linear-gradient(135deg, var(--clr-primary-glow), var(--bg-card));
  border: 2px solid var(--clr-primary);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  box-shadow: var(--glow-md);
  position: sticky;
  top: var(--sp-6);
}
.points-preview-val {
  font-family: var(--font-serif);
  font-size: var(--text-7xl);
  color: var(--clr-primary);
  line-height: 1;
  text-shadow: 0 0 30px rgba(34,197,94,.4);
}
.points-preview-label { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--sp-2); }
.points-breakdown { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; }
.points-row { display: flex; justify-content: space-between; font-size: var(--text-xs); }
.points-row-label { color: var(--text-muted); }
.points-row-val   { color: var(--clr-primary); font-weight: 700; }

/* ===== TESTIMONIAL CARD ===== */
.testimonial-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  position: relative;
  transition: all var(--t-base);
}
.testimonial-card:hover { border-color: var(--border-strong); box-shadow: var(--glow-xs), var(--shadow-md); }
.testimonial-card::before {
  content: '\201C';
  position: absolute; top: var(--sp-6); right: var(--sp-6);
  font-family: var(--font-serif); font-size: 5rem; line-height: 1;
  color: var(--clr-primary-glow-mid);
}
.testimonial-text { font-size: var(--text-base); color: var(--text-sub); line-height: 1.75; margin-bottom: var(--sp-6); }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial-author-info strong { font-size: var(--text-sm); display: block; }
.testimonial-author-info span   { font-size: var(--text-xs); color: var(--text-muted); }

/* ===== FEATURE CARD ===== */
.feature-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--clr-primary-glow) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.feature-card:hover { border-color: var(--border-strong); box-shadow: var(--glow-sm), var(--shadow-lg); transform: translateY(-4px); }
.feature-card:hover::after { opacity: 1; }
.feature-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: var(--clr-primary-glow);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-primary);
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border-strong);
  position: relative; z-index: 1;
}
.feature-icon svg  { width: 26px; height: 26px; }
.feature-title { font-size: var(--text-xl); margin-bottom: var(--sp-3); position: relative; z-index: 1; }
.feature-desc  { font-size: var(--text-sm); color: var(--text-sub); line-height: 1.7; position: relative; z-index: 1; }

/* ===== STEP CARD (How It Works) ===== */
.step-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-8) var(--sp-6);
  position: relative;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: white;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
  box-shadow: var(--glow-md);
  position: relative; z-index: 1;
}
.step-title { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.step-desc  { font-size: var(--text-sm); color: var(--text-sub); line-height: 1.7; }
/* Connecting line between steps */
.steps-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; position: relative; }
.steps-container::before {
  content: '';
  position: absolute;
  top: calc(var(--sp-8) + 28px);
  left: calc(33.33% - 28px); right: calc(33.33% - 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary));
  border-style: dashed;
  opacity: .3;
}
@media (max-width: 768px) {
  .steps-container { grid-template-columns: 1fr; }
  .steps-container::before { display: none; }
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4);
  animation: fadeIn .2s ease;
}
.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  width: 100%; max-width: 480px;
  box-shadow: var(--shadow-xl);
  animation: fadeInUp .25s ease;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.modal-title  { font-size: var(--text-xl); font-weight: 700; }

/* ===== TOAST ===== */
.toast-container {
  position: fixed; bottom: calc(var(--bottom-nav-h) + var(--sp-4)); right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
@media (min-width: 769px) { .toast-container { bottom: var(--sp-6); } }
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: 500;
  min-width: 260px; max-width: 380px;
  animation: slideInRight .3s ease;
}
.toast.success { border-left: 4px solid var(--clr-primary); }
.toast.error   { border-left: 4px solid var(--clr-error); }
.toast.warning { border-left: 4px solid var(--clr-warning); }

/* ===== EMPTY STATE ===== */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  padding: var(--sp-16) var(--sp-8);
  color: var(--text-muted);
}
.empty-state-icon { font-size: 3rem; margin-bottom: var(--sp-4); opacity: .5; }
.empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--text-sub); margin-bottom: var(--sp-2); }
.empty-state-desc  { font-size: var(--text-sm); }

/* ===== NOTICE CHIP ===== */
.notice-chip {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, var(--clr-primary-glow), transparent);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
}
.notice-chip-icon { color: var(--clr-primary); flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }