@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --nw-accent: #00d28a;
  --nw-accent-dim: rgba(0,210,138,.12);
  --font-sans: 'Inter', system-ui, sans-serif;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #dfe6ef;
  --text: #162033;
  --text-2: #5b6677;
  --text-3: #8c98ab;
  --nw-scale: 1;
}

[data-theme="dark"] {
  --nw-accent: #00e5a0;
  --nw-accent-dim: rgba(0,229,160,.12);
  --bg: #111316;
  --card: #18191d;
  --border: rgba(255,255,255,.07);
  --text: #e2e4e8;
  --text-2: #9297a0;
  --text-3: #555a63;
}

* { box-sizing: border-box; }
/* Global font-size scale from Preferences → Typography → Font Size.
   --nw-scale is set/restored by layout.templ's boot script and
   rendering/shared.go's preferences page JS (nwSetFontSize); zoom scales
   text, spacing, and icons together app-wide, including fixed-position
   elements like the sidebar, without needing every font-size rule in the
   stylesheet converted to rem/calc(). */
html { zoom: var(--nw-scale, 1); height: 100%; }
body { margin: 0; height: 100%; font-family: var(--font-sans); background: var(--bg); color: var(--text); }
button, input, select, textarea { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); }
main { padding: 0; }

.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background-color:#0b1121;
}
.login-body { margin: 0; background-color:#0b1121; }
.login-card{
  width:min(440px,100%);border-radius:22px;overflow:hidden;background:rgba(17,19,22,.92);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.35);
  color:#dfe7f2;
}
.login-card .card-content{padding:30px 28px 26px;}
.login-logo{display:block;height:54px;width:auto;margin-bottom:20px;}
.login-subtitle{margin:0;color:#94a3b8;font-size:14px;line-height:1.55;}
.login-flash{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:rgba(239,35,60,.1);color:#ef233c;border:1px solid rgba(239,35,60,.25);font-size:13px;}
.login-form{display:grid;gap:18px;margin-top:24px;}
.login-field{display:flex;flex-direction:column;gap:8px;margin:0;}
.login-field-label{font-size:13px;font-weight:600;color:#e2e8f0;letter-spacing:.01em;}
.login-input-row{
  position:relative;display:flex;align-items:center;gap:10px;
  border:1px solid rgba(148,163,184,.22);border-radius:12px;background:rgba(255,255,255,.05);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.login-input-row:has(input:focus){border-color:var(--nw-accent);box-shadow:0 0 0 3px var(--nw-accent-dim);}
.login-input-icon{position:absolute;left:14px;color:#94a3b8;display:flex;align-items:center;pointer-events:none;}
.login-input-row input{
  width:100%;height:48px;padding:0 46px 0 44px;border:none !important;outline:none;background:transparent;
  color:#fff;font-size:15px;box-shadow:none !important;
}
.login-input-row input::placeholder{color:#4f6282;}
.login-input-row input:focus{border:none !important;box-shadow:none !important;}
.login-input-row input:-webkit-autofill,
.login-input-row input:-webkit-autofill:focus{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px rgba(17,19,22,.95) inset;transition:background-color 9999s ease-in-out 0s;}
.login-input{padding-right:46px;}
.login-eye-btn{position:absolute;right:10px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:#94a3b8;cursor:pointer;}
.login-eye-btn:hover{color:var(--nw-accent);}
.login-btn{
  width:100%;height:48px;border:none;border-radius:12px;background:#22c55e;color:#fff;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 6px 18px rgba(34,197,94,.26);
}
.login-btn:hover{box-shadow:0 6px 22px rgba(34,197,94,.38);}
.login-btn:focus{background:#16a34a;color:#f8fff9;}
.login-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:11px;letter-spacing:.08em;color:#94a3b8;text-transform:uppercase;}
.login-foot-logo{height:22px;object-fit:contain;filter:brightness(1.8) contrast(1.1);}

@media(max-width:640px){
  .login-shell{padding:16px;}
  .login-card .card-content{padding:28px 22px 24px;border-radius:16px;}
}