/* Tomala Cloud Auth login CSS - extracted for CSP */

:root {
      --text: #e5edf8;
      --muted: #94a3b8;
      --blue: #38bdf8;
      --danger: #fb7185;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: #020617;
    }

    body {
      min-height: 100vh;
      background:
        linear-gradient(180deg, rgba(2,6,23,.12), rgba(2,6,23,.58)),
        url("https://tomala.cloud/assets/tomala-cloud-login-bg-clean.webp") center center / cover fixed no-repeat;
      overflow-x: hidden;
    }

    body:before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%, rgba(56,189,248,.18), transparent 34%),
        radial-gradient(circle at 50% 0%, rgba(14,165,233,.16), transparent 36%),
        linear-gradient(180deg, rgba(2,6,23,.06), rgba(2,6,23,.38));
      z-index: 0;
    }

    .login-shell {
      min-height: 100vh;
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      padding: 40px 20px;
    }

    .login-card {
      width: min(760px, 92vw);
      padding: 48px 70px 46px;
      border: 1px solid rgba(125,211,252,.34);
      border-top-color: rgba(125,211,252,.78);
      border-radius: 30px;
      background: linear-gradient(180deg, rgba(5,14,29,.80), rgba(3,8,18,.76));
      box-shadow:
        0 42px 140px rgba(0,0,0,.74),
        0 0 110px rgba(56,189,248,.24),
        inset 0 1px 0 rgba(255,255,255,.12);
      backdrop-filter: blur(20px);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .login-card:before {
      content: "";
      position: absolute;
      top: -1px;
      left: 28%;
      right: 28%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #7dd3fc, transparent);
      box-shadow: 0 0 18px #7dd3fc;
    }

    .login-logo-blue {
      width: min(420px, 86%);
      height: auto;
      display: block;
      margin: -6px auto 34px;
      filter:
        drop-shadow(0 0 28px rgba(56,189,248,.42))
        drop-shadow(0 0 58px rgba(2,132,199,.20));
    }

    .brand-sub {
      margin: 0 0 28px;
      color: #7dd3fc;
      letter-spacing: .28em;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 800;
    }

    .login-form {
      display: grid;
      gap: 18px;
      margin: 0 auto;
      max-width: 560px;
      text-align: left;
    }

    .input-wrap {
      height: 62px;
      border: 1px solid rgba(125,211,252,.26);
      background: rgba(2,8,23,.58);
      border-radius: 13px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 14px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .input-wrap span {
      color: var(--muted);
      font-size: 18px;
      width: 20px;
      text-align: center;
    }

    .input-wrap input {
      width: 100%;
      background: transparent;
      border: 0;
      outline: 0;
      color: var(--text);
      font-size: 16px;
    }

    .input-wrap input::placeholder {
      color: rgba(148,163,184,.70);
    }

    .login-btn {
      margin-top: 12px;
      height: 66px;
      width: 100%;
      border: 1px solid rgba(125,211,252,.72);
      border-radius: 14px;
      color: white;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      background: linear-gradient(135deg, #0369a1, #0284c7 45%, #38bdf8);
      box-shadow:
        0 26px 70px rgba(14,165,233,.38),
        inset 0 1px 0 rgba(255,255,255,.24);
    }

    .login-btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .secure {
      margin-top: 26px;
      color: rgba(148,163,184,.72);
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: 11px;
      line-height: 1.7;
    }

    .error-box {
      max-width: 560px;
      margin: 0 auto 18px;
      padding: 13px 16px;
      border: 1px solid rgba(251,113,133,.45);
      border-radius: 12px;
      background: rgba(127,29,29,.28);
      color: #fecdd3;
      font-weight: 700;
      text-align: center;
    }

    @media (max-width: 720px) {
      .login-card {
        padding: 34px 22px 32px;
        border-radius: 24px;
      }

      .login-logo-blue {
        width: min(340px, 92%);
        margin-bottom: 26px;
      }
    }


/* === injected logout link === */
.logout-link {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  color: #e5edf8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .72);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .30);
  backdrop-filter: blur(14px);
}