/* ============================================================================
   Erasocial — "Community × Turquoise"
   Warm-editorial community layout in a deep-teal identity.
   System fonts only (CSP-safe, 0 requests). Motion: transform/opacity only.
   Tokens carry a full dark theme via [data-theme="dark"] (light is default).
   ============================================================================ */

:root{
  /* cool porcelain neutral ramp */
  --slate-950:#0F1517; --slate-900:#16232A; --slate-700:#3A4A52;
  --slate-500:#6E7F87; --slate-400:#93A2A8; --slate-300:#C6D0D4;
  --slate-200:#DFE5E8; --slate-100:#EAEEF0; --slate-50:#F3F6F7;

  /* brand — deep teal (not bright aqua) */
  --teal-800:#0A555C; --teal-700:#0B646D; --teal-600:#0E7C86;
  --teal-500:#12A0AD; --teal-100:#DCEFF1; --teal-50:#EEF7F8;

  /* accent — mature coral, used sparingly */
  --coral-600:#C2531F; --coral-500:#E07856; --coral-100:#FBECE4;

  /* feedback */
  --emerald-600:#147D63; --emerald-100:#E1F2EC;
  --rose-600:#C2401F; --rose-100:#F9E9E4; --gold-600:#9A6B12; --gold-100:#F6EFD9;

  /* semantic — components use ONLY these */
  --bg:var(--slate-50); --surface:#FFFFFF; --surface-sunk:var(--slate-100);
  --border:var(--slate-200); --border-strong:var(--slate-300);
  --text-dark:var(--slate-900); --text-mid:var(--slate-700); --text-muted:var(--slate-500);
  --primary:var(--teal-600); --primary-hover:var(--teal-700); --primary-ink:var(--teal-800);
  --primary-tint:var(--teal-100); --on-primary:#FFFFFF;
  --accent:var(--coral-500); --accent-tint:var(--coral-100);
  --success:var(--emerald-600); --success-tint:var(--emerald-100);
  --danger:var(--rose-600); --danger-tint:var(--rose-100);
  --focus:#2F6BE0;

  /* backward-compat aliases (legal pages still reference these) */
  --blue:var(--teal-600); --blue-dark:var(--teal-800); --blue-pale:var(--teal-100);
  --gold:var(--gold-600); --gold-pale:var(--gold-100);
  --green:var(--emerald-600); --green-pale:var(--emerald-100);
  --red:var(--rose-600); --red-pale:var(--rose-100);

  /* type */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;

  /* radius + shadow (cool-tinted) */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(20,40,48,.05), 0 1px 1px rgba(20,40,48,.04);
  --shadow-2:0 2px 4px rgba(20,40,48,.05), 0 8px 20px -8px rgba(20,40,48,.12);
  --shadow-3:0 4px 10px rgba(20,40,48,.07), 0 20px 44px -14px rgba(20,40,48,.20);
  --glow:0 8px 26px -10px rgba(14,124,134,.45);

  /* motion */
  --dur-fast:140ms; --dur:240ms; --dur-slow:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:calc(58px + env(safe-area-inset-bottom,0px));
}

:root[data-theme="dark"]{
  --bg:#0F1517; --surface:#161F23; --surface-sunk:#1C272C;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --text-dark:#ECEFF0; --text-mid:#B7C2C7; --text-muted:#84969C;
  --primary:#17A2AD; --primary-hover:#33B4BE; --primary-ink:#7FD6DD;
  --primary-tint:rgba(23,162,173,.16); --on-primary:#042427;
  --accent:#EC8A63; --accent-tint:rgba(236,138,99,.16);
  --success:#3BAE8C; --success-tint:rgba(59,174,140,.16);
  --danger:#E8795C; --danger-tint:rgba(232,121,92,.16);
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 10px 24px -12px rgba(0,0,0,.7);
  --shadow-3:0 20px 44px -16px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--text-dark);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-serif);font-weight:700;letter-spacing:-.01em;line-height:1.15}
a{color:var(--primary-ink)}

:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:var(--r-sm);padding:.7rem 1.2rem;
  font-family:var(--font-sans);font-size:.9rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.btn:active{transform:scale(.98)}
