:root{
    --bg:#06090b;--bg-soft:#0a0f13;--panel:#0d1418;--panel-2:#101820;
    --line:rgba(255,255,255,0.08);--line-strong:rgba(255,255,255,0.16);
    --text:#eef4f4;--text-dim:#9db0b3;--text-faint:#5d7075;
    --cyan:#00ffff;--blue:#0076ff;--lime:#b1ff00;--green:#009a00;
    --grad-scan:linear-gradient(90deg,var(--cyan),var(--blue));
    --grad-lime:linear-gradient(90deg,var(--lime),var(--green));
    --grad-brand:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 55%,var(--lime) 100%);
    --radius-s:10px;--radius-m:16px;--radius-l:24px;--radius-xl:32px;
    --font:\"Changa\",sans-serif;
    --ease:cubic-bezier(.16,.84,.44,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;height:100%;}
  body{
    background:var(--bg);color:var(--text);font-family:var(--font);
    line-height:1.5;-webkit-font-smoothing:antialiased;
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    overflow-x:hidden;position:relative;
  }
  ::selection{background:var(--cyan);color:#00181a;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}

  /* Background mesh */
  .mesh{position:fixed;inset:-10%;z-index:0;pointer-events:none;}
  .mesh span{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.35;animation:drift 22s ease-in-out infinite;}
  .mesh span:nth-child(1){width:500px;height:500px;background:var(--blue);top:-120px;left:-80px;}
  .mesh span:nth-child(2){width:400px;height:400px;background:var(--cyan);top:40%;right:-100px;opacity:.25;animation-delay:-7s;}
  .mesh span:nth-child(3){width:350px;height:350px;background:var(--lime);bottom:-140px;left:30%;opacity:.18;animation-delay:-14s;}
  @keyframes drift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.08);}66%{transform:translate(-30px,25px) scale(0.96);}}

  .grid-overlay{
    position:fixed;inset:0;z-index:0;
    background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 70% 50% at 50% 40%,#000 30%,transparent 80%);
    pointer-events:none;
  }

  /* Main container */
  .auth-container{
    position:relative;z-index:1;
    width:100%;max-width:480px;
    padding:24px;
    animation:fadeUp .6s var(--ease) both;
  }
  @keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

  /* Brand */
  .auth-brand{text-align:center;margin-bottom:32px;}
  .auth-brand img{height:44px;margin:0 auto 12px;object-fit:contain;}
  .auth-brand h1{font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;}
  .auth-brand p{color:var(--text-dim);font-size:14px;margin-top:4px;}

  /* Card */
  .auth-card{
    background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
    border:1px solid var(--line-strong);
    border-radius:var(--radius-l);
    padding:28px 26px 32px;
    backdrop-filter:blur(18px);
    position:relative;overflow:hidden;
  }
  .auth-card::before{
    content:"";position:absolute;top:-50%;right:-40%;
    width:70%;height:90%;
    background:radial-gradient(circle,rgba(0,118,255,.2),transparent 60%);
    pointer-events:none;
  }

  /* Tabs */
  .auth-tabs{display:flex;gap:0;margin-bottom:26px;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--line-strong);position:relative;z-index:1;}
  .auth-tab{
    flex:1;padding:12px;text-align:center;font-weight:600;font-size:14px;
    background:transparent;border:none;color:var(--text-faint);
    transition:all .3s var(--ease);cursor:pointer;position:relative;
  }
  .auth-tab.active{color:var(--bg);background:var(--grad-scan);}
  .auth-tab:not(.active):hover{color:var(--text);background:rgba(255,255,255,0.04);}

  /* Form */
  .auth-form{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;}
  .auth-form.hidden{display:none;}
  .form-group{display:flex;flex-direction:column;gap:5px;}
  .form-group label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:500;}
  .form-control{
    width:100%;padding:11px 14px;border-radius:var(--radius-s);
    background:rgba(0,0,0,0.35);border:1px solid var(--line-strong);
    color:var(--text);font-family:var(--font);font-size:14px;outline:none;
    transition:border-color .2s,box-shadow .2s;
  }
  .form-control:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,163,204,.2);}
  .form-control::placeholder{color:var(--text-faint);}
  select.form-control{cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235d7075' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
    padding-right:36px;
  }
  select.form-control option{background:var(--panel);color:var(--text);}

  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

  /* Plan badge */
  .plan-badge{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 16px;border-radius:999px;
    background:linear-gradient(135deg,rgba(0,255,255,.1),rgba(177,255,0,.06));
    border:1px solid rgba(0,255,255,.25);
    font-size:12px;font-weight:600;color:var(--cyan);
    text-transform:uppercase;letter-spacing:.06em;
    margin-bottom:4px;
  }
  .plan-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 28px;border-radius:999px;font-weight:600;font-size:15px;
    border:1px solid transparent;white-space:nowrap;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  }
  .btn-primary{background:var(--grad-scan);color:#001217;}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px -6px rgba(0,150,255,.55);}
  .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn-ghost{border-color:var(--line-strong);color:var(--text-dim);background:transparent;}
  .btn-ghost:hover{color:var(--text);border-color:var(--text-dim);}
  .btn-block{width:100%;}

  /* Divider */
  .divider{display:flex;align-items:center;gap:14px;margin:6px 0;color:var(--text-faint);font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-strong);}

  /* Error */
  .form-error{
    display:none;padding:10px 14px;border-radius:var(--radius-s);
    background:rgba(255,60,60,.1);border:1px solid rgba(255,60,60,.3);
    color:#ff6b6b;font-size:13px;
  }
  .form-error.active{display:block;}

  /* Footer link */
  .auth-footer{text-align:center;margin-top:24px;font-size:13.5px;color:var(--text-faint);}
  .auth-footer a{color:var(--cyan);font-weight:500;transition:color .2s;}
  .auth-footer a:hover{color:var(--lime);}

  /* Password strength */
  .pw-strength{display:flex;gap:4px;margin-top:4px;}
  .pw-bar{height:3px;flex:1;border-radius:2px;background:var(--line-strong);transition:background .3s;}
  .pw-bar.weak{background:#ff4d4d;}
  .pw-bar.medium{background:#ffaa00;}
  .pw-bar.strong{background:var(--lime);}
  .pw-label{font-size:11px;color:var(--text-faint);margin-top:2px;}

  @media(max-width:520px){
    .auth-container{padding:16px;}
    .auth-card{padding:22px 18px 26px;}
    .form-row{grid-template-columns:1fr;}
  }

  .plan-badge-wrap { text-align: center; margin-bottom: 4px; display: none; }
  .submit-btn { margin-top: 6px; }
  .forgot-pw-wrap { text-align: center; margin-top: 6px; }
  .forgot-pw-link { font-size: 13px; color: var(--text-faint); transition: color .2s; }
  .forgot-pw-link:hover { color: var(--cyan); }