*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  min-height:100%;
  color:#efe7d5;
  font-family:"Microsoft JhengHei","Segoe UI",Arial,sans-serif;
  background:
    linear-gradient(90deg,rgba(12,14,18,.94),rgba(21,24,29,.86) 48%,rgba(17,19,23,.58)),
    url("/wz/account/zenonia-login-bg.jpg"),
    linear-gradient(135deg,#171b20,#30343a);
  background-size:cover;
  background-position:center;
}
.shell{
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(360px,480px) 1fr;
}
.auth-panel{
  padding:42px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  background:rgba(10,12,16,.72);
  border-right:1px solid rgba(214,179,105,.28);
  box-shadow:18px 0 60px rgba(0,0,0,.32);
}
.brand-mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  color:#14110b;
  font-weight:900;
  background:linear-gradient(135deg,#f6d895,#9d6d24);
  border:1px solid rgba(255,237,180,.75);
}
h1{margin:0;font-size:30px;font-weight:800;letter-spacing:0;color:#fff7e6}
.subtitle{margin:8px 0 0;color:#c9bfae;font-size:14px;line-height:1.65}
.tabs{display:flex;gap:8px;margin-top:4px}
.tabs a{
  flex:1;
  text-align:center;
  text-decoration:none;
  color:#d9c8aa;
  padding:11px 12px;
  border:1px solid rgba(214,179,105,.28);
  background:rgba(255,255,255,.05);
}
.tabs a.active{
  color:#1a1308;
  background:linear-gradient(180deg,#f4d18b,#a67229);
  border-color:#f4d18b;
}
.message{
  padding:10px 12px;
  font-size:13px;
  line-height:1.45;
  border:1px solid rgba(120,201,151,.45);
  background:rgba(50,112,74,.25);
  color:#dff6df;
}
.message.error{
  border-color:rgba(222,95,86,.55);
  background:rgba(127,39,34,.32);
  color:#ffd9d4;
}
form{display:flex;flex-direction:column;gap:14px}
label{display:flex;flex-direction:column;gap:7px;color:#d7c7ad;font-size:13px}
input{
  width:100%;
  height:44px;
  padding:0 13px;
  color:#fff;
  font-size:15px;
  outline:none;
  border:1px solid rgba(214,179,105,.35);
  background:rgba(0,0,0,.42);
}
input:focus{border-color:#e7be71;box-shadow:0 0 0 3px rgba(231,190,113,.14)}
button{
  height:46px;
  cursor:pointer;
  color:#1b1206;
  font-weight:800;
  font-size:15px;
  border:1px solid #f5d28b;
  background:linear-gradient(180deg,#f7d995,#a56c23);
}
.hero{position:relative;display:flex;align-items:flex-end;padding:48px}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(245,173,67,.18),transparent 34%)}
.hero-copy{position:relative;z-index:1;text-shadow:0 3px 12px rgba(0,0,0,.55)}
.hero-title{font-size:56px;line-height:1;margin:0 0 10px;color:#f3d58f}
.hero-meta{color:#ede0c5;margin-bottom:14px}
.status-grid{display:flex;gap:10px;flex-wrap:wrap}
.status-grid div{min-width:116px;padding:10px 12px;background:rgba(0,0,0,.38);border:1px solid rgba(214,179,105,.25)}
.status-grid span{display:block;color:#b8a98e;font-size:11px}
.status-grid strong{display:block;color:#fff4dc;font-size:13px;margin-top:3px}
@media(max-width:760px){
  .shell{display:block}
  .auth-panel{min-height:100%;padding:28px 22px;border-right:0}
  .hero{display:none}
}