* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; color: #1d1d1f; background: #f6f6f7; }
.app { display: flex; flex-direction: column; height: 100vh; }
header { display: flex; gap: 12px; align-items: center; padding: 8px 16px; background: #fff; border-bottom: 1px solid #ddd; }
.spacer { flex: 1; }
.muted { color: #777; }
.small { font-size: 12px; }
.pad { padding: 16px; }
.link { cursor: pointer; }
.error { color: #b00020; padding: 16px; }
button { font: inherit; padding: 4px 10px; border: 1px solid #bbb; border-radius: 4px; background: #fff; cursor: pointer; }
button:hover { background: #eef; }
.login { max-width: 320px; margin: 80px auto; display: flex; flex-direction: column; gap: 8px; }
.login input { padding: 8px; font: inherit; }
.list { padding: 16px 24px; }
.row { padding: 6px 0; border-bottom: 1px solid #eee; }
.editor-layout { flex: 1; display: flex; min-height: 0; }
.editor { flex: 1; min-width: 0; }
aside { width: 380px; display: flex; flex-direction: column; overflow-y: auto; background: #fff; border-left: 1px solid #ddd; }
aside section { padding: 8px 12px; border-bottom: 1px solid #eee; }
aside h4 { margin: 4px 0 6px; }
.grow { flex: 1; }
.buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.change { margin-top: 2px; }
del { color: #b00020; }
ins { color: #0a7a2f; text-decoration: none; }
.kind-ai b { color: #6b2fbf; }
.kind-system b { color: #666; }
.buttons input { padding: 4px 6px; font: inherit; width: 150px; }
.badge { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: #efe6fb; color: #6b2fbf; vertical-align: middle; }
.license { background: #faf7ff; }
.license.community { background: #fff6f0; }
.license ul { margin: 4px 0 6px; padding-left: 18px; }
.license .small { margin: 4px 0; }
.field label { width: 90px; }
.field input { width: 170px; }
button:disabled { opacity: 0.5; cursor: default; }
.signature .signer { margin: 2px 0 2px 12px; display: flex; gap: 8px; align-items: center; }
.signature > button { margin: 4px 6px 0 0; }
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-box { background: #fff; width: min(1100px, 94vw); height: 92vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #ddd; }
.modal-box iframe { flex: 1; border: 0; width: 100%; }