/* ============================================================
   SIGN IN — two panels plus a facts strip
   Loaded after style.css and auth.css (auth.css supplies the
   page-auth body rules; everything here is this screen's layout).
   ============================================================ */
/* min-height is what makes place-items:center actually centre — auth.css
   sets the body to height:auto, so without it the page hugged the top and
   left a band of dead space along the bottom */
body.page-login{ min-height:100vh; display:grid; place-items:center; }

.lg-wrap{
  position:relative; z-index:10; width:100%;
  /* wide enough to hold a 1080p screen without looking like a small dialog
     floating in the middle of it */
  max-width:1400px; margin:0 auto; padding:20px;
  display:flex; flex-direction:column; gap:14px;
}

/* the artwork panel gets the larger share — it is a landscape scene and
   cropping it into a narrow column throws most of it away */
.lg-grid{
  display:grid; grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr);
  gap:16px; align-items:stretch;
}

/* ============================================================
   LEFT — PITCH
   ============================================================ */
/* Both panels — this one and .lg-form below — get a brighter red border and
   a standing ambient glow on top of the plain drop shadow they already had.
   The artwork is dark and the card's border was near-invisible line-soft,
   so at rest neither box announced its own edge; this makes both read as a
   box from the moment the page loads. register.php reuses this unchanged,
   since its panels carry these same classes alongside their own. */
.lg-visual{
  position:relative; overflow:hidden; border-radius:16px;
  /* grows on tall screens instead of leaving a band of dead space; both
     columns stretch to this, so it sets the height of the form card too */
  min-height:clamp(620px, 76vh, 790px);
  border:1px solid rgba(255,26,46,.4);
  box-shadow: 0 0 0 1px rgba(255,26,46,.07),
              0 0 60px -12px rgba(255,26,46,.28),
              0 30px 80px -24px rgba(0,0,0,.7);
  background:#0a0507;
}
/* The artwork's subject sits in the lower half, so it is anchored to the
   bottom and the copy takes the empty upper area. It is already dark, so it
   only needs a soft scrim rather than being dimmed to a third. */
/* login-hero.jpg is the JPEG of assets/login-hero.png — same pixels, a
   seventh of the bytes, which matters for the first screen a visitor sees. */
.lv-art{
  position:absolute; inset:0;
  /* pushed right so the laptop and the IT/OT/AI stack sit clear of the
     left-aligned copy */
  background:url("../assets/login-hero.jpg") 76% center/cover no-repeat;
  opacity:.96;
}
.lg-visual::after{
  content:""; position:absolute; inset:0;
  background:
    /* heavy under the copy, clearing to the right so the laptop, the server
       stack and the shield stay visible */
    linear-gradient(100deg, rgba(6,2,4,.96) 0%, rgba(6,2,4,.9) 30%, rgba(6,2,4,.72) 52%,
                            rgba(6,2,4,.3) 78%, rgba(6,2,4,.05) 100%),
    linear-gradient(180deg, rgba(6,2,4,.6) 0%, transparent 34%),
    radial-gradient(ellipse at 16% 14%, rgba(255,26,46,.18), transparent 56%);
}
.lv-body{ position:relative; z-index:2; padding:34px 34px 30px; }
/* the copy stays in the left column of the panel so it never lands on top
   of the laptop; below the stacking breakpoint it takes the full width */
@media (min-width:1081px){ .lv-body{ max-width:60%; } }

.lv-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--head); font-size:10px; font-weight:700; letter-spacing:.22em; color:var(--red);
  text-shadow:0 0 14px rgba(255,26,46,.7);
}
.lv-kicker i{
  position:relative; display:block; width:26px; height:1px; background:var(--red);
  box-shadow:0 0 8px rgba(255,26,46,.9);
}
.lv-kicker i::after{
  content:""; position:absolute; right:-1px; top:-2px;
  border-left:5px solid var(--red);
  border-top:2.5px solid transparent; border-bottom:2.5px solid transparent;
}

