:root{
  --paper:#f6f1e7; --paper-2:#fffdf8; --ink:#221d16; --ink-soft:#5d5448;
  --line:#e6dccb; --rose:#cf3f5b; --mint:#12897a;
  --serif:"Fraunces","Noto Serif SC",Georgia,serif;
  --sans:"Noto Sans SC",-apple-system,"PingFang SC",sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; width:100%; max-width:420px; padding:24px;}
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:18px;
  padding:38px 34px 30px; box-shadow:0 18px 50px rgba(60,45,25,.14);
  text-align:center;
}
.logo{display:inline-block; margin-bottom:14px;}
.title{font-family:var(--serif); font-weight:700; font-size:25px; margin:0 0 6px; letter-spacing:.3px;}
.sub{color:var(--ink-soft); font-size:14px; margin:0 0 26px;}
.field{display:block; text-align:left; margin-bottom:16px;}
.lab{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:6px; font-weight:500;}
#username,#password{
  width:100%; padding:12px 14px; font-size:15px; font-family:var(--sans);
  border:1px solid var(--line-2,#d8ccb6); border-radius:11px; background:#fff;
  color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;
}
#username:focus,#password:focus{border-color:var(--mint); box-shadow:0 0 0 3px rgba(18,137,122,.14);}
.btn{
  width:100%; margin-top:6px; padding:13px; font-size:16px; font-weight:700;
  font-family:var(--sans); color:#fff; background:var(--rose); border:none; border-radius:11px;
  cursor:pointer; transition:transform .08s, background .15s; letter-spacing:2px;
}
.btn:hover{background:#b8364f;}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.6; cursor:default;}
.err{color:var(--rose); font-size:13.5px; margin:4px 0 12px; min-height:1px; text-align:left;}
.foot{margin:22px 0 0; font-size:12px; color:var(--ink-soft); opacity:.8;}