/* 
 @font-face{
  font-family: 'Bangla MN';
  src: url("../fonts/BanglaMN.woff2") format("woff2"),
       url("../fonts/BanglaMN.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}  */
    :root{
      --main-w: min(720px, 94vw);
      --panel-w: min(560px, 92vw);
      --gold: #f0c980;
      --gold-soft: #d9ad62;
      --cream: #fff0cb;
      --muted: #cfab72;
      --shadow: 0 18px 45px rgba(0,0,0,.55);
      --glow: 0 0 18px rgba(255,179,57,.18);
    }

    *{ box-sizing: border-box; }
    html,body{
      margin:0;
      width:100%;
      height:100%;
    }

    body{
      color: var(--cream);
      background:
        linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.55)),
        url("../image/bg-p289.jpg") center center / cover no-repeat fixed;
      /* min-height:100vh; */
      display:flex;
      justify-content:center;
      align-items:flex-start;
      overflow-x:hidden;
      position:relative;
    }

    /* soft top/bottom glow overlay */
    body::before,
    body::after{
      content:"";
      position:fixed;
      left:0; right:0;
      pointer-events:none;
      z-index:0;
    }

    .page{
      width:var(--main-w);
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:14px;
      padding-top: 14px;
    }

    /* logo */
    .logo-wrap{
      width:min(420px, 78vw);
      position:relative;
      z-index:3;
      margin-bottom:-58px; /* overlap main frame */
      filter: drop-shadow(0 8px 18px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(255,176,39,.22));
      animation: floatLogo 4s ease-in-out infinite;
    }
    .logo-wrap img{
      width:100%;
      display:block;
      user-select:none;
      pointer-events:none;
    }

    @keyframes floatLogo {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    /* main outer frame */
    .main-panel{
      width:var(--panel-w);
      aspect-ratio: 676 / 520;
      position:relative;
      background: url("../image/image.png") center / 100% 100% no-repeat;
      filter: drop-shadow(0 12px 26px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,170,30,.08));
    }

    .main-panel .panel-inner{
      position:absolute;
      inset: 13.5% 8% 8.5% 8%;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:4px;
    }

    /* inner form frame */
    .form-frame{
      width:min(400px, 100%);
      aspect-ratio: 672 / 216;
      background: url("../image/form-frame.png") center / 100% 100% no-repeat;
      position:relative;
      padding: 20px 24px 13px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top: 6px;
    }

    .form-content{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:10px;
      align-items:center;
    }

    .field{
      width:100%;
      height:54px;
      background: url("../image/small_input.png") center / 100% 100% no-repeat;
      display:flex;
      align-items:center;
      padding: 0 14px;
      gap:8px;
      position:relative;
      filter: drop-shadow(0 0 6px rgba(255,145,40,.10));
    }

    .field .icon{
      width:26px;
      min-width:26px;
      height:26px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .gold-icon{
      width:20.15px;
      height:20.15px;
    }
    .gold-icon-img{
      width:20px;
      height:20px;
      object-fit:contain;
      display:block;
    }

    .field input{
      flex:1;
      border:none;
      outline:none;
      background:transparent;
      color:var(--cream);
      font-family:"Cinzel", serif;
      font-size:16px;
      font-weight:400;
      letter-spacing:.2px;
      padding-right:4px;
    }

    .field input::placeholder{
      color:#C6986E;
      opacity:.95;
      font-size:15px;
      font-weight:400;
      letter-spacing:.2px;
    }

    .toggle-pass{
      background:none;
      border:none;
      color:#d5ad73;
      font-size:13px;
      cursor:pointer;
      padding:2px 6px;
      border-radius:6px;
      transition:.15s ease;
     
    }

    .toggle-pass:hover{
      color:#ffe3af;
      background: rgba(255,190,90,.08);
    }

    .forgot{
      width:100%;
      text-align:center;
      font-family:'Bangla MN';
      text-decoration: none;
      /* color:#d2ab70; */
      font-size:16px;
      margin-top:2px;
      display:flex;
      justify-content:center;
      background: linear-gradient(
        175deg,
        #FFFFFF 0%,
        #F7DEB3 30%,
        #CDA154 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    .forgot:hover{
      color:#ffe0a8;
      text-shadow:0 0 8px rgba(255,185,75,.22);
    }

    /* image login button */
    .login-btn{
      margin-top:2px;
      width:min(255px, 55%);
      aspect-ratio: 255 / 80;
      border:none;
      background: transparent url("../image/login.png") center / contain no-repeat;
      cursor:pointer;
      display:block;
      transition: transform .12s ease, filter .18s ease;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(255,178,40,.18));
    }
    .login-btn:hover{
      transform: translateY(-1px) scale(1.015);
      filter: drop-shadow(0 10px 16px rgba(0,0,0,.45)) drop-shadow(0 0 16px rgba(255,188,65,.28));
    }
    .login-btn:active{
      transform: translateY(1px) scale(.995);
    }

    .signup{
      margin-top:2px;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }

    .signup .small{
      color:#C6986E;
      padding: 0;
      font-family: 'Bangla MN';
      font-weight:400;
      font-size:16px;
    }

    .signup .big{
      /* color:#C6986E; */
      background: linear-gradient(
        175deg,
        #FFFFFF 0%,
        #F7DEB3 30%,
        #CDA154 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
      /* font-family: 'Bangla MN'; */
      font-weight:bold;
      font-size:18px;
      letter-spacing:.7px;
      text-decoration:none;
      margin-top:3px;
      transition:.18s ease;
    }

    .signup .big:hover{
      color:#ffe8b8;
      text-shadow:0 0 8px rgba(255,192,80,.24);
    }

    /* language panel */
    .lang-panel{
      width:var(--panel-w);
      aspect-ratio: 485 / 130;
      position:relative;
      background: url("../image/lang-panel.png") center / 100% 100% no-repeat;
      filter: drop-shadow(0 12px 24px rgba(0,0,0,.45));
    }

    .lang-panel .lang-inner{
      position:absolute;
      inset: 10% 7% 11% 7%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center; /* center vertically */
    }

    .lang-title{
      /* font-family: 'Bangla MN'; */
      margin-top:6px;
      font-size: 22px;
      font-weight:600;
      background: linear-gradient(
        175deg,
        #FFFFFF 0%,
        #F7DEB3 30%,
        #CDA154 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    .lang-list{
      margin-top:16px;
      width:100%;
      display:flex;
      justify-content:center;
      gap:5px;
      flex-wrap:nowrap;
    }

    .lang-item{
      background:none;
      border:none;
      padding:0;              /* reset default button padding */
      line-height:1;          /* prevent extra vertical height */
      appearance:none;
      -webkit-appearance:none;

      color:#e7c487;
      font-family:"Cormorant Garamond", serif;
      cursor:pointer;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:5px;
      min-width:58px;
      transition: transform .15s ease, filter .2s ease;
    }

    .lang-item:hover{
      transform: translateY(-2px);
      filter: brightness(1.08);
    }

    .lang-item.active img{
      transform: scale(1.06);
      filter: drop-shadow(0 0 10px rgba(255,180,50,.35));
    }

    .lang-item img{
      width:50px;
      height:50px;
      object-fit:contain;
      display:block;
      transition: .15s ease;
      filter: drop-shadow(0 3px 8px rgba(0,0,0,.35));
      user-select:none;
      pointer-events:none;
    }

    .lang-item span{
      /* font-family: 'Bangla MN'; */
      font-size:12px;
      font-weight:200;
      padding-top: 4px;
      background: linear-gradient(
        175deg,
        #FFFFFF 0%,
        #F7DEB3 30%,
        #CDA154 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    /* responsive */
    @media (max-width: 600px){
      .main-panel {
        width: 92vw;
        aspect-ratio: 647 / 530;
      }
      .lang-panel {
        width: var(--panel-w);
        aspect-ratio: 527 / 170;
      }
      .lang-item img{
        width:45px !important;
        height:45px !important;
      }
      body{
        padding-top: 12px;
        background-attachment: scroll;
      }

      .page{
        gap:10px;
      }

      .logo-wrap{
        width:min(340px, 84vw);
        /* margin-bottom:-42px; */
      }
      .main-panel .panel-inner{
        inset: 13% 7% 8% 7%;
        gap:10px;
      }

      .form-frame{
        width:100%;
        padding: 16px 18px 14px;
      }

      .field{
        height:46px;
        padding:0 12px;
      }

      .field input{
        font-size:13px;
      }

      .field input::placeholder{
        font-size:13px;
      }

      .toggle-pass{
        font-size:11px;
        padding:1px 4px;
      }

      .forgot{
        font-size:11px;
      }
      .signup {
        margin-top: 0px;
      }
      .signup .small{
        font-size:11px;
      }

      .signup .big{
        font-size:13px;
      }

      .lang-list{
        gap:6px;
      }

      .lang-item{
        min-width:48px;
        gap:4px;
      }

      .lang-item img{
        width:34px;
        height:34px;
      }

      .lang-item span{
        font-size:10px;
      }
    }
    @media (max-width: 460px){

      .main-panel{
        width: 96vw;
        aspect-ratio: 676 / 620;
      }

      .lang-panel{
        width: 96vw;
        aspect-ratio: 485 / 190;
      }
      .signup {
        margin-top: -3px;
      }
      .lang-list {
        margin-top: 11px;
      }
    }