/* Sign-in redesign (owner request, 21 Oct 2026): a much larger, glowing teaching diagram, a glass sign-in card and a real phone layout.
   Loaded after login-design-preview.css and login-layout.css on /login/index.php only. Pure CSS: the native form, token and controls are unchanged. */
#maharat-login-design[data-layout]{
  --mr-cyan:#12d4f2;--mr-teal:#00a3c4;--mr-violet:#8a55e0;--mr-ink:#0d1f3f;--mr-glow:#4fe3ff;
  grid-template-columns:minmax(0,62fr) minmax(0,38fr);min-height:100svh;
  background:#04101f}
/* ---------- left side: the diagram ---------- */
#maharat-login-design[data-layout] .mlb-hero{background:#04101f url('pix/login-industrial-preview.webp') center bottom/cover no-repeat}
#maharat-login-design[data-layout] .mlb-hero:before{background:
  radial-gradient(120% 90% at 50% 38%,#0a3a6b00 0,#04101fcc 78%),
  linear-gradient(180deg,#04101f99 0,#04101f33 40%,#04101fb3 100%)}
#maharat-login-design[data-layout] .mlb-hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,#fff 0 1px,#0000 1.6px),radial-gradient(circle,#9fe9ff 0 1px,#0000 1.6px);
  background-size:170px 170px,260px 260px;background-position:12px 30px,90px 110px;animation:mr-twinkle 7s ease-in-out infinite alternate}
#maharat-login-design[data-layout=focus] .mlb-hero-inner{max-width:1180px;padding:46px clamp(24px,3.6vw,72px) 30px}
#maharat-login-design[data-layout] .mlb-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:3px;color:#a8ecff;
  background:#06284a80;border:1px solid #4fc3e044;border-radius:999px;padding:7px 16px;margin-bottom:22px;backdrop-filter:blur(6px)}
#maharat-login-design[data-layout] .mlb-eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mr-glow);box-shadow:0 0 12px var(--mr-glow);animation:mr-blink 2.2s infinite}
#maharat-login-design[data-layout] h1{font-size:clamp(40px,4.3vw,72px)!important;line-height:1.04;letter-spacing:-2.4px;text-shadow:0 6px 40px #00122f99}
#maharat-login-design[data-layout] h1 span{background:linear-gradient(100deg,#19e0ff 10%,#9b6bff 90%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 22px #28c9ff55)}
#maharat-login-design[data-layout] .mlb-location{font-size:15px;letter-spacing:4px;color:#8fe6ff;font-weight:700;text-transform:uppercase}
/* network: bigger, with orbit rings */
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{max-width:1040px;height:clamp(480px,66vh,700px);margin:10px auto 18px}
#maharat-login-design[data-layout] .mlb-hero .mlb-network:before,#maharat-login-design[data-layout] .mlb-hero .mlb-network:after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
#maharat-login-design[data-layout] .mlb-hero .mlb-network:before{width:62%;height:74%;border:1.5px dashed #5fd8f044;animation:mr-orbit 90s linear infinite}
#maharat-login-design[data-layout] .mlb-hero .mlb-network:after{width:92%;height:100%;border:1px solid #5fd8f01f;box-shadow:inset 0 0 90px #1fb6e414}
#maharat-login-design[data-layout] .mlb-hero .mlb-lines path{stroke:#6fe4ff;stroke-opacity:.85;stroke-width:1.8;filter:drop-shadow(0 0 5px #19cdf0aa)}
#maharat-login-design[data-layout] .mlb-hero .mlb-lines circle{r:5;fill:#c9f8ff;filter:drop-shadow(0 0 9px #2fe1ff)}
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:200px;height:200px;padding:22px;border:5px solid #bfe3ff;
  background:radial-gradient(circle at 35% 30%,#fff,#eaf6ff);box-shadow:0 0 0 12px #3ca4ff1c,0 0 70px #38c7ff66,0 20px 50px #00112f77;z-index:2}
#maharat-login-design[data-layout] .mlb-hero .mlb-hub:before{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid #4fe3ff88;animation:mr-pulse 3.2s ease-out infinite}
#maharat-login-design[data-layout] .mlb-hero .mlb-hub:after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px solid #9b6bff66;animation:mr-pulse 3.2s ease-out 1.6s infinite}
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade{width:178px;gap:12px;z-index:3}
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:92px;height:92px;border:3px solid #ffffffd9;
  background:linear-gradient(150deg,#ffffff,#d9f3ff);color:#06395c;box-shadow:0 0 0 6px #35d2f01f,0 12px 34px #00122f88,0 0 30px #35d2f066}
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:46px;height:46px;stroke-width:1.9}
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:15px;font-weight:700;max-width:none;white-space:nowrap;padding:6px 16px;border-radius:999px;
  background:#06264a99;border:1px solid #5fd8f03a;backdrop-filter:blur(8px);text-shadow:none;letter-spacing:.2px}
#maharat-login-design[data-layout] .mlb-trade:is(:hover,:focus-visible,.is-active) .mlb-node{transform:translateY(-5px) scale(1.1);
  box-shadow:0 0 0 7px #35d2f066,0 16px 40px #00122faa,0 0 54px #35e0ffcc}
#maharat-login-design[data-layout] .mlb-trade.is-active .mlb-trade-label{background:linear-gradient(100deg,#0aa6c8,#7a4fd6);border-color:#ffffff55}
#maharat-login-design[data-layout=focus] .mlb-detail{max-width:560px;padding:15px 20px;border-radius:16px;background:#061f3ccc;border:1px solid #5fd8f044;box-shadow:0 14px 40px #00122f77}
#maharat-login-design[data-layout] .mlb-detail strong{font-size:16px;color:#fff}
#maharat-login-design[data-layout] .mlb-detail span{font-size:14px;color:#b9e3f2}
#maharat-login-design[data-layout] .mlb-motion{font-size:12px;padding:8px 16px;border-radius:999px;background:#061f3c99}
/* ---------- right side: the card ---------- */
#maharat-login-design[data-layout] .mlb-signin{padding:34px clamp(20px,3vw,64px);
  background:radial-gradient(80% 55% at 85% 0%,#bfeaff 0,#0000 70%),radial-gradient(70% 50% at 0% 100%,#e3d2ff 0,#0000 72%),#f3f9ff}
#maharat-login-design[data-layout=focus] .mlb-card{max-width:460px;padding:36px 38px 30px;border-radius:30px;border:1px solid #ffffffcc;
  background:linear-gradient(165deg,#ffffffee,#f4fbffe6);backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px #00b4d433,0 34px 90px #3a6fd02e,0 6px 20px #0a2a6012;animation:mr-rise .8s cubic-bezier(.2,.8,.2,1) both;position:relative}
#maharat-login-design[data-layout=focus] .mlb-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:30px 30px 0 0;background:linear-gradient(90deg,var(--mr-teal),var(--mr-violet))}
#maharat-login-design[data-layout=focus] .mlb-card .mlb-mini{height:72px;margin-bottom:20px}
#maharat-login-design[data-layout=focus] .mlb-mini .mlb-hub{width:104px;height:72px;padding:6px}
#maharat-login-design[data-layout] .loginform h1{font-size:34px!important;letter-spacing:-1.2px;color:var(--mr-ink)!important;text-shadow:none}
#maharat-login-design[data-layout] .loginform>.text-muted{font-size:15px;margin-bottom:26px!important}
#maharat-login-design[data-layout] .loginform .form-label{font-size:13px;font-weight:700;color:#41567a;letter-spacing:.3px}
#maharat-login-design[data-layout] .loginform input.form-control{height:56px;font-size:16px;border-radius:15px;border:1.5px solid #cfe0f3;background:#fff;
  box-shadow:inset 0 1px 2px #1a3b7010;padding-left:18px;transition:border-color .2s,box-shadow .2s}
#maharat-login-design[data-layout] .loginform input.form-control:hover{border-color:#8fcde0}
#maharat-login-design[data-layout] .loginform .form-control:focus{border-color:var(--mr-teal);box-shadow:0 0 0 4px #00b4d42b}
#maharat-login-design[data-layout] .toggle-sensitive-btn{right:7px;top:8px;width:40px;height:40px}
#maharat-login-design[data-layout] #loginbtn{height:58px;font-size:17px;font-weight:700;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(100deg,#009dc0,#7a4fd6)!important;box-shadow:0 12px 30px #5a62d046;transition:transform .2s,box-shadow .2s,filter .2s}
#maharat-login-design[data-layout] #loginbtn:hover{transform:translateY(-2px);box-shadow:0 18px 40px #5a62d066;filter:brightness(1.06)}
#maharat-login-design[data-layout] #loginbtn:active{transform:translateY(0)}
#maharat-login-design[data-layout] #loginbtn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,#fff0,#ffffff55,#fff0);transform:skewX(-20deg);transition:left .7s}
#maharat-login-design[data-layout] #loginbtn:hover:after{left:130%}
#maharat-login-design[data-layout] .loginform a,#maharat-login-design[data-layout] .loginform .btn-link{font-size:13px;font-weight:600}
#maharat-login-design[data-layout] .login-cookiesnotice{border-top-color:#dde8f6}
/* ---------- animation ---------- */
@keyframes mr-pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes mr-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes mr-twinkle{from{opacity:.25}to{opacity:.65}}
@keyframes mr-blink{50%{opacity:.3}}
@keyframes mr-rise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#maharat-login-design[data-layout] *,#maharat-login-design[data-layout] *:before,#maharat-login-design[data-layout] *:after{animation:none!important}}
#maharat-login-design.mlb-paused[data-layout] *,#maharat-login-design.mlb-paused[data-layout] *:before,#maharat-login-design.mlb-paused[data-layout] *:after{animation-play-state:paused!important}
/* ---------- responsive: the diagram always fits the screen height; narrow screens get a sheet layout ---------- */
#maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(340px,calc(100svh - 462px),720px)}
@media(min-width:1700px){#maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(420px,calc(100svh - 460px),780px)}}
@media(max-width:1280px){
  #maharat-login-design[data-layout]{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:150px;height:150px;padding:17px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:72px;height:72px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:36px;height:36px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade{width:140px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:12.5px;padding:5px 11px}
  #maharat-login-design[data-layout=focus] .mlb-card{padding:30px 28px 26px}}
@media(min-width:1001px) and (max-height:820px){
  #maharat-login-design[data-layout=focus] .mlb-hero-inner{padding-top:26px;padding-bottom:18px}
  #maharat-login-design[data-layout] h1{font-size:clamp(30px,3.2vw,46px)!important;margin-bottom:10px}
  #maharat-login-design[data-layout] .mlb-eyebrow{margin-bottom:12px;padding:5px 14px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(300px,calc(100svh - 330px),560px);margin-top:4px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:130px;height:130px;padding:14px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:62px;height:62px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:31px;height:31px}
  #maharat-login-design[data-layout] .mlb-detail{min-height:0;padding:10px 16px}}
/* tablet and phone (up to 1000 px): ONE SCREEN. Compact diagram on top, sign-in card slides over its bottom edge; both fit the screen height. */
@media(max-width:1000px){
  #maharat-login-design[data-layout]{display:flex;flex-direction:column;min-height:100svh;background:#04101f}
  #maharat-login-design[data-layout] .mlb-hero{order:0;min-height:0;flex:0 0 auto}
  #maharat-login-design[data-layout=focus] .mlb-hero-inner{padding:clamp(12px,2.4svh,28px) clamp(14px,4vw,40px) clamp(34px,5svh,56px);display:block;max-width:none}
  #maharat-login-design[data-layout] .mlb-eyebrow{font-size:clamp(9px,1.4vw,11px);letter-spacing:2px;padding:5px 12px;margin-bottom:clamp(6px,1.4svh,14px)}
  #maharat-login-design[data-layout] h1{font-size:clamp(22px,min(6vw,4.2svh),46px)!important;line-height:1.08;letter-spacing:-1px;margin-bottom:0}
  #maharat-login-design[data-layout] .mlb-location{display:block;font-size:clamp(11px,2.8vw,14px);letter-spacing:2.4px;margin:4px 0 0;color:#8fe6ff;font-weight:700;text-transform:uppercase}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{width:100%;max-width:min(620px,94vw);height:clamp(214px,31svh,440px);margin:clamp(4px,1svh,10px) auto 0}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:clamp(66px,min(15vw,11svh),120px);height:clamp(66px,min(15vw,11svh),120px);padding:clamp(7px,1.6vw,13px);border-width:3px}
  #maharat-login-design[data-layout] .mlb-hero .mlb-hub:before,#maharat-login-design[data-layout] .mlb-hero .mlb-hub:after{inset:-7px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade{width:clamp(70px,16vw,130px);gap:4px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:clamp(38px,min(9vw,6.4svh),66px);height:clamp(38px,min(9vw,6.4svh),66px);border-width:2px;box-shadow:0 0 0 3px #35d2f01f,0 6px 16px #00122f88}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:clamp(19px,4.6vw,34px);height:clamp(19px,4.6vw,34px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:clamp(9px,1.9vw,12.5px);padding:2px 8px;white-space:normal;max-width:clamp(66px,16vw,120px);line-height:1.15}
  #maharat-login-design[data-layout] .mlb-detail,#maharat-login-design[data-layout] .mlb-motion{display:none}
  #maharat-login-design[data-layout] .mlb-signin{order:1;flex:1 0 auto;margin-top:-30px;padding:clamp(14px,2.4svh,28px) clamp(12px,4vw,60px) 22px;border-radius:30px 30px 0 0;position:relative;z-index:3;
    box-shadow:0 -18px 50px #00122f66}
  #maharat-login-design[data-layout=focus] .mlb-card{max-width:520px;padding:clamp(16px,2.6svh,28px) clamp(18px,4vw,30px) clamp(12px,2svh,20px);border-radius:24px;box-shadow:0 10px 34px #3a6fd024}
  #maharat-login-design[data-layout=focus] .mlb-card:before{display:none}
  #maharat-login-design[data-layout=focus] .mlb-card .mlb-mini{display:none}
  #maharat-login-design[data-layout] .loginform h1{font-size:clamp(24px,3.6svh,32px)!important;margin-bottom:2px}
  #maharat-login-design[data-layout] .loginform>.text-muted{font-size:13px;margin-bottom:clamp(8px,1.6svh,18px)!important}
  #maharat-login-design[data-layout] .loginform .form-label{margin-bottom:3px}
  #maharat-login-design[data-layout] .loginform .mb-3,#maharat-login-design[data-layout] .loginform .form-group{margin-bottom:clamp(8px,1.4svh,14px)!important}
  #maharat-login-design[data-layout] .loginform input.form-control{height:clamp(48px,6.4svh,56px)}
  #maharat-login-design[data-layout] #loginbtn{height:clamp(50px,6.6svh,58px)}
  #maharat-login-design[data-layout] .login-cookiesnotice{margin-top:10px;padding-top:10px}}
/* tablets in portrait have more height: bigger diagram, still one screen */
@media(min-width:601px) and (max-width:1000px) and (min-height:900px){
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(300px,34svh,470px)}
  #maharat-login-design[data-layout] .mlb-eyebrow{font-size:11px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:12.5px}}
/* short phones: the cookies link moves below the fold so the form stays in view */
@media(max-width:1000px) and (max-height:700px){
  #maharat-login-design[data-layout] .login-cookiesnotice{display:none}
  #maharat-login-design[data-layout] .loginform>.text-muted{display:none}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(190px,29svh,300px)}}
/* small landscape tablets and phones: diagram left, card right (no scrolling) */
@media(max-width:1000px) and (orientation:landscape) and (max-height:620px){
  #maharat-login-design[data-layout]{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);min-height:100svh}
  #maharat-login-design[data-layout] .mlb-hero{order:0}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(190px,62svh,330px)}
  #maharat-login-design[data-layout] .mlb-signin{order:1;margin-top:0;border-radius:0;box-shadow:none;justify-content:center;padding:14px 18px}
  #maharat-login-design[data-layout] .loginform>.text-muted{display:none}}
@media(max-width:380px){#maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:8.6px;max-width:62px}}

/* Light effects (21 Oct 2026): CSS only, transform/opacity only, all off for people who ask for reduced motion. */
@media(prefers-reduced-motion:no-preference){
  @keyframes mr-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes mr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes mr-sweep{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(260%) skewX(-20deg)}}
  @keyframes mr-dot{0%,100%{opacity:1}50%{opacity:.35}}
  #maharat-login-design[data-layout] .mlb-card{animation:mr-rise .6s cubic-bezier(.2,.7,.2,1) both}
  #maharat-login-design[data-layout] .mlb-hero-inner>h1,#maharat-login-design[data-layout] .mlb-location{animation:mr-rise .7s .1s cubic-bezier(.2,.7,.2,1) both}
  #maharat-login-design[data-layout] .mlb-hero .mlb-node{animation:mr-float 6s ease-in-out infinite}
  #maharat-login-design[data-layout] .mlb-hero .mlb-trade:nth-child(2n) .mlb-node{animation-delay:-2s}
  #maharat-login-design[data-layout] .mlb-hero .mlb-trade:nth-child(3n) .mlb-node{animation-delay:-4s;animation-duration:7s}
  #maharat-login-design[data-layout] .mlb-eyebrow:before{animation:mr-dot 2.4s ease-in-out infinite}
  #maharat-login-design[data-layout] #loginbtn{position:relative;overflow:hidden}
  #maharat-login-design[data-layout] #loginbtn:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,#ffffff55,transparent);animation:mr-sweep 5s 1.5s ease-in-out infinite;pointer-events:none}
}
#maharat-login-design[data-layout] .loginform input.form-control{transition:box-shadow .2s,border-color .2s}
#maharat-login-design[data-layout] .loginform input.form-control:focus{border-color:#2a8fd6;box-shadow:0 0 0 4px #35d2f033}
#maharat-login-design[data-layout] #loginbtn{transition:transform .15s,box-shadow .2s}
#maharat-login-design[data-layout] #loginbtn:hover{transform:translateY(-1px);box-shadow:0 10px 26px #2a8fd655}
#maharat-login-design[data-layout] #loginbtn:active{transform:none}

/* Branch buttons: keep their centring transform in EVERY state (a press used to drop it, so the card jumped down-left), smooth press feedback on the icon only. */
#maharat-login-design[data-layout] .mlb-hero .mlb-trade,
#maharat-login-design[data-layout] .mlb-hero .mlb-trade:is(:hover,:active,:focus,:focus-visible,.is-active){transform:translate(-50%,-50%)!important;-webkit-tap-highlight-color:transparent;outline:0}
#maharat-login-design[data-layout] .mlb-hero .mlb-trade:focus-visible .mlb-node{outline:2px solid #b1efff;outline-offset:4px}
#maharat-login-design[data-layout] .mlb-hero .mlb-node{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease}
#maharat-login-design[data-layout] .mlb-hero .mlb-trade:active .mlb-node{transform:scale(.93)}
#maharat-login-design[data-layout] .mlb-hero .mlb-trade-label{transition:background .35s ease,border-color .35s ease,transform .35s ease}
#maharat-login-design[data-layout] .mlb-hero .mlb-trade.is-active .mlb-trade-label{transform:translateY(2px)}
#maharat-login-design[data-layout] .mlb-detail strong,#maharat-login-design[data-layout] .mlb-detail span{transition:opacity .25s ease}
@media(prefers-reduced-motion:no-preference){
  /* the float uses the separate "translate" property so it never fights the hover/press scale */
  @keyframes mr-float2{0%,100%{translate:0 0}50%{translate:0 -5px}}
  @keyframes mr-ping{0%{box-shadow:0 0 0 0 #35e0ffcc,0 16px 40px #00122faa}100%{box-shadow:0 0 0 26px #35e0ff00,0 16px 40px #00122faa}}
  #maharat-login-design[data-layout] .mlb-hero .mlb-node{animation:mr-float2 6s ease-in-out infinite}
  #maharat-login-design[data-layout] .mlb-hero .mlb-trade.is-active .mlb-node{animation:mr-float2 6s ease-in-out infinite,mr-ping .8s ease-out 1}
}
/* Desktop: a bigger sign-in card */
@media(min-width:1001px){
  #maharat-login-design[data-layout=focus] .mlb-card{max-width:600px;width:100%;padding:52px 56px 40px;border-radius:34px}
  #maharat-login-design[data-layout=focus] .mlb-card:before{border-radius:34px 34px 0 0}
  #maharat-login-design[data-layout] .mlb-signin{padding:40px clamp(24px,3vw,72px)}
  #maharat-login-design[data-layout] .loginform h1{font-size:44px!important;margin-bottom:6px}
  #maharat-login-design[data-layout] .loginform>.text-muted{font-size:17px;margin-bottom:28px!important}
  #maharat-login-design[data-layout] .loginform .form-label{font-size:15px;margin-bottom:7px}
  #maharat-login-design[data-layout] .loginform .mb-3,#maharat-login-design[data-layout] .loginform .form-group{margin-bottom:22px!important}
  #maharat-login-design[data-layout] .loginform input.form-control{height:64px;font-size:18px;border-radius:16px;padding-left:20px}
  #maharat-login-design[data-layout] #loginbtn{height:66px;font-size:20px;border-radius:16px}
  #maharat-login-design[data-layout] .login-cookiesnotice{margin-top:22px;padding-top:18px}
  #maharat-login-design[data-layout=focus] .mlb-card .mlb-mini{transform:scale(1.25);margin-bottom:8px}}

/* Wide screens (1700 px and up, 4K): everything grows in proportion; sizes follow the screen, nothing is zoomed. */
@media(min-width:1700px){
  #maharat-login-design[data-layout=focus] .mlb-hero-inner{max-width:1360px;padding:54px clamp(40px,4vw,110px) 34px}
  #maharat-login-design[data-layout] .mlb-eyebrow{font-size:14px;padding:9px 20px;margin-bottom:26px}
  #maharat-login-design[data-layout] h1{font-size:clamp(76px,4.6vw,116px)!important}
  #maharat-login-design[data-layout] .mlb-location{font-size:19px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{max-width:1240px;height:clamp(400px,calc(100svh - 590px),860px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:clamp(210px,12vw,300px);height:clamp(210px,12vw,300px);padding:26px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade{width:210px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:clamp(100px,5.8vw,140px);height:clamp(100px,5.8vw,140px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:clamp(52px,3vw,72px);height:clamp(52px,3vw,72px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{font-size:clamp(17px,1vw,23px);padding:8px 20px}
  #maharat-login-design[data-layout=focus] .mlb-detail{max-width:700px;padding:18px 26px}
  #maharat-login-design[data-layout] .mlb-detail strong{font-size:20px}
  #maharat-login-design[data-layout] .mlb-detail span{font-size:17px}
  #maharat-login-design[data-layout] .mlb-motion{font-size:14px;padding:10px 20px}
  #maharat-login-design[data-layout=focus] .mlb-card{max-width:clamp(600px,32vw,820px);padding:clamp(52px,3.2vw,84px) clamp(56px,3.4vw,88px) clamp(40px,2.4vw,60px)}
  #maharat-login-design[data-layout] .loginform h1{font-size:clamp(44px,2.7vw,66px)!important}
  #maharat-login-design[data-layout] .loginform>.text-muted{font-size:clamp(17px,1.05vw,24px)}
  #maharat-login-design[data-layout] .loginform .form-label{font-size:clamp(15px,.9vw,21px)}
  #maharat-login-design[data-layout] .loginform input.form-control{height:clamp(64px,3.9vw,92px);font-size:clamp(18px,1.1vw,26px)}
  #maharat-login-design[data-layout] #loginbtn{height:clamp(66px,4vw,94px);font-size:clamp(20px,1.2vw,28px)}
  #maharat-login-design[data-layout] .login-cookiesnotice{font-size:clamp(14px,.85vw,19px)}}
/* wide but not tall (for example 1920 x 900): size by height too, so nothing overlaps */
@media(min-width:1700px) and (max-height:1050px){
  #maharat-login-design[data-layout=focus] .mlb-hero-inner{padding-top:34px;padding-bottom:20px}
  #maharat-login-design[data-layout] .mlb-eyebrow{margin-bottom:16px}
  #maharat-login-design[data-layout] h1{font-size:clamp(56px,min(4.6vw,8.2svh),116px)!important}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(360px,calc(100svh - 470px),860px);margin-top:10px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:clamp(180px,min(12vw,21svh),300px);height:clamp(180px,min(12vw,21svh),300px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:clamp(84px,min(5.8vw,10.4svh),140px);height:clamp(84px,min(5.8vw,10.4svh),140px)}
  #maharat-login-design[data-layout=focus] .mlb-detail{padding:12px 22px}}
@media(min-width:1700px){#maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{margin-top:34px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-network{height:clamp(360px,calc(100svh - 500px),860px)}}

/* Smaller cards on the diagram side (owner: "the cards are too big") */
@media(min-width:1001px){
  #maharat-login-design[data-layout=focus] .mlb-hero-inner>.mlb-eyebrow{justify-self:start;width:fit-content;max-width:100%;padding:6px 16px;font-size:12px;margin-bottom:14px}
  #maharat-login-design[data-layout=focus] .mlb-detail{justify-self:start;max-width:340px;min-height:0;padding:10px 16px;border-radius:14px;margin-top:6px}
  #maharat-login-design[data-layout] .mlb-detail strong{font-size:15px}
  #maharat-login-design[data-layout] .mlb-detail span{font-size:13px;line-height:1.35}
  #maharat-login-design[data-layout] .mlb-motion{font-size:12px;padding:7px 14px}}
@media(min-width:1700px){
  #maharat-login-design[data-layout=focus] .mlb-hero-inner>.mlb-eyebrow{padding:8px 18px;font-size:13px}
  #maharat-login-design[data-layout=focus] .mlb-detail{max-width:400px;padding:12px 20px}
  #maharat-login-design[data-layout] .mlb-detail strong{font-size:17px}
  #maharat-login-design[data-layout] .mlb-detail span{font-size:14.5px}}

/* Hub smaller on wide screens so the bottom branch (Instrumentation) never touches it; plain white hub so the logo has no visible box */
@media(min-width:1700px){
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:clamp(170px,min(9.6vw,17svh),260px);height:clamp(170px,min(9.6vw,17svh),260px);padding:22px;background:#fff}}
@media(min-width:1001px) and (max-width:1699px){#maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{background:#fff}}
@media(min-width:1700px) and (max-height:1050px){#maharat-login-design[data-layout=focus] .mlb-hero .mlb-hub{width:clamp(150px,min(9vw,14.5svh),240px);height:clamp(150px,min(9vw,14.5svh),240px);padding:18px}}
/* six branches: keep each icon and its label clear of the next branch, whatever the screen height */
@media(min-width:1700px) and (max-height:1050px){
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node{width:clamp(64px,min(5.8vw,8.2svh),140px);height:clamp(64px,min(5.8vw,8.2svh),140px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-node svg{width:clamp(34px,min(3vw,4.4svh),72px);height:clamp(34px,min(3vw,4.4svh),72px)}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade{gap:8px}
  #maharat-login-design[data-layout=focus] .mlb-hero .mlb-trade-label{padding:5px 16px;font-size:clamp(15px,min(1vw,1.9svh),23px)}}