/* MASTER K — Entry Experience 2.0 (pseudo-3D emblem + composition)
   UI only. No Three.js / WebGL. */

/* ---- Welcome stage vignette (darker center, sacred geometry edges show) ---- */
#intro-overlay {
  background:
    radial-gradient(ellipse 55% 50% at 50% 42%, rgba(0, 0, 0, 0.55) 0%, transparent 72%),
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(200, 168, 74, 0.10) 0%, transparent 58%),
    rgba(1, 1, 12, 0.94) !important;
}

.intro-panel {
  gap: 14px !important;
  max-width: 480px !important;
}

/* ---- Emblem depth stack ---- */
.mk-emblem-stage {
  position: relative;
  width: clamp(152px, 30vw, 196px);
  height: clamp(152px, 30vw, 196px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 720px;
  margin: 0 auto 4px;
  transform: translateZ(0);
}

.mk-emblem-stage--login {
  width: clamp(96px, 18vw, 128px);
  height: clamp(96px, 18vw, 128px);
  margin-bottom: 2px;
}

.mk-emblem-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, transparent 68%);
  pointer-events: none;
  animation: mk-emblem-breathe 16s ease-in-out infinite;
}

.mk-emblem-halo {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.22);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.12),
    0 0 40px rgba(212, 175, 55, 0.06);
  pointer-events: none;
  animation: mk-emblem-breathe 18s ease-in-out infinite reverse;
}

.mk-emblem-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s ease-out;
}

.mk-emblem-plane {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: mk-emblem-drift 20s ease-in-out infinite;
}

.mk-emblem-img,
.intro-logo.mk-emblem-img,
.master-k-main-logo.mk-emblem-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  background: rgba(0, 0, 0, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 236, 190, 0.08) inset,
    0 1px 2px rgba(255, 236, 190, 0.12),
    0 0 10px rgba(212, 175, 55, 0.16),
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 236, 190, 0.08);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: none;
}

.mk-emblem-img:hover,
.master-k-main-logo.mk-emblem-img:hover {
  transform: none;
}

.mk-emblem-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 245, 210, 0.14) 48%,
    transparent 62%
  );
  opacity: 0.55;
  animation: mk-emblem-sheen 14s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.mk-emblem-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -10%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(4px);
  opacity: 0.85;
}

@keyframes mk-emblem-drift {
  0%, 100% { transform: rotateX(1.2deg) rotateY(-1.4deg) translateY(0); }
  33% { transform: rotateX(-1.1deg) rotateY(1.6deg) translateY(-2px); }
  66% { transform: rotateX(0.8deg) rotateY(1.1deg) translateY(1px); }
}

@keyframes mk-emblem-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.03); }
}

@keyframes mk-emblem-sheen {
  0%, 100% { transform: translateX(-8%) rotate(0deg); opacity: 0.35; }
  50% { transform: translateX(8%) rotate(2deg); opacity: 0.7; }
}

/* Standalone MASTER K wordmark under emblem (KO / JA welcome) */
.intro-brand-mark {
  display: none;
  margin: 2px 0 0;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.85rem, 5.2vw, 2.55rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.1;
  color: #d4af37;
  text-shadow:
    0 1px 0 rgba(255, 236, 190, 0.4),
    0 -1px 0 rgba(72, 48, 8, 0.48),
    0 2px 4px rgba(0, 0, 0, 0.7),
    0 4px 14px rgba(0, 0, 0, 0.75);
}

html[lang="ko"] .intro-brand-mark,
html[lang="ja"] .intro-brand-mark,
body[data-ui-language="ko"] .intro-brand-mark,
body[data-ui-language="ja"] .intro-brand-mark {
  display: block;
}

