.qcp-section { min-width: 0; }
.qcp-section *, .qcp-dialog * { box-sizing: border-box; }
.qcp-section [hidden], .qcp-dialog [hidden] { display: none !important; }
.qcp-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.qcp-heading h2 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 750; color: #20352a; }
.qcp-heading p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #7a867e; }
.qcp-section button, .qcp-dialog button, .qcp-dialog input, .qcp-dialog textarea { font-family: inherit; }
.qcp-add-button { flex: 0 0 auto; padding: 8px 13px; border: 1px solid #cbdad0; border-radius: 7px; background: #fff; color: #3b6950; font-size: 12px; line-height: 1.6; font-weight: 650; cursor: pointer; }
.qcp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.qcp-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid #e0e7e2; border-radius: 8px; background: #fbfcfb; }
.qcp-card-main { min-width: 0; }
.qcp-card h3 { margin: 0; color: #2a4133; font-size: 13px; line-height: 1.6; font-weight: 700; overflow-wrap: anywhere; }
.qcp-content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 3.2em; overflow: hidden; text-overflow: ellipsis; margin: 4px 0 0; color: #6d7c72; font-size: 11px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; word-break: break-word; user-select: text; }
.qcp-card-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; color: #8b958f; font-size: 10px; line-height: 1.6; }
.qcp-copy-count { min-width: 0; overflow-wrap: anywhere; }
.qcp-card-footer { min-width: 0; display: flex; align-items: center; justify-content: flex-end; }
.qcp-copy-status { min-width: 0; color: #4d795d; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.qcp-card-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; margin-left: auto; }
.qcp-edit-button { padding: 0; border: 0; background: transparent; color: #7b8c81; font-size: 11px; line-height: 1.7; cursor: pointer; }
.qcp-copy-button, .qcp-save-button { padding: 8px 12px; border: 1px solid #356b4e; border-radius: 6px; background: #356b4e; color: #fff; font-size: 12px; line-height: 1.6; font-weight: 650; cursor: pointer; }
.qcp-copy-button:hover, .qcp-save-button:hover { background: #28583e; }
.qcp-status-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; margin-top: 11px; }
.qcp-sync-status { margin: 0; color: #8b958f; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
.qcp-empty { grid-column: 1 / -1; margin: 0; padding: 22px 12px; border: 1px dashed #d9e3dc; border-radius: 8px; text-align: center; color: #8b958e; font-size: 12px; line-height: 1.8; }
.qcp-section .is-error, .qcp-dialog .is-error { color: #a25545; }
.qcp-section button:disabled, .qcp-dialog button:disabled { opacity: .5; cursor: default; }
.qcp-section :focus-visible, .qcp-dialog :focus-visible { outline: 2px solid #438463; outline-offset: 2px; }
.qcp-dialog { width: min(600px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 90vh; max-height: 90dvh; margin: auto; padding: 0; border: 1px solid #dce4de; border-radius: 12px; background: #fff; color: #263b2e; box-shadow: 0 22px 90px #162f272e; }
.qcp-dialog[open] { display: flex; flex-direction: column; }
.qcp-dialog::backdrop { background: #16282066; }
.qcp-dialog-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 21px 24px 17px; border-bottom: 1px solid #e6ece8; }
.qcp-dialog-header h2 { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 750; }
.qcp-dialog-header p { margin: 5px 0 0; color: #79877e; font-size: 12px; line-height: 1.7; }
.qcp-close { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: #f3f6f4; color: #627168; font-size: 24px; line-height: 1; cursor: pointer; }
.qcp-dialog-content { min-height: 0; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px 24px 24px; }
.qcp-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.qcp-field > span { color: #48604e; font-size: 12px; line-height: 1.6; font-weight: 650; }
.qcp-field input, .qcp-field textarea { display: block; min-width: 0; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid #d3dfd6; border-radius: 7px; background: #fff; color: #314437; font-size: 14px; line-height: 1.75; }
.qcp-field textarea { min-height: 190px; resize: vertical; }
.qcp-field small { color: #93a096; font-size: 11px; line-height: 1.7; }
.qcp-dialog-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 24px; border-top: 1px solid #e6ece8; background: #fbfcfb; }
.qcp-dialog-footer > p { min-width: 0; margin: 0; color: #6c8473; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.qcp-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; flex: 0 0 auto; gap: 7px; }
.qcp-secondary-button { padding: 8px 10px; border: 1px solid #cfdbd2; border-radius: 6px; background: #fff; color: #5f7466; font-size: 11px; line-height: 1.6; cursor: pointer; }
@media (max-width: 650px) {
  .qcp-cards { grid-template-columns: minmax(0, 1fr); }
  .qcp-card { gap: 12px; padding: 11px 12px; }
  .qcp-card-actions { flex-direction: column-reverse; align-items: stretch; gap: 5px; }
  .qcp-card-actions .qcp-edit-button { min-height: 25px; text-align: center; }
  .qcp-card-actions .qcp-copy-button { padding: 7px 10px; white-space: nowrap; }
  .qcp-dialog-header { padding: 18px 17px 15px; }.qcp-dialog-content { padding: 17px 17px 20px; }.qcp-dialog-footer { padding: 13px 17px; align-items: stretch; flex-direction: column; gap: 10px; }
  .qcp-field input, .qcp-field textarea { font-size: 16px; }
}
@media (max-width: 360px) {
  .qcp-heading { gap: 9px; }.qcp-heading h2 { font-size: 16px; }.qcp-heading p { font-size: 11px; }.qcp-add-button { padding: 7px 10px; font-size: 11px; }
  .qcp-card { padding: 10px 12px; }.qcp-card h3 { font-size: 13px; }.qcp-content { font-size: 11px; }
  .qcp-dialog { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }.qcp-dialog-header h2 { font-size: 16px; }
}