/* Approved account-page designs (login/register/pwreset/2fa), scoped so they cannot leak into the
   Bootstrap 4 client area. Generated by tools/ra_build_public.py from the v3.36.2 account pages. */
/* ---- login.html ---- */
.ra-auth-login{--primary: #0284c7;       
      --primary-dark: #0369a1;  
      --accent: #f59e0b;        
      --bg-dark: #0f172a;       
      --surface-dark: #1e293b;  
      --text-light: #f8fafc;    
      --text-muted: #94a3b8;    
      --border-color: #334155;  
      --success: #10b981;}
.ra-auth-login *{box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;}
.ra-auth-login{background-color: var(--bg-dark);
      color: var(--text-light);
      min-height: 100vh;
      display: flex;
      flex-direction: column;}
.ra-auth-login .top-bar{background: #090d16;
      border-bottom: 1px solid var(--border-color);
      padding: 0.6rem 5%;
      font-size: 0.825rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;}
.ra-auth-login .top-bar .contact-info span{margin-right: 1.5rem;}
.ra-auth-login .top-bar .contact-info i{color: var(--primary);
      margin-right: 0.4rem;}
.ra-auth-login .country-badge{background: rgba(2, 132, 199, 0.15);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.3);
      padding: 0.2rem 0.6rem;
      border-radius: 20px;
      font-weight: 600;
      font-size: 0.75rem;}
.ra-auth-login header{padding: 1.25rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 100;}
.ra-auth-login .logo{font-size: 1.6rem;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: #ffffff;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.5rem;}
.ra-auth-login .logo span{color: var(--primary);}
.ra-auth-login .logo-tag{font-size: 0.65rem;
      background: var(--accent);
      color: #000;
      padding: 0.1rem 0.4rem;
      border-radius: 4px;
      vertical-align: super;
      font-weight: 700;}
.ra-auth-login .nav-links{display: flex;
      gap: 1.8rem;
      align-items: center;}
.ra-auth-login .nav-links a{color: var(--text-light);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      transition: color 0.2s;}
.ra-auth-login .nav-links a:hover{color: var(--primary);}
.ra-auth-login .nav-cta{background: var(--primary);
      color: #fff !important;
      padding: 0.55rem 1.25rem;
      border-radius: 6px;
      font-weight: 600 !important;
      transition: background 0.2s !important;}
.ra-auth-login .nav-cta:hover{background: var(--primary-dark) !important;}
.ra-auth-login .main-container{flex: 1;
      display: grid;
      grid-template-columns: 450px 1fr;
      max-width: 1400px;
      width: 90%;
      margin: 2.5rem auto;
      gap: 2.5rem;
      align-items: start;}
.ra-auth-login .login-box{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);}
.ra-auth-login .login-header{margin-bottom: 1.75rem;}
.ra-auth-login .login-header h1{font-size: 1.75rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.4rem;}
.ra-auth-login .login-header p{color: var(--text-muted);
      font-size: 0.9rem;}
.ra-auth-login .form-group{margin-bottom: 1.25rem;}
.ra-auth-login .form-group label{display: block;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text-light);
      margin-bottom: 0.4rem;}
.ra-auth-login .input-wrapper{position: relative;}
.ra-auth-login .input-wrapper i{position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);}
.ra-auth-login .form-control{width: 100%;
      background: #0f172a;
      border: 1px solid var(--border-color);
      color: #fff;
      padding: 0.75rem 1rem 0.75rem 2.75rem;
      border-radius: 8px;
      font-size: 0.95rem;
      transition: border-color 0.2s;}
.ra-auth-login .form-control:focus{outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);}
.ra-auth-login select.form-control{appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 1.25rem;}
.ra-auth-login .form-extra{display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.85rem;
      margin-bottom: 1.5rem;}
.ra-auth-login .remember-me{display: flex;
      align-items: center;
      gap: 0.5rem;
      color: var(--text-muted);
      cursor: pointer;}
