/* System DPE. Card and sliding highlight adapted from Uiverse.io by Novaxlo. */
.login-view{--dpe-green:#557340;--dpe-ink:#314d26;--dpe-paper:#f7f8f1;min-height:100svh;padding:36px clamp(24px,4.2vw,80px) 28px;background:#101e18;color:#f0f1e8;font-family:Arial,sans-serif;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}
.login-view::before{content:'';position:absolute;inset:18% 39% 0 0;background:linear-gradient(161deg,transparent 0 33%,#182b21 33% 45%,#20382a 45% 70%,#182b21 70%);z-index:-2}
.login-view::after{content:'';position:absolute;inset:0 0 0 61%;background:#12221b;z-index:-2}
.dpe-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #293b2f;padding-bottom:24px;gap:20px}
.dpe-brand{display:flex;gap:24px;align-items:center;text-decoration:none}.dpe-brand img{width:100px;height:auto;image-rendering:pixelated}.dpe-brand b{display:block;font-size:28px;letter-spacing:2px}.dpe-brand small{display:block;font-size:11px;letter-spacing:3px;color:#a5b5a8;margin-top:6px}.dpe-portal{font-size:11px;letter-spacing:2px;color:#9bad9f}
.dpe-login-layout{width:100%;max-width:1760px;margin:auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:clamp(40px,7vw,130px);align-items:center;padding:40px 0}
.dpe-command{position:relative;min-width:0;background-image:linear-gradient(#a6bc9909 1px,transparent 1px),linear-gradient(90deg,#a6bc9909 1px,transparent 1px);background-size:40px 40px;padding:0 20px}
.dpe-eyebrow{font-weight:700;font-size:12px;letter-spacing:3px;color:#c6af76;margin:0 0 20px}.dpe-command h1{font:700 clamp(36px,3.5vw,66px)/1.05 Arial,sans-serif;letter-spacing:-1.5px;margin:0}.dpe-motto{font-size:20px;color:#bdc9bd;margin:24px 0 0}
.dpe-supremos{display:flex;align-items:end;justify-content:center;max-width:780px;margin:0 auto;position:relative}.dpe-supremos figure{position:relative;width:33.333%;margin:0;display:flex;justify-content:center;align-items:end}.dpe-supremos img{display:block;width:100%;height:auto;image-rendering:pixelated;position:relative;z-index:1}.dpe-podium{position:absolute;bottom:1%;left:13%;right:13%;height:30px;background:#09160e;clip-path:polygon(0 25%,50% 0,100% 25%,100% 65%,50% 100%,0 65%);border-top:1px solid #627a4c}
.dpe-supremacy{display:flex;align-items:center;gap:28px;max-width:590px;margin:24px auto 0;color:#d0b77b;font-weight:700;font-size:13px;letter-spacing:2px;white-space:nowrap}.dpe-supremacy::before,.dpe-supremacy::after{content:'';height:1px;background:#685d3e;flex:1}
.dpe-access{width:100%;max-width:540px;justify-self:center;padding-left:12px}
.dpe-form{position:relative;isolation:isolate;overflow:hidden;background:var(--dpe-paper);border:2px solid var(--dpe-green);border-radius:0 38px 0 38px;box-shadow:-12px 0 #07130d,-12px 8px 0 #07130d;color:var(--dpe-ink);transition:transform .25s ease;--band-y:0px;--band-height:94px}
.dpe-form>div:not(#background-color):not(#whitefilter),.dpe-form>p{position:relative;z-index:2}
.dpe-login-heading{height:94px;display:grid;place-items:center}.dpe-login-heading h2{font:700 32px Arial,sans-serif;letter-spacing:2px;margin:0;color:var(--dpe-ink);transition:color .25s}.dpe-form:not([data-active-area]) .dpe-login-heading h2{color:#fff}
.dpe-welcome{padding:24px 9% 10px}.dpe-welcome h3{font:700 26px Arial,sans-serif;margin:0 0 6px}.dpe-welcome p{font-size:15px;color:#64785b;margin:0}
.dpe-form-area{padding:16px 9%;transition:padding .25s ease,color .25s ease}.dpe-form-area>label{display:block;font-size:13px;font-weight:700;margin-bottom:9px}.dpe-form-area input:not([type=checkbox]){width:100%;height:54px;border:2px solid var(--dpe-green);border-radius:9px;background:#fff;color:var(--dpe-ink);padding:0 16px;font:600 14px Arial,sans-serif;outline:none;box-shadow:0 5px 5px -3px #0002;transition:background-color .25s,border-color .25s,color .25s}.dpe-form-area input::placeholder{color:var(--dpe-green);opacity:1;font-size:12px;font-weight:700}
.dpe-password{position:relative}.dpe-password input{padding-right:48px!important}.dpe-password button{position:absolute;right:4px;top:5px;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:var(--dpe-green)}
.dpe-options{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;font-size:12px}.dpe-options label{display:flex;gap:8px;align-items:center}.dpe-options input{accent-color:var(--dpe-green);width:16px;height:16px;margin:0}.dpe-options button,.dpe-signup button{border:0;background:transparent;color:var(--dpe-green);font-size:inherit;font-weight:700;padding:8px 0}
.dpe-submit{width:100%;min-height:56px;border:2px solid var(--dpe-green);border-radius:9px;background:var(--dpe-green);color:#fff;font-weight:700;box-shadow:0 6px #dce2d4;transition:transform .2s,background-color .25s,border-color .25s}.dpe-submit:active{transform:scale(.96)}.dpe-submit:disabled{cursor:wait;opacity:.7}.dpe-signup{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;margin:20px 0 0}
.dpe-form #loginMsg{margin:0 9%;min-height:20px;font-size:13px;color:#9d2525}.dpe-security{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 9% 26px;padding-top:20px;border-top:1px solid #d8dfd0;font-size:11px;color:#64785b}.dpe-security svg{flex-shrink:0}
.dpe-form #background-color{position:absolute;top:0;left:0;width:100%;height:var(--band-height);transform:translateY(var(--band-y));background:var(--dpe-green);box-shadow:inset 6px 0 #293f20;z-index:1;pointer-events:none;transition:height .45s ease,transform .45s ease}
.dpe-form #whitefilter{position:absolute;top:2px;right:2px;width:44px;height:44px;border-top-right-radius:34px;box-shadow:30px -30px 0 -1px var(--dpe-paper);z-index:3;pointer-events:none}
.dpe-form-area.is-active{padding-left:5%;padding-right:5%;color:#fff}.dpe-form-area.is-active input:not([type=checkbox]){background:var(--dpe-green);color:#fff;border-color:#fff}.dpe-form-area.is-active input::placeholder{color:#fff}.dpe-form-area.is-active button{color:#fff}.dpe-form-area.is-active .dpe-submit{border-color:#fff;box-shadow:0 5px 5px -3px #0003}.dpe-form-area.is-active .dpe-submit:active{background:#fff;color:var(--dpe-green)}
.dpe-form :is(input,button):focus-visible{outline:3px solid #bda157;outline-offset:3px}.dpe-footer{display:flex;gap:36px;align-items:center;color:#c5d1bb;font-size:14px}.dpe-footer>b{font-size:11px;letter-spacing:2px;color:#9aae9b}.dpe-footer p{margin:0}.dpe-footer small{margin-left:auto;font-size:10px;color:#82917e}
.form-msg{font-size:12px;min-height:16px;color:var(--danger)}
.modal-card:has(.dpe-recovery){background:#f7f8f1;border:2px solid #557340;border-radius:0 28px 0 28px;color:#314d26}
.dpe-recovery .modal-head{background:#557340;color:#fff;align-items:center}.dpe-recovery .modal-head small{font-size:10px;letter-spacing:2px}.dpe-recovery h2{margin:8px 0 0;font-size:23px}.dpe-recovery .icon-btn{color:#fff;background:transparent}
.dpe-recovery .modal-body{padding:24px}.dpe-recovery p{font-size:14px;line-height:1.6}.dpe-recovery .field{margin:16px 0}.dpe-recovery label{display:block;margin-bottom:8px;font-weight:700}.dpe-recovery .input{background:#fff;color:#314d26;border:1px solid #557340;width:100%;min-height:46px}.dpe-recovery .field small,.dpe-recovery .recovery-note{color:#526747;font-size:12px}.dpe-recovery .btn{background:#557340;color:#fff;border:1px solid #557340;min-height:44px}.dpe-recovery .btn.ghost{background:transparent;color:#314d26;margin-top:12px}.dpe-recovery .btn:disabled{opacity:.6;cursor:wait}.dpe-recovery [hidden]{display:none!important}.dpe-recovery .form-msg{color:#9d2525}.dpe-recovery :is(button,input):focus-visible{outline:3px solid #bda157;outline-offset:3px}
.recovery-code-row{display:flex;gap:12px;align-items:center;background:#e7eddf;border:1px dashed #557340;padding:14px;border-radius:8px;flex-wrap:wrap}.recovery-code-row code{font-size:15px;font-weight:700;overflow-wrap:anywhere;flex:1;min-width:0;user-select:all}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.dpe-form:hover{transform:scale(1.012)}}
@media(min-width:1600px){.dpe-login-layout{grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)}.dpe-command{padding:0 32px}.dpe-form-area{padding-top:22px;padding-bottom:22px}}
@media(max-width:1000px){.dpe-login-layout{gap:28px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}.dpe-command{padding:0}.dpe-command h1{font-size:36px}.dpe-motto{font-size:16px}.dpe-brand b{font-size:22px}.dpe-footer{gap:18px;flex-wrap:wrap}.dpe-footer small{margin-left:0}}
@media(max-width:760px){.login-view{padding:20px 22px 24px}.dpe-header{padding-bottom:18px}.dpe-brand{gap:12px}.dpe-brand img{width:64px}.dpe-brand b{font-size:20px}.dpe-brand small{font-size:9px;letter-spacing:2px}.dpe-portal{display:none}.dpe-login-layout{grid-template-columns:1fr;gap:34px;padding:32px 0}.dpe-command{text-align:center}.dpe-command h1{font-size:clamp(32px,7vw,48px)}.dpe-eyebrow{font-size:10px;margin-bottom:14px}.dpe-motto{margin-top:16px}.dpe-supremos{max-width:390px}.dpe-supremacy{max-width:330px;margin-top:14px;font-size:11px}.dpe-access{max-width:480px}.login-view::after{display:none}.login-view::before{right:0}.dpe-footer{justify-content:center;text-align:center;gap:10px}.dpe-footer p{width:100%;font-size:12px}.dpe-footer small{width:100%}.dpe-options{font-size:11px}.dpe-security{font-size:10px}.dpe-welcome h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.login-view *,.login-view *::before,.login-view *::after{transition:none!important;animation:none!important}}
