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

:root {
  --bg: #000000;
  --surface: rgba(22, 12, 8, 0.82);
  --line: #4b2818;
  --ink: #fff2e8;
  --muted: #a99a91;
  --accent-light: #ff8c00;
  --accent: #ff5500;
  --accent-deep: #ff2200;
  --pixel: Manrope, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-family: Manrope, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body.login-page { display: grid; min-width: 320px; min-height: 100vh; margin: 0; place-items: center; padding: 22px; background: var(--bg); }
body.login-page::before { position: fixed; z-index: -1; inset: 0; content: ""; background-image: linear-gradient(rgba(255, 140, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 140, 0, 0.04) 1px, transparent 1px), radial-gradient(circle at 70% 4%, rgba(255, 85, 0, 0.18), transparent 35%); background-size: 32px 32px, 32px 32px, auto; }
.login-shell { width: min(100%, 430px); border: 1px solid var(--line); border-radius: 15px; padding: clamp(24px, 5vw, 38px); background: linear-gradient(135deg, var(--surface), rgba(7, 4, 3, 0.88)); box-shadow: inset 0 1px rgba(255, 242, 232, 0.05), 0 32px 90px rgba(0, 0, 0, 0.68), 0 0 36px rgba(255, 85, 0, 0.12); backdrop-filter: blur(16px); }
.login-logo { display: block; width: 46px; height: 46px; margin-bottom: 22px; border: 1px solid rgba(255, 242, 232, 0.35); border-radius: 10px; background: #0a0604; box-shadow: 0 0 22px rgba(255, 85, 0, 0.3); object-fit: cover; }
.page-kicker { color: #ff9e66; font-family: var(--pixel); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.login-shell h1 { margin: 8px 0 10px; font-family: var(--pixel); font-size: clamp(1.9rem, 5vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; }
.login-shell > p { margin: 0 0 24px; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.login-error { margin-bottom: 15px; border: 1px solid rgba(255, 130, 144, 0.45); border-radius: 8px; padding: 10px 12px; background: rgba(151, 28, 35, 0.32); color: #ffc2c9; font-size: 0.8rem; }
.form-panel { display: grid; gap: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.form-panel input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px; outline: 0; background: rgba(0, 0, 0, 0.47); color: var(--ink); font-size: 0.88rem; }
.form-panel input::placeholder { color: #786860; }
.form-panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.14); }
.btn-primary { min-height: 42px; margin-top: 5px; border: 1px solid var(--accent-light); border-radius: 8px; background: linear-gradient(135deg, var(--accent-light), var(--accent), var(--accent-deep)); box-shadow: 0 0 22px rgba(255, 85, 0, 0.2); color: #210a00; font-family: var(--pixel); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: filter 140ms ease, transform 140ms ease; }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:focus-visible, .login-back a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.login-back { margin-top: 20px; font-size: 0.78rem; }
.login-back a { color: #ff9e66; }
.login-back a:hover { color: var(--accent-light); }