nav { padding: .7rem 0; position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(120%) blur(6px); }
nav .inner{ display:flex; justify-content:space-between; align-items:center; }
nav .left, nav .right { display:flex; gap: .75rem; align-items:center; }
nav a { padding: .35rem .5rem; border-radius: 10px; border: 1px solid transparent; transition: background .2s ease, transform .05s ease, border-color .2s ease, color .2s ease; }
nav a:hover { background: rgba(124,194,255,.08); border-color: #3a528a; }
nav a:active { transform: translateY(1px); }
nav a.active {
  color: #0b1222; text-decoration: none;
  background: linear-gradient(135deg, #7cc2ff, #d07cff 85%);
  border: 1px solid #7a6cff;
  box-shadow: 0 6px 16px rgba(124,194,255,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
main { min-height: calc(100vh - 120px); padding: 1rem 0; }
footer { padding: .9rem 0; }
#status-msg { color: var(--muted); }
input[type="text"].inline-edit { min-width: 240px; }

.item-row{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; }
.item-row .spacer{ flex:1 }

kbd {
  background: linear-gradient(180deg, #0f1a33, #0c1224);
  border:1px solid var(--border); padding:.18rem .4rem;
  border-radius:8px; font-size:.86rem; color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35);
}

.login-card{ max-width:480px; margin:3rem auto; }

h1,h2,h3{ margin:.25rem 0 .6rem 0 }
h1{ font-size:1.45rem; background: linear-gradient(90deg, var(--accent), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2{ font-size:1.22rem }
h3{ font-size:1.05rem; color: var(--accent-2); }

footer .version{ float:right }

/* Focus-visible treatment for better a11y */
:where(a, button, input, select, .card):focus-visible { outline: none; box-shadow: var(--ring); border-color: #3d5fa8 !important; }