:root{
      --bg1:#0f172a; /* slate-900 */
      --bg2:#1e293b; /* slate-800 */
      --acc:#3b82f6; /* blue-500 */
      --acc-2:#22d3ee; /* cyan-400 */
      --card-bg: rgba(255,255,255,0.08);
      --card-brd: rgba(255,255,255,0.25);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --shadow: 0 20px 45px rgba(0,0,0,.35);
    }

    html, body {
      height: 100%;
      background: radial-gradient(1200px 800px at 10% 10%, #0b1220 0%, var(--bg1) 50%) fixed,
                  linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 100%) fixed;
      color: var(--text);
      font-family: 'Source Sans Pro', sans-serif;
    }

    /* Partikel dekoratif */
    .orb, .orb-2 {
      position: fixed;
      filter: blur(60px);
      opacity: .4;
      z-index: 0;
      pointer-events: none;
    }
    .orb{
      width: 340px; height: 340px;
      top: -60px; left: -60px;
      background: radial-gradient(circle at 30% 30%, var(--acc), transparent 60%);
    }
    .orb-2{
      width: 420px; height: 420px;
      bottom: -80px; right: -80px;
      background: radial-gradient(circle at 70% 70%, var(--acc-2), transparent 60%);
    }

    /* Layout center */
    .auth-wrapper{
      min-height: 100%;
      display: -webkit-box; display: -ms-flexbox; display: flex;
      -webkit-box-align: center; -ms-flex-align: center; align-items: center;
      -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
      padding: 32px 16px;
      position: relative;
      z-index: 1;
    }

    /* Card modern (glass) */
    .auth-card{
      width: 100%;
      max-width: 420px;
      background: var(--card-bg);
      border: 1px solid var(--card-brd);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow: hidden;
      transform: translateY(0);
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .auth-card:hover{
      transform: translateY(-2px);
      box-shadow: 0 30px 60px rgba(0,0,0,.45);
    }

    .auth-header{
      padding: 26px 28px 18px;
      text-align: center;
      border-bottom: 1px solid rgba(255,255,255,.08);
      position: relative;
    }
    .brand-badge{
      display: inline-flex;
      width: 68px; height: 68px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--acc), var(--acc-2));
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      align-items: center; justify-content: center;
      color: #0b1220;
      box-shadow: inset 0 0 12px rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.25);
      margin-bottom: 14px;
    }
    .brand-badge i{ font-size: 34px; }

    .auth-title{
      margin: 6px 0 0;
      font-weight: 700;
      letter-spacing: .5px;
      font-size: 22px;
      color: #fff;
    }
    .auth-subtitle{
      margin: 2px 0 0;
      font-size: 13px;
      color: var(--muted);
      letter-spacing: .3px;
    }

    .auth-body{ padding: 24px 24px 10px; }

    /* Alert styling: tetap pakai .alert, tapi dibikin translucent */
    .alert{
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.08);
      color: #fff;
    }
    .alert-danger{ background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); }
    .alert-success{ background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35); }
    .alert-warning{ background: rgba(234,179,8,.15); border-color: rgba(234,179,8,.35); }

    /* Input modern */
    .form-label{
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 6px;
      letter-spacing: .2px;
    }

    .input-group{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color .2s ease, background .2s ease;
      margin-bottom: 16px;
    }
    .input-group:focus-within{
      border-color: rgba(59,130,246,.7);
      background: rgba(255,255,255,.09);
      box-shadow: 0 0 0 4px rgba(59,130,246,.15);
    }
    .input-group .input-group-addon{
      background: transparent;
      border: none;
      color: var(--muted);
      width: 44px;
      text-align: center;
      font-size: 16px;
    }
    .form-control{
      background: transparent !important;
      border: none !important;
      color: #e8eaed !important;
      height: 44px;
      box-shadow: none !important;
    }
    .form-control::-webkit-input-placeholder{ color: #94a3b8; }
    .form-control:-ms-input-placeholder{ color: #94a3b8; }
    .form-control::placeholder{ color: #94a3b8; }

    /* Utilities */
    .row-actions{
      display: -webkit-box; display:-ms-flexbox; display:flex;
      -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
      -webkit-box-align: center; -ms-flex-align: center; align-items: center;
      margin: 6px 0 18px;
      color: var(--muted);
      font-size: 13px;
    }

    .btn-primary{
      background: linear-gradient(135deg, var(--acc), var(--acc-2));
      border: none;
      border-radius: 12px;
      height: 44px;
      font-weight: 700;
      letter-spacing: .3px;
      box-shadow: 0 10px 22px rgba(59,130,246,.25);
      transition: transform .05s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .btn-primary:hover{
      box-shadow: 0 12px 28px rgba(59,130,246,.35);
      opacity: .95;
    }
    .btn-primary:active{ transform: translateY(1px); }

    .auth-footer{
      padding: 16px 24px 22px;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    /* Toggle password */
    .toggle-pass{
      cursor: pointer;
      width: 44px;
      text-align: center;
      color: var(--muted);
    }

    /* Kecilkan pada layar sempit */
    @media (max-width: 480px){
      .auth-card { max-width: 92vw; }
    }