.demo-shell #main { min-width: 0; }
.demo-shell .workspace { min-width: 0; }
.demo-shell .demo-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.demo-filter-row > .field { flex: 1 1 180px; }
.demo-shell .report-filter-row > .field { flex: 1 1 180px; min-width: 0; }
.demo-shell .report-filter-row > .field input,
.demo-shell .report-filter-row > .field select { width: 100%; }
.demo-shell .demo-form { max-width: 1000px; }
.demo-form .field, .demo-financial-form .field { margin-bottom: 14px; }
.demo-form .field label, .demo-financial-form .field label { display: block; margin-bottom: 6px; }
.demo-form .field input, .demo-form .field select,
.demo-financial-form .field input, .demo-financial-form .field select { width: 100%; min-height: 48px; }
.demo-form .field-grid, .demo-financial-form .field-grid { align-items: start; }
.demo-details { padding: 16px 0; }
.demo-details summary { cursor: pointer; font-weight: 700; margin-bottom: 14px; }
.demo-picker { min-width: 0; padding: 0; border: 0; }
.demo-picker legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.demo-picker input, .demo-picker select { width: 100%; min-height: 48px; margin-bottom: 6px; }
.demo-open-items { padding: 16px; margin: 16px 0; border: 1px solid #e4e1d3; border-radius: 14px; }
.demo-open-items legend { font-weight: 700; padding: 0 8px; }
.demo-open-items .checkbox-label { display: flex; margin: 8px 0; }
.demo-shell .demo-live-summary { margin-top: 18px; }
.demo-total { display: block; font-family: Fraunces, Georgia, serif; font-size: 26px; color: #1f5b3a; margin: 16px 0; overflow-wrap: anywhere; }
.demo-type { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 10px; background: #e3f1e7; color: #1b6b3a; }
.demo-type-purchase { background: #f3e3bb; color: #735013; }
.demo-type-payment_out, .demo-type-advance_out { background: #fbebd9; color: #a24a0e; }
.demo-type-screening { background: #e6ebef; color: #34444f; }
.demo-shell .demo-account-phone { font-size: 16px; margin: -10px 0 6px; }
.demo-identity { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 24px; }
.demo-shell .demo-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.demo-meta dt { font-size: 13px; color: #55665b; }
.demo-meta dd { font-weight: 700; margin: 6px 0; }
.demo-detail-total { margin: 24px 0; text-align: right; }
.demo-statement { border-top: 1px solid #e4e1d3; margin: 24px 0; padding-top: 16px; }
.demo-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.demo-settings .panel { min-width: 0; }
.demo-settings input[type=file] { padding: 10px; }
.demo-settings p { font-size: 14px; color: #55665b; margin-bottom: 16px; }
.demo-text-button { border: 0; background: none; color: #1f5b3a; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 6px 0; }
.demo-form-error { padding: 14px 0; }
.demo-date-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-dialog { width: min(540px,calc(100vw - 28px)); max-height: calc(100dvh - 40px); overflow: auto; margin: auto; padding: 26px; border: 1px solid #d8d4c2; border-radius: 20px; background: #fbfaf5; color: #14281d; }
.demo-dialog::backdrop { background: #12301f80; }
.demo-dialog .dialog-heading { justify-content: space-between; gap: 12px; align-items: start; }
.demo-dialog h2 { font: 600 26px Fraunces, Georgia, serif; margin-bottom: 16px; }
.demo-dialog .demo-actions { display: flex; justify-content: end; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.demo-dialog .field input { width: 100%; }
.demo-dialog .demo-choice-grid { display: grid; gap: 10px; }
.demo-dialog .demo-choice-grid .button { justify-content: start; }
.demo-dialog .demo-warning { padding: 14px; border-radius: 12px; margin: 18px 0; background: #fbebd9; color: #7d3d0b; }
.demo-dialog .checkbox-label { display: flex; gap: 10px; }
.demo-dialog input[type=checkbox] { flex: none; }
.demo-dialog .button[hidden], .demo-shell [hidden] { display: none; }
.demo-login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: #12301f; }
.demo-login .login-wrap { width: min(480px,100%); }
.demo-login-logo { width: 150px; height: 150px; object-fit: contain; margin: 0 auto 18px; background: radial-gradient(ellipse,#ffffffeb,transparent 70%); }
.demo-login h1 { font: 600 32px Fraunces, Georgia, serif; margin: 8px 0; }
.demo-login .login-card { padding: 26px; }
.demo-login .login-card > p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; color: #55665b; }
.demo-login .field { margin-bottom: 16px; }
.demo-login .field > label { display: block; margin-bottom: 6px; }
.demo-login .field > input { width: 100%; min-height: 48px; }
.demo-login form > .button { width: 100%; margin-bottom: 10px; }
.demo-login .login-footer { color: #dce8df; margin-top: 20px; }
.demo-login .login-footer a { color: inherit; }
.demo-loading { padding: 40px; font-size: 20px; }
@media (max-width: 800px) {
    .demo-shell .demo-settings { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .demo-shell .demo-actions .button { flex: 1 1 auto; }
    .demo-dialog { padding: 20px; }
}