/* Brand philosophy subline under MASTER K (welcome) */
.intro-brand-tagline {
  display: none;
  margin: 0.2rem auto 0.55rem;
  max-width: 22rem;
  font-family: 'Cormorant Garamond', 'Noto Serif KR', 'Noto Serif JP', Georgia, serif;
  font-size: clamp(1.05rem, 2.9vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(232, 220, 180, 0.96);
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* KO/JA: show brand under wordmark (wordmark visible). EN uses welcome_tagline instead. */
html[lang="ko"] .intro-brand-tagline,
html[lang="ja"] .intro-brand-tagline,
body[data-ui-language="ko"] .intro-brand-tagline,
body[data-ui-language="ja"] .intro-brand-tagline {
  display: block;
}

html[lang="en"] .intro-brand-tagline,
body[data-ui-language="en"] .intro-brand-tagline {
  display: none !important;
}

html[lang="ko"] .intro-heading,
html[lang="ja"] .intro-heading,
body[data-ui-language="ko"] .intro-heading,
body[data-ui-language="ja"] .intro-heading {
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-family: 'Cormorant Garamond', 'Noto Serif KR', 'Noto Serif JP', serif !important;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem) !important;
  font-weight: 600 !important;
  color: #e6d9bc !important;
  margin-top: 4px !important;
}

html[lang="ko"] .intro-tagline,
html[lang="ja"] .intro-tagline,
body[data-ui-language="ko"] .intro-tagline,
body[data-ui-language="ja"] .intro-tagline {
  color: rgba(210, 200, 180, 0.9);
  font-size: clamp(0.95rem, 2.6vw, 1.08rem);
  line-height: 1.7;
  max-width: 22rem;
}

html[lang="ko"] .intro-btn-enter,
html[lang="ja"] .intro-btn-enter,
body[data-ui-language="ko"] .intro-btn-enter,
body[data-ui-language="ja"] .intro-btn-enter {
  text-transform: none;
  letter-spacing: 0.08em;
  font-family: 'DM Sans', 'Noto Sans KR', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  min-width: 160px;
}

/* Login stage: clearer center focus, compact card */
html[lang="ko"] .force-mk-sub:empty,
html[lang="ja"] .force-mk-sub:empty,
body[data-ui-language="ko"] .force-mk-sub:empty,
body[data-ui-language="ja"] .force-mk-sub:empty {
  display: none !important;
}

html[lang="ko"] .force-mk-main,
html[lang="ja"] .force-mk-main,
body[data-ui-language="ko"] .force-mk-main,
body[data-ui-language="ja"] .force-mk-main {
  font-size: clamp(2.2rem, 7vw, 3.2rem) !important;
  letter-spacing: 0.14em !important;
}

html[lang="ko"] .gateway-card,
html[lang="ja"] .gateway-card,
body[data-ui-language="ko"] .gateway-card,
body[data-ui-language="ja"] .gateway-card {
  max-width: 420px;
  padding: 28px 28px 32px !important;
}

html[lang="ko"] .card-title,
html[lang="ja"] .card-title,
body[data-ui-language="ko"] .card-title,
body[data-ui-language="ja"] .card-title {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

html[lang="ko"] .card-desc,
html[lang="ja"] .card-desc,
body[data-ui-language="ko"] .card-desc,
body[data-ui-language="ja"] .card-desc {
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: rgba(200, 194, 180, 0.92);
  text-align: center;
}

html[lang="ko"] .social-gateway-hint,
html[lang="ja"] .social-gateway-hint {
  font-size: 0.8rem;
  opacity: 0.88;
  text-align: center;
  display: block;
  margin-top: 10px;
}

html[lang="ko"] .feats,
html[lang="ja"] .feats,
body[data-ui-language="ko"] .feats,
body[data-ui-language="ja"] .feats {
  opacity: 0.94;
  max-width: 520px;
  margin-top: 14px;
}

/* Soft fade in entrance */
#intro-overlay .intro-panel {
  animation: mk-entry-fade 0.9s ease-out both;
}

@keyframes mk-entry-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.page.is-gateway-ready .brand,
.page.is-gateway-ready .gateway-card {
  animation: mk-entry-fade 0.75s ease-out both;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mk-emblem-plane,
  .mk-emblem-aura,
  .mk-emblem-halo,
  .mk-emblem-sheen,
  #intro-overlay .intro-panel,
  .page.is-gateway-ready .brand,
  .page.is-gateway-ready .gateway-card {
    animation: none !important;
  }
  .mk-emblem-tilt {
    transition: none !important;
    transform: none !important;
  }
  .mk-emblem-plane {
    transform: none !important;
  }
}

@media (max-width: 540px) {
  .mk-emblem-stage {
    width: clamp(120px, 36vw, 148px);
    height: clamp(120px, 36vw, 148px);
  }
  .mk-emblem-stage--login {
    width: 96px;
    height: 96px;
  }
  .mk-emblem-aura {
    inset: -10%;
  }
  html[lang="ko"] .gateway-card,
  html[lang="ja"] .gateway-card {
    padding: 24px 18px 28px !important;
  }
}

/* ============================================================
   JA / EN entry mobile final polish V1 (body.mk-entry-surface)
   Desktop ≥1024 / ≥721 legal chrome unchanged.
   ============================================================ */

/* Suite legal: desktop uses #mkLegalHeaderNav — hide duplicates.
   Primary mobile show authority: suite-menu.css (#suiteMenuLegalBlock !important).
   Keep this as belt-and-suspenders; do not gate on body.mk-entry-surface. */
#suiteMenuLegalBlock,
.suite-menu-legal-block {
  display: none !important;
}

@media (max-width: 720px) {
  .mk-entry-surface {
    overflow-x: hidden;
  }

  /* Top chrome: language left · hamburger right · no legal row collision.
     Primary hide authority: #mkLegalHeaderNavCss inline (display:none !important).
     Belt-and-suspenders here — ID selector, no body-class gate. */
  #mkLegalHeaderNav,
  .mk-legal-header-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #suiteMenuLegalBlock,
  .suite-menu-legal-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.22);
  }

  .suite-menu-link--legal {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(200, 192, 168, 0.88) !important;
    -webkit-text-fill-color: rgba(200, 192, 168, 0.88);
  }

  .mk-entry-surface .lang-selector {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    min-height: 44px;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  .mk-entry-surface .lang-btn {
    min-height: 32px;
    min-width: 36px;
    padding: 6px 8px;
    font-size: 0.68rem;
  }

  .mk-entry-surface .suite-menu-anchor {
    top: max(12px, env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .mk-entry-surface .suite-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
  }

  .mk-entry-surface .suite-menu-dropdown {
    min-width: min(260px, calc(100vw - 28px));
    max-width: calc(100vw - 24px);
  }

  .mk-entry-surface .suite-menu-link {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
  }

  /* Entry/onboarding mobile: hide fixed disclaimer badge under language.
     Modal stays in DOM; suite #suiteMenuDisclaimerBtn opens it. */
  body.mk-entry-surface #mkOfficialDisclaimerBtn,
  body.mk-entry-surface .mk-official-disclaimer-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
  }

  /* Fail-certain when entry body class is absent but entry chrome is present. */
  body:has(#langSelector):has(#suiteMenuLegalBlock) #mkOfficialDisclaimerBtn,
  body:has(#langSelector):has(#suiteMenuLegalBlock) .mk-official-disclaimer-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hero / page rhythm — clear of fixed chrome */
  .mk-entry-surface .page {
    padding-top: calc(88px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .mk-entry-surface .brand {
    margin-bottom: clamp(14px, 3.5vh, 22px);
  }

  .mk-entry-surface .master-k-logo-wrapper {
    margin-bottom: 10px;
  }

  .mk-entry-surface .force-mk-wrapper {
    margin-top: 2px;
    margin-bottom: 10px;
  }

  .mk-entry-surface .force-mk-main {
    font-size: clamp(2.4rem, 11vw, 3.2rem) !important;
    letter-spacing: 0.12em !important;
  }

  .mk-entry-surface .force-mk-sub {
    font-size: clamp(0.82rem, 3.4vw, 1.02rem) !important;
    line-height: 1.55 !important;
    max-width: 20rem;
    padding: 0 4px;
  }

  .mk-entry-surface .card,
  .mk-entry-surface #step1-gateway.gateway-card {
    width: 100% !important;
    max-width: min(545px, calc(100vw - 32px)) !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .mk-entry-surface .social-gateway-btn {
    min-height: 48px;
  }

  .mk-entry-surface .mk-dev-qa-panel {
    max-width: 100%;
    box-sizing: border-box;
  }

  .mk-entry-surface .mk-dev-qa-actions {
    flex-wrap: wrap;
  }

  .mk-entry-surface .mk-dev-qa-btn {
    min-height: 40px;
    box-sizing: border-box;
  }

  .mk-entry-surface .feats {
    max-width: min(545px, calc(100vw - 32px));
    width: 100%;
    box-sizing: border-box;
  }

  .mk-entry-surface .mk-legal-footer {
    max-width: min(545px, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .mk-entry-surface .mk-legal-footer-identity,
  .mk-entry-surface .mk-legal-footer-copy {
    padding: 0 4px;
  }

  .mk-entry-surface .mk-legal-footer-identity-link {
    word-break: break-all;
  }
}

@media (max-width: 540px) {
  .mk-entry-surface .card,
  .mk-entry-surface #step1-gateway.gateway-card {
    padding: 26px 18px 30px !important;
    border-radius: 16px !important;
  }

  .mk-entry-surface .card-title {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    text-align: center;
  }

  .mk-entry-surface .card-desc,
  .mk-entry-surface .gateway-free-note,
  .mk-entry-surface .social-gateway-hint {
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .mk-entry-surface .feats {
    grid-template-columns: repeat(2, 1fr);
  }

  .mk-entry-surface .feat {
    padding: 14px 10px;
  }

  .mk-entry-surface .feat-lbl {
    font-size: 0.78rem;
    line-height: 1.4;
  }
}

/* Desktop: suite legal hidden; fixed legal header restored (≥721) */
@media (min-width: 721px) {
  .suite-menu-legal-block,
  #suiteMenuLegalBlock {
    display: none !important;
  }

  /* Entry desktop: keep fixed disclaimer badge (not relocated on desktop). */
  body.mk-entry-surface #mkOfficialDisclaimerBtn,
  body.mk-entry-surface .mk-official-disclaimer-btn,
  body:has(#langSelector) #mkOfficialDisclaimerBtn {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  #mkLegalHeaderNav,
  .mk-legal-header-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: min(52vw, 420px) !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
}

/* ===== MASTER_K F7B2_LOW_RISK_STATIC BEGIN ===== */
/* F7B2 migrated from templates/index.html:1156 */
.mk-s-index-L1156-text-align-center-line-heigh {
  text-align: center; line-height: 1.35;
}

/* F7B2 migrated from templates/onboarding.html:1369 */
.mk-s-onboarding-L1369-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1364 */
.mk-s-onboarding-L1364-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1356 */
.mk-s-onboarding-L1356-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1349 */
.mk-s-onboarding-L1349-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1341 */
.mk-s-onboarding-L1341-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1336 */
.mk-s-onboarding-L1336-margin-bottom-0 {
  margin-bottom:0;
}

/* F7B2 migrated from templates/onboarding.html:1252 */
.mk-s-onboarding-L1252-margin-top-15px-font-style-i {
  margin-top: 15px; font-style: italic; color: #bca87e;
}

/* F7B2 migrated from templates/onboarding.html:1250 */
.mk-s-onboarding-L1250-text-align-center-line-heigh {
  text-align: center; line-height: 1.4;
}


/* ==== F7B2 externalized from templates/index.html:1192-1237 ==== */
  .force-mk-wrapper {
      text-align: center;
      margin-top: 6px;
      margin-bottom: 14px;
      z-index: 999;
      position: relative;
  }
  .force-mk-main {
      font-family: 'Cinzel', 'Times New Roman', serif !important;
      font-size: 3.8rem !important;
      font-weight: 900 !important;
      letter-spacing: 6px !important;
      margin: 0 !important;
      line-height: 1.2 !important;
      /* Subtle metallic gold — soft highlight/shade, not neon or glossy gradient */
      color: #c9a84a !important;
      text-shadow:
          0 1px 0 rgba(255, 236, 190, 0.4),
          0 -1px 0 rgba(72, 48, 8, 0.45),
          0 2px 4px rgba(0, 0, 0, 0.85),
          0 4px 14px rgba(0, 0, 0, 0.75) !important;
  }
  .force-mk-sub {
      font-family: 'Cormorant Garamond', 'Noto Serif KR', 'Noto Serif JP', 'Cinzel', Georgia, serif !important;
      font-size: clamp(0.88rem, 2.6vw, 1.1rem) !important;
      font-weight: 500 !important;
      color: rgba(237, 233, 224, 0.92) !important;
      letter-spacing: 0.04em !important;
      margin: 10px 0 0 0 !important;
      max-width: 26rem;
      margin-left: auto !important;
      margin-right: auto !important;
      line-height: 1.5 !important;
      text-transform: none !important;
      text-shadow:
          0px 2px 8px rgba(0, 0, 0, 1),
          0px 0px 12px rgba(0, 0, 0, 0.75) !important;
  }
  html[lang="en"] .force-mk-sub,
  body[data-ui-language="en"] .force-mk-sub {
      font-family: 'Cinzel', 'Cormorant Garamond', Georgia, serif !important;
      letter-spacing: 0.08em !important;
      font-size: clamp(0.78rem, 2.2vw, 0.98rem) !important;
  }


/* ==== F7B2 externalized from templates/index.html:22-1051 ==== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --void:      #01010c;
      --deep:      #060616;
      --navy:      #0a0a22;
      --gold:      #c8a84a;
      --gold-lt:   #e6cc80;
      --gold-pale: #f0e0a0;
      --gold-dim:  rgba(200,168,74,0.12);
      --gold-glow: rgba(200,168,74,0.06);
      --text:      #ede9e0;
      --soft:      #c0bbb0;
      --muted:     #706880;
      --border:    rgba(200,168,74,0.14);
      --glass:     rgba(255,255,255,0.024);
      --r:         16px;
    }

    html, body { height: 100%; }

    /* Premium language toggle — top-left, opposite suite menu */
    .lang-selector {
      position: fixed;
      top: 18px;
      left: 18px;
      z-index: 10020;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 1px solid rgba(200, 168, 74, 0.35);
      border-radius: 12px;
      background: rgba(6, 6, 18, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    }
    .lang-btn {
      font-family: 'Cinzel', 'Times New Roman', serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(200, 168, 74, 0.55);
      background: transparent;
      border: 0;
      padding: 2px 4px;
      cursor: pointer;
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .lang-btn:hover,
    .lang-btn:focus-visible {
      color: #FFD700;
      outline: none;
    }
    .lang-btn.is-active {
      color: #FFD700;
      text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
    }
    .lang-sep {
      color: rgba(200, 168, 74, 0.28);
      font-size: 0.75rem;
      user-select: none;
    }
    @media (max-width: 520px) {
      .lang-selector { top: 12px; left: 12px; padding: 8px 10px; gap: 5px; }
      .lang-btn { font-size: 0.65rem; }
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--void);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Cinematic cosmic background */
    .bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(200,168,74,0.07) 0%, transparent 52%),
        radial-gradient(ellipse  70% 55% at 90%  80%, rgba(70,50,120,0.05)  0%, transparent 55%),
        radial-gradient(ellipse  60% 45% at  5%  65%, rgba(40,70,140,0.04)  0%, transparent 52%),
        radial-gradient(ellipse  50% 40% at 50% 110%, rgba(200,168,74,0.04) 0%, transparent 50%),
        linear-gradient(170deg, var(--void) 0%, var(--deep) 50%, #080720 100%);
    }

    /* Star canvas */
    #cv { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

    /* Orbital rings */
    .orbs {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
    }
    .orb {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(200,168,74,0.055);
    }
    .orb-a { width: 460px; height: 460px; animation: ospin  70s linear infinite; }
    .orb-b { width: 760px; height: 760px; animation: ospin 110s linear infinite reverse; }
    .orb-c { width:1040px; height:1040px; border-color: rgba(200,168,74,0.025); animation: ospin 160s linear infinite; }
    .orb-a::after, .orb-b::after {
      content: ''; position: absolute; top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 12px 4px rgba(200,168,74,0.60);
    }
    @keyframes ospin { to { transform: rotate(360deg); } }

    /* Page wrapper */
    .page {
      position: relative; z-index: 20;
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 70px 20px 60px;
    }

    /* ---- Brand ---- */
    .brand { text-align: center; margin-bottom: 28px; }

    .master-k-logo-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 16px;
    }
    .master-k-main-logo {
      width: 152px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.10));
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .master-k-main-logo:hover {
      transform: scale(1.02);
      filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.18));
    }

    /* ---- Form card ---- */
    .card {
      width: 100%; max-width: 545px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px 46px 36px;
      backdrop-filter: blur(4px) saturate(1.4);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.022) inset,
        0 1px 0 rgba(255,255,255,0.055) inset,
        0 50px 120px rgba(0,0,0,0.65);
    }
    .card-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px; font-weight: 600;
      color: var(--gold-lt); margin-bottom: 10px;
      letter-spacing: 0.04em;
      text-align: center;
      line-height: 1.35;
    }
    .card-desc {
      font-size: 14.5px; line-height: 1.7;
      color: rgba(192, 187, 176, 0.92); margin-bottom: 12px;
      text-align: center;
    }
    .gateway-free-note {
      display: block;
      margin: 8px auto 14px;
      max-width: 28em;
      color: rgba(255, 215, 0, 0.95);
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.45;
      text-align: center;
    }

    /* ---- Form fields ---- */
    .f { margin-bottom: 26px; }
    #step1-gateway #socialGatewayBlock.f { margin-bottom: 0; }
    .f-label {
      display: flex; align-items: center;
      font-size: 9px; font-weight: 600;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 11px;
    }
    .f-label:empty { display: none; }

    .f-input, .f-select {
      width: 100%; padding: 14px 16px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 14px;
      color: var(--text);
      font-size: 14px; font-family: 'DM Sans', sans-serif;
      outline: none;
      transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
      color-scheme: dark; -webkit-appearance: none;
    }
    .f-input::placeholder { color: rgba(112,104,128,0.55); }
    .f-input:focus, .f-select:focus {
      border-color: rgba(255, 215, 0, 0.75);
      background: rgba(0, 0, 0, 0.5);
      box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.12),
        0 0 18px rgba(255, 215, 0, 0.28);
    }

    /* Custom select arrow */
    .f-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23c8a84a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-color: rgba(0, 0, 0, 0.4);
      padding-right: 38px; cursor: pointer;
    }
    .f-select option, .f-select optgroup {
      background: #0e0e26; color: var(--text);
    }
    .f-select optgroup { color: var(--gold); font-size: 11px; }

    /* Date of birth -- 3 column grid (Month - Day - Year, Western format) */
    .dob-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 4px;
    }
    .dob-grid .f { margin-bottom: 0; }
    .dob-grid .f-select { min-height: 48px; }

    /* Time input */
    .time-wrap { position: relative; }
    .time-icon {
      position: absolute; left: 13px; top: 50%;
      transform: translateY(-50%);
      color: var(--muted); font-size: 14px; pointer-events: none;
      z-index: 1;
    }
    .f-input.with-icon { padding-left: 36px; }

    /* Luxury pill-shaped toggles (Gender & Calendar) */
    .pill-row,
    .gender-row,
    .calendar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: stretch;
      margin-top: 4px;
    }
    .pill {
      flex: 1 1 140px;
      min-width: 0;
      position: relative;
    }
    .pill input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      margin: 0;
      pointer-events: none;
      clip: rect(0, 0, 0, 0);
    }
    .pill label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      min-height: 48px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 215, 0, 0.2);
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      letter-spacing: 0.04em;
      transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.2s ease;
      user-select: none;
      text-align: center;
    }
    .pill label:hover {
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
    }
    .pill input:checked + label {
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%);
      border-color: rgba(255, 215, 0, 0.65);
      color: #0a0804;
      text-shadow: none;
      box-shadow:
        0 4px 18px rgba(200, 168, 74, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
      transform: translateY(-1px);
    }
    .pill input:focus-visible + label {
      outline: 2px solid rgba(255, 215, 0, 0.55);
      outline-offset: 2px;
    }

    /* TST label badge */
    .tst-badge {
      display: inline-flex; align-items: center;
      margin-left: 8px; padding: 2px 7px;
      background: rgba(200,168,74,0.11);
      border: 1px solid rgba(200,168,74,0.28);
      border-radius: 4px;
      font-size: 8px; font-weight: 700;
      color: var(--gold); letter-spacing: 0.12em;
      cursor: help;
    }
    .tst-hint {
      margin-top: 10px;
      font-size: 10.5px; color: rgba(112,104,128,0.62);
      line-height: 1.5;
    }

    /* Submit button */
    .btn-submit {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      width: 100%; margin-top: 42px;
      padding: 22px 28px;
      min-height: 64px;
      background: linear-gradient(130deg, #c8a84a 0%, #8a6010 45%, #c8a84a 100%);
      background-size: 200% 100%;
      border: none; border-radius: 14px;
      color: #06040a;
      font-family: 'DM Sans', sans-serif;
      font-size: 23px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 6px 28px rgba(200,168,74,0.28);
      transition: background-position 0.5s, transform 0.2s, box-shadow 0.2s;
      animation: pulse-glow 2.8s ease-in-out infinite;
    }
    .btn-submit > [data-i18n="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      text-align: center;
    }
    .btn-submit:hover {
      background-position: 100% 0;
      transform: translateY(-2px);
      animation: none;
      box-shadow: 0 14px 44px rgba(200,168,74,0.45), 0 0 36px rgba(255, 215, 0, 0.35);
    }
    .btn-submit:active { transform: none; }
    .btn-arrow { font-size: 22px; line-height: 1; flex-shrink: 0; }

    /* Free career teaser — secondary CTA */
    .btn-teaser {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; margin-top: 14px;
      padding: 16px 24px; min-height: 52px;
      background: transparent;
      border: 1.5px solid rgba(212, 175, 55, 0.65);
      border-radius: 14px; color: #D4AF37;
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
      letter-spacing: 0.06em; line-height: 1.35; text-align: center;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .btn-teaser:hover {
      background: rgba(212, 175, 55, 0.12);
      border-color: rgba(212, 175, 55, 0.9);
      box-shadow: 0 0 18px rgba(212, 175, 55, 0.22);
    }

    /* Time input — 24-hour numeric picker (no AM/PM) */
    .time-wrap { position: relative; }
    .time-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      margin-top: 4px;
    }
    .time-sep {
      font-size: 1.1rem; font-weight: 700;
      color: rgba(212, 175, 55, 0.75);
      user-select: none;
    }
    .time-grid .f-select { min-height: 48px; }

    /* [A5] Seamless Social Gateway — Google / Apple / LINE only */
    .social-gateway {
      display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
    }
    .social-gateway-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(10px);
      color: #F8F5EC; font-size: 0.95rem; font-weight: 600;
      letter-spacing: 0.02em; cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }
    .social-gateway-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
    }
    .social-gateway-btn:focus-visible {
      outline: 2px solid rgba(212, 175, 55, 0.85);
      outline-offset: 2px;
      box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
    }
    .social-gateway-btn:disabled { opacity: 0.55; cursor: wait; }
    .social-gateway-btn[data-provider="line"] {
      border-color: rgba(6, 199, 85, 0.55);
    }
    /* 05P OWNER-DEV Fresh QA — never styled like production login */
    .mk-dev-qa-panel {
      margin-top: 1.25rem;
      padding: 0.75rem 0.85rem;
      border: 1px dashed rgba(180, 180, 180, 0.45);
      border-radius: 6px;
      background: rgba(40, 40, 40, 0.35);
      text-align: left;
    }
    .mk-dev-qa-badge {
      display: inline-block;
      font: 600 10px/1.2 ui-monospace, Consolas, monospace;
      letter-spacing: 0.08em;
      color: #9aa0a6;
      border: 1px solid rgba(154, 160, 166, 0.5);
      padding: 0.2rem 0.4rem;
      margin-bottom: 0.45rem;
      text-transform: uppercase;
    }
    .mk-dev-qa-title {
      margin: 0 0 0.55rem;
      font: 500 12px/1.35 ui-monospace, Consolas, monospace;
      color: #b0b4ba;
    }
    .mk-dev-qa-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }
    .mk-dev-qa-btn {
      font: 500 11px/1.2 ui-monospace, Consolas, monospace;
      color: #c8ccd0;
      background: transparent;
      border: 1px solid rgba(154, 160, 166, 0.55);
      border-radius: 4px;
      padding: 0.4rem 0.65rem;
      cursor: pointer;
      text-decoration: none;
    }
    .mk-dev-qa-btn:hover {
      color: #e8eaed;
      border-color: rgba(200, 204, 208, 0.75);
    }
    .social-gateway-hint {
      display: block; margin-top: 10px; font-size: 12.5px;
      line-height: 1.55; color: rgba(200, 194, 180, 0.82);
      text-align: center;
    }
    .social-gateway-status {
      min-height: 1.2em; margin-top: 6px; font-size: 0.8rem; color: #D4AF37;
    }

    /* Career teaser modal */
    .career-teaser-overlay {
      display: none; position: fixed; inset: 0; z-index: 100002;
      align-items: center; justify-content: center;
      background: rgba(5, 5, 12, 0.88); backdrop-filter: blur(10px);
      padding: 16px;
    }
    .career-teaser-overlay.is-open { display: flex; }
    .career-teaser-panel {
      width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
      padding: 26px 22px 22px; border-radius: 18px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: linear-gradient(165deg, rgba(18, 12, 32, 0.98), rgba(8, 8, 14, 0.98));
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
    }
    .career-teaser-panel h2 {
      margin: 0 0 12px; font-family: 'Cinzel', serif;
      color: #D4AF37; font-size: 1.35rem; letter-spacing: 0.06em;
    }
    .career-teaser-keyword {
      font-size: 1.15rem; font-weight: 700; color: #F3E6B8;
      margin: 0 0 12px; line-height: 1.5;
    }
    .career-teaser-badge {
      display: inline-block; margin-bottom: 12px; padding: 6px 12px;
      border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    }
    .career-teaser-badge.match { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
    .career-teaser-badge.mismatch { background: rgba(212, 175, 55, 0.12); color: #D4AF37; border: 1px solid rgba(212,175,55,0.45); }
    .career-teaser-badge.suggest { background: rgba(80, 140, 255, 0.14); color: #9ec5ff; border: 1px solid rgba(120,170,255,0.45); }
    .career-teaser-body { color: #ddd; font-size: 0.95rem; line-height: 1.65; margin-bottom: 14px; }
    .career-teaser-alert {
      margin: 12px 0; padding: 12px 14px; border-radius: 10px;
      background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(248, 113, 113, 0.45);
      color: #fecaca; font-size: 0.9rem; line-height: 1.55;
    }
    .career-teaser-cta {
      display: block; width: 100%; margin-top: 16px; padding: 16px;
      text-align: center; text-decoration: none;
      border-radius: 12px; font-weight: 700; letter-spacing: 0.06em;
      background: linear-gradient(90deg, #B8860B, #D4AF37); color: #1a1208;
    }
    .career-teaser-close {
      margin-top: 10px; width: 100%; padding: 10px;
      background: transparent; border: none; color: #888;
      cursor: pointer; text-decoration: underline; font-size: 0.85rem;
    }

    /* Age gate modal */
    .age-gate-overlay {
      display: none; position: fixed; inset: 0; z-index: 100001;
      align-items: center; justify-content: center;
      background: rgba(5, 5, 10, 0.88); backdrop-filter: blur(8px);
    }
    .age-gate-overlay.is-open { display: flex; }
    .age-gate-panel {
      max-width: 420px; margin: 20px; padding: 28px 26px 24px;
      border-radius: 16px; border: 1px solid rgba(212, 175, 55, 0.45);
      background: linear-gradient(160deg, rgba(20, 14, 36, 0.98), rgba(8, 8, 14, 0.98));
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.15); text-align: center;
    }
    .age-gate-title { color: #D4AF37; font-family: 'Cinzel', serif; margin: 0 0 12px; }
    .age-gate-body { color: #ccc; line-height: 1.6; margin: 0 0 18px; font-size: 0.95rem; }
    .age-gate-btn {
      width: 100%; padding: 14px; border: none; border-radius: 10px;
      background: linear-gradient(90deg, #B8860B, #D4AF37); color: #1a1208;
      font-weight: 700; cursor: pointer;
    }

    @keyframes pulse-glow {
      0% {
        box-shadow:
          0 6px 24px rgba(200, 168, 74, 0.22),
          0 0 0 rgba(255, 215, 0, 0);
      }
      50% {
        box-shadow:
          0 8px 32px rgba(200, 168, 74, 0.38),
          0 0 28px rgba(255, 215, 0, 0.55),
          0 0 48px rgba(212, 175, 55, 0.28);
      }
      100% {
        box-shadow:
          0 6px 24px rgba(200, 168, 74, 0.22),
          0 0 0 rgba(255, 215, 0, 0);
      }
    }

    /* ============================================================
       FRACTAL MANDALA -- .cosmic-wrapper
       Pure-black background image: screen blend removes black,
       gold lines glow. No masking needed.
       ============================================================ */
    .cosmic-wrapper {
      position: fixed;
      top: 50%; left: 50%;
      width: 150vmax; height: 150vmax;
      z-index: 2;
      pointer-events: none;

      background: url('/static/cosmic_bg.png') no-repeat center center;
      background-size: cover;

      mix-blend-mode: screen;
      /* ~25% quieter so auth card leads hierarchy */
      opacity: 0.52;

      border-radius: 50%;
      -webkit-mask-image: radial-gradient(circle closest-side, black 60%, transparent 100%);
              mask-image: radial-gradient(circle closest-side, black 60%, transparent 100%);

      animation: cosmic-majestic-spin 180s linear infinite;
    }

    /* Localized vignette — lifts card without blurring artwork */
    .page::before {
      content: '';
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: min(720px, 94vw);
      height: min(640px, 78vh);
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 55% 50% at 50% 48%,
        rgba(1, 1, 12, 0.55) 0%,
        rgba(1, 1, 12, 0.22) 45%,
        transparent 72%
      );
    }

    @keyframes cosmic-majestic-spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* Error hint */
    .f-error {
      display: none; margin-top: 6px;
      font-size: 11px; color: #f87171;
      letter-spacing: 0.04em;
    }
    .f-error.show { display: block; }

    .f-hint {
      display: block;
      margin-top: 10px;
      font-size: 12.5px;
      color: rgba(176, 170, 158, 0.88);
      letter-spacing: 0.03em;
      line-height: 1.55;
      text-align: center;
    }

    /* Feature strip */
    .feats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      width: 100%; max-width: 545px;
      margin-top: 14px;
      border: 1px solid rgba(200, 168, 74, 0.16);
      border-radius: var(--r);
      overflow: hidden;
      background: rgba(255,255,255,0.022);
      backdrop-filter: blur(4px);
      opacity: 1;
    }
    .feat {
      padding: 12px 10px; text-align: center;
      border-right: 1px solid rgba(200, 168, 74, 0.12);
    }
    .feat.mk-feat-preview-trigger { cursor: pointer; }
    .feat:last-child { border-right: none; }
    .feat-icon { font-size: 17px; margin-bottom: 5px; opacity: 0.88; }
    .feat-lbl { font-size: 11.5px; font-weight: 500; color: rgba(210, 204, 190, 0.90); letter-spacing: 0.03em; line-height: 1.4; }

    /* Footer */
    .footer {
      margin-top: 22px; font-size: 11px; letter-spacing: 0.12em;
      color: rgba(176, 170, 158, 0.55); text-align: center;
    }

    /* ============================================================
       TRUE PREMIUM GLASSMORPHISM
       ============================================================ */

    /* 1. Frosted glass panel — auth card focus */
    .card {
      max-width: 545px !important;
      padding: 40px 46px 36px !important;
      background: rgba(15, 10, 30, 0.42) !important;
      backdrop-filter: blur(16px) saturate(120%) !important;
      border: 1px solid rgba(160, 32, 240, 0.50) !important;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    }
    #step1-gateway.gateway-card {
      position: relative;
      z-index: 3;
    }
    /* F1: compact vertical density under helper — keep premium, cut dead area */
    #step1-gateway #socialGatewayBlock.f {
      margin-bottom: 0;
    }
    #step1-gateway .social-gateway-status:empty {
      min-height: 0;
      margin-top: 0;
    }

    /* 2. Clean readable text -- no black boxes, just crisp soft shadow */
    .card-title, .card-desc,
    .f-label, .f-error, .tst-hint,
    .feat-lbl, .footer {
      background: transparent !important;
      color: #ffffff !important;
      text-shadow: 0 2px 6px rgba(0,0,0,0.90), 0 0 2px rgba(0,0,0,1) !important;
      letter-spacing: 0.5px;
    }
    .card-desc {
      padding: 0 !important;
      color: rgba(232, 226, 214, 0.90) !important;
      font-size: 14.5px !important;
      line-height: 1.7 !important;
      text-align: center !important;
      text-shadow: 0 1px 4px rgba(0,0,0,0.75) !important;
    }
    /* F1: free-reading benefit — centered with primary copy, not stray body */
    .gateway-free-note {
      display: block;
      margin: 8px auto 14px;
      padding: 0;
      max-width: 28em;
      color: rgba(255, 215, 0, 0.95) !important;
      font-size: 14.5px !important;
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.45;
      text-align: center !important;
      background: transparent !important;
      text-shadow: 0 1px 4px rgba(0,0,0,0.75) !important;
    }
    .social-gateway-hint,
    .f-hint.social-gateway-hint {
      color: rgba(220, 214, 200, 0.90) !important;
      font-size: 12.5px !important;
      line-height: 1.55 !important;
      text-align: center !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
    }
    .feat-lbl {
      padding: 0 !important;
      color: rgba(210, 204, 190, 0.90) !important;
      font-size: 11.5px !important;
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
    }
    .footer {
      padding: 0 !important;
      color: rgba(200, 194, 180, 0.55) !important;
      font-size: 11px !important;
    }

    /* 3. Title: premium gold */
    .card-title {
      padding: 0 !important;
      color: #FFD700 !important;
      text-shadow: 0 4px 12px rgba(0,0,0,0.90) !important;
    }

    /* 4. Frosted glass inputs — soft gold edge, not harsh border */
    .f-input, .f-select {
      background-color: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 215, 0, 0.2) !important;
      color: #ffffff !important;
      text-shadow: none !important;
      transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease !important;
    }
    .f-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23c8a84a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 14px center !important;
    }
    .f-input::placeholder { color: rgba(200, 200, 200, 0.40) !important; }

    /* 5. Focus: brighter gold + soft glow */
    .f-input:focus, .f-select:focus {
      background-color: rgba(0, 0, 0, 0.5) !important;
      border: 1px solid rgba(255, 215, 0, 0.75) !important;
      box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.12),
        0 0 18px rgba(255, 215, 0, 0.28) !important;
    }

    /* 6. Pill toggles — preserve luxury pill chrome (do not zero padding) */
    .pill label {
      background: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 215, 0, 0.2) !important;
      border-radius: 999px !important;
      padding: 12px 16px !important;
      color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
    }
    .pill input:checked + label {
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%) !important;
      border-color: rgba(255, 215, 0, 0.65) !important;
      color: #0a0804 !important;
      text-shadow: none !important;
      box-shadow:
        0 4px 18px rgba(200, 168, 74, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    /* Loading overlay */
    #ov {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: rgba(1,1,12,0.96);
      backdrop-filter: blur(24px);
      flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    }
    #ov.on { display: flex; }
    .ov-visual {
      position: relative;
      width: 132px;
      height: 132px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ov-mandala {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, transparent 38%, rgba(200, 168, 74, 0.14) 39%, transparent 41%),
        repeating-conic-gradient(
          from 0deg at 50% 50%,
          rgba(200, 168, 74, 0.22) 0deg 8deg,
          transparent 8deg 16deg
        );
      mask-image: radial-gradient(circle, #000 28%, transparent 68%);
      -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%);
      animation: mandala-spin 28s linear infinite;
      opacity: 0.85;
    }
    .ov-mandala::before,
    .ov-mandala::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(200, 168, 74, 0.18);
    }
    .ov-mandala::before {
      inset: 18px;
      animation: mandala-spin 20s linear infinite reverse;
    }
    .ov-mandala::after {
      inset: 32px;
      border-style: dashed;
      opacity: 0.7;
      animation: mandala-spin 36s linear infinite;
    }
    .ov-glow {
      position: absolute;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200, 168, 74, 0.22) 0%, rgba(200, 168, 74, 0.06) 45%, transparent 72%);
      animation: glow-pulse 3.2s ease-in-out infinite;
      pointer-events: none;
    }
    .ov-spin { position: relative; width: 76px; height: 76px; z-index: 1; }
    .ov-spin::before, .ov-spin::after {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%; border: 2px solid transparent;
    }
    .ov-spin::before { border-top-color: var(--gold);               animation: spin 1.1s linear infinite; }
    .ov-spin::after  { inset: 10px; border-top-color: rgba(200,168,74,0.36); animation: spin 0.72s linear infinite reverse; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes mandala-spin { to { transform: rotate(360deg); } }
    @keyframes glow-pulse {
      0%, 100% { transform: scale(0.92); opacity: 0.55; }
      50% { transform: scale(1.06); opacity: 1; }
    }
    .ov-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(20px, 4.5vw, 26px);
      font-weight: 300;
      letter-spacing: 0.08em;
      line-height: 1.45;
      max-width: min(92vw, 440px);
      min-height: 3em;
      margin: 0 auto;
      background: linear-gradient(135deg, #e6cc80, #c8a84a);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 1;
      transition: opacity 0.55s ease;
    }
    .ov-title.is-fading { opacity: 0; }
    .ov-text-block {
      text-align: center;
      border-bottom: 2px solid rgba(255, 215, 0, 0.6);
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
      padding-bottom: 14px;
    }
    .ov-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; margin-top: 8px; }
    .ov-dots { display: flex; gap: 7px; }
    .ov-dots span {
      width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
      animation: dot-f 1.4s infinite both;
    }
    .ov-dots span:nth-child(2) { animation-delay: 0.2s; }
    .ov-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dot-f { 0%,80%,100%{opacity:0.18} 40%{opacity:1} }

    /* ---- Intro welcome overlay ---- */
    #intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 40px 24px;
      background:
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(200, 168, 74, 0.14) 0%, transparent 60%),
        rgba(1, 1, 12, 0.97);
      backdrop-filter: blur(20px);
      text-align: center;
    }
    .intro-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      max-width: 520px;
      width: 100%;
    }
    .intro-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 0 2px;
    }
    .intro-logo {
      width: clamp(152px, 30.5vw, 196px);
      height: clamp(152px, 30.5vw, 196px);
      border-radius: 50%;
      object-fit: cover;
      border: 1.5px solid rgba(212, 175, 55, 0.62);
      background: rgba(0, 0, 0, 0.35);
      /* Metallic rim — further −20% bloom; keep restrained gold depth */
      box-shadow:
        0 0 0 1px rgba(255, 236, 190, 0.10) inset,
        0 1px 2px rgba(255, 236, 190, 0.14),
        0 0 6px rgba(212, 175, 55, 0.17),
        0 5px 16px rgba(0, 0, 0, 0.55);
      animation: none;
    }
    .intro-heading {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.05rem, 3.2vw, 1.35rem);
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin: 0;
      color: #c9a84a;
      text-shadow:
        0 1px 0 rgba(255, 236, 190, 0.38),
        0 -1px 0 rgba(72, 48, 8, 0.42),
        0 1px 1px rgba(0, 0, 0, 0.55),
        0 3px 10px rgba(0, 0, 0, 0.72);
    }
    .intro-heading .intro-mk-name {
      display: block;
      margin-top: 0.28em;
      font-size: clamp(1.75rem, 5.5vw, 2.55rem);
      font-weight: 800;
      letter-spacing: 0.2em;
      line-height: 1.15;
      color: #d4af37;
      text-shadow:
        0 1px 0 rgba(255, 236, 190, 0.42),
        0 -1px 0 rgba(72, 48, 8, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 4px 14px rgba(0, 0, 0, 0.75);
    }
    html[lang="ja"] .intro-heading,
    html[lang="ko"] .intro-heading,
    body[data-ui-language="ja"] .intro-heading,
    body[data-ui-language="ko"] .intro-heading {
      text-transform: none;
      letter-spacing: 0.06em;
      font-size: clamp(1.1rem, 3.4vw, 1.4rem);
    }
    html[lang="ja"] .intro-heading .intro-mk-name,
    html[lang="ko"] .intro-heading .intro-mk-name,
    body[data-ui-language="ja"] .intro-heading .intro-mk-name,
    body[data-ui-language="ko"] .intro-heading .intro-mk-name {
      letter-spacing: 0.12em;
    }
    .intro-tagline {
      font-family: 'Cormorant Garamond', 'Noto Serif KR', 'Noto Serif JP', serif;
      font-size: clamp(1.05rem, 2.8vw, 1.2rem);
      line-height: 1.55;
      color: #d4cbb8;
      margin: 0;
      max-width: 420px;
    }
    .intro-sub {
      margin: 0;
      font-style: italic;
      color: #bca87e;
      font-size: 0.98rem;
      line-height: 1.45;
      max-width: 400px;
    }
    .intro-sub:empty {
      display: none;
    }
    .intro-btns {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 2px;
    }
    .intro-btn {
      min-width: 140px;
      padding: 15px 32px;
      border-radius: 10px;
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .intro-btn-enter {
      cursor: pointer;
      border: none;
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%);
      color: #0a0806;
      box-shadow: 0 6px 18px rgba(200, 168, 74, 0.22);
    }
    .page.is-gateway-ready #step1-gateway {
      outline: none;
    }
    .intro-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(200, 168, 74, 0.28);
    }

    @media (max-width: 540px) {
      .master-k-main-logo { width: 120px; }
      .card { padding: 32px 22px 38px; border-radius: 16px; }
      .dob-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .dob-grid .f:last-child { grid-column: span 2; }
      .gender-row .pill, .calendar-row .pill { flex: 1 1 100%; }
      .pill label { min-height: 52px; padding: 14px 18px; font-size: 14px; }
      .f-input, .f-select { padding: 16px 18px; font-size: 15px; min-height: 48px; }
      .orb-c { display: none; }
      .feats { grid-template-columns: repeat(2, 1fr); }
      .feat:nth-child(2) { border-right: none; }
      .feat:nth-child(3) { border-top: 1px solid var(--border); }
      .feat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
    }
  


