body.auth-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 4%, rgba(184, 232, 210, .62), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(250, 211, 223, .48), transparent 28%),
    var(--color-cream);
}

.auth-main { flex: 1; display: grid; place-items: center; padding: 20px 16px 10px; }
.auth-shell { width: min(100%, 460px); margin: auto; }
.auth-visual { position: relative; min-height: 250px; padding: 22px 18px 0; text-align: center; border: 1px solid rgba(207, 230, 220, .85); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(160deg, rgba(219,247,238,.95), rgba(249,255,251,.92)); overflow: hidden; }
.auth-visual::before, .auth-visual::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; filter: blur(4px); opacity: .55; }
.auth-visual::before { left: -74px; bottom: -82px; background: radial-gradient(circle, #b8e5c7, transparent 70%); }
.auth-visual::after { right: -62px; top: 46px; background: radial-gradient(circle, #f8cddd, transparent 70%); }
.auth-brand { position: relative; z-index: 2; }
.auth-brand__eyebrow { margin: 0 0 4px; color: var(--color-muted); font-size: 11px; letter-spacing: 4px; }
.auth-brand h1 { margin: 0; color: #66442e; font-family: KaiTi, "STKaiti", serif; font-size: 34px; letter-spacing: 7px; }
.auth-brand__subtitle { margin: 4px 0 0; color: #738980; font-size: 12px; letter-spacing: 5px; }
.auth-illustration { position: relative; z-index: 1; display: block; width: 202px; height: 185px; object-fit: cover; margin: 5px auto -5px; border-radius: 24px; mix-blend-mode: multiply; }
.auth-card { position: relative; z-index: 3; margin: -18px 14px 0; padding: 22px 18px 18px; border: 1px solid var(--color-line); border-radius: 22px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-card); }
.tabs { display: flex; margin: 0 0 18px; padding: 4px; border: 0; border-radius: 12px; background: #eef4f1; }
.tab { flex: 1; padding: 10px 5px; border-radius: 9px; color: #788c85; font-size: 14px; text-align: center; cursor: pointer; transition: .18s ease; }
.tab.active { color: var(--color-mint-700); border: 0; background: #fff; box-shadow: 0 4px 12px rgba(44,84,69,.08); font-weight: 700; }
.form-group { margin-bottom: 13px; }
.form-group label { display: block; margin-bottom: 6px; color: var(--color-ink-soft); font-size: 12px; font-weight: 650; }
.field-wrap { position: relative; }
.field-wrap .bhs-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #698078; }
.form-group input { width: 100%; min-height: 46px; padding: 11px 13px 11px 42px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); color: var(--color-ink); background: #fff; font-size: 14px; }
.form-group input:focus { border-color: var(--color-mint-500); box-shadow: 0 0 0 4px rgba(69,185,130,.12); outline: 0; }
.auth-card > div > button, .auth-card > button { width: 100%; min-height: 46px; margin-top: 2px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#42b781,#65cb96); box-shadow: 0 9px 20px rgba(66,183,129,.22); font-weight: 750; cursor: pointer; }
.extra-link { margin-top: 12px; color: #7b8e87; font-size: 12px; text-align: center; }
.extra-link a { color: var(--color-mint-700); text-decoration: none; }
.extra-link a:first-child { color: var(--color-pink-500); }
.extra-link span { margin: 0 6px; color: #c5d3ce; }
.auth-feature-note { margin: 13px 14px 0; padding: 11px 13px; display: flex; align-items: center; gap: 8px; border: 1px solid #ead99f; border-radius: 12px; color: #806c45; background: #fff8e3; font-size: 11px; }
.footer { padding: 18px 0 calc(22px + env(safe-area-inset-bottom)); color: #94a59f; font-size: 11px; text-align: center; }
.footer a { color: inherit; text-decoration: none; }

.modal-overlay { display: none; position: fixed; inset: 0; z-index: 1000; padding: 18px; align-items: center; justify-content: center; background: rgba(29,47,42,.52); backdrop-filter: blur(6px); }
.modal-overlay.show { display: flex; }
.modal-box { width: min(100%, 420px); padding: 25px 20px; border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-card); text-align: center; }
.modal-box h2 { margin: 0 0 6px; color: #8b6331; font-size: 20px; }
.modal-box .expire-info { margin-bottom: 16px; color: var(--color-muted); font-size: 12px; }
.modal-box select, .modal-box input { width: 100%; min-height: 44px; margin-bottom: 11px; padding: 10px 12px; border: 1px solid var(--color-line); border-radius: 12px; background: #fff; }
.modal-box button { width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 12px; font-weight: 700; cursor: pointer; }
.modal-box .renew-btn { color: #fff; background: linear-gradient(135deg,#42b781,#65cb96); }
.modal-box .close-btn { color: #61736d; background: #eef3f1; }
.modal-box .result-msg { margin-top: 13px; font-size: 13px; font-weight: 700; }
.modal-box .result-msg.success { color: var(--color-mint-700); }
.modal-box .result-msg.error { color: var(--color-danger); }

body.admin-auth-page { background: radial-gradient(circle at 15% 4%,#eee8fb,transparent 34%),radial-gradient(circle at 88% 10%,#f5ddea,transparent 28%),#fcfbff; }
.admin-auth-page .auth-visual { background: linear-gradient(160deg,#ebe5fa,#faf7ff); border-color: #ddd5ed; }
.admin-auth-page .auth-card > button { background: linear-gradient(135deg,#8061cc,#a67de0); box-shadow: 0 9px 20px rgba(128,97,204,.23); }

@media (min-width: 900px) {
  .auth-main { padding: 34px; }
  .auth-shell { width: min(960px,92vw); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; }
  .auth-visual { min-height: 570px; display: flex; flex-direction: column; justify-content: center; border-radius: 34px 0 0 34px; }
  .auth-illustration { width: min(76%,420px); height: 330px; }
  .auth-card { margin: 0 0 0 -24px; padding: 32px 30px; border-radius: 28px; }
  .auth-feature-note { grid-column: 1 / -1; width: fit-content; margin: 15px auto 0; }
}