.app { max-width: 62rem; margin: var(--space-5, 2rem) auto; }
.app-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.app-top h1 { margin: 0 0 .5rem; }
.app-user { color: var(--muted); font-size: var(--text-sm, .9rem); }
.app-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; }
.app-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin: .5rem 0 1.5rem; }
.app-tabs a { padding: .5rem 0; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
.app-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.app-narrow { max-width: 28rem; }
.app-form, .app-stack { display: grid; gap: 1rem; }
.app-field { display: grid; gap: .3rem; font-weight: 600; }
.app-field small { font-weight: 400; color: var(--muted); }
.app input[type=text], .app input[type=email], .app input[type=number], .app input[type=password], .app select, .app textarea { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--ink); }
.app textarea { font-family: var(--font-mono); font-size: .85rem; min-height: 9rem; }
.app .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.app .btn:disabled { opacity: .55; cursor: not-allowed; }
.app-banner { padding: .65rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); margin: .5rem 0; }
.app-banner.bad { border-color: var(--crit); }
.app-banner.warn { border-color: var(--warn); }
.app-banner.good { border-color: var(--good); }
.app-skel-line { height: 1.1rem; margin: .7rem 0; border-radius: 4px; background: var(--line); opacity: .6; }
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.app-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; background: var(--surface); }
.app-card h2, .app-card h3 { margin-top: 0; }
.app-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.app-table th, .app-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.app-table td.num, .app-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.app-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.app-meter { height: .5rem; background: var(--line); border-radius: 4px; overflow: hidden; margin: .35rem 0; }
.app-meter > span { display: block; height: 100%; background: var(--accent); }
.app-big { font-size: var(--text-2xl, 1.8rem); font-weight: 700; margin: .2rem 0; }
.app-pre { font-family: var(--font-mono); font-size: .8rem; white-space: pre-wrap; word-break: break-word; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; max-height: 14rem; overflow: auto; }
.app-chip { display: inline-block; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; }
.app-chip.good { border-color: var(--good); color: var(--good); }
.app-chip.bad { border-color: var(--crit); color: var(--crit); }
.app-scroll { overflow-x: auto; }
.app-check { display: block; padding: .15rem 0; font-weight: 400; }
.app-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; display: grid; gap: .25rem; }
.app-pick td { background: var(--accent-soft, #eef6f1); }
.app details.app-card summary { cursor: pointer; font-weight: 600; }
.app label.app-check { display: flex; align-items: center; gap: .6rem; padding: .2rem 0; font-weight: 400; }
.app label.app-check input[type=checkbox] { width: auto; flex: none; margin: 0; }

.app-table td.nowrap { white-space: nowrap; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, inherit); text-decoration: underline; cursor: pointer; }
.app-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.app-public { border-left: 4px solid var(--good); }
.app-public p { margin: .3rem 0; }