/* ==== F7B2 externalized from templates/onboarding.html:1267-1299 ==== */
  .force-mk-wrapper {
      text-align: center;
      margin-top: 4px;
      margin-bottom: 12px;
      z-index: 999;
      position: relative;
  }
  .force-mk-main {
      font-family: 'Cinzel', 'Times New Roman', serif !important;
      font-size: clamp(2rem, 4.5vw, 2.9rem) !important;
      font-weight: 900 !important;
      color: #FFD700 !important; /* Bright Gold */
      letter-spacing: 6px !important;
      margin: 0 !important;
      line-height: 1.15 !important;
      text-shadow: 
          0px 4px 10px rgba(0, 0, 0, 1),
          0px 0px 20px rgba(0, 0, 0, 0.9),
          0px 0px 40px rgba(0, 0, 0, 0.8) !important;
  }
  .force-mk-sub {
      font-family: 'Cinzel', 'Times New Roman', serif !important;
      font-size: clamp(0.68rem, 2vw, 0.88rem) !important;
      font-weight: bold !important;
      color: #FFFFFF !important;
      letter-spacing: 0.22em !important;
      margin: 5px 0 0 0 !important;
      text-shadow: 
          0px 2px 8px rgba(0, 0, 0, 1),
          0px 0px 15px rgba(0, 0, 0, 0.9) !important;
  }


