/* ============================================================
   SILK REEL — app-login.css
   Version 1.4.3 — 2026-07-19
   Values baked directly from the user's playground export.
   pane 34% · card op .42 blur 8 corner 20 pad 34 width 310
   pane grad #1f3a8a->#0a1a4a · card grad #2a4db0->#14245e
   button #3fd0f5->#0e7ad0 · active input #fbf7cf
   photo: overlay .10, focus 50/50
   elements: line1 5%/20%, line2 "Beyond AI" 5%/13%, logo 5%/3% 120px (bottom-left stack)
   ============================================================ */

* { box-sizing:border-box; }
.sr-login-body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

.sr-split { display:grid; grid-template-columns: 66% 34%; min-height:100vh; }

/* ---- Photo side ---- */
.sr-split-img { position:relative; overflow:hidden; background:#1a1410; }
.sr-split-img img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; }
.sr-split-img::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 24%, rgba(0,0,0,0) 46%); }

.sr-el { position:absolute; z-index:3; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.65); }
.sr-el-line1 { left:5%; bottom:20%; font-size:1.05rem; opacity:.95; }
.sr-el-line2 { left:5%; bottom:13%; font-size:1.7rem; font-weight:700; }
.sr-el-logo  { left:5%; bottom:3%; width:120px; height:auto; }

/* ---- Login side ---- */
.sr-split-form { display:flex; align-items:center; justify-content:center; padding:2rem;
  background:linear-gradient(160deg, #1f3a8a, #0a1a4a); }

.sr-card { position:relative; width:310px; max-width:100%;
  background:linear-gradient(160deg, rgba(42,77,176,.42), rgba(20,36,94,.42));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(150,180,220,.20); border-radius:20px; padding:34px;
  box-shadow:0 24px 70px rgba(0,0,0,.45); }

.sr-card-logo { width:150px; display:block; margin:0 auto 1.1rem; }
.sr-card h2 { text-align:center; margin:0 0 1.3rem; font-size:1.3rem; color:#fff; }

.sr-card label { display:block; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color:#c8d6ef; margin:.9rem 0 .3rem; }
.sr-card input { width:100%; padding:.6rem .7rem; border-radius:9px; margin-top:.25rem;
  background:#1b2d66; color:#fff; border:1px solid #33478a; font-size:1rem; }
.sr-card input.f-active { background:#fbf7cf; color:#1a1a1a; border:1px solid #e8e0a0; }
.sr-card input:focus { outline:none; border-color:#3fd0f5; box-shadow:0 0 0 .12rem rgba(63,208,245,.3); }

.sr-card button[type=submit] { width:100%; margin-top:1.1rem; padding:.75rem; border:none; border-radius:12px;
  background:linear-gradient(90deg,#3fd0f5,#0e7ad0); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; }
.sr-card button[type=submit]:hover { filter:brightness(1.05); }

.sr-note { padding:.55rem .8rem; border-radius:.4rem; font-size:.85rem; margin-bottom:1rem; }
.sr-note-err  { background:#3a1518; color:#ffb4b4; border:1px solid #7a2530; }
.sr-note-warn { background:#3a3016; color:#ffe0a3; border:1px solid #7a5f25; }

.sr-foot-min { color:#8fa8d0; font-size:.72rem; margin-top:1.4rem; text-align:center; }

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .sr-split { grid-template-columns: 1fr; }
  .sr-split-img { min-height:34vh; }
  .sr-el-logo { width:120px; }
  .sr-el-line2 { font-size:1.4rem; }
}