.auth-root {
  margin: 0 0 14px;
}

.auth-root[data-connected="false"][data-admin="false"] .steam-auth { min-height: 70px; padding-block: 10px; }
.auth-root[data-connected="false"][data-admin="false"] .steam-auth__eyebrow,
.auth-root[data-connected="false"][data-admin="false"] .steam-auth__detail { display: none; }

.steam-auth {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 88px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  background-image: linear-gradient(rgba(26, 13, 14, .72), rgba(26, 13, 14, .82)), var(--brocade);
  background-size: auto, 570px 570px;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 154, .06), 0 9px 20px rgba(0, 0, 0, .16);
}

.steam-auth__crest {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(243, 204, 134, .7);
  border-radius: 50%;
  background-image: linear-gradient(rgba(108, 62, 31, .25), rgba(31, 17, 16, .5)), var(--gold-brocade);
  background-size: auto, 210px 210px;
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 2px rgba(20, 12, 11, .45);
}

.steam-auth__crest svg {
  width: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.steam-auth__copy {
  min-width: 0;
  flex: 1;
}

.steam-auth__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--gold-hi);
  font: 700 .76rem var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.steam-auth__title {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 800 1.32rem/1.08 var(--font-display);
}

.steam-auth__detail,
.steam-auth__status {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.4;
}

.steam-auth__status[data-tone="error"] { color: #ffc7bd; }
.steam-auth__status[data-tone="success"] { color: #f5d894; }

.steam-auth__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.steam-auth__avatar {
  width: 38px;
  height: 38px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  object-fit: cover;
}

.steam-auth__button {
  min-width: 154px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #e2bc78;
  border-radius: 3px;
  background-image: linear-gradient(rgba(124, 73, 32, .28), rgba(69, 33, 20, .53)), var(--gold-brocade);
  background-size: auto, 270px 270px;
  color: #fff3d5;
  font: 800 .9rem/1.1 var(--font-display);
  letter-spacing: .045em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255, 228, 174, .35), 0 4px 12px rgba(0, 0, 0, .22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  touch-action: manipulation;
}

.steam-auth__button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #ffe0a1;
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 186, .65), 0 0 16px rgba(245, 202, 117, .48), 0 0 32px rgba(202, 128, 52, .24), 0 7px 16px rgba(0, 0, 0, .3);
}

.steam-auth__button:active:not(:disabled) { transform: translateY(0); }
.steam-auth__button:disabled { cursor: wait; opacity: .6; }
.auth-root[data-connected="true"] .steam-auth__button { min-width: 120px; background-image: linear-gradient(rgba(31, 18, 18, .72), rgba(31, 18, 18, .83)), var(--brocade); }

.steam-auth__signout {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(243, 204, 134, .55);
  border-radius: 3px;
  background: rgba(21, 12, 13, .72);
  color: var(--ink);
  font: 700 .83rem var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  touch-action: manipulation;
}

.steam-auth__signout[hidden] { display: none; }
.steam-auth__signout:hover:not(:disabled) { border-color: var(--gold-hi); color: var(--gold-hi); }
.steam-auth__signout:disabled { cursor: wait; opacity: .6; }
.steam-auth__button:focus-visible,
.steam-auth__signout:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.admin-entry {
  border: 1px solid rgba(221, 177, 107, .25);
  border-top: 0;
  background-image: linear-gradient(rgba(15, 9, 11, .88), rgba(15, 9, 11, .93)), var(--brocade);
  background-size: auto, 570px 570px;
}

.admin-entry summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-height: 44px;
  padding: 8px 18px;
  color: var(--muted);
  cursor: pointer;
  font: 700 .8rem var(--font-display);
  letter-spacing: .055em;
  list-style: none;
  text-transform: uppercase;
  touch-action: manipulation;
}

.admin-entry summary::-webkit-details-marker { display: none; }
.admin-entry summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
}
.admin-entry[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.admin-entry summary:hover { color: var(--gold-hi); }

.admin-entry__body {
  padding: 15px 18px 18px;
  border-top: 1px solid rgba(221, 177, 107, .23);
}

.admin-entry label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font: 700 .91rem var(--font-display);
}

.admin-entry__form-row,
.admin-entry__account-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.admin-entry input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: none;
  background: rgba(13, 8, 9, .78);
  color: var(--ink);
  font-size: 1rem;
}
.admin-entry input:focus-visible { border-color: var(--gold-hi); outline: 2px solid var(--gold-hi); outline-offset: 2px; }

.admin-entry button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background-image: linear-gradient(rgba(88, 46, 28, .56), rgba(46, 23, 19, .72)), var(--gold-brocade);
  background-size: auto, 230px 230px;
  color: #fff0cc;
  font: 700 .85rem var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  touch-action: manipulation;
}
.admin-entry button:hover:not(:disabled) { border-color: var(--gold-hi); }
.admin-entry button:disabled { cursor: wait; opacity: .5; }

.admin-entry__helper,
.admin-entry__account,
.admin-entry__status {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}
.admin-entry__account { margin-top: 0; }
.admin-entry__account strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.admin-entry__account-actions { margin-top: 12px; }
.admin-entry__status[data-tone="error"] { color: #ffc7bd; }
.admin-entry__status[data-tone="success"] { color: var(--gold-hi); }

@media (max-width: 700px) {
  .steam-auth { align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; padding: 14px; }
  .steam-auth__crest { flex-basis: 40px; width: 40px; height: 40px; }
  .steam-auth__copy { flex-basis: calc(100% - 52px); }
  .steam-auth__actions { width: 100%; padding-left: 52px; }
  .steam-auth__button { flex: 1 1 120px; }
}

@media (max-width: 380px) {
  .steam-auth__actions { padding-left: 0; }
  .steam-auth__title { font-size: 1.19rem; }
}

@media (max-width: 520px) {
  .admin-entry summary { justify-content: flex-start; padding-inline: 14px; }
  .admin-entry__body { padding-inline: 14px; }
  .admin-entry__form-row { flex-direction: column; }
  .admin-entry input { flex-basis: auto; width: 100%; }
  .admin-entry__form-row button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .steam-auth__button { transition: none; }
}