.audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
    padding: 20px;
}

.audit-note {
    margin: 0;
    padding: 0 20px 16px;
}

.audit-error {
    color: var(--danger);
}

#auditTable td {
    overflow-wrap: anywhere;
    max-width: 360px;
}

#auditRefresh:disabled {
    opacity: 0.6;
    cursor: wait;
}

:root{
      --bg:#f4f7fb; --panel:#fff; --text:#172033; --muted:#6b7485;
      --border:#e4e9f1; --primary:#315efb; --primary-2:#244bd0;
      --success:#16845b; --warning:#b66a00; --danger:#c73535;
      --sidebar:#111827; --sidebar-muted:#9ca8ba; --shadow:0 8px 30px rgba(23,32,51,.07);
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    .app{display:flex;min-height:100vh}
    .sidebar{width:250px;background:var(--sidebar);color:#fff;padding:22px 16px;position:fixed;inset:0 auto 0 0}
    .brand{font-weight:800;font-size:20px;padding:8px 12px 28px;display:flex;gap:10px;align-items:center}
    .brand-mark{width:30px;height:30px;border-radius:9px;background:var(--primary);display:grid;place-items:center}
    .nav{display:grid;gap:6px}
    .nav button{border:0;background:transparent;color:var(--sidebar-muted);text-align:left;padding:12px 13px;border-radius:10px;display:flex;gap:11px;align-items:center}
    .nav button:hover,.nav button.active{background:#1d2636;color:#fff}
    .sidebar-footer{position:absolute;bottom:20px;left:16px;right:16px;border-top:1px solid #273142;padding:18px 12px;color:var(--sidebar-muted);font-size:13px}
    .main{margin-left:250px;width:calc(100% - 250px);padding:28px 34px 50px}
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
    h1{font-size:27px;margin:0 0 5px}
    .subtitle{color:var(--muted);font-size:14px}
    .top-actions{display:flex;gap:9px}
    .btn{border:1px solid var(--border);background:#fff;color:var(--text);padding:10px 14px;border-radius:10px;font-weight:650}
    .btn:hover{background:#f8faff}
    .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
    .btn-primary:hover{background:var(--primary-2)}
    .btn-danger{color:var(--danger)}
    .btn-sm{padding:7px 10px;font-size:13px}
    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
    .stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
    .stat-label{font-size:13px;color:var(--muted)}
    .stat-value{font-size:28px;font-weight:800;margin-top:8px}
    .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
    .card-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:15px}
    .card-title{font-weight:750}
    .toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
    .input{border:1px solid var(--border);background:#fff;border-radius:9px;padding:9px 11px;outline:none;min-width:230px}
    .input:focus,textarea:focus,select:focus{border-color:#8aa1ff;box-shadow:0 0 0 3px rgba(49,94,251,.1)}
    .table-wrap{overflow:auto}
    table{width:100%;border-collapse:collapse;min-width:760px}
    th,td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--border);font-size:14px}
    th{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#fbfcfe}
    tbody tr:hover{background:#fafcff}
    .badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}
    .badge-green{background:#e8f7f0;color:var(--success)}
    .badge-gray{background:#eef1f5;color:#667085}
    .badge-blue{background:#eaf0ff;color:#315efb}
    .actions{display:flex;gap:6px;justify-content:flex-end}
    .hidden{display:none!important}
    .section{display:none}.section.active{display:block}
    .empty{padding:55px 20px;text-align:center;color:var(--muted)}
    .modal-backdrop{position:fixed;inset:0;background:rgba(10,18,31,.48);display:grid;place-items:center;padding:20px;z-index:20}
    .modal{background:#fff;border-radius:16px;width:min(940px,100%);max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.25)}
    .modal.small{width:min(560px,100%)}
    .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
    .modal-body{padding:22px}
    .modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px}
    .icon-btn{border:0;background:transparent;font-size:24px;color:var(--muted)}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:7px}.field.full{grid-column:1/-1}
    label{font-size:13px;font-weight:700}
    textarea{min-height:90px;resize:vertical}
    .builder-question{border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:14px;background:#fbfcfe}
    .question-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
    .question-number{font-size:12px;color:var(--muted);font-weight:700}

    
    .question-grid{display:grid;grid-template-columns:1fr 190px;gap:10px;margin-top:10px}
    .builder-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
    .json-box{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;min-height:260px;width:100%;padding:12px;border:1px solid var(--border);border-radius:10px}
    .user-list{display:grid;gap:8px}
    .user-item{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);padding:12px;border-radius:10px}
    .toast{position:fixed;right:22px;bottom:22px;background:#172033;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:50}
    .muted{color:var(--muted)}
    @media(max-width:900px){
      .sidebar{width:70px;padding:16px 8px}.brand span,.nav button span,.sidebar-footer{display:none}
      .brand{justify-content:center;padding-bottom:22px}.nav button{justify-content:center}
      .main{margin-left:70px;width:calc(100% - 70px);padding:22px 18px}
      .stats{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:620px){
      .stats{grid-template-columns:1fr}.form-grid,.question-grid{grid-template-columns:1fr}
      .topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}
      .top-actions .btn{flex:1}.input{min-width:160px;width:100%}
    }

/* =========================================================
   Admin authentication
   ========================================================= */

#admin-login {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: #f4f7fb;
}

    #admin-login.hidden {
        display: none;
    }

    #admin-login .admin-login-card {
        width: min(420px, 100%);
        padding: 32px;
        background: #ffffff;
        border: 1px solid #e4e9f1;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(23, 32, 51, 0.12);
    }

    #admin-login .admin-login-logo {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        border-radius: 12px;
        background: #315efb;
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
    }

    #admin-login h1 {
        margin: 0 0 8px;
        font-size: 24px;
        color: #172033;
    }

    #admin-login p {
        margin: 0 0 24px;
        color: #6b7485;
        font-size: 14px;
    }

    #admin-login form {
        display: grid;
        gap: 9px;
    }

    #admin-login label {
        font-size: 13px;
        font-weight: 700;
        color: #172033;
    }

    #admin-login input {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid #e4e9f1;
        border-radius: 9px;
        background: #ffffff;
        color: #172033;
        outline: none;
    }

        #admin-login input:focus {
            border-color: #8aa1ff;
            box-shadow: 0 0 0 3px rgba(49, 94, 251, 0.1);
        }

    #admin-login button {
        width: 100%;
        margin-top: 8px;
        padding: 11px 14px;
        border: 1px solid #315efb;
        border-radius: 9px;
        background: #315efb;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
    }

        #admin-login button:hover {
            background: #244bd0;
        }

        #admin-login button:disabled {
            opacity: 0.6;
            cursor: wait;
        }

    #admin-login .admin-login-error {
        padding: 10px 12px;
        border-radius: 8px;
        background: #fff0f0;
        color: #c73535;
        font-size: 13px;
    }

        #admin-login .admin-login-error.hidden {
            display: none;
        }

