:root { --red:#d90429; --red-dark:#b80722; --ink:#222632; --muted:#6d7280; --line:#e5e7eb; --paper:#fff; --wash:#fff7f8; --green:#31864a; --radius:12px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--wash); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:linear-gradient(180deg,#fff 0,#fff8f9 100%); font-size:14px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(100% - 32px, 1600px); margin:40px auto; background:var(--paper); border:1px solid #f2e6e7; border-radius:var(--radius); overflow:hidden; box-shadow:0 5px 16px rgba(122,18,32,.08); }
.brand { position:relative; display:flex; align-items:center; height:72px; padding:0 32px; overflow:hidden; background:linear-gradient(105deg,#c90024,#e10a30); color:white; font-weight:700; font-size:18px; }
.brand-login { position:relative; z-index:1; margin-left:auto; border:1px solid rgba(255,255,255,.78); border-radius:7px; padding:8px 13px; color:#fff; font-size:13px; font-weight:700; text-decoration:none; transition:.15s background-color,.15s color; }
.brand-login:hover,.brand-login:focus-visible { background:#fff; color:var(--red-dark); outline:none; }
.brand svg { position:absolute; top:0; right:0; width:460px; height:72px; opacity:.92; }
.content { padding:clamp(22px,2.2vw,32px); }
.topline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
h1 { margin:0; font-size:25px; line-height:1.2; letter-spacing:-.03em; }
h2 { margin:4px 0 0; font-size:18px; line-height:1.25; }
h3 { margin:0; font-size:15px; }
p { margin:0; line-height:1.5; }
.muted { color:var(--muted); }
.save-state { display:flex; align-items:center; flex:0 0 auto; gap:6px; color:#66706b; font-size:12px; white-space:nowrap; }
.save-state::before { content:'✓'; display:grid; width:16px; height:16px; place-items:center; border:1.5px solid #71b383; border-radius:50%; color:#31864a; font-size:10px; font-weight:800; }
.save-state.pending::before { content:'…'; border-color:#d49b34; color:#b47100; }
.save-state.offline::before { content:'!'; border-color:#d38a42; color:#ad6100; }
.save-state.error::before { content:'!'; border-color:#d95050; color:#c71e1e; }
.rule { height:1px; margin:20px 0; background:var(--line); }
.lead { margin-top:14px; max-width:640px; color:#555c69; }
.section-label { margin:22px 0 12px; font-weight:700; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 24px; }
.field label,.question-label { display:block; margin-bottom:7px; color:#3b404a; font-size:12px; font-weight:700; }
.field input,.field select,.field textarea { width:100%; border:1px solid #d9dde4; border-radius:7px; outline:none; background:#fff; color:var(--ink); transition:.15s border-color,.15s box-shadow; }
.field input,.field select { height:43px; padding:0 12px; }
.field textarea { min-height:107px; padding:12px; resize:vertical; line-height:1.45; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#e52443; box-shadow:0 0 0 3px rgba(217,4,41,.1); }
.field.invalid input,.field.invalid textarea { border-color:#e12645; }
.consent { display:flex; align-items:flex-start; gap:9px; margin-top:22px; color:#5c626e; font-size:12px; }
.consent input { accent-color:var(--red); width:16px; height:16px; margin:0; }
.notice { margin-top:14px; border-radius:8px; padding:11px 13px; background:#fff3f4; color:#b21e36; font-size:13px; }
.notice.success { background:#f1faf3; color:#27703c; }
.impersonation-notice { margin:18px 32px -4px; border:1px solid #e7bb61; border-radius:8px; padding:11px 13px; background:#fff7df; color:#75510b; font-size:12px; font-weight:700; line-height:1.45; }
.impersonation-notice a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
.actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:26px; }
.btn { min-width:130px; height:44px; border:1px solid var(--red); border-radius:7px; padding:0 24px; background:#fff; color:var(--red); font-size:13px; font-weight:700; transition:.15s transform,.15s box-shadow; }
.btn:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(217,4,41,.14); }
.btn.primary { background:linear-gradient(100deg,#d90429,#e50931); color:#fff; }
.btn:disabled { cursor:not-allowed; opacity:.55; transform:none; box-shadow:none; }
.btn.center { min-width:min(100%,310px); margin:auto; }
.instruction-list { display:grid; gap:11px; margin-top:18px; }
.info-card { display:grid; grid-template-columns:50px 1fr; gap:14px; align-items:center; min-height:72px; padding:11px 14px; border:1px solid var(--line); border-radius:10px; }
.info-icon { display:grid; width:44px; height:44px; place-items:center; border:1px solid #eceef2; border-radius:9px; color:var(--red); font-size:23px; }
.info-card p { margin-top:3px; color:var(--muted); font-size:12px; }
.progress-head { display:flex; gap:35px; border-bottom:1px solid var(--line); }
.progress-item { position:relative; padding:0 0 12px; color:#707582; font-size:12px; }
.progress-item.active { color:#343943; font-weight:700; }
.progress-item.active::after { position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:var(--red); content:''; }
.helper { margin:18px 0; color:#69717e; font-size:12px; }
.scale-head { display:grid; grid-template-columns:minmax(320px,1fr) repeat(6,minmax(56px,70px)); gap:7px; align-items:start; padding:0 8px 10px; color:#5f6571; font-size:11px; line-height:1.2; text-align:center; }
.scale-head span:first-child { text-align:left; }
.question-row { display:grid; grid-template-columns:minmax(320px,1fr) repeat(6,minmax(56px,70px)); gap:7px; align-items:center; min-height:58px; padding:9px 8px; border-top:1px solid #edf0f3; }
.question-text { color:#404650; font-size:12px; line-height:1.35; }
.radio-value { display:grid; place-items:center; cursor:pointer; }
.radio-value input { appearance:none; width:16px; height:16px; margin:0; border:1px solid #cbd0d7; border-radius:50%; background:#fff; cursor:pointer; }
.radio-value input:checked { border:5px solid var(--red); }
.radio-label { display:none; }
.page-kicker { display:inline-block; margin:4px 0 14px; padding:4px 8px; border-radius:5px; background:#f4f5f6; color:#656b76; font-size:11px; }
.part-progress { display:inline-block; }
.scenario { margin:8px 0 16px; padding:18px; border:1px solid #e7e9ed; border-radius:10px; background:#fbfbfc; color:#363b45; font-size:15px; line-height:1.5; }
.options { display:grid; gap:9px; }
.option { display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start; padding:13px 14px; border:1px solid #e2e5e9; border-radius:7px; color:#5b6270; font-size:13px; line-height:1.4; }
.option:has(input:checked) { border-color:#f13450; background:#fffafb; color:#3d424b; }
.option input { appearance:none; width:15px; height:15px; margin:2px 0 0; border:1px solid #cbd0d7; border-radius:50%; }
.option input:checked { border:5px solid var(--red); }
.option strong { color:#343a45; }
.open-question { margin-top:18px; }
.open-question textarea { display:block; width:100%; min-height:108px; padding:12px; border:1px solid #d9dde4; border-radius:7px; outline:none; background:#fff; color:var(--ink); line-height:1.45; resize:vertical; overflow-y:hidden; transition:.15s border-color,.15s box-shadow; }
.open-question textarea:focus { border-color:#e52443; box-shadow:0 0 0 3px rgba(217,4,41,.1); }
.counter { display:block; margin-top:5px; color:#8b919b; font-size:10px; text-align:right; }
.review-list { display:grid; gap:11px; margin-top:20px; }
.review-card { display:grid; grid-template-columns:48px 1fr auto 18px; gap:13px; align-items:center; width:100%; padding:15px; border:1px solid #e6e8ec; border-radius:10px; background:#fff; color:inherit; text-align:left; }
.review-card:hover { border-color:#f08b9d; }
.review-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid #e5e8ed; border-radius:50%; color:var(--red); font-size:20px; }
.review-card p { margin-top:3px; color:#7b818b; font-size:12px; }
.badge { padding:5px 9px; border-radius:4px; background:#eaf6e8; color:#4e965e; font-size:11px; }
.ready-box { display:flex; gap:9px; align-items:flex-start; margin-top:18px; padding:13px; border-radius:6px; background:#f3faf3; color:#597761; font-size:12px; }
.ready-box b { color:#31864a; font-size:16px; }
.done { display:grid; place-items:center; min-height:390px; text-align:center; }
.placeholder { display:grid; place-items:center; min-height:380px; padding:48px 32px; text-align:center; }
.placeholder h1 { max-width:620px; }
.placeholder p { max-width:480px; margin-top:16px; color:#5f6571; }
.done-mark { display:grid; width:70px; height:70px; margin-bottom:18px; place-items:center; border-radius:50%; background:#ecf8ed; color:#2d8b46; font-size:33px; }
.done p { max-width:470px; margin:12px auto 0; color:#636a76; }
.tab-warning { margin-top:14px; border:1px solid #f1cc6d; border-radius:7px; padding:10px 12px; background:#fff9e9; color:#7c5a0a; font-size:12px; }
@media (max-width:760px) { body { font-size:14px; } .shell { width:100%; min-height:100vh; margin:0; border:0; border-radius:0; } .brand { height:58px; padding:0 20px; font-size:16px; } .brand-login { padding:7px 11px; font-size:12px; } .brand svg { width:300px; height:58px; } .impersonation-notice { margin:13px 18px -5px; } .content { padding:22px 18px 26px; } h1 { font-size:22px; } .save-state { font-size:0; } .save-state::before { font-size:10px; } .form-grid { grid-template-columns:1fr; gap:14px; } .progress-head { gap:19px; overflow:auto; } .scale-head { display:none; } .question-row { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; padding:12px 0; } .question-text { grid-column:1/-1; margin-bottom:8px; } .radio-value { gap:5px; min-width:0; color:#5f6571; } .radio-value input { width:18px; height:18px; } .radio-label { display:block; min-height:30px; font-size:9px; line-height:1.12; text-align:center; } .actions { margin-top:22px; } .btn { min-width:100px; padding:0 16px; } .info-card { grid-template-columns:42px 1fr; gap:10px; } .info-icon { width:38px; height:38px; } .review-card { grid-template-columns:42px 1fr auto 14px; gap:9px; } }
.admin-login { max-width:520px; margin:0 auto; padding-bottom:56px; }
.admin-login-form { display:grid; gap:16px; margin-top:24px; }
.admin-login-button { justify-self:start; margin-top:8px; }
.admin-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.admin-heading .lead { margin-top:8px; }
.admin-actions { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:10px; white-space:nowrap; }
.admin-row-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; white-space:nowrap; }
.admin-table-wrap { overflow-x:auto; }
.admin-list-filters { display:grid; grid-template-columns:repeat(4,minmax(135px,1fr)) auto; align-items:end; gap:12px; margin:0 0 18px; }
.admin-filter-actions { display:flex; gap:8px; white-space:nowrap; }
.admin-filter-actions .btn { min-width:0; }
.admin-table { width:100%; min-width:1430px; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:13px; }
.admin-table th { position:relative; padding:12px 18px 12px 14px; border-bottom:1px solid var(--line); color:#656c78; font-size:11px; text-align:left; white-space:nowrap; }
.admin-table td { padding:14px; overflow-wrap:anywhere; border-bottom:1px solid #edf0f3; color:#3d434e; vertical-align:middle; }
.admin-table td[data-column="source_page"],.admin-table td[data-column="completed_at"],.admin-table td[data-column="state"],.admin-table td[data-column="actions"] { white-space:nowrap; overflow-wrap:normal; }
.admin-table tbody tr:hover { background:#fffafb; }
.admin-status { display:inline-block; padding:5px 9px; border-radius:4px; font-size:11px; white-space:nowrap; }
.admin-status.completed { background:#eaf6e8; color:#4e965e; }
.admin-status.in-progress { background:#fff3e6; color:#a56818; }
.admin-download { min-width:0; height:38px; padding:0 14px; white-space:nowrap; text-decoration:none; }
.admin-sort { display:inline-flex; align-items:center; gap:5px; max-width:100%; margin:0; padding:0; border:0; background:transparent; color:inherit; font-size:inherit; font-weight:700; text-align:left; white-space:nowrap; }
.admin-sort:hover { color:var(--red); }
.column-resizer { position:absolute; top:0; right:-3px; z-index:1; width:9px; height:100%; cursor:col-resize; touch-action:none; }
.column-resizer::after { content:''; position:absolute; top:9px; bottom:9px; left:4px; width:1px; background:transparent; }
.column-resizer:hover::after { background:#d78a98; }
.archive-button { color:#a71d35; border-color:#e68b99; }
.admin-modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(34,38,50,.38); }
.admin-modal { width:min(100%,470px); border-radius:12px; padding:24px; background:#fff; box-shadow:0 18px 44px rgba(34,38,50,.24); }
.admin-modal p { margin-top:12px; color:#5d6470; }
.admin-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.admin-empty { padding:28px; color:#727987; text-align:center; }
.admin-result-search { max-width:620px; margin-bottom:8px; }
.admin-result-count { margin-bottom:18px; color:#717887; font-size:12px; }
.admin-answer-table { min-width:760px; table-layout:auto; }
.admin-answer-table th:nth-child(1),.admin-answer-table td:nth-child(1) { width:110px; min-width:110px; }
.admin-answer-table th:nth-child(3),.admin-answer-table td:nth-child(3) { width:120px; min-width:120px; }
.admin-answer-table td:nth-child(2),.admin-answer-table td:nth-child(4) { min-width:260px; white-space:normal; line-height:1.4; }
.admin-answer-table td:nth-child(4) { white-space:pre-line; }
@media (max-width:1180px) { .admin-heading { align-items:flex-start; flex-direction:column; } .admin-actions { justify-content:flex-start; width:100%; overflow-x:auto; padding-bottom:2px; } .admin-heading .btn { flex:0 0 auto; } .admin-list-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-filter-actions { justify-content:stretch; } .admin-filter-actions .btn { flex:1 1 auto; } .admin-table-wrap { overflow:visible; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display:block; width:100%; } .admin-table { min-width:0; } .admin-table thead { display:none; } .admin-table tr { margin:0 0 12px; border:1px solid #e6e8ec; border-radius:10px; padding:6px 14px; } .admin-table tbody tr:hover { background:#fff; } .admin-table td { display:grid; grid-template-columns:132px minmax(0,1fr); gap:12px; min-width:0 !important; padding:9px 0; border:0; } .admin-table td::before { color:#737a86; content:attr(data-label); font-size:11px; font-weight:700; } .admin-table td:last-child { display:block; padding:12px 0 8px; overflow-x:auto; } .admin-table td:last-child::before { display:none; } .admin-row-actions { width:max-content; } .admin-download { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; } .admin-modal-actions { justify-content:stretch; } .admin-modal-actions .btn { flex:1 1 auto; } .admin-empty { display:block !important; } .admin-empty::before { display:none; } }
@media (max-width:760px) { .admin-list-filters { grid-template-columns:1fr; } }