* { box-sizing: border-box }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; background: #f8fafc; color: #0f172a }
.container { max-width: 1100px; margin: 0 auto; padding: 24px }
.site-header { background: #eef2f7; border-bottom: 1px solid #e5e7eb }
.header-wrap { display: flex; align-items: center; justify-content: space-between }
.branding { display: flex; gap: 12px; align-items: center }
.logo { font-size: 28px }
.title { margin: 0; font-size: 22px }
.subtitle { color: #475569; font-size: 14px }
.intro { color: #64748b; font-size: 13px; margin-top: 4px }
.card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); margin: 16px 0 }
.card-title { margin: 0 0 12px; font-size: 18px }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.form-field { display: flex; flex-direction: column; gap: 6px }
.form-field.full { grid-column: 1 / -1 }
label { font-size: 14px }
input[type="text"], input[type="search"], select, input[type="file"], textarea { padding: 8px; background: #ffffff; border: 1px solid #cbd5e1; color: #0f172a; border-radius: 8px }
textarea { resize: vertical }
.actions { display: flex; gap: 8px; align-items: center; margin-top: 12px }
.primary { padding: 8px 12px; background: #0ea5e9; color: #ffffff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600 }
.primary:hover { background: #0284c7 }
.secondary { padding: 8px 12px; background: #e5e7eb; color: #0f172a; border: none; border-radius: 8px; cursor: pointer; font-weight: 600 }
.status { font-size: 13px; color: #16a34a }
.error { font-size: 12px; color: #dc2626; min-height: 16px }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px }
.table-wrap { width: 100%; overflow: auto }
.doc-table { width: 100%; border-collapse: collapse }
.doc-table th, .doc-table td { padding: 10px; border-bottom: 1px solid #e5e7eb }
.actions-col { width: 320px }
.list-state { font-size: 14px; color: #475569; padding: 8px 0 }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center }
.modal.hidden { display: none }
.modal-content { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; width: 700px; max-width: 90vw; padding: 16px; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,0.2) }
.close { position: absolute; right: 12px; top: 8px; background: #e5e7eb; color: #0f172a; border: none; border-radius: 6px; width: 28px; height: 28px; cursor: pointer }
.notify { font-size: 13px; color: #16a34a; margin-bottom: 8px; min-height: 18px }
.site-footer { background: #eef2f7; border-top: 1px solid #e5e7eb }
.footer-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center }
.footer-img { max-width: 100%; height: auto; max-height: 140px }
.footer-text { display: block }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr } .actions-col { width: 220px } .footer-img { max-height: 110px } }