:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17324d;
    background: #f3f6f8;
}

* { box-sizing: border-box; }

body { margin: 0; }

.lomvia-page {
    min-height: 100vh;
    padding: 32px 18px;
    background: #f3f6f8;
}

.lomvia-shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 32px;
    border: 1px solid #d9e1e6;
    border-radius: 16px;
    background: #fff;
}

.lomvia-shell--narrow { width: min(480px, 100%); }
.lomvia-tablet { width: min(720px, 100%); text-align: center; }
.lomvia-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lomvia-eyebrow { margin: 0 0 8px; color: #13715b; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0 0 24px; }
label { display: block; margin: 18px 0 7px; font-weight: 700; }
input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #9baeb9; border-radius: 8px; font: inherit; }
input:focus { outline: 3px solid rgba(19, 113, 91, .25); border-color: #13715b; }
button { min-height: 44px; margin-top: 20px; padding: 10px 18px; border: 1px solid #13715b; border-radius: 8px; color: #fff; background: #13715b; font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: #0e5948; }
button:focus-visible { outline: 3px solid rgba(19, 113, 91, .3); outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .58; }
button.secondary { margin: 0; color: #17324d; background: #fff; border-color: #9baeb9; }
.appointment-list { display: grid; gap: 12px; }
.appointment { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid #d9e1e6; border-radius: 12px; }
.appointment h2, .appointment p { margin: 0; }
.appointment button { margin: 0; }
.appointment-time { font-size: 20px; font-weight: 800; }
.lomvia-status { min-height: 24px; color: #506675; }
.lomvia-error { padding: 12px; border-radius: 8px; color: #8a1f1f; background: #fff0f0; }
.tablet-state { margin-top: 30px; padding: 34px; border-radius: 14px; background: #eff7f4; }
.status-dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; background: #13715b; }
.is-hidden { display: none !important; }

@media (max-width: 640px) {
    .lomvia-page { padding: 16px 10px; }
    .lomvia-shell { padding: 22px 16px; }
    .lomvia-header { align-items: flex-start; }
    .appointment { grid-template-columns: 1fr; }
    .appointment button { width: 100%; }
}