:root { --fg: #ffffff; --bg: #1a1a1a; }
body { color-scheme: dark; margin: 0; font-family: sans-serif; background: var(--bg); color: var(--fg); }

.header { text-align: center; padding: 1rem; }
.header .title { font-weight: 700; font-size: 1.875rem; margin: 0; }
.header .tagline { font-size: 1rem; margin: 0.25rem 0 0; }

.navigate { list-style: none; padding: 0; margin: 12px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.navigate li { display: flex; align-items: center; }
.navigate li:not(:last-child)::after { content: "|"; margin-left: 5px; }
.navigate a { color: #8888ff; text-decoration: underline; cursor: pointer; }
.navigate a.active { color: var(--fg); text-decoration: none; cursor: default; }

.main { max-width: 60rem; margin: 0 auto; padding: 0 10px 40px; }

fieldset { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 3px; }
legend { padding: 0 5px; }
button { font-size: 90%; cursor: pointer; }
input[type="text"], input[type="password"], input[type="number"], select { font-size: 90%; }

table { border-collapse: collapse; width: 100%; }
table th, table td { border: 1px solid var(--fg); padding: 0 6px; text-align: left; font-weight: 400; }

.err { color: #ff6b6b; font-size: 85%; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.modal-box { background: var(--bg); border: 1px solid #ccc; padding: 16px; max-width: 400px; width: 90%; }
.modal-box h3 { margin: 0 0 8px; font-size: 1rem; }
.modal-actions { margin-top: 10px; display: flex; gap: 6px; justify-content: flex-end; }
.guide-steps { padding-left: 18px; margin: 6px 0; }
.guide-steps li { margin-bottom: 3px; font-size: 90%; }

.s-ok { color: #5dba79; }
.s-wait { color: #e8a838; }
.s-err { color: #ff6b6b; }

.qr-box { width: 140px; height: 140px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 80%; color: #888; margin: 6px auto; }

/* Auth page */
.auth-wrap { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }
.auth-wrap fieldset { min-width: 220px; }
.auth-wrap input { display: block; margin-bottom: 4px; }
.auth-wrap input, .auth-wrap button { width: 100%; box-sizing: border-box; }


.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.control-grid div { display: flex; flex-direction: column; gap: 4px; }

#sub-link { color: #8888ff; text-decoration: underline; cursor: pointer; }