.btn-block{width:100%}
.btn-sm{padding:.45rem .85rem;font-size:.8rem;border-radius:8px}
.btn-primary,.btn-blue{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover,.btn-blue:hover{background:var(--primary-hover);box-shadow:var(--glow)}
.btn-outline{background:var(--surface);border:1.5px solid var(--border-strong);color:var(--text-mid)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-ink)}
.btn-red{background:var(--danger-tint);color:var(--danger)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* ===== FORMS ===== */
.form-group{margin-bottom:.9rem}
.form-label{display:block;font-size:.8rem;font-weight:600;color:var(--text-mid);margin-bottom:.35rem}
.form-input{
  width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);
  padding:.7rem .8rem;font-family:var(--font-sans);
  font-size:16px; /* < 16px makes iOS zoom on focus */
  background:var(--surface);color:var(--text-dark);
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.form-row{display:flex;gap:.75rem}
.form-row .form-group{flex:1}
.form-check{display:flex;align-items:flex-start;gap:.55rem;margin-bottom:1rem}
.form-check input[type="checkbox"]{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--primary)}
.form-check label{font-size:.8rem;color:var(--text-mid);line-height:1.45;cursor:pointer}

/* ===== CARD / BADGE / AVATAR ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--shadow-1)}
.badge{display:inline-block;padding:3px 10px;border-radius:var(--r-full);font-size:.7rem;font-weight:700}
.badge-blue{background:var(--primary-tint);color:var(--primary-ink)}
.badge-gold{background:var(--gold-100);color:var(--gold-600)}
.badge-green{background:var(--success-tint);color:var(--success)}
.avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:var(--on-primary);
  background:linear-gradient(140deg,var(--teal-500),var(--teal-700));
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--primary-tint);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-lg{width:64px;height:64px;font-size:1.1rem}

/* ===== AVATAR UPLOAD ===== */
.avatar-upload{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.avatar-hint{font-size:.72rem;color:var(--text-muted);margin-top:.35rem}

/* ===== EMPTY STATE ===== */
.empty-state{text-align:center;padding:2.25rem 1rem}
.empty-state-icon{font-size:2rem;margin-bottom:.5rem}
.empty-state-title{color:var(--text-muted);font-size:.9rem;font-weight:500}

/* ===== AUTH (index.html) ===== */
.auth-wrap{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:radial-gradient(120% 120% at 50% 0%, var(--teal-600) 0%, var(--teal-800) 60%, #06373C 100%);
}
.auth-card{background:var(--surface);border-radius:var(--r-lg);padding:2.25rem;max-width:410px;width:100%;box-shadow:var(--shadow-3);animation:rise var(--dur-slow) var(--ease-out) both}
.auth-logo{font-family:var(--font-serif);font-weight:700;font-size:1.9rem;color:var(--primary-ink);text-align:center;letter-spacing:.02em}
.auth-logo span{display:block;font-family:var(--font-sans);font-size:.62rem;font-weight:700;color:var(--accent);letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.auth-tabs{display:flex;gap:.4rem;margin:1.6rem 0 1.3rem;background:var(--surface-sunk);border-radius:var(--r-sm);padding:4px}
.auth-tab{flex:1;text-align:center;padding:.55rem;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;transition:color var(--dur-fast) ease,background var(--dur-fast) ease}
.auth-tab.active{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow-1)}

/* ===== APP SHELL (app.html) ===== */
.app-header{background:var(--primary-ink);padding:0 1.25rem;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}
.app-logo{font-family:var(--font-serif);font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:.04em}
.app-logo span{color:var(--teal-500)}
.app-signout{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.app-signout:hover{border-color:#fff;color:#fff}
.app-body{max-width:720px;margin:0 auto;padding:1.25rem 1.25rem calc(var(--nav-h) + 22px);animation:rise var(--dur-slow) var(--ease-out) both}
.panel-title{font-size:1.35rem;margin-bottom:1rem}
.mine-status{margin-top:1rem}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom,0)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:.6rem 0;font-size:.64rem;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;position:relative;transition:color var(--dur-fast) ease}
.bn-item.active{color:var(--primary)}
.bn-item.active::before{content:"";position:absolute;top:0;width:26px;height:2px;border-radius:2px;background:var(--primary)}

/* ===== DISCOVER ===== */
.filter-toggle{display:flex;gap:.5rem;margin-bottom:1.25rem}
.filter-btn{flex:1;padding:.6rem;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--surface);font-size:.82rem;font-weight:600;color:var(--text-mid);cursor:pointer;transition:all var(--dur-fast) ease}
.filter-btn.active{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-ink)}

