/* ============================================================
   TMS Login Page — ALL selectors scoped to body.login-page
   Only this file is loaded on the login page.
   Do NOT add to $page->stylesheets (authenticated pages).
   ============================================================ */

/* ── Design tokens (global — needed before body class exists) ── */
:root {
  --bg-base:        #FBFBFC;
  --bg-elevated:    #FFFFFF;
  --bg-overlay:     #FFFFFF;
  --bg-sunken:      #F4F5F7;
  --bg-hover:       rgba(15,20,25,0.04);
  --bg-active:      rgba(15,20,25,0.06);
  --bg-selected:    rgba(94,106,210,0.08);
  --border-subtle:  rgba(15,20,25,0.06);
  --border-default: rgba(15,20,25,0.10);
  --border-strong:  rgba(15,20,25,0.16);
  --text-primary:   #0F1419;
  --text-secondary: #3D4754;
  --text-tertiary:  #6C7280;
  --text-disabled:  #A8AEB8;
  --text-inverse:   #FFFFFF;
  --accent:         #5E6AD2;
  --accent-hover:   #4F5BC2;
  --accent-active:  #4350B5;
  --accent-muted:   rgba(94,106,210,0.10);
  --accent-border:  rgba(94,106,210,0.32);
  --danger:         #B42318;
  --danger-bg:      rgba(180,35,24,0.10);
  --danger-border:  rgba(180,35,24,0.28);
  --focus-ring:     0 0 0 2px var(--bg-elevated), 0 0 0 4px rgba(94,106,210,0.5);
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-xl:20px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --r-sm:4px; --r-md:6px;
  --h-input:32px; --h-button:32px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
}

[data-theme="dark"] {
  --bg-base:#08090A; --bg-elevated:#101113; --bg-overlay:#1C1D1F; --bg-sunken:#0C0D0F;
  --border-subtle:rgba(255,255,255,0.06); --border-default:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.16);
  --text-primary:#F7F8F8; --text-secondary:#B4BBC8; --text-tertiary:#8A8F98; --text-disabled:#4C525C; --text-inverse:#08090A;
  --accent-hover:#6E7AE2; --danger:#EB5757; --danger-bg:rgba(235,87,87,0.12); --danger-border:rgba(235,87,87,0.32);
}

/* ── Body reset (scoped) ── */
body.login-page *, body.login-page *::before, body.login-page *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
body.login-page {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
  padding-bottom: 36px;
}

/* ── Brand panel (left 60%) ── */
body.login-page .login-brand {
  flex: 0 0 60%;
  background: var(--bg-sunken);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
body.login-page .login-brand::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg,  rgba(0,0,0,0.015) 0, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 6px),
    radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px, 14px 14px;
  pointer-events: none; z-index: 0;
}
body.login-page .login-brand-logo {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--text-primary); position: relative; z-index: 10;
}
body.login-page .login-brand-logo img { height: 28px; width: auto; }

/* ── Tannery Scene (ALL scoped) ── */
body.login-page .tannery-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px 32px; gap: 14px;
  pointer-events: none; user-select: none;
}

