main { max-width: 1120px; padding-block: clamp(24px,5vh,64px); }
#status { min-height: 25px; margin-block: 12px 24px; }
#status.error { color: #ffb4ae; }
.auth-panel { max-width: 480px; margin: 40px auto; }
.auth-panel h2 { font-size: 24px; margin-bottom: 24px; }
form { display: grid; gap: 20px; }
label { display: grid; gap: 8px; }
input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
input::placeholder { color: var(--muted); }
input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.primary { background: var(--accent); color: #18191d; border-color: var(--accent); font-weight: 600; }
.auth-options, .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.text-button { background: transparent; border-color: transparent; padding-inline: 0; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 24px 0; }
.section-heading h2 { margin: 0; }
.home-list { border-top: 1px solid var(--border); }
.home-row { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.home-row .home-description { flex: 1; min-width: 180px; }
.home-row h3 { margin: 0 0 6px; font-size: 22px; }
.home-row p { margin: 0; color: var(--muted); }
.pair-panel { margin-top: 40px; border-top: 1px solid var(--border); padding-top: 16px; }
.pair-panel summary { min-height: 48px; padding-block: 12px; cursor: pointer; font-weight: 600; }
.pair-panel summary:focus-visible { outline: 3px solid var(--accent); }
.pair-panel form { max-width: 480px; margin-top: 24px; }
#recovery-key { display: block; overflow-wrap: anywhere; padding: 16px; background: var(--surface); border-radius: 10px; font-size: 16px; }
.device-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); gap: 16px; margin-top: 24px; }
.device { padding: 24px; min-height: 160px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.device h3 { margin: 0 0 8px; overflow-wrap: anywhere; }
.device p { color: var(--muted); margin: 8px 0 20px; }
.device button { width: 100%; }
@media(prefers-color-scheme:light) { .primary { color: #fff; } #status.error { color: #a92322; } }
@media(max-width:600px) { .auth-panel { margin: 24px auto; } .home-row { gap: 12px; } .home-row > button { flex: 1; } }