/* login page: wheat field at golden hour (from design/login.html) */
  :root { --blue:#005baa; --blue-deep:#0b2f5c; --yellow:#febc11; --ink:#fff8ea; --muted:#f1dcb8; --bg:#0d1a2b; }
  * { box-sizing:border-box; margin:0; padding:0; }
  html, body { background:var(--bg); color:var(--ink); font-family:Inter, system-ui, "Segoe UI", Roboto, sans-serif; }

  /* ---------- HERO ---------- */
  .hero { position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; isolation:isolate; }
  .hero > svg, .hero > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .hero > canvas { pointer-events:none; mix-blend-mode:screen; }
  .hero .shade { position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(165deg, rgba(8,18,34,.62) 0%, rgba(8,18,34,.25) 30%, transparent 48%); }

  .copy { position:absolute; z-index:2; left:clamp(16px,7vw,128px); top:clamp(28px,9vh,96px); max-width:min(560px, 44vw); }
  .eyebrow { font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#ffe2a6; opacity:.95; }
  .copy h1 { font-weight:800; font-size:clamp(30px,3.6vw,54px); line-height:1.04; letter-spacing:-.025em; margin:14px 0 16px;
    text-shadow:0 2px 30px rgba(0,0,0,.45); }
  .copy h1 em { font-style:normal; color:var(--yellow); text-shadow:0 0 30px rgba(254,188,17,.45); }
  .copy p { font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:var(--muted); max-width:460px; }

  /* ---------- login card ---------- */
  .card { position:absolute; z-index:3; right:clamp(16px,7vw,128px); top:50%; transform:translateY(-50%);
    width:min(400px, calc(100% - 32px)); padding:34px 30px 26px; border-radius:20px; overflow:hidden;
    background:rgba(255,255,255,.95); color:#1c2633;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 30px 80px rgba(6,14,28,.5), 0 0 0 1px rgba(255,255,255,.6) inset; }
  .card::before { content:""; position:absolute; left:0; right:0; top:0; height:7px;      /* the logo's yellow line on blue */
    background:linear-gradient(var(--yellow) 0 2px, var(--blue) 2px); }
  .logo { display:block; width:112px; height:auto; margin:4px auto 18px; }
  .card h2 { font-size:22px; font-weight:700; letter-spacing:-.01em; text-align:center; color:var(--blue-deep); }
  .card .sub { text-align:center; font-size:14px; color:#5b6878; margin-top:6px; }
  .card form { margin-top:24px; }
  .lbl { display:block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#46566a; margin:0 0 7px; }
  .field { position:relative; margin-bottom:16px; }
  .field input { width:100%; font:inherit; font-size:16px; color:#1c2633; background:#f5f7fa;
    border:1px solid #d5dce5; border-radius:12px; padding:12px 14px; outline:none; transition:border-color .25s, box-shadow .25s, background .25s; }
  .field input:focus { background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(0,91,170,.15); }
  .field .show { position:absolute; right:8px; bottom:7px; font:inherit; font-size:13px; font-weight:600; color:var(--blue);
    background:none; border:0; padding:6px 8px; border-radius:8px; cursor:pointer; }
  .row { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; margin:2px 0 20px; }
  .row label { display:flex; align-items:center; gap:8px; color:#46566a; cursor:pointer; }
  .row input { width:16px; height:16px; accent-color:var(--blue); }
  .row a { color:var(--blue); font-weight:600; text-decoration:none; }
  .row a:hover { text-decoration:underline; }
  .submit { width:100%; font:inherit; font-size:16px; font-weight:700; color:var(--blue-deep); cursor:pointer;
    background:var(--yellow); border:0; border-radius:12px; padding:14px; box-shadow:0 8px 22px rgba(254,188,17,.35);
    transition:transform .25s, box-shadow .25s, background .25s; }
  .submit:hover { background:#ffc93a; transform:translateY(-1px); box-shadow:0 12px 28px rgba(254,188,17,.45); }
  .fine { margin-top:18px; text-align:center; font-size:12px; color:#7a8696; }

  @media (max-aspect-ratio: 23/20) {
    .hero .shade { background:linear-gradient(180deg, rgba(8,18,34,.7) 0%, transparent 26%, transparent 50%, rgba(8,18,34,.6) 100%); }
    .copy { left:16px; right:16px; top:clamp(20px,5vh,48px); bottom:auto; max-width:none; text-align:center; }
    .copy h1 { font-size:clamp(28px,7.5vw,44px); margin:10px 0 0; }
    .copy p { display:none; }
    .card { left:50%; right:auto; top:auto; bottom:16px; transform:translateX(-50%); padding:26px 22px 20px; }
    .logo { width:92px; margin-bottom:12px; }
  }
  @media (max-height: 640px) and (max-aspect-ratio: 23/20) { .card .sub, .fine { display:none; } }

  /* ---------- scene animation ---------- */
  .ray   { animation:ray 9s ease-in-out infinite alternate; }
  .drift { animation:drift 90s ease-in-out infinite alternate; }
  .sway  { transform-box:fill-box; transform-origin:50% 100%; animation:sway 5s ease-in-out infinite alternate; }
  .glow  { animation:glow 3.2s ease-in-out infinite alternate; }
  .plume { animation:plume 7s ease-in-out infinite alternate; }
  @keyframes ray   { from { opacity:.35 } to { opacity:1 } }
  @keyframes drift { to { transform:translateX(-60px) } }
  @keyframes sway  { from { transform:rotate(-1.6deg) } to { transform:rotate(2.2deg) } }
  @keyframes glow  { from { opacity:.55 } to { opacity:1 } }
  @keyframes plume { from { opacity:.5 } to { opacity:.9 } }
  @media (prefers-reduced-motion: reduce) { .ray,.drift,.sway,.glow,.plume { animation:none; } }
  .clean .copy, .clean .shade, .clean .card { display:none; }

/* app additions: messages on the cards */
.card .msg { font-size:14px; line-height:1.45; padding:10px 12px; border-radius:10px; margin:0 0 14px; }
.card .msg.error { background:#fdecec; color:#8a1c1c; }
.card .msg.ok { background:#e9f4ea; color:#1d5b26; }
.row a:first-child { color:var(--blue); font-weight:600; text-decoration:none; }