/* Feelo app chrome — shared design system for the logged-in / auth pages
   (signup, login, dashboard, create). One night theme across the platform:
   the same sky as the landing page's opening (deep violet night, a rose glow,
   stars), rose→coral gradient accents and glassy cards.
   Experience templates never load this file; they use tones.css. */

:root{
  --night:#140F24;
  --bg:#140F24;
  --surface:#1D1631;          /* solid: menus, sheets, popovers */
  --surface-2:#261D40;        /* raised */
  --glass:rgba(255,255,255,.055);
  --ink:#F7F2FF;
  --ink-2:#DCD3EE;
  --muted:#A69CC0;
  --on-light:#1B1530;         /* text on the few things that stay light (notes, chips) */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --rose:#F43F6E;
  --coral:#FF7A59;
  --violet:#7C3AED;
  --rose-2:#FF7A9E;           /* rose text on night */
  --violet-2:#C4A8FF;
  --mint:#6EE7B7;
  --rose-soft:rgba(244,63,110,.15);
  --violet-soft:rgba(124,58,237,.2);
  --mint-soft:rgba(52,211,153,.14);
  --danger:#FF6B86;
  --grad:linear-gradient(120deg,#E11D6B 0%,#F43F6E 35%,#FF5E3A 75%,#FF7A1A 100%);
  --grad-btn:linear-gradient(120deg,#F43F6E 0%,#FF6A5E 100%);
  --grad-violet:linear-gradient(135deg,#7C3AED 0%,#C026D3 55%,#F43F6E 100%);
  --radius:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.25);
  --shadow-md:0 18px 40px -20px rgba(0,0,0,.7);
  --shadow-lg:0 30px 60px -24px rgba(124,58,237,.45), 0 18px 36px -18px rgba(0,0,0,.6);
  --sky:radial-gradient(70% 55% at 0% 0%, rgba(244,63,110,.24), transparent 62%), radial-gradient(60% 60% at 100% 18%, rgba(124,58,237,.3), transparent 62%), radial-gradient(60% 50% at 50% 110%, rgba(255,106,94,.12), transparent 60%), #140F24;
  --glow:0 12px 28px -8px rgba(244,63,110,.55);
  --font:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; color-scheme:dark; }
body{
  margin:0; min-height:100vh; background:var(--sky); background-attachment:fixed; color:var(--ink); font-family:var(--font);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid rgba(244,63,110,.45); outline-offset:3px; border-radius:10px; }
[hidden]{ display:none !important; }
/* the night sky's stars, fixed behind every page */
body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,.8), transparent), radial-gradient(1.4px 1.4px at 210px 160px, #FFE3EC, transparent), radial-gradient(1px 1px at 70px 190px, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,.6), transparent);
  background-size:290px 230px; }
