/* Login — Purrductive look (TGM brand guideline: Tiger #FF4600, Active Yellow #F4C142,
   Cream #FCF3DA, Purrple #4150E4, Black #131313). Layout follows the Purrductive web app
   login: form on the left, mascot card on the right. */
body.login-mode{margin:0;background:#fff;color:#131313;font-family:Inter,"Noto Sans Thai",system-ui,sans-serif}
.lg{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;padding:24px;box-sizing:border-box}
.lg-form{display:flex;flex-direction:column;padding:12px 24px}
.lg-logo{height:30px;width:auto;align-self:flex-start}
.lg-box{margin:auto;width:100%;max-width:400px;text-align:center;padding:40px 0}
.lg-box h1{font-size:34px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.lg-sub{color:#6b6b6b;font-size:14.5px;line-height:1.55;margin:0 auto 30px;max-width:330px}
.lg-google{display:flex;justify-content:center;min-height:44px}
.lg-or{display:flex;align-items:center;gap:12px;color:#9a9a9a;font-size:12.5px;margin:22px 0 14px}
.lg-or:before,.lg-or:after{content:"";flex:1;height:1px;background:#ececec}
.lg-note{font-size:13.5px;color:#4a4a4a;line-height:1.55;margin:0}
.lg-note b{color:#FF4600;font-weight:600}
.lg-err{min-height:20px;color:#d92d20;font-size:13px;margin:16px 0 0}
.lg-dom{font-size:12px;color:#9a9a9a;margin:6px 0 0}
.lg-art{display:flex}
.lg-card{position:relative;flex:1;border-radius:36px;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#FFE7D6 0%,#FFC9A8 38%,#FF9A5C 70%,#FF6A1F 100%);min-height:560px}
.lg-shapes{position:absolute;right:-30px;top:-20px;width:46%;opacity:.95;transform:rotate(6deg)}
.lg-cats{position:absolute;left:50%;top:50%;width:78%;max-width:620px;transform:translate(-50%,-56%);filter:drop-shadow(0 24px 40px rgba(140,40,0,.25))}
.lg-paws{position:absolute;left:5%;bottom:6%;height:42%;opacity:.35;transform:rotate(-12deg)}
.lg-pill{position:absolute;font-weight:700;font-size:22px;padding:8px 22px 10px;border-radius:999px;box-shadow:0 10px 24px rgba(160,50,0,.22)}
.lg-pill.p1{left:9%;top:11%;background:#FF4600;color:#fff;transform:rotate(-6deg)}
.lg-pill.p2{left:22%;top:21%;background:#F4C142;color:#131313;transform:rotate(8deg);font-style:italic}
.lg-toast{position:absolute;right:7%;top:46%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);border-radius:16px;padding:10px 14px;box-shadow:0 12px 30px rgba(140,40,0,.2)}
.lg-toast i{width:24px;height:24px;border-radius:50%;background:#2E9A5B;color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px}
.lg-toast b{display:block;font-size:12.5px}.lg-toast span{font-size:11px;color:#777}
.lg-card h2{position:absolute;left:0;right:0;bottom:7%;text-align:center;margin:0;font-size:32px;line-height:1.2;font-weight:700;color:#131313;letter-spacing:-.01em}
@media (max-width:900px){
  .lg{grid-template-columns:1fr;padding:16px}
  .lg-art{order:-1}.lg-card{min-height:300px;border-radius:28px}
  .lg-card h2{font-size:22px}.lg-pill{font-size:15px}.lg-toast{display:none}
  .lg-cats{width:70%}
}
/* app additions */
.logo img{width:24px;height:24px;object-fit:contain}
.logo span{font-weight:400;color:var(--sub)}
.circ.sm{width:28px;height:28px;font-size:14px}
.me{position:relative}.me>div{flex:1;min-width:0}
img.a{object-fit:cover}