/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #f4f0f8;
  --surface:     #ffffff;
  --surface-2:   #faf8fc;
  --border:      #e8e1f0;
  --accent:      #9b7fd4;
  --accent-soft: #c4aee8;
  --accent-dim:  #ede6f8;
  --text-primary:#2d2540;
  --text-sec:    #7a6d8e;
  --text-muted:  #b3a8c4;
  --love:        #e8748a;
  --work:        #74a8e8;
  --family:      #74c9a8;
  --regret:      #e8a474;
  --dreams:      #a474e8;
  --random:      #74d4e8;
  --general:     #9b7fd4;
  --radius-sm:   10px;
  --radius-md:   18px;
  --radius-lg:   28px;
  --shadow-sm:   0 2px 12px rgba(100, 80, 140, 0.08);
  --shadow-md:   0 6px 32px rgba(100, 80, 140, 0.13);
  --shadow-lg:   0 16px 56px rgba(100, 80, 140, 0.18);
  --transition:  0.22s ease;
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #1a1525;
  --surface:     #231d33;
  --surface-2:   #2d2545;
  --border:      #3d3356;
  --accent:      #b39de0;
  --accent-soft: #9b7fd4;
  --accent-dim:  #2d2450;
  --text-primary:#e8e0f4;
  --text-sec:    #9d92b8;
  --text-muted:  #5a5070;
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.35);
  --shadow-md:   0 6px 32px rgba(0,0,0,0.45);
  --shadow-lg:   0 16px 56px rgba(0,0,0,0.55);
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .cotd { background: linear-gradient(135deg,#2d2450,#1a2540); }
[data-theme="dark"] .badge-general { background:#2d2450; color:#b39de0; }
[data-theme="dark"] .badge-love    { background:#3d1525; color:#e8748a; }
[data-theme="dark"] .badge-work    { background:#102040; color:#74a8e8; }
[data-theme="dark"] .badge-family  { background:#0d2820; color:#74c9a8; }
[data-theme="dark"] .badge-regret  { background:#301508; color:#e8a474; }
[data-theme="dark"] .badge-dreams  { background:#1e0840; color:#a474e8; }
[data-theme="dark"] .badge-random  { background:#082830; color:#74d4e8; }
[data-theme="dark"] .card-expiry   { background:#2d1a08; color:#e8a474; }
[data-theme="dark"] .toast         { background:#3d3356; }
[data-theme="dark"] .toast--error  { background:#4a1a2a; }
[data-theme="dark"] .modal-close:hover { background:#3d1525; color:#e8748a; border-color:#5a2535; }
[data-theme="dark"] .platform-x    { background:#333; }

/* Theme toggle button */
.theme-toggle {
  position: absolute; top: 20px; right: 20px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 50%; width: 40px; height: 40px;
  font-size: 1.1rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all var(--transition); z-index: 2;
  box-shadow: var(--shadow-sm);
}
.theme-toggle:hover { border-color: var(--accent-soft); transform: rotate(20deg) scale(1.1); }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

/* ── Ambient blobs ─────────────────────────────────────────────────────────── */
.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: drift 18s ease-in-out infinite alternate;
}
.blob-1 { width:520px; height:520px; background:radial-gradient(circle,#c4aee8,#a88fd4); top:-140px; left:-100px; animation-duration:22s; }
.blob-2 { width:400px; height:400px; background:radial-gradient(circle,#b8dff0,#8ec9e8); bottom:60px; right:-80px; animation-duration:18s; animation-delay:-6s; }
.blob-3 { width:300px; height:300px; background:radial-gradient(circle,#f0c8d8,#e8a4bc); top:50%; left:55%; animation-duration:26s; animation-delay:-12s; }

@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.06); }
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header { position:relative; z-index:1; text-align:center; padding:56px 24px 32px; }

.logo { display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; }
.logo-icon { font-size:28px; color:var(--accent); animation:pulse-star 3s ease-in-out infinite; }

@keyframes pulse-star {
  0%,100% { opacity:1; transform:scale(1) rotate(0deg); }
  50%      { opacity:0.7; transform:scale(1.15) rotate(20deg); }
}

.logo-text {
  font-size:2.6rem; font-weight:600;
  background:linear-gradient(135deg,#7c5cbf,#a88fd4,#74b8d8);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-0.5px;
}

.tagline { font-size:1rem; color:var(--text-sec); font-style:italic; font-family:'Playfair Display',serif; }

/* ── Container ────────────────────────────────────────────────────────────── */
.container { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 20px 80px; }

/* ── Confession of the Day ─────────────────────────────────────────────────── */
.cotd {
  background: linear-gradient(135deg, #ede6f8, #e6f0fc);
  border: 1.5px solid var(--accent-soft);
  border-radius: var(--radius-lg);
  padding: 24px 28px 20px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  animation: card-in 0.4s ease both;
}
.cotd::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(155,127,212,0.2), transparent);
  border-radius: 50%;
}
.cotd-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 12px;
}
.cotd-content {
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.7;
  margin-bottom: 14px;
  font-style: italic;
  font-family: 'Playfair Display', serif;
}
.cotd-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cotd-stats { font-size: 0.8rem; color: var(--text-sec); }

/* ── Spill Box ────────────────────────────────────────────────────────────── */
.spill-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px 36px 28px;
  box-shadow:var(--shadow-md); margin-bottom:28px;
}
.spill-box__header { margin-bottom:22px; }
.spill-box__header h2 { font-size:1.35rem; font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.spill-box__header p  { font-size:0.88rem; color:var(--text-muted); }

.category-row { margin-bottom:16px; }
.category-pills { display:flex; flex-wrap:wrap; gap:8px; }

.pill {
  padding:6px 16px; border-radius:100px;
  border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--text-sec); font-size:0.82rem; font-family:'DM Sans',sans-serif;
  font-weight:500; cursor:pointer; transition:all var(--transition);
}
.pill:hover { border-color:var(--accent-soft); color:var(--accent); }
.pill.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

.textarea-wrap { position:relative; margin-bottom:18px; }

textarea {
  width:100%; padding:16px 18px;
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-2); color:var(--text-primary);
  font-family:'DM Sans',sans-serif; font-size:0.97rem; line-height:1.65;
  resize:vertical; outline:none; transition:border-color var(--transition),box-shadow var(--transition);
}
textarea::placeholder { color:var(--text-muted); }
textarea:focus { border-color:var(--accent-soft); box-shadow:0 0 0 4px rgba(155,127,212,0.12); }

.char-count {
  position:absolute; bottom:10px; right:14px;
  font-size:0.75rem; color:var(--text-muted); pointer-events:none;
}

/* Form footer row */
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Expiry toggle */
.expiry-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.expiry-toggle input[type="checkbox"] { display: none; }
.expiry-toggle__track {
  width: 36px; height: 20px;
  background: var(--border);
  border-radius: 100px;
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.expiry-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.expiry-toggle input:checked ~ .expiry-toggle__track { background: var(--accent); }
.expiry-toggle input:checked ~ .expiry-toggle__track::after { transform: translateX(16px); }
.expiry-toggle__label { font-size: 0.84rem; color: var(--text-sec); }

/* Spill button */
.btn-spill {
  display:flex; align-items:center; gap:8px;
  padding:13px 32px; background:linear-gradient(135deg,#9b7fd4,#7c5cbf);
  color:#fff; border:none; border-radius:100px;
  font-family:'DM Sans',sans-serif; font-size:0.97rem; font-weight:600;
  cursor:pointer; transition:all var(--transition);
  box-shadow:0 4px 18px rgba(124,92,191,0.35); letter-spacing:0.01em;
}
.btn-spill:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(124,92,191,0.45); }
.btn-spill:active { transform:translateY(0); }
.btn-spill .btn-icon { font-size:0.9em; animation:pulse-star 2s ease-in-out infinite; }

/* ── Feed Controls ────────────────────────────────────────────────────────── */
.feed-controls {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}

/* Tab group */
.tab-group {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 4px;
}
.tab-btn {
  padding: 6px 18px; border: none; border-radius: 100px;
  background: transparent; color: var(--text-sec);
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.tab-btn.active { background: var(--accent); color: #fff; }

.sort-group {
  display:flex; gap:4px; background:var(--surface);
  border:1.5px solid var(--border); border-radius:100px; padding:4px;
}
.sort-btn {
  padding:5px 16px; border:none; border-radius:100px; background:transparent;
  color:var(--text-sec); font-family:'DM Sans',sans-serif; font-size:0.8rem;
  font-weight:500; cursor:pointer; transition:all var(--transition);
}
.sort-btn.active { background:var(--accent); color:#fff; }

/* Filter row */
.filter-row { margin-bottom: 22px; }
.filter-pills { display:flex; flex-wrap:wrap; gap:6px; }

.filter-pill {
  padding:5px 14px; border-radius:100px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-sec); font-size:0.8rem; font-family:'DM Sans',sans-serif;
  font-weight:500; cursor:pointer; transition:all var(--transition);
}
.filter-pill:hover { border-color:var(--accent-soft); color:var(--accent); }
.filter-pill.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

/* ── Feed ─────────────────────────────────────────────────────────────────── */
.feed-loading {
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:60px 0; color:var(--text-muted); font-size:0.9rem;
}
.spinner {
  width:32px; height:32px;
  border:3px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.feed-empty { text-align:center; padding:60px 0; color:var(--text-muted); font-size:0.93rem; }
.feed-empty .empty-icon { font-size:2rem; display:block; margin-bottom:10px; }

/* ── Confession Card ──────────────────────────────────────────────────────── */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:26px 28px 20px; margin-bottom:16px;
  box-shadow:var(--shadow-sm); transition:transform var(--transition),box-shadow var(--transition);
  animation:card-in 0.35s ease both;
}
@keyframes card-in {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

.card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.card-top-right { display:flex; align-items:center; gap:8px; }

.card-badge {
  display:inline-block; padding:3px 12px; border-radius:100px;
  font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
}
.badge-general { background:#ede6f8; color:#7c5cbf; }
.badge-love    { background:#fce8ec; color:#c45068; }
.badge-work    { background:#e6f0fc; color:#4074b8; }
.badge-family  { background:#e6f8f0; color:#2e9468; }
.badge-regret  { background:#fceee6; color:#b86040; }
.badge-dreams  { background:#f0e6fc; color:#7040b8; }
.badge-random  { background:#e6f8fc; color:#2090a8; }

.card-time    { font-size:0.76rem; color:var(--text-muted); }
.card-expiry  { font-size:0.73rem; color:#b86040; background:#fceee6; padding:2px 8px; border-radius:100px; }

.card-content {
  font-size:1rem; color:var(--text-primary); line-height:1.7;
  margin-bottom:16px; word-break:break-word;
}

/* Reactions row */
.reactions-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface-2);
  font-size: 0.82rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-sec);
  cursor: pointer;
  transition: all var(--transition);
}
.reaction-btn:hover { border-color: var(--accent-soft); transform: scale(1.06); }
.reaction-btn.reacted {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.reaction-count { font-weight: 600; min-width: 8px; }

/* Card actions */
.card-actions { display:flex; align-items:center; gap:6px; flex-wrap: wrap; }

.action-btn {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:100px; border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--text-sec); font-family:'DM Sans',sans-serif; font-size:0.82rem;
  font-weight:500; cursor:pointer; transition:all var(--transition);
}
.action-btn:hover { border-color:var(--accent-soft); color:var(--accent); }
.action-btn.liked { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.action-btn .icon { font-size:1em; }

/* Report button */
.report-btn { padding: 7px 10px; color: var(--text-muted); }
.report-btn:hover { border-color:#e8a4bc; color:#c45068; background:#fce8ec; }
.report-btn.reported { color:#c45068; border-color:#e8a4bc; background:#fce8ec; cursor:default; }

/* Bookmark button */
.bookmark-btn { padding: 7px 10px; color: var(--text-muted); }
.bookmark-btn:hover { border-color: var(--accent-soft); color: var(--accent); }
.bookmark-btn.bookmarked { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* Delete button */
.delete-btn { padding: 7px 10px; color: var(--text-muted); }
.delete-btn:hover { border-color: #f5c6d0; color: #c45068; background: #fce8ec; }

/* Saved empty state */
.saved-empty { text-align:center; padding:60px 0; color:var(--text-muted); font-size:0.93rem; }
.saved-empty .empty-icon { font-size:2.2rem; display:block; margin-bottom:10px; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(30,18,50,0.45);
  backdrop-filter:blur(6px); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  animation:backdrop-in 0.22s ease;
}
@keyframes backdrop-in { from{opacity:0} to{opacity:1} }

.modal {
  background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%; max-width:700px; max-height:85vh; overflow-y:auto;
  padding:36px 36px 28px; position:relative; box-shadow:var(--shadow-lg);
  animation:modal-up 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modal-up { from{transform:translateY(60px);opacity:0} to{transform:translateY(0);opacity:1} }

.modal-close {
  position:absolute; top:18px; right:20px;
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:50%; width:34px; height:34px; font-size:0.8rem;
  color:var(--text-sec); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.modal-close:hover { background:#fee; color:#c04; border-color:#f8c; }

.modal-confession {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:20px 22px;
  font-size:1.02rem; color:var(--text-primary); line-height:1.7;
  margin-bottom:28px; border-left:4px solid var(--accent-soft);
}

.modal-replies { margin-bottom:24px; }

.replies-heading { font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin-bottom:14px; }
.replies-loading { color:var(--text-muted); font-size:0.9rem; text-align:center; padding:20px 0; }
.replies-empty   { text-align:center; padding:20px 0; color:var(--text-muted); font-size:0.88rem; }

.reply-card {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:10px;
  animation:card-in 0.28s ease both;
}
.reply-card__content { font-size:0.94rem; color:var(--text-primary); line-height:1.65; margin-bottom:10px; word-break:break-word; }
.reply-card__footer  { display:flex; align-items:center; justify-content:space-between; }
.reply-card__actions { display:flex; align-items:center; gap:6px; }
.reply-time          { font-size:0.73rem; color:var(--text-muted); }

.reply-delete-btn {
  background:none; border:none; cursor:pointer; font-size:0.85rem;
  color:var(--text-muted); padding:3px 6px; border-radius:6px; transition:color var(--transition), background var(--transition);
}
.reply-delete-btn:hover { color:#c45068; background:#fce8ec; }

.reply-like-btn {
  display:inline-flex; align-items:center; gap:5px; padding:4px 12px;
  border-radius:100px; border:1.5px solid var(--border); background:transparent;
  color:var(--text-muted); font-family:'DM Sans',sans-serif; font-size:0.78rem; cursor:pointer; transition:all var(--transition);
}
.reply-like-btn:hover { border-color:var(--accent-soft); color:var(--accent); }
.reply-like-btn.liked { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }

.reply-textarea-wrap { position:relative; margin-bottom:12px; }
.reply-char-count    { position:absolute; bottom:10px; right:14px; font-size:0.73rem; color:var(--text-muted); pointer-events:none; }

.btn-reply {
  width:100%; padding:13px;
  background:linear-gradient(135deg,#9b7fd4,#7c5cbf); color:#fff;
  border:none; border-radius:var(--radius-md);
  font-family:'DM Sans',sans-serif; font-size:0.95rem; font-weight:600;
  cursor:pointer; transition:all var(--transition); box-shadow:0 4px 16px rgba(124,92,191,0.3);
}
.btn-reply:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(124,92,191,0.4); }

/* ── Share Modal ──────────────────────────────────────────────────────────── */
.share-backdrop {
  position: fixed; inset: 0; background: rgba(30,18,50,0.45);
  backdrop-filter: blur(6px); z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
  animation: backdrop-in 0.2s ease;
}
.share-modal {
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-width: 560px; padding: 32px 28px 36px;
  animation: modal-up 0.28s cubic-bezier(.34,1.3,.64,1);
  position: relative;
}
.share-title {
  font-size: 1.1rem; font-weight: 600; color: var(--text-primary);
  margin: 0 0 10px;
}
.share-preview {
  font-size: 0.88rem; color: var(--text-secondary); font-style: italic;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  margin-bottom: 24px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-platforms {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.share-platform {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  padding: 0; min-width: 60px;
  transition: transform 0.15s ease;
}
.share-platform:hover { transform: translateY(-3px); }
.share-platform:hover .platform-icon { box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.platform-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  transition: box-shadow 0.15s ease;
}
.platform-x         { background: #000; font-weight: 800; font-family: serif; font-size: 1.3rem; }
.platform-whatsapp  { background: #25D366; }
.platform-snapchat  { background: #FFFC00; font-size: 1.4rem; }
.platform-instagram { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.platform-facebook  { background: #1877F2; }
.platform-telegram  { background: #2AABEE; }
.platform-reddit    { background: #FF4500; }
.platform-name {
  font-size: 0.72rem; color: var(--text-secondary); font-weight: 500;
}
.share-copy-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.share-copy-preview {
  flex: 1; font-size: 0.8rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.share-copy-btn {
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 6px 16px; border-radius: 100px; font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; transition: opacity 0.15s;
}
.share-copy-btn:hover { opacity: 0.88; }

/* ── Crisis Modal ─────────────────────────────────────────────────────────── */
.crisis-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 10, 40, 0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: backdrop-in 0.3s ease;
}
.crisis-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 460px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modal-up 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.crisis-icon { font-size: 2.8rem; margin-bottom: 16px; }
.crisis-modal h2 { font-size: 1.4rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.crisis-modal p  { font-size: 0.95rem; color: var(--text-sec); line-height: 1.65; margin-bottom: 24px; }
.crisis-resources { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.crisis-link {
  display: block; padding: 12px 18px;
  background: var(--accent-dim); border: 1.5px solid var(--accent-soft);
  border-radius: var(--radius-md); color: var(--accent);
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  transition: all var(--transition);
}
.crisis-link:hover { background: var(--accent); color: #fff; }
.crisis-close {
  background: none; border: 1.5px solid var(--border); border-radius: 100px;
  padding: 10px 28px; color: var(--text-muted); font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem; cursor: pointer; transition: all var(--transition);
}
.crisis-close:hover { border-color: var(--accent-soft); color: var(--accent); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:30px; left:50%;
  transform:translateX(-50%) translateY(10px);
  background:#2d2540; color:#fff;
  padding:12px 24px; border-radius:100px;
  font-size:0.88rem; font-weight:500; z-index:300;
  opacity:0; transition:all 0.3s ease; white-space:nowrap; pointer-events:none;
}
.toast.toast--error { background: #5a2020; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { position:relative; z-index:1; text-align:center; padding:24px; font-size:0.8rem; color:var(--text-muted); font-style:italic; }
.admin-link { color: var(--text-muted); text-decoration:none; }
.admin-link:hover { color:var(--accent); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .spill-box { padding:24px 20px 20px; }
  .modal     { padding:28px 20px 24px; }
  .logo-text { font-size:2rem; }
  .feed-controls { flex-direction:column; align-items:flex-start; }
  .form-footer { flex-direction:column; align-items:flex-start; }
  .btn-spill { width: 100%; justify-content: center; }
  .crisis-modal { padding: 32px 24px; }
}