/* ==== F7B2 externalized from templates/onboarding.html:16-1164 ==== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --void:      #01010c;
      --deep:      #060616;
      --navy:      #0a0a22;
      --gold:      #c8a84a;
      --gold-lt:   #e6cc80;
      --gold-pale: #f0e0a0;
      --gold-dim:  rgba(200,168,74,0.12);
      --gold-glow: rgba(200,168,74,0.06);
      --text:      #ede9e0;
      --soft:      #c0bbb0;
      --muted:     #706880;
      --border:    rgba(200,168,74,0.14);
      --glass:     rgba(255,255,255,0.024);
      --r:         16px;
    }

    html, body { height: 100%; }

    /* Premium language toggle — top-left, opposite suite menu */
    .lang-selector {
      position: fixed;
      top: 18px;
      left: 18px;
      z-index: 10020;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border: 1px solid rgba(200, 168, 74, 0.35);
      border-radius: 12px;
      background: rgba(6, 6, 18, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    }
    .lang-btn {
      font-family: 'Cinzel', 'Times New Roman', serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(200, 168, 74, 0.55);
      background: transparent;
      border: 0;
      padding: 2px 4px;
      cursor: pointer;
      transition: color 0.2s ease, text-shadow 0.2s ease;
    }
    .lang-btn:hover,
    .lang-btn:focus-visible {
      color: #FFD700;
      outline: none;
    }
    .lang-btn.is-active {
      color: #FFD700;
      text-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
    }
    .lang-sep {
      color: rgba(200, 168, 74, 0.28);
      font-size: 0.75rem;
      user-select: none;
    }
    @media (max-width: 520px) {
      .lang-selector { top: 12px; left: 12px; padding: 8px 10px; gap: 5px; }
      .lang-btn { font-size: 0.65rem; }
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--void);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Cinematic cosmic background — quieter for form focus */
    .bg {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(200,168,74,0.07) 0%, transparent 52%),
        radial-gradient(ellipse  70% 55% at 90%  80%, rgba(70,50,120,0.05)  0%, transparent 55%),
        radial-gradient(ellipse  60% 45% at  5%  65%, rgba(40,70,140,0.04)  0%, transparent 52%),
        radial-gradient(ellipse  50% 40% at 50% 110%, rgba(200,168,74,0.04) 0%, transparent 50%),
        linear-gradient(170deg, var(--void) 0%, var(--deep) 50%, #080720 100%);
    }

    /* Star canvas */
    #cv { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

    /* Orbital rings */
    .orbs {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
    }
    .orb {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(200,168,74,0.055);
    }
    .orb-a { width: 460px; height: 460px; animation: ospin  70s linear infinite; }
    .orb-b { width: 760px; height: 760px; animation: ospin 110s linear infinite reverse; }
    .orb-c { width:1040px; height:1040px; border-color: rgba(200,168,74,0.025); animation: ospin 160s linear infinite; }
    .orb-a::after, .orb-b::after {
      content: ''; position: absolute; top: -4px; left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 12px 4px rgba(200,168,74,0.60);
    }
    @keyframes ospin { to { transform: rotate(360deg); } }

    /* Page wrapper */
    .page {
      position: relative; z-index: 20;
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 56px 20px 52px;
    }

    /* ---- Brand (working-surface compression — onboarding only) ---- */
    .brand { text-align: center; margin-bottom: 16px; }

    .master-k-logo-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
    }
    .master-k-main-logo {
      width: 138px;
      height: auto;
      object-fit: contain;
      filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.10));
      transition: transform 0.4s ease, filter 0.4s ease;
    }
    .master-k-main-logo:hover {
      transform: scale(1.02);
      filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.18));
    }

    /* ---- Form card ---- */
    .card {
      width: 100%; max-width: 545px;
      background: var(--glass);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 40px 46px 44px;
      backdrop-filter: blur(4px) saturate(1.4);
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.022) inset,
        0 1px 0 rgba(255,255,255,0.055) inset,
        0 50px 120px rgba(0,0,0,0.65);
      position: relative;
      z-index: 3;
    }
    .card-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px; font-weight: 600;
      color: var(--gold-lt); margin-bottom: 10px;
      letter-spacing: 0.06em;
      text-align: center;
      line-height: 1.35;
    }
    .card-desc {
      font-size: 14.5px; line-height: 1.7;
      color: rgba(192, 187, 176, 0.92); margin-bottom: 22px;
      text-align: center;
    }

    /* Form visual groups — spacing + labels only */
    .ob-section {
      margin: 0 0 8px;
      padding: 0 0 6px;
      border-bottom: 1px solid rgba(200, 168, 74, 0.12);
    }
    .ob-section:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
    }
    .ob-section-label {
      display: block;
      margin: 4px 0 14px;
      font-family: 'Cinzel', 'Times New Roman', serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(200, 168, 74, 0.72);
    }
    html[lang="ja"] .ob-section-label,
    html[lang="ko"] .ob-section-label,
    body[data-ui-language="ja"] .ob-section-label,
    body[data-ui-language="ko"] .ob-section-label {
      text-transform: none;
      letter-spacing: 0.08em;
      font-size: 0.78rem;
    }
    .ob-section-consent {
      margin-top: 4px;
    }
    /* Presentation-only access disclosure — subordinate to profile fields */
    .ob-tier-access {
      margin: 10px 0 14px;
      padding: 14px 14px 12px;
      border: 1px solid rgba(200, 168, 74, 0.22);
      border-radius: 10px;
      background: rgba(12, 10, 8, 0.35);
    }
    .ob-tier-access-title {
      margin: 0 0 10px;
      font-family: 'Cinzel', 'Times New Roman', serif;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(230, 204, 128, 0.92);
    }
    html[lang="ja"] .ob-tier-access-title,
    html[lang="ko"] .ob-tier-access-title,
    body[data-ui-language="ja"] .ob-tier-access-title,
    body[data-ui-language="ko"] .ob-tier-access-title {
      text-transform: none;
      letter-spacing: 0.06em;
      font-size: 0.82rem;
    }
    .ob-tier-access-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ob-tier-access-row {
      display: grid;
      grid-template-columns: 6.5rem 1fr;
      gap: 10px;
      align-items: start;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(200, 168, 74, 0.10);
    }
    .ob-tier-access-label {
      font-family: 'Cinzel', 'Times New Roman', serif;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #E8C878;
      line-height: 1.35;
      padding-top: 1px;
    }
    .ob-tier-access-desc {
      margin: 0;
      font-size: 0.78rem;
      line-height: 1.45;
      color: rgba(232, 226, 214, 0.88);
    }
    .ob-tier-access-footnote {
      margin: 10px 0 0;
      font-size: 0.68rem;
      line-height: 1.4;
      color: rgba(200, 194, 180, 0.72);
    }
    @media (max-width: 520px) {
      .ob-tier-access-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .ob-tier-access-label {
        letter-spacing: 0.1em;
      }
    }
    .ob-legal-links {
      margin: 10px 0 4px;
      font-size: 12px;
      line-height: 1.5;
      color: rgba(200, 194, 180, 0.75);
    }
    .ob-legal-links a {
      color: rgba(230, 204, 128, 0.92);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .ob-legal-links a:focus-visible {
      outline: 2px solid rgba(255, 215, 0, 0.85);
      outline-offset: 2px;
    }

    /* ---- Form fields ---- */
    .f { margin-bottom: 22px; }
    .f-label {
      display: flex; align-items: center;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 10px;
    }

    .f-input, .f-select {
      width: 100%; padding: 14px 16px;
      min-height: 48px;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 14px;
      color: var(--text);
      font-size: 14.5px; font-family: 'DM Sans', sans-serif;
      outline: none;
      transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
      color-scheme: dark; -webkit-appearance: none;
    }
    .f-input::placeholder { color: rgba(112,104,128,0.55); }
    .f-input:focus, .f-select:focus,
    .f-input:focus-visible, .f-select:focus-visible {
      border-color: rgba(255, 215, 0, 0.75);
      background: rgba(0, 0, 0, 0.5);
      box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.12),
        0 0 18px rgba(255, 215, 0, 0.28);
      outline: none;
    }

    /* Custom select arrow */
    .f-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23c8a84a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-color: rgba(0, 0, 0, 0.4);
      padding-right: 38px; cursor: pointer;
    }
    .f-select option, .f-select optgroup {
      background: #0e0e26; color: var(--text);
    }
    .f-select optgroup { color: var(--gold); font-size: 11px; }

    /* Date of birth -- 3 column grid (Month - Day - Year, Western format) */
    .dob-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 4px;
    }
    .dob-grid .f { margin-bottom: 0; }
    .dob-grid .f-select { min-height: 48px; }

    /* Time input */
    .time-wrap { position: relative; }
    .time-icon {
      position: absolute; left: 13px; top: 50%;
      transform: translateY(-50%);
      color: var(--muted); font-size: 14px; pointer-events: none;
      z-index: 1;
    }
    .f-input.with-icon { padding-left: 36px; }

    /* Luxury pill-shaped toggles (Gender & Calendar) */
    .pill-row,
    .gender-row,
    .calendar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: stretch;
      margin-top: 4px;
    }
    .pill {
      flex: 1 1 140px;
      min-width: 0;
      position: relative;
    }
    .pill input[type="radio"] {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
      margin: 0;
      pointer-events: none;
      clip: rect(0, 0, 0, 0);
    }
    .pill label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      min-height: 48px;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255, 215, 0, 0.2);
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      letter-spacing: 0.04em;
      transition:
        background 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.2s ease;
      user-select: none;
      text-align: center;
    }
    .pill label:hover {
      border-color: rgba(255, 215, 0, 0.4);
      box-shadow: 0 0 12px rgba(255, 215, 0, 0.12);
    }
    .pill input:checked + label {
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%);
      border-color: rgba(255, 215, 0, 0.65);
      color: #0a0804;
      text-shadow: none;
      box-shadow:
        0 4px 18px rgba(200, 168, 74, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
      transform: translateY(-1px);
    }
    .pill input:focus-visible + label {
      outline: 2px solid rgba(255, 215, 0, 0.55);
      outline-offset: 2px;
    }

    /* TST label badge */
    .tst-badge {
      display: inline-flex; align-items: center;
      margin-left: 8px; padding: 2px 7px;
      background: rgba(200,168,74,0.11);
      border: 1px solid rgba(200,168,74,0.28);
      border-radius: 4px;
      font-size: 8px; font-weight: 700;
      color: var(--gold); letter-spacing: 0.12em;
      cursor: help;
    }
    .tst-hint {
      margin-top: 10px;
      font-size: 10.5px; color: rgba(112,104,128,0.62);
      line-height: 1.5;
    }

    /* Submit button */
    .btn-submit {
      display: flex; align-items: center; justify-content: center; gap: 14px;
      width: 100%; margin-top: 28px;
      padding: 18px 28px;
      min-height: 58px;
      background: linear-gradient(130deg, #c8a84a 0%, #8a6010 45%, #c8a84a 100%);
      background-size: 200% 100%;
      border: none; border-radius: 14px;
      color: #06040a;
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(0.95rem, 2.8vw, 1.15rem); font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      line-height: 1.25;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 6px 22px rgba(200,168,74,0.26);
      transition: background-position 0.5s, transform 0.2s, box-shadow 0.2s;
      animation: none;
    }
    .btn-submit > [data-i18n="submit"],
    .btn-submit > [data-i18n="onboarding_submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: inherit;
      text-align: center;
    }
    .btn-submit:hover {
      background-position: 100% 0;
      transform: translateY(-1px);
      animation: none;
      box-shadow: 0 10px 28px rgba(200,168,74,0.38);
    }
    .btn-submit:active { transform: none; }
    .btn-submit:focus-visible {
      outline: 2px solid rgba(255, 215, 0, 0.9);
      outline-offset: 3px;
    }
    .btn-arrow { font-size: 22px; line-height: 1; flex-shrink: 0; }

    /* Free career teaser — secondary CTA */
    .btn-teaser {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; margin-top: 14px;
      padding: 16px 24px; min-height: 52px;
      background: transparent;
      border: 1.5px solid rgba(212, 175, 55, 0.65);
      border-radius: 14px; color: #D4AF37;
      font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600;
      letter-spacing: 0.06em; line-height: 1.35; text-align: center;
      cursor: pointer;
      transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .btn-teaser:hover {
      background: rgba(212, 175, 55, 0.12);
      border-color: rgba(212, 175, 55, 0.9);
      box-shadow: 0 0 18px rgba(212, 175, 55, 0.22);
    }

    /* Time input — 24-hour numeric picker (no AM/PM) */
    .time-wrap { position: relative; }
    .time-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      margin-top: 4px;
    }
    .time-sep {
      font-size: 1.1rem; font-weight: 700;
      color: rgba(212, 175, 55, 0.75);
      user-select: none;
    }
    .time-grid .f-select { min-height: 48px; }

    /* [A5] Seamless Social Gateway — Google / Apple / LINE only */
    .social-gateway {
      display: flex; flex-direction: column; gap: 12px; margin-top: 4px;
    }
    .social-gateway-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 12px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: rgba(20, 20, 20, 0.55); backdrop-filter: blur(10px);
      color: #F8F5EC; font-size: 0.95rem; font-weight: 600;
      letter-spacing: 0.02em; cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    }
    .social-gateway-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 0 18px rgba(212, 175, 55, 0.25);
    }
    .social-gateway-btn:disabled { opacity: 0.55; cursor: wait; }
    .social-gateway-btn[data-provider="line"] {
      border-color: rgba(6, 199, 85, 0.55);
    }
    .social-gateway-hint {
      display: block; margin-top: 8px; font-size: 0.78rem;
      line-height: 1.5; color: rgba(248, 245, 236, 0.62);
    }
    .social-gateway-status {
      min-height: 1.2em; margin-top: 6px; font-size: 0.8rem; color: #D4AF37;
    }

    .legal-consent-row { margin-top: 8px; }
    .legal-consent-label {
      display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
      color: var(--soft); font-size: 0.88rem; line-height: 1.55;
    }
    .legal-consent-label input { position: absolute; opacity: 0; pointer-events: none; }
    .legal-consent-box {
      flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px;
      border: 1.5px solid rgba(212,175,55,0.55); border-radius: 6px;
      background: rgba(0,0,0,0.35);
    }
    .legal-consent-label.is-checked .legal-consent-box {
      background: linear-gradient(145deg, #D4AF37, #a88620);
      box-shadow: 0 0 12px rgba(212,175,55,0.45);
    }
    .legal-consent-label.is-checked .legal-consent-box::after {
      content: "✓"; display: flex; align-items: center; justify-content: center;
      height: 100%; color: #0a0a12; font-weight: 800; font-size: 0.85rem;
    }
    .legal-consent-open {
      margin-top: 8px; background: none; border: none; color: #D4AF37;
      text-decoration: underline; cursor: pointer; font-size: 0.82rem;
    }
    /* [A15 EN-only] Master K policy accordion — onboarding entry */
    .en-entry-legal-wrap.en-lead-legal-wrap {
      margin: 12px 0 16px;
      padding: 10px;
      border: 1px solid rgba(212, 175, 55, 0.2);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.02);
    }
    .en-entry-legal-wrap .en-lead-legal-row {
      display: flex; align-items: flex-start; gap: 8px;
    }
    .en-entry-legal-wrap .en-lead-legal-checkbox {
      margin-top: 3px; accent-color: #D4AF37; flex-shrink: 0;
    }
    .en-entry-legal-wrap .en-lead-legal-label {
      font-size: 0.82rem; color: rgba(229, 231, 235, 0.92);
      line-height: 1.45; cursor: pointer; flex: 1;
    }
    .en-entry-legal-wrap .en-lead-legal-toggle {
      margin-left: 4px; background: none; border: none; color: #D4AF37;
      text-decoration: underline; cursor: pointer; font-size: 0.82rem; padding: 0;
    }
    .en-entry-legal-wrap .en-lead-legal-panel {
      margin-top: 8px; max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height 0.25s ease, opacity 0.25s ease;
      font-size: 11px; line-height: 1.5; color: rgba(229, 231, 235, 0.82);
      border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 8px;
      background: rgba(0, 0, 0, 0.28); padding: 0 10px;
    }
    .en-entry-legal-wrap .en-lead-legal-panel.is-open {
      max-height: 140px; overflow-y: auto; opacity: 0.92; padding: 8px 10px;
    }
    .en-entry-legal-wrap .en-lead-legal-error {
      margin: 8px 0 0; color: #ef4444; font-size: 0.74rem; display: none;
    }
    .en-entry-legal-wrap .en-lead-legal-error.is-visible { display: block; }
    .en-entry-legal-wrap.en-lead-legal-wrap.is-error {
      border-color: rgba(239, 68, 68, 0.88) !important;
      animation: enEntryLegalBlink 0.42s ease 0s 2;
    }
    @keyframes enEntryLegalBlink {
      0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
      50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35); }
      100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
    }
    .btn-submit:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); }
    .legal-consent-overlay {
      display: none; position: fixed; inset: 0; z-index: 100050;
      align-items: center; justify-content: center;
      background: rgba(5,5,12,0.88); backdrop-filter: blur(10px); padding: 16px;
    }
    .legal-consent-overlay.is-open { display: flex; }
    .legal-consent-panel {
      width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
      padding: 26px 22px; border-radius: 18px;
      border: 1px solid rgba(212,175,55,0.45);
      background: linear-gradient(165deg, rgba(18,12,32,0.98), rgba(8,8,14,0.98));
    }
    .legal-consent-panel h2 { color: #D4AF37; margin-bottom: 14px; font-size: 1.25rem; }
    .legal-consent-body { color: #ddd; font-size: 0.92rem; line-height: 1.7; margin-bottom: 18px; white-space: pre-wrap; }

    /* Career teaser modal */
    .career-teaser-overlay {
      display: none; position: fixed; inset: 0; z-index: 100002;
      align-items: center; justify-content: center;
      background: rgba(5, 5, 12, 0.88); backdrop-filter: blur(10px);
      padding: 16px;
    }
    .career-teaser-overlay.is-open { display: flex; }
    .career-teaser-panel {
      width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
      padding: 26px 22px 22px; border-radius: 18px;
      border: 1px solid rgba(212, 175, 55, 0.45);
      background: linear-gradient(165deg, rgba(18, 12, 32, 0.98), rgba(8, 8, 14, 0.98));
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
    }
    .career-teaser-panel h2 {
      margin: 0 0 12px; font-family: 'Cinzel', serif;
      color: #D4AF37; font-size: 1.35rem; letter-spacing: 0.06em;
    }
    .career-teaser-keyword {
      font-size: 1.15rem; font-weight: 700; color: #F3E6B8;
      margin: 0 0 12px; line-height: 1.5;
    }
    .career-teaser-badge {
      display: inline-block; margin-bottom: 12px; padding: 6px 12px;
      border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    }
    .career-teaser-badge.match { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.4); }
    .career-teaser-badge.mismatch { background: rgba(212, 175, 55, 0.12); color: #D4AF37; border: 1px solid rgba(212,175,55,0.45); }
    .career-teaser-badge.suggest { background: rgba(80, 140, 255, 0.14); color: #9ec5ff; border: 1px solid rgba(120,170,255,0.45); }
    .career-teaser-body { color: #ddd; font-size: 0.95rem; line-height: 1.65; margin-bottom: 14px; }
    .career-teaser-alert {
      margin: 12px 0; padding: 12px 14px; border-radius: 10px;
      background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(248, 113, 113, 0.45);
      color: #fecaca; font-size: 0.9rem; line-height: 1.55;
    }
    .career-teaser-cta {
      display: block; width: 100%; margin-top: 16px; padding: 16px;
      text-align: center; text-decoration: none;
      border-radius: 12px; font-weight: 700; letter-spacing: 0.06em;
      background: linear-gradient(90deg, #B8860B, #D4AF37); color: #1a1208;
    }
    .career-teaser-close {
      margin-top: 10px; width: 100%; padding: 10px;
      background: transparent; border: none; color: #888;
      cursor: pointer; text-decoration: underline; font-size: 0.85rem;
    }

    /* Age gate modal */
    .age-gate-overlay {
      display: none; position: fixed; inset: 0; z-index: 100001;
      align-items: center; justify-content: center;
      background: rgba(5, 5, 10, 0.88); backdrop-filter: blur(8px);
    }
    .age-gate-overlay.is-open { display: flex; }
    .age-gate-panel {
      max-width: 420px; margin: 20px; padding: 28px 26px 24px;
      border-radius: 16px; border: 1px solid rgba(212, 175, 55, 0.45);
      background: linear-gradient(160deg, rgba(20, 14, 36, 0.98), rgba(8, 8, 14, 0.98));
      box-shadow: 0 0 40px rgba(212, 175, 55, 0.15); text-align: center;
    }
    .age-gate-title { color: #D4AF37; font-family: 'Cinzel', serif; margin: 0 0 12px; }
    .age-gate-body { color: #ccc; line-height: 1.6; margin: 0 0 18px; font-size: 0.95rem; }
    .age-gate-btn {
      width: 100%; padding: 14px; border: none; border-radius: 10px;
      background: linear-gradient(90deg, #B8860B, #D4AF37); color: #1a1208;
      font-weight: 700; cursor: pointer;
    }

    @keyframes pulse-glow {
      0% {
        box-shadow:
          0 6px 24px rgba(200, 168, 74, 0.22),
          0 0 0 rgba(255, 215, 0, 0);
      }
      50% {
        box-shadow:
          0 8px 32px rgba(200, 168, 74, 0.38),
          0 0 28px rgba(255, 215, 0, 0.55),
          0 0 48px rgba(212, 175, 55, 0.28);
      }
      100% {
        box-shadow:
          0 6px 24px rgba(200, 168, 74, 0.22),
          0 0 0 rgba(255, 215, 0, 0);
      }
    }

    /* ============================================================
       FRACTAL MANDALA -- .cosmic-wrapper
       Pure-black background image: screen blend removes black,
       gold lines glow. No masking needed.
       ============================================================ */
    .cosmic-wrapper {
      position: fixed;
      top: 50%; left: 50%;
      width: 150vmax; height: 150vmax;
      z-index: 2;
      pointer-events: none;

      background: url('/static/cosmic_bg.png') no-repeat center center;
      background-size: cover;

      mix-blend-mode: screen;
      opacity: 0.52;

      border-radius: 50%;
      -webkit-mask-image: radial-gradient(circle closest-side, black 60%, transparent 100%);
              mask-image: radial-gradient(circle closest-side, black 60%, transparent 100%);

      animation: cosmic-majestic-spin 180s linear infinite;
    }

    .page::before {
      content: '';
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translate(-50%, -42%);
      width: min(760px, 96vw);
      height: min(900px, 92vh);
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(
        ellipse 52% 48% at 50% 42%,
        rgba(1, 1, 12, 0.55) 0%,
        rgba(1, 1, 12, 0.22) 48%,
        transparent 74%
      );
    }

    @keyframes cosmic-majestic-spin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to   { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* Error hint */
    .f-error {
      display: none; margin-top: 6px;
      font-size: 11px; color: #f87171;
      letter-spacing: 0.04em;
    }
    .f-error.show { display: block; }

    .f-hint {
      display: block;
      margin-top: 8px;
      font-size: 12.5px;
      line-height: 1.55;
      color: rgba(176, 170, 158, 0.88);
      letter-spacing: 0.03em;
    }

    /* Feature strip */
    .feats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      width: 100%; max-width: 545px;
      margin-top: 18px;
      border: 1px solid rgba(200, 168, 74, 0.10);
      border-radius: var(--r);
      overflow: hidden;
      background: rgba(255,255,255,0.012);
      backdrop-filter: blur(4px);
      opacity: 0.88;
    }
    .feat {
      padding: 12px 10px; text-align: center;
      border-right: 1px solid rgba(200, 168, 74, 0.10);
    }
    .feat:last-child { border-right: none; }
    .feat-icon { font-size: 16px; margin-bottom: 4px; opacity: 0.75; }
    .feat-lbl { font-size: 10.5px; font-weight: 500; color: rgba(176, 170, 158, 0.82); letter-spacing: 0.03em; line-height: 1.35; }

    /* Footer */
    .footer {
      margin-top: 22px; font-size: 11px; letter-spacing: 0.12em;
      color: rgba(176, 170, 158, 0.55); text-align: center;
    }

    /* ============================================================
       TRUE PREMIUM GLASSMORPHISM
       ============================================================ */

    /* 1. Frosted glass panel — form focus */
    .card {
      max-width: 545px !important;
      padding: 40px 46px 44px !important;
      background: rgba(15, 10, 30, 0.42) !important;
      backdrop-filter: blur(16px) saturate(120%) !important;
      border: 1px solid rgba(160, 32, 240, 0.50) !important;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
    }

    /* 2. Clean readable text -- no black boxes, just crisp soft shadow */
    .card-title, .card-desc,
    .f-label, .f-error, .tst-hint,
    .feat-lbl, .footer, .ob-section-label {
      background: transparent !important;
      padding: 0 !important;
      color: #ffffff !important;
      text-shadow: 0 2px 6px rgba(0,0,0,0.90), 0 0 2px rgba(0,0,0,1) !important;
      letter-spacing: 0.5px;
    }
    .card-desc {
      color: rgba(232, 226, 214, 0.90) !important;
      font-size: 14.5px !important;
      line-height: 1.7 !important;
      text-shadow: 0 1px 4px rgba(0,0,0,0.75) !important;
    }
    .f-label {
      color: #D4AF37 !important;
      font-size: 10px !important;
    }
    .f-hint {
      color: rgba(200, 194, 180, 0.82) !important;
      font-size: 12.5px !important;
      line-height: 1.55 !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
    }
    .ob-section-label {
      color: rgba(212, 175, 55, 0.78) !important;
      text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important;
    }
    .feat-lbl {
      color: rgba(200, 194, 180, 0.78) !important;
      font-size: 10.5px !important;
    }
    .footer {
      color: rgba(200, 194, 180, 0.55) !important;
      font-size: 11px !important;
    }

    /* 3. Title: premium gold */
    .card-title {
      color: #FFD700 !important;
      text-shadow: 0 4px 12px rgba(0,0,0,0.90) !important;
    }

    /* 4. Frosted glass inputs — soft gold edge, not harsh border */
    .f-input, .f-select {
      background-color: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 215, 0, 0.2) !important;
      color: #ffffff !important;
      text-shadow: none !important;
      transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease !important;
    }
    .f-select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6'%3E%3Cpath d='M1 1l4.5 4 4.5-4' stroke='%23c8a84a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 14px center !important;
    }
    .f-input::placeholder { color: rgba(200, 200, 200, 0.40) !important; }

    /* 5. Focus: brighter gold + soft glow */
    .f-input:focus, .f-select:focus {
      background-color: rgba(0, 0, 0, 0.5) !important;
      border: 1px solid rgba(255, 215, 0, 0.75) !important;
      box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.12),
        0 0 18px rgba(255, 215, 0, 0.28) !important;
    }

    /* 6. Pill toggles — preserve luxury pill chrome (do not zero padding) */
    .pill label {
      background: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 215, 0, 0.2) !important;
      border-radius: 999px !important;
      padding: 12px 16px !important;
      color: rgba(255, 255, 255, 0.9) !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
    }
    .pill input:checked + label {
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%) !important;
      border-color: rgba(255, 215, 0, 0.65) !important;
      color: #0a0804 !important;
      text-shadow: none !important;
      box-shadow:
        0 4px 18px rgba(200, 168, 74, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    }

    /* Loading overlay */
    #ov {
      display: none; position: fixed; inset: 0; z-index: 999;
      background: rgba(1,1,12,0.96);
      backdrop-filter: blur(24px);
      flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    }
    #ov.on { display: flex; }
    .ov-visual {
      position: relative;
      width: 132px;
      height: 132px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ov-mandala {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, transparent 38%, rgba(200, 168, 74, 0.14) 39%, transparent 41%),
        repeating-conic-gradient(
          from 0deg at 50% 50%,
          rgba(200, 168, 74, 0.22) 0deg 8deg,
          transparent 8deg 16deg
        );
      mask-image: radial-gradient(circle, #000 28%, transparent 68%);
      -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%);
      animation: mandala-spin 28s linear infinite;
      opacity: 0.85;
    }
    .ov-mandala::before,
    .ov-mandala::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(200, 168, 74, 0.18);
    }
    .ov-mandala::before {
      inset: 18px;
      animation: mandala-spin 20s linear infinite reverse;
    }
    .ov-mandala::after {
      inset: 32px;
      border-style: dashed;
      opacity: 0.7;
      animation: mandala-spin 36s linear infinite;
    }
    .ov-glow {
      position: absolute;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(200, 168, 74, 0.22) 0%, rgba(200, 168, 74, 0.06) 45%, transparent 72%);
      animation: glow-pulse 3.2s ease-in-out infinite;
      pointer-events: none;
    }
    .ov-spin { position: relative; width: 76px; height: 76px; z-index: 1; }
    .ov-spin::before, .ov-spin::after {
      content: ''; position: absolute; inset: 0;
      border-radius: 50%; border: 2px solid transparent;
    }
    .ov-spin::before { border-top-color: var(--gold);               animation: spin 1.1s linear infinite; }
    .ov-spin::after  { inset: 10px; border-top-color: rgba(200,168,74,0.36); animation: spin 0.72s linear infinite reverse; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes mandala-spin { to { transform: rotate(360deg); } }
    @keyframes glow-pulse {
      0%, 100% { transform: scale(0.92); opacity: 0.55; }
      50% { transform: scale(1.06); opacity: 1; }
    }
    .ov-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(20px, 4.5vw, 26px);
      font-weight: 300;
      letter-spacing: 0.08em;
      line-height: 1.45;
      max-width: min(92vw, 440px);
      min-height: 3em;
      margin: 0 auto;
      background: linear-gradient(135deg, #e6cc80, #c8a84a);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      opacity: 1;
      transition: opacity 0.55s ease;
    }
    .ov-title.is-fading { opacity: 0; }
    .ov-text-block {
      text-align: center;
      border-bottom: 2px solid rgba(255, 215, 0, 0.6);
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
      padding-bottom: 14px;
    }
    .ov-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; margin-top: 8px; }
    .ov-dots { display: flex; gap: 7px; }
    .ov-dots span {
      width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
      animation: dot-f 1.4s infinite both;
    }
    .ov-dots span:nth-child(2) { animation-delay: 0.2s; }
    .ov-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes dot-f { 0%,80%,100%{opacity:0.18} 40%{opacity:1} }

    /* ---- Intro welcome overlay (hidden on Strategic Profile — step 3 continuity) ---- */
    #intro-overlay {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
      position: fixed;
      inset: 0;
      z-index: 100000;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      padding: 40px 24px;
      background:
        radial-gradient(ellipse 80% 60% at 50% 20%, rgba(200, 168, 74, 0.14) 0%, transparent 60%),
        rgba(1, 1, 12, 0.97);
      backdrop-filter: blur(20px);
      text-align: center;
    }
    .intro-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      max-width: 520px;
      width: 100%;
    }
    .intro-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0;
    }
    .intro-logo {
      width: clamp(140px, 28vw, 180px);
      height: clamp(140px, 28vw, 180px);
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(212, 175, 55, 0.75);
      background: rgba(0, 0, 0, 0.35);
      animation: intro-gold-glow 2.8s ease-in-out infinite alternate;
    }
    @keyframes intro-gold-glow {
      0% {
        box-shadow: 0 0 20px #d4af37, 0 10px 32px rgba(0, 0, 0, 0.5);
      }
      100% {
        box-shadow: 0 0 36px #d4af37, 0 0 56px rgba(212, 175, 55, 0.35), 0 10px 32px rgba(0, 0, 0, 0.5);
      }
    }
    .intro-heading {
      font-family: 'Cinzel', serif;
      font-size: clamp(1.5rem, 4.5vw, 2.1rem);
      font-weight: 700;
      color: #FFD700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
      margin: 0;
    }
    .intro-tagline {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      line-height: 1.7;
      color: #d4cbb8;
      margin: 0;
      max-width: 420px;
    }
    .intro-btns {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 4px;
    }
    .intro-btn {
      min-width: 140px;
      padding: 15px 32px;
      border-radius: 10px;
      font-family: 'Cinzel', serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .intro-btn-enter {
      border: none;
      background: linear-gradient(135deg, #e6cc80 0%, #c8a84a 45%, #8a6010 100%);
      color: #0a0806;
      box-shadow: 0 10px 28px rgba(200, 168, 74, 0.35);
    }
    .intro-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(200, 168, 74, 0.4);
    }

    @media (max-width: 540px) {
      .master-k-main-logo { width: 100px; }
      .brand { margin-bottom: 12px; }
      .master-k-logo-wrapper { margin-bottom: 8px; }
      .card { padding: 32px 22px 38px; border-radius: 16px; }
      .dob-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .dob-grid .f:last-child { grid-column: span 2; }
      .gender-row .pill, .calendar-row .pill { flex: 1 1 100%; }
      .pill label { min-height: 52px; padding: 14px 18px; font-size: 14px; }
      .f-input, .f-select { padding: 16px 18px; font-size: 15px; min-height: 48px; }
      .orb-c { display: none; }
      .feats { grid-template-columns: repeat(2, 1fr); }
      .feat:nth-child(2) { border-right: none; }
      .feat:nth-child(3) { border-top: 1px solid var(--border); }
      .feat:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
    }
  
/* ===== MASTER_K F7B2_LOW_RISK_STATIC END ===== */