/* Extracted from index.php; keep PHP pages clean. */
:root{
      --bg:#05080d;
      --card:#111821;
      --card-2:#0c121b;
      --input:#1b2430;
      --input-2:#151e29;
      --border:#2b3748;
      --line:rgba(255,255,255,.10);
      --text:#ffffff;
      --muted:#b8c9df;
      --muted-2:#8fa2bb;
      --orange:#ff950f;
      --orange-2:#ffc247;
      --orange-3:#ff7a00;
      --danger:#ff576d;
      --ok:#37d67a;
      --shadow:0 26px 80px rgba(0,0,0,.75);
      --radius:26px;
      --font:Arial, Helvetica, sans-serif;
    }

    *{box-sizing:border-box}
    html,body{min-height:100%;width:100%;margin:0;overflow-x:hidden}
    body{
      min-height:100vh;min-height:100dvh;
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 50% -10%, rgba(255,149,15,.28), transparent 32%),
        radial-gradient(circle at 0% 18%, rgba(255,194,71,.12), transparent 26%),
        radial-gradient(circle at 100% 92%, rgba(255,122,0,.16), transparent 30%),
        linear-gradient(145deg,#000 0%,#06101b 48%,#000 100%);
    }

    .auth-page{
      min-height:100vh;min-height:100dvh;
      width:100%;
      display:grid;
      place-items:center;
      padding:clamp(10px,2.3vw,28px);
      position:relative;
      isolation:isolate;
    }
    .auth-page:before{
      content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.18;
      background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:radial-gradient(circle at center, #000, transparent 75%);
    }

    .auth-shell{
      width:min(100%, 430px);
      position:relative;
      animation:cardIn .45s ease both;
    }
    @keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

    .auth-card{
      width:100%;
      max-height:calc(100dvh - 20px);
      overflow-y:auto;
      scrollbar-width:thin;
      scrollbar-color:rgba(255,149,15,.85) rgba(255,255,255,.05);
      border-radius:var(--radius);
      padding:clamp(20px,4.6vw,30px);
      background:
        linear-gradient(180deg,rgba(255,255,255,.035),transparent 18%),
        linear-gradient(180deg,var(--card),var(--card-2));
      border:1px solid rgba(255,149,15,.42);
      border-top:3px solid var(--orange);
      box-shadow:var(--shadow), 0 0 44px rgba(255,149,15,.10) inset;
      position:relative;
    }
    .auth-card::-webkit-scrollbar{width:5px}.auth-card::-webkit-scrollbar-track{background:transparent}.auth-card::-webkit-scrollbar-thumb{background:rgba(255,149,15,.75);border-radius:20px}

    .module{display:none;animation:fadeUp .28s ease both}.module.active{display:block}
    @keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

    .brand{text-align:center;margin-bottom:22px}
    .logo-box{
      width:clamp(58px,15vw,76px);height:clamp(58px,15vw,76px);
      margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;
      background:linear-gradient(145deg,#171f2b,#0a0f16);
      border:1px solid rgba(255,149,15,.75);
      box-shadow:0 0 0 10px rgba(255,149,15,.04),0 0 30px rgba(255,149,15,.22);
    }
    .logo-box img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(255,149,15,.22))}
    .title{font-size:clamp(24px,6vw,32px);line-height:1.1;margin:0 0 10px;font-weight:1000;letter-spacing:.2px;text-shadow:2px 3px 0 rgba(255,149,15,.28)}
    .subtitle{margin:0 auto;color:var(--muted);font-size:clamp(13px,3.5vw,15px);line-height:1.55;max-width:340px}

    form{margin:0}.form-row{margin-bottom:15px}.form-label{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#fff;font-size:14px;font-weight:900}.form-label i{color:var(--orange-2)}
    .input-wrap{position:relative;display:flex;align-items:center}
    .input-icon,.password-toggle{position:absolute;display:grid;place-items:center;color:#a8bed8;z-index:2;transition:.22s ease}.input-icon{left:14px;width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.025)}.password-toggle{right:12px;width:36px;height:36px;border:0;background:transparent;cursor:pointer;border-radius:12px}.password-toggle:hover{background:rgba(255,149,15,.12);color:var(--orange-2)}
    .control{
      width:100%;height:clamp(48px,12vw,56px);border-radius:16px;border:1px solid var(--border);
      background:linear-gradient(180deg,var(--input),var(--input-2));color:#fff;
      padding:0 48px;font-size:15px;font-weight:800;outline:none;transition:.24s ease;
    }
    .control::placeholder{color:#91a2b8;font-weight:800}.control:focus{border-color:rgba(255,149,15,.95);box-shadow:0 0 0 4px rgba(255,149,15,.13),0 12px 26px rgba(0,0,0,.22)}
    .input-wrap:focus-within .input-icon{color:var(--orange-2);background:rgba(255,149,15,.14);transform:scale(1.05)}

    .helper{display:block;margin-top:-4px;margin-bottom:13px;color:var(--muted);font-size:12px;line-height:1.45}.helper strong{color:var(--orange-2)}

    .remember-forgot{
      display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
      margin:4px 0 18px;padding:10px 12px;border-radius:16px;
      background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
    }
    .checkline{display:inline-flex;align-items:center;gap:9px;margin:0;color:#fff;font-size:13px;font-weight:900;cursor:pointer;user-select:none}.checkline input{width:18px;height:18px;margin:0;accent-color:var(--orange);cursor:pointer}.link-action{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:7px;color:var(--orange-2);font-size:13px;font-weight:1000;text-decoration:none;cursor:pointer}.link-action:hover{color:#fff;text-decoration:none}.link-action i{font-size:14px}

    .auth-actions{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
    .btn-main,.btn-soft,.btn-light-action{
      width:100%;min-height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:12px;
      font-weight:1000;font-size:15px;cursor:pointer;transition:.25s ease;text-decoration:none;position:relative;overflow:hidden;
    }
    .btn-main{border:0;background:linear-gradient(135deg,var(--orange-3),var(--orange-2));color:#101010;box-shadow:0 16px 34px rgba(255,149,15,.30)}
    .btn-main:before{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:.5s ease}.btn-main:hover:before{transform:translateX(120%)}
    .btn-soft{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);color:#fff}.btn-soft:hover{border-color:rgba(255,149,15,.70);background:rgba(255,149,15,.10);color:#fff}
    .btn-light-action{border:0;background:#eef2f8;color:#111;min-height:50px}.btn-light-action:hover{background:#fff;color:#000;transform:translateY(-2px)}
    .btn-icon{width:32px;height:32px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.23);font-size:18px;flex:0 0 auto}.btn-soft .btn-icon{background:rgba(255,149,15,.13);color:var(--orange-2)}.btn-light-action .btn-icon{background:rgba(255,149,15,.14);color:#111}.btn-main:hover,.btn-soft:hover{transform:translateY(-2px)}.btn-main:active,.btn-soft:active,.btn-light-action:active{transform:scale(.985)}

    .bottom-text{margin:18px 0 0;text-align:center;color:var(--muted);font-size:13px;line-height:1.7}.bottom-text button,.bottom-text a{border:0;background:none;color:var(--orange-2);font-weight:1000;text-decoration:none;padding:0;cursor:pointer}.bottom-text button:hover,.bottom-text a:hover{color:#fff}

    .scan-box{margin:20px 0 14px;padding:20px;border-radius:22px;background:#05070a;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
    .scanner-frame{height:150px;border-radius:18px;border:1px solid rgba(255,194,71,.9);background:radial-gradient(circle at center,rgba(255,149,15,.12),transparent 58%),#020304;position:relative;overflow:hidden;display:grid;place-items:center;color:#fff;text-align:center;font-size:12px}
    .scanner-frame:before{content:"";position:absolute;left:26px;right:26px;height:2px;background:linear-gradient(90deg,transparent,var(--orange-2),transparent);box-shadow:0 0 20px var(--orange);animation:scan 2s linear infinite}.scanner-frame:after{content:"Scanner not supported here. Type the login ID below.";position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-size:11px;font-weight:800}@keyframes scan{0%{top:26px}50%{top:114px}100%{top:26px}}

    .otp-group{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:8px}
    .divider{display:flex;align-items:center;gap:12px;margin:19px 0;color:var(--muted-2);font-size:12px;font-weight:900}.divider:before,.divider:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.09)}

    @media (min-width:520px){.auth-shell{width:min(100%, 520px)}.login-module .auth-actions{grid-template-columns:1fr 1fr}.otp-group{grid-template-columns:1fr 160px;align-items:end}.otp-group .btn-light-action{height:56px}.scan-box{padding:22px}.scanner-frame{height:160px}}
    @media (min-width:820px){.auth-shell.wide-register{width:min(100%, 760px)}.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.register-grid .full{grid-column:1/-1}.register-module .auth-actions{max-width:360px;margin-left:auto;margin-right:auto}}
    @media (max-width:390px){.auth-page{padding:8px}.auth-card{border-radius:21px;padding:18px 14px}.remember-forgot{align-items:flex-start;flex-direction:column}.control{font-size:14px;padding-left:45px;padding-right:43px}.title{font-size:23px}.btn-main,.btn-soft,.btn-light-action{font-size:14px;border-radius:15px}.btn-icon{width:29px;height:29px}.scanner-frame{height:135px}.scan-box{padding:14px}}
    @media (max-height:700px){.auth-card{max-height:calc(100dvh - 14px)}.brand{margin-bottom:15px}.logo-box{margin-bottom:13px}.subtitle{line-height:1.42}.form-row{margin-bottom:12px}.control{height:48px}.btn-main,.btn-soft{min-height:50px}}


    /* ===== FULL RESPONSIVENESS UPGRADE ===== */
    .auth-page{
      padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }
    .auth-shell{
      width:clamp(280px, 94vw, 440px);
      max-width:100%;
    }
    .auth-card{
      width:100%;
      max-height:min(94dvh, calc(100dvh - 20px));
      overscroll-behavior:contain;
    }
    .control,
    .btn-main,
    .btn-soft,
    .btn-light-action{
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }
    .bottom-text button,
    .link-action{
      min-height:30px;
    }

    @media (min-width:480px){
      .auth-page{padding:18px;}
      .auth-shell{width:min(94vw, 470px);}
    }

    @media (min-width:560px){
      .auth-shell{width:min(94vw, 520px);}
      .login-module .auth-actions{grid-template-columns:1fr 1fr;}
      .otp-group{grid-template-columns:minmax(0,1fr) 158px;align-items:end;}
      .otp-group .btn-light-action{height:56px;}
    }

    @media (min-width:760px){
      .auth-card{padding:32px;}
      .auth-shell.wide-register{width:min(94vw, 720px);}
      .register-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;}
      .register-grid .full{grid-column:1/-1;}
      .register-module .auth-actions{max-width:380px;margin-left:auto;margin-right:auto;}
    }

    @media (min-width:1100px){
      .auth-shell{width:430px;}
      .auth-shell.wide-register{width:760px;}
      .auth-card{max-height:92dvh;}
    }

    @media (max-width:430px){
      .auth-page{align-items:center;padding:8px;}
      .auth-shell{width:100%;}
      .auth-card{border-radius:22px;padding:18px 14px;max-height:calc(100dvh - 16px);}
      .brand{margin-bottom:17px;}
      .title{font-size:clamp(22px, 7.2vw, 27px);}
      .subtitle{font-size:13px;max-width:310px;}
      .form-label{font-size:13px;margin-bottom:7px;}
      .form-row{margin-bottom:13px;}
      .control{height:50px;border-radius:14px;font-size:14px;padding-left:46px;padding-right:44px;}
      .input-icon{left:12px;}
      .password-toggle{right:8px;}
      .remember-forgot{padding:9px 10px;border-radius:14px;gap:8px;}
      .auth-actions{gap:11px;margin-top:15px;}
      .btn-main,.btn-soft,.btn-light-action{min-height:50px;border-radius:15px;font-size:14px;gap:9px;}
      .btn-icon{width:29px;height:29px;border-radius:10px;font-size:16px;}
      .bottom-text{font-size:12.5px;margin-top:14px;}
      .scan-box{padding:14px;border-radius:18px;margin:16px 0 12px;}
      .scanner-frame{height:132px;border-radius:15px;}
      .scanner-frame:after{font-size:10px;}
    }

    @media (max-width:340px){
      .auth-card{padding:15px 10px;border-radius:18px;}
      .logo-box{width:54px;height:54px;border-radius:18px;margin-bottom:12px;}
      .title{font-size:21px;text-shadow:1px 2px 0 rgba(255,149,15,.25);}
      .subtitle{font-size:12px;line-height:1.4;}
      .control{height:46px;font-size:13px;padding-left:42px;padding-right:39px;}
      .input-icon{width:24px;height:24px;font-size:13px;}
      .password-toggle{width:32px;height:32px;}
      .remember-forgot{flex-direction:column;align-items:flex-start;}
      .btn-main,.btn-soft,.btn-light-action{min-height:46px;font-size:13px;}
      .scan-box{padding:10px;}
      .scanner-frame{height:115px;}
    }

    @media (max-height:760px){
      .auth-card{max-height:calc(100dvh - 12px);}
      .brand{margin-bottom:14px;}
      .logo-box{width:58px;height:58px;border-radius:19px;margin-bottom:12px;}
      .title{font-size:clamp(22px, 4.6vh, 28px);margin-bottom:7px;}
      .subtitle{line-height:1.38;}
      .form-row{margin-bottom:11px;}
      .control{height:46px;}
      .btn-main,.btn-soft,.btn-light-action{min-height:46px;}
      .remember-forgot{margin-bottom:13px;}
      .bottom-text{margin-top:12px;}
      .scanner-frame{height:118px;}
    }

    @media (max-height:560px) and (orientation:landscape){
      .auth-page{align-items:start;padding:8px;}
      .auth-shell{width:min(96vw, 820px);}
      .auth-card{padding:14px 16px;border-radius:18px;max-height:calc(100dvh - 16px);}
      .brand{display:grid;grid-template-columns:auto 1fr;column-gap:14px;text-align:left;align-items:center;margin-bottom:10px;}
      .logo-box{margin:0;width:50px;height:50px;border-radius:16px;}
      .title{font-size:22px;margin-bottom:3px;}
      .subtitle{margin:0;max-width:none;font-size:12.5px;}
      .login-module form,
      #module-forgot form,
      #module-reset form,
      #module-scan form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:end;}
      .login-module .remember-forgot,
      .login-module .auth-actions,
      .login-module .bottom-text,
      #module-forgot .auth-actions,
      #module-forgot .bottom-text,
      #module-reset .auth-actions,
      #module-reset .bottom-text,
      #module-scan .scan-box,
      #module-scan .auth-actions,
      #module-scan .bottom-text{grid-column:1/-1;}
      .register-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;}
      .register-grid .full{grid-column:auto;}
      .otp-group{grid-template-columns:1fr;}
      .form-row{margin-bottom:9px;}
      .control{height:42px;border-radius:13px;}
      .btn-main,.btn-soft,.btn-light-action{min-height:42px;border-radius:13px;}
      .scan-box{margin:8px 0;padding:9px;}
      .scanner-frame{height:78px;}
      .scanner-frame:before{display:none;}
      .scanner-frame:after{bottom:50%;transform:translateY(50%);}
    }

    @media (pointer:fine){
      .control:hover{border-color:rgba(255,255,255,.22);}
      .btn-main:hover,.btn-soft:hover,.btn-light-action:hover{filter:saturate(1.08);}
    }

    @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* PChat icon visibility fix: SVG fallback icons render even when Bootstrap icon fonts are missing. */
.bi{display:inline-grid;place-items:center;line-height:1;vertical-align:-.125em;}
.bi svg, i[class*="bi-"] svg{width:1em;height:1em;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.bi::before, [class*=" bi-"]::before, [class^="bi-"]::before{content:"" !important;}