::selection{ background:rgba(244,63,110,.45); color:#fff; }

/* ---------- text ---------- */
.grad{
  background:var(--grad); background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:gradShift 6s ease-in-out infinite;
}
@keyframes gradShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.page-title{ font-weight:800; letter-spacing:-.035em; line-height:1.08; font-size:clamp(1.9rem,4.4vw,2.6rem); margin:0; }
.page-sub{ color:var(--muted); margin:8px 0 0; font-size:1.02rem; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:var(--rose-soft); color:var(--rose-2); font-weight:700; font-size:.78rem;
  border:1px solid rgba(244,63,110,.28); white-space:nowrap;
}
.pill.violet{ background:var(--violet-soft); color:var(--violet-2); border-color:rgba(124,58,237,.35); }
.pill.mint{ background:var(--mint-soft); color:var(--mint); border-color:rgba(52,211,153,.3); }
.pill.muted{ background:var(--glass); color:var(--muted); border-color:transparent; }

/* ---------- brand ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-mark{ width:34px; height:34px; flex:0 0 auto; background:url(/brand/feelo-mark.svg) center/contain no-repeat; filter:drop-shadow(0 6px 14px rgba(244,63,110,.35)); }
.brand-word{ font-weight:800; font-size:1.45rem; letter-spacing:-.04em; }
.brand-word span{ color:var(--rose-2); }

/* ---------- buttons ---------- */
.btn, .chrome-btn-primary, .chrome-btn-secondary{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  border-radius:999px; padding:13px 24px; font-weight:700; font-size:.95rem; border:none; overflow:hidden; cursor:pointer;
  transition:transform .25s var(--pop), box-shadow .25s var(--ease), background .2s ease, opacity .2s ease;
}
.btn-primary, .chrome-btn-primary{ background:var(--grad-btn); color:#fff; box-shadow:var(--glow); }
.btn-primary::after, .chrome-btn-primary::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);
  transition:left .7s var(--ease);
}
.btn-primary:hover, .chrome-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(244,63,110,.65); }
.btn-primary:hover::after, .chrome-btn-primary:hover::after{ left:140%; }
.btn-secondary, .chrome-btn-secondary{ background:var(--glass); color:var(--ink); border:1px solid var(--line-strong); box-shadow:none; }
.btn-secondary:hover, .chrome-btn-secondary:hover{ transform:translateY(-2px); border-color:var(--rose-2); color:var(--rose-2); }
.btn-dark{ background:#fff; color:var(--on-light); box-shadow:0 10px 22px -10px rgba(0,0,0,.6); }
.btn-dark:hover{ transform:translateY(-2px); background:#FFE8EF; }
.btn-ghost{ background:transparent; color:var(--ink-2); padding:10px 14px; }
.btn-ghost:hover{ color:var(--rose-2); }
.btn-sm{ padding:8px 14px; font-size:.84rem; }
.btn-block{ width:100%; }
button:disabled, .btn[aria-disabled="true"]{ opacity:.55; cursor:default; transform:none !important; box-shadow:none; }

/* ---------- cards ---------- */
.card, .chrome-card{ background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* ---------- forms ---------- */
.field{ display:block; margin-top:18px; }
.field-label{ display:block; font-weight:600; font-size:.88rem; color:var(--ink-2); margin-bottom:8px; }
.field-hint{ font-size:.8rem; color:var(--muted); margin-top:6px; }
.chrome-input, select.chrome-input, textarea.chrome-input{
  width:100%; border:1.5px solid var(--line-strong); background:rgba(255,255,255,.05); border-radius:var(--radius-sm);
  padding:13px 16px; font-family:var(--font); font-size:1rem; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.chrome-input::placeholder{ color:rgba(220,211,238,.45); }
.chrome-input:hover{ border-color:rgba(255,255,255,.26); }
.chrome-input:focus{ outline:none; border-color:var(--rose); background:rgba(255,255,255,.08); box-shadow:0 0 0 4px rgba(244,63,110,.18); }
select.chrome-input option{ background:#1D1631; color:#F7F2FF; }
select.chrome-input{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A69CC0' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.form-error{
  margin-top:14px; padding:11px 14px; border-radius:12px; background:rgba(255,107,134,.1); color:var(--danger);
  font-size:.9rem; font-weight:500; border:1px solid rgba(255,107,134,.3); display:none;
}

.chrome-toggle{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:10px 0; }
.chrome-toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.chrome-toggle .switch{
  position:relative; width:44px; height:26px; border-radius:999px; background:rgba(255,255,255,.14); flex-shrink:0; margin-top:1px;
  transition:background .25s ease;
}
.chrome-toggle .switch::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(27,21,48,.2); transition:transform .25s var(--pop);
}
.chrome-toggle input:checked + .switch{ background:var(--grad-btn); }
.chrome-toggle input:checked + .switch::after{ transform:translateX(18px); }
.chrome-toggle input:focus-visible + .switch{ box-shadow:0 0 0 4px rgba(244,63,110,.2); }
.chrome-toggle .label{ font-size:.9rem; color:var(--ink-2); line-height:1.45; }

/* ---------- app header (logged-in pages) ---------- */
.app-header{
  position:sticky; top:0; z-index:40;
  background:rgba(20,15,36,.72);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.app-header-inner{
  max-width:1200px; margin:0 auto; padding:0 16px; height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
@media(min-width:720px){ .app-header-inner{ padding:0 32px; } }
.app-header .actions{ display:flex; align-items:center; gap:8px; }
@media(max-width:420px){ .app-header .brand-word{ display:none; } }

/* ---------- soft pastel blob background ---------- */
.mesh{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.mesh span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.6; animation:blob 24s ease-in-out infinite; }
.mesh .b1{ width:520px; height:520px; background:#F43F6E; opacity:.16; top:-18%; left:-14%; }
.mesh .b2{ width:460px; height:460px; background:#7C3AED; opacity:.22; top:30%; right:-16%; animation-direction:reverse; animation-duration:28s; }
.mesh .b3{ width:380px; height:380px; background:#FF6A5E; opacity:.1; bottom:-22%; left:30%; animation-duration:32s; }
@keyframes blob{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(40px,-30px) scale(1.08); } 66%{ transform:translate(-30px,30px) scale(.95); } }
.page{ position:relative; z-index:1; }

@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- auth pages (login / signup) ---------- */
.auth{ position:relative; z-index:1; min-height:100vh; display:grid; }
@media(min-width:960px){ .auth{ grid-template-columns:1fr 1fr; } }
.auth-main{ display:flex; flex-direction:column; padding:24px 16px 40px; }
@media(min-width:720px){ .auth-main{ padding:32px 48px 48px; } }
.auth-main .brand{ align-self:flex-start; }
.auth-form-wrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 0; }
.auth-card{ width:100%; max-width:440px; padding:34px 28px; }
@media(min-width:520px){ .auth-card{ padding:40px 38px; } }
.auth-card h1{ font-weight:800; letter-spacing:-.035em; font-size:2rem; line-height:1.1; margin:12px 0 6px; }
.auth-card .tagline{ color:var(--muted); margin:0 0 8px; }
.auth-card .submit{ margin-top:26px; width:100%; padding:15px; font-size:1rem; }
.auth-switch{ margin-top:22px; text-align:center; font-size:.93rem; color:var(--muted); }
.auth-switch a{ color:var(--rose-2); font-weight:700; text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }
.consent-block{ margin-top:22px; padding:6px 16px; border-radius:var(--radius-md); background:var(--glass); border:1px solid var(--line); }
.consent-block .chrome-toggle + .chrome-toggle{ border-top:1px solid var(--line); }

.auth-side{
  display:none; position:relative; overflow:hidden; color:#fff; padding:56px;
  background:linear-gradient(150deg,rgba(124,58,237,.5),rgba(192,38,211,.3) 55%,rgba(244,63,110,.32)); border-left:1px solid var(--line); flex-direction:column; justify-content:center;
}
@media(min-width:960px){ .auth-side{ display:flex; } }
.auth-side::before, .auth-side::after{ content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.12); }
.auth-side::before{ width:460px; height:460px; top:-160px; right:-140px; }
.auth-side::after{ width:320px; height:320px; bottom:-140px; left:-80px; }
.auth-side > *{ position:relative; z-index:1; }
.auth-side h2{ font-weight:800; letter-spacing:-.035em; line-height:1.06; font-size:clamp(2.2rem,3.4vw,3rem); margin:18px 0 14px; max-width:480px; }
.auth-side p{ color:rgba(255,255,255,.85); font-size:1.08rem; max-width:440px; margin:0; }
.auth-side .pill{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.22); align-self:flex-start; }
.auth-chips{ display:grid; gap:14px; margin-top:40px; max-width:360px; }
.auth-chip{
  display:flex; align-items:center; gap:12px; padding:12px 16px 12px 12px; border-radius:16px;
  background:rgba(255,255,255,.95); color:var(--on-light); box-shadow:0 18px 36px -14px rgba(0,0,0,.55);
  font-weight:700; font-size:.92rem; animation:bob 5s ease-in-out infinite;
}
.auth-chip:nth-child(2){ margin-left:44px; animation-delay:1.4s; }
.auth-chip:nth-child(3){ margin-left:14px; animation-delay:2.8s; }
.auth-chip small{ display:block; font-weight:500; color:#6F6885; font-size:.8rem; }
.auth-chip .av{ flex:0 0 38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem; background:#FFE8EF; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}