/* Purti Trades sign-in page. Presentation only: layout, colour and typography. No data, no logic.
   Self-contained (system fonts, no external resource) and compatible with the strict CSP. */
:root {
  --navy-900:#050f22; --navy-800:#0b2a55; --ink:#0f172a; --muted:#5b6474; --line:#dbe2ea;
  --green:#22c55e; --green-300:#86efac; --blue:#2563eb; --blue-700:#1d4ed8; --amber:#8a5a00; --amber-bg:#fff4dc;
  --amber-line:#f0d9a3; --card:#ffffff; --focus:#3b82f6;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
.login-body {
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  background:var(--navy-900); position:relative; min-height:100vh; overflow-x:hidden;
}
.hero-art { position:fixed; inset:0; width:100%; height:100%; z-index:0; }

.login-layout {
  position:relative; z-index:1; min-height:100vh; display:grid; grid-template-columns:1.25fr 1fr;
  align-items:center; gap:40px; padding:40px clamp(20px,5vw,84px); max-width:1500px; margin:0 auto;
}

/* ---- branding (left) ---- */
.brand { color:#f8fafc; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.brand-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:14px; }
.logo svg { width:56px; height:56px; flex:none; filter:drop-shadow(0 0 10px rgba(34,197,94,.45)); }
.brand-mark { margin:0; font-size:clamp(30px,3.6vw,46px); line-height:1; font-weight:300; letter-spacing:.02em; }
.brand-mark strong { font-weight:900; }
.brand-tag { margin:8px 0 0; font-size:12px; letter-spacing:.42em; color:#cbd5e1; font-weight:600; }

.ticker {
  list-style:none; margin:0; padding:10px 14px; min-width:250px; border-radius:12px;
  background:rgba(3,15,34,.55); border:1px solid rgba(96,165,250,.35); backdrop-filter:blur(4px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.ticker li { display:grid; grid-template-columns:96px 1fr 18px; align-items:center; gap:10px; padding:7px 0;
             border-bottom:1px solid rgba(148,163,184,.18); font-size:12.5px; letter-spacing:.04em; color:#e2e8f0; }
.ticker li:last-child { border-bottom:0; }
.ticker .bar { display:block; height:6px; border-radius:3px; background:linear-gradient(90deg,rgba(34,197,94,.25),var(--green)); }
.ticker .b1 { width:78%; } .ticker .b2 { width:62%; } .ticker .b3 { width:88%; } .ticker .b4 { width:54%; }
.ticker b { color:var(--green); font-size:11px; text-align:right; }
.ticker .ticker-note { display:block; padding-top:8px; font-size:10.5px; letter-spacing:.06em; color:#94a3b8; text-transform:uppercase; }

.rule { display:block; width:64px; height:4px; margin:26px 0 18px; border-radius:2px; background:var(--green); box-shadow:0 0 12px rgba(34,197,94,.6); }
.brand-headline { margin:0 0 16px; font-size:clamp(32px,4.4vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.01em; }
.brand-headline em { font-style:normal; color:var(--green-300); }
.brand-sub { margin:0 0 26px; font-size:clamp(16px,1.5vw,21px); color:#dbe5f1; }
.brand-features { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 26px; }
.brand-features li { display:flex; align-items:center; gap:12px; font-size:12px; font-weight:800; letter-spacing:.06em; line-height:1.25; color:#f1f5f9; }
.brand-features .ico { flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
                       border:2px solid var(--green); background:rgba(3,15,34,.55); color:var(--green); box-shadow:0 0 14px rgba(34,197,94,.35); }
.brand-features .ico svg { width:24px; height:24px; }

/* ---- login card (right) ---- */
.card-wrap { display:flex; justify-content:flex-end; }
.login {
  width:100%; max-width:450px; background:var(--card); border-radius:18px; padding:34px 36px 28px;
  box-shadow:0 30px 70px rgba(2,8,23,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.login h1 { margin:0 0 16px; font-size:34px; font-weight:800; letter-spacing:-.01em; color:#0b1f3f; }
.login .test {
  display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; padding:12px 14px; border-radius:10px;
  font-size:13.5px; font-weight:500; color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-line);
}
.login .test svg { flex:none; width:22px; height:22px; margin-top:1px; color:#0b1f3f; }
.login label { display:block; margin:0 0 8px; font-size:14px; font-weight:700; color:#0b1f3f; }
.field { position:relative; margin:0 0 18px; }
.field > svg { position:absolute; left:14px; top:50%; width:20px; height:20px; transform:translateY(-50%); color:#475569; pointer-events:none; }
.field input {
  display:block; width:100%; padding:14px 46px 14px 44px; font:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1px solid #cbd5e1; border-radius:10px; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder { color:#94a3b8; }
.field input:hover { border-color:#94a3b8; }
.field input:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 4px rgba(59,130,246,.18); }
.eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:8px;
       background:transparent; color:#475569; cursor:pointer; display:grid; place-items:center; }
.eye svg { width:22px; height:22px; }
.eye:hover { background:#f1f5f9; }
.eye.on { color:var(--blue); }
.eye:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.login .primary {
  width:100%; margin-top:4px; padding:14px 18px; font:inherit; font-size:17px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#2f6ff0,var(--blue)); border:1px solid var(--blue-700); border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px; position:relative;
  box-shadow:0 10px 22px rgba(37,99,235,.35); transition:transform .08s, box-shadow .15s, filter .15s;
}
.login .primary svg { position:absolute; right:18px; width:22px; height:22px; }
.login .primary:hover { filter:brightness(1.06); box-shadow:0 12px 26px rgba(37,99,235,.42); }
.login .primary:active { transform:translateY(1px); }
.login .primary:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.login .muted { display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
                font-size:13px; line-height:1.5; color:#334155; }
.login .muted svg { flex:none; width:22px; height:22px; }

/* ---- tablet ---- */
@media (max-width: 1024px) {
  .login-layout { grid-template-columns:1fr; gap:30px; padding:32px 20px 48px; align-content:start; }
  .card-wrap { justify-content:center; order:1; }
  .brand { order:2; max-width:720px; margin:0 auto; }
  .brand-top { justify-content:center; }
  .brand-headline, .brand-sub { text-align:center; }
  .rule { margin-left:auto; margin-right:auto; }
  .brand-features { justify-content:center; }
}
/* ---- phone ---- */
@media (max-width: 560px) {
  .login-layout { padding:16px 14px 40px; gap:22px; }
  .login { padding:26px 20px 20px; border-radius:14px; }
  .login h1 { font-size:28px; }
  .brand-mark { font-size:30px; }
  .brand-tag { letter-spacing:.3em; }
  .brand-headline { font-size:28px; }
  .brand-sub { font-size:15px; }
  .ticker { min-width:0; width:100%; }
  .brand-features { gap:12px 16px; }
  .brand-features li { font-size:11px; }
  .brand-features .ico { width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce) { .field input, .login .primary { transition:none; } }

/* ---- invitation activation page (server-rendered state) ---- */
.login-layout.single { grid-template-columns:1fr; }
.login-layout.single .card-wrap { justify-content:center; }
.invite-title { margin:0 0 8px; font-size:20px; color:#0b1f3f; }
.invite-message { margin:0 0 16px; font-size:14px; color:#334155; }
.invite-message:empty { display:none; }
.invite-for { margin:0 0 16px; font-size:13.5px; color:#334155; background:#f1f5f9; border-radius:8px; padding:10px 12px; }
.invite-body[data-state="invalid"] .invite-form, .invite-body[data-state="nolink"] .invite-form { display:none; }
.invite-body[data-state="invalid"] .invite-message { color:#9f1239; background:#fff1f2; border:1px solid #fecdd3; border-radius:8px; padding:10px 12px; }
.invite-body[data-state="nolink"] .invite-message { background:#f1f5f9; border-radius:8px; padding:10px 12px; }
.login .invite-hint { margin:14px 0 0; text-align:center; font-size:13.5px; color:#334155; }
.login .invite-hint a { color:var(--blue); font-weight:700; text-decoration:none; }
.login .invite-hint a:hover { text-decoration:underline; }