:root{
  --bg:#f8f2ea;
  --bg-2:#fffaf4;
  --card:#fffdf9;
  --text:#2f241b;
  --muted:#6d5b49;
  --orange:#f57c22;
  --orange-2:#ff9a3c;
  --shadow:0 30px 80px rgba(126,72,27,.18);
  --focus:0 0 0 4px rgba(245,124,34,.16);
  color-scheme:light;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 12%, rgba(255,205,156,.48) 0 14%, transparent 15%),
    radial-gradient(circle at 88% 16%, rgba(255,178,97,.36) 0 12%, transparent 13%),
    radial-gradient(circle at 50% 100%, rgba(250,181,104,.18) 0 22%, transparent 23%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
}
.login-shell{min-height:100%;display:grid;place-items:center;padding:28px}
.login-card{
  width:min(460px,100%);
  padding:24px 24px 22px;
  border-radius:28px;
  background:rgba(255,253,249,.96);
  border:1px solid rgba(204,157,113,.28);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  transform-origin:center;
  transition:transform .22s ease, box-shadow .22s ease;
}
.login-card::before{
  content:"";
  position:absolute;inset:0 auto auto 0;
  width:100%;height:160px;
  background:linear-gradient(180deg, rgba(255,229,201,.72), rgba(255,253,249,0));
  pointer-events:none;
}
.brand-chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#fff4e8;border:1px solid #f6d4b2;color:#915016;font-size:12px;font-weight:800;letter-spacing:.04em}
.hero-wrap{position:relative;margin:12px auto 10px;width:min(100%,360px);aspect-ratio:1/1;display:grid;place-items:center}
.hero-orbit{position:absolute;border-radius:999px;filter:blur(2px);opacity:.55;pointer-events:none}
.hero-orbit-a{width:240px;height:240px;background:radial-gradient(circle, rgba(255,182,105,.45), rgba(255,182,105,0));}
.hero-orbit-b{width:310px;height:310px;background:radial-gradient(circle, rgba(255,222,186,.6), rgba(255,222,186,0));}
.hero-art{position:relative;z-index:1;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(147,89,27,.18));transform:translateY(0) rotate(0deg) scale(1);transition:transform .18s ease;animation:floaty 3.6s ease-in-out infinite}
.title-wrap{position:relative;z-index:1;text-align:center}.eyebrow{margin:6px 0 8px;color:#a66728;font-size:11px;font-weight:900;letter-spacing:.18em}
h1{margin:0;font-size:42px;line-height:1.02;letter-spacing:-.04em;color:#b14916;text-transform:uppercase}.subtitle{margin:10px auto 0;max-width:32ch;color:var(--muted);line-height:1.55}
label{display:block;margin:22px 0 8px;font-size:12px;font-weight:900;color:#704a22;letter-spacing:.02em}.input-wrap{display:flex;align-items:center;gap:10px}
input{flex:1;height:50px;padding:0 14px;border-radius:14px;border:1px solid #d8c0a6;background:#fff;color:var(--text);outline:none;font-size:16px;transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
input::placeholder{color:#9b8b7a}input:focus{border-color:var(--orange);box-shadow:var(--focus)}
.ghost-btn{flex:0 0 auto;height:50px;padding:0 16px;border-radius:14px;border:1px solid #f0c89a;background:#fff4e8;color:#9a5517;font-weight:800;cursor:pointer;transition:transform .15s ease, background .15s ease}.ghost-btn:hover{background:#ffedd8}
.submit-btn{width:100%;height:52px;margin-top:16px;border:0;border-radius:16px;cursor:pointer;background:linear-gradient(180deg,var(--orange-2),var(--orange));color:#fff;font-weight:1000;font-size:18px;letter-spacing:.05em;box-shadow:0 16px 30px rgba(245,124,34,.34), inset 0 -2px 0 rgba(116,44,0,.16);transition:transform .14s ease, filter .14s ease, box-shadow .18s ease}
.submit-btn:hover{transform:translateY(-1px);filter:brightness(1.02)}.submit-btn:active{transform:translateY(1px)}.submit-btn[disabled]{opacity:.7;cursor:wait}
.hint{margin:12px 0 0;text-align:center;color:#8b735e;font-size:12px}.error{min-height:20px;margin:10px 0 0;text-align:center;color:#c2410c;font-size:13px;font-weight:800}
.login-card.is-focus .hero-art{transform:translateY(-3px) rotate(-1.4deg) scale(1.015)}.login-card.is-typing .hero-art{transform:translateY(-5px) rotate(1.1deg) scale(1.02)}.login-card.is-error{animation:shake .34s linear}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@media (max-width:560px){.login-shell{padding:16px}.login-card{padding:18px 16px 18px;border-radius:24px}h1{font-size:34px}.hero-wrap{width:min(100%,300px)}}
@media (prefers-color-scheme:dark){:root{--bg:#1d150f;--bg-2:#241a13;--card:#2b2018;--text:#fff3e8;--muted:#dbc7b5;--shadow:0 34px 90px rgba(0,0,0,.42)}body{background:radial-gradient(circle at 8% 12%, rgba(166,89,20,.38) 0 14%, transparent 15%),radial-gradient(circle at 88% 16%, rgba(212,126,37,.24) 0 12%, transparent 13%),linear-gradient(180deg,var(--bg-2),var(--bg))}.login-card{background:rgba(43,32,24,.96);border-color:#5e442e}.brand-chip{background:#38291f;border-color:#654830;color:#ffd8b4}.hero-orbit-a{background:radial-gradient(circle, rgba(245,143,52,.28), rgba(245,143,52,0));}.hero-orbit-b{background:radial-gradient(circle, rgba(255,208,163,.16), rgba(255,208,163,0));}h1{color:#ffb26d}.subtitle,.hint{color:#d5c0ae}label{color:#ffd4af}input{background:#201710;border-color:#6e4d31;color:#fff3e8}input::placeholder{color:#b39a86}.ghost-btn{background:#34261c;border-color:#6e4d31;color:#ffd5af}.ghost-btn:hover{background:#3b2c20}.error{color:#ffb4a0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}