/* dimagaID pages on top of ui-kit */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; }
.id-main { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.inline { display: inline; margin: 0; }
.id-nav { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); font-weight: 600; }
.id-nav a { color: var(--muted); }
.id-nav a[aria-current="page"], .id-nav a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 520px) { .hide-sm { display: none; } .id-nav { gap: var(--sp-3); } }

/* centered auth card */
.auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); gap: var(--sp-4); }
.auth-card { width: 100%; max-width: 420px; padding: var(--sp-6); }
.auth-title h1 { font-size: 26px; letter-spacing: -.01em; }
.auth-title p { margin-top: 4px; }
.auth-note { text-align: center; }
.center-text { text-align: center; align-items: center; }
.center-text .btn, .center-text form { width: 100%; }
.or { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.code-input { text-align: center; font: 600 24px/1.2 var(--mono); letter-spacing: .3em; }
.qr-box { display: flex; justify-content: center; padding: var(--sp-2) 0; }
.qr-box img { border-radius: var(--r-md); background: #fff; padding: 8px; width: 220px; height: 220px; }
.setup-steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--sp-4); }
.setup-steps > li { font-weight: 600; }
.setup-steps > li > * { font-weight: 400; }
.codes { list-style: none; margin: 0; padding: var(--sp-3); display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--sp-4);
  background: var(--surface-2); border-radius: var(--r-md); font: var(--fs-md)/1.6 var(--mono); text-align: center; }
.danger-tile { color: var(--err); background: var(--err-soft); }

/* account */
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.apps { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.app-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); color: var(--text); }
.app-link:hover { text-decoration: none; border-color: var(--accent); }
.app-link small { display: block; overflow-wrap: anywhere; }
.setting { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.setting .grow { min-width: 200px; }
.list-item .ua { display: block; overflow-wrap: anywhere; }
.row.wrap { flex-wrap: wrap; }

/* admin */
.id-tabs a { padding: 10px 2px; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); border-bottom: 2px solid transparent; white-space: nowrap; }
.id-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.id-tabs a:hover { color: var(--text); text-decoration: none; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.end-field { justify-content: flex-end; }
.tag.warn { color: var(--warn); }

.id-foot { display: flex; gap: var(--sp-2); justify-content: center; padding: var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom)); font-size: var(--fs-sm); color: var(--muted); }
ul.list { padding: 0; margin: 0; list-style: none; }