* { box-sizing: border-box }
body { margin: 0; font-family: Arial, sans-serif; background: #f3f5f7; color: #222 }
.app { display: grid; grid-template-columns: 430px 1fr; height: 100vh }
.panel { padding: 16px; overflow: auto; background: #fff; border-right: 1px solid #ddd }
h1 { font-size: 20px; color: #17365d; margin: 0 0 4px }
h2 { font-size: 14px; color: #17365d; margin: 17px 0 7px }
.small { font-size: 11px; color: #666 }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px }
.field { margin: 6px 0 }
.field label { display: block; font-size: 10px; font-weight: bold; margin-bottom: 3px }
input, select, button { font: inherit }
input, select { width: 100%; padding: 6px; border: 1px solid #c8ced6; border-radius: 4px }
button { border: 0; border-radius: 4px; padding: 7px 10px; background: #1f4e78; color: #fff; font-weight: bold; cursor: pointer }
button:disabled { opacity: .6; cursor: wait }
.secondary { background: #e8edf2; color: #222 }
.danger { background: #a33 !important }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 }
.filebox, .hint { border: 1px solid #dce2e8; border-radius: 5px; padding: 8px; margin: 6px 0; font-size: 11px }
.filebox { border-style: dashed }
.editor { border: 1px solid #d5dbe2; border-radius: 5px; overflow: auto }
.cr { display: grid; grid-template-columns: 1.1fr 1.65fr .5fr .7fr 1fr .62fr .72fr 28px; gap: 4px; min-width: 740px; padding: 4px; border-bottom: 1px solid #e5e8ec }
.cr.h { background: #f0f3f6; font-size: 9px; font-weight: bold }
.cr input { padding: 4px; font-size: 10px }
.cr button { padding: 2px 5px }
.preview { overflow: auto; padding: 22px; background: #dfe4ea }
#paper { display: block; width: 210mm; height: 297mm; border: 0; background: #fff; margin: auto; box-shadow: 0 2px 12px #0002 }
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; height: auto }
    .preview { padding: 12px }
    #paper { width: 100%; }
}