*{box-sizing:border-box}html{min-height:100%;height:100%}body{min-height:100vh;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f4f8fc;color:#152235;line-height:1.6;display:flex;flex-direction:column}.container{max-width:1180px;margin:0 auto;padding:0 20px}.topbar{background:#fff;border-bottom:1px solid #dce8f5;position:sticky;top:0;z-index:10}.nav-wrap{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:28px;font-weight:800;text-decoration:none;color:#0b66c3;letter-spacing:-1px}.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.nav a{color:#2d425c;text-decoration:none;font-weight:600;font-size:15px;padding:9px 10px;border-radius:12px}.nav a:hover,.nav-btn{background:#e8f3ff;color:#0b66c3}.main{flex:1 0 auto;width:100%;padding-top:34px;padding-bottom:64px}.footer{flex-shrink:0;margin-top:auto;border-top:1px solid #dce8f5;background:#fff;color:#6b7f99;padding:24px 0}.hero{display:grid;grid-template-columns:1.5fr .9fr;gap:28px;align-items:stretch;margin-bottom:34px}.hero-text,.hero-card,.panel,.auth-card,.feature-card,.stat-card,.doctor-card,.service-card,.record-card,.table-card{background:#fff;border:1px solid #dce8f5;border-radius:24px;box-shadow:0 16px 45px rgba(16,74,125,.08)}.hero-text{padding:54px}.hero-text h1{font-size:64px;line-height:1;margin:8px 0 18px;color:#0b66c3;letter-spacing:-3px}.eyebrow{color:#0b66c3;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:1.2px}.lead{font-size:24px;color:#152235;font-weight:700}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.hero-card{padding:34px;background:linear-gradient(145deg,#0b66c3,#20a2d8);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:320px}.hero-card p{color:#e8f6ff}.status-pill{display:inline-flex;width:max-content;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 14px;font-weight:700;margin-bottom:auto}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:12px 18px;font-weight:800;text-decoration:none;cursor:pointer;font-family:inherit}.btn-primary{background:#0b66c3;color:#fff}.btn-primary:hover{background:#0956a7}.btn-light{background:#e8f3ff;color:#0b66c3}.btn-small{padding:8px 12px;font-size:14px}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}.feature-card{padding:24px}.feature-card span{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:12px;background:#e8f3ff;color:#0b66c3;font-weight:900}.feature-card h3,.doctor-card h3,.service-card h3{margin-bottom:6px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 36px}.admin-stats{grid-template-columns:repeat(7,1fr)}.stat-card{padding:24px;text-align:center}.stat-card strong{display:block;font-size:30px;color:#0b66c3}.stat-card span{color:#6b7f99;font-weight:700}.section-head{display:flex;align-items:center;justify-content:space-between;margin:34px 0 18px}.section-head h2,.page-title h1{margin:0;color:#152235}.section-head a{color:#0b66c3;font-weight:800;text-decoration:none}.compact{margin:0 0 16px}.page-title{margin-bottom:24px}.page-title h1{font-size:40px;letter-spacing:-1px}.page-title p,.muted{color:#6b7f99}.card-grid{display:grid;gap:20px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.doctor-card{padding:24px}.avatar{width:58px;height:58px;border-radius:18px;background:#e8f3ff;color:#0b66c3;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;margin-bottom:14px}.card-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf3f9;padding:10px 0}.card-row span{color:#6b7f99}.service-list{display:grid;gap:16px}.service-card{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;padding:22px}.price{font-size:24px;font-weight:900;color:#0b66c3}.auth-card{max-width:520px;margin:0 auto;padding:34px}.auth-card.wide{max-width:820px}.form p{display:flex;flex-direction:column;margin:0 0 16px}.form label{font-weight:800;margin-bottom:7px;color:#2d425c}.form input,.form select,.form textarea,.token-box input{width:100%;border:1px solid #cdddeb;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;color:#152235}.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid #d9ecff;border-color:#0b66c3}.two-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.full{grid-column:1/-1}.form-actions{margin-top:6px}.small-text{font-size:14px}.layout.two{display:grid;grid-template-columns:1.3fr .8fr;gap:22px}.panel{padding:24px}.panel.soft,.highlight{background:#fdfefe}.form-panel{max-width:760px}.info-list{display:grid;gap:12px;margin-bottom:20px}.info-list div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #edf3f9;padding-bottom:9px}.info-list span{color:#6b7f99}.token-box{display:grid;gap:10px}.inline-token{grid-template-columns:1fr auto auto auto;align-items:center}.token-actions{display:flex;gap:8px;flex-wrap:wrap}.table-card{overflow:auto}.table-card table{width:100%;border-collapse:collapse;background:#fff}.table-card th,.table-card td{padding:14px 16px;text-align:left;border-bottom:1px solid #edf3f9;vertical-align:top}.table-card th{color:#6b7f99;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.inner{box-shadow:none;border-radius:18px}.badge{display:inline-flex;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:800}.status-planned{background:#e8f3ff;color:#0b66c3}.status-confirmed{background:#e7f8ef;color:#167a3b}.status-completed{background:#eef2f7;color:#44566d}.status-cancelled{background:#ffecee;color:#b42336}.empty{background:#fff;border:1px dashed #bdd4ea;border-radius:22px;padding:30px;text-align:center;color:#6b7f99}.record-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.small-records{grid-template-columns:repeat(2,1fr)}.record-card{padding:22px}.record-head{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #edf3f9;padding-bottom:12px;margin-bottom:12px;color:#6b7f99}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn-link{border:0;background:transparent;color:#0b66c3;font-weight:800;cursor:pointer;padding:0;font:inherit;text-decoration:none}.btn-link.danger,.danger{color:#b42336}.messages{display:grid;gap:10px;margin-bottom:18px}.alert{border-radius:16px;padding:14px 16px;font-weight:700}.alert-success{background:#e7f8ef;color:#167a3b}.alert-warning{background:#fff5dd;color:#956300}.alert-error{background:#ffecee;color:#b42336}.tabs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide-panel{grid-column:1/-1}.mini-list{display:grid;gap:12px}.mini-list>div{padding:14px;border:1px solid #edf3f9;border-radius:16px;background:#fff}.mini-list b{display:block}.mini-list span{color:#6b7f99}@media(max-width:960px){.hero,.layout.two,.tabs-grid{grid-template-columns:1fr}.features,.card-grid.three,.stats-grid,.admin-stats,.record-grid,.small-records{grid-template-columns:1fr 1fr}.hero-text{padding:34px}.hero-text h1{font-size:48px}.service-card{grid-template-columns:1fr}.inline-token{grid-template-columns:1fr}.two-cols{grid-template-columns:1fr}}@media(max-width:640px){.nav-wrap{align-items:flex-start;flex-direction:column;padding:16px 20px}.nav{gap:6px}.features,.card-grid.three,.stats-grid,.admin-stats,.record-grid,.small-records{grid-template-columns:1fr}.hero-text h1{font-size:42px}.page-title h1{font-size:32px}}

.footer .container{font-size:14px}
.btn-vk{width:100%;background:#0077ff;color:#fff;margin:10px 0 14px}.btn-vk:hover{background:#0069e0}.social-divider{display:flex;align-items:center;gap:12px;margin:14px 0 18px;color:#6b7f99;font-weight:700;font-size:14px}.social-divider:before,.social-divider:after{content:"";height:1px;background:#dce8f5;flex:1}.code-block{white-space:pre-wrap;background:#0f172a;color:#eef6ff;border-radius:18px;padding:18px;overflow:auto}.api-table code,.panel code{background:#eef6ff;color:#0b66c3;border-radius:8px;padding:2px 6px}.api-table{margin-top:20px;margin-bottom:20px}

/* Layout hardening: footer stays at the bottom on short pages. */
body > .main{flex:1 0 auto;}
body > .footer{margin-top:auto;}

/* Email confirmation */
.code-form input[name="code"] {
    text-align: center;
    letter-spacing: 0.35em;
    font-size: 1.35rem;
    font-weight: 700;
}
.resend-form {
    margin-top: 12px;
}
.btn-light {
    background: #f2f6fb;
    color: #1d3448;
    border: 1px solid #d7e2ec;
}

/* VK ID demo screen */
.btn-vk {
    background: #0077ff;
    color: #fff;
    border: none;
}
.btn-vk:hover {
    background: #006be6;
    color: #fff;
}
.vkid-page {
    min-height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vkid-card {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 28px;
    padding: 34px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(15, 35, 60, 0.16);
}
.vkid-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    background: #0077ff;
    color: #fff;
    font-weight: 800;
    margin-bottom: 16px;
}
.vkid-qr {
    width: 184px;
    height: 184px;
    margin: 22px auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: inset 0 0 0 8px #f8fafc;
}
.vkid-qr span {
    border-radius: 5px;
    background: #111827;
}
.vkid-qr span:nth-child(2),
.vkid-qr span:nth-child(5),
.vkid-qr span:nth-child(7),
.vkid-qr span:nth-child(12),
.vkid-qr span:nth-child(15),
.vkid-qr span:nth-child(18),
.vkid-qr span:nth-child(20),
.vkid-qr span:nth-child(23),
.vkid-qr span:nth-child(26),
.vkid-qr span:nth-child(30),
.vkid-qr span:nth-child(32),
.vkid-qr span:nth-child(35) {
    background: transparent;
}
.vkid-demo-button {
    width: 100%;
    margin-bottom: 10px;
}
.vkid-demo-note {
    margin-top: 16px;
    font-size: 0.78rem;
    color: #94a3b8;
}
.field{display:flex;flex-direction:column;margin:0 0 16px}.field.hidden{display:none}.field label{font-weight:800;margin-bottom:7px;color:#2d425c}.field input,.field select,.field textarea{width:100%;border:1px solid #cdddeb;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;color:#152235;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid #d9ecff;border-color:#0b66c3}.field.has-error input,.field.has-error select,.field.has-error textarea,.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:#e39aa6;background:#fffafa}.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{outline:3px solid #ffe3e7;border-color:#c94f60}.field-error{margin-top:7px;color:#b42336;font-size:14px;font-weight:700;line-height:1.35}.field-help{margin-top:6px;color:#6b7f99;font-size:13px}.form-errors{grid-column:1/-1;background:#ffecee;color:#b42336;border:1px solid #f4bbc4;border-radius:16px;padding:12px 14px;font-weight:700;margin-bottom:14px}.form p:has(.errorlist){display:none}.errorlist{display:none}

/* Inline field validation: error text appears inside the field itself. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: #d85f72 !important;
    background: #fff !important;
    color: #152235;
    box-shadow: 0 0 0 1px rgba(216, 95, 114, 0.10);
}
.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus,
.field input.is-invalid:focus,
.field select.is-invalid:focus,
.field textarea.is-invalid:focus {
    outline: 3px solid rgba(216, 95, 114, 0.16) !important;
    border-color: #c94f60 !important;
}
.field input.is-invalid::placeholder,
.field textarea.is-invalid::placeholder {
    color: #152235;
    opacity: 1;
}
.field-error {
    display: none !important;
}

/* v8: field errors are shown as the field value, not below the field. */
.field input.is-invalid,
.field textarea.is-invalid,
.field select.is-invalid,
.field.has-error input,
.field.has-error textarea,
.field.has-error select {
    border-color: #d85f72 !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(216, 95, 114, 0.12) !important;
}
.field input.is-invalid:focus,
.field textarea.is-invalid:focus,
.field select.is-invalid:focus,
.field.has-error input:focus,
.field.has-error textarea:focus,
.field.has-error select:focus {
    outline: 3px solid rgba(216, 95, 114, 0.16) !important;
    border-color: #c94f60 !important;
}
.field input.error-value,
.field textarea.error-value {
    color: #152235 !important;
}
.field-error,
.errorlist {
    display: none !important;
}


/* v9: active menu item and login form spacing */
.nav a.nav-active {
    background: #e8f3ff;
    color: #0b66c3;
}
.auth-card .form > .btn {
    margin-top: 10px;
}
.auth-card .form .field:last-of-type {
    margin-bottom: 18px;
}