:root{
      --bg:#050609;
      --panel:rgba(15,17,23,.82);
      --line:rgba(255,255,255,.10);
      --text:#f5efe6;
      --muted:rgba(245,239,230,.58);
      --gold:#d7ae68;
      --gold2:#ffe3a3;
      --danger:#ff8f8f;
      font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    *{box-sizing:border-box}

    html,body{
      min-height:100%;
      margin:0;
    }

    body{
      color:var(--text);
      background:
        radial-gradient(circle at 70% 12%, rgba(35,54,78,.22), transparent 32%),
        radial-gradient(circle at 36% -8%, rgba(215,174,104,.12), transparent 30%),
        radial-gradient(circle at 50% 105%, rgba(215,174,104,.06), transparent 34%),
        linear-gradient(180deg,#050609,#080a0f 48%,#050609);
      overflow:hidden;
    }

    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.012) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 70%);
      opacity:.28;
    }

    .login-page{
      position:relative;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:28px;
    }

    .login-card{
      width:min(440px, 100%);
      border:1px solid var(--line);
      border-radius:30px;
      background:
        radial-gradient(circle at 85% 0%, rgba(215,174,104,.16), transparent 34%),
        linear-gradient(145deg, rgba(18,20,27,.86), rgba(8,10,14,.88));
      box-shadow:
        0 28px 90px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.06);
      backdrop-filter:blur(18px);
      overflow:hidden;
      animation:cardIn .55s ease both;
    }

    @keyframes cardIn{
      from{opacity:0; transform:translateY(12px) scale(.985)}
      to{opacity:1; transform:translateY(0) scale(1)}
    }

    .login-head{
      padding:34px 34px 22px;
      border-bottom:1px solid rgba(255,255,255,.075);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:24px;
    }

    .brand-mark{
      width:42px;
      height:42px;
      border-radius:16px;
      display:grid;
      place-items:center;
      color:#171109;
      font-weight:760;
      background:linear-gradient(135deg,#ffe3a3,#c58b35);
      box-shadow:0 14px 34px rgba(215,174,104,.20);
    }

    .brand-text{
      color:#f3ca78;
      font-size:21px;
      line-height:1;
      font-weight:620;
      letter-spacing:.13em;
      text-transform:uppercase;
    }

    .brand-sub{
      margin-top:5px;
      color:var(--muted);
      font-size:12px;
      font-weight:460;
    }

    h1{
      margin:0 0 8px;
      font-size:32px;
      line-height:1.02;
      letter-spacing:-.045em;
      font-weight:720;
    }

    .lead{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.45;
      font-weight:460;
    }

    form{
      padding:28px 34px 34px;
    }

    .field{
      margin-bottom:16px;
    }

    label{
      display:block;
      margin:0 0 8px;
      color:rgba(245,239,230,.72);
      font-size:13px;
      font-weight:560;
    }

    input[type="text"],
    input[type="password"]{
      width:100%;
      height:50px;
      padding:0 16px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      outline:none;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 10px 28px rgba(0,0,0,.16);
      font-size:15px;
      font-weight:460;
      transition:.18s ease;
    }

    input[type="text"]:focus,
    input[type="password"]:focus{
      border-color:rgba(215,174,104,.52);
      box-shadow:
        0 0 0 4px rgba(215,174,104,.09),
        inset 0 1px 0 rgba(255,255,255,.05);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }

    .errorlist{
      list-style:none;
      margin:0 0 16px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,100,100,.22);
      background:rgba(210,78,78,.10);
      color:#ffd0d0;
      font-size:13px;
      line-height:1.35;
    }

    .form-error{
      margin:0 0 16px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,100,100,.22);
      background:rgba(210,78,78,.10);
      color:#ffd0d0;
      font-size:13px;
      line-height:1.35;
    }

    .login-btn{
      width:100%;
      height:50px;
      margin-top:8px;
      border:0;
      border-radius:17px;
      color:#171109;
      cursor:pointer;
      background:linear-gradient(135deg,#ffe3a3 0%,#d09a43 100%);
      box-shadow:
        0 18px 42px rgba(215,174,104,.22),
        inset 0 1px 0 rgba(255,255,255,.40);
      font-size:15px;
      font-weight:720;
      letter-spacing:-.015em;
      transition:.18s ease;
    }

    .login-btn:hover{
      transform:translateY(-1px);
      background:linear-gradient(135deg,#ffeab9 0%,#d9a24a 100%);
      box-shadow:
        0 22px 52px rgba(215,174,104,.28),
        inset 0 1px 0 rgba(255,255,255,.44);
    }

    .login-foot{
      margin-top:18px;
      color:rgba(245,239,230,.42);
      font-size:12px;
      line-height:1.4;
      text-align:center;
    }

    @media(max-width:520px){
      .login-page{padding:18px}
      .login-head{padding:28px 24px 20px}
      form{padding:24px}
      h1{font-size:28px}
    }
  
/* === GRAVIUM LOGIN LOGO FIX === */

.brand-mark{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  display:grid !important;
  place-items:center !important;
  background:rgba(215,174,104,.08) !important;
  border:1px solid rgba(215,174,104,.20) !important;
  box-shadow:
    0 14px 34px rgba(215,174,104,.13),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow:hidden !important;
}

.login-logo-img{
  display:block !important;
  width:36px !important;
  height:36px !important;
  object-fit:contain !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(83%)
    sepia(36%)
    saturate(642%)
    hue-rotate(351deg)
    brightness(103%)
    contrast(94%)
    drop-shadow(0 0 10px rgba(215,174,104,.22)) !important;
}

.brand-text{
  color:#f3ca78 !important;
  font-size:21px !important;
  line-height:1 !important;
  font-weight:620 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

.brand-sub{
  margin-top:6px !important;
  color:rgba(245,239,230,.55) !important;
  font-size:12px !important;
  font-weight:460 !important;
}