/* Shared account controls inherit every Kinvy look. */
:root {
  --appkit-ink: var(--ink);
  --appkit-accent: var(--action);
  --appkit-surface: var(--surface);
  --appkit-radius: var(--r-input);
  --appkit-font: var(--font);
}
.kit-shell { max-width: 72rem; margin: 0 auto; padding: 16px; min-height: 100dvh; }
.kit-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px; }
.kit-header a { min-height: var(--tap); display: inline-flex; align-items: center; }
.kit-shell .ak { border-radius: var(--r-card); }
.kit-shell .ak h1, .kit-shell .ak h2 { font-family: var(--font-display, var(--font)); }
.kit-shell .ak button:not(.ak-link):not(.ak-secondary), .kit-shell .ak .button { background: var(--action); color: var(--on, #fff); }
.kit-shell .ak .ak-secondary { background: var(--surface-3); color: var(--ink); }
.kit-shell .ak nav, .kit-shell .ak section { border-color: var(--border); }
.kit-shell .ak input:not([type=checkbox]), .kit-shell .ak textarea, .kit-shell .ak select { background: var(--surface-2); border-color: var(--border-strong); }
.kit-shell .ak :focus-visible { background: var(--focus); color: var(--ink); }
.kit-shell .ak .ak-error { color: var(--danger); }
.kit-shell .ak-skip { position: absolute; left: -10000px; }
.kit-shell .ak-skip:focus { position: static; }

/* Sign-in: the page already has the Kinvy brand row; one card, no panel behind it */
.kit-shell .ak.ak-auth { background: none; min-height: auto; padding-top: 8px; }
.kit-shell .ak-brand { display: none; }
/* Account pages inside the app frame (sidebar on desktop, tab bar on phones) */
.kit-in-app { max-width: none; margin: 0; padding: 8px 16px 24px; }
.kit-in-app .kit-header { padding: 8px 0; }
@media (min-width: 1024px) { .kit-in-app { padding: 16px 32px 40px; } }