:root {
  --auth-blue: #054a91;
  --auth-blue-dark: #033b74;
  --auth-blue-soft: #edf5fc;
  --auth-orange: #ff6700;
  --auth-ink: #17243a;
  --auth-muted: #64748b;
  --auth-line: #dce6f0;
  --auth-success: #14804a;
  --auth-danger: #b42318;
}

.nav-actions,
.auth-nav {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.auth-login-link,
.auth-signup-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.auth-login-link {
  color: var(--auth-blue);
  border: 1px solid #c9d9e7;
  background: #fff;
}

.auth-login-link:hover { border-color: var(--auth-blue); background: var(--auth-blue-soft); }
.auth-signup-link { color: #fff; background: var(--auth-blue); box-shadow: 0 8px 18px rgba(5, 74, 145, 0.18); }
.auth-signup-link:hover { background: var(--auth-blue-dark); transform: translateY(-1px); }
.auth-login-link:focus-visible,
.auth-signup-link:focus-visible,
.auth-account-menu summary:focus-visible { outline: 4px solid rgba(62, 124, 177, 0.2); outline-offset: 2px; }

.auth-account-menu { position: relative; }
.auth-account-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 5px 10px 5px 5px;
  color: var(--auth-blue);
  background: var(--auth-blue-soft);
  border: 1px solid #d4e4f2;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.auth-account-menu summary::-webkit-details-marker { display: none; }
.auth-account-menu summary > i { font-size: 9px; transition: transform 0.18s ease; }
.auth-account-menu[open] summary > i { transform: rotate(180deg); }
.auth-avatar { width: 31px; height: 31px; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--auth-blue); border-radius: 50%; font-size: 11px; letter-spacing: 0.02em; }
.auth-avatar-image { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-account-name { max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 245px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--auth-line);
  border-radius: 15px;
  box-shadow: 0 18px 45px rgba(20, 58, 94, 0.16);
}

.auth-account-identity { padding: 5px 7px 12px; border-bottom: 1px solid var(--auth-line); }
.auth-account-identity strong,
.auth-account-identity span { display: block; }
.auth-account-identity strong { margin-bottom: 3px; color: var(--auth-ink); font-size: 11px; }
.auth-account-identity span { overflow: hidden; color: var(--auth-muted); font-size: 11px; text-overflow: ellipsis; }
.auth-account-link,
.auth-signout-button { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 7px; padding: 10px 8px; background: transparent; border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; }
.auth-account-link { color: var(--auth-blue); }
.auth-account-link:hover { background: var(--auth-blue-soft); }
.auth-signout-button { color: var(--auth-danger); }
.auth-signout-button:hover { background: #fff0ee; }

@media (max-width: 1120px) {
  .nav-actions .lang-btn { display: none; }
  .nav-menu { gap: 20px !important; }
}

@media (max-width: 900px) and (min-width: 769px) {
  .auth-account-name { display: none; }
  .auth-account-menu summary { padding-right: 7px; }
  .auth-account-menu summary > i { display: none; }
  .auth-login-link,
  .auth-signup-link { padding-inline: 11px; }
  .nav-menu { gap: 13px !important; }
  .nav-menu a { font-size: 14px !important; }
}

@media (max-width: 768px) {
  .nav-content { gap: 10px; }
  .nav-content .logo { margin-right: auto; }
  .nav-actions { margin-left: auto; }
  .auth-signup-link { display: none; }
  .auth-login-link { min-height: 38px; padding: 7px 11px; }
  .auth-account-name,
  .auth-account-menu summary > i { display: none; }
  .auth-account-menu summary { min-height: 38px; padding: 3px; border: 0; background: transparent; }
  .auth-avatar { width: 34px; height: 34px; }
  .auth-account-panel { right: -44px; }
}

@media (max-width: 430px) {
  .nav-content .logo img { height: 54px !important; max-width: 150px; }
}

/* --- Midnight ---------------------------------------------------------
   The account controls are rendered by auth-nav.js, so their markup is
   not something a page can restyle. Everything above is either an
   --auth-* token or one of five literals; re-pointing them here is
   enough to carry the whole cluster into dark mode.

   Scoped to [data-theme="dark"], which only pages carrying site.css and
   the inline theme script ever set — so no page that has not been
   converted yet changes at all. */
[data-theme="dark"] {
  --auth-blue: #6fb2f0;
  --auth-blue-dark: #8cc4f6;
  --auth-blue-soft: #16283a;
  --auth-ink: #e6eef7;
  --auth-muted: #9db1c5;
  --auth-line: #213548;
  --auth-danger: #ec8b8b;
}

[data-theme="dark"] .auth-login-link { border-color: #33506e; background: #111f2e; }
[data-theme="dark"] .auth-signup-link { color: #0a1622; box-shadow: none; }
[data-theme="dark"] .auth-account-menu summary { border-color: #33506e; }
[data-theme="dark"] .auth-avatar { color: #0a1622; }
[data-theme="dark"] .auth-account-panel {
  background: #111f2e;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .auth-signout-button:hover { background: #33201f; }