/* ==========================================================================
   ОСНОВНІ СТИЛІ (RESET & BASE)
   ========================================================================== */
* { box-sizing: border-box; }
body { margin: 0; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f5f5; color: #222; display: flex; flex-direction: column; min-height: 100vh; }
.auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 0; }
.auth-modal { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; max-width: 400px; width: 90%; }
.auth-logo { max-width: 200px; height: auto; mix-blend-mode: multiply; margin-bottom: 20px; object-fit: contain; }
.auth-modal h2 { margin: 0 0 10px 0; color: #222; font-size: 24px; }
.auth-modal p { color: #666; margin: 0 0 25px 0; font-size: 14px; }
.auth-input-group { display: flex; flex-direction: column; gap: 15px; }
.auth-input-group input { padding: 12px 16px; border: 2px solid #ddd; border-radius: 6px; font-size: 16px; outline: none; transition: border-color 0.2s; text-align: center; font-family: monospace; }
.auth-input-group input:focus { border-color: #3a7cfd; }
.auth-input-group button { padding: 12px; background: #3a7cfd; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.2s; }
.auth-input-group button:hover { background: #2a68e0; }
.auth-error-msg { color: #d32f2f; font-size: 13px; font-weight: bold; margin-top: 15px; animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.app-header { max-width: 880px; margin: 0 auto 15px auto; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 15px; padding: 0 8px; }
.app-title { margin: 0; font-size: 26px; font-weight: 400; color: #222; letter-spacing: -0.5px; line-height: 1.1; }
.lang-switcher { margin-left: auto; display: flex; gap: 5px; }
.lang-btn { padding: 4px 8px; font-size: 12px; font-weight: bold; cursor: pointer; border: 1px solid #ccc; background: #fff; border-radius: 4px; color: #555; transition: all 0.2s; }
.lang-btn.active { background: #3a7cfd; color: #fff; border-color: #3a7cfd; }
.lang-btn:hover:not(.active) { background: #e8eef8; border-color: #3a7cfd; color: #3a7cfd; }
.ess-module-container { max-width: 880px; margin: 0 auto; flex: 1; width: 100%; padding-bottom: 20px; }

.ess-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-bottom: 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.ess-toolbar-btn { width: 34px; height: 34px; border: 1px solid transparent; border-radius: 5px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; padding: 0; transition: all 0.2s ease; color: #555; position: relative; flex-shrink: 0; }
.ess-toolbar-btn:hover:not(:disabled) { background: rgba(58,124,253,0.1); border-color: rgba(58,124,253,0.25); color: #3a7cfd; }
.ess-toolbar-btn.danger-btn:hover:not(:disabled) { background: rgba(255,0,0,0.1); border-color: rgba(255,0,0,0.25); color: #ff0000; }
.ess-toolbar-btn:active:not(:disabled) { transform: scale(0.92); }
.ess-toolbar-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ess-toolbar-sep { width: 1px; height: 22px; background: #ddd; margin: 0 4px; flex-shrink: 0; }
.ess-save-status { width: auto; margin-left: auto; padding: 5px 12px; font-size: 12px; font-weight: bold; border-radius: 5px; text-align: center; background-color: #2e7d32; color: #fff; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); user-select: none; pointer-events: none; white-space: nowrap; flex-shrink: 0; }
.ess-save-status.unsaved { background-color: #f57c00; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(245, 124, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0); } }

.ess-respondent-area { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; margin-bottom: 15px; background: #fff; padding: 10px 16px; border-radius: 6px; border: 1px solid #ccc; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.ess-respondent-label { font-size: 14px; font-weight: 700; color: #555; white-space: nowrap; }
.ess-name-wrapper { display: flex; align-items: center; flex-grow: 1; flex-basis: 250px; min-width: 0; }
.ess-name-wrapper input[type="text"] { flex-grow: 1; margin-left: 8px; border: none; border-bottom: 2px solid transparent; background: transparent; font-size: 16px; font-weight: 800; color: #222; padding: 2px 8px; outline: none; transition: all 0.2s ease; line-height: 1.2; width: 100%; }
.ess-name-wrapper input[type="text"]:focus { border-bottom-color: #3a7cfd; background-color: rgba(128,128,128,0.06); border-radius: 4px 4px 0 0; }
.ess-name-wrapper input[type="text"]::placeholder { font-weight: 500; color: #999; }
.ess-date-wrapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ess-date-input { border: none; border-bottom: 2px solid transparent; background: transparent; font-size: 15px; font-weight: 700; color: #222; padding: 2px 4px; outline: none; transition: all 0.2s ease; cursor: pointer; font-family: inherit; }
.ess-date-input:focus { border-bottom-color: #3a7cfd; background-color: rgba(128,128,128,0.06); border-radius: 4px 4px 0 0; }

.ess-test-wrapper { margin-bottom: 15px; border: 1px solid #ccc; padding: 8px 12px; border-radius: 6px; background-color: #fff; width: 100%; }
.ess-test-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #ccc; flex-wrap: wrap; }
.ess-top-bar-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ess-top-bar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.ess-format-select { padding: 3px 6px; font-size: 11px; font-weight: bold; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; height: 24px; color: #333; outline: none; transition: all 0.3s ease; }
.format-attention { border-color: #3a7cfd !important; color: #3a7cfd !important; box-shadow: 0 0 0 3px rgba(58,124,253,0.15) !important; animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(58,124,253,0.4); } 70% { box-shadow: 0 0 0 6px rgba(58,124,253,0); } 100% { box-shadow: 0 0 0 0 rgba(58,124,253,0); } }

.ess-type-toggle { display: flex; background: rgba(128,128,128,0.12); border-radius: 4px; padding: 2px; border: 1px solid #ccc; }
.ess-type-toggle label { padding: 2px 6px; font-size: 11px; font-weight: bold; cursor: pointer; border-radius: 3px; user-select: none; line-height: 1.2; transition: opacity 0.2s; }
.ess-type-toggle input { display: none; }
.ess-type-toggle input:checked + label { background: #3a7cfd; color: #fff; }
.ess-type-toggle input:disabled + label { opacity: 0.3; cursor: not-allowed; }

.ess-btn { padding: 3px 8px; font-size: 11px; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; line-height: 1.2; height: 24px; display: flex; align-items: center; }
.ess-clear-btn { color: #ff0000; background: transparent; border: 1px solid #ff0000; }
.ess-clear-btn:hover { background: rgba(255, 0, 0, 0.1); }
.ess-questions-btn { color: #3a7cfd; background: rgba(58,124,253,0.08); border: 1px solid #3a7cfd; }
.ess-questions-btn:hover { background: rgba(58,124,253,0.18); }
.ess-delete-btn { font-size: 16px; font-weight: bold; color: #ff0000; background: rgba(255, 0, 0, 0.1); border: 1px solid #ff0000; border-radius: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; }
.ess-delete-btn:hover { background-color: #ff0000; color: #fff; }

.ess-test-title-area { display: flex; align-items: baseline; width: 100%; margin-bottom: 6px; font-size: 13px; font-weight: 700; flex-wrap: wrap; }
.ess-test-num-label { font-size: 12px; color: #666; margin-right: 6px; }
.ess-test-title-area input[type="text"] { flex-grow: 1; min-width: 150px; border: none; border-bottom: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 700; color: inherit; padding: 2px 4px; outline: none; line-height: 1.2; }
.ess-test-title-area input[type="text"]:focus { border-bottom-color: #3a7cfd; background-color: rgba(128,128,128,0.06); border-radius: 3px 3px 0 0; }

.ess-table-responsive { width: 100%; margin-bottom: 8px; border-radius: 4px; }
.ess-table { width: 100%; min-width: 700px; border-collapse: collapse; table-layout: fixed; }
.ess-table th, .ess-table td { border: 1px solid #ccc; padding: 2px; text-align: center; vertical-align: middle; height: 22px; line-height: 1.1; transition: background-color 0.2s; }
.ess-table th { background-color: #e0e0e0; font-weight: 800; font-size: 12px; color: #222; padding: 4px 2px; border: 1px solid #888; }
.ess-th-question { cursor: help; }

.chart-header { text-align: left; font-weight: 600; font-size: 11px; background-color: rgba(128,128,128,0.06); padding-left: 8px; color: #3a7cfd; height: 18px; transition: opacity 0.2s; }
.chart-toggle-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.chart-toggle-label input { cursor: pointer; margin: 0; width: 12px; height: 12px; }
.chart-disabled .chart-header { opacity: 0.5; }
.chart-disabled { background-color: rgba(128,128,128,0.06) !important; }
.chart-disabled td { color: #999 !important; border-color: rgba(128,128,128,0.3) !important; }
.chart-disabled input.score-input { color: transparent !important; }
.col-disabled { background: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 4px, #ededed 4px, #ededed 8px) !important; color: transparent !important; pointer-events: none; }
th.col-disabled { color: #aaa !important; background: repeating-linear-gradient(45deg, #d5d5d5, #d5d5d5 4px, #e3e3e3 4px, #e3e3e3 8px) !important; }
td.col-disabled input.score-input { display: none !important; }

.ess-table input.score-input { width: 100%; height: 20px; border: none; background: transparent; text-align: center; font-size: 13px; font-weight: 600; color: inherit; padding: 0; outline: none; font-family: inherit; margin: 0; transition: background-color 0.2s; }
.ess-table input.score-input:focus { background-color: rgba(128,128,128,0.15); border-radius: 2px; }
.ess-table input.score-input:disabled { cursor: not-allowed; }
.calc-cell { font-weight: 700; font-size: 12px; background-color: rgba(128,128,128,0.06); }
.chart-total-cell { font-weight: 700; font-size: 13px; background-color: rgba(128,128,128,0.1); }
.total-label { font-weight: 600; font-size: 11px; text-align: right; padding-right: 8px; background-color: rgba(128,128,128,0.05); }
.row-label { text-align: left; padding-left: 8px; font-weight: normal !important; font-size: 11px; white-space: nowrap; }

.status-cell { font-weight: bold; transition: all 0.2s ease; line-height: 1.1; }
.status-badge { display: inline-block; padding: 2px 4px; border-radius: 3px; font-weight: 800; font-size: 11px; letter-spacing: 0.2px; }
.prob-text { font-size: 9px; font-weight: 600; margin-top: 2px; display: block; }
.bg-sr { background-color: #ff0000 !important; color: #ffffff !important; }
.bg-nsr { background-color: #2e7d32 !important; color: #ffffff !important; }
.bg-inc { background-color: #e0e0e0 !important; color: #000000 !important; }
.bg-no { background-color: #bdbdbd !important; color: #000000 !important; }
.bg-na { background-color: transparent !important; color: #888 !important; }
.bg-artifact, .bg-local-artifact { background-color: #d8832b !important; color: #ffffff !important; font-weight: 800; }
.chart-disabled .bg-artifact, .chart-disabled .bg-local-artifact { background-color: #d8832b !important; color: #ffffff !important; font-weight: 800; opacity: 0.6; }
.ess-table td.bg-local-artifact input.score-input { color: #ffffff !important; font-weight: 800; }
.ess-table td.bg-local-artifact input.score-input:focus { background-color: rgba(255,255,255,0.2) !important; }

.ess-scale-container { margin-top: 4px; padding: 4px 8px; background: rgba(128,128,128,0.05); border-radius: 4px; border: 1px solid #ccc; }
.ess-scale-title { font-size: 9px; font-weight: bold; margin-bottom: 2px; text-align: center; text-transform: uppercase; color: #666; }
.ess-scale-track { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(to right, #ff0000 0%, #ff0000 37.5%, #fbc02d 37.5%, #fbc02d 62.5%, #2e7d32 62.5%, #2e7d32 100%); border: 1px solid #999; margin: 10px 0 4px 0; }
.ess-scale-marker { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 14px; color: #222; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ess-scale-labels { display: flex; justify-content: space-between; font-size: 8.5px; font-weight: bold; }

.ess-dynamics-container { margin-top: 8px; padding: 6px 10px; background: rgba(128,128,128,0.03); border-radius: 4px; border: 1px solid #ddd; }
.ess-dynamics-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; flex-wrap: wrap; gap: 4px; }
.ess-dynamics-title { font-size: 10px; font-weight: bold; text-transform: uppercase; color: #555; letter-spacing: 0.5px; }
.dyn-mode-toggle { display: flex; flex-wrap: wrap; background: rgba(0,0,0,0.04); border-radius: 4px; padding: 2px; gap: 2px; }
.dyn-mode-toggle label { padding: 3px 8px; font-size: 10px; font-weight: bold; cursor: pointer; border-radius: 3px; user-select: none; border: 1px solid transparent; transition: all 0.15s; }
.dyn-mode-toggle input { display: none; }
.dyn-mode-toggle label[for*="_tot_"] { color: #424242; border-color: #ccc; }
.dyn-mode-toggle input:checked + label[for*="_tot_"] { background: #424242; color: #fff; border-color: #424242; }
.dyn-mode-toggle label[for*="_r1_"] { color: #0072B2; border-color: rgba(0,114,178,0.3); }
.dyn-mode-toggle input:checked + label[for*="_r1_"] { background: #0072B2; color: #fff; }
.dyn-mode-toggle label[for*="_r2_"] { color: #D55E00; border-color: rgba(213,94,0,0.3); }
.dyn-mode-toggle input:checked + label[for*="_r2_"] { background: #D55E00; color: #fff; }
.dyn-mode-toggle label[for*="_r3_"] { color: #009E73; border-color: rgba(0,158,115,0.3); }
.dyn-mode-toggle input:checked + label[for*="_r3_"] { background: #009E73; color: #fff; }
.dyn-mode-toggle label[for*="_r4_"] { color: #CC79A7; border-color: rgba(204,121,167,0.3); }
.dyn-mode-toggle input:checked + label[for*="_r4_"] { background: #CC79A7; color: #fff; }
.ess-dynamics-chart { width: 100%; height: 90px; position: relative; }
.ess-dynamics-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ess-dynamics-text { font-size: 11px; margin-top: 6px; color: #333; line-height: 1.4; padding: 6px 10px; background: rgba(255,255,255,0.8); border-radius: 4px; border: 1px solid #eee; }
.ess-dynamics-text ul { margin: 0; padding-left: 16px; list-style-type: none; }
.ess-dynamics-text li { position: relative; margin-bottom: 2px; }
.ess-dynamics-text li::before { content: "•"; position: absolute; left: -12px; color: #888; }

.ess-add-btn { color: #fff; background-color: #3a7cfd; display: block; width: 100%; margin-top: 15px; padding: 8px 0; font-size: 13px; text-align: center; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background 0.2s; }
.ess-add-btn:hover { background-color: #2a68e0; }

.ess-error-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 10000; color: #fff; background: #d32f2f; font-weight: bold; padding: 12px 20px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; pointer-events: none; text-align: center; max-width: 90%; line-height: 1.4; animation: slideUp 0.3s ease-out; }
@keyframes slideUp { from { bottom: -50px; opacity: 0; } to { bottom: 30px; opacity: 1; } }

.ess-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; display: none; align-items: center; justify-content: center; }
.ess-modal-overlay.active { display: flex; }
.ess-modal { background: #fff; border-radius: 8px; padding: 16px; width: 90%; max-width: 480px; max-height: 85vh; overflow-y: auto; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
.ess-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ess-modal-header h3 { margin: 0; font-size: 15px; color: #222; }
.ess-modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #666; line-height: 1; padding: 0; width: 28px; height: 28px; }
.ess-modal-close:hover { color: #000; }
.ess-modal-body label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: #444; }
.ess-modal-body input[type="text"] { width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid #bbb; border-radius: 4px; font-size: 13px; font-family: inherit; }
.ess-modal-body input[type="text"]:focus { outline: none; border-color: #3a7cfd; box-shadow: 0 0 0 2px rgba(58,124,253,0.15); }
.ess-modal-body input[type="text"]:disabled { background: #f0f0f0; color: #aaa; cursor: not-allowed; }
.ess-modal-body input[type="password"] { width: 100%; padding: 6px 8px; margin-top: 4px; border: 1px solid #bbb; border-radius: 4px; font-size: 13px; font-family: inherit; }
.ess-modal-body input[type="password"]:focus { outline: none; border-color: #3a7cfd; box-shadow: 0 0 0 2px rgba(58,124,253,0.15); }
.pgse-modal-hint { font-size: 11.5px; color: #777; line-height: 1.4; margin: 10px 0 0 0; }
.pgse-modal-error { font-size: 12px; color: #c62828; background: rgba(198,40,40,0.08); border: 1px solid rgba(198,40,40,0.25); border-radius: 4px; padding: 6px 8px; margin: 10px 0 0 0; }
.ess-modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; padding-top: 10px; border-top: 1px solid #eee; }
.ess-modal-save { background: #2e7d32; color: #fff; padding: 5px 14px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; }
.ess-modal-save:hover { opacity: 0.9; }
.ess-modal-cancel { background: #e0e0e0; color: #333; padding: 5px 14px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; }
.ess-modal-cancel:hover { background: #d5d5d5; }

/* ==========================================================================
   ДОДАТКОВІ СТИЛІ ПОЛІГРАФ СЬЮТ ТА CIT
   ========================================================================== */
.suite-toolbar-area { max-width: 880px; margin: 0 auto 12px auto; width: 100%; }
.suite-tabs-container { max-width: 880px; margin: 0 auto 12px auto; display: flex; gap: 8px; border-bottom: 2px solid #ddd; padding-bottom: 0; }
.suite-tab-btn { padding: 8px 18px; border: none; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: #666; border-bottom: 3px solid transparent; transition: all 0.2s; border-radius: 6px 6px 0 0; }
.suite-tab-btn:hover { color: #222; background: rgba(128,128,128,0.05); }
.suite-tab-btn.active { color: #3a7cfd; border-bottom-color: #3a7cfd; background: rgba(58,124,253,0.05); }
.cit-container { max-width: 880px; margin: 0 auto; width: 100%; padding-bottom: 30px; font-family: inherit; }
.cit-block { background: #fff; padding: 15px; border-radius: 6px; border: 1px solid #ccc; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.cit-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px dashed #ccc; padding-bottom: 8px; }
.cit-block-title { border: none; font-size: 14px; font-weight: 700; color: #222; outline: none; width: 100%; max-width: 350px; background: transparent; }
.cit-block-title:focus { border-bottom: 2px solid #3a7cfd; }
.cit-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 15px; align-items: start; }
.cit-test-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; background: #f8fafc; padding: 4px 6px; border-radius: 4px; border: 1px solid #e2e8f0; }
.cit-test-row input[type="text"] { border: 1px solid #ccc; border-radius: 3px; padding: 5px; font-size: 12px; outline: none; font-family: inherit; }
.cit-test-row input[type="text"]:focus { border-color: #3a7cfd; }
.cit-theme, .cit-key { flex-grow: 1; width: 100%; }
.cit-score { width: 40px; text-align: center; font-weight: 800; font-size: 13px; }
.cit-score.artifact { background: #fff7ed; border-color: #f97316; color: #ea580c; }
.cit-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.cit-dash-box { background: rgba(128,128,128,0.06); border: 1px solid #ddd; border-radius: 4px; padding: 8px; text-align: center; }
.cit-dash-label { font-size: 9px; font-weight: bold; color: #666; text-transform: uppercase; }
.cit-dash-value { font-size: 16px; font-weight: 900; color: #222; margin-top: 2px; }
.val-ri { color: #d32f2f !important; }
.val-nri { color: #2e7d32 !important; }
.val-no { color: #757575 !important; }
.cit-matrix-wrapper { background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 8px; overflow-x: auto; }
.cit-matrix-title { font-size: 11px; font-weight: bold; margin-bottom: 6px; color: #333; display: flex; justify-content: space-between; }
.cit-matrix-table { width: 100%; border-collapse: collapse; font-size: 9.5px; text-align: center; }
.cit-matrix-table th, .cit-matrix-table td { border: 1px solid #ccc; padding: 3px 1px; }
.cit-matrix-table th { background: rgba(128,128,128,0.15); color: #222; font-weight: 800; }
.cit-matrix-table.has-data .cit-matrix-cell:not(.cit-cell-active) { opacity: 0.25; background: #fafafa; }
.cit-cell-active { background-color: #3a7cfd !important; color: #fff !important; font-weight: 900 !important; transform: scale(1.1); box-shadow: 0 2px 6px rgba(0,0,0,0.2); position: relative; z-index: 5; border:none; }
.cit-cell-active.res-ri { background-color: #d32f2f !important; }
.cit-cell-active.res-nri { background-color: #2e7d32 !important; }
.cit-conclusion-box { margin-top: 10px; padding: 8px 10px; background: rgba(128,128,128,0.04); border: 1px solid #ddd; border-radius: 4px; font-size: 11.5px; line-height: 1.4; color: #333; }
.cit-conclusion-box b { color: #111; }
.cit-add-block-btn { width: 100%; padding: 8px; font-size: 13px; font-weight: bold; border: 1px solid #3a7cfd; background: rgba(58,124,253,0.08); color: #3a7cfd; border-radius: 5px; cursor: pointer; transition: 0.2s; margin-top: 10px; }
.cit-add-block-btn:hover { background: rgba(58,124,253,0.18); }

@media (max-width: 650px) {
  .app-header { flex-direction: column; text-align: center; gap: 12px; }
  .ess-toolbar { justify-content: flex-start; gap: 3px; padding: 6px 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ess-toolbar::-webkit-scrollbar { display: none; }
  .ess-toolbar-btn, .ess-toolbar-sep, .ess-save-status { flex-shrink: 0; }
  .ess-test-top-bar { flex-direction: column; align-items: flex-start; }
  .dyn-mode-toggle { justify-content: center; width: 100%; }
  .cit-layout { grid-template-columns: 1fr; }
}

/* Окремий поріг саме під ширину ESS-таблиці (min-width: 700px + запаси
   контейнера), а не довільні 650px — щоб не лишати проміжок ширин, де
   таблиця вже не влазить, а горизонтальна прокрутка ще не увімкнена. */
@media (max-width: 720px) {
  .ess-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media print {
  @page { margin: 1cm; }
  body, html { background: #fff; padding: 0; margin: 0; display: block !important; height: auto !important; }
  .suite-toolbar-area, .suite-tabs-container, .auth-overlay, .app-header { display: none !important; }
  .suite-tab-content { display: none !important; }
  .suite-tab-content.active { display: block !important; }

  .ess-test-wrapper, .cit-block { border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; page-break-inside: avoid !important; break-inside: avoid !important; }
  .ess-test-wrapper + .ess-test-wrapper, .cit-block + .cit-block { page-break-before: always !important; break-before: page !important; margin-top: 20px !important; }
  .ess-table-responsive { overflow: visible !important; }
  .ess-table { min-width: 100% !important; width: 100% !important; }
  .ess-table th, .ess-table td { padding: 1px !important; height: 20px !important; }
  .chart-disabled { display: none !important; }
  .ess-table input.score-input, .ess-test-title-area input[type="text"], .cit-block-title { border: none !important; background: transparent !important; color: black !important; font-weight: bold !important; }

  .ess-scale-container, .ess-dynamics-container { margin-top: 5px !important; padding: 4px !important; }
  .ess-table, .ess-scale-container, .ess-dynamics-container, .bg-sr, .bg-nsr, .bg-inc, .bg-no, .bg-artifact, .bg-local-artifact { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  .bg-sr, .bg-nsr { color: white !important; }
  .bg-no, .bg-inc { color: black !important; }
  .bg-sr .prob-text, .bg-nsr .prob-text, .bg-no .prob-text { color: inherit !important; }
  .bg-artifact, .bg-local-artifact { color: white !important; }
  .ess-table td.bg-local-artifact input.score-input { color: white !important; }
  .col-disabled { display: none !important; }

  .cit-add-block-btn, .btn-del-block, .btn-del-row, .cit-btn-add-row { display: none !important; }
  .cit-layout { display: block !important; }
  .cit-cell-active { transform: none !important; box-shadow: none !important; border: 2px solid #000 !important; color: #000 !important; background: transparent !important; }
  .cit-matrix-table.has-data .cit-matrix-cell:not(.cit-cell-active) { opacity: 1 !important; color: #666 !important; }

  /* Нотатки — друк (v8.1) */
  #tab-notes .notes-mode-bar,
  #tab-notes .notes-images-section,
  #tab-notes .notes-textarea { display: none !important; }
  #tab-notes .notes-preview { display: block !important; border: none !important; padding: 0 !important; }
}

/* Оптимізація друку PDF для ESS-M */
@media print {
  .ess-block { page-break-inside: avoid !important; break-inside: avoid !important; }
}

/* ==========================================================================
   INLINE SVG ІКОНКИ (v8.4) — однаковий вигляд у всіх браузерах
   ========================================================================== */
.ic { width: 16px; height: 16px; vertical-align: -3px; flex-shrink: 0; }
.ic-sm { width: 13px; height: 13px; vertical-align: -2px; flex-shrink: 0; }
.ic-lg { width: 40px; height: 40px; flex-shrink: 0; }
.ic-dot { width: 9px; height: 9px; vertical-align: 0; flex-shrink: 0; }
.ess-toolbar-btn .ic { width: 19px; height: 19px; vertical-align: -4px; }
.ess-toolbar-btn .ic-lock-badge { position: absolute; bottom: 3px; right: 2px; width: 11px; height: 11px; }
.ess-save-status { display: inline-flex; align-items: center; gap: 6px; }
.kofi-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 6px; border: 1px solid #ccc; color: #666; background: #fff; text-decoration: none; transition: all .15s; }
.kofi-btn:hover { border-color: #3a7cfd; color: #3a7cfd; }
.kofi-btn .ic { width: 17px; height: 17px; }
.donate-block { text-align: center; margin-top: 18px; }
.donate-note { font-size: 11px; color: #aaa; margin-top: 8px; }
.offline-note { font-size: 12px; color: #94a3b8; text-align: center; margin: 16px 0 0; line-height: 1.5; }

/* ==========================================================================
   ПРИЛИПАЮЧИЙ ЗАГОЛОВОК ТАБЛИЦІ ESS-M (v8.7)
   Заголовок липне до верху вікна, поки видно тіло цієї таблиці, і йде геть
   разом з нею — position: sticky прив'язаний до .ess-table-responsive
   (кожної таблиці окремо), тому для наступного тесту працює так само.
   ========================================================================== */
.ess-table-responsive { position: relative; }
.ess-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 #888;
}
@media (max-width: 720px) {
  /* На вузьких екранах ess-table-responsive повертає overflow-x: auto (для
     горизонтальної прокрутки), а sticky всередині overflow-контейнера не
     липне до вікна — тому явно вимикаємо, щоб не лишати мовчазну поведінку. */
  .ess-table thead th { position: static; box-shadow: none; }
}
@media print {
  .ess-table thead th { position: static !important; box-shadow: none !important; }
}