.lv-head{
  margin-top:16px; font-size:clamp(24px,3vw,33px); font-weight:700; line-height:1.22;
  color:#fff; letter-spacing:.01em;
}
.lv-head span{ color:var(--red); text-shadow:0 0 30px rgba(255,26,46,.45); }
.lv-sub{ margin-top:12px; font-size:13.5px; line-height:1.6; color:#a4a4ae; max-width:44ch; }

.lv-points{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.lv-points li{ display:flex; align-items:center; gap:13px; }
.lvp-ic{
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(255,26,46,.12); border:1px solid rgba(255,26,46,.34);
  box-shadow:0 0 16px rgba(255,26,46,.12);
}
.lvp-ic svg{ width:20px; height:20px; fill:none; stroke:var(--red); stroke-width:1.7;
             stroke-linecap:round; stroke-linejoin:round; }
.lv-points b{ display:block; font-size:14px; color:#fff; font-weight:600; }
/* the icon is a <span> too — a plain ".lv-points span" here would win over
   ".lvp-ic{display:grid}" on specificity alone (class+tag beats class) and
   flatten it back to display:block, which is what was throwing the icons
   off-centre. Scoping to the div the description text actually lives in
   keeps this rule off the icon entirely. */
.lv-points li > div > span{ display:block; font-size:12px; color:#8b8b95; margin-top:2px; }

.lv-quote{
  display:flex; gap:12px; align-items:flex-start; margin-top:26px; padding:14px 16px;
  border-radius:12px; max-width:400px;
  background:rgba(10,5,7,.66); border:1px solid var(--line-soft); backdrop-filter:blur(3px);
}
.lvq-mark{ font-family:var(--head); font-size:26px; line-height:.8; color:var(--red); }
.lv-quote blockquote{ font-size:12.5px; line-height:1.6; color:#c4c4ce; }

/* ============================================================
   RIGHT — FORM
   ============================================================ */
.lg-form{
  padding:26px 28px 24px; border-radius:16px;
  background:rgba(11,6,8,.9); border:1px solid rgba(255,26,46,.4);
  box-shadow: 0 0 0 1px rgba(255,26,46,.07),
              0 0 60px -12px rgba(255,26,46,.28),
              0 30px 80px -24px rgba(0,0,0,.7);
  /* the card matches the artwork panel's height, so centre the form inside
     it rather than leaving the spare room in a lump at the bottom */
  display:flex; flex-direction:column; justify-content:center;
}

.lf-head{ display:flex; align-items:center; gap:14px; }
.lf-av{
  flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(255,26,46,.28), rgba(255,26,46,.06));
  border:1.5px solid rgba(255,26,46,.55); box-shadow:0 0 20px rgba(255,26,46,.28);
}
.lf-av svg{ width:26px; height:26px; fill:none; stroke:var(--red); stroke-width:1.6;
            stroke-linecap:round; stroke-linejoin:round; }
/* names this box as the student side of sign-in — its own bordered, tinted
   section above the heading, not a strip pulled flush to the card's edge:
   .lg-form centres its content vertically to match the artwork panel's
   height on tall screens, so a banner glued to the physical top of the card
   would fight that centring and end up floating with dead space above it
   instead of actually touching the edge. Staying inside the normal padded
   flow avoids that. */
.lf-role-section{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:22px; padding:12px 20px; border-radius:11px;
  background:linear-gradient(180deg, rgba(255,26,46,.16), rgba(255,26,46,.05));
  border:1px solid rgba(255,26,46,.32);
}
.lf-role-section svg{
  width:17px; height:17px; fill:none; stroke:var(--red); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.lf-role-section span{
  font-family:var(--head); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  text-shadow:0 0 12px rgba(255,26,46,.5);
}
.lf-head h2{ font-size:23px; font-weight:700; color:#fff; letter-spacing:.01em; }
.lf-head p{ font-size:12.5px; color:#8b8b95; margin-top:3px; }

#loginForm{ margin-top:20px; display:flex; flex-direction:column; gap:15px; }

.lf-field{ display:flex; flex-direction:column; gap:7px; }
.lf-field > span:first-child{ font-size:12.5px; font-weight:600; color:#dcdce4; }

.lf-input{ position:relative; display:block; }
.lf-lead{
  position:absolute; left:13px; top:50%; transform:translateY(-50%); z-index:1;
  width:16px; height:16px; fill:none; stroke:#6a6a74; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none; transition:stroke .16s;
}
/* Every box gets a faint standing glow, not just on focus — at rest, the
   plain line-soft border was almost invisible against the dark artwork, so
   a field only announced itself once you had already interacted with it. */
.lf-input input{
  width:100%; padding:13px 44px 13px 39px; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,26,46,.22);
  font-family:var(--body); font-size:13.5px; color:var(--text); outline:none; transition:.16s;
  box-shadow: 0 0 0 1px rgba(255,26,46,.05),
              0 3px 16px -5px rgba(255,26,46,.28),
              inset 0 1px 0 rgba(255,255,255,.03);
}
.lf-input input:hover{
  border-color:rgba(255,26,46,.35);
  box-shadow: 0 0 0 1px rgba(255,26,46,.1),
              0 4px 20px -5px rgba(255,26,46,.38),
              inset 0 1px 0 rgba(255,255,255,.04);
}
.lf-input input:focus{
  border-color:rgba(255,26,46,.6); background:rgba(255,26,46,.05);
  box-shadow: 0 0 0 1px rgba(255,26,46,.22),
              0 0 22px -4px rgba(255,26,46,.55),
              inset 0 1px 0 rgba(255,255,255,.04);
}
/* a field holding a value keeps the red border after it loses focus — the
   faint base border above is for empty fields only. :placeholder-shown is
   also false for a Chrome-autofilled value, so saved credentials match. */
.lf-input input:not(:placeholder-shown){ border-color:rgba(255,26,46,.6); }
.lf-input input:-webkit-autofill,
.lf-input input:autofill{ border-color:rgba(255,26,46,.6); }
.lf-input:focus-within .lf-lead{ stroke:var(--red); }
.lf-input input::placeholder{ color:#5e5e68; }
.lf-input input.bad{ border-color:#ff5a68; background:rgba(255,90,104,.07); }

.lf-eye{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; display:grid; place-items:center; border-radius:7px; cursor:pointer;
  background:transparent; border:none; color:#6a6a74; transition:.15s;
}
.lf-eye svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.lf-eye:hover{ color:var(--red); background:rgba(255,26,46,.1); }
/* when the password is visible, drop the strike-through from the eye */
.lf-eye.showing svg path:last-of-type{ display:none; }

.lf-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lf-check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.lf-check input{ width:16px; height:16px; accent-color:var(--red); cursor:pointer; }
.lf-check span{ font-size:12.5px; color:#b4b4be; }
.lf-forgot{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--body); font-size:12.5px; font-weight:600; color:var(--red);
}
.lf-forgot:hover{ text-decoration:underline; }

/* ---------- security check ----------
   Shared by both auth screens: js/register.js and js/login.js each wire an
   #capImg/#capRefresh pair to api/captcha.php the same way. */
.lf-cap{ display:flex; flex-direction:column; gap:7px; }
.lf-cap-label{ font-size:12.5px; font-weight:600; color:#dcdce4; }
.lf-cap-label i{ color:var(--red); font-style:normal; }
.lf-cap-row{ display:flex; align-items:stretch; gap:9px; }

.lf-cap-img{
  flex:0 0 auto; display:block; width:160px; height:48px; border-radius:10px;
  overflow:hidden; border:1px solid rgba(255,26,46,.4);
  box-shadow: 0 0 0 1px rgba(255,26,46,.05), 0 3px 16px -5px rgba(255,26,46,.28);
}
.lf-cap-img img{ display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none; }

.lf-cap-refresh{
  flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer; transition:.16s;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,26,46,.22);
  box-shadow: 0 0 0 1px rgba(255,26,46,.05), 0 3px 16px -5px rgba(255,26,46,.28);
}
.lf-cap-refresh svg{
  width:18px; height:18px; fill:none; stroke:#c4c4ce; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .3s ease;
}
.lf-cap-refresh:hover{
  border-color:rgba(255,26,46,.45); background:rgba(255,26,46,.1);
  box-shadow: 0 0 0 1px rgba(255,26,46,.1), 0 4px 20px -5px rgba(255,26,46,.38);
}
.lf-cap-refresh:hover svg{ stroke:#fff; transform:rotate(90deg); }
.lf-cap-refresh:active svg{ transform:rotate(180deg); }

.lf-cap-input{ flex:1 1 auto; min-width:0; }
.lf-cap-input input{ text-transform:uppercase; letter-spacing:.12em; }

.lf-msg{ font-size:12.5px; line-height:1.5; }
.lf-msg.bad{ color:#ff8a94; }
.lf-msg.ok{ color:var(--green); }
.lf-msg.info{ color:var(--amber); }

.lf-submit{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px; border-radius:10px; cursor:pointer; transition:.16s; width:100%;
  background:linear-gradient(135deg,#c40f1f,var(--red)); border:none;
  font-family:var(--body); font-size:15px; font-weight:700; letter-spacing:.02em; color:#fff;
  box-shadow:0 0 22px rgba(255,26,46,.4);
}
.lf-submit svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9;
                stroke-linecap:round; stroke-linejoin:round; }
.lf-submit:hover:not(:disabled){ box-shadow:0 0 34px rgba(255,26,46,.7); transform:translateY(-1px); }
.lf-submit:disabled{ opacity:.65; cursor:default; transform:none; }

.lf-secure{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px;
  font-size:11.5px; color:#7f7f89;
}
.lf-secure svg{ width:14px; height:14px; fill:none; stroke:var(--green); stroke-width:1.7;
                stroke-linecap:round; stroke-linejoin:round; }

.lf-alt{
  margin-top:16px; padding-top:15px; border-top:1px solid var(--line-soft);
  text-align:center; font-size:13px; color:#8b8b95;
}
.lf-alt a{ color:var(--red); font-weight:700; text-decoration:none; }
.lf-alt a:hover{ text-decoration:underline; }

/* ============================================================
   FACTS STRIP
   ============================================================ */
/* same brighter border + standing glow as .lg-visual/.lg-form — the strip
   was still on the plain near-invisible line-soft border and no glow, the
   odd one out of the three boxes on this screen */
.lg-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  padding:16px 18px; border-radius:16px;
  background:rgba(11,6,8,.86); border:1px solid rgba(255,26,46,.4);
  box-shadow: 0 0 0 1px rgba(255,26,46,.07),
              0 0 60px -12px rgba(255,26,46,.28),
              0 30px 80px -24px rgba(0,0,0,.7);
}
.ls-item{
  display:flex; align-items:center; gap:11px; min-width:0;
  padding-right:10px; border-right:1px solid rgba(255,255,255,.06);
}
.ls-item:last-child{ border-right:none; }
.ls-ic{
  flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:rgba(255,26,46,.12); border:1px solid rgba(255,26,46,.32);
}
.ls-ic svg{ width:17px; height:17px; fill:none; stroke:var(--red); stroke-width:1.7;
            stroke-linecap:round; stroke-linejoin:round; }
.ls-item b{ display:block; font-size:13px; color:#fff; font-weight:600; line-height:1.2; }
/* .ls-ic is a <span> too — a plain ".ls-item span" here would win over
   ".ls-ic{display:grid}" on specificity (class+tag beats class) and flatten
   it back to display:block, which is what was throwing these icons off
   centre. Scoping to the div the description text lives in keeps this rule
   off the icon, same fix as .lv-points li > div > span above. */
.ls-item > div > span{ display:block; font-size:10.5px; color:#7f7f89; margin-top:2px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .lg-grid{ grid-template-columns:1fr; }
  .lg-visual{ min-height:0; }
  .lv-body{ padding:26px 24px; }
  .lg-strip{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  .ls-item{ border-right:none; }
}
@media (max-width:620px){
  .lg-form{ padding:20px 18px; }
  .lv-points{ gap:11px; }
  .lv-quote{ margin-top:20px; }
}