/* Shared with the atlas: calm surfaces, clear controls and a complete dark palette. */
body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
h1,h2,h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.045em; }
.forest h1 { font-family: var(--serif); font-weight: 400; }
input,.panel { background: var(--white); border-color: var(--line); color: var(--ink); }
input::placeholder { color: var(--muted); }
input { border-radius: 10px; }
.button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); border-radius: 10px; font-weight: 600; }
.button:hover { background: var(--accent); filter: brightness(.95); }
.button-secondary,.button-list { background: var(--soft); border-color: var(--line); color: var(--green); }
.button-secondary:hover,.button-list:hover { background: var(--soft); }
.button-danger { color: var(--danger); }
.entry { position: relative; padding-top: 78px; }
.entry-theme { position: absolute; right: 24px; top: 24px; }
.entry-symbol,.count { background: var(--soft); border-color: var(--line); color: var(--green); }
.entry-note,.show-password,footer,.legal p { color: var(--muted); }
.form-message { color: var(--danger); }.form-message.success { color: var(--green); }
.panel { border-radius: 17px; }
.forest .brand img { background: #edf3e4; }
.forest .private-mark { color: #f3f7eb; }
.forest .private-mark i,.forest .eyebrow { color: #d4f58c; }
.entrance .forest { border-radius: 22px; }
.page-header { gap: 16px; }
.page-header>div[data-theme-control] { margin-left: auto; }
.page-header .theme-control select { font-size: 11px; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus { outline-color: var(--green); }
@media(max-width:620px) {
  .entry { padding-top: 70px; }.entry-theme { top: 15px; right: 20px; }
  .page-header { flex-wrap: wrap; padding: 22px; }.page-header nav { flex-wrap: wrap; justify-content: flex-end; }
  .page-header .brand img { width: 33px; height: 33px; }.page-header .brand { gap: 8px; }
  .page-header .theme-control { padding: 0 6px; gap: 4px; }.page-header .theme-control select { width: 65px; font-size: 10px; }
}
@media(max-width:620px) { input { font-size: 16px; }.intro { font-size: 14px; }.field-help,.invite-note p { font-size: 12px; } }