/* =========================================================
   팬이랑 (Fanirang) — Design tokens & global styles
   Recreated from design_handoff_fanirang (Android/Compose hifi spec)
   ========================================================= */

:root{
  /* ---- Light theme (default) ---- */
  --primary:#FF4D8D;
  --primary-deep:#E63A78;
  --primary-container:#FFE3EE;
  --on-primary:#FFFFFF;
  --secondary:#7C5CFF;
  --surface:#FFFBFC;
  --surface-container:#FFF4F8;
  --surface-container-high:#FCE9F1;
  --on-surface:#1A1420;
  --on-surface-var:#6B6672;
  --outline:#E8DFE7;
  --outline-soft:#F1E7EE;
  --star-on:#FFB300;
  --star-off:#CFC6D0;
  --official-green:#00A86B;
  --official-bg:#E6F7EF;
  --danger:#E5484D;
  --input-bg:#FFF4F8;
  --hero-tint:rgba(255,227,238,0.5);
  --frame:#2b2530;
  --card-bg:#FFFFFF;

  /* platform colors */
  --p-naver:#03C75A;
  --p-daum:#4285F4;
  --p-web:#7C5CFF;
  --p-dcinside:#F5A623;
  --p-kakao:#FEE500;

  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* shadow */
  --shadow-card:0 1px 2px rgba(26,20,32,0.04), 0 2px 8px rgba(255,77,141,0.06);
  --shadow-lift:0 8px 24px rgba(26,20,32,0.15);
  --shadow-splash:0 12px 32px rgba(255,77,141,0.25);
  --shadow-chip-active:0 2px 8px rgba(255,77,141,0.25);
  --shadow-cta:0 4px 12px rgba(255,77,141,0.3);

  --font-family:'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;

  --snack-bg:#2A2530;
  --snack-warn-bg:#3A2E20;
}

[data-theme="dark"]{
  --primary:#FF6EA3;
  --primary-deep:#FF4D8D;
  --primary-container:#4A1930;
  --on-primary:#FFFFFF;
  --secondary:#A48CFF;
  --surface:#141018;
  --surface-container:#1E1824;
  --surface-container-high:#2A2230;
  --on-surface:#F2ECF1;
  --on-surface-var:#A69CA6;
  --outline:#3A3140;
  --outline-soft:#26202D;
  --star-on:#FFC947;
  --star-off:#5A505A;
  --official-green:#3ED598;
  --official-bg:rgba(62,213,152,0.15);
  --danger:#FF6B70;
  --input-bg:#1E1824;
  --hero-tint:rgba(255,110,163,0.10);
  --frame:#0a070d;
  --card-bg:#1E1824;
  --shadow-splash:0 12px 32px rgba(255,110,163,0.35);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; height:100dvh; }