.match-row{display:flex;align-items:center;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--border)}
.match-row:last-child{border:none}
.match-info{flex:1;min-width:0}
.match-name{font-weight:700;font-size:.95rem}
.match-meta{font-size:.78rem;color:var(--text-muted);margin-top:2px}
.match-bio{font-size:.8rem;color:var(--text-mid);margin-top:4px;line-height:1.4}
.row-actions{display:flex;gap:.75rem;margin-top:6px}
.row-actions button{background:none;border:none;padding:0;font-family:var(--font-sans);font-size:.74rem;font-weight:600;color:var(--text-muted);cursor:pointer}
.row-actions button:hover{color:var(--danger)}

.app-header-right{display:flex;align-items:center;gap:.5rem}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.chat-head-name{font-weight:700}

/* ===== ADMIN ===== */
.rep{padding:.9rem 0;border-bottom:1px solid var(--border)}
.rep:last-child{border:none}
.rep-meta{font-size:.72rem;color:var(--text-muted)}
.rep-target{font-size:.92rem;margin:2px 0}
.rep-reason{font-size:.85rem;color:var(--text-mid);background:var(--surface-sunk);border-radius:var(--r-sm);padding:.5rem .7rem;margin:.4rem 0}
.rep-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}

/* ===== PROFILE (About you) ===== */
.profile-card{margin-top:1rem}
.card-title{font-family:var(--font-serif);font-size:1.1rem;margin-bottom:.75rem}
.form-textarea{width:100%;min-height:74px;resize:vertical;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.7rem .8rem;font-family:var(--font-sans);font-size:16px;background:var(--surface);color:var(--text-dark);line-height:1.5}
.form-textarea::placeholder{color:var(--text-muted)}
.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{padding:.42rem .72rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--surface);color:var(--text-mid);font-family:var(--font-sans);font-size:.8rem;font-weight:600;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease}
.chip:hover{border-color:var(--primary)}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--primary-tint);border-color:var(--primary);color:var(--primary-ink)}

/* ===== MESSAGES ===== */
.messages-grid{display:grid;grid-template-columns:220px 1fr;gap:1rem}
.conv-list-card{padding:.5rem}
.conv-row{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-fast) ease}
.conv-row:hover{background:var(--primary-tint)}
.conv-row.active{background:var(--primary-tint)}
.conv-name{font-weight:700;font-size:.85rem}
.conv-preview{font-size:.76rem;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 260px);min-height:320px}
.chat-messages{flex:1;overflow-y:auto;padding:.5rem 0;display:flex;flex-direction:column;gap:.5rem}
.bubble{max-width:75%;padding:.55rem .85rem;border-radius:var(--r-md);font-size:.9rem;line-height:1.4;animation:pop var(--dur) var(--ease-out) both}
.bubble-mine{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-bottom-right-radius:4px}
.bubble-theirs{align-self:flex-start;background:var(--surface-sunk);border:1px solid var(--border);border-bottom-left-radius:4px}
.bubble-time{font-size:.62rem;opacity:.7;margin-top:3px}
.chat-input-row{display:flex;gap:.5rem;margin-top:.75rem}
.chat-input-row .form-input{flex:1}

/* ===== TOAST ===== */
.es-toast{position:fixed;bottom:calc(var(--nav-h) + 16px);left:50%;transform:translateX(-50%) translateY(14px);background:var(--slate-900);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);font-size:.85rem;font-weight:600;opacity:0;transition:opacity var(--dur) ease,transform var(--dur) var(--ease-out);z-index:200;white-space:nowrap;box-shadow:var(--shadow-3)}
.es-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.es-toast-error{background:var(--danger)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

/* ===== RESPONSIVE ===== */
@media(max-width:600px){
  .form-row{flex-direction:column;gap:0}
  .messages-grid{grid-template-columns:1fr}
  .conv-preview{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}