:root {
      --pain-bg: #070b12;
      --pain-grid: rgba(56, 189, 248, 0.07);
      --pain-glow: #22b8ff;
      --side-bg: #eceef2;
      --card-bg: #606670;
      --card-border: #6b727f;
      --tabs-bg: #5a5f67;
      --tab-active: #6a717e;
      --text: #1b2230;
      --muted: #6b7280;
      --input-bg: #585d68;
      --input-border: #727a89;
      --primary: #0bb5f7;
      --primary-hover: #0aa3de;
      --primary-border: #0a8fc4;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
      color: var(--text);
      background: var(--side-bg);
      -webkit-font-smoothing: antialiased;
    }
    .login-shell { display: flex; min-height: 100vh; }

    /* ---------- lado esquerdo: "Qual a sua maior dor?" ---------- */
    .login-pain {
      flex: 0 0 60%;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 48px 32px;
      background:
        radial-gradient(ellipse at 50% 45%, rgba(14, 116, 180, 0.28), transparent 60%),
        linear-gradient(var(--pain-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--pain-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--pain-bg);
      color: #f1f5f9;
    }
    .login-pain::after {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%);
      pointer-events: none;
    }
    .pain-inner { position: relative; z-index: 1; width: 100%; max-width: 520px; text-align: center; }
    .pain-title {
      font-family: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
      font-weight: 400;
      font-size: clamp(26px, 2.6vw, 38px);
      line-height: 1.55;
      letter-spacing: 0.02em;
      margin: 0 0 22px;
      color: #e8eef7;
    }
    .pain-box {
      position: relative;
      padding: 30px 28px 34px;
      background: rgba(15, 23, 36, 0.55);
      border-radius: 6px;
      box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.10);
    }
    .pain-box::before {
      content: "";
      position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.8), transparent);
    }
    .pain-dot {
      position: absolute; width: 5px; height: 5px; border-radius: 50%;
      background: var(--pain-glow);
      box-shadow: 0 0 8px 2px rgba(34, 184, 255, 0.75);
    }
    .pain-dot.top { top: -3px; left: 50%; transform: translateX(-50%); }
    .pain-dot.r1 { right: -3px; top: 14px; }
    .pain-dot.l1 { left: -3px; top: 42%; }
    .pain-dot.r2 { right: -3px; top: 42%; }
    .pain-list {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: center;
      column-gap: 20px;
      row-gap: 2px;
      margin: 0 0 30px;
      padding: 0;
      list-style: none;
      text-align: left;
      font-size: clamp(15px, 1.25vw, 18px);
      line-height: 1.45;
      color: #f8fafc;
    }
    .login-radiotech-logo { display: block; width: min(200px, 56%); height: auto; margin: 0 auto; }
    .login-radiotech-fallback { font-size: 36px; font-weight: 600; }

    /* ---------- lado direito: login (cinza claro) ---------- */
    .login-side {
      flex: 1 1 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
      background: var(--side-bg);
    }
    .login-card {
      width: 100%;
      max-width: 340px;
      padding: 22px 20px 20px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 10px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.28);
    }
    .login-radar-logo { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 12px; }
    .login-radar-fallback { text-align: center; font-size: 34px; font-weight: 600; color: var(--primary); }
    .login-subtitle { margin: 0 0 12px; text-align: center; font-size: 13px; color: #eef2f7; }
    .login-tabs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
      padding: 3px; margin-bottom: 18px;
      background: var(--tabs-bg); border-radius: 8px;
    }
    .login-tab {
      border: 0; background: transparent; cursor: pointer;
      padding: 7px 8px; border-radius: 6px;
      font: inherit; font-size: 12px; color: #d1d9e4;
    }
    .login-tab[aria-selected="true"] {
      background: var(--tab-active); color: #f1f5f9; font-weight: 500;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .login-field { margin-bottom: 14px; }
    .login-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: #e2e8f0; }
    .login-input { position: relative; }
    .login-input svg {
      position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
      width: 14px; height: 14px; color: #c3cdd9; pointer-events: none;
    }
    .login-input input {
      width: 100%;
      padding: 9px 12px 9px 32px;
      font: inherit; font-size: 13px; color: #f1f5f9;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
      border-radius: 7px;
      outline: none;
    }
    .login-input input:-webkit-autofill { -webkit-text-fill-color: #f1f5f9; -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset; caret-color: #f1f5f9; }
    .login-input input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11, 181, 247, 0.22); }
    .login-submit {
      width: 100%; margin-top: 4px; padding: 10px 12px;
      font: inherit; font-size: 15px; font-weight: 600; color: #fff;
      background: var(--primary);
      border: 1px solid var(--primary-border);
      border-radius: 7px; cursor: pointer;
    }
    .login-submit:hover { background: var(--primary-hover); }
    .login-submit:disabled { opacity: 0.7; cursor: progress; }
    .login-forgot {
      display: block; margin: 14px auto 0; padding: 0;
      border: 0; background: none; cursor: pointer;
      font: inherit; font-size: 11px; color: #d1d9e4;
    }
    .login-forgot:hover { color: #e2e8f0; text-decoration: underline; }
    .login-note {
      margin: 12px 0 0; padding: 10px 12px; border-radius: 7px;
      background: #585d68; color: #e2e8f0; font-size: 12px; line-height: 1.5; text-align: center;
    }
    .login-error {
      margin-bottom: 14px; padding: 10px 12px; border-radius: 7px;
      background: rgba(185, 28, 28, 0.55); color: #ffffff; border: 1px solid rgba(252, 165, 165, 0.6); font-size: 12.5px;
    }
    .login-footer { display: flex; gap: 12px; margin-top: 18px; font-size: 10.5px; }
    .login-footer a { color: #6b7280; text-decoration: none; }
    .login-footer a:hover { color: var(--text); text-decoration: underline; }
    [hidden] { display: none !important; }

    @media (max-width: 860px) {
      .login-shell { flex-direction: column-reverse; }
      .login-pain { flex: none; padding: 40px 16px; }
      .login-side { flex: none; min-height: 100vh; }
    }