:root {
  --night: #13100c; --night2: #1e1a14; --night3: #2a2419;
  --moon: #e8ddd0; --warm: #c9845a; --warm2: #e8a87c;
  --font-display: 'Noto Naskh Arabic', Georgia, serif;
  --font-body: 'Noto Sans Arabic', sans-serif;
  --r: 10px; --r-lg: 16px;
  --fs-mult: 1;
}
body.light {
  --night: #faf7f4; --night2: #f0ebe4; --night3: #e0d8ce;
  --moon: #2a1e12; --warm: #b5682c; --warm2: #d4824a;
}
.color-warm  { background:#2a1f10; color:#fde68a; border:1px solid #422e11; }
.color-sad   { background:#111f38; color:#bfdbfe; border:1px solid #1e3a5f; }
.color-angry { background:#3b1111; color:#fecaca; border:1px solid #5c1818; }
.color-calm  { background:#112a1c; color:#bbf7d0; border:1px solid #184229; }
.color-anxious{ background:#381e0e; color:#fed7aa; border:1px solid #572d13; }
.color-dreamy{ background:#231138; color:#e9d5ff; border:1px solid #3b1c61; }
.color-love  { background:#381123; color:#fbcfe8; border:1px solid #5e1a39; }
.color-heavy { background:#0a0a0a; color:#d4d4d4; border:1px solid #1f1f1f; }
.color-empty { background:#262626; color:#f5f5f5; border:1px solid #404040; }

body.light .color-warm  { background:#fef9e7; color:#92400e; border:1px solid #fcd34d; }
body.light .color-sad   { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
body.light .color-angry { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
body.light .color-calm  { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
body.light .color-anxious{ background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
body.light .color-dreamy{ background:#faf5ff; color:#6b21a8; border:1px solid #e9d5ff; }
body.light .color-love  { background:#fdf2f8; color:#9d174d; border:1px solid #fbcfe8; }
body.light .color-heavy { background:#f5f5f5; color:#171717; border:1px solid #d4d4d4; }
body.light .color-empty { background:#fafafa; color:#404040; border:1px solid #e5e5e5; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family: var(--font-body);
  background: var(--night); color: var(--moon);
  line-height: 1.7; overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}
h1,h2,h3,.font-display { font-family: var(--font-display); }
.hidden { display:none !important; }

body[data-fs="lg"] { --fs-mult: 1.25; }
body[data-fs="sm"] { --fs-mult: 0.85; }

.msg-text { font-size: calc(17px * var(--fs-mult)); }
.modal-content .msg-text { font-size: calc(24px * var(--fs-mult)); line-height:1.8; }
.form-title { font-size: calc(32px * var(--fs-mult)); }
.input-text { font-size: calc(36px * var(--fs-mult)); }
.input-textarea { font-size: calc(28px * var(--fs-mult)); }

.toolbar {
  position:fixed; top:1.2rem; left:1.2rem; z-index:300;
  display:flex; align-items:center; gap:0.4rem;
}
.tb {
  height:34px; padding:0 10px; border-radius:20px;
  background:var(--night2); border:1px solid var(--night3);
  color:var(--moon); font-size:13px; cursor:pointer;
  display:flex; align-items:center; gap:4px;
  transition:background 0.2s, transform 0.15s;
}
.tb:hover { background:var(--night3); transform:scale(1.05); }

.top-nav {
  position: fixed; top: 1.2rem; right: 1.5rem; z-index: 300;
  display: flex; gap: 1.5rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.top-nav.hidden-nav {
  opacity: 0; pointer-events: none; transform: translateY(-15px);
}
.nav-link {
  color: var(--moon); font-size: 14px; text-decoration: none; font-weight: 500;
  opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
.nav-link:hover { opacity: 1; color: var(--warm); }

button { font-family:var(--font-body); background:transparent; border:none; cursor:pointer; color:inherit; outline:none; }
.btn-primary {
  background:var(--warm); color:var(--night); padding:12px 28px;
  border-radius:var(--r); font-weight:600; font-size:15px; transition:all 0.2s;
  display:inline-block; text-decoration:none;
}
.btn-primary:hover { background:var(--warm2); transform:translateY(-1px); }
.btn-text { color:var(--warm); font-weight:500; font-size:14px; transition:color 0.2s; }
.btn-text:hover { color:var(--warm2); }
.pulse-btn { transition: transform 0.3s ease, color 0.3s ease; }
.pulse-btn:hover { transform: scale(1.05); color: var(--warm2); }

.share-story-btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--moon); opacity: 0.7; font-size: 14px;
  background: var(--night2); border: 1px solid var(--night3);
  padding: 10px 20px; border-radius: 30px; transition: all 0.2s; font-weight: 500;
  cursor: pointer;
}
.share-story-btn:hover { background: var(--night3); opacity: 1; border-color: var(--warm); transform: translateY(-2px); }

.input-text {
  width:100%; background:transparent; border:none;
  border-bottom:1px solid var(--night3); color:var(--moon);
  font-family:var(--font-display); padding:10px 0; outline:none;
  transition:border-color 0.3s;
}
.input-text:focus { border-bottom-color:var(--warm); }
.input-text::placeholder,.input-textarea::placeholder { color:rgba(232,221,208,0.2); }

body.light .input-text::placeholder, body.light .input-textarea::placeholder { color:rgba(42,30,18,0.4); }

.input-textarea {
  width:100%; background:transparent; border:none; color:var(--moon);
  font-family:var(--font-display); outline:none; resize:none; min-height:250px; line-height:1.8;
}

.container { max-width:860px; margin:0 auto; padding:2.5rem 1.5rem; }
.view { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }

#scroll-wrapper {
  height:100vh; overflow-y:auto;
  scroll-behavior:smooth;
}

#hero-section {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:2rem; position:relative;
}
.hero-pre { font-size:14px; opacity:0.45; margin-bottom:0.8rem; letter-spacing:0.06em; }
.hero-title {
  font-family:var(--font-display);
  font-size:calc(clamp(38px, 7vw, 66px) * var(--fs-mult));
  font-weight:700; line-height:1.3; margin-bottom:1.2rem;
}
.hero-sub { font-size:16px; opacity:0.55; max-width:420px; line-height:1.9; margin-bottom:3rem; }
.hero-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:12px; opacity:0.3; display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

#archive-section { min-height:100vh; }

.archive-header { width:100%; margin-bottom:2.5rem; }
.search-bar {
  width:100%; padding:16px 20px; border-radius:var(--r-lg);
  background:var(--night2); border:1px solid var(--night3);
  color:var(--moon); font-family:var(--font-body); font-size:15px;
  outline:none; margin-bottom:1.5rem; transition:border-color 0.3s;
}
.search-bar:focus { border-color:var(--warm); }
.filter-row { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; margin-bottom:1.5rem; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.filter-dot {
  width:32px; height:32px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border:2px solid transparent; transition:transform 0.2s; opacity:0.5;
}
.filter-dot.active,.filter-dot:hover { opacity:1; transform:scale(1.1); }
.filter-dot.all-dot { background:var(--night3); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--moon); opacity:1; }
.archive-stats {
  font-size:14px; color:var(--warm);
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--night3); padding-bottom:1.5rem; flex-wrap:wrap; gap:0.8rem;
}
.count-num { font-size:20px; font-weight:bold; }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.25rem; width:100%; text-align:right; }
.message-card {
  border-radius:var(--r-lg); padding:1.5rem; position:relative;
  cursor:pointer; display:flex; flex-direction:column;
  transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.55s ease, opacity 0.55s ease, translate 0.55s ease;
}
.message-card:hover { transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,0.2); }
.msg-to  { font-size:12px; opacity:0.7; margin-bottom:12px; font-weight:500; }
.msg-text{ font-family:var(--font-display); line-height:1.9; flex-grow:1; }

.card-hidden { opacity:0.15; filter:blur(7px); transform:translateY(18px); }
.card-visible { opacity:1; filter:blur(0); transform:translateY(0); }

.cta-card {
  background:transparent; border:1px dashed var(--warm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--warm);
}
.cta-card:hover { background:rgba(201,132,90,0.05); }
.empty-card {
  grid-column:1/-1; text-align:center; padding:4rem 1rem;
  background:var(--night2); border-radius:var(--r-lg); border:1px solid var(--night3);
}

.modal-overlay {
  position:fixed; inset:0; background:rgba(19,16,12,0.95); z-index:100;
  display:flex; justify-content:center; align-items:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity 0.4s ease;
}
.modal-overlay.active { opacity:1; pointer-events:auto; }
.modal-content { max-width:500px; width:100%; transform:scale(0.95); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.modal-overlay.active .modal-content { transform:scale(1); }
.modal-close { position:absolute; top:20px; right:20px; color:var(--moon); font-size:30px; opacity:0.5; cursor:pointer; }

.form-step { width:100%; max-width:600px; text-align:right; }
.form-title { color:var(--moon); margin-bottom:2rem; text-align:center; }
.char-counter { font-size:12px; color:var(--warm); text-align:left; margin-top:10px; height:18px; opacity:0; transition:opacity 0.3s; }
.color-picker { display:flex; flex-wrap:wrap; gap:15px; margin-bottom:2rem; justify-content:center; }
.color-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; }
.color-dot-lg { width:48px; height:48px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform 0.2s; }
.color-label { font-size:12px; color:var(--moon); opacity:0.5; font-weight:500; transition:opacity 0.2s; }
.color-wrap:hover .color-dot-lg { transform:scale(1.1); }
.color-wrap.selected .color-dot-lg { border-color:var(--moon); transform:scale(1.1); }
.color-wrap.selected .color-label { opacity:1; color:var(--warm); }

.swipe-hint {
  margin-top: 2.5rem; font-size: 14px; color: var(--warm); opacity: 0.6; text-align: center;
  animation: pulseOpacity 2s infinite; font-weight:500;
}
@keyframes pulseOpacity { 0%,100%{opacity:0.4;} 50%{opacity:0.8;} }

.site-footer { border-top:1px solid var(--night3); padding:2.5rem 1.5rem 2rem; text-align:center; background:var(--night2); margin-top:3rem; }
.sf-nav { display:flex; justify-content:center; gap:2rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.sf-nav a { color:var(--warm); text-decoration:none; font-size:14px; font-weight:600; transition:color .2s; }
.sf-nav a:hover { color:var(--warm2); }
.sf-hashtag { display:block; font-size:.9rem; font-weight:600; letter-spacing:.06em; color:var(--moon); opacity:.45; margin-bottom:1.25rem; text-decoration:none; }
.sf-hashtag:hover { opacity:.8; }
.sf-socials { display:flex; justify-content:center; gap:1rem; margin-bottom:1rem; }
.sf-socials a { color:var(--moon); opacity:.4; transition:opacity .15s; display:flex; align-items:center; }
.sf-socials a:hover { opacity:.85; }
.sf-socials svg { width:1.4rem; height:1.4rem; }
.sf-contact p { font-size:.78rem; color:var(--moon); opacity:.3; letter-spacing:.04em; margin-bottom:.25rem; direction:ltr; }

.page-hero { padding:6rem 0 3rem; text-align:center; }
.page-hero h1 { font-size:clamp(28px,5vw,42px); font-family:var(--font-display); margin-bottom:1rem; }
.page-hero p { opacity:0.6; font-size:15px; }
.about-body p { margin-bottom:1.5rem; font-size:16px; line-height:1.9; opacity:0.85; }
.color-swatches { display:flex; gap:0; margin:3rem 0; border-radius:var(--r); overflow:hidden; }
.swatch { flex:1; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; }

.terms-sec { margin-bottom:3rem; }
.terms-sec h2 { font-family:var(--font-display); font-size:20px; color:var(--warm); margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--night3); }
.terms-sec p { font-size:15px; line-height:1.9; opacity:0.8; }

/* ── ADMIN DASHBOARD ─────────────────────────────────────── */
#admin-overlay { position:fixed; inset:0; z-index:500; display:flex; flex-direction:column; }
#admin-overlay.hidden { display:none !important; }

/* Login screen */
#admin-login { position:absolute; inset:0; background:var(--night); display:flex; align-items:center; justify-content:center; z-index:501; }
.alog-box { background:var(--night2); border:1px solid var(--night3); border-radius:var(--r-lg); padding:2.75rem 2.25rem; width:100%; max-width:22rem; text-align:center; box-shadow:0 32px 80px rgba(0,0,0,.5); }
.alog-box h1 { font-family:var(--font-display); font-size:1.4rem; color:var(--moon); margin-bottom:.25rem; }
.alog-box p { color:var(--moon); opacity:.3; font-size:.85rem; margin-bottom:2rem; }
.alog-input { width:100%; padding:.8rem 1rem; border:1.5px solid var(--night3); border-radius:.55rem; font-size:1rem; font-family:var(--font-body); margin-bottom:1rem; outline:none; direction:ltr; letter-spacing:.2em; background:var(--night); color:var(--moon); transition:border-color .2s, box-shadow .2s; box-sizing:border-box; }
.alog-input:focus { border-color:var(--warm); box-shadow:0 0 0 3px rgba(201,132,90,.12); }
.alog-btn { width:100%; padding:.8rem; background:var(--warm); color:var(--night); border:none; border-radius:.55rem; font-size:.95rem; font-weight:700; cursor:pointer; font-family:var(--font-body); transition:background .15s, transform .1s; letter-spacing:.03em; }
.alog-btn:hover { background:var(--warm2); }
.alog-btn:active { transform:scale(.98); }
.alog-error { color:#ef4444; font-size:.85rem; margin-top:.75rem; min-height:1.2rem; }

/* App shell */
#admin-app { display:none; position:absolute; inset:0; background:var(--night); overflow:hidden; }

/* Sidebar */
.adm-sidebar { width:240px; background:var(--night2); border-left:1px solid var(--night3); position:absolute; top:0; right:0; bottom:0; display:flex; flex-direction:column; overflow-y:auto; }
.adm-brand { padding:1.75rem 1.5rem 1.25rem; border-bottom:1px solid var(--night3); }
.adm-brand h2 { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--moon); line-height:1.4; margin-bottom:.2rem; }
.adm-brand span { font-size:.68rem; color:var(--moon); opacity:.3; letter-spacing:.03em; }
.adm-nav { flex:1; padding:.5rem 0; }
.adm-item { display:flex; align-items:center; gap:.65rem; padding:.65rem 1.5rem; cursor:pointer; transition:background .15s, opacity .15s, color .15s; font-size:.84rem; font-weight:500; color:var(--moon); opacity:.45; border:none; background:none; width:100%; text-align:right; font-family:var(--font-body); border-left:2.5px solid transparent; }
.adm-item:hover { background:rgba(232,221,208,.04); opacity:.78; }
.adm-item.active { background:rgba(201,132,90,.09); color:var(--warm); opacity:1; border-left-color:var(--warm); }
.adm-item .abadge { margin-right:auto; background:#ef4444; color:#fff; border-radius:9999px; font-size:.64rem; font-weight:700; padding:.15rem .5rem; min-width:1.25rem; text-align:center; line-height:1.4; }
.adm-item svg { width:.95rem; height:.95rem; flex-shrink:0; }
.adm-sep { height:1px; background:var(--night3); margin:.35rem 1.5rem; }
.adm-footer { padding:1rem 1.5rem; border-top:1px solid var(--night3); }
.adm-logout { display:flex; align-items:center; gap:.5rem; color:var(--moon); opacity:.3; font-size:.82rem; cursor:pointer; background:none; border:none; font-family:var(--font-body); padding:0; transition:opacity .15s, color .15s; }
.adm-logout:hover { opacity:.75; color:var(--warm); }

/* Main content */
.adm-main { position:absolute; top:0; right:240px; left:0; bottom:0; padding:2.5rem; overflow-y:auto; }
.adm-ph { margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--night3); }
.adm-ph h1 { font-family:var(--font-display); font-size:1.45rem; color:var(--moon); font-weight:700; }
.adm-ph p { color:var(--moon); opacity:.38; font-size:.85rem; margin-top:.35rem; }

/* Stats row */
.adm-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2rem; }
.adm-stat { background:var(--night2); border:1px solid var(--night3); border-radius:.875rem; padding:1.4rem 1.6rem; transition:border-color .2s; }
.adm-stat:hover { border-color:rgba(232,221,208,.14); }
.adm-stat__lbl { font-size:.72rem; color:var(--moon); opacity:.4; font-weight:600; margin-bottom:.5rem; letter-spacing:.04em; text-transform:uppercase; }
.adm-stat__val { font-size:2.4rem; font-weight:900; line-height:1; letter-spacing:-.02em; }
.adm-stat__val.s-pend { color:#f59e0b; }
.adm-stat__val.s-appr { color:#10b981; }
.adm-stat__val.s-rejt { color:#ef4444; }

/* Buttons */
.abtn { padding:.45rem .95rem; border-radius:.45rem; border:none; cursor:pointer; font-family:var(--font-body); font-size:.78rem; font-weight:600; transition:opacity .15s, transform .1s; white-space:nowrap; }
.abtn:hover { opacity:.8; }
.abtn:active { transform:scale(.96); }
.abtn-appr { background:#10b981; color:#fff; }
.abtn-rejt { background:#ef4444; color:#fff; }
.abtn-del  { background:rgba(239,68,68,.08); color:#ef4444; border:1px solid rgba(239,68,68,.18); }
.abtn-del:hover { background:rgba(239,68,68,.15); opacity:1; }
.abtn-edit { background:rgba(201,132,90,.12); color:var(--warm); border:1px solid rgba(201,132,90,.22); }
.abtn-save { background:var(--warm); color:var(--night); }
.abtn-canc { background:var(--night3); color:var(--moon); border:1px solid rgba(232,221,208,.06); }
.abtn-add  { background:var(--warm); color:var(--night); padding:.55rem 1.4rem; font-size:.875rem; }

/* Message rows */
.adm-msg-list { display:flex; flex-direction:column; gap:.75rem; }
.adm-row { background:var(--night2); border:1px solid var(--night3); border-radius:.875rem; padding:1.25rem; display:flex; gap:1rem; align-items:flex-start; transition:border-color .2s; }
.adm-row:hover { border-color:rgba(232,221,208,.12); }
.adm-row__swatch { width:40px; height:40px; border-radius:.5rem; flex-shrink:0; opacity:.85; }
.adm-row__body { flex:1; min-width:0; }
.adm-row__to { font-size:.72rem; color:var(--moon); opacity:.42; margin-bottom:.35rem; }
.adm-row__to strong { color:var(--warm); font-weight:700; }
.adm-row__text { font-family:var(--font-display); font-size:.92rem; line-height:1.75; color:var(--moon); margin-bottom:.5rem; word-break:break-word; }
.adm-row__date { font-size:.7rem; color:var(--moon); opacity:.25; letter-spacing:.02em; }
.adm-row__acts { display:flex; flex-direction:column; gap:.4rem; flex-shrink:0; }
.adm-edit-form { display:none; flex-direction:column; gap:.5rem; margin-top:.875rem; }
.adm-edit-form.open { display:flex; }
.adm-edit-form textarea, .adm-edit-form input { width:100%; padding:.6rem .75rem; border:1.5px solid var(--night3); border-radius:.45rem; font-family:var(--font-body); font-size:.9rem; outline:none; resize:vertical; direction:rtl; background:var(--night); color:var(--moon); transition:border-color .15s, box-shadow .15s; box-sizing:border-box; }
.adm-edit-form textarea:focus, .adm-edit-form input:focus { border-color:var(--warm); box-shadow:0 0 0 3px rgba(201,132,90,.1); }
.adm-edit-form__row { display:flex; gap:.5rem; }
.adm-empty { text-align:center; padding:3.5rem 2rem; color:var(--moon); opacity:.28; font-size:.875rem; background:var(--night2); border:1px dashed rgba(232,221,208,.1); border-radius:.875rem; }

/* Emotion picker */
.adm-epick { background:var(--night); border:1px solid var(--night3); border-radius:.65rem; padding:1.1rem; margin-top:.875rem; display:none; }
.adm-epick__status { font-size:.76rem; color:var(--warm); margin-bottom:.65rem; font-weight:700; letter-spacing:.03em; }
.adm-epick__opts { display:flex; flex-wrap:wrap; gap:.4rem; }
.aep-opt { padding:.3rem .75rem; border:1.5px solid var(--night3); border-radius:2rem; background:var(--night2); cursor:pointer; font-size:.78rem; font-family:var(--font-body); color:var(--moon); transition:all .15s; }
.aep-opt:hover { border-color:var(--warm); color:var(--warm); }
.aep-opt.selected { border-color:#10b981; background:rgba(16,185,129,.1); color:#10b981; font-weight:700; }

/* Content sections */
.adm-sec { background:var(--night2); border:1px solid var(--night3); border-radius:.875rem; padding:1.6rem; margin-bottom:1.25rem; }
.adm-sec h3 { font-family:var(--font-display); font-size:.92rem; color:var(--moon); font-weight:700; margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--night3); letter-spacing:.01em; }
.adm-fg { margin-bottom:1.1rem; }
.adm-fg label { display:block; font-size:.72rem; font-weight:600; color:var(--moon); opacity:.4; margin-bottom:.4rem; letter-spacing:.04em; text-transform:uppercase; }
.adm-fg input, .adm-fg textarea { width:100%; padding:.65rem .875rem; border:1.5px solid var(--night3); border-radius:.5rem; font-family:var(--font-body); font-size:.9rem; outline:none; resize:vertical; background:var(--night); color:var(--moon); transition:border-color .15s, box-shadow .15s; box-sizing:border-box; }
.adm-fg input:focus, .adm-fg textarea:focus { border-color:var(--warm); box-shadow:0 0 0 3px rgba(201,132,90,.1); }
.adm-savebar { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.6rem; background:var(--night2); border:1px solid var(--night3); border-radius:.875rem; margin-bottom:1.25rem; }
.adm-savebar p { font-size:.83rem; color:var(--moon); opacity:.35; }
.adm-notice { display:none; font-size:.82rem; color:#10b981; font-weight:700; }
.adm-tsec { background:var(--night); border:1px solid var(--night3); border-radius:.65rem; padding:1.1rem; margin-bottom:.75rem; }
.adm-tsec__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.adm-tsec__head span { font-size:.72rem; font-weight:700; color:var(--moon); opacity:.3; letter-spacing:.05em; text-transform:uppercase; }

/* Auto-accept toggle */
.adm-toggle-card { background:var(--night2); border:1px solid var(--night3); border-radius:.875rem; padding:1.4rem 1.6rem; margin-bottom:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.adm-toggle-card__info h3 { font-family:var(--font-display); font-size:.95rem; color:var(--moon); margin-bottom:.25rem; }
.adm-toggle-card__info p { font-size:.78rem; color:var(--moon); opacity:.36; line-height:1.5; }
.adm-switch { position:relative; width:46px; height:26px; flex-shrink:0; }
.adm-switch input { position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; margin:0; }
.adm-switch__track { position:absolute; inset:0; background:var(--night3); border-radius:999px; cursor:pointer; transition:background .25s; }
.adm-switch input:checked + .adm-switch__track { background:#10b981; }
.adm-switch__track::after { content:''; position:absolute; top:3px; right:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:transform .25s cubic-bezier(.34,1.56,.64,1); box-shadow:0 1px 4px rgba(0,0,0,.3); }
.adm-switch input:checked + .adm-switch__track::after { transform:translateX(-20px); }
.adm-toggle-status { font-size:.7rem; font-weight:700; color:var(--moon); opacity:.3; margin-top:.3rem; letter-spacing:.04em; text-transform:uppercase; }
.adm-toggle-status.on { color:#10b981; opacity:1; }

/* Toast */
#admin-toast { position:fixed; bottom:1.75rem; left:50%; transform:translateX(-50%); background:var(--warm); color:var(--night); padding:.7rem 1.6rem; border-radius:.5rem; font-size:.875rem; font-weight:700; z-index:9999; display:none; white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,.4); letter-spacing:.02em; }

@media(max-width:768px){
  .adm-sidebar{width:100%;height:auto;position:relative;}
  .adm-main{position:relative;right:0;padding:1.25rem;overflow-y:visible;}
  .adm-stats{grid-template-columns:1fr 1fr;}
  #admin-app{overflow-y:auto;}
}
@media(max-width:480px){
  .adm-stats{grid-template-columns:1fr;}
  .adm-row{flex-wrap:wrap;}
  .adm-row__acts{width:100%;flex-direction:row;flex-wrap:wrap;margin-top:.5rem;}
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInNext { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInBack { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

.fade-in   { animation:fadeIn 0.8s ease forwards; }
.slide-up  { animation:slideUp 0.4s ease-out forwards; opacity:0; }
.slide-next { animation:slideInNext 0.4s ease-out forwards; opacity:0; }
.slide-back { animation:slideInBack 0.4s ease-out forwards; opacity:0; }

@media (prefers-reduced-motion:reduce) { *,::before,::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
@media (max-width:600px) { .hero-title{font-size:32px;} .toolbar{top:0.7rem;left:0.7rem;} .archive-stats{flex-direction:column;align-items:flex-start;} }

/* ── Archive refresh button ──────────────────────────────── */
.refresh-btn {
  background: transparent; border: 1px solid rgba(232,221,208,0.18);
  border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--moon); opacity: 0.55;
  transition: opacity 0.2s, border-color 0.2s;
}
.refresh-btn:hover { opacity: 1; border-color: rgba(232,221,208,0.4); }
.refresh-btn.spinning svg { animation: spin360 0.7s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
#messages-grid { transition: opacity 0.3s ease; }

/* ── Admin data page ─────────────────────────────────────── */
.adm-color-pick { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.adm-color-opt { width:26px; height:26px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:border-color 0.15s, transform 0.15s; }
.adm-color-opt.sel { border-color:var(--moon); transform:scale(1.25); }
.adm-import-status { margin-top:0.75rem; font-size:13px; color:var(--warm2); min-height:18px; }
.adm-add-select { background:var(--night); border:1px solid var(--night3); color:var(--moon); border-radius:var(--r); padding:8px 12px; font-family:var(--font-body); font-size:14px; width:100%; }
.adm-file-label { display:inline-flex; align-items:center; gap:8px; background:var(--night3); border:1px solid var(--night3); color:var(--moon); border-radius:var(--r); padding:9px 18px; font-size:14px; cursor:pointer; transition:background 0.2s; }
.adm-file-label:hover { background:var(--warm); color:var(--night); }
.adm-file-input { display:none; }

/* ── Feedback (success screen) ───────────────────────────── */
.fb-emojis { display:flex; gap:.6rem; justify-content:center; margin:.5rem 0; }
.fb-emoji { font-size:1.7rem; background:none; border:2px solid transparent; border-radius:50%; width:2.8rem; height:2.8rem; cursor:pointer; transition:transform .18s, border-color .18s; display:flex; align-items:center; justify-content:center; padding:0; }
.fb-emoji:hover { transform:scale(1.18); }
.fb-emoji.selected { border-color:var(--warm); transform:scale(1.22); }
#fb-text { width:100%; padding:.55rem .75rem; background:var(--night2); border:1.5px solid var(--night3); border-radius:.5rem; color:var(--moon); font-family:var(--font-body); font-size:.85rem; resize:none; outline:none; box-sizing:border-box; }
#fb-text:focus { border-color:var(--warm); }
.fb-submit { margin-top:.5rem; background:none; border:1px solid rgba(232,221,208,.18); color:var(--moon); opacity:.55; font-size:.8rem; padding:.4rem 1.2rem; border-radius:.4rem; cursor:pointer; font-family:var(--font-body); transition:opacity .15s; }
.fb-submit:hover { opacity:1; }

/* ── Share site button ───────────────────────────────────── */
.share-site-btn { background:none; border:1px solid rgba(232,221,208,.18); color:var(--moon); opacity:.55; font-size:.85rem; padding:.5rem 1.4rem; border-radius:.4rem; cursor:pointer; font-family:var(--font-body); transition:opacity .15s, border-color .15s; }
.share-site-btn:hover { opacity:1; border-color:rgba(232,221,208,.35); }

/* ── IG follow link ──────────────────────────────────────── */
.ig-follow-link { font-size:.8rem; color:rgba(232,221,208,.38); text-decoration:none; transition:color .2s; display:inline-block; line-height:1.6; }
.ig-follow-link:hover { color:rgba(232,221,208,.7); }

/* ── Site toast ──────────────────────────────────────────── */
#site-toast { display:none; position:fixed; bottom:1.75rem; left:50%; transform:translateX(-50%); background:var(--night2); color:var(--moon); border:1px solid var(--night3); border-radius:.5rem; padding:.6rem 1.4rem; font-size:.875rem; z-index:9999; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,.4); }

/* ── Success page redesign ─────────────────────────────────────────────────── */
.success-card-wrap { position:relative; width:100%; max-width:340px; padding:10px; margin-bottom:0.5rem; }
.share-story-mini {
  position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:5px;
  background:var(--night2); border:1px solid var(--night3);
  color:var(--moon); font-size:12px; padding:5px 14px; border-radius:20px;
  cursor:pointer; transition:all 0.2s; opacity:0.65; white-space:nowrap;
}
.share-story-mini:hover { opacity:1; border-color:var(--warm); }
.success-ig-block {
  margin-top:2.25rem; width:100%; max-width:340px;
  background:var(--night2); border:1px solid var(--night3);
  border-radius:var(--r-lg); padding:1.25rem 1.5rem; text-align:center;
}
.success-ig-desc { font-size:13px; color:var(--moon); opacity:0.6; line-height:1.75; margin-bottom:1rem; }
.btn-ig-follow {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
  color:#fff; font-weight:600; font-size:14px;
  padding:10px 22px; border-radius:var(--r); text-decoration:none;
  transition:transform 0.2s, box-shadow 0.2s;
}
.btn-ig-follow:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(220,39,67,0.35); }

/* ── Admin search ──────────────────────────────────────────── */
.adm-search { width:100%; padding:.55rem 1rem; border-radius:.5rem; border:1px solid var(--night3); background:var(--night); color:var(--moon); font-family:var(--font-body); font-size:.83rem; outline:none; margin-bottom:1.25rem; transition:border-color .2s; }
.adm-search:focus { border-color:var(--warm); }
.adm-search::placeholder { color:var(--moon); opacity:.25; }

/* ── Page fade transition ──────────────────────────────────── */
@keyframes pgFadeIn { from { opacity:0; } to { opacity:1; } }
body { animation: pgFadeIn 0.28s ease; }