/* login.css - the public sign-in page of Blink Content Studio (Alcyone design
   system: navy / red / cream, Plus Jakarta Sans + Space Grotesk, self-hosted).
   Dark only, like Alcyone. Greek falls back to the system font (neither
   typeface has Greek glyphs). */

@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-display:swap;src:url(/studio/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-display:swap;src:url(/studio/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-display:swap;src:url(/studio/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-display:swap;src:url(/studio/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-display:swap;src:url(/studio/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-display:swap;src:url(/studio/fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-display:swap;src:url(/studio/fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-display:swap;src:url(/studio/fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-display:swap;src:url(/studio/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}

.lg{
  --navy:#0b1128;--navy2:#0d1e38;--teal:#0f3848;--red:#e03528;--red2:#f0482e;--cream:#e8e4d8;--cream2:#f0ece2;
  --muted:#8ea0bd;--muted2:#6b7a95;--rule:#1d2b45;--card:rgba(13,22,46,.72);--glass:rgba(255,255,255,.04);
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;overflow:hidden;
  background:radial-gradient(1100px 620px at 80% 20%,rgba(224,53,40,.11),transparent 60%),linear-gradient(165deg,#0b1128 0%,#0d1e38 45%,#0e2d42 80%,#0f3848 100%);
  color:var(--cream);font-family:var(--body);-webkit-font-smoothing:antialiased;line-height:1.5
}
.lg-sonar{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.lg-nav,.lg-hero,.lg-foot{position:relative;z-index:1}
.lg *{box-sizing:border-box}
.lg a{color:inherit}
.lg :where(h1,h2,h3){font-family:var(--display);letter-spacing:-.02em;margin:0}
.lg-wrap{width:min(1180px,100%);margin:0 auto;padding:0 28px}

/* ---- Top bar ---- */
.lg-nav .lg-wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;height:72px;padding-top:env(safe-area-inset-top)}
.lg-brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lg-logo{width:44px;height:44px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.lg-mark{width:34px;height:34px;border-radius:10px;background:#141c3a;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:19px;color:#fff;position:relative}
.lg-mark i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--red);right:7px;bottom:9px}
.lg-bn{font-family:var(--display);font-weight:800;font-size:15.5px;letter-spacing:-.01em;line-height:1.1}
.lg-bs{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;font:600 14.5px var(--body);padding:12px 18px;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap}
.lg-btn:active{transform:translateY(1px)}
.lg-btn.red{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(224,53,40,.28)}
.lg-btn.red:hover{background:var(--red2)}
.lg-btn.cream{background:var(--cream);color:var(--navy)}
.lg-btn.cream:hover{background:#fff}
.lg-btn.ghost{background:var(--glass);color:var(--cream);border:1px solid var(--rule)}
.lg-btn.ghost:hover{background:rgba(255,255,255,.08)}
.lg-btn.sm{padding:8px 13px;font-size:13px;border-radius:10px}
.lg-btn svg{width:17px;height:17px}
.lg-btn.big{padding:18px 30px;font-size:17.5px;border-radius:15px;gap:11px;box-shadow:0 12px 34px rgba(232,228,216,.14)}
.lg-btn.big svg{width:21px;height:21px}

/* ---- Hero ---- */
.lg-hero{flex:1;display:flex;align-items:center}
.lg-hero .lg-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-top:24px;padding-bottom:40px}
.lg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);background:rgba(232,228,216,.06);border:1px solid rgba(232,228,216,.14);border-radius:999px;padding:6px 13px 6px 10px}
.lg-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(224,53,40,.22);animation:lgPulse 2.4s ease-in-out infinite}
@keyframes lgPulse{50%{box-shadow:0 0 0 7px rgba(224,53,40,0)}}
.lg-h1{font-size:clamp(30px,3.4vw,47px);line-height:1.08;font-weight:800;margin:20px 0 18px;white-space:nowrap}
.lg-h1 em{font-style:normal;color:var(--red)}
.lg-lead{font-size:clamp(16px,1.5vw,18.5px);color:#c7cbd6;max-width:560px;margin:0 0 26px}
.lg-chips{display:flex;flex-wrap:wrap;gap:8px}
.lg-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--cream);background:var(--glass);border:1px solid var(--rule);border-radius:999px;padding:7px 12px}
.lg-chip svg{width:14px;height:14px;color:var(--red)}
.lg-get{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px}
.lg-devs{font-size:13.5px;color:var(--muted);letter-spacing:.02em;padding-left:4px}

/* ---- Sign-in card + rotating platform marks around it ---- */
.lg-stage{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:460px}
.lg-cardwrap{position:relative;width:100%;max-width:400px}
.lg-orbit{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:0}
.lg-ring{position:absolute;border:1px solid rgba(142,160,189,.16);border-radius:50%;animation:lgSpin linear infinite}
.lg-ring.r1{width:600px;height:600px;margin:-300px 0 0 -300px;animation-duration:44s}
.lg-ring.r2{width:680px;height:680px;margin:-340px 0 0 -340px;animation-duration:70s;animation-direction:reverse;border-style:dashed;border-color:rgba(142,160,189,.1)}
.lg-planet{position:absolute;width:48px;height:48px;border-radius:50%;background:#121a35;border:1px solid rgba(142,160,189,.28);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.4);transform:translate(-50%,-50%);animation:lgCounter linear infinite}
.lg-ring.r1 .lg-planet{animation-duration:44s}
.lg-ring.r2 .lg-planet{animation-duration:70s;animation-direction:reverse}
.lg-planet svg{width:22px;height:22px}
.lg-planet .li{width:22px;height:22px;border-radius:5px;background:#0a66c2;color:#fff;font:800 12px/22px Arial,Helvetica,sans-serif;text-align:center;letter-spacing:-.5px}
@keyframes lgSpin{to{transform:rotate(360deg)}}
@keyframes lgCounter{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
.lg-card{position:relative;z-index:1;background:var(--card);border:1px solid rgba(142,160,189,.18);border-radius:22px;padding:30px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);width:100%;max-width:400px}
.lg-card h2{font-size:25px;font-weight:800;margin-bottom:4px}
.lg-card .lg-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.lg-help{font-size:12.5px;color:var(--muted2);margin-top:6px;text-align:center}
.lg-field{margin-bottom:14px}
.lg-field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px;letter-spacing:.02em}
.lg-input{width:100%;background:rgba(5,9,24,.55);border:1px solid rgba(142,160,189,.25);border-radius:12px;color:#fff;font:500 16px var(--body);padding:13px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.lg-input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(224,53,40,.18)}
.lg-input.code{font:700 26px var(--display);letter-spacing:12px;text-align:center}
.lg-pw{position:relative}
.lg-pw .lg-input{padding-right:70px}
.lg-pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--muted);font:600 12.5px var(--body);cursor:pointer;padding:6px}
.lg-card .lg-btn{width:100%;margin-top:4px;padding:14px}
.lg-who{display:flex;align-items:center;gap:8px;justify-content:space-between;background:rgba(5,9,24,.45);border:1px solid var(--rule);border-radius:12px;padding:10px 12px;margin-bottom:14px;font-size:14px}
.lg-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-who button,.lg-link{border:none;background:none;color:var(--cream);font:600 13px var(--body);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(232,228,216,.35)}
.lg-msg{min-height:20px;font-size:13.5px;margin-top:12px}
.lg-msg.err{color:#ff8a7e}
.lg-msg.ok{color:#7ee0a5}
.lg-links2{display:flex;justify-content:space-between;margin-top:14px}

/* ---- Footer ---- */
.lg-foot{padding:16px 0 calc(16px + env(safe-area-inset-bottom));color:var(--muted2);font-size:13px}
.lg-foot .lg-wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
.lg-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.lg-foot a{text-decoration:none;color:var(--muted)}
.lg-foot a:hover{color:var(--cream)}

/* Install sheet (iPhone / no install prompt) */
.lg-sheet{position:fixed;inset:0;z-index:60;background:rgba(3,6,18,.6);display:flex;align-items:flex-end;justify-content:center;padding:16px}
.lg-sheet .box{background:#0f1733;border:1px solid var(--rule);border-radius:22px;padding:24px;width:min(440px,100%);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lg-sheet h3{font-size:20px;margin-bottom:12px}
.lg-sheet ol{margin:0 0 18px;padding-left:20px;color:#c7cbd6;font-size:15px}
.lg-sheet li{margin-bottom:8px}
.lg-sheetnote{font-size:13px;color:var(--muted);margin:-6px 0 18px}
@media (min-width:700px){.lg-sheet{align-items:center}}

@media (max-width:980px){
  /* Phones/tablets: headline, then sign-in, then the app button */
  .lg-hero .lg-wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .lg-copy{display:contents}
  .lg-eyebrow{align-self:flex-start}
  .lg-h1{white-space:normal}
  .lg-stage{order:2;min-height:0;padding:70px 0;margin-top:4px;justify-content:center}
  .lg-get{order:3;margin-top:8px;align-items:center}
}
@media (max-width:620px){
  .lg-wrap{padding:0 18px}
  .lg-nav .lg-wrap{height:64px}
  .lg-hero .lg-wrap{padding-top:16px;padding-bottom:28px;gap:28px}
  .lg-bs{display:none}
  .lg-chips{display:none}
  .lg-stage{padding:64px 0}
  .lg-ring.r1{width:100vw;height:100vw;margin:-50vw 0 0 -50vw}
  .lg-ring.r2{display:none}
  .lg-planet{width:40px;height:40px}
  .lg-planet svg,.lg-planet .li{width:18px;height:18px}
  .lg-btn.big{width:100%}
  .lg-lead{margin-bottom:22px}
  .lg-foot .lg-wrap{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .lg-eyebrow i,.lg-ring,.lg-planet{animation:none}
}