:root { font: 16px/1.5 system-ui, sans-serif; color: #18283b; background: #edf1f6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { background: #15273d; color: white; display: flex; justify-content: space-between; gap: 15px; padding: 18px max(18px, 4vw); align-items: center; }
header strong { color: white; font-size: 1.3rem; letter-spacing: .06em; }
header div span { margin-left: 20px; }
#mode { font-size: .75rem; font-weight: 750; text-transform: uppercase; }
main { max-width: 1250px; padding: 24px 18px; margin: auto; }
.panel { background: white; border-radius: 14px; border: 1px solid #d1dae5; padding: clamp(16px, 3vw, 28px); }
#welcome, #reset-panel { max-width: 520px; margin: 25px auto; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 1.2rem; margin: 22px 0 10px; }
p { margin: 10px 0; }
button, input, select { font: inherit; min-height: 46px; border-radius: 7px; }
input, select { border: 1px solid #94a7bf; padding: 8px 10px; color: #18283b; background: white; width: 100%; }
label { display: block; margin: 12px 0 5px; font-weight: 650; }
button { background: #ae2434; color: white; border: 1px solid transparent; padding: 9px 15px; cursor: pointer; font-weight: 700; }
button.secondary { background: white; color: #1f344e; border-color: #a3b4c9; }
button:disabled { opacity: .5; cursor: default; }
form > button { margin-top: 16px; }
.check { display: flex; gap: 9px; align-items: center; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; }
.session-bar, nav, .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.session-bar { justify-content: space-between; }
nav { margin: 16px 0; }
nav button { background: white; color: #243b58; border-color: #b8c6d8; }
nav button.active { background: #243b58; color: white; }
.layout { display: grid; grid-template-columns: minmax(260px, 350px) minmax(0, 1fr); gap: 25px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #dce3ed; vertical-align: top; }
th { background: #eff3f8; }
td button { min-height: 36px; padding: 5px 8px; font-size: .85rem; }
.tag { padding: 3px 7px; border-radius: 5px; white-space: nowrap; background: #e7eef7; font-size: .8rem; }
.tag.active, .good { background: #dff4e8; color: #174e34; }
.tag.inactive, .bad { background: #fce8e8; color: #7b2630; }
#notice { padding: 14px; background: #fff0d2; border-radius: 9px; border-left: 4px solid #b47700; overflow-wrap: anywhere; }
.result { padding: 14px; border-radius: 9px; margin: 14px 0; overflow-wrap: anywhere; background: #edf3fa; }
.counter { display: flex; align-items: center; gap: 18px; background: #f0f4f9; padding: 15px; border-radius: 10px; }
.counter strong { font-size: 3.5rem; line-height: 1; }
.scan-form { display: flex; gap: 8px; margin: 14px 0; }
.scan-form input { min-width: 0; }
.scan-form button { margin: 0; }
.history-list { padding-left: 20px; overflow-wrap: anywhere; }
.history-list li { border-bottom: 1px solid #e3e8f0; padding: 8px; }
.mono, pre { font: .9rem/1.6 ui-monospace, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.hint { font-size: .87rem; color: #4c6079; }
img { max-width: 100%; }
#mfa-qr { max-width: 230px; }
#captcha-image { display: block; margin: 15px 0 8px; background: #f3f5f8; }
dialog { border: 1px solid #bdc9d9; border-radius: 12px; padding: 24px; max-width: 95vw; width: 500px; }
dialog::backdrop { background: #102036b5; }
dialog button { margin: 10px 0 0; display: block; width: 100%; }
#scan-block { border: 2px solid #b12a3a; }
footer { text-align: center; padding: 18px; color: #4c6079; font-size: .8rem; }
a { color: #244d9e; }
.readonly input, .readonly select { pointer-events: none; opacity: .7; }
@media (max-width: 800px) { .layout { grid-template-columns: 1fr; } header div span { display: block; margin-left: 0; font-size: .85rem; } }
@media (max-width: 450px) { main { padding: 12px; } .counter { gap: 12px; } nav button { flex: 1; padding: 8px; font-size: .85rem; } header { flex-wrap: wrap; } }