.system-demo,
.system-demo-dialog {
    --sd-bg: #f5f5fc;
    --sd-surface: #fff;
    --sd-text: #17233d;
    --sd-muted: #748099;
    --sd-line: #e5e7f1;
    --sd-primary: #4f46e5;
    --sd-primary-2: #7c3aed;
    --sd-soft: #efedff;
    color: var(--sd-text);
    font-family: "Cairo", sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color-scheme: light;
    text-align: start;
}

.system-demo { width: 100%; max-width: 100%; margin-top: 32px; overflow: hidden; border: 1px solid #d8dcea; border-radius: 14px; background: var(--sd-surface); box-shadow: 0 16px 50px #173b461a; }
:is(.system-demo, .system-demo-dialog) *,
:is(.system-demo, .system-demo-dialog) *::before,
:is(.system-demo, .system-demo-dialog) *::after { box-sizing: border-box; }
:is(.system-demo, .system-demo-dialog) [hidden] { display: none !important; }
:is(.system-demo, .system-demo-dialog) h3,
:is(.system-demo, .system-demo-dialog) h4,
:is(.system-demo, .system-demo-dialog) p,
:is(.system-demo, .system-demo-dialog) button,
:is(.system-demo, .system-demo-dialog) label { overflow-wrap: anywhere; }
.system-demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border-bottom: 1px solid var(--sd-line); background: #fff; }
.system-demo-toolbar > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.system-demo-toolbar strong { color: var(--sd-text); font-size: 13px; font-weight: 700; }
.system-demo-toolbar small { color: var(--sd-muted); font-size: 11px; }
.system-demo-notice { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--sd-line); background: #fafaff; color: #707d96; font-size: 10px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) button { font-family: inherit; }
:is(.system-demo, .system-demo-dialog) .sd-button,
.system-demo-toolbar button,
.system-demo-dialog-header button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; max-width: 100%; padding: 6px 11px; border: 1px solid #d1d5e5; border-radius: 9px; background: #fff; color: #536178; font-size: 12px; font-weight: 600; line-height: 1.6; text-decoration: none; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-button:hover,
.system-demo-toolbar button:hover,
.system-demo-dialog-header button:hover { border-color: #bcb8f4; background: #f7f6ff; color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-button.is-primary { border-color: var(--sd-primary); background: linear-gradient(120deg, var(--sd-primary), var(--sd-primary-2)); color: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-button.is-primary:hover { border-color: #4438cf; background: #5142d8; color: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-button.is-small { min-height: 29px; padding: 4px 8px; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) button:disabled { cursor: default; opacity: .6; }
:is(.system-demo, .system-demo-dialog) button:focus-visible,
:is(.system-demo, .system-demo-dialog) summary:focus-visible,
:is(.system-demo, .system-demo-dialog) a:focus-visible,
:is(.system-demo, .system-demo-dialog) input:focus-visible,
:is(.system-demo, .system-demo-dialog) select:focus-visible,
:is(.system-demo, .system-demo-dialog) textarea:focus-visible { outline: 2px solid var(--sd-primary); outline-offset: 2px; }
.system-demo-shell { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); height: 620px; max-height: 75vh; min-height: 400px; overflow: hidden; background: radial-gradient(ellipse at top right, #e9e7ff88, transparent 55%), var(--sd-bg); }
.system-demo-sidebar { min-width: 0; min-height: 0; padding: 17px 10px; overflow: auto; overscroll-behavior: contain; border-inline-end: 1px solid var(--sd-line); background: #ffffffed; scrollbar-width: thin; }
.system-demo-brand { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0 9px; margin-bottom: 20px; padding-inline: 7px; }
.system-demo-brand > img,
.system-demo-brand > svg { grid-row: 1 / 3; width: 34px; height: 34px; }
.system-demo-brand > .bi { display: flex; grid-row: 1 / 3; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(130deg, #16b9ad, #087484); color: #fff; font-size: 22px; }
.system-demo-brand > div { min-width: 0; }
.system-demo-brand strong { display: block; color: #d85f2f; font-size: 16px; font-weight: 800; line-height: 1.5; }
.system-demo-brand small,
.system-demo-brand > span { display: block; color: var(--sd-muted); font-size: 9px; line-height: 1.7; }
.system-demo-nav { display: grid; gap: 6px; }
.system-demo-nav details { min-width: 0; }
.system-demo-nav summary { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px; border-radius: 9px; color: #4b5873; font-size: 11px; font-weight: 600; line-height: 1.7; cursor: pointer; list-style: none; }
.system-demo-nav summary::-webkit-details-marker { display: none; }
.system-demo-nav summary::after { flex: 0 0 6px; width: 6px; height: 6px; margin-inline-start: auto; margin-inline-end: 2px; border-inline-end: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); content: ""; }
.system-demo-nav details[open] > summary::after { transform: rotate(225deg); }
.system-demo-nav summary:hover { background: #f6f5ff; }
.system-demo-nav details > div { display: grid; gap: 3px; margin-block: 3px 7px; padding-inline-start: 8px; border-inline-start: 2px solid #f0edff; }
:is(.system-demo, .system-demo-dialog) .system-demo-nav-link { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: #697892; font-size: 11px; font-weight: 500; line-height: 1.7; text-align: start; white-space: normal; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .system-demo-nav-link > .bi { flex: 0 0 16px; width: 16px; color: currentColor; font-size: 15px; text-align: center; }
:is(.system-demo, .system-demo-dialog) .system-demo-nav-link:hover { background: #f4f2ff; color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .system-demo-nav-link[aria-current="page"] { background: #eae7ff; color: var(--sd-primary); font-weight: 700; }
.system-demo-workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.system-demo-topbar { display: flex; flex: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; min-height: 58px; margin: 12px 14px 0; padding: 10px 14px; border: 1px solid #e7e8f4; border-radius: 15px; background: #ffffffed; color: var(--sd-muted); font-size: 11px; }
.system-demo-topbar > div { min-width: 0; }
.system-demo-topbar strong { display: block; color: var(--sd-text); font-size: 13px; font-weight: 700; }
.system-demo-topbar .bi { color: var(--sd-primary); }
.system-demo-quick-search { display: flex; flex: 1 1 150px; align-items: center; gap: 7px; min-width: 100px; max-width: 230px; margin: 0; padding: 6px 10px; border: 1px solid var(--sd-line); border-radius: 18px; background: #fff; }
.system-demo-quick-search input { width: 100%; min-width: 0; min-height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--sd-text); font: inherit; font-size: 11px; }
.system-demo-quick-search input::placeholder { color: #8c96ab; opacity: 1; }
.system-demo-user { display: inline-flex; align-items: center; gap: 6px; color: #65718a; font-size: 10px; }
.system-demo-user > .bi { font-size: 22px; }
.system-demo-content { flex: 1; min-width: 0; min-height: 0; padding: 18px 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:is(.system-demo, .system-demo-dialog) .sd-page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
:is(.system-demo, .system-demo-dialog) .sd-page-heading > div { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-page-heading h3 { margin: 0; color: var(--sd-text); font-size: 19px; font-weight: 700; line-height: 1.6; }
:is(.system-demo, .system-demo-dialog) .sd-page-heading p { margin: 3px 0 0; color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-muted { color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
:is(.system-demo, .system-demo-dialog) .sd-stats > article { min-width: 0; padding: 13px 14px; border: 1px solid var(--sd-line); border-radius: 14px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-stats > article > .bi { display: inline-block; margin-bottom: 6px; color: var(--sd-primary); font-size: 17px; }
:is(.system-demo, .system-demo-dialog) .sd-stats h4 { margin: 0; color: var(--sd-muted); font-size: 11px; font-weight: 500; }
:is(.system-demo, .system-demo-dialog) .sd-stats > article > span { display: block; color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-stat-value { display: block; margin-top: 3px; color: var(--sd-text); font-size: 23px; font-weight: 700; line-height: 1.5; }
:is(.system-demo, .system-demo-dialog) .sd-card { min-width: 0; margin-bottom: 14px; padding: 16px; border: 1px solid var(--sd-line); border-radius: 16px; background: #fff; box-shadow: 0 4px 12px #4f46e506; }
:is(.system-demo, .system-demo-dialog) .sd-card h4 { margin: 0 0 12px; color: #27344b; font-size: 14px; font-weight: 700; line-height: 1.7; }
:is(.system-demo, .system-demo-dialog) .sd-card p { margin: 6px 0; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-card > .sd-button { margin-block: 4px; margin-inline-end: 5px; }
:is(.system-demo, .system-demo-dialog) .sd-card > label { display: grid; gap: 5px; margin-block: 10px; color: #45516c; font-size: 12px; font-weight: 600; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row > input { flex: 1 1 180px; min-width: 100px; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row > select { flex: 0 1 150px; min-width: 110px; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row > label { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row input,
:is(.system-demo, .system-demo-dialog) .sd-filter-row select,
:is(.system-demo, .system-demo-dialog) .sd-card > select,
:is(.system-demo, .system-demo-dialog) .sd-card > label > input:not([type="checkbox"]):not([type="radio"]),
:is(.system-demo, .system-demo-dialog) .sd-card > label > textarea,
:is(.system-demo, .system-demo-dialog) .sd-form-grid input:not([type="checkbox"]):not([type="radio"]),
:is(.system-demo, .system-demo-dialog) .sd-form-grid select,
:is(.system-demo, .system-demo-dialog) .sd-form-grid textarea { width: 100%; min-height: 35px; max-width: 100%; padding: 7px 10px; border: 1px solid #dce0ed; border-radius: 10px; background: #fff; color: var(--sd-text); font: inherit; font-size: 12px; line-height: 1.6; }
:is(.system-demo, .system-demo-dialog) .sd-form-grid input[type="checkbox"],
:is(.system-demo, .system-demo-dialog) .sd-form-grid input[type="radio"] { width: 16px; height: 16px; accent-color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-form-grid textarea { min-height: 85px; resize: vertical; }
:is(.system-demo, .system-demo-dialog) .sd-card > select { width: auto; max-width: 100%; min-width: 150px; margin-block: 3px 8px; }
:is(.system-demo, .system-demo-dialog) .sd-card > label > textarea { min-height: 78px; resize: vertical; }
:is(.system-demo, .system-demo-dialog) .sd-form-grid + .sd-row-actions,
:is(.system-demo, .system-demo-dialog) .sd-form-grid + .sd-button { margin-top: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-grid-wrap { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
:is(.system-demo, .system-demo-dialog) .sd-grid { width: 100%; min-width: 530px; margin: 0; border-collapse: collapse; color: #34415d; font-size: 12px; text-align: start; }
:is(.system-demo, .system-demo-dialog) .sd-grid th { padding: 10px 8px; border-bottom: 1px solid #dfe3f0; background: #f7f7fc; color: #64708a; font-size: 11px; font-weight: 600; white-space: nowrap; }
:is(.system-demo, .system-demo-dialog) .sd-grid td { padding: 11px 8px; border-bottom: 1px solid #edf0f6; vertical-align: middle; }
:is(.system-demo, .system-demo-dialog) .sd-grid tbody tr:last-child td { border-bottom: 0; }
:is(.system-demo, .system-demo-dialog) .sd-grid tbody tr:hover td { background: #fbfaff; }
:is(.system-demo, .system-demo-dialog) .sd-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: #f0f2f7; color: #5a6880; font-size: 10px; font-weight: 600; line-height: 1.8; white-space: normal; }
:is(.system-demo, .system-demo-dialog) .sd-pill.is-success { background: #e5f7ed; color: #236347; }
:is(.system-demo, .system-demo-dialog) .sd-pill.is-warning { background: #fff3d8; color: #80590f; }
:is(.system-demo, .system-demo-dialog) .sd-pill.is-info { background: #edebff; color: #5148bb; }
:is(.system-demo, .system-demo-dialog) .sd-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
:is(.system-demo, .system-demo-dialog) .sd-grid td.sd-row-actions { display: table-cell; white-space: nowrap; }
:is(.system-demo, .system-demo-dialog) .sd-grid td.sd-row-actions > .sd-button + .sd-button { margin-inline-start: 5px; }
:is(.system-demo, .system-demo-dialog) .sd-pagination { justify-content: flex-end; margin-block: 14px 0; }
:is(.system-demo, .system-demo-dialog) .sd-pagination > span { margin-inline-end: auto; }
:is(.system-demo, .system-demo-dialog) .sd-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--sd-line); }
:is(.system-demo, .system-demo-dialog) .sd-tabs button { min-height: 34px; padding: 7px 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #79849a; font-size: 12px; font-weight: 600; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-tabs button[aria-selected="true"] { border-bottom-color: var(--sd-primary); background: #f5f3ff; color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
:is(.system-demo, .system-demo-dialog) .sd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-form-grid label { display: grid; gap: 5px; min-width: 0; color: #45516c; font-size: 12px; font-weight: 600; }
:is(.system-demo, .system-demo-dialog) .sd-field-wide { grid-column: 1 / -1; }
:is(.system-demo, .system-demo-dialog) .sd-calendar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-calendar > .sd-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 13px; border-block-start: 3px solid #9a8af0; }
:is(.system-demo, .system-demo-dialog) .sd-calendar h4 { margin-bottom: 4px; color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-calendar p { margin: 0; color: var(--sd-muted); }
:is(.system-demo, .system-demo-dialog) .sd-calendar .sd-button { margin-top: auto; }
:is(.system-demo, .system-demo-dialog) .sd-record-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
:is(.system-demo, .system-demo-dialog) .sd-record-details > div { min-width: 0; padding: 10px 12px; border: 1px solid #ececf5; border-radius: 10px; background: #fafaff; }
:is(.system-demo, .system-demo-dialog) .sd-record-details dt { margin-bottom: 4px; color: var(--sd-muted); font-size: 11px; font-weight: 500; }
:is(.system-demo, .system-demo-dialog) .sd-record-details dd { margin: 0; color: var(--sd-text); font-size: 12px; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-visit-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
:is(.system-demo, .system-demo-dialog) .sd-visit-steps > li { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-visit-steps .sd-button { width: 100%; min-height: 36px; padding: 7px 9px; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-teeth { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 14px 0; padding: 12px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fafaff; direction: ltr; }
:is(.system-demo, .system-demo-dialog) .sd-teeth .sd-button { min-width: 30px; min-height: 39px; padding: 6px; border-radius: 9px 9px 13px 13px; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-teeth .sd-button[aria-pressed="true"] { box-shadow: 0 0 0 2px #c9c1ff; }
:is(.system-demo, .system-demo-dialog) .sd-timeline { display: grid; gap: 15px; margin: 0; padding: 0 16px; border-inline-start: 2px solid #dfdafb; list-style: none; }
:is(.system-demo, .system-demo-dialog) .sd-timeline > li { position: relative; min-width: 0; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-timeline > li::before { position: absolute; inset-inline-start: -21px; top: 7px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--sd-primary); content: ""; }
:is(.system-demo, .system-demo-dialog) .sd-timeline strong { display: block; color: var(--sd-text); font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-timeline p { margin: 3px 0 0; color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) div.sd-timeline { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 9px; background: #faf9ff; }
:is(.system-demo, .system-demo-dialog) .sd-timeline > label { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: 7px; color: #45516c; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-timeline input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; margin: 10px 0 20px; padding: 14px 9px 0; border-bottom: 1px solid var(--sd-line); background: repeating-linear-gradient(to top, transparent 0, transparent 39px, #f2f2f8 39px, #f2f2f8 40px); }
:is(.system-demo, .system-demo-dialog) .sd-chart > div { position: relative; flex: 1; height: var(--bar-height, 50%); min-height: 4px; border-radius: 5px 5px 0 0; background: linear-gradient(0deg, #7c3aed, #8580f1); }
:is(.system-demo, .system-demo-dialog) .sd-chart > div > span { position: absolute; inset-inline: 0; bottom: -23px; color: var(--sd-muted); font-size: 10px; text-align: center; }
:is(.system-demo, .system-demo-dialog) .sd-chart > div > strong { display: block; padding-top: 5px; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
:is(.system-demo, .system-demo-dialog) .sd-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #eeedf8; }
:is(.system-demo, .system-demo-dialog) .sd-progress > span,
:is(.system-demo, .system-demo-dialog) .sd-progress > div { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f46e5, #7c3aed); }
:is(.system-demo, .system-demo-dialog) .sd-notice { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid #e7dcbb; border-radius: 10px; background: #fff9e9; color: #79612a; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-empty { padding: 30px 16px; color: var(--sd-muted); font-size: 13px; text-align: center; }
:is(.system-demo, .system-demo-dialog) .sd-assistant-answer { margin-top: 12px; padding: 14px; border: 1px solid #dfdafa; border-radius: 13px; background: #f7f5ff; color: #48536f; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-card .sd-message { width: fit-content; max-width: 90%; margin-block: 9px; margin-inline-end: auto; padding: 9px 12px; border: 1px solid #e3e2f0; border-radius: 12px 12px 12px 3px; background: #f3f2fa; color: #4c5670; font-size: 12px; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-card .sd-message.is-outbound { margin-inline-start: auto; margin-inline-end: 0; border-color: #d4cffa; border-radius: 12px 12px 3px 12px; background: #e9e5ff; color: #4e429c; }
:is(.system-demo, .system-demo-dialog) .sd-video-room { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 205px; margin-bottom: 14px; padding: 24px 16px; border-radius: 13px; background: linear-gradient(130deg, #17223a, #293255); color: #eef0ff; text-align: center; }
:is(.system-demo, .system-demo-dialog) .sd-video-room > .bi { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 10px; border: 1px solid #ffffff30; border-radius: 18px; background: #ffffff0e; color: #c6baff; font-size: 28px; }
:is(.system-demo, .system-demo-dialog) .sd-video-room > strong { color: #fff; font-size: 14px; }
:is(.system-demo, .system-demo-dialog) .sd-video-room > p { max-width: 320px; margin: 7px 0 0; color: #bdc6dc; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid > * { min-width: 0; padding: 12px; border: 1px solid var(--sd-line); border-radius: 11px; background: #fff; color: var(--sd-text); font: inherit; font-size: 12px; text-align: start; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid > button { cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid > button:hover { border-color: #bbb4f2; background: #f8f6ff; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid .bi { display: inline-block; margin-inline-end: 7px; color: var(--sd-primary); font-size: 18px; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid strong { color: var(--sd-text); font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-tile-grid > * > span { display: block; margin-top: 5px; color: var(--sd-muted); font-size: 10px; line-height: 1.8; }
.system-demo-status { flex: none; min-height: 35px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--sd-line); background: #fff; color: #72809a; font-size: 11px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) .system-demo-menu-toggle { display: none; }
:is(.system-demo, .system-demo-dialog) .system-demo-sidebar-close { display: none; }
.system-demo-dialog { width: min(1320px, calc(100vw - 24px)); height: min(900px, calc(100vh - 24px)); height: min(900px, calc(100dvh - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 1px solid #d8dcea; border-radius: 14px; background: var(--sd-bg); }
.system-demo-dialog[open] { display: flex; flex-direction: column; }
.system-demo-dialog::backdrop { background: #0f172a99; }
.system-demo-dialog-header,
.system-demo-dialog > header { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--sd-line); background: #fff; }
.system-demo-dialog-header h2,
.system-demo-dialog > header > strong { min-width: 0; margin: 0; color: var(--sd-text); font-size: 16px; font-weight: 600; line-height: 1.6; }
.system-demo-dialog-body { flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.system-demo-dialog .system-demo-shell { height: 100%; max-height: none; min-height: 0; border: 0; border-radius: 0; }

@media (max-width: 980px) {
    .system-demo-shell { grid-template-columns: 175px minmax(0, 1fr); }
    :is(.system-demo, .system-demo-dialog) .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.system-demo, .system-demo-dialog) .sd-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.system-demo, .system-demo-dialog) .sd-calendar,
    :is(.system-demo, .system-demo-dialog) .sd-record-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .system-demo { margin-top: 24px; border-radius: 10px; }
    .system-demo-toolbar { gap: 8px; padding: 9px 11px; }
    .system-demo-toolbar strong { font-size: 12px; }
    .system-demo-toolbar button,
    .system-demo-dialog-header button { min-height: 40px; }
    .system-demo-shell { grid-template-columns: minmax(0, 1fr); height: 590px; max-height: 75vh; min-height: 400px; }
    .system-demo-sidebar { position: absolute; z-index: 3; inset-block: 0; inset-inline-start: 0; display: none; width: min(238px, calc(100% - 48px)); padding-block: 13px; box-shadow: 0 4px 20px #29245224; }
    .system-demo[data-sidebar-open="true"] .system-demo-sidebar,
    .system-demo-dialog[data-sidebar-open="true"] .system-demo-sidebar,
    .system-demo-shell[data-sidebar-open="true"] .system-demo-sidebar { display: block; }
    :is(.system-demo, .system-demo-dialog) .system-demo-sidebar-close { display: inline-flex; grid-column: 1 / -1; width: 100%; min-height: 36px; margin-top: 12px; padding: 6px 10px; font-size: 11px; }
    :is(.system-demo, .system-demo-dialog) .system-demo-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 6px 9px; border: 1px solid #d1d5e5; border-radius: 9px; background: #fff; color: var(--sd-primary); font-size: 17px; }
    .system-demo-topbar { gap: 5px 10px; margin: 9px 9px 0; padding: 9px 10px; border-radius: 12px; }
    .system-demo-topbar strong { font-size: 12px; }
    .system-demo-content { padding: 13px 11px; }
    :is(.system-demo, .system-demo-dialog) .sd-page-heading h3 { font-size: 17px; }
    :is(.system-demo, .system-demo-dialog) .sd-two-column,
    :is(.system-demo, .system-demo-dialog) .sd-form-grid,
    :is(.system-demo, .system-demo-dialog) .sd-calendar { grid-template-columns: minmax(0, 1fr); }
    :is(.system-demo, .system-demo-dialog) .sd-visit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :is(.system-demo, .system-demo-dialog) .sd-card { padding: 13px; border-radius: 13px; }
    :is(.system-demo, .system-demo-dialog) .sd-stats { gap: 8px; }
    :is(.system-demo, .system-demo-dialog) .sd-stats > article { padding: 11px; border-radius: 12px; }
    :is(.system-demo, .system-demo-dialog) .sd-stat-value { font-size: 21px; }
    :is(.system-demo, .system-demo-dialog) .sd-chart { height: 135px; }
    .system-demo-dialog { width: calc(100vw - 24px); height: calc(100vh - 12px); height: calc(100dvh - 12px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 12px); border-radius: 10px; }
    .system-demo-dialog .system-demo-shell { max-height: none; min-height: 0; }
    .system-demo-dialog-header,
    .system-demo-dialog > header { padding: 9px 11px; }
    .system-demo-dialog-header h2,
    .system-demo-dialog > header > strong { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .system-demo *,
    .system-demo *::before,
    .system-demo *::after,
    .system-demo-dialog *,
    .system-demo-dialog *::before,
    .system-demo-dialog *::after { scroll-behavior: auto; animation: none; transition: none; }
}

/* Clinical workflow preview: bounded calendars and the existing patient-workspace pattern. */
:is(.system-demo, .system-demo-dialog) .sd-feature-ribbon { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 13px; }
:is(.system-demo, .system-demo-dialog) .sd-feature-ribbon > * { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 4px 8px; border: 1px solid #e5e0fa; border-radius: 7px; background: #f5f2ff; color: #6a56ac; font-size: 10px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) .sd-workflow-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-workflow-heading h3 { margin: 0; color: var(--sd-text); font-size: 18px; line-height: 1.6; }
:is(.system-demo, .system-demo-dialog) .sd-workflow-heading h4 { margin: 0; font-size: 13px; }
:is(.system-demo, .system-demo-dialog) .sd-workflow-heading p { margin: 3px 0 0; color: #65718a; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-view-switch { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 3px; max-width: 100%; padding: 3px; border: 1px solid var(--sd-line); border-radius: 10px; background: #f4f3fb; }
:is(.system-demo, .system-demo-dialog) .sd-view-switch button { min-height: 31px; padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #647088; font-size: 11px; line-height: 1.7; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-view-switch button[aria-pressed="true"] { border-color: #e7e3f5; background: #fff; color: var(--sd-primary); font-weight: 700; box-shadow: 0 2px 4px #3a286508; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-scroll,
:is(.system-demo, .system-demo-dialog) .sd-scheduler-scroll { min-width: 0; max-width: 100%; margin-block: 10px; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--sd-line); border-radius: 11px; background: #fff; scrollbar-width: thin; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-grid { display: grid; grid-template-columns: 125px repeat(var(--sd-agenda-columns, 10), minmax(74px, 1fr)); width: 100%; min-width: 865px; align-items: stretch; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-time { display: grid; place-items: center; min-height: 37px; padding: 7px 5px; border-inline-end: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); background: #f7f7fc; color: #65718a; font-size: 10px; font-variant-numeric: tabular-nums; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-label { position: sticky; z-index: 2; inset-inline-start: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 10px; border-inline-end: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); background: #fff; color: #485570; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-label small { color: #647089; font-size: 9px; font-weight: 400; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; min-height: 83px; margin: 0; padding: 8px 6px; overflow: hidden; border: 0; border-inline-end: 1px solid #edecf4; border-bottom: 1px solid #edecf4; border-radius: 0; background: #fff; color: #77708c; font: inherit; font-size: 10px; line-height: 1.7; text-align: start; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot:not(:disabled):hover { background: #f7f5ff; color: var(--sd-primary); }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot.is-booked { border-inline-start: 3px solid #8b71e9; background: #eee9fc; color: #625089; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot.is-blocked { border-inline-start: 3px solid #dfb33e; background: #fff7df; color: #7d601c; cursor: default; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot.is-selected { position: relative; z-index: 1; outline: 2px solid #7e64d5; outline-offset: -3px; background: #e9e2ff; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot strong { display: block; max-width: 100%; color: inherit; font-size: 10px; line-height: 1.7; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot small { display: block; font-size: 9px; }
:is(.system-demo, .system-demo-dialog) .sd-agenda-slot:disabled { opacity: 1; }
:is(.system-demo, .system-demo-dialog) .sd-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 13px; margin: 9px 0; color: #65718a; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-legend > * { display: inline-flex; align-items: center; gap: 5px; }
:is(.system-demo, .system-demo-dialog) .sd-legend .bi { color: #9c85df; font-size: 9px; }
:is(.system-demo, .system-demo-dialog) .sd-booking-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 12px 0; padding: 0; }
:is(.system-demo, .system-demo-dialog) .sd-booking-steps button { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 43px; padding: 8px 9px; border: 1px solid #e6e5ef; border-radius: 9px; background: #fafaff; color: #63718b; font-size: 11px; text-align: start; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-step-number { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eeedf6; color: #63718b; font-size: 10px; font-weight: 700; }
:is(.system-demo, .system-demo-dialog) .sd-booking-steps button[aria-current="step"] { border-color: #d5cbfa; background: #f0eaff; color: #6e4dba; font-weight: 700; }
:is(.system-demo, .system-demo-dialog) .sd-booking-steps button[aria-current="step"] .sd-step-number { background: #7a55d5; color: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-booking-panel { min-width: 0; margin: 12px 0; padding: 15px; border: 1px solid var(--sd-line); border-radius: 13px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-booking-panel h4 { margin: 0 0 9px; color: #384760; font-size: 13px; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary { margin-block: 12px; padding: 12px; border: 1px solid #e5dff6; border-radius: 10px; background: #faf8ff; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary dl > div { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary dt { color: var(--sd-muted); font-size: 10px; font-weight: 500; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary dd { margin: 3px 0 0; color: #4d456b; font-size: 12px; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-scheduler-grid { display: grid; grid-template-columns: 100px repeat(2, minmax(180px, 1fr)); min-width: 460px; }
:is(.system-demo, .system-demo-dialog) .sd-resource-name { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 43px; padding: 8px 10px; border-inline-end: 1px solid var(--sd-line); border-bottom: 1px solid var(--sd-line); background: #f7f7fd; color: #5d6780; font-size: 11px; font-weight: 600; text-align: center; }
:is(.system-demo, .system-demo-dialog) .sd-slot-button { min-width: 0; min-height: 42px; padding: 7px 9px; border: 0; border-inline-end: 1px solid #ebe8f4; border-bottom: 1px solid #ebe8f4; background: #fff; color: #776195; font: inherit; font-size: 11px; line-height: 1.7; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-slot-button:hover { background: #f5f0ff; color: #7955b9; }
:is(.system-demo, .system-demo-dialog) .sd-slot-button[aria-pressed="true"] { background: #e8defb; color: #6941b0; font-weight: 700; box-shadow: inset 0 0 0 2px #ad91e2; }
:is(.system-demo, .system-demo-dialog) .sd-slot-button:disabled { background: #faf8f1; color: #b2a98d; cursor: default; opacity: 1; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list { display: grid; gap: 7px; margin-block: 9px; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list > button,
:is(.system-demo, .system-demo-dialog) .sd-choice-list > label { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 7px; min-width: 0; min-height: 39px; padding: 8px 11px; border: 1px solid #e5e1ef; border-radius: 9px; background: #fff; color: #59657f; font-size: 11px; text-align: start; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list > button:hover { background: #f9f6ff; border-color: #cbbce9; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list > button[aria-pressed="true"] { border-color: #ac91dd; background: #f1eafb; color: #7955b1; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 0; padding: 15px; border: 1px solid var(--sd-line); border-radius: 13px 13px 0 0; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-patient-avatar { display: grid; flex: none; place-items: center; width: 45px; height: 45px; border-radius: 13px; background: #eeebff; color: #8470cc; font-size: 24px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary > div { flex: 1; min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary h3 { margin: 0; color: #303b58; font-size: 18px; line-height: 1.6; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary p { margin: 3px 0 0; color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary > label { display: grid; flex: 0 1 245px; gap: 4px; min-width: 155px; margin: 0; color: var(--sd-muted); font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-summary select { width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid #e1deeb; border-radius: 9px; background: #fff; color: #647087; font: inherit; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-meta { display: flex; flex-wrap: wrap; gap: 5px 11px; color: #63718b; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-meta .bi { color: #9f8ac7; }
:is(.system-demo, .system-demo-dialog) .sd-safety-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--sd-line); border-top: 0; background: #fff; color: #8d6e6c; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-safety-strip > * { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; }
:is(.system-demo, .system-demo-dialog) .sd-safety-warning { background: #fff0f1; color: #9f4856; }
:is(.system-demo, .system-demo-dialog) .sd-safety-caution { background: #fff7e5; color: #7b622d; }
:is(.system-demo, .system-demo-dialog) .sd-patient-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: start; gap: 13px; margin-block: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-patient-layout > * { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-reference-card { margin-bottom: 11px; padding: 12px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-reference-card h4 { margin: 0 0 7px; color: #485570; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-reference-card p { margin: 5px 0; color: var(--sd-muted); font-size: 10px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) .sd-reference-card > .sd-button { width: 100%; margin-top: 7px; padding: 5px 7px; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-block: 12px; padding: 0; list-style: none; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-width: 0; min-height: 61px; padding: 8px 5px; border: 1px solid #e9e5ef; border-radius: 9px; background: #faf9fd; color: #756781; font-size: 10px; line-height: 1.6; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress .is-complete { border-color: #dcebe4; background: #f1faf5; color: #3e7a5c; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress .is-current { border-color: #ccbeed; background: #ede5fc; color: #825bb6; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress .bi { font-size: 15px; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid > * { min-width: 0; margin: 0; padding: 12px; border: 1px solid #e9e5f1; border-radius: 11px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid h4 { margin: 0 0 7px; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid p { margin: 4px 0 8px; color: var(--sd-muted); font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs { margin-block: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs details { margin-block: 7px; padding: 0 12px; border: 1px solid var(--sd-line); border-radius: 10px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs summary { padding-block: 10px; color: #6b5f86; font-size: 11px; font-weight: 600; cursor: pointer; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs details[open] { padding-bottom: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs details[open] > summary { margin-bottom: 5px; border-bottom: 1px solid #f0edf6; }
:is(.system-demo, .system-demo-dialog) .sd-record-tabs p { margin: 6px 0; color: var(--sd-muted); font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block: 10px; padding: 13px; border: 1px solid var(--sd-line); border-radius: 11px; background: #fff; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary h4 { margin: 0 0 4px; color: #526077; font-size: 13px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary p { margin: 0; color: var(--sd-muted); font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items { display: grid; gap: 7px; margin-block: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items > label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; padding: 11px; border: 1px solid #e8e4f0; border-radius: 10px; background: #fff; color: #647087; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items > label > div { flex: 1; min-width: 100px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: #8660bd; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items strong { display: block; color: #49566e; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items small { color: #63718b; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-progress { min-width: 110px; color: var(--sd-muted); font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-progress .sd-progress { margin-top: 6px; }
:is(.system-demo, .system-demo-dialog) .sd-finance-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-finance-summary > * { min-width: 0; padding: 12px; border: 1px solid var(--sd-line); border-radius: 11px; background: #fff; color: #68738b; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-finance-summary strong { display: block; margin-top: 4px; color: #6a6084; font-size: 20px; font-weight: 700; }
:is(.system-demo, .system-demo-dialog) .sd-file-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; padding: 10px 0; border-bottom: 1px solid #edeaf3; color: #6e7891; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-file-row > div { flex: 1; min-width: 100px; }
:is(.system-demo, .system-demo-dialog) .sd-file-row > .bi { display: grid; flex: none; place-items: center; width: 34px; height: 38px; border-radius: 8px; background: #f0ebfb; color: #9b81c9; font-size: 20px; }
:is(.system-demo, .system-demo-dialog) .sd-file-row strong { display: block; color: #626d85; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) .sd-file-row small { color: #65718a; font-size: 9px; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-bottom: 13px; padding: 9px 11px; border: 1px solid #d7c9ee; border-radius: 11px; background: #f4edfd; color: #8d6eaf; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar > div { flex: 1; min-width: 120px; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar strong { display: block; color: #6d4c94; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar p { margin: 1px 0 0; color: #745986; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar .sd-button { min-height: 30px; padding: 4px 8px; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-demo-spotlight { outline: 2px solid #baa0de; outline-offset: -2px; }
:is(.system-demo, .system-demo-dialog) .sd-filter-row > label { display: grid; gap: 3px; color: #65718a; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary > div { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary > div > span { display: block; color: #65718a; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-booking-summary > div > strong { display: block; margin-top: 3px; color: #4d456b; font-size: 12px; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) label.sd-choice-list { display: flex; align-items: flex-start; gap: 8px; color: #65718a; font-size: 11px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) label.sd-choice-list > input[type="checkbox"] { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: #8056bd; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list:is(ol, ul) { margin-block: 7px; padding: 0; color: #65718a; font-size: 11px; list-style: none; }
:is(.system-demo, .system-demo-dialog) .sd-choice-list > li { padding-block: 5px; border-bottom: 1px solid #f0edf5; }
:is(.system-demo, .system-demo-dialog) .sd-care-journey { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-visit-progress button[aria-current="step"] { border-color: #ccbeed; background: #ede5fc; color: #76509f; font-weight: 700; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid > div > .sd-muted { display: block; color: #65718a; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-care-grid > div > strong { display: block; margin-top: 4px; color: #526079; font-size: 12px; overflow-wrap: anywhere; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary > div { min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary > div > .sd-muted { display: block; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary > div > strong { display: block; color: #526079; font-size: 12px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-summary > div > .sd-button { margin-top: 6px; font-size: 11px; }
:is(.system-demo, .system-demo-dialog) progress.sd-plan-progress { display: block; width: 100%; height: 8px; margin: 10px 0; overflow: hidden; appearance: none; border: 0; border-radius: 99px; background: #eeedf8; color: #8f6cc4; }
:is(.system-demo, .system-demo-dialog) progress.sd-plan-progress::-webkit-progress-bar { border-radius: 99px; background: #eeedf8; }
:is(.system-demo, .system-demo-dialog) progress.sd-plan-progress::-webkit-progress-value { border-radius: 99px; background: #8f6cc4; }
:is(.system-demo, .system-demo-dialog) progress.sd-plan-progress::-moz-progress-bar { border-radius: 99px; background: #8f6cc4; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items > .sd-reference-card { margin: 0; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items .sd-care-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-block: 8px; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items .sd-care-grid > div { padding: 8px; border: 0; border-radius: 7px; background: #f8f6fc; }
:is(.system-demo, .system-demo-dialog) .sd-plan-items .sd-care-grid > div > strong { font-size: 11px; }
:is(.system-demo, .system-demo-dialog) [data-care-item-editor] .sd-choice-list { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px; border: 1px solid #ebe6f4; border-radius: 10px; background: #faf9fd; direction: ltr; }
:is(.system-demo, .system-demo-dialog) [data-care-item-editor] .sd-choice-list > button { justify-content: center; min-width: 30px; min-height: 38px; padding: 5px; border-radius: 8px 8px 12px 12px; font-size: 10px; }
:is(.system-demo, .system-demo-dialog) [data-care-item-editor] .sd-choice-list > button[aria-pressed="true"] { border-color: #a98acd; background: #eae0f7; color: #735095; }
:is(.system-demo, .system-demo-dialog) .sd-form-grid :is(input, textarea, select):disabled { background: #f8f7fc; color: #65718a; opacity: 1; }
:is(.system-demo, .system-demo-dialog) .sd-finance-summary > .sd-card { margin: 0; }
:is(.system-demo, .system-demo-dialog) .sd-finance-summary h4 { margin: 0; color: #65718a; font-size: 10px; line-height: 1.8; }
:is(.system-demo, .system-demo-dialog) .sd-file-row > strong { flex: 1 1 140px; min-width: 0; }
:is(.system-demo, .system-demo-dialog) .sd-tour-bar small { color: #745986; font-size: 10px; direction: ltr; unicode-bidi: isolate; }

@media (max-width: 980px) {
    :is(.system-demo, .system-demo-dialog) .sd-patient-layout { grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; }
    :is(.system-demo, .system-demo-dialog) .sd-visit-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    :is(.system-demo, .system-demo-dialog) .sd-patient-layout { grid-template-columns: minmax(0, 1fr); }
    :is(.system-demo, .system-demo-dialog) .sd-patient-layout > aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    :is(.system-demo, .system-demo-dialog) .sd-patient-layout > aside > * { margin: 0; }
    :is(.system-demo, .system-demo-dialog) .sd-patient-summary { gap: 9px; padding: 12px; }
    :is(.system-demo, .system-demo-dialog) .sd-patient-summary h3 { font-size: 16px; }
    :is(.system-demo, .system-demo-dialog) .sd-patient-summary > div { flex-basis: calc(100% - 60px); }
    :is(.system-demo, .system-demo-dialog) .sd-patient-summary > label { flex: 1 1 0; min-width: 105px; }
    :is(.system-demo, .system-demo-dialog) .sd-patient-summary > .sd-button { flex: none; max-width: 110px; min-height: 30px; margin: 0; padding: 5px 8px; font-size: 10px; }
    :is(.system-demo, .system-demo-dialog) .sd-booking-steps button { gap: 5px; padding: 7px 6px; font-size: 10px; }
    :is(.system-demo, .system-demo-dialog) .sd-step-number { width: 19px; height: 19px; font-size: 9px; }
    :is(.system-demo, .system-demo-dialog) .sd-booking-panel { padding: 12px; }
    :is(.system-demo, .system-demo-dialog) .sd-tour-bar { gap: 6px; padding: 9px; }
    :is(.system-demo, .system-demo-dialog) .sd-tour-bar > div { flex-basis: 100%; }
}

@media (max-width: 440px) {
    :is(.system-demo, .system-demo-dialog) .sd-care-grid,
    :is(.system-demo, .system-demo-dialog) .sd-patient-layout > aside { grid-template-columns: minmax(0, 1fr); }
    :is(.system-demo, .system-demo-dialog) .sd-finance-summary > * { padding: 9px 7px; font-size: 9px; }
    :is(.system-demo, .system-demo-dialog) .sd-finance-summary strong { font-size: 17px; }
}