.form-template-panel { margin-top: 20px; }
.form-template-panel-head,
.form-template-card-head,
.form-template-field-title,
.form-template-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-template-panel-head { margin-bottom: 18px; }
.form-template-panel-head h2,
.form-template-card h3,
.form-template-field-title h3 { margin: 0; color: #173d59; }
.form-template-panel-head p { max-width: 650px; margin: 6px 0 0; color: #688197; line-height: 1.65; }
.form-template-list { display: grid; gap: 10px; }
.form-template-card { padding: 16px 18px; border: 1px solid rgba(46, 111, 153, 0.18); border-radius: 8px; background: #fff; }
.form-template-card.is-inactive { background: #fbfcfd; opacity: 0.76; }
.form-template-card-head { align-items: flex-start; }
.form-template-card-head > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.form-template-card h3 { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.form-template-state { padding: 2px 7px; border-radius: 8px; background: #e7f4fa; color: #26739e; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.is-inactive .form-template-state { background: #f0f2f4; color: #74818c; }
.form-template-card-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.form-template-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 15px 0 0; padding-top: 14px; border-top: 1px solid rgba(73, 124, 157, 0.12); }
.form-template-details div { min-width: 0; }
.form-template-details dt { color: #7990a2; font-size: 12px; font-weight: 700; }
.form-template-details dd { margin: 5px 0 0; color: #38576b; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.form-template-footnote { margin: 13px 0 0; color: #7990a2; font-size: 12px; }
.form-template-modal-backdrop { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 28px; background: rgba(24, 57, 82, 0.32); backdrop-filter: blur(4px); }
.form-template-modal { width: min(760px, calc(100vw - 56px)); max-height: min(84vh, 760px); overflow: auto; padding: 28px; border: 1px solid rgba(50, 113, 153, 0.2); border-radius: 8px; background: #fff; box-shadow: 0 24px 64px rgba(20, 54, 79, 0.24); }
.form-template-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(76, 128, 164, 0.16); }
.form-template-modal-head h2 { margin: 0; color: #183e5b; font-size: 21px; }
.form-template-modal-head p { max-width: 590px; margin: 8px 0 0; color: #6e8798; font-size: 13px; line-height: 1.65; }
.form-template-modal form { display: grid; gap: 18px; margin-top: 20px; }
.form-template-name-field { display: grid; gap: 7px; color: #456276; font-size: 13px; font-weight: 700; }
.form-template-name-field input { min-height: 40px; box-sizing: border-box; width: 100%; padding: 8px 11px; border: 1px solid rgba(51, 111, 150, 0.27); border-radius: 6px; outline: none; color: #183e5b; font: inherit; }
.form-template-name-field input:focus { border-color: #2584be; box-shadow: 0 0 0 3px rgba(37, 132, 190, 0.12); }
.form-template-field { padding: 15px; border: 1px solid rgba(65, 124, 161, 0.16); border-radius: 8px; background: #fbfdfe; }
.form-template-field-title { margin-bottom: 10px; }
.form-template-field-title h3 { font-size: 14px; }
.form-template-field-title span { color: #718a9d; font-size: 12px; }
.form-template-field-help { margin: 0 0 10px; color: #748d9f; font-size: 12px; line-height: 1.6; }
.form-template-checkbox-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.form-template-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; align-items: start; min-height: 38px; padding: 9px 10px; border: 1px solid rgba(73, 131, 167, 0.18); border-radius: 6px; background: #fff; color: #36576d; cursor: pointer; }
.form-template-option:hover { border-color: rgba(44, 127, 182, 0.38); background: #f5fbfe; }
.form-template-option input { width: 15px; height: 15px; margin: 2px 0 0; accent-color: #2183bd; }
.form-template-option span { min-width: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.form-template-option small { grid-column: 2; margin-top: 2px; color: #8196a5; font-size: 11px; line-height: 1.4; }
.form-template-empty { margin: 0; color: #8498a7; font-size: 13px; line-height: 1.6; }
.form-template-dialog-actions { justify-content: flex-end; padding-top: 2px; }

@media (max-width: 860px) {
  .form-template-details { grid-template-columns: 1fr; }
  .form-template-checkbox-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form-template-modal-backdrop { align-items: end; padding: 12px; }
  .form-template-modal { width: 100%; max-height: calc(100vh - 24px); padding: 20px; }
  .form-template-panel-head,
  .form-template-card-head { align-items: flex-start; flex-direction: column; }
  .form-template-card-actions { justify-content: flex-start; }
}