/* Extraído de login.html (P9 fase 2). */
:root {
      --c-sky: #38bdf8; --c-sky-dim: #0ea5e9; --c-teal: #2dd4bf;
      --c-bg: #0d1117; --c-surface: #161b22; --c-surface-2: #1c2330;
      --c-border: rgba(255,255,255,.07); --c-border-md: rgba(255,255,255,.13);
      --c-text-1: #e6edf3; --c-text-2: #8b949e; --c-text-3: #484f58;
      --c-danger: #f85149;
      --shadow-lg: 0 24px 64px rgba(0,0,0,.7);
      --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
      font-size: 14px; line-height: 1.6;
      min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
      background:
        radial-gradient(ellipse at 15% 60%, rgba(56,189,248,.08) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 20%, rgba(45,212,191,.06) 0%, transparent 45%),
        var(--c-bg);
      color: var(--c-text-1); position: relative;
    }
    body::before {
      content: ''; position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 28px 28px; pointer-events: none;
    }
    .login-card {
      background: var(--c-surface); border: 1px solid var(--c-border-md);
      border-radius: var(--r-xl); padding: 44px 40px;
      width: 100%; max-width: 400px; box-shadow: var(--shadow-lg);
      position: relative; z-index: 1;
    }
    .login-logo-mark {
      width: 52px; height: 52px;
      background: linear-gradient(135deg, #1668a7 0%, #0ea5e9 100%);
      border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center; font-size: 22px;
      margin: 0 auto 20px; box-shadow: 0 8px 28px rgba(14,165,233,.25);
    }
    h1 { font-size: 22px; font-weight: 800; color: var(--c-text-1); text-align: center; margin-bottom: 4px; letter-spacing: -.02em; }
    .subtitle { font-size: 12.5px; color: var(--c-text-3); text-align: center; margin-bottom: 32px; }
    label {
      display: block; font-size: 11px; font-weight: 700;
      color: var(--c-text-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
    }
    input {
      width: 100%; padding: 10px 13px;
      background: var(--c-surface-2); border: 1.5px solid var(--c-border-md);
      border-radius: var(--r-md); font-size: 13.5px; font-family: inherit;
      color: var(--c-text-1); outline: none; margin-bottom: 18px;
      transition: border-color .15s, box-shadow .15s;
    }
    input:focus { border-color: var(--c-sky); box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
    input::placeholder { color: var(--c-text-3); }
    .btn-login {
      width: 100%; padding: 12px;
      background: linear-gradient(135deg, #1668a7 0%, #0ea5e9 100%);
      color: #fff; border: none; border-radius: var(--r-md);
      font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      box-shadow: 0 4px 18px rgba(14,165,233,.3); transition: opacity .15s;
    }
    .btn-login:hover { opacity: .88; }
    .btn-login:disabled { opacity: .35; cursor: not-allowed; }
    .error {
      background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.3); color: var(--c-danger);
      border-radius: var(--r-md); padding: 10px 14px; font-size: 12.5px;
      margin-bottom: 16px; display: none;
    }
    .footer { text-align: center; margin-top: 24px; color: var(--c-text-3); font-size: 11px; }