:root { --blue:#174d7a; --blue2:#2377ad; --light:#eef5fa; --line:#c7d4dc; --ink:#17242d; --muted:#63737d; --warn:#9a3e29; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Arial,"Yu Gothic",sans-serif; background:#f4f7f9; }
header { padding:22px max(22px,calc((100vw - 1600px)/2)); color:#fff; background:var(--blue); display:flex; justify-content:space-between; gap:16px; }
h1 { margin:0 0 6px; font-size:25px; } header p { margin:0; } .version { font-size:13px; opacity:.85; }
main { max-width:1600px; margin:18px auto; padding:0 18px; display:grid; grid-template-columns:minmax(620px,1.05fr) minmax(600px,.95fr); gap:18px; align-items:start; }
.panel { background:#fff; border:1px solid var(--line); border-radius:9px; padding:18px; box-shadow:0 2px 8px #22313f12; }
.data-loader { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; margin-bottom:8px; background:var(--light); border-radius:7px; }
.data-loader h2 { margin:0 0 4px; font-size:17px; color:var(--blue); } .data-loader p { margin:0; font-size:13px; }
details { border-bottom:1px solid var(--line); } details:last-of-type { border-bottom:0; }
summary { padding:14px 4px; color:var(--blue); font-size:18px; font-weight:700; cursor:pointer; }
.section-body { padding:0 4px 18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; } .wide { grid-column:1 / -1; }
label { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; }
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; min-height:36px; border:1px solid #9eb4c4; border-radius:5px; padding:7px 9px; background:#fff; }
textarea { line-height:1.55; resize:vertical; }
button,.file-button { min-height:38px; padding:8px 15px; border:0; border-radius:5px; background:var(--blue2); color:#fff; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
button.secondary,.file-button.secondary { background:#5f717d; } button.ghost { background:#718b9c; } .file-button input { display:none; }
.help { margin:0 0 12px; color:var(--muted); font-size:13px; }
.equipment-template-box { padding:11px; border:1px solid var(--line); border-radius:6px; background:#f8fbfd; }
.equipment-template-box .help { margin:8px 0 0; }
.template-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.template-actions button { min-height:34px; padding:6px 11px; font-size:12px; }
.warning { color:var(--warn); font-size:13px; }
.table-wrap { overflow:auto; }
.participant-editor { width:100%; min-width:960px; border-collapse:collapse; }
.participant-editor th,.participant-editor td { padding:5px; border:1px solid var(--line); vertical-align:middle; }
.participant-editor th { background:#e7f0f6; font-size:12px; }
.participant-editor input,.participant-editor select { min-width:80px; }
.participant-editor .name { min-width:150px; } .participant-editor .contact { min-width:150px; font-size:12px; }
.row-actions { display:flex; gap:4px; } .row-actions button { min-height:30px; padding:3px 7px; }
.sticky-actions { position:sticky; bottom:0; margin:16px -18px -18px; padding:12px 18px; display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid var(--line); background:#ffffffed; backdrop-filter:blur(6px); }
.preview-panel { position:sticky; top:10px; overflow:auto; max-height:calc(100vh - 20px); }
.preview-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin-bottom:12px; }
.preview-heading h2 { margin:0; color:var(--blue); font-size:19px; } .preview-heading p { margin:0; color:var(--warn); font-size:12px; }
.personal-document { width:210mm; min-height:297mm; max-width:100%; margin:auto; padding:13mm 13mm 12mm; color:#000; background:#fff; border:1px solid #aeb9c0; font-family:"Yu Gothic",sans-serif; font-size:10.5pt; line-height:1.45; }
.doc-date { text-align:right; margin:0 0 2mm; } .personal-document h3 { text-align:center; letter-spacing:.24em; font-size:17pt; margin:0 0 2mm; }
.submitter { text-align:right; margin:0 0 4mm; }
.form-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.form-table > tbody > tr > td { border:1.2px solid #000; padding:2mm 2.2mm; vertical-align:top; }
.form-table .indent { margin:1mm 0 0 7mm; }
.form-table .large-field { min-height:30mm; margin:1.5mm 0 0 7mm; white-space:pre-wrap; }
.form-table .medium-field { min-height:16mm; margin:1.5mm 0 0 7mm; white-space:pre-wrap; }
.doc-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.doc-table th,.doc-table td { padding:1.5mm 1.1mm; border:1px solid #000; vertical-align:middle; overflow-wrap:anywhere; }
.doc-table th { background:#fff; font-size:8.2pt; } .doc-table td { font-size:8.2pt; }
.doc-note { min-height:12mm; font-size:8.5pt; }
@media (max-width:1250px) { main { grid-template-columns:1fr; } .preview-panel { position:static; max-height:none; } }
@media (max-width:650px) { .form-grid { grid-template-columns:1fr; } .wide { grid-column:auto; } header,.data-loader { flex-direction:column; align-items:stretch; } }
@media print {
  @page { size:A4 portrait; margin:0; }
  body { background:#fff; }
  header,.editor,.preview-heading { display:none !important; }
  main { display:block; max-width:none; margin:0; padding:0; }
  .preview-panel { border:0; box-shadow:none; padding:0; max-height:none; overflow:visible; }
  .personal-document { width:210mm; min-height:297mm; max-width:none; margin:0; border:0; padding:10mm 12mm; }
}