/* =========================================================
   Конструктор опроса
   ========================================================= */
.builder-page {
    min-height: 100vh;
    background: var(--bg, #f5f7fa);
}

.builder-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: #fff;
}

    .builder-page-header > div {
        flex: 1;
    }

    .builder-page-header h1 {
        margin: 0;
    }

    .builder-page-header .subtitle {
        margin-top: 6px;
    }


/* Основное содержимое */

.builder-page-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px;
}


    /* =========================================================
   Карточки
   ========================================================= */

    .builder-page-content > .card {
        padding: 24px;
    }


/* Заголовок карточки */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}


/* =========================================================
   Основная информация
   ========================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .field.full {
        grid-column: 1 / -1;
    }

    .field label {
        font-weight: 600;
    }


    /* Поля ввода */

    .field .input {
        width: 100%;
        box-sizing: border-box;
    }

    .field textarea.input {
        min-height: 100px;
        resize: vertical;
    }


/* =========================================================
   Блоки опроса
   ========================================================= */

#surveyBlocks {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}


/* Карточка блока */

.survey-block {
    padding: 24px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}


/* Заголовок блока */

.survey-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.block-number {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.block-title {
    display: block;
    font-size: 18px;
}


/* Кнопки блока */

.block-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* Поля блока */

.block-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
}


