:root{
 --bg:#030914; --panel:#0a1422; --text:#f7f7fa; --muted:#acb7c6;
 --pink:#ff1f5d; --pink2:#ff4e70; --gold:#ffb016; --blue:#4f91ff;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body.pure-auth{
 margin:0;min-height:100vh;overflow-x:hidden;
 font-family:"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif;
 color:var(--text);
 background:
  radial-gradient(circle at 79% 12%,rgba(135,31,93,.12),transparent 28%),
  linear-gradient(145deg,#020711,#050b15 58%,#030713);
}
.pure-shell{
 width:min(1660px,calc(100vw - 16px));
 min-height:calc(100vh - 16px);
 margin:8px auto;
 display:grid;grid-template-columns:61% 39%;
 border-radius:28px;overflow:hidden;
 background:#030914;
 box-shadow:0 28px 90px rgba(0,0,0,.44);
}
.pure-hero{
 position:relative;isolation:isolate;overflow:hidden;
 min-height:calc(100vh - 16px);
 padding:38px 55px 30px;
 background:
  radial-gradient(circle at 70% 38%,rgba(255,28,94,.12),transparent 23%),
  linear-gradient(135deg,#030914,#07101c 72%,#040a14);
}
.pure-glow{
 position:absolute;right:5%;top:24%;width:45%;height:42%;
 background:radial-gradient(circle,rgba(255,25,92,.15),transparent 66%);
 filter:blur(20px);z-index:-1;
}
.pure-orbit{position:absolute;border:1px solid rgba(255,31,93,.32);border-radius:50%;z-index:0}
.pure-orbit.o1{width:390px;height:390px;right:9%;top:8%}
.pure-orbit.o2{width:300px;height:300px;right:13.5%;top:13%}
.pure-grid-dots{
 position:absolute;right:13%;top:5%;width:115px;height:85px;opacity:.35;
 background-image:radial-gradient(circle,#ff336c 1.4px,transparent 1.5px);
 background-size:17px 17px;
}
.pure-brand{display:flex;gap:14px;align-items:center;position:relative;z-index:8}
.pure-logo{
 width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
 background:linear-gradient(145deg,#ff345f,#ef0c4e);font-size:25px;font-weight:900;
 box-shadow:0 0 27px rgba(255,30,88,.28)
}
.pure-brand strong{display:block;font-size:27px;line-height:1;font-weight:850;letter-spacing:-.035em}
.pure-brand span{display:block;margin-top:7px;color:#c4ccd8;font-size:11px;font-weight:700;letter-spacing:.17em}
.pure-badge{
 display:inline-flex;align-items:center;margin-top:48px;padding:9px 16px;border-radius:999px;
 border:1px solid rgba(255,31,93,.34);color:#ff3d6f;background:rgba(255,31,93,.035);
 font-size:13px;font-weight:750;position:relative;z-index:7
}
.pure-copy{margin-top:20px;max-width:515px;position:relative;z-index:7}
.pure-copy h1{
 margin:0;font-size:clamp(50px,4.4vw,70px);line-height:1.03;
 letter-spacing:-.052em;font-weight:850
}
.pure-copy h1 em{font-style:normal;color:var(--pink)}
.pure-line{width:75px;height:4px;border-radius:8px;background:var(--pink);margin:26px 0 23px}
.pure-copy p{margin:0;max-width:420px;color:#c7d0dc;font-size:17px;line-height:1.65}

/* Real CSS-built laptop */
.pure-laptop{
 position:absolute;z-index:4;right:2.8%;top:19%;width:52%;height:49%;
 transform:perspective(1000px) rotateY(-5deg) rotateX(2deg);
 transform-origin:center;
 filter:drop-shadow(0 25px 34px rgba(0,0,0,.42));
}
.pure-screen{
 position:absolute;left:7%;right:3%;top:0;height:70%;
 border:5px solid #171e2a;border-bottom-width:9px;border-radius:20px;
 background:#09121f;overflow:hidden;
 box-shadow:0 0 28px rgba(255,34,91,.12)
}
.pure-screen-top{
 height:28px;display:flex;align-items:center;gap:9px;padding:0 9px;background:#101a29;
 border-bottom:1px solid rgba(255,255,255,.04)
}
.mini-brand{font-size:7px;font-weight:800;color:#e9eef5;display:flex;align-items:center;gap:4px}
.mini-brand span{width:12px;height:12px;border-radius:3px;display:grid;place-items:center;background:#ff1f5d;font-size:6px}
.mini-search{margin-left:auto;width:35%;height:12px;border-radius:5px;background:#0b1421;border:1px solid rgba(255,255,255,.05)}
.mini-dot{width:7px;height:7px;border-radius:50%;background:#ff1f5d}
.pure-dashboard{display:grid;grid-template-columns:24% 76%;height:calc(100% - 28px)}
.dash-sidebar{padding:10px 7px;background:#0c1522;border-right:1px solid rgba(255,255,255,.045)}
.dash-nav{
 color:#77869a;font-size:7px;padding:6px 7px;border-radius:5px;margin-bottom:3px;
 white-space:nowrap
}
.dash-nav.active{background:linear-gradient(90deg,rgba(255,31,93,.25),rgba(255,31,93,.06));color:#fff}
.dash-main{padding:10px 9px;background:linear-gradient(160deg,#0d1725,#08111d)}
.dash-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dash-card{
 min-height:56px;border:1px solid rgba(255,255,255,.04);border-radius:7px;
 background:#111c2b;padding:8px
}
.dash-card small,.dash-chart small,.dash-tickets small{display:block;color:#a6b2c0;font-size:6px}
.dash-card b{display:block;margin-top:5px;font-size:16px}
.dash-card span{display:block;margin-top:3px;color:#25c679;font-size:5px}
.dash-chart{
 margin-top:7px;height:91px;border-radius:8px;background:#101a29;
 border:1px solid rgba(255,255,255,.04);padding:8px;overflow:hidden
}
.dash-chart svg{width:100%;height:70px;margin-top:2px}
.dash-tickets{
 margin-top:7px;border-radius:7px;background:#101a29;border:1px solid rgba(255,255,255,.04);
 padding:7px
}
.dash-tickets>div{display:flex;justify-content:space-between;margin-top:4px;color:#a8b4c2;font-size:5px}
.dash-tickets i{font-style:normal;font-size:5px}
.dash-tickets .open{color:#ff436e}.dash-tickets .progress{color:#ffb016}.dash-tickets .resolved{color:#24c879}
.pure-keyboard{
 position:absolute;left:2%;right:0;top:68%;height:20%;
 background:linear-gradient(180deg,#252b37,#171d27);
 border-radius:0 0 18px 18px;transform:skewX(-12deg);
 box-shadow:0 13px 25px rgba(0,0,0,.32)
}
.pure-keyboard:before{
 content:"";position:absolute;left:8%;right:8%;top:15%;bottom:20%;
 border-radius:6px;background:
 repeating-linear-gradient(90deg,#343b48 0 13px,#1e2530 14px 16px),
 repeating-linear-gradient(0deg,transparent 0 10px,rgba(0,0,0,.28) 11px 12px);
 opacity:.72
}
.pure-keyboard:after{
 content:"";position:absolute;left:42%;right:35%;bottom:6%;height:29%;border-radius:5px;
 border:1px solid rgba(255,255,255,.07)
}
.pure-base{
 position:absolute;left:-5%;right:-6%;top:85%;height:4%;border-radius:0 0 70% 70%;
 background:linear-gradient(180deg,#555d68,#1b212a);box-shadow:0 7px 10px rgba(0,0,0,.3)
}

.pure-features{
 position:absolute;z-index:8;left:55px;bottom:195px;width:59%;
 display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.pure-feature+.pure-feature{border-left:1px solid rgba(148,163,184,.16);padding-left:22px}
.pf-icon{
 width:55px;height:55px;border-radius:16px;display:grid;place-items:center;color:#ff2e64;
 border:1px solid rgba(255,57,107,.2);background:linear-gradient(145deg,rgba(255,31,93,.08),rgba(255,255,255,.02))
}
.pf-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.pure-feature strong{display:block;margin-top:11px;font-size:16px}
.pure-feature span{display:block;margin-top:6px;color:#aeb9c7;font-size:13px;line-height:1.5}

.pure-stats{
 position:absolute;z-index:8;left:55px;bottom:72px;width:68%;
 display:grid;grid-template-columns:repeat(3,1fr);
 border:1px solid rgba(255,46,103,.30);border-radius:18px;overflow:hidden;
 background:linear-gradient(130deg,rgba(255,39,96,.045),rgba(255,255,255,.015))
}
.pure-stats>div{padding:19px 22px}
.pure-stats>div+div{border-left:1px solid rgba(148,163,184,.14)}
.stat-ico{display:inline-block;margin-right:8px;color:#ff2c63;font-size:22px}
.pure-stats b{font-size:27px;letter-spacing:-.03em}
.pure-stats small{display:block;margin-top:5px;color:#9aa8bb;font-size:12px}
.pure-secure{position:absolute;left:55px;bottom:30px;color:#7f8da1;font-size:11px}

/* Right login */
.pure-login-side{
 min-height:calc(100vh - 16px);display:flex;align-items:center;justify-content:center;padding:34px 28px;
 background:radial-gradient(circle at 82% 5%,rgba(170,33,95,.12),transparent 26%),linear-gradient(180deg,#07111f,#050d18)
}
.pure-login-card{
 width:min(575px,100%);padding:37px 40px 29px;border-radius:28px;
 border:1px solid rgba(255,54,110,.52);
 background:radial-gradient(circle at 90% 0%,rgba(255,34,99,.075),transparent 28%),linear-gradient(165deg,#0e1929,#07111e);
 box-shadow:0 25px 65px rgba(0,0,0,.27),0 0 35px rgba(255,36,97,.045)
}
.pure-login-head{display:flex;gap:19px;margin-bottom:28px;align-items:flex-start}
.pure-lock{
 width:66px;height:66px;border-radius:19px;display:grid;place-items:center;flex:0 0 auto;
 border:1px solid rgba(255,45,103,.55);background:rgba(255,38,96,.07);color:#ff3a70
}
.pure-lock svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.9}
.pure-login-head span{display:block;margin-top:6px;color:#ff356b;font-size:11px;font-weight:850;letter-spacing:.15em}
.pure-login-head h2{margin:11px 0 7px;font-size:40px;line-height:1;font-weight:820;letter-spacing:-.045em}
.pure-login-head p{margin:0;color:#aab6c6;font-size:15px;line-height:1.5}
.pure-error{margin:-6px 0 15px;padding:13px 15px;border-radius:12px;border:1px solid rgba(255,72,112,.3);background:rgba(255,35,88,.07);color:#ffd8df;font-size:13px}
.pure-login-card label{display:block;margin:18px 0 8px;font-size:13px;font-weight:750}
.pure-input{position:relative}
.pure-input>svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:21px;height:21px;fill:none;stroke:#b5c0ce;stroke-width:1.8}
.pure-input input{
 width:100%;height:57px;border:1px solid #3a4e6d;border-radius:12px;background:#0c1727;color:#fff;
 padding:0 48px 0 52px;outline:none;font:inherit;font-size:15px
}
.pure-input input:focus{border-color:#607ea7;box-shadow:0 0 0 3px rgba(96,126,167,.1)}
.pure-check{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#15ad6c;color:#fff;font-style:normal;font-weight:900}
.pure-eye{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:9px;background:transparent;color:#a9b5c5;display:grid;place-items:center;cursor:pointer}
.pure-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.pure-first{margin-top:19px;padding:15px 16px;display:flex;gap:13px;border:1px solid rgba(255,177,22,.55);border-radius:13px;background:rgba(255,177,22,.035);color:#e7d5af;font-size:13px;line-height:1.55}
.pure-first b,.pure-first strong{color:#ffb629}.pure-info{width:23px;height:23px;flex:0 0 auto;border:2px solid #ffae12;border-radius:50%;display:grid;place-items:center;color:#ffae12;font-family:Georgia,serif;font-size:12px;font-weight:900}
.pure-submit{width:100%;height:59px;margin-top:19px;border:0;border-radius:13px;background:linear-gradient(92deg,#ed0f50,#ff245b 52%,#ff4c6d);color:#fff;font:inherit;font-size:18px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:13px;cursor:pointer}
.pure-submit svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2}
.pure-or{display:flex;align-items:center;gap:14px;margin:20px 0 13px;color:#7e8ca0;font-size:12px}.pure-or span{height:1px;background:#26364e;flex:1}.pure-or em{font-style:normal}
.pure-create{text-align:center;color:#9ca9ba;font-size:13px}.pure-create a{color:#ff4772;text-decoration:none;font-weight:800}
.pure-host{margin-top:22px;padding:16px 17px;border:1px solid rgba(61,126,255,.35);border-radius:15px;background:rgba(39,105,236,.06);display:flex;gap:14px}
.host-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(145deg,#1762df,#0d3e97);color:#e2edff}.host-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
.pure-host b{display:block;font-size:14px}.pure-host p{margin:6px 0 0;color:#b2bfd0;font-size:12.5px;line-height:1.6}
.pure-host a{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border:1px solid rgba(61,132,255,.52);border-radius:9px;background:#071a34;color:#4f92ff;text-decoration:none;font-size:12px;font-weight:800}.pure-host a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.pure-foot{margin-top:22px;text-align:center;color:#718096;font-size:10.5px}.pure-foot span{margin:0 7px;color:#3a4b61}

/* prevent browser autofill yellow */
.pure-input input:-webkit-autofill,
.pure-input input:-webkit-autofill:hover,
.pure-input input:-webkit-autofill:focus,
.pure-input input:-webkit-autofill:active{
 -webkit-text-fill-color:#fff!important;
 -webkit-box-shadow:0 0 0 1000px #0c1727 inset!important;
 box-shadow:0 0 0 1000px #0c1727 inset!important;
 caret-color:#fff!important;
 transition:background-color 9999s ease-out 0s!important
}

@media(max-width:1250px){
 .pure-shell{grid-template-columns:58% 42%}
 .pure-hero{padding-left:36px;padding-right:32px}
 .pure-brand,.pure-copy,.pure-badge{transform:scale(.92);transform-origin:left top}
 .pure-laptop{right:-4%;width:56%}
 .pure-features{left:36px;width:66%}.pure-stats{left:36px;width:75%}.pure-secure{left:36px}
 .pure-login-card{padding:33px 29px}
}
@media(max-width:980px){
 .pure-shell{width:min(780px,calc(100vw - 16px));grid-template-columns:1fr}
 .pure-hero{min-height:820px}
 .pure-login-side{min-height:auto;padding:20px}
}
@media(max-width:620px){
 .pure-shell{width:100%;margin:0;border-radius:0}
 .pure-hero{min-height:720px;padding:25px 20px}
 .pure-badge{margin-top:35px}
 .pure-copy{margin-top:18px}.pure-copy h1{font-size:42px}
 .pure-laptop{top:250px;right:-18%;width:76%;height:35%;opacity:.45}
 .pure-features{left:20px;bottom:175px;width:calc(100% - 40px);gap:10px}.pure-feature+.pure-feature{padding-left:10px}
 .pf-icon{width:46px;height:46px}.pure-feature strong{font-size:13px}.pure-feature span{font-size:10px}
 .pure-stats{left:20px;bottom:70px;width:calc(100% - 40px)}.pure-stats>div{padding:13px 10px}.pure-stats b{font-size:20px}.pure-stats small{font-size:9px}
 .pure-secure{left:20px;bottom:25px}
 .pure-login-side{padding:0}.pure-login-card{border-left:0;border-right:0;border-bottom:0;border-radius:24px 24px 0 0;padding:28px 20px}
 .pure-login-head h2{font-size:32px}.pure-lock{width:53px;height:53px;border-radius:15px}
}


/* v15.11 — reference-style laptop + coffee cup + plant refinement */
.pure-hero{
  background:
   radial-gradient(circle at 68% 39%,rgba(255,28,94,.15),transparent 23%),
   radial-gradient(circle at 31% 61%,rgba(36,85,164,.08),transparent 25%),
   linear-gradient(135deg,#020813,#07101c 72%,#030914);
}
.pure-copy{max-width:490px}
.pure-copy h1{
  font-weight:820;
  font-size:clamp(50px,4.35vw,69px);
}
.pure-copy p{font-size:16.5px}
.pure-badge{margin-top:42px}

/* Laptop gets a more photographic position/scale while remaining HTML/CSS. */
.pure-laptop{
  right:3.5%!important;
  top:22%!important;
  width:55%!important;
  height:47%!important;
  transform:perspective(1050px) rotateY(-4deg) rotateX(1.5deg) rotateZ(.8deg)!important;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.50)) drop-shadow(0 0 30px rgba(255,35,95,.07))!important;
}
.pure-screen{
  left:6%!important;
  right:4%!important;
  height:69%!important;
  border:6px solid #171c25!important;
  border-bottom-width:10px!important;
  border-radius:18px!important;
  background:#08111d!important;
}
.pure-keyboard{
  left:0!important;
  right:-1%!important;
  top:68%!important;
  height:22%!important;
  background:linear-gradient(180deg,#303744,#161c25)!important;
  border-radius:0 0 22px 22px!important;
  transform:skewX(-10deg)!important;
}
.pure-base{
  left:-5%!important;
  right:-7%!important;
  top:88%!important;
  height:4%!important;
  background:linear-gradient(180deg,#6b7280,#202631)!important;
}

/* Decorative plant — entirely CSS, not baked into a screenshot. */
.pure-plant{
  position:absolute;
  z-index:6;
  left:6.4%;
  top:50.5%;
  width:132px;
  height:170px;
  transform:scale(.92);
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.38));
}
.plant-pot{
  position:absolute;left:28px;bottom:0;width:78px;height:72px;
  background:linear-gradient(90deg,#161d28,#28303b 45%,#111821);
  border-radius:14px 14px 25px 25px;
  box-shadow:inset 0 3px 8px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.28);
}
.plant-pot:before{
  content:"";position:absolute;left:-4px;right:-4px;top:-6px;height:15px;
  border-radius:50%;background:linear-gradient(180deg,#353e49,#111821);
}
.leaf{
  position:absolute;left:56px;top:42px;width:27px;height:76px;
  transform-origin:50% 100%;
  border-radius:80% 10% 80% 10%;
  background:linear-gradient(135deg,#86b92c 0%,#3c7e2f 40%,#193f29 100%);
  box-shadow:inset 2px 2px 7px rgba(255,229,72,.18);
}
.leaf.l1{transform:rotate(-62deg) scale(.85)}
.leaf.l2{transform:rotate(-42deg) scale(.95)}
.leaf.l3{transform:rotate(-20deg) scale(1.03)}
.leaf.l4{transform:rotate(2deg) scale(1.08)}
.leaf.l5{transform:rotate(24deg) scale(1)}
.leaf.l6{transform:rotate(47deg) scale(.90)}
.leaf.l7{transform:rotate(68deg) scale(.78)}

/* Decorative coffee cup — entirely CSS. */
.pure-cup{
  position:absolute;
  z-index:7;
  right:4.2%;
  top:59%;
  width:132px;
  height:135px;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.42));
}
.cup-body{
  position:absolute;left:10px;top:27px;width:83px;height:91px;
  border-radius:12px 12px 25px 25px;
  background:linear-gradient(90deg,#111824,#272d37 48%,#0c121b);
  box-shadow:inset 5px 0 10px rgba(255,255,255,.035),0 0 0 1px rgba(255,255,255,.025);
}
.cup-body:before{
  content:"";position:absolute;left:3px;right:3px;top:-7px;height:15px;border-radius:50%;
  background:linear-gradient(180deg,#313843,#0c1119);
  box-shadow:0 0 0 2px rgba(255,55,101,.17);
}
.coffee{
  position:absolute;left:8px;right:8px;top:-4px;height:8px;border-radius:50%;
  background:radial-gradient(ellipse,#5d321e,#1a0d08 70%);
}
.cup-handle{
  position:absolute;left:78px;top:49px;width:46px;height:57px;
  border:10px solid #111824;border-left:8px solid #202731;border-radius:48%;
  transform:rotate(5deg);
}
.steam{
  position:absolute;top:0;width:14px;height:35px;border-radius:50%;
  border-left:2px solid rgba(221,229,241,.18);
  filter:blur(.3px);
}
.steam.s1{left:40px;transform:rotate(12deg)}
.steam.s2{left:59px;top:5px;transform:rotate(-12deg) scale(.8)}

/* Feature row sits clearly below the visual scene. */
.pure-features{
  left:55px!important;
  bottom:191px!important;
  width:61%!important;
}
.pure-stats{
  left:55px!important;
  bottom:69px!important;
  width:70%!important;
}
.pure-secure{bottom:27px!important}

/* Add subtle floor glow beneath plant/laptop/cup. */
.pure-hero:after{
  content:"";
  position:absolute;
  left:2%;right:2%;top:48%;height:32%;
  background:
   radial-gradient(ellipse at 64% 66%,rgba(255,29,93,.09),transparent 45%),
   radial-gradient(ellipse at 24% 74%,rgba(60,104,175,.055),transparent 34%);
  z-index:1;
  pointer-events:none;
}

/* Right card proportions closer to the approved reference. */
.pure-login-card{
  width:min(590px,100%)!important;
  padding:40px 43px 31px!important;
}
.pure-login-head h2{font-size:39px!important}
.pure-submit{
  background:linear-gradient(96deg,#ec0f4e 0%,#ff2359 52%,#ff5272 100%)!important;
  box-shadow:0 12px 28px rgba(255,34,91,.12)!important;
}
.pure-host{
  background:linear-gradient(145deg,rgba(37,102,226,.075),rgba(13,41,88,.035))!important;
}

/* Medium desktop sizing */
@media(min-width:981px) and (max-width:1320px){
  .pure-laptop{right:1%!important;width:57%!important;top:24%!important}
  .pure-plant{left:3.5%;top:52%;transform:scale(.78)}
  .pure-cup{right:2%;top:60%;transform:scale(.82)}
  .pure-features{left:36px!important;width:67%!important}
  .pure-stats{left:36px!important;width:76%!important}
}

/* Mobile/tablet: decor scales without covering text */
@media(max-width:980px){
  .pure-plant{left:5%;top:48%;transform:scale(.70)}
  .pure-cup{right:2%;top:56%;transform:scale(.72)}
}
@media(max-width:620px){
  .pure-plant{display:none}
  .pure-cup{display:none}
  .pure-laptop{top:270px!important;right:-19%!important;width:80%!important;height:34%!important;opacity:.43!important}
}


/* v15.12 — use the user-approved artwork for the LEFT visual only.
   The RIGHT login panel remains live HTML/form functionality. */
.pure-hero{
  position:relative !important;
  overflow:hidden !important;
  background:#020711 url('stariz-login-hero.jpg') center center / cover no-repeat !important;
}

/* Hide the former CSS/HTML illustration pieces so they cannot overlap the approved artwork. */
.pure-hero > .pure-brand,
.pure-hero > .pure-badge,
.pure-hero > .pure-copy,
.pure-hero > .pure-rings,
.pure-hero > .pure-dots,
.pure-hero > .pure-plant,
.pure-hero > .pure-laptop,
.pure-hero > .pure-cup,
.pure-hero > .pure-features,
.pure-hero > .pure-stats,
.pure-hero > .pure-secure{
  display:none !important;
}
.pure-hero:before,
.pure-hero:after{
  display:none !important;
}

/* Preserve the reference artwork's proportions instead of stretching it. */
@media(min-width:981px){
  .pure-shell{
    grid-template-columns:minmax(620px, 1.08fr) minmax(520px, .92fr) !important;
  }
  .pure-hero{
    min-height:calc(100vh - 48px) !important;
    background-size:cover !important;
    background-position:center center !important;
  }
}

/* On narrower screens keep the artwork readable above the real login form. */
@media(max-width:980px){
  .pure-hero{
    min-height:760px !important;
    background-size:cover !important;
    background-position:center top !important;
  }
}
@media(max-width:620px){
  .pure-hero{
    min-height:610px !important;
    background-size:cover !important;
    background-position:center top !important;
  }
}

/* v15.13 HQ lossless approved hero */
.pure-hero{
 background:#020711 url('stariz-login-hero-hq.png') center center / cover no-repeat !important;
 image-rendering:auto !important;
}
@media(max-width:980px){
 .pure-hero{background-position:center top !important;}
}

/* v15.14 — exact HQ reference artwork on left, functional HTML form on right */
.pure-shell{grid-template-columns:54.2% 45.8%;max-width:1800px}
.pure-hero-reference{padding:0!important;background:#030914!important;display:flex;align-items:stretch;justify-content:stretch}
.pure-reference-art{display:block;width:100%;height:100%;min-height:calc(100vh - 16px);object-fit:cover;object-position:left center;image-rendering:auto}
.pure-login-side{padding:32px 38px}
.pure-login-card{width:min(590px,100%)}
@media(max-width:1250px){
 .pure-shell{grid-template-columns:53% 47%}
 .pure-hero-reference{padding:0!important}
 .pure-reference-art{object-position:center center}
}
@media(max-width:980px){
 .pure-shell{grid-template-columns:1fr}
 .pure-hero-reference{min-height:auto!important;aspect-ratio:760/1122}
 .pure-reference-art{min-height:0;height:100%;object-fit:cover}
}
@media(max-width:620px){
 .pure-hero-reference{aspect-ratio:760/1122;padding:0!important}
 .pure-reference-art{width:100%;height:100%;min-height:0;object-fit:cover}
}


/* =========================================================
   v15.15 — DESKTOP VIEWPORT FIT (1366 → 2K)
   Goal: whole login composition visible without page scroll.
   ========================================================= */

@media (min-width:981px){

  html,
  body.pure-auth{
    width:100%;
    height:100%;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.pure-auth{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .pure-shell{
    /*
      Keep the page inside the current browser viewport rather
      than allowing either column to determine document height.
    */
    width:min(1900px, calc(100vw - 18px)) !important;
    height:calc(100dvh - 18px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 18px) !important;
    margin:9px auto !important;

    /*
      Left column follows the portrait artwork's natural ratio.
      This prevents the reference image from becoming huge at
      lower desktop heights while leaving enough room for form.
    */
    grid-template-columns:
      clamp(450px, calc((100dvh - 18px) * .6774), 930px)
      minmax(560px, 1fr) !important;

    overflow:hidden !important;
  }

  .pure-hero-reference{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:0 !important;
    background:#020711 !important;
  }

  .pure-reference-art{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;

    /*
      "contain" is intentional: the COMPLETE HQ artwork stays
      visible from top logo through bottom stats on every height.
    */
    object-fit:contain !important;
    object-position:center center !important;
  }

  .pure-login-side{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
    padding:clamp(12px, 2.2vh, 30px) clamp(18px, 2.5vw, 42px) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .pure-login-card{
    width:min(590px, 100%) !important;
    max-height:100% !important;
    overflow:hidden !important;
    transform-origin:center center !important;
  }
}

/* Standard 1366x768 / laptop-class viewport */
@media (min-width:981px) and (max-height:760px){
  .pure-shell{
    grid-template-columns:
      clamp(420px, calc((100dvh - 12px) * .6774), 510px)
      minmax(560px, 1fr) !important;
    height:calc(100dvh - 10px) !important;
    max-height:calc(100dvh - 10px) !important;
    margin:5px auto !important;
  }

  .pure-login-card{
    transform:scale(.82) !important;
  }
}

/* 768–850px tall displays */
@media (min-width:981px) and (min-height:761px) and (max-height:850px){
  .pure-login-card{
    transform:scale(.90) !important;
  }
}

/* 851–950px tall displays */
@media (min-width:981px) and (min-height:851px) and (max-height:950px){
  .pure-login-card{
    transform:scale(.96) !important;
  }
}

/* Full HD / 2K: use normal card size */
@media (min-width:981px) and (min-height:951px){
  .pure-login-card{
    transform:none !important;
  }
}

/*
  Width safety for 1366-class screens:
  no horizontal clipping even with a narrow viewport.
*/
@media (min-width:981px) and (max-width:1450px){
  .pure-shell{
    width:calc(100vw - 12px) !important;
  }
  .pure-login-side{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

/* 2K and large desktop: keep the composition centered, not stretched. */
@media (min-width:2000px){
  .pure-shell{
    width:min(1900px, calc(100vw - 36px)) !important;
  }
}

/* Tablet/mobile behavior remains stacked and scrollable. */
@media (max-width:980px){
  html, body.pure-auth{
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }
}


/* =========================================================
   v15.16 — UNIFIED TWO-PANEL COMPOSITION
   Removes the oversized dead gap and makes both sides feel
   like a single continuous layout from 1366 → 2K.
   ========================================================= */

@media (min-width:981px){

  .pure-shell{
    /*
      Slightly wider left panel than v15.15 and a tighter right
      panel. The whole composition still remains viewport-fit.
    */
    grid-template-columns:
      clamp(520px, 41vw, 820px)
      minmax(590px, 1fr) !important;

    column-gap:0 !important;
    background:
      linear-gradient(90deg,#020711 0%,#06101c 49%,#08111e 100%) !important;
  }

  .pure-hero-reference{
    position:relative !important;
    z-index:1 !important;
    justify-content:flex-end !important;
    background:#020711 !important;
  }

  .pure-reference-art{
    /*
      Keep the artwork complete but let it occupy the left
      section more confidently. It sits against the seam.
    */
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:right center !important;
  }

  .pure-login-side{
    position:relative !important;
    z-index:2 !important;
    justify-content:flex-start !important;

    /*
      Small negative pull visually joins the form side with
      the artwork without actually overlapping form content.
    */
    margin-left:-18px !important;
    padding-left:clamp(18px,1.6vw,30px) !important;
    padding-right:clamp(16px,2.2vw,40px) !important;

    background:
      radial-gradient(circle at 8% 45%,rgba(255,30,92,.035),transparent 26%),
      radial-gradient(circle at 84% 4%,rgba(145,30,91,.11),transparent 26%),
      linear-gradient(180deg,#07111e,#050d18) !important;
  }

  .pure-login-side:before{
    content:"";
    position:absolute;
    left:0;
    top:5%;
    bottom:5%;
    width:1px;
    background:linear-gradient(
      to bottom,
      transparent,
      rgba(255,45,105,.18) 20%,
      rgba(255,45,105,.25) 50%,
      rgba(255,45,105,.18) 80%,
      transparent
    );
    pointer-events:none;
  }

  .pure-login-card{
    /*
      Bring the live card closer to the artwork seam and keep
      it vertically centered as one visual composition.
    */
    margin-left:0 !important;
  }
}

/* 1366–1440 wide desktop: very compact seam */
@media (min-width:981px) and (max-width:1450px){

  .pure-shell{
    grid-template-columns:
      clamp(500px, 39.5vw, 585px)
      minmax(575px,1fr) !important;
  }

  .pure-login-side{
    margin-left:-10px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .pure-login-card{
    max-width:560px !important;
  }
}

/* Full HD range */
@media (min-width:1451px) and (max-width:1999px){

  .pure-shell{
    grid-template-columns:
      clamp(610px, 41.5vw, 785px)
      minmax(620px,1fr) !important;
  }

  .pure-login-side{
    margin-left:-22px !important;
  }
}

/* 2K and larger: keep the design compact instead of stretching */
@media (min-width:2000px){

  .pure-shell{
    width:min(1920px,calc(100vw - 40px)) !important;
    grid-template-columns:790px 1fr !important;
  }

  .pure-login-side{
    margin-left:-24px !important;
    padding-left:30px !important;
  }
}

/*
  Preserve short-height card scaling from v15.15 while making
  the seam compact. This keeps the entire design visible.
*/
@media (min-width:981px) and (max-height:760px){
  .pure-shell{
    grid-template-columns:
      clamp(470px,38.5vw,540px)
      minmax(565px,1fr) !important;
  }

  .pure-login-side{
    margin-left:-8px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* Smooth the transition between the two visual halves. */
@media (min-width:981px){
  .pure-hero-reference:after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:72px;
    height:100%;
    background:linear-gradient(
      90deg,
      rgba(2,7,17,0),
      rgba(6,16,28,.18) 45%,
      rgba(7,17,30,.62) 100%
    );
    pointer-events:none;
  }
}


/* =========================================================
   v15.18 — Forgot password / email recovery
   ========================================================= */
.pure-label-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 margin:18px 0 8px;
}
.pure-label-row label{
 margin:0!important;
}
.pure-forgot-link{
 color:#ff4b72;
 text-decoration:none;
 font-size:12px;
 font-weight:750;
 transition:.15s ease;
}
.pure-forgot-link:hover{
 color:#ff7591;
 text-decoration:underline;
}
.pure-success{
 margin:-6px 0 15px;
 padding:13px 15px;
 border-radius:12px;
 border:1px solid rgba(31,199,126,.30);
 background:rgba(31,199,126,.08);
 color:#c9f7df;
 font-size:13px;
 line-height:1.5;
}
.pure-reset-card{
 max-width:575px;
}
.pure-reset-note{
 margin-top:18px;
 padding:14px 15px;
 border:1px solid rgba(79,145,255,.23);
 border-radius:12px;
 background:rgba(79,145,255,.055);
 color:#aebed3;
 font-size:12.5px;
 line-height:1.55;
}
.pure-code-input input{
 text-align:center;
 font-size:22px;
 font-weight:800;
 letter-spacing:.38em;
 padding-left:52px;
}
.pure-text-action{
 display:block;
 margin:14px auto 0;
 padding:5px 8px;
 border:0;
 background:transparent;
 color:#ff4b72;
 font:inherit;
 font-size:12.5px;
 font-weight:750;
 cursor:pointer;
}
.pure-text-action:hover{text-decoration:underline}
.pure-reset-back{
 margin-top:18px;
 text-align:center;
}
.pure-reset-back a{
 color:#9eacbe;
 text-decoration:none;
 font-size:12.5px;
}
.pure-reset-back a:hover{color:#fff}
.pure-submit-link{
 text-decoration:none;
}
@media(min-width:981px) and (max-height:760px){
 .pure-reset-card{
   transform:scale(.88)!important;
 }
}

/* v15.19 Forgot password position */
.pure-forgot-under{
  margin-top:9px;
  text-align:right;
}
.pure-forgot-under a{
  color:#ff4b72;
  text-decoration:none;
  font-size:12px;
  font-weight:750;
}
.pure-forgot-under a:hover{
  color:#ff7892;
  text-decoration:underline;
}

/* v15.20 — register.php uses the same pure auth layout as login.php */
.pure-register-side{align-items:center}
.pure-register-card{width:min(620px,100%);padding-top:31px;padding-bottom:25px}
.pure-register-card .pure-login-head{margin-bottom:20px}
.pure-register-card .pure-login-head h2{font-size:36px}
.pure-register-card .pure-login-head p{max-width:440px}
.pure-register-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}
.pure-register-field{min-width:0}
.pure-register-field.pure-register-full{grid-column:1/-1}
.pure-register-field label{margin-top:13px}
.pure-register-field label small{font-size:11px;color:#7f8da1;font-weight:600;margin-left:4px}
.pure-register-card .pure-input input{height:54px}
.pure-success{margin:-6px 0 15px;padding:13px 15px;border-radius:12px;border:1px solid rgba(34,197,119,.34);background:rgba(34,197,119,.07);color:#c8f7df;font-size:13px;line-height:1.5}
.pure-code-input input{font-size:24px!important;font-weight:800!important;letter-spacing:.28em;text-align:center;padding-left:52px!important}
.pure-resend-form{margin-top:11px}
.pure-secondary{width:100%;height:46px;border:1px solid #344a69;border-radius:11px;background:#0a1626;color:#cad5e4;font:inherit;font-size:13px;font-weight:750;cursor:pointer}
.pure-secondary:hover{border-color:#506b91;background:#0d1b2d}
.pure-complete-card{display:flex;gap:13px;margin:4px 0 8px;padding:16px;border:1px solid rgba(34,197,119,.38);border-radius:13px;background:rgba(34,197,119,.06);color:#cdeadd;font-size:13px;line-height:1.6}
.pure-complete-icon{width:29px;height:29px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:#17ad6d;color:#fff;font-weight:900}
.pure-submit-link{text-decoration:none}
.pure-sep{margin:0 8px;color:#425169}
.pure-register-card .pure-host{margin-top:17px;padding-top:13px;padding-bottom:13px}
.pure-register-card .pure-host p{line-height:1.45}
.pure-register-card .pure-foot{margin-top:16px}

@media(max-width:620px){
 .pure-register-card{padding:26px 20px 24px}
 .pure-register-grid{grid-template-columns:1fr}
 .pure-register-field.pure-register-full{grid-column:auto}
 .pure-register-card .pure-login-head h2{font-size:30px}
}