:root{
    --blue: #2857e8;
    --blue-dark: #1f45bd;
    --ink: #16213e;
    --ink-soft: #4a5578;
    --line: #e2e6f0;
    --page-bg: #eef1f8;
    --card-bg: #ffffff;
    --red: #d64545;
    --green-link: #2857e8;
    --radius: 10px;
    --cs-blue: #0f52d9;
    --cs-blue-dark: #0b3fa8;
    --cs-green: #7ec242;
    --cs-text: #1c2530;
    --cs-muted: #6b7684;
    --cs-border: #dde2ea;
  }

  *{box-sizing:border-box;}

  body{
    margin:0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--page-bg);
    color: var(--ink);
  }

  /* ---------- top bar ---------- */
  .topbar{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding: 14px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }
  .item img{ width:23px;  display:inline-block; }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .brand svg{ flex-shrink:0; }

  .brand-text{ line-height:1.1; }

  .brand-text .name{
    font-size:20px;
    font-weight:800;
    letter-spacing:.2px;
  }
  .brand-text .name .channel{ color: var(--ink); }
  .brand-text .name .sale{ color: var(--blue); }

  .brand-text .tagline{
    font-size:11px;
    color:#8a92ab;
    margin-top:2px;
  }

  .contact{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:13px;
    color: var(--ink-soft);
    flex-wrap:wrap;
    font-weight: 500;
  }
  .mt-1{ margin-top:1px; }
  .mt-2{ margin-top:2px; }
  .mt-3{ margin-top:3px; }

  .item-span{
    font-size: 15px;
    color: #2857ec;
  }
  .text-primary{ color: var(--blue); }

  .contact a{ color:var(--blue); text-decoration:none; font-weight:600; }
  .contact .sep{ color: var(--line); }
  .contact .item{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-size: 15px; }
  .contact svg{ flex-shrink:0; }
  .flag{ width:18px; height:13px; border-radius:2px; display:inline-block; }

  /* ---------- page layout ---------- */
  .wrap{
    display:flex;
    justify-content:center;
    padding: 44px 16px 70px;
  }

  .card{
    width:100%;
    max-width:610px;
    background:var(--card-bg);
    border-radius:16px;
    box-shadow: 0 20px 45px rgba(22,33,62,0.08);
    padding: 44px 56px 40px;
  }

  .card h1{
    text-align:center;
    font-size:32px;
    margin:0 0 10px;
    color:var(--ink);
    letter-spacing:.2px;
  }

  .underline{
    width:46px;
    height:3px;
    background:var(--blue);
    margin:0 auto 14px;
    border-radius:2px;
  }

  .subtitle{
    text-align:center;
    color:#7d859c;
    font-size:15px;
    margin:0 0 26px;
    font-weight: 500;
  }

  .perks{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-bottom:30px;
    flex-wrap:wrap;
    color: var(--ink-soft);
    font-size:13.5px;
  }
  .perks .perk{ display:flex; align-items:center; gap:7px; }
  .perks .divider{ width:1px; height:16px; background:var(--line); }
  .perks svg{ color:var(--blue); flex-shrink:0; }

  /* ---------- form ---------- */
  form{ display:flex; flex-direction:column; }

  .field{ margin-bottom:20px; }

  label{
    display:block;
    font-size:13.5px;
    font-weight:700;
    color: var(--ink);
    margin-bottom:8px;
    text-align:left;
  }

  .input_field1, select.input_field1{
    width:100%;
    padding: 13px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:14.5px;
    color:var(--ink);
    background:#fff;
    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease;
    font-family: inherit;
  }

  .input_field1:focus, select.input_field1:focus{
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(40,87,232,0.12);
  }

  select.input_field1{ appearance:none; -webkit-appearance:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234a5578' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: right 16px center;
    padding-right:38px;
  }

  .pwd-wrap{ position:relative; }
  .pwd-wrap .input_field1{ padding-right:44px; }
  .pwd-toggle{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#8a92ab;
    background:none;
    border:none;
    padding:2px;
    display:flex;
  }
  .pwd-toggle:hover{ color:var(--ink-soft); }

  .errmsg{
    color:var(--red);
    display:none;
    font-size:12.5px;
    margin-top:6px;
  }

  .terms-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin: 6px 0 16px;
    font-size:14px;
    color: var(--ink-soft);
  }
  .terms-row input[type="checkbox"]{
    width:18px; height:18px;
    margin-top:1px;
    accent-color: var(--blue);
    flex-shrink:0;
    cursor:pointer;
  }
  .terms-row a{ color:var(--green-link); text-decoration:none; font-weight:600; }
  .terms-row a:hover{ text-decoration:underline; }

  .disclaimer{
    font-size:12.5px;
    color:#8a92ab;
    line-height:1.5;
    margin-bottom:26px;
  }

  .actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
  }

  .btn_extralarge{
    background: var(--blue);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:15px 30px;
    font-size:15.5px;
    font-weight:700;
    cursor:pointer;
    transition: background .15s ease, transform .05s ease;
  }
  .btn_extralarge:hover{ background: var(--blue-dark); }
  .btn_extralarge:active{ transform: translateY(1px); }

  .login-hint{
    font-size:14px;
    color: var(--ink-soft);
  }
  .login-hint a{ color: var(--green-link); font-weight:700; text-decoration:none; }
  .login-hint a:hover{ text-decoration:underline; }
  
  /* Main */
  main{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 16px;
  }
  .login-card{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(20, 30, 60, .08);
    padding: 48px 56px;
    width: 100%;
    max-width: 560px;
  }
  .login-title{
    text-align: center;
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .title-underline{
    width: 56px;
    height: 4px;
    background: var(--cs-blue);
    border-radius: 2px;
    margin: 0 auto 34px;
  }
  .form-label-cs{
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 8px;
  }
  .input_field_New1{
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    font-size: .98rem;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .input_field_New1:focus{
    outline: none;
    border-color: var(--cs-blue);
    box-shadow: 0 0 0 3px rgba(15, 82, 217, .12);
  }
  .password-wrap{ position: relative; }
  .password-toggle{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }
  .form-check-input{
    width: 1.15em;
    height: 1.15em;
    margin-top: .15em;
  }
  .form-check-input:checked{
    background-color: var(--cs-blue);
    border-color: var(--cs-blue);
  }
  .buttonB{
    width: 100%;
    background: var(--cs-blue);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px;
    border-radius: 8px;
    transition: background .15s ease;
  }
  .buttonB:hover{ background: var(--cs-blue-dark); }
  .forgot-link{
    display: block;
    text-align: center;
    color: var(--cs-blue);
    text-decoration: none;
    font-size: .95rem;
    margin-top: 18px;
  }
  .forgot-link:hover{ text-decoration: underline; }
  .or-divider{
    display: flex;
    align-items: center;
    color: var(--cs-muted);
    font-size: .85rem;
    margin: 22px 0;
  }
  .or-divider::before, .or-divider::after{
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cs-border);
  }
  .or-divider span{ padding: 0 14px; }
  .new-user-text{
    text-align: center;
    font-size: .95rem;
    color: var(--cs-text);
  }
  .new-user-text a{
    color: var(--cs-blue);
    font-weight: 600;
    text-decoration: none;
  }
  .new-user-text a:hover{ text-decoration: underline; }

  /* Footer */
  footer{
    background: var(--cs-blue);
    color: #fff;
    padding: 16px 5%;
    font-size: .88rem;
  }
  footer a{
    color: #fff;
    text-decoration: none;
  }
  footer a:hover{ text-decoration: underline; }
  .footer-divider{
    color: rgba(255,255,255,.5);
    margin: 0 12px;
  }
  .country-select{
    color: #fff;
    font-size: .88rem;
  }

  @media (max-width: 576px){
    .login-card{ padding: 34px 24px; }
    .topbar-contact{ display: none !important; }
  }


  @media (max-width: 620px){
    .topbar{ padding:14px 20px; justify-content:center; text-align:center; }
    .contact{ justify-content:center; }
    .card{ padding: 32px 22px 30px; }
    .card h1{ font-size:26px; }
    .actions{ flex-direction:column; align-items:stretch; text-align:center; }
    .btn_extralarge{ width:100%; }
  }

  :focus-visible{ outline: 2px solid var(--blue); outline-offset:2px; }

  .ui-dialog .ui-dialog-titlebar {
    background: #4285F4;
    color: #ffffff;
    border: 1px solid #2f6fd6;
    padding: 8px 12px;
}