/* =========================================================
   Вопросы внутри блока
   ========================================================= */

.block-questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}


/* Карточка вопроса */

.builder-question {
    padding: 20px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface, #f9fafb);
}


/* Заголовок вопроса */

.question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.question-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted, #6b7280);
}

.question-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Поля вопроса */

.question-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
}


/* Обязательный вопрос */

.question-required {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
}


/* Варианты ответа */

.builder-question .options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}


/* =========================================================
   Кнопки добавления
   ========================================================= */

.builder-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.survey-block > .builder-actions {
    padding-top: 20px;
    border-top: 1px solid var(--border, #e5e7eb);
}


/* Кнопка "Добавить блок" */

#addBlockBtn {
    margin-top: 4px;
}


/* =========================================================
   Адаптив
   ========================================================= */

@media (max-width: 768px) {

    .builder-page-header {
        flex-wrap: wrap;
        padding: 16px;
    }

    .builder-page-content {
        padding: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .survey-block {
        padding: 18px;
    }

    .survey-block-header {
        flex-direction: column;
    }

    .block-actions {
        width: 100%;
    }

    .question-grid {
        grid-template-columns: 1fr;
    }

    .question-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================
   Настройки блока
   ========================================= */

.block-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.block-setting {
    padding: 18px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #fafafa;
}

.setting-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .setting-checkbox input {
        width: 16px;
        height: 16px;
    }

.setting-description {
    margin-top: 6px;
    margin-left: 26px;
    font-size: 13px;
    color: var(--muted, #6b7280);
}


/* =========================================
   Скрининг
   ========================================= */

.screening-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.screening-condition {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 16px;
}


/* =========================================
   Интерпретация
   ========================================= */

.interpretation-settings {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.interpretation-ranges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.interpretation-range {
    display: grid;
    grid-template-columns: 90px 90px 140px 160px minmax(180px, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.range-description-field {
    min-width: 0;
}


/* =========================================
   Секции блока
   ========================================= */

.block-section {
    margin-top: 24px;
}

.block-section-header {
    margin-bottom: 16px;
}

.block-section-title {
    font-weight: 600;
}


/* =========================================
   Адаптив
   ========================================= */

@media (max-width: 900px) {

    .interpretation-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .interpretation-range
        .remove-range {
            grid-column: 1 / -1;
        }
}


@media (max-width: 600px) {

    .screening-condition {
        grid-template-columns: 1fr;
    }

    .interpretation-range {
        grid-template-columns: 1fr;
    }
}

.options-title {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
}


.option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px max-content 36px;
    gap: 8px;
    align-items: center;
}

@media (max-width: 600px) {
    .option-row {
        grid-template-columns: 1fr;
    }
}

.option-custom-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .option-custom-text input {
        margin: 0;
    }

.remove-option {
    width: 36px;
    min-width: 36px;
}

.options-title {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px auto auto;
    gap: 8px;
    align-items: center;
}

    .option-row input {
        flex: 1
    }

.q-option-score {
    min-width: 0;
}

.option-custom-text input {
    margin: 0;
}

@media (max-width: 600px) {
    .option-row {
        grid-template-columns: minmax(0, 1fr) 100px;
    }

    .option-custom-text {
        grid-column: 1;
    }

    .option-row .remove-option {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.link-copy-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

    .link-copy-row .input {
        flex: 1;
        min-width: 0;
    }

.copy-link-status {
    margin-top: 8px;
    color: #16845b;
    font-size: 13px;
}

    .copy-link-status.error {
        color: #c73535;
    }

@media (max-width: 600px) {
    .link-copy-row {
        flex-direction: column;
    }

        .link-copy-row .btn {
            width: 100%;
        }
}
