:root{
  --ref-bg:#031427;
  --ref-bg2:#071a33;
  --ref-panel:#0b1c30;
  --ref-panel2:#102034;
  --ref-line:#274463;
  --ref-text:#f6faff;
  --ref-muted:#9eb0c7;
  --ref-blue:#1687ff;
  --ref-blue2:#0068e8;
  --ref-card:#08192b;
  --ref-shadow:0 20px 60px rgba(0,0,0,.35);
}

body.home-active{
  background:
    radial-gradient(circle at 72% 18%,rgba(22,135,255,.10),transparent 30%),
    linear-gradient(180deg,#031427 0%,#041222 100%);
  color:var(--ref-text);
  font-family:"Tahoma","Arial",sans-serif;
}
body.home-active .shell{max-width:none;margin:0;padding:0}
body.home-active .topbar{display:none}
body.home-active .app-footer{display:none}

#home.reference-home{
  min-height:100vh;
  overflow:hidden;
  position:relative;
  padding-bottom:110px;
  color:var(--ref-text);
  font-family:"Tahoma","Arial",sans-serif;
}
#home.reference-home a{color:inherit;text-decoration:none}
#home.reference-home button,
#home.reference-home input,
.reference-register-modal button,
.reference-register-modal input{font:inherit}

#home.reference-home .reference-hero{
  width:min(1480px,100%);
  margin:0 auto 70px;
  display:grid;
  direction:ltr;
  grid-template-columns:minmax(0,58%) minmax(360px,42%);
  min-height:760px;
  background:linear-gradient(90deg,rgba(3,20,39,.1),rgba(3,20,39,.98) 64%);
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
}
#home.reference-home .reference-visual{
  position:relative;
  min-height:760px;
  overflow:hidden;
  direction:ltr;
}
#home.reference-home .reference-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(90deg,rgba(3,20,39,.02) 0%,rgba(3,20,39,.02) 56%,rgba(3,20,39,.82) 95%,rgba(3,20,39,1) 100%),
    linear-gradient(0deg,rgba(3,20,39,.45) 0%,rgba(3,20,39,.05) 35%,rgba(3,20,39,.05) 70%,rgba(3,20,39,.45) 100%),
    url("assets/manafith-reference-hero.png");
  background-image:
    linear-gradient(90deg,rgba(3,20,39,.02) 0%,rgba(3,20,39,.02) 56%,rgba(3,20,39,.82) 95%,rgba(3,20,39,1) 100%),
    linear-gradient(0deg,rgba(3,20,39,.45) 0%,rgba(3,20,39,.05) 35%,rgba(3,20,39,.05) 70%,rgba(3,20,39,.45) 100%),
    image-set(
      url("assets/manafith-reference-hero.webp") type("image/webp"),
      url("assets/manafith-reference-hero.png") type("image/png")
    );
  background-size:cover;
  background-position:center center;
  filter:saturate(1.08) contrast(1.04);
  transform:scale(1.01);
}
#home.reference-home .reference-visual::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  background:linear-gradient(0deg,#031427 0%,rgba(3,20,39,.88) 25%,transparent 100%);
  pointer-events:none;
}
#home.reference-home .reference-logo-wrap{
  position:absolute;
  top:36px;
  left:46px;
  z-index:2;
  width:min(420px,56%);
  filter:drop-shadow(0 0 20px rgba(0,136,255,.25));
}
#home.reference-home .reference-logo-wrap picture{display:block}
#home.reference-home .reference-logo-wrap img{display:block;width:100%;height:auto;object-fit:contain}
#home.reference-home .reference-content{
  position:relative;
  min-height:760px;
  padding:58px 58px 48px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  direction:rtl;
  background:
    radial-gradient(circle at 50% 22%,rgba(22,135,255,.11),transparent 34%),
    linear-gradient(180deg,rgba(3,20,39,.9),rgba(3,20,39,1));
}
#home.reference-home .reference-headline{
  margin:0;
  font-size:clamp(36px,4vw,60px);
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.03em;
  max-width:640px;
}
#home.reference-home .reference-headline .accent{color:var(--ref-blue)}
#home.reference-home .reference-lead{
  margin:18px 0 30px;
  max-width:610px;
  color:#c8d6e8;
  line-height:1.95;
  font-size:18px;
}
#home.reference-home .reference-login-card,
.reference-register-modal .reference-register-card{
  width:min(100%,540px);
  background:linear-gradient(180deg,#f8f7f3 0%,#f1f3f5 100%);
  color:#071a33;
  border:1px solid #e3e6ea;
  border-radius:22px;
  padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  margin:0;
}
#home.reference-home .reference-login-card{min-height:466px;display:flex;flex-direction:column}
#home.reference-home .reference-login-card .reference-signup{margin-top:auto}
#home.reference-home .reference-login-card h2,
.reference-register-modal .reference-register-card h2{margin:0 0 7px;font-size:27px;line-height:1.4;color:#071a33}
#home.reference-home .reference-login-card .sub,
.reference-register-modal .reference-register-card .sub{margin:0 0 24px;color:#687b8f;font-size:15px;line-height:1.8}
#home.reference-home .reference-login-card .sub{line-height:normal}
#home.reference-home .reference-field,
.reference-register-modal .reference-field{margin:0 0 14px}
#home.reference-home .reference-field label,
.reference-register-modal .reference-field label{display:block;margin:0 0 8px;font-size:14px;font-weight:400;color:#183452}
#home.reference-home .reference-input,
.reference-register-modal .reference-input{
  width:100%;
  height:54px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid #d7dde4;
  outline:0;
  color:#0f2740;
  background:#fcfcfa;
  transition:.2s ease;
}
#home.reference-home .reference-input::placeholder,
.reference-register-modal .reference-input::placeholder{color:#8797a8}
#home.reference-home .reference-input:focus,
.reference-register-modal .reference-input:focus{border-color:var(--ref-blue);box-shadow:0 0 0 3px rgba(22,135,255,.12)}
#home.reference-home .reference-btn,
.reference-register-modal .reference-btn{
  width:100%;
  height:55px;
  border-radius:10px;
  cursor:pointer;
  transition:.2s ease;
  font-weight:700;
  font-size:16px;
  padding:0 16px;
}
#home.reference-home .reference-btn-primary,
.reference-register-modal .reference-btn-primary{
  color:white;
  border:0;
  background:linear-gradient(180deg,#2f9bff 0%,#0877eb 100%);
  box-shadow:0 10px 26px rgba(0,112,255,.24),inset 0 1px 0 rgba(255,255,255,.25);
}
#home.reference-home .reference-btn-primary:hover,
.reference-register-modal .reference-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
#home.reference-home .reference-btn:disabled,
.reference-register-modal .reference-btn:disabled{cursor:not-allowed;opacity:.65;transform:none}
#home.reference-home .reference-login-row{margin:3px 0 19px;display:flex;align-items:center;justify-content:flex-start;gap:16px;font-size:14px}
#home.reference-home .reference-forgot{color:#49a4ff}
#home.reference-home .reference-signup{margin:22px 0 0;text-align:center;color:#7b8c9d;font-size:14px}
#home.reference-home .reference-signup a{color:#30a1ff;font-weight:700}
.reference-feedback{background:#eef6ff;border:1px solid #d6e8fb;border-radius:12px;padding:12px 14px;color:#476580;font-size:13px;line-height:1.8;margin:14px 0 0}
.reference-feedback.success{background:#eaf9f2;border-color:#c9efde;color:#08774f}
.reference-feedback.danger{background:#fff0f0;border-color:#f4c8c8;color:#9c2929}
.reference-resend-btn{width:100%;margin-top:10px;border:1px solid #b9d6f4;background:#fff;color:#1766c9;border-radius:12px;padding:11px 14px;font-weight:800}
.reference-resend-btn:disabled{cursor:not-allowed;opacity:.62}

#home.reference-home .reference-trust{
  width:min(1350px,calc(100% - 64px));
  margin:-58px auto 0;
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  direction:rtl;
}
#home.reference-home .reference-trust-card{
  background:linear-gradient(180deg,#f8f7f3 0%,#f1f3f5 100%);
  border:1px solid #e1e6eb;
  border-radius:18px;
  padding:28px 26px;
  min-height:175px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  align-items:center;
  box-shadow:0 16px 45px rgba(0,0,0,.12);
}
#home.reference-home .reference-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#1687ff;background:#eef1f5;border:1px solid #e0e5ea;font-size:30px}
#home.reference-home .reference-trust-card h3{margin:0 0 9px;font-size:21px;color:#071a33}
#home.reference-home .reference-trust-card p{margin:0;color:#6e7f90;line-height:1.9;font-size:14px}
#home.reference-home .reference-footer{padding:70px 24px 32px;text-align:center;color:#71859b;font-size:13px}
#home.reference-home .reference-footer strong{color:#9bb0c7}
#home.reference-home .reference-fab,.support-assistant .reference-fab{position:fixed;bottom:22px;z-index:20;border:0;cursor:pointer;color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.3)}
.support-assistant[hidden]{display:none!important}
.support-assistant .reference-chat{left:18px;width:56px;height:56px;border-radius:50%;background:linear-gradient(180deg,#2999ff,#0a70df);font-size:24px;display:grid;place-items:center}
#home.reference-home .reference-app{right:18px;height:50px;padding:0 18px;border-radius:18px;background:linear-gradient(180deg,#2e98ff,#0b70e0);display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.support-assistant .reference-chat-panel{position:fixed;left:22px;bottom:96px;width:min(360px,calc(100vw - 44px));z-index:19;background:#071a2d;border:1px solid #274563;border-radius:18px;padding:18px;box-shadow:var(--ref-shadow);display:none;color:#fff;font-family:"Tahoma","Arial",sans-serif}
.support-assistant .reference-chat-panel.open{display:block}
.support-assistant .reference-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.support-assistant .reference-chat-head>button{width:34px;height:34px;border:0;border-radius:9px;background:#102c48;color:#dbe8f7;font-size:24px;line-height:1;cursor:pointer}
.support-assistant .reference-chat-panel h4{margin:0 0 6px;font-size:18px}
.support-assistant .reference-chat-panel p{margin:0 0 12px;color:#9eb0c7;font-size:14px}
.support-assistant .reference-chat-messages{display:grid;gap:9px;max-height:230px;overflow:auto;margin:4px -2px 14px;padding:2px}
.support-assistant .chat-message{max-width:88%;padding:10px 12px;border-radius:12px;color:#e8f3ff;font-size:13px;line-height:1.75;white-space:pre-wrap}
.support-assistant .chat-message.bot{justify-self:start;background:#102c48;border-bottom-right-radius:4px}
.support-assistant .chat-message.user{justify-self:end;background:#0b70e0;border-bottom-left-radius:4px}
.support-assistant .chat-message a{display:inline-block;margin-top:4px;color:#7edcff;font-weight:800;text-decoration:underline;text-underline-offset:3px;direction:ltr}
.support-assistant .reference-quick{display:grid;gap:8px}
.support-assistant .reference-quick button{height:42px;border-radius:10px;border:1px solid #345471;color:#dbe8f7;background:#0a2138;cursor:pointer;text-align:right;padding:0 14px}
.support-assistant .reference-quick button:hover,.support-assistant .reference-quick button:focus-visible{border-color:#59d2ff;background:#102c48}
.support-assistant .reference-chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.support-assistant .reference-chat-form input{min-width:0;height:42px;border-radius:10px;border:1px solid #345471;background:#061526;color:#fff;padding:0 12px;font:inherit;outline:none}
.support-assistant .reference-chat-form input:focus{border-color:#59d2ff;box-shadow:0 0 0 3px rgba(89,210,255,.12)}
.support-assistant .reference-chat-form button{height:42px;border:0;border-radius:10px;background:#1684ee;color:#fff;padding:0 14px;font:inherit;font-weight:700;cursor:pointer}
#home.reference-home .reference-app:disabled{opacity:.72;cursor:default}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.reference-register-modal{position:fixed;inset:0;z-index:150;background:rgba(0,8,18,.72);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.reference-register-modal.open{display:flex}
.reference-register-modal .reference-register-card{width:min(560px,100%);min-height:663px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.35);position:relative;max-height:calc(100vh - 40px);overflow:auto}
.reference-register-modal .reference-close-modal{position:absolute;left:18px;top:16px;width:36px;height:36px;border-radius:10px;border:1px solid #c7d8e8;color:#163252;background:#fff;cursor:pointer;font-size:20px}
.reference-register-modal .reference-verify-note{background:#eef6ff;border:1px solid #d6e8fb;border-radius:12px;padding:12px 14px;color:#476580;font-size:13px;line-height:1.8;margin:0 0 18px}
.reference-register-modal .reference-secondary{margin-top:10px;color:#1687ff;background:transparent;border:1px solid #1687ff;box-shadow:none}
.reference-register-modal #registrationIdentityStep > .reference-btn{margin-top:0}
.reference-register-modal .reference-password-recovery-card{min-height:0}
.reference-register-modal .reference-otp-card{min-height:0}
.reference-register-modal .reference-otp-input{direction:ltr;text-align:center;letter-spacing:.45em;font-size:24px;font-weight:800}
.reference-register-modal .reference-field small{display:block;margin-top:7px;color:#6e7f90;line-height:1.7}
.reference-register-modal .reference-otp-timer{margin-top:10px;text-align:center;color:#60758b;font-size:13px;min-height:22px}
@media(max-height:700px){.reference-register-modal .reference-register-card{min-height:0}.reference-register-modal #registrationIdentityStep > .reference-btn{margin-top:20px}}

@media(max-width:980px){
  #home.reference-home .reference-hero{grid-template-columns:1fr;min-height:auto}
  #home.reference-home .reference-visual{min-height:520px;order:1}
  #home.reference-home .reference-content{min-height:auto;order:2;padding:46px 24px 80px}
  #home.reference-home .reference-logo-wrap{width:min(390px,70%);left:24px;top:24px}
  #home.reference-home .reference-trust{margin:-30px auto 0;grid-template-columns:1fr;width:min(680px,calc(100% - 32px))}
  #home.reference-home .reference-headline{font-size:40px}
}
@media(max-width:620px){
  #home.reference-home .reference-visual{min-height:430px}
  #home.reference-home .reference-visual::before{background-position:56% center}
  #home.reference-home .reference-logo-wrap{width:72%;left:14px;top:14px}
  #home.reference-home .reference-content{padding:38px 18px 68px}
  #home.reference-home .reference-headline{font-size:34px}
  #home.reference-home .reference-lead{font-size:16px}
  #home.reference-home .reference-login-card{padding:22px;border-radius:18px}
  #home.reference-home .reference-trust-card{grid-template-columns:52px 1fr;padding:22px;min-height:150px}
  #home.reference-home .reference-icon{width:48px;height:48px;font-size:24px}
  #home.reference-home .reference-app{right:14px;bottom:14px;height:48px;padding:0 16px;font-size:14px}
  .support-assistant .reference-chat{left:14px;bottom:14px;width:54px;height:54px}
  .support-assistant .reference-chat-panel{left:14px;right:14px;width:auto;bottom:82px}
}