:root {
  --ifrp-gold: #d6ad36;
  --ifrp-gold-light: #f2d56f;
  --ifrp-text: #f7f9fc;
  --ifrp-muted: #95a2b2;
  --ifrp-field: #111820;
  --ifrp-field-hover: #151e27;
  --ifrp-border: rgba(214, 173, 54, 0.22);
  --ct-color-host-accent: #d6ad36 !important;
}

/* =========================================================
   Illinois Finest Roleplay — Cockpit 314 login
   Targets the ACTUAL Cockpit DOM:
   body.login-pf > #main.container > #login.login-area
   ========================================================= */

/* Full viewport */
html,
body,
body.login-pf {
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 50% 18%, rgba(39, 78, 116, 0.24), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(18, 49, 77, 0.22), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(214, 173, 54, 0.07), transparent 28%),
    linear-gradient(145deg, #020509 0%, #07111b 48%, #03070c 100%) !important;

  color: var(--ifrp-text) !important;
}

/* Fine grid + vignette */
body.login-pf::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.34) 100%);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  opacity: .9;
}

/* Soft light behind the card */
body.login-pf::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 760px;
  height: 560px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse,
    rgba(32, 67, 99, .18) 0%,
    rgba(17, 38, 57, .08) 44%,
    transparent 72%
  );
  filter: blur(14px);
}

/* IMPORTANT: this is Cockpit 314's real main wrapper */
#main.container {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;

  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;

  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  float: none !important;
  transform: none !important;

  background: transparent !important;
  border: 0 !important;
}

/* Remove Cockpit's extra/legacy panels */
#unsupported-browser,
#recent-hosts,
#badge,
#login-details,
.login-details,
.login-pf .details,
.login-pf .login-pf-page-header,
#brand + p,
#login .help-block {
  display: none !important;
}

/* Make sure old Cockpit layout pieces can't paint those hard rectangles */
#main::before,
#main::after,
#main > #unsupported-browser,
#main > #recent-hosts {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Keep Cockpit's hidden behavior intact */
#login[hidden] {
  display: none !important;
}

/* ACTUAL login card */
#login.login-area:not([hidden]) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  display: block !important;
  float: none !important;
  transform: none !important;

  width: 440px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 38px 36px 32px !important;
  box-sizing: border-box !important;

  border: 1px solid var(--ifrp-border) !important;
  border-radius: 22px !important;

  background:
    linear-gradient(
      180deg,
      rgba(22, 29, 37, .985) 0%,
      rgba(11, 16, 22, .985) 100%
    ) !important;

  box-shadow:
    0 42px 120px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 1px 0 rgba(255,255,255,.05) inset,
    0 0 60px rgba(26, 57, 84, .12) !important;

  overflow: visible !important;
  backdrop-filter: blur(20px);
}

/* Minimal IFRP mark, no external logo */
#login.login-area::before {
  content: "IF";
  display: grid;
  place-items: center;

  width: 64px;
  height: 64px;
  margin: 0 auto 19px;

  border: 1px solid rgba(242, 213, 111, .34);
  border-radius: 18px;

  background:
    linear-gradient(145deg, rgba(214,173,54,.18), rgba(214,173,54,.045)),
    #0a1118;

  color: var(--ifrp-gold-light);
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.045em;

  box-shadow:
    0 14px 32px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* Brand */
#brand {
  margin: 0 0 29px !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;

  background: transparent !important;
  color: transparent !important;

  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

#brand::before {
  content: "Illinois Finest Roleplay" !important;
  display: block;

  color: var(--ifrp-text) !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

#brand::after {
  content: "CONTROL PANEL";
  display: block;
  margin-top: 9px;

  color: var(--ifrp-muted);
  font-size: 10px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: .22em;
}

/* Form divider */
#login form::before {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin: -11px auto 25px;

  border-radius: 999px;
  background: linear-gradient(90deg, var(--ifrp-gold-light), #aa7b07);
  box-shadow: 0 0 18px rgba(214,173,54,.14);
}

/* Labels */
#login label,
.login-pf label {
  color: #dce4ed !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

/* Inputs */
#login-user-input,
#login-password-input,
#conversation-input {
  width: 100% !important;
  min-height: 46px !important;
  box-sizing: border-box !important;

  color: var(--ifrp-text) !important;
  caret-color: var(--ifrp-gold-light) !important;

  background: var(--ifrp-field) !important;
  border: 1px solid rgba(148,163,184,.21) !important;
  border-radius: 10px !important;

  box-shadow: none !important;

  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}

#login-user-input:hover,
#login-password-input:hover,
#conversation-input:hover {
  background: var(--ifrp-field-hover) !important;
}

#login-user-input:focus,
#login-password-input:focus,
#conversation-input:focus {
  background: #17212b !important;
  border-color: rgba(214,173,54,.78) !important;
  box-shadow: 0 0 0 3px rgba(214,173,54,.11) !important;
}

/* Password eye / secondary button */
#login button:not(#login-button) {
  border-color: rgba(148,163,184,.18) !important;
  background: #171d25 !important;
}

/* Log in button */
#login-button {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 9px !important;

  border: 1px solid rgba(255,229,132,.24) !important;
  border-radius: 10px !important;

  background: linear-gradient(135deg, #e0bd49 0%, #b48208 100%) !important;
  color: #070b10 !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;

  box-shadow:
    0 11px 30px rgba(180,130,8,.17),
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  transition:
    filter 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease !important;
}

#login-button:hover {
  filter: brightness(1.07);
  box-shadow:
    0 15px 36px rgba(180,130,8,.23),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

#login-button:active {
  transform: translateY(1px);
}

/* Footer */
#login.login-area::after {
  content: "AUTHORIZED ADMINISTRATION ACCESS";
  display: block;
  margin-top: 24px;

  color: #667382;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
  text-align: center;
}

/* Mobile */
@media (max-width: 600px) {
  #main.container {
    padding: 14px !important;
  }

  #login.login-area:not([hidden]) {
    width: 100% !important;
    max-width: 430px !important;
    padding: 30px 22px 26px !important;
    border-radius: 18px !important;
  }

  #login.login-area::before {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    font-size: 20px;
    margin-bottom: 16px;
  }

  #brand::before {
    font-size: 22px !important;
  }
}