/* Fluidater.eym identity, sign-in gate, and small-screen account layout. */
:root { --fluid:#77e1cb; --fluid-deep:#3b9e9a; }
.fluid-mark {
  position:relative; display:inline-block; flex:none; width:34px; height:34px;
  overflow:hidden; border-radius:43% 57% 56% 44% / 47% 42% 58% 53%;
  background:linear-gradient(145deg,#d4fff4 0%,#83e6d0 42%,#399a9b 100%);
  box-shadow:0 0 24px #68e4cf38,inset -5px -6px 11px #17656e66,inset 4px 5px 10px #ffffff88;
  animation:fluidShape 7s ease-in-out infinite;
}
.fluid-mark::before,.fluid-mark::after { content:""; position:absolute; left:-18%; width:136%; height:72%; border-radius:44%; }
.fluid-mark::before { top:42%; background:linear-gradient(150deg,#d4fff2,#5ed3c4 60%,#56bac0); transform:rotate(-13deg); animation:fluidWave 4.8s ease-in-out infinite; }
.fluid-mark::after { top:61%; left:-28%; width:150%; height:68%; background:linear-gradient(160deg,#54c9bd,#327d8c); opacity:.9; transform:rotate(12deg); animation:fluidWave 5.8s ease-in-out infinite reverse; }
.fluid-mark i,.fluid-mark b { position:absolute; z-index:1; display:block; border-radius:50%; background:#effff9b8; filter:blur(.3px); }
.fluid-mark i { width:5px; height:5px; left:9px; top:8px; }
.fluid-mark b { width:3px; height:3px; left:17px; top:5px; opacity:.78; }
.brand { gap:12px; }
.brand .fluid-mark { width:32px; height:32px; }
.quick-questions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:10px 0 4px; }
.quick-questions > span { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.4px; margin-right:3px; }
.quick-questions .button { border-color:#344747; background:#14201f; }
.quick-questions .button:hover { border-color:var(--fluid); color:#d8fff5; }
.auth-loading { display:none; align-items:center; justify-content:center; gap:14px; min-height:100vh; color:var(--text); }
.auth-loading .fluid-mark { width:48px; height:48px; }
.auth-loading b,.auth-loading small { display:block; }
.auth-loading b { font:600 18px 'Space Grotesk',sans-serif; }
.auth-loading small { margin-top:4px; color:var(--muted); font-size:12px; }
html.auth-required .app { display:block; min-height:100vh; }
html.auth-required .side,html.auth-required .top,html.auth-required .mobilebar { display:none !important; }
html.auth-required .main { display:flex; align-items:center; justify-content:center; min-height:100vh; max-width:960px; padding:clamp(16px,4vw,48px); }
html.auth-required .content { display:none !important; }
html.auth-required #authLoading { display:flex; }
html.auth-required.account-ready #authLoading { display:none; }
html.auth-required.account-ready #account.show { display:block !important; width:100%; }
html.auth-required #account .sectionhead { margin-bottom:22px; }
html.auth-required #account .sectionhead::before { content:""; display:block; width:52px; height:52px; margin-bottom:18px; border-radius:45% 55% 62% 38% / 42% 42% 58% 58%; background:linear-gradient(145deg,#d4fff4,#83e6d0 42%,#399a9b); box-shadow:0 0 32px #68e4cf40,inset -6px -6px 10px #17656e55; animation:fluidShape 7s ease-in-out infinite; }
html.auth-required #account .grid.twocol { align-items:start; }
html.auth-required #account .card:first-child { border-color:#38544e; box-shadow:0 16px 55px #0005; }
#account .field:focus-visible,.button:focus-visible,.nav button:focus-visible { outline:2px solid var(--fluid); outline-offset:2px; }
.plan.featured { border-color:#60cdb9; box-shadow:0 0 0 1px #60cdb933,0 18px 60px #0004; }
.plan.featured::before { content:"ULTIMATE EXCLUSIVE"; display:inline-block; margin:-3px 0 10px; padding:5px 8px; border-radius:20px; background:#193b3b; color:#a5ffeb; font:10px 'DM Mono',monospace; letter-spacing:.8px; }
@keyframes fluidWave { 0%,100%{transform:translateX(-2%) rotate(-13deg)} 50%{transform:translateX(5%) rotate(-7deg)} }
@keyframes fluidShape { 0%,100%{border-radius:43% 57% 56% 44% / 47% 42% 58% 53%} 50%{border-radius:56% 44% 42% 58% / 52% 59% 41% 48%} }
@media(max-width:650px) { html.auth-required .main{padding:16px;align-items:flex-start} html.auth-required #account{padding-top:8vh} html.auth-required #account .grid.twocol{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce) { .fluid-mark,.fluid-mark::before,.fluid-mark::after,html.auth-required #account .sectionhead::before { animation:none !important; } }