:root { --navy:#103F65; --navy-deep:#092c49; --cyan:#00B5DF; --red:#ED1C24; --ink:#17334c; --muted:#6c7f90; --line:#dbe5ec; --pale:#f3f8fb; }
    * { box-sizing:border-box; }
    html,body { margin:0; min-height:100%; }
    body { font-family: "DB Helvethaica X", "Browallia New", "Segoe UI", Tahoma, sans-serif; color:var(--ink); background:#e9f1f5; }
    .app { min-height:100svh; display:grid; grid-template-columns:minmax(0,1.13fr) minmax(440px,.87fr); }
    .brand { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:44px clamp(35px,5.3vw,96px) 35px; color:white; background:linear-gradient(132deg,#12466c 0%,#103F65 44%,#072943 100%); }
    .brand::before {content:""; position:absolute; z-index:-1; inset:0; opacity:.19; background-image:linear-gradient(#79c6e2 1px,transparent 1px),linear-gradient(90deg,#79c6e2 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(135deg, transparent 6%,black 95%); }
    .brand::after {content:"";position:absolute;z-index:-1;width:600px;height:600px;right:-330px;top:24%;border:1px solid #ffffff33;border-radius:50%;box-shadow:0 0 0 90px #ffffff05,0 0 0 180px #ffffff05;}
    .brand-top { display:flex; align-items:center; gap:14px; font-size:12px; font-weight:700; letter-spacing:2px; }
    .brand-mark { width:12px;height:32px;background:var(--cyan);border-radius:2px; }
    .brand-center { max-width:670px; padding-block:80px 65px; }
    .overline { color:#8de5f7; font-size:14px; font-weight:700; letter-spacing:4px; text-transform:uppercase; }
    h1 { font-size:clamp(65px,7vw,116px); line-height:.94; letter-spacing:-4px; margin:22px 0 25px; font-weight:800; }
    h1 span {color:#46d6f1;}
    .brand-desc { font-size:clamp(19px,2.0vw,28px); font-weight:400; max-width:590px; line-height:1.55; margin:0; color:#e5f2fa; }
    .brand-rule { width:68px; height:5px; background:var(--red); margin:33px 0 30px; border-radius:3px; }
    .pills { display:flex; gap:12px; flex-wrap:wrap; }
    .pill { font-size:13px; border:1px solid #ffffff38; color:#d7eaf4; padding:10px 14px; border-radius:40px; background:#ffffff0a; }
    .brand-bottom { display:flex; justify-content:space-between; gap:20px; align-items:end; font-size:12px; color:#bdd1df; }
    .brand-bottom b {color:#fff; font-size:14px;}
    .login-side { display:flex; flex-direction:column; background:#fff; }
    .header {padding:35px clamp(30px,5.5vw,90px) 0; display:flex;align-items:center;justify-content:space-between;gap:16px;}
    .logo {width:clamp(185px,21vw,265px);max-width:100%;height:auto;display:block;}
    .header-label {font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#71879b;font-weight:700;text-align:right;}
    .login-middle { flex:1; display:flex; flex-direction:column; justify-content:center; width:min(100%,580px); margin:0 auto; padding:52px clamp(30px,5.5vw,90px) 60px; }
    .eyebrow {color:#008eaf;font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:800;margin:0 0 13px;}
    h2 {font-size:clamp(30px,3vw,43px);line-height:1.15;letter-spacing:-1px;margin:0 0 12px;color:var(--navy);}
    .intro {font-size:16px;color:var(--muted);line-height:1.6;margin:0 0 34px;}
    label {font-size:14px;font-weight:700;display:block;margin:0 0 9px;}
    .field {margin-bottom:22px;}
    .field input {font:inherit; font-size:16px; display:block;width:100%;height:57px;border:1px solid #ccdae4;border-radius:10px;padding:0 17px;color:var(--ink);outline:none;background:#fbfdfe;transition:all .2s;}
    .field input:focus {border-color:#00a9d1;box-shadow:0 0 0 4px #00b5df1a;background:#fff;}
    .field input::placeholder {color:#a0afbb;}
    .password-wrap {position:relative;}
    .password-wrap input {padding-right:67px;}
    .show-password {position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#47738f;font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:10px;}
    .forgot {display:flex;justify-content:flex-end;margin:-3px 0 23px;}
    a {color:#087caa;text-decoration:none;font-weight:700;}
    a:hover {text-decoration:underline;}
    .signin {appearance:none;width:100%;height:58px;border:0;border-radius:10px;color:white;font:inherit;font-size:17px;font-weight:800;letter-spacing:.3px;background:var(--navy);cursor:pointer;box-shadow:0 8px 20px #103f6526;transition:background .2s,transform .2s;}
    .signin:hover {background:#075981;transform:translateY(-1px);}
    .signin:focus-visible,.show-password:focus-visible,a:focus-visible {outline:3px solid var(--cyan);outline-offset:3px;}
    .signin span {margin-left:9px;}
    .signup {font-size:14px;color:var(--muted);text-align:center;margin:28px 0 0;}
    .divider {height:1px;background:var(--line);margin:34px 0 21px;}
    .security {display:flex;align-items:center;gap:10px;color:#8293a0;font-size:12px;line-height:1.5;}
    .security svg {flex:none;color:#30a6c0;}
    .footer {border-top:1px solid #edf1f4;color:#8a99a5; padding:19px clamp(30px,5.5vw,90px);font-size:11px;display:flex;justify-content:space-between;gap:12px;}
    @media(max-width:950px) { .app {grid-template-columns:1fr;} .brand {padding:24px 30px;min-height:250px;} .brand-center {padding:30px 0 16px;} h1{font-size:55px;letter-spacing:-2px;margin:13px 0;} .brand-desc{font-size:17px;} .brand-rule,.pills,.brand-bottom{display:none;} .login-middle{padding:48px 30px 55px;max-width:550px;} .header{padding:27px 30px 0;} .footer{padding:20px 30px;} }
    @media(max-width:540px) { .brand {min-height:215px;padding:22px 24px;} .brand-top {font-size:10px;} .brand-center{padding:24px 0 5px;} h1{font-size:49px;} .brand-desc{font-size:15px;} .header {padding:24px 24px 0;} .logo {width:190px;} .header-label{font-size:9px;} .login-middle{padding:40px 24px 48px;} h2{font-size:32px;} .footer{padding:18px 24px;font-size:10px;flex-wrap:wrap;} }
    @media(prefers-reduced-motion:reduce){*{transition:none!important;}}

    /* V1.1: viewport-fit layout. Small/short screens may scroll rather than clip fields. */
    html { min-height:100%; }
    .app { min-height:100vh; min-height:100svh; }
    @supports (height:100dvh) { .app { min-height:100dvh; } }
    @media (min-width:951px) {
      .app { height:100vh; height:100svh; min-height:580px; }
      @supports (height:100dvh) { .app { height:100dvh; } }
      .brand { padding-top:clamp(20px,3.4vh,44px);padding-bottom:clamp(16px,2.7vh,35px); }
      .brand-center { padding-block:clamp(14px,4vh,65px); }
      h1 { font-size:clamp(56px,min(7vw,12vh),116px); margin-block:clamp(10px,2vh,22px) clamp(10px,2.4vh,25px); }
      .brand-desc { font-size:clamp(18px,2vw,26px);line-height:1.35; }
      .brand-rule {margin:clamp(12px,2.5vh,33px) 0 clamp(10px,2.5vh,30px);}
      .header {padding-top:clamp(14px,3vh,35px);}
      .login-middle {min-height:0;padding-top:clamp(14px,3vh,52px);padding-bottom:clamp(14px,3vh,60px);}
      h2 {font-size:clamp(28px,min(3vw,5vh),43px);}
      .intro {margin-bottom:clamp(12px,2.6vh,34px);}
      .field {margin-bottom:clamp(12px,2vh,22px);}
      .field input {height:clamp(44px,6.2vh,57px);}
      .forgot {margin-bottom:clamp(12px,2vh,23px);}
      .signin {height:clamp(45px,6.3vh,58px);}
      .signup {margin-top:clamp(12px,2.5vh,28px);}
      .divider {margin:clamp(12px,2.8vh,34px) 0 clamp(10px,1.8vh,21px);}
      .footer {padding-top:clamp(10px,1.6vh,19px);padding-bottom:clamp(10px,1.6vh,19px);}
    }
    /* Tablet: keep a compact brand banner and login in one vertical flow. */
    @media (min-width:541px) and (max-width:950px) {
      .app { min-height:100vh; min-height:100svh; }
      .brand {min-height:0;padding:18px 30px;}
      .brand-center {padding:12px 0 0;}
      .brand-desc {font-size:16px;}
      .login-middle {padding:24px 30px 30px;}
      .intro {margin-bottom:18px;}
      .field {margin-bottom:15px;}
      .signup {margin-top:16px;}
      .divider {margin:18px 0 12px;}
    }
    /* Phones: prioritize login form; reduce hero height and repeated text. */
    @media (max-width:540px) {
      .app {display:flex;flex-direction:column;min-height:100vh;min-height:100svh;}
      @supports (min-height:100dvh) { .app {min-height:100dvh;} }
      .brand {flex:none;min-height:0;padding:14px 20px 15px;justify-content:flex-start;}
      .brand-top {font-size:10px;letter-spacing:1.4px;gap:9px;}
      .brand-mark {width:7px;height:19px;}
      .brand-center {padding:8px 0 0;}
      .overline {font-size:10px;letter-spacing:1.5px;}
      h1 {font-size:clamp(32px,9vw,45px);line-height:.95;letter-spacing:-1px;margin:8px 0 6px;}
      h1 br {display:none;}
      h1 span {margin-left:7px;}
      .brand-desc {font-size:12px;line-height:1.35;max-width:330px;}
      .login-side {flex:1;min-height:0;}
      .header {padding:12px 20px 0;}
      .logo {width:85px;}
      .header-label {font-size:8px;letter-spacing:.5px;}
      .login-middle {flex:1;width:100%;max-width:440px;padding:15px 20px 16px;}
      .eyebrow {font-size:10px;letter-spacing:1.2px;margin-bottom:5px;}
      h2 {font-size:26px;letter-spacing:-.4px;margin-bottom:6px;}
      .intro {font-size:13px;line-height:1.4;margin-bottom:15px;}
      label {font-size:12px;margin-bottom:5px;}
      .field {margin-bottom:11px;}
      .field input {height:43px;font-size:16px;border-radius:8px;}
      .forgot {font-size:12px;margin:0 0 12px;}
      .signin {height:45px;font-size:15px;border-radius:8px;}
      .signup {font-size:12px;margin-top:13px;}
      .divider {margin:14px 0 11px;}
      .security {font-size:11px;}
      .footer {padding:10px 20px;font-size:9px;}
    }
    /* Extra-short phones, landscape, or browser chrome: permit safe scrolling. */
    @media (max-width:540px) and (max-height:720px) {
      .brand {padding-block:10px;}
      .brand-center {padding-top:5px;}
      .brand-desc {display:none;}
      .header {padding-top:9px;}
      .login-middle {justify-content:flex-start;padding-top:12px;padding-bottom:12px;}
      .intro {margin-bottom:11px;}
      .divider {margin-block:10px 8px;}
      .footer {padding-block:8px;}
    }
    @media (max-width:540px) and (max-height:600px) {
      .brand {padding-block:8px;}
      .overline {display:none;}
      h1 {font-size:30px;margin:4px 0 0;}
      .header-label,.intro,.security,.divider {display:none;}
      .login-middle {padding-top:9px;}
      .field {margin-bottom:8px;}
    }
  
    .reset-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;color:var(--navy);background:#e8f7fc;border:1px solid #caedf7;border-radius:15px;margin-bottom:19px}
    .reset-icon svg{width:27px;height:27px}
    .reset-link{display:inline-flex;gap:8px;align-items:center;margin-top:25px;font-size:14px}
    .reset-link svg{width:17px;height:17px}
    .reset-hint{font-size:13px;color:var(--muted);line-height:1.6;margin:10px 0 0}
    .notice{background:#fff8e9;border:1px solid #f1d99e;color:#775313;padding:15px 17px;border-radius:10px;line-height:1.6;font-size:14px;margin:17px 0}
    .field .required{color:var(--red)}
    .app .reset-middle{padding-top:clamp(14px,3vh,52px);padding-bottom:clamp(14px,3vh,60px)}
    @media(max-width:540px){.reset-icon{width:43px;height:43px;border-radius:12px;margin-bottom:12px}.reset-icon svg{width:22px;height:22px}.reset-link{margin-top:17px}.reset-hint{font-size:12px}.app .reset-middle{padding:15px 20px 16px}}
    @media(max-width:540px) and (max-height:720px){.reset-icon{margin-bottom:8px}.reset-link{margin-top:12px}}
  /* V1.4 — PPS Apps Series integration */
    .brand-top .series-badge{width:36px;height:36px;object-fit:contain;border-radius:9px;flex-shrink:0}
    .header {align-items:center;}
    .header .logo{object-fit:contain;object-position:left center;}
    @media(max-width:540px){.brand-top .series-badge{width:25px;height:25px}.header .logo{width:min(190px,56vw)}.header-label{font-size:8px;}}
  
/* V1.5 — language selector. Keep V1.4 layout and assets unchanged. */
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0}
.language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid #d7e3eb;background:#f3f8fb;border-radius:9px;flex:none}
.language-switch button{font:inherit;font-size:12px;font-weight:800;color:#446c85;min-width:36px;height:30px;border:0;border-radius:6px;background:transparent;cursor:pointer}
.language-switch button.is-active{background:#103F65;color:#fff;box-shadow:0 1px 4px #103f6530}
.language-switch button:focus-visible{outline:2px solid #00B5DF;outline-offset:2px}
@media(max-width:540px){.header-tools{gap:6px}.language-switch{padding:2px}.language-switch button{min-width:30px;height:27px;font-size:11px}.header-label{display:none}.header .logo{width:min(176px,46vw)}}