:root{
      --bg: #0b1020;
      --panel: rgba(255,255,255,.06);
      --panel-2: rgba(255,255,255,.085);
      --stroke: rgba(255,255,255,.10);
      --stroke-2: rgba(255,255,255,.16);

      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.70);
      --muted-2: rgba(255,255,255,.55);

      --ink: #0f172a;

      --a: #5bb88c;
      --b: #5bb88c;
      --c: #2b6db5;
      --d: #5bb88c;

      --shadow: 0 24px 80px rgba(0,0,0,.45);
      --shadow-soft: 0 18px 50px rgba(0,0,0,.25);
      --radius-xl: 22px;
      --radius-lg: 16px;
      --radius-md: 12px;

      --container: 1320px;
      --pad-x: 60px;

      --ease: cubic-bezier(.2,.9,.2,1);
    }

    *{ margin:0; padding:0; box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      line-height: 1.7;
      color: var(--ink);
      background:
        radial-gradient(1000px 600px at 20% 10%, rgba(91, 184, 140,.22) 0%, rgba(91, 184, 140,0) 55%),
        radial-gradient(900px 700px at 80% 0%, rgba(91, 184, 140,.22) 0%, rgba(91, 184, 140,0) 55%),
        radial-gradient(900px 700px at 70% 70%, rgba(43, 109, 181,.14) 0%, rgba(43, 109, 181,0) 60%),
        linear-gradient(180deg, #fafafa 0%, #f6f7fb 40%, #fafafa 100%);
      font-weight: 400;
      overflow-x: hidden;
    }

    body::before{
      content:"";
      position: fixed;
      inset: 0;
      pointer-events:none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity:.45;
      z-index:0;
    }

    .container{
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--pad-x);
      position: relative;
      z-index: 1;
    }

    nav{
      position: sticky;
      top: 0;
      z-index: 50;
      padding: 18px 0;
      background: rgba(255,255,255,.66);
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      backdrop-filter: blur(18px);
    }
    .nav-content{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 18px;
    }
    .logo{
      display:flex;
      align-items:center;
      gap: 12px;
      font-size: 1.05em;
      font-weight: 750;
      letter-spacing: -0.02em;
      color: #0f172a;
      user-select:none;
      text-decoration: none;
    }
    .logo-badge{
      width: 36px;
      height: 36px;
      border-radius: 5px;
      background: none;
      position: relative;
      overflow:hidden;
    }
    .logo small{
      display:block;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: .70em;
      color: #64748b;
      margin-top: -2px;
    }

    .nav-link{
      text-decoration: none;
      font-weight: 650;
      font-size: .95em;
      color: #0f172a;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.75);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .nav-link:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 28px rgba(15,23,42,.08);
    }

    main{
      min-height: calc(100vh - 84px);
      display:flex;
      align-items:center;
      padding: 80px 0 120px;
    }

    .login-card{
      max-width: 520px;
      margin: 0 auto;
      padding: 36px 40px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(15,23,42,.08);
      border-radius: var(--radius-xl);
      box-shadow: 0 24px 80px rgba(15,23,42,.08);
      position: relative;
      overflow: hidden;
    }
    .login-card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(90% 80% at 10% 0%, rgba(91, 184, 140,.18) 0%, rgba(91, 184, 140,0) 55%),
        radial-gradient(85% 85% at 90% 100%, rgba(91, 184, 140,.16) 0%, rgba(91, 184, 140,0) 55%);
      pointer-events:none;
    }
    .login-card-inner{
      position: relative;
      z-index: 1;
    }

    .login-card h1{
      font-size: 2.2em;
      line-height: 1.2;
      font-weight: 780;
      color: #0b1220;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
    }
    .login-subtitle{
      font-size: 1.05em;
      color: #475569;
      margin-bottom: 26px;
    }

    .form-field{
      margin-bottom: 18px;
    }
    .form-field label{
      display:block;
      font-weight: 650;
      margin-bottom: 8px;
      color: #0f172a;
    }
    .form-field input{
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.9);
      font-size: 1em;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }
    .form-field input:focus{
      outline: none;
      border-color: rgba(43, 109, 181,.5);
      box-shadow: 0 0 0 3px rgba(43, 109, 181,.15);
    }
    .captcha-box{
      --captcha-scale: 1;
      border: 1px solid rgba(15,23,42,.12);
      background: rgba(255,255,255,.9);
      border-radius: 12px;
      padding: 10px;
      max-width: 100%;
      overflow: hidden;
    }
    .captcha-scale{
      position: relative;
      width: calc(300px * var(--captcha-scale));
      height: calc(65px * var(--captcha-scale));
      max-width: 100%;
      overflow: hidden;
    }
    .captcha-scale .cf-turnstile{
      position: absolute;
      left: 0;
      top: 0;
      width: 300px;
      height: 65px;
      transform: scale(var(--captcha-scale));
      transform-origin: left top;
    }

    .form-actions{
      display:flex;
      gap: 12px;
      align-items:center;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .btn-primary{
      border: none;
      padding: 12px 20px;
      border-radius: 12px;
      font-weight: 650;
      font-size: .98em;
      color: #fff;
      cursor: pointer;
      background:
        radial-gradient(120% 180% at 10% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(135deg, rgba(43, 109, 181,1) 0%, rgba(91, 184, 140,1) 55%, rgba(91, 184, 140,1) 100%);
      box-shadow: 0 14px 32px rgba(43, 109, 181,.25);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
    }
    .btn-primary:hover{
      transform: translateY(-2px);
      box-shadow: 0 20px 44px rgba(43, 109, 181,.30);
      filter: saturate(1.08);
    }
    .btn-primary:disabled{
      opacity: .7;
      cursor: default;
      transform: none;
      box-shadow: 0 14px 32px rgba(43, 109, 181,.18);
    }

    .link-home{
      text-decoration: none;
      font-weight: 650;
      color: #0f172a;
      padding: 10px 2px;
    }

    .form-status{
      margin-top: 16px;
      min-height: 24px;
      font-weight: 650;
      color: #334155;
    }
    .form-status.is-success{ color: #0f766e; }
    .form-status.is-error{ color: #b91c1c; }

    @media (max-width: 900px){
      :root{ --pad-x: 32px; }
      main{ padding: 70px 0 100px; }
      .login-card{ padding: 30px 28px; }
    }

    @media (max-width: 600px){
      :root{ --pad-x: 22px; }
      .login-card h1{ font-size: 1.8em; }
      .login-card{ width: 100%; }
    }