.ra-auth-login .remember-me input{accent-color: var(--primary);}
.ra-auth-login .forgot-link{color: var(--primary);
      text-decoration: none;
      font-weight: 500;}
.ra-auth-login .forgot-link:hover{text-decoration: underline;}
.ra-auth-login .btn-submit{width: 100%;
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 0.85rem;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: background 0.2s, transform 0.1s;}
.ra-auth-login .btn-submit:hover{background: var(--primary-dark);}
.ra-auth-login .btn-submit:active{transform: scale(0.99);}
.ra-auth-login .register-footer{margin-top: 1.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border-color);
      text-align: center;
      font-size: 0.9rem;
      color: var(--text-muted);}
.ra-auth-login .register-footer a{color: var(--primary);
      font-weight: 600;
      text-decoration: none;}
.ra-auth-login .promo-section{display: flex;
      flex-direction: column;
      gap: 2rem;}
.ra-auth-login .domain-search-box{background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(30, 41, 59, 1) 100%);
      border: 1px solid rgba(2, 132, 199, 0.3);
      border-radius: 16px;
      padding: 2rem;}
.ra-auth-login .domain-search-box h2{font-size: 1.35rem;
      margin-bottom: 0.4rem;
      color: #fff;}
.ra-auth-login .domain-search-box p{color: var(--text-muted);
      font-size: 0.9rem;
      margin-bottom: 1.25rem;}
.ra-auth-login .domain-form{display: flex;
      gap: 0.5rem;
      background: #0f172a;
      padding: 0.35rem;
      border-radius: 10px;
      border: 1px solid var(--border-color);}
.ra-auth-login .domain-form input{flex: 1;
      background: transparent;
      border: none;
      padding: 0.75rem 1rem;
      color: #fff;
      font-size: 0.95rem;}
.ra-auth-login .domain-form input:focus{outline: none;}
.ra-auth-login .domain-form button{background: var(--accent);
      color: #000;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 7px;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.2s;}
.ra-auth-login .domain-form button:hover{opacity: 0.9;}
.ra-auth-login .tld-badges{display: flex;
      gap: 1rem;
      margin-top: 1rem;
      flex-wrap: wrap;}
.ra-auth-login .tld-pill{background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-color);
      padding: 0.4rem 0.8rem;
      border-radius: 20px;
      font-size: 0.8rem;
      color: var(--text-muted);}
.ra-auth-login .tld-pill strong{color: #fff;}
.ra-auth-login .tld-pill.highlight{border-color: var(--accent);
      background: rgba(245, 158, 11, 0.1);
      color: var(--accent);}
.ra-auth-login .hosting-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2rem;
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 1.5rem;
      align-items: center;
      position: relative;
      overflow: hidden;}
.ra-auth-login .badge-featured{position: absolute;
      top: 1rem;
      right: -2.5rem;
      background: var(--success);
      color: #000;
      font-size: 0.7rem;
      font-weight: 800;
      padding: 0.25rem 3rem;
      transform: rotate(45deg);
      text-transform: uppercase;}
.ra-auth-login .hosting-info h3{font-size: 1.4rem;
      color: #fff;
      margin-bottom: 0.5rem;}
.ra-auth-login .hosting-info p{color: var(--text-muted);
      font-size: 0.9rem;
      margin-bottom: 1.25rem;}
.ra-auth-login .hosting-features{list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
      font-size: 0.85rem;
      color: var(--text-light);}
.ra-auth-login .hosting-features li i{color: var(--success);
      margin-right: 0.4rem;}
.ra-auth-login .pricing-box{background: #0f172a;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;}
.ra-auth-login .pricing-box .price-title{font-size: 0.8rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;}
.ra-auth-login .pricing-box .price-amount{font-size: 1.6rem;
      font-weight: 800;
      color: #fff;
      margin: 0.3rem 0;}
.ra-auth-login .pricing-box .price-amount span{font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 400;}
.ra-auth-login .btn-outline{display: inline-block;
      width: 100%;
      border: 1px solid var(--primary);
      color: var(--primary);
      padding: 0.6rem;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.85rem;
      margin-top: 0.8rem;
      transition: all 0.2s;}
.ra-auth-login .btn-outline:hover{background: var(--primary);
      color: #fff;}
.ra-auth-login .trust-section{display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 2rem;
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--border-color);
      border-radius: 12px;}
.ra-auth-login .trust-item{display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.85rem;
      color: var(--text-muted);}
.ra-auth-login .trust-item i{color: var(--primary);
      font-size: 1.2rem;}
.ra-auth-login footer{background: #090d16;
      border-top: 1px solid var(--border-color);
      padding: 2rem 5%;
      margin-top: auto;
      text-align: center;
      font-size: 0.85rem;
      color: var(--text-muted);}
@media (max-width: 1024px){.ra-auth-login .main-container{grid-template-columns: 1fr;}
.ra-auth-login .hosting-card{grid-template-columns: 1fr;}}
@media (max-width: 640px){.ra-auth-login .hosting-features{grid-template-columns: 1fr;}
.ra-auth-login .trust-section{flex-direction: column;
        gap: 1rem;
        align-items: flex-start;}}
/* ---- register.html ---- */
.ra-auth-register{--primary: #0284c7;
      --primary-dark: #0369a1;
      --accent: #f59e0b;
      --bg-dark: #0f172a;
      --surface-dark: #1e293b;
      --text-light: #f8fafc;
      --text-muted: #94a3b8;
      --border-color: #334155;
      --success: #10b981;}
.ra-auth-register *{box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif;}
.ra-auth-register{background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column;}
.ra-auth-register .top-bar{background: #090d16;
      border-bottom: 1px solid var(--border-color);
      padding: 0.6rem 5%;
      font-size: 0.825rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;}
.ra-auth-register .top-bar i{color: var(--primary); margin-right: 0.4rem;}
.ra-auth-register header{padding: 1.25rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
      position: sticky; top: 0; z-index: 100;}
.ra-auth-register .logo{font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-register .logo span{color: var(--primary);}
.ra-auth-register .logo-tag{font-size: 0.65rem; background: var(--accent); color: #000; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700;}
.ra-auth-register .nav-links{display: flex; gap: 1.8rem; align-items: center;}
.ra-auth-register .nav-links a{color: var(--text-light); text-decoration: none; font-weight: 500; font-size: 0.95rem;}
.ra-auth-register .nav-links a:hover{color: var(--primary);}
.ra-auth-register .nav-cta{background: var(--primary); color: #fff !important; padding: 0.55rem 1.25rem; border-radius: 6px; font-weight: 600 !important;}
.ra-auth-register .main-container{flex: 1;
      display: grid;
      grid-template-columns: 1fr 420px;
      max-width: 1400px;
      width: 90%;
      margin: 2.5rem auto;
      gap: 2.5rem;
      align-items: start;}
.ra-auth-register .register-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);}
.ra-auth-register .form-header{margin-bottom: 2rem;}
.ra-auth-register .form-header h1{font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem;}
.ra-auth-register .form-header p{color: var(--text-muted); font-size: 0.95rem;}
.ra-auth-register .step-bar{display: flex;
      align-items: center;
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 1rem;}
.ra-auth-register .step-item{display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted);}
.ra-auth-register .step-item.active{color: var(--primary);}
.ra-auth-register .step-item.active .step-num{background: var(--primary); color: #fff;}
.ra-auth-register .step-num{width: 26px; height: 26px; border-radius: 50%; background: #334155; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.8rem;}
.ra-auth-register .step-divider{flex: 1; height: 1px; background: var(--border-color); margin: 0 1rem;}
.ra-auth-register .form-row{display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem;}
.ra-auth-register .form-group{margin-bottom: 1.25rem;}
.ra-auth-register .form-group.full{grid-column: span 2;}
.ra-auth-register .form-group label{display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.4rem;}
.ra-auth-register .input-wrapper{position: relative;}
.ra-auth-register .input-wrapper i{position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);}
.ra-auth-register .form-control{width: 100%;
      background: #0f172a;
      border: 1px solid var(--border-color);
      color: #fff;
      padding: 0.75rem 1rem 0.75rem 2.75rem;
      border-radius: 8px;
      font-size: 0.95rem;
      transition: border-color 0.2s;}
.ra-auth-register .form-control:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);}
.ra-auth-register select.form-control{appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem;}
.ra-auth-register .form-step{display: none;}
.ra-auth-register .form-step.active{display: block;}
.ra-auth-register .btn-row{display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem;}
.ra-auth-register .btn-next,.ra-auth-register .btn-submit{background: var(--primary); color: #fff; border: none; padding: 0.85rem 1.75rem; border-radius: 8px; font-size: 0.95rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;}
.ra-auth-register .btn-next:hover,.ra-auth-register .btn-submit:hover{background: var(--primary-dark);}
.ra-auth-register .btn-prev{background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 0.85rem 1.5rem; border-radius: 8px; font-weight: 600; cursor: pointer;}
.ra-auth-register .btn-prev:hover{border-color: var(--text-light); color: var(--text-light);}
.ra-auth-register .sidebar-promos{display: flex; flex-direction: column; gap: 1.5rem;}
.ra-auth-register .promo-card{background: var(--surface-dark); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.75rem;}
.ra-auth-register .promo-card h3{font-size: 1.2rem; color: #fff; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-register .promo-card h3 i{color: var(--accent);}
.ra-auth-register .promo-card p{color: var(--text-muted); font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.5;}
.ra-auth-register .tld-table{width: 100%; border-collapse: collapse; margin-top: 0.5rem;}
.ra-auth-register .tld-table td{padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem;}
.ra-auth-register .tld-table td:last-child{text-align: right; font-weight: 700; color: var(--accent);}
.ra-auth-register .payment-badge-row{display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;}
.ra-auth-register .pay-pill{background: #0f172a; border: 1px solid var(--border-color); padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.75rem; color: var(--text-light); font-weight: 600; display: flex; align-items: center; gap: 0.4rem;}
.ra-auth-register .pay-pill i{color: var(--success);}
.ra-auth-register footer{background: #090d16; border-top: 1px solid var(--border-color); padding: 2rem 5%; margin-top: auto; text-align: center; font-size: 0.85rem; color: var(--text-muted);}
@media (max-width: 1024px){.ra-auth-register .main-container{grid-template-columns: 1fr;}
.ra-auth-register .form-row{grid-template-columns: 1fr;}
.ra-auth-register .form-group.full{grid-column: span 1;}}
/* ---- pwreset.html ---- */
.ra-auth-pwreset{--primary: #0284c7;
      --primary-dark: #0369a1;
      --accent: #f59e0b;
      --bg-dark: #0f172a;
      --surface-dark: #1e293b;
      --text-light: #f8fafc;
      --text-muted: #94a3b8;
      --border-color: #334155;
      --success: #10b981;}
.ra-auth-pwreset *{box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif;}
.ra-auth-pwreset{background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column;}
.ra-auth-pwreset .top-bar{background: #090d16;
      border-bottom: 1px solid var(--border-color);
      padding: 0.6rem 5%;
      font-size: 0.825rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;}
.ra-auth-pwreset .top-bar i{color: var(--primary); margin-right: 0.4rem;}
.ra-auth-pwreset header{padding: 1.25rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
      position: sticky; top: 0; z-index: 100;}
.ra-auth-pwreset .logo{font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-pwreset .logo span{color: var(--primary);}
.ra-auth-pwreset .logo-tag{font-size: 0.65rem; background: var(--accent); color: #000; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700;}
.ra-auth-pwreset .nav-links{display: flex; gap: 1.8rem; align-items: center;}
.ra-auth-pwreset .nav-links a{color: var(--text-light); text-decoration: none; font-weight: 500; font-size: 0.95rem;}
.ra-auth-pwreset .nav-links a:hover{color: var(--primary);}
.ra-auth-pwreset .nav-cta{background: var(--primary); color: #fff !important; padding: 0.55rem 1.25rem; border-radius: 6px; font-weight: 600 !important;}
.ra-auth-pwreset .main-container{flex: 1;
      display: grid;
      grid-template-columns: 460px 1fr;
      max-width: 1200px;
      width: 90%;
      margin: 3rem auto;
      gap: 2.5rem;
      align-items: start;}
.ra-auth-pwreset .reset-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);}
.ra-auth-pwreset .reset-header{margin-bottom: 1.75rem;}
.ra-auth-pwreset .reset-header h1{font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.6rem;}
.ra-auth-pwreset .reset-header h1 i{color: var(--accent);}
.ra-auth-pwreset .reset-header p{color: var(--text-muted); font-size: 0.9rem; line-height: 1.5;}
.ra-auth-pwreset .form-group{margin-bottom: 1.25rem;}
.ra-auth-pwreset .form-group label{display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.4rem;}
.ra-auth-pwreset .input-wrapper{position: relative;}
.ra-auth-pwreset .input-wrapper i{position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);}
.ra-auth-pwreset .form-control{width: 100%;
      background: #0f172a;
      border: 1px solid var(--border-color);
      color: #fff;
      padding: 0.75rem 1rem 0.75rem 2.75rem;
      border-radius: 8px;
      font-size: 0.95rem;
      transition: border-color 0.2s;}
.ra-auth-pwreset .form-control:focus{outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);}
.ra-auth-pwreset .btn-submit{width: 100%;
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 0.85rem;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: background 0.2s;}
.ra-auth-pwreset .btn-submit:hover{background: var(--primary-dark);}
.ra-auth-pwreset .card-footer{margin-top: 1.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;}
.ra-auth-pwreset .card-footer a{color: var(--primary); text-decoration: none; font-weight: 600;}
.ra-auth-pwreset .card-footer a:hover{text-decoration: underline;}
.ra-auth-pwreset .info-section{display: flex; flex-direction: column; gap: 1.5rem;}
.ra-auth-pwreset .info-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2rem;}
.ra-auth-pwreset .info-card h3{font-size: 1.2rem; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-pwreset .info-card h3 i{color: var(--primary);}
.ra-auth-pwreset .info-card p{color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem;}
.ra-auth-pwreset .steps-list{list-style: none; display: flex; flex-direction: column; gap: 0.8rem;}
.ra-auth-pwreset .steps-list li{display: flex; align-items: flex-start; gap: 0.8rem; font-size: 0.875rem; color: var(--text-light);}
.ra-auth-pwreset .step-badge{background: #0f172a; border: 1px solid var(--border-color); color: var(--accent); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0;}
.ra-auth-pwreset .support-box{background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(30, 41, 59, 1) 100%);
      border: 1px solid rgba(2, 132, 199, 0.3);
      border-radius: 16px;
      padding: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;}
.ra-auth-pwreset .support-text h4{color: #fff; font-size: 1.05rem; margin-bottom: 0.2rem;}
.ra-auth-pwreset .support-text p{color: var(--text-muted); font-size: 0.85rem;}
.ra-auth-pwreset .btn-support{background: var(--success); color: #000; padding: 0.6rem 1.25rem; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;}
.ra-auth-pwreset footer{background: #090d16; border-top: 1px solid var(--border-color); padding: 2rem 5%; margin-top: auto; text-align: center; font-size: 0.85rem; color: var(--text-muted);}
@media (max-width: 900px){.ra-auth-pwreset .main-container{grid-template-columns: 1fr;}}
/* ---- 2fa.html ---- */
.ra-auth-2fa{--primary: #0284c7;
      --primary-dark: #0369a1;
      --accent: #f59e0b;
      --bg-dark: #0f172a;
      --surface-dark: #1e293b;
      --text-light: #f8fafc;
      --text-muted: #94a3b8;
      --border-color: #334155;
      --success: #10b981;}
.ra-auth-2fa *{box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif;}
.ra-auth-2fa{background-color: var(--bg-dark); color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column;}
.ra-auth-2fa .top-bar{background: #090d16;
      border-bottom: 1px solid var(--border-color);
      padding: 0.6rem 5%;
      font-size: 0.825rem;
      color: var(--text-muted);
      display: flex;
      justify-content: space-between;
      align-items: center;}
.ra-auth-2fa .top-bar i{color: var(--primary); margin-right: 0.4rem;}
.ra-auth-2fa header{padding: 1.25rem 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(15, 23, 42, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border-color);
      position: sticky; top: 0; z-index: 100;}
.ra-auth-2fa .logo{font-size: 1.6rem; font-weight: 800; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-2fa .logo span{color: var(--primary);}
.ra-auth-2fa .logo-tag{font-size: 0.65rem; background: var(--accent); color: #000; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700;}
.ra-auth-2fa .nav-links{display: flex; gap: 1.8rem; align-items: center;}
.ra-auth-2fa .nav-links a{color: var(--text-light); text-decoration: none; font-weight: 500; font-size: 0.95rem;}
.ra-auth-2fa .nav-links a:hover{color: var(--primary);}
.ra-auth-2fa .nav-cta{background: var(--primary); color: #fff !important; padding: 0.55rem 1.25rem; border-radius: 6px; font-weight: 600 !important;}
.ra-auth-2fa .main-container{flex: 1;
      display: grid;
      grid-template-columns: 460px 1fr;
      max-width: 1200px;
      width: 90%;
      margin: 3rem auto;
      gap: 2.5rem;
      align-items: start;}
.ra-auth-2fa .tfa-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      text-align: center;}
.ra-auth-2fa .tfa-icon{width: 64px;
      height: 64px;
      background: rgba(2, 132, 199, 0.15);
      border: 1px solid rgba(2, 132, 199, 0.4);
      color: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin: 0 auto 1.25rem;}
.ra-auth-2fa .tfa-header h1{font-size: 1.6rem; font-weight: 800; color: #fff; margin-bottom: 0.4rem;}
.ra-auth-2fa .tfa-header p{color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.75rem;}
.ra-auth-2fa .otp-container{display: flex;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 1.5rem;}
.ra-auth-2fa .otp-input{width: 48px;
      height: 56px;
      background: #0f172a;
      border: 1px solid var(--border-color);
      color: #fff;
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      border-radius: 8px;
      transition: border-color 0.2s, box-shadow 0.2s;}
.ra-auth-2fa .otp-input:focus{outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);}
.ra-auth-2fa .backup-code-group{display: none;
      margin-bottom: 1.5rem;
      text-align: left;}
.ra-auth-2fa .backup-code-group.active{display: block;}
.ra-auth-2fa .backup-code-group label{display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.4rem;}
.ra-auth-2fa .input-wrapper{position: relative;}
.ra-auth-2fa .input-wrapper i{position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted);}
.ra-auth-2fa .form-control{width: 100%;
      background: #0f172a;
      border: 1px solid var(--border-color);
      color: #fff;
      padding: 0.75rem 1rem 0.75rem 2.75rem;
      border-radius: 8px;
      font-size: 0.95rem;}
.ra-auth-2fa .btn-submit{width: 100%;
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 0.85rem;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      transition: background 0.2s;}
.ra-auth-2fa .btn-submit:hover{background: var(--primary-dark);}
.ra-auth-2fa .tfa-toggle-link{display: inline-block;
      margin-top: 1.25rem;
      font-size: 0.85rem;
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;}
.ra-auth-2fa .tfa-toggle-link:hover{text-decoration: underline;}
.ra-auth-2fa .card-footer{margin-top: 1.75rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;}
.ra-auth-2fa .card-footer a{color: var(--text-muted); text-decoration: none;}
.ra-auth-2fa .card-footer a:hover{color: var(--text-light);}
.ra-auth-2fa .info-section{display: flex; flex-direction: column; gap: 1.5rem;}
.ra-auth-2fa .info-card{background: var(--surface-dark);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 2rem;}
.ra-auth-2fa .info-card h3{font-size: 1.2rem; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;}
.ra-auth-2fa .info-card h3 i{color: var(--success);}
.ra-auth-2fa .info-card p{color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1rem;}
.ra-auth-2fa .app-badges{display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem;}
.ra-auth-2fa .app-pill{background: #0f172a; border: 1px solid var(--border-color); padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; color: var(--text-light); font-weight: 600; display: flex; align-items: center; gap: 0.4rem;}
.ra-auth-2fa .support-box{background: linear-gradient(135deg, rgba(2, 132, 199, 0.1) 0%, rgba(30, 41, 59, 1) 100%);
      border: 1px solid rgba(2, 132, 199, 0.3);
      border-radius: 16px;
      padding: 1.75rem;
      display: flex;
      align-items: center;
      justify-content: space-between;}
.ra-auth-2fa .support-text h4{color: #fff; font-size: 1.05rem; margin-bottom: 0.2rem;}
.ra-auth-2fa .support-text p{color: var(--text-muted); font-size: 0.85rem;}
.ra-auth-2fa .btn-support{background: var(--success); color: #000; padding: 0.6rem 1.25rem; border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem;}
.ra-auth-2fa footer{background: #090d16; border-top: 1px solid var(--border-color); padding: 2rem 5%; margin-top: auto; text-align: center; font-size: 0.85rem; color: var(--text-muted);}
@media (max-width: 900px){.ra-auth-2fa .main-container{grid-template-columns: 1fr;}}
/* ---- assets/auth.css ---- */
.ra-auth *{box-sizing:border-box}
.ra-auth .logo img{max-width:100%;height:auto}
.ra-auth .auth-footer-links{margin-top:1rem;line-height:1.9}
.ra-auth .auth-footer-links a,.ra-auth .auth-terms a{color:var(--primary,#00e5ff)}
.ra-auth .auth-terms{font-size:.8rem;line-height:1.6;color:var(--text-muted);margin:1rem 0}
.ra-auth a:focus-visible,.ra-auth button:focus-visible,.ra-auth input:focus-visible,.ra-auth select:focus-visible{outline:2px solid var(--primary,#00e5ff);outline-offset:4px}
.ra-auth .main-container>*{min-width:0}
.ra-auth .form-control{min-width:0;max-width:100%}
@media(max-width:640px){.ra-auth .top-bar{display:flex;flex-wrap:wrap;gap:.6rem;padding:12px 5%;line-height:1.6}
.ra-auth .top-bar>div{display:flex;flex-wrap:wrap;gap:.3rem .8rem}
.ra-auth .top-bar span{margin-left:0!important}
.ra-auth header{flex-wrap:wrap;gap:1rem;padding:16px 5%}
.ra-auth header .nav-links{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-start;width:100%}
.ra-auth .main-container{padding:24px 5%;gap:24px;width:100%}
.ra-auth .login-box,.ra-auth .register-card,.ra-auth .reset-card,.ra-auth .tfa-card{padding:24px 18px}
.ra-auth .otp-input{width:calc((100% - 40px)/6);max-width:48px;min-width:0;height:52px}
.ra-auth .otp-container{gap:8px}
.ra-auth .support-box,.ra-auth .hosting-upsell{flex-wrap:wrap;gap:1rem}
.ra-auth .domain-form{flex-wrap:wrap}
.ra-auth .domain-form input{min-width:0;width:100%}}