.commerce { color: #243143; }
.commerce-header { padding: 0 0 22px; border-bottom: 1px solid #e2e7ed; margin-bottom: 24px; }
.commerce-header h1 { margin: 0; font-size: 27px; line-height: 1.25; font-weight: 600; letter-spacing: -.035em; color: #152238; }
.commerce-header p { margin: 9px 0 0; max-width: 650px; font-size: 14px; line-height: 1.65; color: #6b7685; }
.commerce-panel { background: #fff; border: 1px solid #e2e7ed; border-radius: 8px; padding: 22px; margin-bottom: 20px; }
.commerce-panel h2 { font-size: 16px; font-weight: 600; margin: 0 0 18px; }
.commerce-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.commerce-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 500; min-width: 0; }
.commerce-field input, .commerce-field select, .commerce-field textarea { border: 1px solid #d4dce5; border-radius: 5px; background: #fff; color: #243143; padding: 10px 12px; font-size: 14px; width: 100%; box-sizing: border-box; font-weight: 400; }
.commerce-field input:focus, .commerce-field select:focus, .commerce-field textarea:focus { outline: 2px solid #9dbce2; outline-offset: 2px; }
.commerce-field small, .commerce-help { color: #6b7685; font-size: 12px; font-weight: 400; line-height: 1.6; }
.commerce-wide { grid-column: 1 / -1; }
.commerce-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.commerce-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 16px; border: 1px solid #173e6b; border-radius: 5px; background: #173e6b; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.5; }
.commerce-button:hover { background: #102e51; }
.commerce-button:focus-visible, .commerce-link:focus-visible { outline: 2px solid #628fc6; outline-offset: 3px; }
.commerce-button.secondary { background: #fff; border-color: #d4dce5; color: #33465c; }
.commerce-button.secondary:hover { background: #f6f8fa; }
.commerce-link { color: #174a83; font-size: 13px; text-decoration: none; }
.commerce-link:hover { text-decoration: underline; }
.commerce-table-wrap { width: 100%; overflow-x: auto; border: 1px solid #e2e7ed; border-radius: 8px; background: #fff; }
.commerce-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.commerce-table th { padding: 12px 16px; background: #f7f9fb; border-bottom: 1px solid #e2e7ed; font-weight: 500; color: #6b7685; white-space: nowrap; }
.commerce-table td { padding: 15px 16px; border-bottom: 1px solid #edf0f3; vertical-align: middle; }
.commerce-table tr:last-child td { border-bottom: 0; }
.commerce-table .number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.commerce-empty { padding: 48px 20px; border: 1px dashed #d4dce5; border-radius: 8px; text-align: center; font-size: 14px; color: #6b7685; background: #fff; }
.commerce-empty strong { display: block; color: #34465b; margin-bottom: 7px; font-weight: 500; }
.commerce-notice { padding: 13px 16px; border-left: 3px solid #8ca1b9; background: #f2f5f8; color: #465a71; font-size: 13px; line-height: 1.6; margin-bottom: 18px; overflow-wrap: anywhere; }
.commerce-notice.success { border-color: #338165; background: #f0f8f4; color: #27634e; }
.commerce-notice.error { border-color: #b76a54; background: #fff6f2; color: #894c39; }
.commerce-status { font-size: 12px; color: #5c6b7c; white-space: nowrap; }
.commerce-status.paid { color: #276a51; }
.commerce-status.failed { color: #a25040; }
.commerce-meta { display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0; }
.commerce-meta dt { font-size: 12px; color: #718092; margin-bottom: 5px; }
.commerce-meta dd { margin: 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.commerce-amount { font-size: 32px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.commerce-list-save { margin-top: 16px; width: 100%; max-width: 420px; }
.commerce-list-save summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #d4dce5; border-radius: 5px; font-size: 13px; color: #34465b; cursor: pointer; background: #fff; }
.commerce-list-save summary::-webkit-details-marker { display: none; }
.commerce-list-save[open] summary { background: #f6f8fa; }
.commerce-list-save form { display: grid; gap: 12px; padding: 16px; border: 1px solid #e2e7ed; border-radius: 6px; margin-top: 8px; background: #fff; }
.commerce-inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.commerce-inline-form input { width: 88px; }
.commerce-inline-form .commerce-button { min-height: 34px; padding: 6px 10px; font-size: 12px; }
@media (max-width: 640px) { .commerce-header h1 { font-size: 23px; } .commerce-grid { grid-template-columns: minmax(0, 1fr); } .commerce-panel { padding: 17px; } .commerce-table th, .commerce-table td { padding: 12px; } .commerce-meta { gap: 18px 24px; } .commerce-amount { font-size: 28px; } }