/* Tech Oasis brand panel — shared by every sign-in screen (website login / register / forgot / reset,
   admin login, super-admin login). Load AFTER magic.css. Matches the reference artwork: deep green gradient,
   large faint hex grid, teal mark with a gold cube, stacked centred lockup. Green only: no gold dust or gold blobs. */
.brand-panel{background:linear-gradient(135deg,#0E1D1A 0%,#12261F 45%,#1D3B35 100%) !important;color:#fff;}
.brand-panel .aurora i:nth-child(1){background:#225A50;opacity:.30;}
.brand-panel .aurora i:nth-child(2){background:#2B7A6A;opacity:.22;}
.brand-panel .aurora i:nth-child(3){background:#3A8D7C;opacity:.16;}
.brand-panel [data-dust],.brand-panel canvas.dust{display:none !important;}

.brand-panel .brand-hex{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='268' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zM28 100L0 84V66M28 100l28-16V66' fill='none' stroke='%233A8D7C' stroke-opacity='.16' stroke-width='.35'/%3E%3C/svg%3E");
  background-size:150px 268px;
  animation:brand-hex-drift-lg 60s linear infinite;
}
@keyframes brand-hex-drift-lg{to{background-position:150px 268px;}}

/* stacked, centred lockup */
.brand-panel .bp-center{align-items:center;text-align:center;width:min(92%,520px);}
.brand-panel .bp-lockup{flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,34px);}
.brand-panel .bp-text{align-items:center;gap:12px;}
.brand-panel .bp-mark{width:clamp(130px,17vw,230px);}
.brand-panel .bp-word{font-size:clamp(34px,4vw,58px);font-weight:800;letter-spacing:.015em;line-height:1;}
.brand-panel .bp-word span{color:#C9A84C;}
.brand-panel .bp-tag{color:#9FB3AD;font-size:clamp(13px,1.2vw,17px);letter-spacing:.04em;}
.brand-panel .bp-rule,.brand-panel .bp-note{display:none !important;}

/* the "drawing" outline in the intro is green too */
.brand-panel .lm-anim .lm-outline{stroke:#5FB3A0;}

@media (max-width:1100px){
  .brand-panel .bp-lockup{flex-direction:row;gap:16px;}
  .brand-panel .bp-text{align-items:flex-start;}
  .brand-panel .bp-mark{width:70px;}
  .brand-panel .bp-word{font-size:24px;}
  .brand-panel .bp-tag{display:none;}
}

/* loading gates share the same deep-green look */
.gate{background:linear-gradient(135deg,#0E1D1A,#1D3B35) !important;}
.gate .box,.gate .text-soft{color:#cfe3dd !important;}
.gate .box h2{color:#fff;}

/* ============================================================
   Auth layout v2 (sign in / sign up): welcome panel with a cloud edge, logo in a circle,
   soft filled inputs. Mobile: brand header with clouds on top, form below.
   ============================================================ */
.auth-shell,body > .shell{background:#fff;}
.auth-form-col,.form-col{background:#fff;position:relative;z-index:2;}
.brand-panel{position:relative;}
/* cloud edge — three layered bumps melting into the white form side */
.brand-panel::after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:150px;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 800' preserveAspectRatio='none'%3E%3Cpath fill='%235FB3A0' fill-opacity='.45' d='M150 0H64C30 40 54 86 34 130C12 178 52 214 30 262C8 312 50 352 28 402C6 452 48 494 26 544C6 594 44 636 24 686C8 730 40 770 30 800H150Z'/%3E%3Cpath fill='%23CFE6DB' d='M150 0H92C64 38 86 82 66 124C46 168 82 206 62 252C42 300 80 340 60 388C40 436 78 478 58 526C40 574 76 616 58 662C42 706 74 756 70 800H150Z'/%3E%3Cpath fill='%23ffffff' d='M150 0H118C96 34 114 74 98 112C80 154 112 190 96 232C80 276 112 314 96 358C80 402 112 442 96 486C80 530 112 572 96 616C82 658 110 700 100 744C94 770 104 788 110 800H150Z'/%3E%3C/svg%3E") right center/100% 100% no-repeat;}
.brand-panel .bp-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:60px;}
.brand-panel .bp-welcome{order:0;font-size:clamp(20px,1.8vw,26px);font-weight:700;color:#F1F6F3;margin-bottom:26px;letter-spacing:.01em;}
.brand-panel .bp-lockup{order:1;}
.brand-panel .bp-desc{order:2;max-width:360px;margin:22px auto 0;font-size:13.5px;line-height:1.65;color:#B9CDC6;}
.brand-panel .bp-note{display:none !important;}
/* logo inside a soft white disc (animation unchanged) */
.brand-panel .bp-mark{width:clamp(150px,12.5vw,196px) !important;aspect-ratio:1;border-radius:50%;padding:13%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#EEF6F2);box-shadow:0 22px 44px -14px rgba(0,0,0,.55),0 0 0 10px rgba(255,255,255,.06),0 0 0 22px rgba(255,255,255,.03);}
.brand-panel .bp-mark svg{width:100%;height:auto;}
.brand-panel .bp-word{font-size:clamp(24px,2.2vw,32px) !important;margin-top:4px;}
.brand-panel .bp-links{position:absolute;left:0;right:60px;bottom:30px;z-index:2;display:flex;justify-content:center;gap:14px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.brand-panel .bp-links a{color:#DCEBE5;text-decoration:none;opacity:.85;}
.brand-panel .bp-links a:hover{opacity:1;color:#F3E4B8;}
.brand-panel .bp-links span{color:rgba(255,255,255,.35);}

/* form side */
.auth-form-inner h2,.form-col h1{text-align:center;font-weight:800 !important;letter-spacing:-.02em;color:#13231F;}
.auth-form-inner > p.text-soft,.form-col p.sub{text-align:center;}
.auth-form-col .field label,.form-col label{font-weight:700;font-size:12.5px;color:#2B3733;}
.auth-form-col .input,.auth-form-col .phone-input input,.auth-form-col select,.form-col input:not([type=checkbox]){background:#EEF5F1 !important;border:1.5px solid transparent !important;border-radius:11px !important;padding:13px 14px !important;font-size:13.5px;transition:background .2s,border-color .2s,box-shadow .2s;}
.auth-form-col .input:focus,.form-col input:focus{background:#fff !important;border-color:#3FB28F !important;box-shadow:0 0 0 4px rgba(63,178,143,.15) !important;outline:none !important;}
.auth-form-col .btn-primary,.form-col .btn{background:linear-gradient(135deg,#2E8B74,#1F5A4B) !important;border:none !important;color:#fff !important;border-radius:11px !important;padding:14px 18px !important;font-weight:700;box-shadow:0 12px 24px -12px rgba(31,90,75,.8);}
.auth-form-col .btn-primary:hover,.form-col .btn:hover{filter:brightness(1.07);}
.auth-form-col .checkbox-row input,.form-col input[type=checkbox]{accent-color:#22705C;}
.auth-switch,.form-col .foot{text-align:center;}

/* ---------- tablet & phone: brand header on top with clouds underneath ---------- */
@media (max-width:1100px){
  .auth-shell,body > .shell{flex-direction:column !important;}
  .auth-side.brand-panel,.shell > .side.brand-panel{display:flex !important;flex:none !important;min-height:250px;padding:34px 20px 78px !important;align-items:center;justify-content:center;}
  .brand-panel::after{top:auto;left:0;right:0;bottom:-1px;width:auto;height:64px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 64' preserveAspectRatio='none'%3E%3Cpath fill='%235FB3A0' fill-opacity='.45' d='M0 64V30C30 6 70 22 96 14C130 2 160 26 196 18C236 8 262 30 300 20C340 8 372 28 410 18C450 6 482 28 520 18C560 8 592 30 630 20C670 8 700 26 740 16C764 10 786 18 800 22V64Z'/%3E%3Cpath fill='%23CFE6DB' d='M0 64V40C34 20 66 38 100 28C136 18 168 40 206 30C244 20 276 40 314 30C352 20 384 42 422 32C460 22 494 40 532 30C570 20 602 40 640 30C680 20 716 40 760 30C778 26 792 30 800 34V64Z'/%3E%3Cpath fill='%23ffffff' d='M0 64V50C36 34 70 52 106 42C144 32 176 52 214 44C252 36 284 54 322 46C360 36 394 56 432 46C470 36 504 54 542 46C580 36 612 56 650 46C690 36 724 54 764 46C780 42 792 46 800 48V64Z'/%3E%3C/svg%3E") center bottom/100% 100% no-repeat;}
  .brand-panel .bp-center{padding-right:0;}
  .brand-panel .bp-lockup{flex-direction:column !important;gap:12px !important;}
  .brand-panel .bp-text{align-items:center !important;}
  .brand-panel .bp-mark{width:92px !important;padding:16px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5),0 0 0 7px rgba(255,255,255,.07);}
  .brand-panel .bp-word{font-size:22px !important;}
  .brand-panel .bp-welcome,.brand-panel .bp-desc,.brand-panel .bp-links,.brand-panel .bp-tag{display:none !important;}
  .auth-form-col,.form-col{margin-top:-1px;padding-top:18px !important;}
}
@media (max-width:600px){
  .auth-side.brand-panel,.shell > .side.brand-panel{min-height:210px;padding:28px 16px 70px !important;}
  .auth-form-inner h2,.form-col h1{font-size:21px !important;}
}

/* v3: brand panel = large animated mark + wordmark + tagline (no disc, no welcome copy) */
.brand-panel .bp-welcome,.brand-panel .bp-desc,.brand-panel .bp-links{display:none !important;}
.brand-panel .bp-mark{width:clamp(190px,19vw,300px) !important;aspect-ratio:auto;padding:0 !important;background:none !important;box-shadow:none !important;border-radius:0;}
.brand-panel .bp-lockup{gap:clamp(22px,3.4vh,40px) !important;}
.brand-panel .bp-word{font-size:clamp(30px,3vw,46px) !important;}
.brand-panel .bp-tag{display:block;font-size:clamp(13px,1.15vw,17px);color:#9FB3AD;}
@media (max-width:1100px){
  .brand-panel .bp-mark{width:96px !important;}
  .brand-panel .bp-word{font-size:24px !important;}
  .brand-panel .bp-tag{display:none !important;}
}

/* v4 (desktop): the green brand panel stays put while the form column scrolls. The panel is pinned to the viewport
   (sticky, full height) so only the white side moves; on tablet/phone the panel is a normal header above the form. */
@media (min-width:1101px){
  .auth-shell,body > .shell{align-items:flex-start !important;}
  .auth-side.brand-panel,.shell > .side.brand-panel{position:sticky !important;top:0;align-self:flex-start;height:100vh;height:100dvh;min-height:0;}
  .auth-form-col,.form-col{min-height:100vh;min-height:100dvh;}
}