:root {
  --matrix-green: #38ff8b;
  --matrix-green-soft: #1bd96d;
  --matrix-bg: #020705;
  --matrix-panel: rgba(5, 17, 12, .88);
  --matrix-border: rgba(56, 255, 139, .2);
  --matrix-muted: #91a79c;
}
* { box-sizing: border-box; }
body.matrix-login {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #ecfff4;
  background: radial-gradient(circle at 72% 40%, #0b2719 0, #031009 36%, var(--matrix-bg) 72%);
  font-family: "Segoe UI", Arial, sans-serif;
}
#matrixRain, .matrix-grid { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#matrixRain { z-index: 0; opacity: .32; }
.matrix-grid {
  z-index: 1;
  opacity: .16;
  background-image: linear-gradient(rgba(56,255,139,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(56,255,139,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to right, #000, transparent 55%);
}
.matrix-login-page { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(360px, 42%) 1fr; min-height: 100vh; }
.matrix-brand-panel { display: flex; align-items: center; padding: 64px clamp(38px, 6vw, 105px); border-right: 1px solid rgba(56,255,139,.12); background: linear-gradient(90deg, rgba(0,5,3,.9), rgba(1,12,7,.64)); }
.matrix-brand-content { width: 100%; max-width: 520px; }
.matrix-system-mark { position: relative; width: 76px; height: 76px; margin-bottom: 35px; }
.matrix-mark-core { position: relative; z-index: 2; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid var(--matrix-green); border-radius: 18px; color: var(--matrix-green); background: rgba(7,29,18,.88); box-shadow: 0 0 28px rgba(56,255,139,.18), inset 0 0 18px rgba(56,255,139,.08); font-size: 28px; }
.matrix-pulse { position: absolute; inset: -9px; border: 1px solid rgba(56,255,139,.35); border-radius: 24px; animation: matrixPulse 2.4s infinite; }
.matrix-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; color: var(--matrix-green); font: 600 12px/1.4 Consolas, monospace; letter-spacing: .18em; }
.matrix-kicker span { width: 30px; height: 1px; background: var(--matrix-green); box-shadow: 0 0 8px var(--matrix-green); }
.matrix-brand-panel h1 { margin: 0 0 18px; color: #f5fff9; font-size: clamp(38px, 4vw, 62px); font-weight: 700; letter-spacing: -.035em; text-shadow: 0 0 25px rgba(56,255,139,.14); }
.matrix-brand-copy { max-width: 480px; color: #a5b9ae; font-size: 17px; line-height: 1.7; }
.matrix-company-logo { display: flex; align-items: center; min-height: 90px; margin: 35px 0; color: var(--matrix-green); font-size: 46px; }
.matrix-company-logo img { display: block; max-width: 190px; max-height: 95px; border-radius: 12px; filter: drop-shadow(0 0 16px rgba(56,255,139,.2)); object-fit: contain; }
.matrix-system-status { display: flex; flex-wrap: wrap; gap: 22px; padding-top: 22px; border-top: 1px solid rgba(56,255,139,.13); color: #7f968a; font: 12px Consolas, monospace; text-transform: uppercase; letter-spacing: .06em; }
.matrix-system-status span:first-child { color: #a7eec3; }.matrix-system-status .fa-circle { margin-right: 7px; color: var(--matrix-green); font-size: 7px; animation: statusBlink 1.8s infinite; }
.matrix-access-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px; }
.matrix-login-card { width: min(100%, 525px); padding: 38px; border: 1px solid var(--matrix-border) !important; border-radius: 18px !important; color: #effff5 !important; background: linear-gradient(145deg, rgba(7,22,14,.95), rgba(3,12,8,.9)) !important; box-shadow: 0 28px 75px rgba(0,0,0,.55), 0 0 0 1px rgba(56,255,139,.04), inset 0 1px rgba(255,255,255,.04) !important; backdrop-filter: blur(18px); }
.matrix-card-header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 31px; }
.matrix-terminal-label { display: block; margin-bottom: 9px; color: var(--matrix-green); font: 600 11px Consolas, monospace; letter-spacing: .16em; }
.matrix-card-header h2 { margin: 0 0 7px; color: #f1fff6; font-size: 27px; font-weight: 700; }.matrix-card-header p { margin: 0; color: var(--matrix-muted); }
.matrix-security-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border: 1px solid rgba(56,255,139,.2); border-radius: 11px; color: var(--matrix-green); background: rgba(56,255,139,.06); }
.matrix-form-group { margin-bottom: 21px; }.matrix-form-group label { margin-bottom: 8px; color: #c9dbd1; font-size: 13px; font-weight: 600; }
.matrix-label-row { display: flex; justify-content: space-between; gap: 15px; }.matrix-label-row a { color: #69e99d; font-size: 12px; }.matrix-label-row a:hover { color: #a0ffc4; text-decoration: none; }
.matrix-input { display: flex; align-items: center; height: 54px; border: 1px solid rgba(133,172,149,.25); border-radius: 10px; background: rgba(1,8,5,.72); transition: .2s ease; }
.matrix-input:focus-within { border-color: var(--matrix-green); box-shadow: 0 0 0 3px rgba(56,255,139,.1), 0 0 22px rgba(56,255,139,.08); }
.matrix-input > i { width: 49px; color: #5ccf8a; text-align: center; }
.matrix-input input[type="text"], .matrix-input input[type="password"] { width: 100%; height: 100%; padding: 0 12px 0 0; border: 0; outline: 0; color: #eafff2; background: transparent; font-size: 14px; }
.matrix-input input::placeholder { color: #597064; }
.matrix-password-toggle { display: grid; place-items: center; width: 50px; height: 100%; margin: 0 !important; cursor: pointer; color: #78a58b !important; }.matrix-password-toggle input { position: absolute; opacity: 0; }.matrix-password-toggle:hover { color: var(--matrix-green) !important; }
.matrix-captcha-wrap { display:flex; justify-content:center; min-height:78px; margin:4px 0 18px; padding:10px; overflow:hidden; border:1px solid rgba(56,255,139,.12); border-radius:10px; background:rgba(0,0,0,.22); }
.matrix-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 55px; margin-top: 8px; padding: 0 20px; border: 1px solid #43ff91; border-radius: 10px; color: #001b0c; background: linear-gradient(90deg, #28df75, #61ff9e); box-shadow: 0 12px 28px rgba(38,225,116,.18); font-weight: 700; cursor: pointer; transition: .2s ease; }
.matrix-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 35px rgba(38,225,116,.27); }.matrix-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.matrix-card-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(56,255,139,.12); color: #70877b; font-size: 12px; }.matrix-card-footer a { color: #7ee9a8; }
.matrix-access-note { margin: 20px 0 0; color: #50675b; font: 11px Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
@keyframes matrixPulse { 0%,100% { transform: scale(.94); opacity:.2 } 50% { transform:scale(1.08); opacity:.65 } }
@keyframes statusBlink { 0%,100% { opacity:.35 } 50% { opacity:1; text-shadow:0 0 8px var(--matrix-green) } }
@media (max-width: 991px) { .matrix-login-page { grid-template-columns: 1fr; }.matrix-brand-panel { display:none }.matrix-access-panel { min-height:100vh; } }
@media (max-width: 575px) { .matrix-access-panel { padding: 18px; }.matrix-login-card { padding: 27px 22px; }.matrix-card-footer { flex-direction:column; }.matrix-card-header h2 { font-size:24px; } }
@media (max-width: 390px) { .matrix-captcha-wrap { justify-content:flex-start; }.matrix-captcha-wrap .g-recaptcha { transform:scale(.88); transform-origin:left center; width:268px; } }
@media (prefers-reduced-motion: reduce) { .matrix-pulse, .matrix-system-status .fa-circle { animation:none; } }