.hydra-account-nav { display: flex; align-items: center; gap: 10px; margin-left: 10px; font: inherit; }
.hydra-account-nav [hidden], .hydra-nav-login[hidden] { display: none !important; }
.hydra-account-nav > a, .hydra-account-nav summary { display: block; padding: 10px 16px; border-radius: 24px; background: rgb(100 116 139 / 10%); color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.hydra-account-nav a:hover, .hydra-account-nav summary:hover, .hydra-account-menu button:hover { background: rgb(100 116 139 / 18%); }
.hydra-account-nav details { position: relative; }
.hydra-account-nav summary { list-style: none; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.hydra-account-nav summary::-webkit-details-marker { display: none; }
.hydra-account-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 190px; padding: 8px; border-radius: 14px; background: #f8fafc; color: #172033; box-shadow: 0 10px 35px #17203326; z-index: 1000; }
.hydra-account-menu a, .hydra-account-menu button { display: block; width: 100%; box-sizing: border-box; padding: 12px; color: inherit; text-decoration: none; text-align: start; border: 0; border-radius: 8px; background: transparent; font: inherit; cursor: pointer; }
.hydra-account-status { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.hydra-split-nav { flex-wrap: wrap; }
@media(max-width: 600px) { .hydra-account-nav { gap: 6px; margin-left: 4px; } .hydra-account-nav > a, .hydra-account-nav summary { padding: 8px 10px; font-size: 12px; } .hydra-account-nav summary { max-width: 90px; } .hydra-account-status { max-width: 90px; } }