body{
  font-family:var(--font-family);
  background:#e9e4ea;
  color:var(--on-surface);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
[data-theme="dark"] body{ background:#0a070a; }
button{ font-family:inherit; }
img,svg{ display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- App shell: centered "phone" viewport on wide screens ---------- */
#app-shell{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--surface);
  position:relative;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}
@media (min-width:560px){
  body{ display:flex; justify-content:center; padding:20px 0; }
  #app-shell{
    min-height:calc(100vh - 40px);
    height:844px;
    max-height:calc(100vh - 40px);
    border-radius:36px;
    box-shadow:0 24px 64px rgba(0,0,0,0.28), 0 0 0 10px var(--frame);
  }
}

.screen{
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  position:relative;
}
.screen-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.screen-scroll::-webkit-scrollbar{ width:0; height:0; }

/* ---------- Keyframes ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes snackIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes snackOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes fadeSlideIn {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: translateY(0); }
}
@keyframes screenIn {
  from { opacity:0; transform: translateX(10px); }
  to { opacity:1; transform: translateX(0); }
}

/* ============================================================
   Splash
   ============================================================ */
.splash{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#FFE3EE 0%, var(--surface) 60%, #F1EBFF 100%);
}
[data-theme="dark"] .splash{
  background:linear-gradient(160deg,#2A1626 0%, var(--surface) 55%, #1A1230 100%);
}
.splash-sparkle{ position:absolute; opacity:0.5; }
.splash-content{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.splash-logo-card{
  width:96px; height:96px; border-radius:28px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-splash);
}
[data-theme="dark"] .splash-logo-card{ background:var(--surface-container-high); }
.splash-title{
  font-size:34px; font-weight:900; color:var(--on-surface);
  letter-spacing:-0.03em; text-align:center;
}
.splash-word{
  font-size:13px; font-weight:600; color:var(--primary);
  letter-spacing:0.2em; margin-top:4px; text-align:center;
}
.splash-tagline{
  font-size:15px; color:var(--on-surface-var); margin-top:8px; text-align:center;
}
.splash-dots{ position:absolute; bottom:48px; display:flex; gap:6px; }
.splash-dot{
  width:8px; height:8px; border-radius:50%; background:var(--primary);
  animation:bounce 1.4s ease-in-out infinite;
}

/* ============================================================
   Top bar
   ============================================================ */
.topbar{
  height:56px; padding:0 8px 0 4px;
  display:flex; align-items:center; gap:4px;
  background:var(--surface);
  border-bottom:1px solid var(--outline-soft);
  flex-shrink:0;
}
.topbar-leading{ width:48px; display:flex; align-items:center; justify-content:center; }
.topbar-title-wrap{ flex:1; overflow:hidden; }
.topbar-title{
  font-size:19px; font-weight:800; color:var(--on-surface); letter-spacing:-0.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-trailing{
  min-width:48px; height:48px; display:flex;
  align-items:center; justify-content:flex-end; padding-right:8px; gap:4px;
}
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-surface-var);
  transition:background .15s;
}
.icon-btn:hover{ background:var(--surface-container); }
.logo-wrap{ display:inline-flex; align-items:center; gap:8px; }
.logo-wordmark{ font-weight:800; font-size:16.5px; color:var(--on-surface); letter-spacing:-0.02em; }

/* ============================================================
   Category chips
   ============================================================ */
.chips-row{
  display:flex; gap:8px; padding:4px 16px 12px;
  overflow-x:auto; scrollbar-width:none; flex-shrink:0;
}
.chips-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; height:34px; padding:0 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--outline);
  background:#fff;
  color:var(--on-surface);
  font-size:14px; font-weight:500;
  cursor:pointer; transition:all .15s;
  white-space:nowrap;
}
[data-theme="dark"] .chip{ background:var(--surface-container); }
.chip.active{
  border:none;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  box-shadow:var(--shadow-chip-active);
}

/* ============================================================
   Search bar
   ============================================================ */
.search-wrap{ padding:0 16px 12px; flex-shrink:0; }
.search-box{
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 14px;
  border-radius:var(--r-pill);
  background:var(--input-bg);
  border:1.5px solid transparent;
  transition:all .15s;
}
.search-box.focused{
  background:#fff;
  border-color:var(--primary);
}
[data-theme="dark"] .search-box.focused{ background:var(--surface-container); }
.search-box svg{ flex-shrink:0; }
.search-input{
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-family); font-size:15px; color:var(--on-surface);
  padding:0; min-width:0;
}
.search-input::placeholder{ color:var(--on-surface-var); font-size:13px; }
.search-clear{
  border:none; background:var(--outline-soft); border-radius:50%;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; flex-shrink:0;
}

.result-count{
  padding:4px 16px 10px; font-size:13px; color:var(--on-surface-var); flex-shrink:0;
}
.result-count b{ color:var(--on-surface); }
.result-count .hl{ color:var(--primary); font-weight:700; }

/* ============================================================
   Avatar
   ============================================================ */