/* Section tabs */
body.login-page .section-tabs {
  display: flex; gap: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(15,20,25,0.12); background: rgba(15,20,25,0.04);
}
body.login-page .stab {
  flex: 1; padding: 6px 14px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: rgba(15,20,25,0.35);
  cursor: pointer; text-align: center; border-right: 1px solid rgba(15,20,25,0.08);
  transition: background 180ms ease-out, color 180ms ease-out; white-space: nowrap;
}
body.login-page .stab:last-child { border-right: none; }
body.login-page .stab-bh.is-active { background: rgba(196,149,80,0.14);  color: #8B5E20; border-bottom: 2px solid #C49040; }
body.login-page .stab-tn.is-active { background: rgba(94,106,210,0.14);  color: #4A58C8; border-bottom: 2px solid #5E6AD2; }
body.login-page .stab-cr.is-active { background: rgba(180,120,40,0.14);  color: #8B5A18; border-bottom: 2px solid #C08030; }
body.login-page .stab-fn.is-active { background: rgba(31,122,77,0.12);   color: #1A6A40; border-bottom: 2px solid #1F7A4D; }

/* Substep bar */
body.login-page .substep-bar { width: 100%; min-height: 24px; display: flex; align-items: center; justify-content: center; }
body.login-page .substeps { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; animation: lp-fade-in 0.25s ease-out; }
body.login-page .substeps.hidden { display: none; }
@keyframes lp-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.login-page .sstep { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
body.login-page .sstep-bh { background: rgba(196,149,80,0.14);  color: #8B5E20; }
body.login-page .sstep-tn { background: rgba(94,106,210,0.12);  color: #4A58C8; }
body.login-page .sstep-cr { background: rgba(180,120,40,0.12);  color: #8B5A18; }
body.login-page .sstep-fn { background: rgba(31,122,77,0.10);   color: #1A6A40; }
body.login-page .sstep-arr { font-size: 9px; color: rgba(255,255,255,0.30); }

/* 3-column scene */
body.login-page .scene-cols { display: flex; align-items: flex-end; gap: 20px; width: 100%; justify-content: center; }
body.login-page .scene-col { display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 12px; padding: 10px 8px; transition: opacity 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.4s ease-out; }
body.login-page .col-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(15,20,25,0.30); }

/* Tab-driven column highlight */
body.login-page .tannery-scene .scene-col { opacity: 0.45; transform: scale(0.97); }
body.login-page .tannery-scene[data-active="bh"] .scene-cols .scene-col:nth-child(1) { opacity:1; transform:scale(1.02); box-shadow:0 0 0 1px rgba(196,149,80,0.35),0 8px 32px rgba(196,120,40,0.25); background:rgba(196,149,80,0.08); }
body.login-page .tannery-scene[data-active="bh"] .scene-cols .scene-col:nth-child(2),
body.login-page .tannery-scene[data-active="bh"] .scene-cols .scene-col:nth-child(3) { opacity:0.30; }
body.login-page .tannery-scene[data-active="tn"] .scene-cols .scene-col:nth-child(2) { opacity:1; transform:scale(1.04); box-shadow:0 0 0 1px rgba(94,106,210,0.35),0 8px 40px rgba(94,106,210,0.30); background:rgba(94,106,210,0.08); }
body.login-page .tannery-scene[data-active="tn"] .scene-cols .scene-col:nth-child(1),
body.login-page .tannery-scene[data-active="tn"] .scene-cols .scene-col:nth-child(3) { opacity:0.28; }
body.login-page .tannery-scene[data-active="cr"] .scene-cols .scene-col:nth-child(3) { opacity:1; transform:scale(1.02); box-shadow:0 0 0 1px rgba(200,140,60,0.45),0 8px 32px rgba(200,140,60,0.30); background:rgba(200,140,60,0.10); }
body.login-page .tannery-scene[data-active="cr"] .drying-rack { filter:drop-shadow(0 0 10px rgba(220,165,70,0.55)); transform:scale(1.06); transition:transform 0.4s ease-out,filter 0.4s ease-out; }
body.login-page .tannery-scene[data-active="cr"] .roll-press,
body.login-page .tannery-scene[data-active="cr"] .fin-vats { opacity:0.30; }
body.login-page .tannery-scene[data-active="cr"] .scene-cols .scene-col:nth-child(1),
body.login-page .tannery-scene[data-active="cr"] .scene-cols .scene-col:nth-child(2) { opacity:0.28; }
body.login-page .tannery-scene[data-active="fn"] .scene-cols .scene-col:nth-child(3) { opacity:1; transform:scale(1.02); box-shadow:0 0 0 1px rgba(60,185,110,0.40),0 8px 36px rgba(60,185,110,0.28); background:rgba(60,185,110,0.08); }
body.login-page .tannery-scene[data-active="fn"] .roll-press { filter:drop-shadow(0 0 10px rgba(60,185,110,0.60)); transform:scale(1.08); transition:transform 0.4s ease-out,filter 0.4s ease-out; }
body.login-page .tannery-scene[data-active="fn"] .fin-vats { filter:drop-shadow(0 0 8px rgba(60,185,110,0.40)); }
body.login-page .tannery-scene[data-active="fn"] .drying-rack { opacity:0.30; }
body.login-page .tannery-scene[data-active="fn"] .scene-cols .scene-col:nth-child(1),
body.login-page .tannery-scene[data-active="fn"] .scene-cols .scene-col:nth-child(2) { opacity:0.28; }
body.login-page .tannery-scene[data-active="fn"] .chem-vats { opacity:1; }
body.login-page .tannery-scene:not([data-active="fn"]) .chem-vats { opacity:0.45; transition:opacity 0.4s; }
body.login-page .tannery-scene[data-active="tn"] .drum-inner { animation-duration:2.5s !important; }
body.login-page .tannery-scene:not([data-active="tn"]) .drum-inner { animation-duration:6s !important; }
body.login-page .tannery-scene[data-active="bh"] .sv1,
body.login-page .tannery-scene[data-active="bh"] .sv2 { animation-duration:1.8s !important; }

/* Animal skin shapes */
body.login-page .skin { clip-path: polygon(35% 0%,65% 0%,80% 5%,100% 20%,100% 50%,90% 65%,100% 82%,85% 100%,65% 90%,55% 100%,45% 100%,35% 90%,15% 100%,0% 82%,10% 65%,0% 50%,0% 20%,20% 5%); }
body.login-page .skin-goat { clip-path: polygon(30% 0%,70% 0%,92% 15%,100% 42%,94% 66%,100% 86%,80% 100%,60% 88%,50% 100%,40% 88%,20% 100%,0% 86%,6% 66%,0% 42%,8% 15%); }
body.login-page .skin-sheep { border-radius:48% 52% 50% 50%/42% 42% 58% 58%; }
body.login-page .skin-raw       { background:#C8A870; }
body.login-page .skin-preserved { background:#B0A090; }
body.login-page .skin-rewet     { background:#A89070; }
body.login-page .skin-dehaired  { background:#B8B0A0; }
body.login-page .skin-vegtanned { background:#6A4020; }
body.login-page .skin-vegdried  { background:#7A5030; }
body.login-page .skin-vegpressed{ background:#4A2C10; }
body.login-page .skin-limed     { background:#B0A898; }
body.login-page .skin-wetblue   { background:#4A80A8; }
body.login-page .skin-crust     { background:#A86840; }
body.login-page .skin-finish    { background:#6A3818; }
body.login-page .skin-black     { background:#1C1410; }

/* Hide stack */
body.login-page .hide-stack { width:130px; height:70px; position:relative; display:flex; align-items:flex-end; justify-content:center; }
body.login-page .hide-layer { position:absolute; width:90px; height:14px; border-radius:3px; border:1px solid rgba(15,20,25,0.10); }
body.login-page .hl1 { bottom:0px;  left:18px; background:#C8A870; }
body.login-page .hl2 { bottom:12px; left:22px; background:#B89860; }
body.login-page .hl3 { bottom:24px; left:26px; background:#A88850; }
body.login-page .hl4 { bottom:36px; left:30px; background:#B0A090; }
body.login-page .hl5 { bottom:48px; left:34px; background:#A09080; }
body.login-page .salt-dots { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,0.70) 1px,transparent 1px); background-size:8px 8px; opacity:0.5; border-radius:3px; }

/* Vats */
body.login-page .soaking-vat { width:130px; height:80px; border:2px solid rgba(100,160,210,0.40); border-top:none; border-radius:0 0 10px 10px; background:rgba(100,160,210,0.06); position:relative; overflow:hidden; }
body.login-page .water-fill { position:absolute; bottom:0; left:0; right:0; height:68%; background:rgba(60,130,190,0.60); animation:lp-slosh 3s ease-in-out infinite; }
body.login-page .water-fill::after { content:''; position:absolute; top:-7px; left:-25px; width:185px; height:16px; background:rgba(80,160,220,0.75); border-radius:50%; animation:lp-wave 2.5s ease-in-out infinite; }
body.login-page .dehair-vat { width:130px; height:60px; border:2px solid rgba(200,200,190,0.50); border-top:none; border-radius:0 0 10px 10px; background:rgba(220,218,210,0.10); position:relative; overflow:hidden; }
body.login-page .lime-fill { position:absolute; bottom:0; left:0; right:0; height:68%; background:rgba(185,180,158,0.85); animation:lp-slosh 3.4s ease-in-out infinite; }
body.login-page .lime-fill::after { content:''; position:absolute; top:-7px; left:-25px; width:185px; height:16px; background:rgba(205,202,182,0.90); border-radius:50%; animation:lp-wave 2.8s ease-in-out infinite; }
body.login-page .skin-in-vat { position:absolute; z-index:2; opacity:0.95; }
body.login-page .sv1 { width:52px; height:40px; top:14%; left:8%; animation:lp-float 3.2s ease-in-out infinite; }
body.login-page .sv2 { top:22%; left:50%; animation:lp-float 2.8s ease-in-out infinite reverse; }

/* Drum */
body.login-page .steam { display:flex; gap:14px; height:34px; align-items:flex-end; }
body.login-page .wisp { display:block; border-radius:99px; background:rgba(15,20,25,0.10); animation:lp-wisp 2.4s ease-in-out infinite; transform-origin:bottom center; }
body.login-page .w1 { width:5px; height:22px; animation-delay:0s; animation-duration:2.2s; }
body.login-page .w2 { width:7px; height:34px; animation-delay:0.4s; animation-duration:2.6s; }
body.login-page .w3 { width:5px; height:18px; animation-delay:0.8s; animation-duration:2.0s; }
body.login-page .drum-assembly { display:flex; align-items:center; }
body.login-page .drum-axle { width:26px; height:8px; background:rgba(15,20,25,0.18); border-radius:4px; }
body.login-page .drum { width:170px; height:170px; border-radius:50%; border:3px solid rgba(15,20,25,0.14); background:radial-gradient(circle at 38% 38%,#C8BFB0,#A89880); position:relative; overflow:hidden; box-shadow:inset 0 0 0 7px rgba(15,20,25,0.08),0 4px 20px rgba(15,20,25,0.18); }
body.login-page .drum-inner { position:absolute; inset:0; border-radius:50%; animation:lp-spin 5s linear infinite; }
body.login-page .drum-spoke { position:absolute; top:50%; left:50%; width:82px; height:2px; background:rgba(15,20,25,0.08); border-radius:1px; transform-origin:left center; margin-top:-1px; }
body.login-page .sp1{transform:rotate(0deg);} body.login-page .sp2{transform:rotate(90deg);} body.login-page .sp3{transform:rotate(180deg);} body.login-page .sp4{transform:rotate(270deg);}
body.login-page .drum-hide { position:absolute; opacity:0.88; }
body.login-page .dh1 { width:48px; height:36px; top:16%; left:14%; background:#4A80A8; clip-path:polygon(35% 0%,65% 0%,80% 5%,100% 20%,100% 50%,90% 65%,100% 82%,85% 100%,65% 90%,55% 100%,45% 100%,35% 90%,15% 100%,0% 82%,10% 65%,0% 50%,0% 20%,20% 5%); }
body.login-page .dh2 { width:36px; height:28px; top:54%; left:50%; background:#A86840; border-radius:50% 40% 60% 45%/55% 50% 45% 50%; }
body.login-page .dh3 { width:42px; height:32px; top:60%; left:18%; background:#6A3818; clip-path:polygon(30% 0%,70% 0%,92% 15%,100% 42%,94% 66%,100% 86%,80% 100%,60% 88%,50% 100%,40% 88%,20% 100%,0% 86%,6% 66%,0% 42%,8% 15%); }
body.login-page .dh4 { width:30px; height:24px; top:24%; left:58%; background:#908070; border-radius:48% 52% 50% 50%/42% 42% 58% 58%; }
body.login-page .drum-liquid { position:absolute; bottom:0; left:0; right:0; height:35%; background:rgba(107,155,192,0.20); overflow:hidden; }
body.login-page .wave { position:absolute; top:-10px; left:-50px; width:275px; height:22px; background:rgba(94,140,188,0.30); border-radius:50%; animation:lp-wave 2.8s ease-in-out infinite; }
body.login-page .tannin-liq { background:rgba(90,52,18,0.65) !important; }
body.login-page .tannin-liq .wave { background:rgba(110,68,28,0.80) !important; }
body.login-page .drum-port { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%; border:2.5px solid rgba(15,20,25,0.18); background:rgba(15,20,25,0.04); z-index:3; }

/* Stand */
body.login-page .stand { display:flex; gap:72px; position:relative; margin-top:2px; }
body.login-page .stand-leg { width:6px; height:30px; background:rgba(15,20,25,0.16); border-radius:3px; }
body.login-page .leg-l { transform:rotate(-6deg); transform-origin:top center; }
body.login-page .leg-r { transform:rotate(6deg);  transform-origin:top center; }
body.login-page .stand-foot { position:absolute; bottom:-5px; width:22px; height:5px; background:rgba(15,20,25,0.14); border-radius:3px; }
body.login-page .foot-l { left:-8px; } body.login-page .foot-r { right:-8px; }

/* Drying rack */
body.login-page .drying-rack { width:130px; display:flex; flex-direction:column; align-items:center; }
body.login-page .rack-rail { width:100%; height:5px; background:rgba(15,20,25,0.16); border-radius:3px; position:relative; }
body.login-page .rack-rail::before,body.login-page .rack-rail::after { content:''; position:absolute; top:5px; width:2px; height:9px; background:rgba(15,20,25,0.12); border-radius:1px; }
body.login-page .rack-rail::before { left:16%; } body.login-page .rack-rail::after { right:16%; }
body.login-page .rack-hides { display:flex; gap:8px; margin-top:12px; justify-content:center; }
body.login-page .dry-skin { animation:lp-sway 3.8s ease-in-out infinite; display:block; filter:drop-shadow(1px 2px 2px rgba(0,0,0,0.18)); }
body.login-page .dry-skin:nth-child(2) { animation-delay:0.6s; animation-direction:reverse; }
body.login-page .dry-skin:nth-child(3) { animation-delay:1.2s; }
body.login-page .dry-skin:nth-child(4) { animation-delay:1.8s; animation-direction:reverse; }

/* Roll press */
body.login-page .roll-press { display:flex; flex-direction:column; align-items:center; gap:4px; }
body.login-page .press-frame { display:flex; flex-direction:column; align-items:center; gap:0; border:2px solid rgba(15,20,25,0.14); border-radius:6px; padding:4px 6px; background:rgba(15,20,25,0.03); }
body.login-page .roller { width:80px; height:14px; background:linear-gradient(180deg,#A0A0A0,#707070,#A0A0A0); border-radius:7px; border:1px solid rgba(15,20,25,0.20); box-shadow:0 2px 4px rgba(15,20,25,0.12); }
body.login-page .hide-through { width:60px; height:10px; background:#8B6040; border-radius:1px; animation:lp-feed 2s ease-in-out infinite alternate; }
body.login-page .press-handle { width:4px; height:20px; background:rgba(15,20,25,0.18); border-radius:2px; }

/* Chemical vats */
body.login-page .chem-vats { display:flex; gap:10px; align-items:flex-end; }
body.login-page .chem-vat-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
body.login-page .chem-vat-body { width:48px; height:38px; border:2px solid; border-top:none; border-radius:0 0 8px 8px; position:relative; overflow:hidden; }
body.login-page .chem-vat-lbl { font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:rgba(15,20,25,0.30); }
body.login-page .cv-salt  { border-color:rgba(200,200,195,0.50); background:rgba(230,228,220,0.10); }
body.login-page .cv-water { border-color:rgba(94,160,210,0.45);  background:rgba(94,160,210,0.08); }
body.login-page .cv-lime  { border-color:rgba(210,210,195,0.50); background:rgba(225,222,210,0.10); }
body.login-page .cv-bark  { border-color:rgba(110,72,38,0.50);   background:rgba(140,95,52,0.10); }
body.login-page .cv-fatliq{ border-color:rgba(195,165,90,0.45);  background:rgba(220,190,130,0.10); }
body.login-page .chem-fill { position:absolute; bottom:0; left:0; right:0; border-radius:0 0 6px 6px; animation:lp-vat 2.5s ease-in-out infinite alternate; }
body.login-page .cv-salt  .chem-fill { height:70%; background:rgba(180,175,165,0.90); }
body.login-page .cv-water .chem-fill { height:78%; background:rgba(60,130,190,0.70);  animation-delay:0.4s; }
body.login-page .cv-lime  .chem-fill { height:62%; background:rgba(185,180,160,0.90); animation-delay:0.8s; }
body.login-page .cv-bark  .chem-fill { height:68%; background:rgba(90,52,18,0.80);    animation-delay:1.2s; }
body.login-page .cv-fatliq .chem-fill { height:58%; background:rgba(185,148,65,0.85); animation-delay:1.6s; }

/* Fin vats */
body.login-page .fin-vats { display:flex; gap:7px; }
body.login-page .fin-vat { width:34px; height:26px; border:2px solid; border-top:none; border-radius:0 0 6px 6px; position:relative; overflow:hidden; }
body.login-page .fv-red { border-color:rgba(180,60,60,0.35); background:rgba(180,60,60,0.06); }
body.login-page .fv-blk { border-color:rgba(30,20,15,0.28);  background:rgba(30,20,15,0.06); }
body.login-page .fv-fat { border-color:rgba(195,165,95,0.40); background:rgba(195,165,95,0.08); }
body.login-page .fv-grn { border-color:rgba(60,140,90,0.35);  background:rgba(60,140,90,0.06); }
body.login-page .fv-fill { position:absolute; bottom:0; left:0; right:0; border-radius:0 0 4px 4px; animation:lp-vat 3s ease-in-out infinite alternate; }
body.login-page .fv-red .fv-fill { height:62%; background:rgba(200,70,70,0.45); }
body.login-page .fv-blk .fv-fill { height:78%; background:rgba(40,25,18,0.55); animation-delay:0.5s; }
body.login-page .fv-fat .fv-fill { height:55%; background:rgba(215,185,110,0.55); animation-delay:1s; }
body.login-page .fv-grn .fv-fill { height:68%; background:rgba(60,150,90,0.40); animation-delay:1.5s; }

/* Bubbles */
body.login-page .bubbles { position:absolute; inset:0; pointer-events:none; }
body.login-page .bbl { position:absolute; border-radius:50%; background:rgba(107,155,192,0.18); border:1px solid rgba(107,155,192,0.28); animation:lp-bbl linear infinite; opacity:0; }
body.login-page .b1{width:7px;height:7px;left:46%;bottom:34%;animation-duration:3.2s;animation-delay:0s;}
body.login-page .b2{width:5px;height:5px;left:50%;bottom:32%;animation-duration:2.6s;animation-delay:0.8s;}
body.login-page .b3{width:9px;height:9px;left:48%;bottom:35%;animation-duration:3.8s;animation-delay:1.4s;}
body.login-page .b4{width:5px;height:5px;left:53%;bottom:33%;animation-duration:2.9s;animation-delay:2.0s;}
body.login-page .b5{width:6px;height:6px;left:43%;bottom:32%;animation-duration:3.5s;animation-delay:0.4s;}

/* Animal legend */
body.login-page .skin-types { display:flex; gap:18px; align-items:center; }
body.login-page .skin-type  { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:500; color:rgba(15,20,25,0.38); }
body.login-page .skin-dot   { width:20px; height:15px; }
body.login-page .sd-bovine  { clip-path:polygon(35% 0%,65% 0%,80% 5%,100% 20%,100% 50%,90% 65%,100% 82%,85% 100%,65% 90%,55% 100%,45% 100%,35% 90%,15% 100%,0% 82%,10% 65%,0% 50%,0% 20%,20% 5%); background:#C49068; }
body.login-page .sd-caprine { clip-path:polygon(30% 0%,70% 0%,92% 15%,100% 42%,94% 66%,100% 86%,80% 100%,60% 88%,50% 100%,40% 88%,20% 100%,0% 86%,6% 66%,0% 42%,8% 15%); background:#9B7A52; }
body.login-page .sd-ovine   { border-radius:48% 52% 50% 50%/42% 42% 58% 58%; background:#BFA882; }
body.login-page .scene-label { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:rgba(15,20,25,0.22); }

/* Beam horse */
body.login-page .beam-horse { width:130px; display:flex; flex-direction:column; align-items:center; }
body.login-page .beam-rail { width:100%; height:5px; background:rgba(15,20,25,0.18); border-radius:3px; position:relative; }
body.login-page .beam-rail::before,body.login-page .beam-rail::after { content:''; position:absolute; top:5px; width:2px; height:10px; background:rgba(15,20,25,0.14); border-radius:1px; }
body.login-page .beam-rail::before { left:18%; } body.login-page .beam-rail::after { right:18%; }
body.login-page .beam-hides { display:flex; gap:10px; margin-top:12px; }
body.login-page .hanging-skin { animation:lp-sway 4s ease-in-out infinite; transform-origin:top center; }
body.login-page .hanging-skin:nth-child(2) { animation-delay:0.7s; animation-direction:reverse; }
body.login-page .hanging-skin:nth-child(3) { animation-delay:1.4s; }

/* Process flow */
body.login-page .process-flow { display:flex; align-items:center; gap:6px; }
body.login-page .proc-pill { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:3px 10px; border-radius:99px; border:1px solid rgba(15,20,25,0.12); color:rgba(15,20,25,0.38); background:rgba(15,20,25,0.04); }
body.login-page .proc-pill.active { background:rgba(94,106,210,0.12); border-color:rgba(94,106,210,0.30); color:#5E6AD2; font-weight:700; }
body.login-page .proc-arrow { font-size:11px; color:rgba(15,20,25,0.20); }

/* ── Login panel (right 40%) ── */
body.login-page .login-panel { flex:0 0 40%; background:var(--bg-elevated); display:flex; align-items:center; justify-content:center; padding:var(--s-6); }
body.login-page .login-form-wrap { width:100%; max-width:360px; }
body.login-page .login-title { font-size:var(--fs-xl); font-weight:var(--fw-semibold); color:var(--text-primary); margin-bottom:var(--s-1); }
body.login-page .login-subtitle { font-size:var(--fs-base); color:var(--text-secondary); margin-bottom:var(--s-6); }
body.login-page .login-error { display:flex; align-items:flex-start; gap:var(--s-2); padding:var(--s-3); background:var(--danger-bg); border:1px solid var(--danger-border); border-radius:var(--r-md); color:var(--danger); font-size:var(--fs-sm); margin-bottom:var(--s-4); }
body.login-page .login-error svg { flex-shrink:0; margin-top:1px; }
body.login-page .field { display:flex; flex-direction:column; gap:var(--s-1); margin-bottom:var(--s-4); }
body.login-page .field-label { font-size:var(--fs-xs); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:0.04em; color:var(--text-tertiary); }
body.login-page .field-password { position:relative; }
body.login-page .field-password .tms-input { padding-right:40px; }
body.login-page .tms-input { height:var(--h-input); padding:0 var(--s-3); background:var(--bg-elevated); border:1px solid var(--border-default); border-radius:var(--r-sm); font-family:var(--font-ui); font-size:var(--fs-base); color:var(--text-primary); width:100%; transition:border-color 120ms ease-out,box-shadow 120ms ease-out; }
body.login-page .tms-input::placeholder { color:var(--text-tertiary); }
body.login-page .tms-input:hover  { border-color:var(--border-strong); }
body.login-page .tms-input:focus  { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-muted); }
body.login-page .btn-login { width:100%; height:var(--h-button); background:var(--accent); color:var(--text-inverse); border:none; border-radius:var(--r-sm); font-family:var(--font-ui); font-size:var(--fs-base); font-weight:var(--fw-medium); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); transition:background 120ms ease-out; }
body.login-page .btn-login:hover   { background:var(--accent-hover); }
body.login-page .btn-login:active  { background:var(--accent-active); }
body.login-page .btn-login:focus-visible { outline:none; box-shadow:var(--focus-ring); }
body.login-page .btn-login:disabled { opacity:0.6; cursor:not-allowed; }
body.login-page .btn-login .spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:lp-spin 600ms linear infinite; }
body.login-page .btn-login.is-loading .spinner { display:block; }
body.login-page .btn-login.is-loading .btn-label { display:none; }
body.login-page .login-forgot { display:block; text-align:center; margin-top:var(--s-3); font-size:var(--fs-sm); color:var(--text-tertiary); text-decoration:none; }
body.login-page .login-forgot:hover { color:var(--text-secondary); }

/* Password eye */
body.login-page .pwd-toggle { position:absolute; right:0; top:0; width:36px; height:var(--h-input); display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--text-tertiary); transition:color 120ms; }
body.login-page .pwd-toggle:hover { color:var(--text-secondary); }
body.login-page .pwd-toggle .eye-off { display:none; }
body.login-page .pwd-toggle.is-visible .eye-on  { display:none; }
body.login-page .pwd-toggle.is-visible .eye-off { display:block; }

/* Modal */
body.login-page .modal-backdrop { display:none; position:fixed; inset:0; background:rgba(15,20,25,0.32); backdrop-filter:blur(2px); z-index:100; align-items:center; justify-content:center; }
body.login-page .modal-backdrop.is-open { display:flex; }
body.login-page .modal { background:var(--bg-overlay); border:1px solid var(--border-default); border-radius:8px; box-shadow:0 12px 32px rgba(15,20,25,0.08),0 0 0 1px rgba(15,20,25,0.08); width:100%; max-width:400px; padding:var(--s-6); margin:var(--s-4); }
body.login-page .modal-title { font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-primary); margin-bottom:var(--s-1); }
body.login-page .modal-desc { font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:var(--s-5); line-height:1.5; }
body.login-page .modal-actions { display:flex; gap:var(--s-2); margin-top:var(--s-5); }
body.login-page .btn-secondary { flex:1; height:var(--h-button); background:var(--bg-elevated); color:var(--text-primary); border:1px solid var(--border-default); border-radius:var(--r-sm); font-family:var(--font-ui); font-size:var(--fs-base); font-weight:var(--fw-medium); cursor:pointer; transition:background 120ms,border-color 120ms; }
body.login-page .btn-secondary:hover { background:var(--bg-hover); border-color:var(--border-strong); }
body.login-page .modal-success { display:flex; align-items:flex-start; gap:var(--s-2); padding:var(--s-3); background:rgba(31,122,77,0.10); border:1px solid rgba(31,122,77,0.28); border-radius:var(--r-md); color:#1F7A4D; font-size:var(--fs-sm); }
body.login-page .modal-err { font-size:var(--fs-xs); color:var(--danger); margin-top:var(--s-1); }

/* Footer */
body.login-page .login-footer { position:fixed; bottom:0; left:0; right:0; height:36px; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); color:var(--text-tertiary); border-top:1px solid var(--border-subtle); background:var(--bg-base); gap:4px; }
body.login-page .login-footer a { color:var(--text-tertiary); text-decoration:none; }
body.login-page .login-footer a:hover { color:var(--text-secondary); }
body.login-page .login-footer .sep { margin:0 6px; opacity:0.4; }

/* ── Keyframes (prefixed lp- to avoid global conflicts) ── */
@keyframes lp-spin  { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes lp-wave  { 0%,100%{transform:translateX(0);} 50%{transform:translateX(30px);} }
@keyframes lp-slosh { 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }
@keyframes lp-float { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(5px) rotate(3deg);} }
@keyframes lp-sway  { 0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);} }
@keyframes lp-wisp  { 0%{opacity:0;transform:translateY(0) scaleX(1);} 30%{opacity:0.55;} 70%{opacity:0.22;transform:translateY(-16px) scaleX(1.5);} 100%{opacity:0;transform:translateY(-30px) scaleX(0.8);} }
@keyframes lp-bbl   { 0%{opacity:0;transform:translateY(0) scale(1);} 15%{opacity:0.75;} 80%{opacity:0.22;transform:translateY(-55px) scale(1.25);} 100%{opacity:0;transform:translateY(-72px) scale(0.8);} }
@keyframes lp-vat   { 0%{transform:scaleY(0.88);} 100%{transform:scaleY(1.00);} }
@keyframes lp-feed  { 0%{transform:scaleX(0.94);} 100%{transform:scaleX(1.06);} }

/* ── Responsive ── */
@media (max-width:640px) {
  body.login-page { flex-direction:column; }
  body.login-page .login-brand { flex:0 0 60px; border-right:none; border-bottom:1px solid var(--border-subtle); }
  body.login-page .login-panel { flex:1; }
}
@media (prefers-reduced-motion:reduce) {
  body.login-page .drum-inner,body.login-page .wave,body.login-page .wisp,body.login-page .bbl,
  body.login-page .chem-fill,body.login-page .fv-fill,body.login-page .lime-fill,body.login-page .water-fill,
  body.login-page .dry-skin,body.login-page .sv1,body.login-page .sv2,body.login-page .hide-through,
  body.login-page .hide-layer,body.login-page .substeps,body.login-page .stab,
  body.login-page .tms-input,body.login-page .btn-login { animation:none; transition:none; }
}