* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    color: #1f2733;
    background: #fff;
}
#app { padding: 12px; }
.loading, .err { padding: 24px; color: #6b7686; }
.err { color: #c0392b; }

.anketa-title { font-size: 18px; font-weight: 700; margin: 4px 0 14px; }

table.anketa { width: 100%; border-collapse: collapse; }
table.anketa th, table.anketa td {
    border: 1px solid #e2e7ee;
    vertical-align: top;
    padding: 8px 10px;
    text-align: left;
}
table.anketa th {
    background: #f6f8fb;
    color: #3f6fb5;
    font-weight: 600;
    font-size: 13px;
}
td.block {
    background: #fafbfd;
    font-weight: 700;
    width: 150px;
    color: #2b3546;
}
td.param { width: 26%; color: #333; }
td.value { width: 40%; }
td.comment { width: 26%; }

.field { margin-bottom: 6px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 11px; color: #8a94a3; margin-bottom: 2px; }

input[type=text], input[type=number], input[type=date], textarea, select {
    width: 100%;
    border: 1px solid #ccd4de;
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
    color: inherit;
    background: #fff;
}
textarea { resize: vertical; min-height: 38px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #3f6fb5; }

.readonly-val { color: #333; padding: 4px 0; white-space: pre-wrap; }
.muted { color: #98a2b0; }
a { color: #3f6fb5; text-decoration: none; }
a:hover { text-decoration: underline; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge.yes { background: #e4f4e8; color: #2b7a3d; }
.badge.no  { background: #fdeaea; color: #b0413a; }

.contact-card { border: 1px solid #eef1f5; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.contact-card:last-child { margin-bottom: 0; }
.contact-head { font-weight: 600; margin-bottom: 6px; }
.contact-head .primary { font-size: 11px; color: #2b7a3d; margin-left: 6px; }

.save-flag { font-size: 11px; margin-left: 6px; }
.save-flag.ok  { color: #2b7a3d; }
.save-flag.err { color: #c0392b; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(20, 26, 35, 0.45);
    display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.modal {
    background: #fff; border-radius: 10px; max-width: 420px; width: 100%;
    padding: 24px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-ico { font-size: 40px; line-height: 1; color: #e0a500; margin-bottom: 8px; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: #1f2733; }
.modal-text { font-size: 14px; color: #55606f; margin-bottom: 18px; }
.modal-btn {
    width: auto; display: inline-block; border: none; background: #3f6fb5; color: #fff;
    font-weight: 600; padding: 8px 22px; border-radius: 6px; cursor: pointer;
}
.modal-btn:hover { background: #345c98; }