.avatar{
  border-radius:50%; position:relative; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.avatar-shine{
  position:absolute; top:8%; left:15%; width:45%; height:35%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.avatar-sparkle{ position:absolute; top:15%; right:18%; opacity:0.85; }
.avatar-initial{
  font-weight:900; color:#fff; letter-spacing:-0.03em;
  text-shadow:0 1px 2px rgba(0,0,0,0.12); position:relative; z-index:1;
}

/* ============================================================
   Celebrity row
   ============================================================ */
.celeb-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; cursor:pointer; transition:background .12s;
  animation:fadeSlideIn .25s ease-out both;
}
.celeb-row:hover{ background:var(--surface-container); }
.celeb-row-main{ flex:1; min-width:0; }
.celeb-row-top{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.celeb-name{ font-size:16px; font-weight:700; color:var(--on-surface); letter-spacing:-0.01em; }
.celeb-cat-pill{
  font-size:11px; font-weight:600; color:var(--primary-deep);
  background:var(--primary-container); padding:2px 7px; border-radius:var(--r-pill); line-height:1.4;
}
[data-theme="dark"] .celeb-cat-pill{ color:var(--primary); }
.celeb-sub{
  font-size:13px; color:var(--on-surface-var);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============================================================
   Star button
   ============================================================ */
.star-btn{
  border:none; background:transparent; cursor:pointer;
  padding:6px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.star-btn svg{ transition:transform .15s; }
.star-btn.pop svg{ transform:scale(1.25); }

/* ============================================================
   Empty search state
   ============================================================ */
.empty-search{
  display:flex; flex-direction:column; align-items:center;
  padding:48px 24px; gap:8px; text-align:center;
}
.empty-search-emoji{ font-size:40px; opacity:0.5; }
.empty-search-title{ font-size:15px; font-weight:700; color:var(--on-surface); }
.empty-search-sub{ font-size:13px; color:var(--on-surface-var); }

/* ============================================================
   Bottom nav
   ============================================================ */
.bottom-nav{
  display:flex; background:var(--surface);
  border-top:1px solid var(--outline-soft);
  padding:6px 0 4px; flex-shrink:0;
  padding-bottom:calc(4px + env(safe-area-inset-bottom));
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 0; border:none; background:transparent; cursor:pointer;
}
.nav-icon-wrap{
  padding:3px 18px; border-radius:var(--r-pill); transition:background .15s;
}
.nav-icon-wrap.active{ background:var(--primary-container); }
.nav-label{ font-size:11px; font-weight:500; color:var(--on-surface-var); }
.nav-label.active{ font-weight:700; color:var(--primary); }

/* ============================================================
   Detail — hero
   ============================================================ */
.hero{
  padding:20px 20px 24px;
  background:linear-gradient(180deg, var(--hero-tint) 0%, transparent 100%);
  display:flex; align-items:center; gap:16px;
}
.hero-info{ flex:1; min-width:0; }
.hero-name{ font-size:22px; font-weight:800; color:var(--on-surface); letter-spacing:-0.02em; margin-bottom:4px; }
.hero-meta-row{ display:inline-flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.hero-cat-pill{
  font-size:11px; font-weight:700; color:var(--primary-deep);
  background:#fff; padding:3px 8px; border-radius:var(--r-pill); line-height:1.4;
}
[data-theme="dark"] .hero-cat-pill{ color:var(--primary); background:var(--surface-container-high); }
.hero-group{ font-size:13px; font-weight:600; color:var(--on-surface); }
.hero-agency{ font-size:13px; color:var(--on-surface-var); }

/* ============================================================
   Section header
   ============================================================ */
.section-header{
  padding:4px 20px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.section-header.posts{ padding:28px 20px 12px; align-items:baseline; }
.section-title{ font-size:17px; font-weight:800; color:var(--on-surface); letter-spacing:-0.01em; }
.section-sub{ font-size:12px; color:var(--on-surface-var); margin-top:2px; }
.section-more{ font-size:13px; font-weight:700; color:var(--primary); cursor:pointer; }

/* ============================================================
   Segmented control (official filter)
   ============================================================ */
.segmented{
  display:inline-flex; background:var(--surface-container);
  border-radius:var(--r-pill); padding:3px; gap:2px; flex-shrink:0;
}
.segmented button{
  height:28px; padding:0 12px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:transparent; color:var(--on-surface-var);
  font-size:12px; font-weight:600; transition:all .15s;
}
.segmented button.active{ background:var(--primary); color:#fff; font-weight:700; }

/* ============================================================
   Cafe card
   ============================================================ */
.cafe-list{ padding:0 16px; display:flex; flex-direction:column; gap:10px; }
.cafe-card{
  display:flex; align-items:center; gap:14px; padding:16px;
  background:var(--card-bg); border:1px solid var(--outline); border-radius:var(--r-lg);
  cursor:pointer; transition:all .15s;
  animation:fadeSlideIn .25s ease-out both;
}
.cafe-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-card); }
.cafe-icon-wrap{
  width:44px; height:44px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.platform-dot{ display:inline-block; border-radius:50%; flex-shrink:0; }
.cafe-main{ flex:1; min-width:0; }
.cafe-top{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.cafe-official-badge{
  font-size:10px; font-weight:700; color:var(--official-green);
  background:var(--official-bg); padding:2px 6px; border-radius:4px; line-height:1.4; flex-shrink:0;
}
.cafe-name{
  font-size:15px; font-weight:700; color:var(--on-surface); letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; whiteSpace:nowrap;
}
.cafe-sub{
  font-size:12px; color:var(--on-surface-var); display:flex; align-items:center; gap:6px;
  overflow:hidden;
}
.cafe-sub .dot-sep{ opacity:0.4; }
.cafe-sub .desc{ overflow:hidden; text-overflow:ellipsis; whiteSpace:nowrap; }
.cafe-chevron{ flex-shrink:0; color:var(--on-surface-var); }
.cafe-empty{
  padding:32px 16px; text-align:center; background:var(--surface-container);
  border-radius:var(--r-lg); font-size:13px; color:var(--on-surface-var);
}

/* ============================================================
   Post card
   ============================================================ */
.post-list{ padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.post-card{
  padding:14px 16px; background:var(--card-bg); border:1px solid var(--outline);
  border-radius:var(--r-md); cursor:pointer;
}
.post-top{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; }
.post-badge{
  font-size:10px; font-weight:800; color:#fff; background:var(--primary);
  padding:2px 6px; border-radius:4px; line-height:1.4; flex-shrink:0;
}
.post-title{ font-size:14px; font-weight:600; color:var(--on-surface); line-height:1.4; letter-spacing:-0.01em; }
.post-meta{ display:flex; align-items:center; gap:10px; font-size:12px; color:var(--on-surface-var); }
.post-meta .sep{ opacity:0.4; }
.post-meta .spacer{ flex:1; }
.post-stat{ display:inline-flex; align-items:center; gap:3px; }

/* ============================================================
   Favorite empty
   ============================================================ */
.fav-empty{
  display:flex; flex-direction:column; align-items:center; padding:56px 32px; gap:16px; text-align:center;
}
.fav-empty-icon{
  width:88px; height:88px; border-radius:50%; background:var(--primary-container);
  display:flex; align-items:center; justify-content:center;
}
.fav-empty-title{ font-size:17px; font-weight:800; color:var(--on-surface); letter-spacing:-0.01em; }
.fav-empty-sub{ font-size:14px; line-height:1.5; color:var(--on-surface-var); }
.fav-empty-cta{
  margin-top:8px; padding:12px 24px; border-radius:var(--r-pill);
  background:var(--primary); color:#fff; border:none; cursor:pointer;
  font-size:14px; font-weight:700; box-shadow:var(--shadow-cta);
}

/* ============================================================
   Snackbar
   ============================================================ */
.snackbar{
  position:absolute; left:12px; right:12px; bottom:92px;
  background:var(--snack-bg); color:#fff; border-radius:var(--r-md);
  padding:12px 8px 12px 16px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-lift); font-size:14px; z-index:20;
  animation:snackIn .24s ease-out;
}
.snackbar.warn{ background:var(--snack-warn-bg); }
.snackbar.leaving{ animation:snackOut .2s ease-in forwards; }
.snackbar-text{ flex:1; line-height:1.4; }
.snackbar-action{
  background:transparent; border:none; color:var(--primary); font-size:14px; font-weight:700;
  cursor:pointer; padding:6px 12px; border-radius:var(--r-sm);
}
/* detail screen has no bottom nav, so its snackbar sits lower */
.screen-detail .snackbar{ bottom:24px; }

/* ============================================================
   Loading overlay
   ============================================================ */
.loading-overlay{
  position:absolute; inset:0; background:rgba(26,20,32,0.4);
  display:flex; align-items:center; justify-content:center; z-index:30;
  animation:fadeIn .15s ease-out;
}
.loading-card{
  background:#fff; border-radius:var(--r-lg); padding:24px 32px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:var(--shadow-lift); min-width:200px;
}
[data-theme="dark"] .loading-card{ background:var(--surface-container-high); }
.spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid var(--primary-container); border-top-color:var(--primary);
  animation:spin .9s linear infinite;
}
.loading-text{ font-size:14px; font-weight:600; color:var(--on-surface); }

/* ============================================================
   Misc
   ============================================================ */
.blink-cursor{
  display:inline-block; width:2px; height:16px; background:var(--primary);
  margin-left:2px; vertical-align:middle; animation:blink 1s infinite;
}
.screen-anim{ animation:screenIn .22s ease-out; }

.theme-toggle-btn svg{ transition:transform .3s; }

/* scrollbar hide util */
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ============================================================
   Landing (splash 직후, 미로그인 상태의 최초 진입 화면)
   ============================================================ */
.landing{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  position:relative; overflow:hidden;
  padding:56px 24px calc(24px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,#FFE3EE 0%, var(--surface) 60%, #F1EBFF 100%);
  animation:screenIn .22s ease-out;
}
[data-theme="dark"] .landing{
  background:linear-gradient(160deg,#2A1626 0%, var(--surface) 55%, #1A1230 100%);
}
.landing-content{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:32px; }
.landing-logo-card{ width:80px; height:80px; border-radius:24px; }
.landing-title{
  font-size:26px; font-weight:900; color:var(--on-surface);
  letter-spacing:-0.03em; text-align:center;
}

/* 태그라인-버튼 간격은 버튼 사이 간격(10px)의 2배로 고정 */
.landing-actions{ width:100%; max-width:340px; display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.social-btn{
  height:50px; border-radius:var(--r-pill); border:1px solid var(--outline);
  background:#fff; color:var(--on-surface); font-size:15px; font-weight:700;
  cursor:pointer; transition:opacity .15s;
}
.social-btn:hover{ opacity:0.85; }
[data-theme="dark"] .social-btn{ background:var(--surface-container); }
.social-btn.social-kakao{ background:#FEE500; border-color:#FEE500; color:#191919; }
.social-btn.social-naver{ background:#03C75A; border-color:#03C75A; color:#fff; }
.social-btn.social-apple{ background:#000; border-color:#000; color:#fff; }
[data-theme="dark"] .social-btn.social-apple{ background:#fff; color:#000; }

.landing-divider{
  display:flex; align-items:center; gap:10px;
  color:var(--on-surface-var); font-size:12px; margin:4px 0;
}
.landing-divider::before, .landing-divider::after{ content:''; flex:1; height:1px; background:var(--outline); }

.landing-skip{
  border:none; background:transparent; color:var(--on-surface-var);
  font-size:13px; font-weight:600; cursor:pointer; padding:8px;
  margin-top:auto; /* justify-content:flex-start로 바뀌었으니 skip 링크는 직접 하단에 고정 */
}

/* ============================================================
   Auth (login / signup)
   ============================================================ */
.topbar-text-btn{
  height:32px; padding:0 12px; border-radius:var(--r-pill);
  border:1px solid var(--outline); background:transparent;
  color:var(--on-surface); font-size:13px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:background .15s;
}
.topbar-text-btn:hover{ background:var(--surface-container); }

.auth-form{
  display:flex; flex-direction:column; gap:16px;
  padding:24px 20px 8px;
}
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-label{ font-size:13px; font-weight:600; color:var(--on-surface-var); }
.form-input{
  height:48px; padding:0 14px; border-radius:var(--r-md);
  background:var(--input-bg); border:1.5px solid transparent;
  font-family:var(--font-family); font-size:15px; color:var(--on-surface);
  outline:none; transition:border-color .15s;
}
.form-input:focus{ border-color:var(--primary); }
.form-error{
  font-size:13px; font-weight:600; color:var(--danger);
  background:rgba(229,72,77,0.12); background:color-mix(in srgb, var(--danger) 12%, transparent);
  padding:10px 12px; border-radius:var(--r-sm);
}
.form-submit{
  margin-top:4px; height:50px; border-radius:var(--r-pill);
  background:var(--primary); color:#fff; border:none; cursor:pointer;
  font-size:15px; font-weight:700; box-shadow:var(--shadow-cta);
  transition:opacity .15s;
}
.form-submit:disabled{ opacity:0.6; cursor:default; }
.auth-switch{
  text-align:center; padding:20px 20px 32px;
  font-size:13px; color:var(--on-surface-var);
}
.auth-switch-link{
  border:none; background:transparent; padding:0; margin-left:2px;
  color:var(--primary); font-size:13px; font-weight:700; cursor:pointer;
}