.steam-button {font-size:14px;}
.account {
  position: relative;
  justify-self: end;
  z-index: 20;
  min-width: 0;
}
.account-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 11px 6px 6px;
  border: 1px solid #3b4b59;
  border-radius: 5px;
  background: #19222b;
  cursor: pointer;
  list-style: none;
}
.account-toggle::-webkit-details-marker {
  display: none;
}
.account-toggle::marker {
  content: "";
}
.account-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: #0e1318;
}
.account-name {
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
}
.account-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 280px;
  padding: 20px;
  border: 1px solid #3b4b59;
  border-radius: 6px;
  background: #11171e;
  box-shadow: 0 15px 45px #0009;
}
.account-label {
  display: block;
  color: #93a1ae;
  font-size: 12px;
  margin: 0 0 7px;
}
.account-panel-name {
  display: block;
  overflow-wrap: anywhere;
  font-size: 14px;
  margin-bottom: 20px;
}
.account-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.account-id-row input {
  width: 0;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 7px 0;
  background: transparent;
  color: #e1e8ed;
  font: 12px/1.4 monospace;
}
.account-id-row button {
  padding: 7px 9px;
  border: 1px solid #3b4b59;
  border-radius: 3px;
  background: #25313d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.account-copy-status {
  display: block;
  min-height: 24px;
  padding-top: 5px;
  color: #b5c5d2;
  font-size: 12px;
}
.account-signout {
  width: 100%;
  padding: 10px;
  border: 1px solid #3b4b59;
  border-radius: 4px;
  background: #19222b;
  font-size: 14px;
  font-weight: 700;
}
.account-dashboard {display:block;padding:12px;margin:0 0 19px;border:1px solid #465968;border-radius:4px;background:#23323e;color:#edf2f6;text-align:center;font-size:14px;font-weight:700;}
.steam-button,.account-toggle,.account-dashboard,.account-signout,.account-id-row button{transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s,transform .18s,filter .18s;background-image:radial-gradient(180px circle at var(--hover-x,50%) var(--hover-y,0%),#9bbcd31a,transparent 85%)}
.steam-icon,.account-avatar{transition:transform .22s,box-shadow .22s}
.account-toggle::after{content:'';width:7px;height:7px;margin:0 3px 3px 4px;border-right:2px solid #9bb0c0;border-bottom:2px solid #9bb0c0;transform:rotate(45deg);transition:transform .18s,border-color .18s;flex-shrink:0}
.account[open]>.account-toggle{border-color:#d87752;background-color:#25313d;box-shadow:0 0 18px #ee632119}
.account[open]>.account-toggle::after{transform:translateY(3px) rotate(225deg);border-color:#ff9a72}
.account-panel{border-top-color:#b56d4e;box-shadow:0 18px 48px #000a,inset 0 1px #ffffff08}
.account-name{transition:color .18s}
.account-id-row button.is-copied{border-color:#61c9a6;background-color:#1b3b33;color:#abf5d7}
.steam-button:focus-visible,.account-dashboard:focus-visible,.account-signout:focus-visible,.account-id-row button:focus-visible{outline:2px solid #ff946b;outline-offset:4px;border-color:#f39b78}
@media(hover:hover) and (pointer:fine){
 .steam-button:hover,.account-toggle:hover,.account-dashboard:hover,.account-signout:hover,.account-id-row button:hover{background-color:#2c414f;border-color:#f18b62;color:#fff;box-shadow:0 6px 18px #0004,0 0 17px #f1733522,inset 0 1px #ffffff14;filter:brightness(1.08)}
 .account-toggle:hover .account-name{color:#ffd8c6}
 .account-dashboard.account-inventory:hover{border-color:#f18b62}
}
@media(prefers-reduced-motion:no-preference){
 .account[open] .account-panel{transform-origin:top right;animation:account-enter .19s ease-out both}
 .steam-button:active,.account-toggle:active,.account-dashboard:active,.account-signout:active,.account-id-row button:active{transform:translateY(1px) scale(.98)}
 @media(hover:hover) and (pointer:fine){
  .steam-button:hover:not(:active),.account-toggle:hover:not(:active),.account-dashboard:hover:not(:active),.account-signout:hover:not(:active),.account-id-row button:hover:not(:active){transform:translateY(-2px)}
  .account-toggle:hover .account-avatar,.steam-button:hover .steam-icon{transform:scale(1.08)}
 }
}
@keyframes account-enter{from{opacity:0;transform:translateY(-7px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.steam-button,.account-toggle,.account-dashboard,.account-signout,.account-id-row button,.account-avatar,.steam-icon,.account-name,.account-toggle::after{transition:none!important}}
.auth-message {
  padding: 80px 0;
  min-height: 55vh;
}
.auth-message h1 {
  font-size: clamp(28px, 4vw, 45px);
  line-height: 1.2;
  margin: 0 0 20px;
}
.auth-message p {
  max-width: 560px;
  color: var(--muted);
  margin-bottom: 28px;
}
.auth-message .button {
  margin: 0 10px 10px 0;
}
@media (max-width: 680px) {
  .account-toggle {
    padding: 4px 8px 4px 4px;
    gap: 7px;
  }
  .account-avatar {
    width: 30px;
    height: 30px;
  }
  .account-name {
    max-width: 85px;
    font-size: 12px;
  }
  .account-panel {
    width: min(280px, calc(100vw - 28px));
  }
  .auth-message {
    padding-top: 45px;
  }
}