:root{--bg:#0D0D0D;--card:#161616;--crimson:#C0272D;--text:#F2F2F2;--muted:#8a8a8a;--border:#262626}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:40px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.logo{display:block;width:180px;max-width:60%;height:auto;margin:0 auto 24px}
h1{font-size:18px;font-weight:600;text-align:center;margin-bottom:24px;color:var(--text)}
label{display:block;font-size:13px;color:var(--muted);margin:16px 0 6px}
input[type=text],input[type=password]{width:100%;padding:13px 15px;background:#0d0d0d;border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:16px;transition:border-color .15s}
input:focus{outline:none;border-color:var(--crimson)}
button{width:100%;margin-top:24px;padding:14px;background:var(--crimson);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:filter .15s}
button:hover{filter:brightness(1.1)}
.err{background:rgba(192,39,45,.12);border:1px solid rgba(192,39,45,.4);color:#ff8a8a;padding:11px 14px;border-radius:9px;font-size:14px;margin-bottom:8px;text-align:center}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);min-height:60px}
.topbar .brand{display:flex;align-items:center;height:40px}
.topbar .brand img{height:40px;width:auto;max-width:140px;object-fit:contain;display:block}
.topbar a.logout{color:var(--muted);text-decoration:none;font-size:14px}
.topbar a.logout:hover{color:var(--text)}
.wrap{padding:40px 24px;max-width:1100px;margin:0 auto}