:root {
  --ink: #1e293b;
  --muted: #718096;
  --line: #e4e9f0;
  --canvas: #f4f7fb;
  --surface: #ffffff;
  --blue: #2879e8;
  --blue-soft: #eaf3ff;
  --mint: #15a678;
  --mint-soft: #e9f8f1;
  --orange: #ed8b2f;
  --orange-soft: #fff4e6;
  --red: #d95f59;
  --red-soft: #fff0ef;
  --shadow: 0 7px 24px rgba(28, 52, 84, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { min-height: 100vh; display: flex; }
.mobile-nav { display: none; }
.logged-out .sidebar, .logged-out .topbar { display: none; }
.logged-out .main-area { width: 100%; }
.logged-out .content { min-height: 100vh; max-width: none; display: grid; place-items: center; padding: 24px; }
.logged-out .auth-panel { width: min(390px, 100%); margin: 0; }
.sidebar { width: 236px; flex: 0 0 236px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 24px 14px 18px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }
.brand-mark { width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: 0 1px 5px rgba(15, 105, 139, .18); }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.brand strong { display: block; font-size: 16px; letter-spacing: .3px; }
.brand span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.clinic-switcher { margin: 0 7px 21px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; color: #42526b; font-size: 12px; display: flex; justify-content: space-between; }
.nav-list { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; background: transparent; color: #536176; text-align: left; padding: 10px 11px; border-radius: 8px; transition: .16s ease; }
.nav-item:hover { background: #f5f8fc; color: var(--blue); }
.nav-item.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.nav-icon { width: 18px; text-align: center; font-size: 16px; color: currentColor; }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 10px; font-size: 11px; }
.nav-badge[hidden] { display: none !important; }

.sidebar-bottom { margin-top: auto; display: grid; gap: 13px; }
.server-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; padding: 7px 11px; }
.status-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; }
.main-area { min-width: 0; flex: 1; }
.topbar { min-height: 78px; padding: 17px 30px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { color: #516079; font-size: 13px; font-weight: 600; }
.breadcrumb span { color: #b0bac8; margin: 0 6px; }
.topbar-date { color: var(--muted); font-size: 12px; margin-top: 6px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.icon-button, .help-button { width: 32px; height: 32px; background: #fff; border: 1px solid var(--line); border-radius: 7px; color: #6d7b90; }
.help-button { font-weight: 700; color: var(--blue); }
.user-chip { display: flex; align-items: center; gap: 8px; margin-left: 7px; padding-left: 14px; border-left: 1px solid var(--line); color: #58677d; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; color: var(--ink); }
.user-chip small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.avatar { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.avatar.owner { background: #d9edff; color: #2d73b5; }
.avatar.doctor { background: #dff4ed; color: #19805e; }
.avatar.nurse { background: #fff0d8; color: #b46a1e; }
.content { padding: 26px 30px 40px; max-width: 1600px; margin: 0 auto; }
.outpatient-mode { overflow: hidden; }
.outpatient-mode .content { height: calc(100vh - 78px); overflow: hidden; display: flex; flex-direction: column; }
.outpatient-mode #view { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.outpatient-mode #view > .page-heading, .outpatient-mode #view > .toolbar { flex: 0 0 auto; }
.outpatient-mode .split-layout { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.outpatient-mode .split-layout > .side-list, .outpatient-mode .split-layout > .form-panel { min-height: 0; overflow-y: auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.3px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.connection-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--muted); font-size: 11px; }
.connection-pill.connected { color: var(--mint); }
.heading-actions { display: flex; gap: 9px; }
.primary-button, .secondary-button, .ghost-button, .danger-button { min-height: 36px; padding: 0 15px; border-radius: 7px; font-weight: 600; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 4px 10px rgba(40, 121, 232, .18); }
.primary-button:hover { background: #196bd9; }
.secondary-button { background: var(--mint); color: #fff; }
.ghost-button { background: #fff; border: 1px solid var(--line); color: #536176; }
.danger-button { background: var(--red-soft); color: var(--red); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.metric-label { color: var(--muted); display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.metric-trend { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 15px; font-weight: 700; }
.metric-trend.up { color: #16835f; background: #e8f6f0; }
.metric-trend.down { color: #cf3c4f; background: #fdecef; }
.metric-trend.flat { color: #69778b; background: #eef1f5; }
.metric-value { font-size: 29px; line-height: 1; margin: 14px 0 10px; letter-spacing: -.7px; }
.metric-foot { font-size: 11px; color: var(--muted); }
.metric-foot b { color: var(--mint); font-weight: 600; }
.metric-accent { border-top: 3px solid var(--blue); }
.metric-accent.mint { border-top-color: var(--mint); }
.metric-accent.orange { border-top-color: var(--orange); }
.metric-accent.red { border-top-color: var(--red); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; margin-top: 18px; }
.grid-1-1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.panel-header { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 15px; }
.panel-header span { color: var(--muted); font-size: 12px; }
.panel-body { padding: 18px 19px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 580px; }
th, td { padding: 12px 16px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; font-weight: 600; background: #fafbfd; }
td { color: #3c4b62; font-size: 12px; }
tr:last-child td { border-bottom: 0; }
.inventory-pagination { min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pagination-summary { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.page-size-control { display: flex; align-items: center; gap: 6px; margin-right: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.page-size-control select { height: 32px; padding: 0 24px 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.page-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: #536176; background: #fff; font-size: 12px; }
.page-button:hover:not(:disabled) { border-color: #9fc8ff; color: var(--blue); background: var(--blue-soft); }
.page-button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.page-button:disabled { cursor: not-allowed; color: #b7c0ce; background: #f6f7f9; }
.page-nav { font-size: 17px; }
.pagination-ellipsis { width: 20px; text-align: center; color: var(--muted); }
.person-cell { display: flex; align-items: center; gap: 8px; }
.person-cell strong { font-weight: 600; color: var(--ink); }
.person-cell small { color: var(--muted); display: block; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11px; }
.tag.blue { color: var(--blue); background: var(--blue-soft); }
.tag.mint { color: #17845f; background: var(--mint-soft); }
.tag.orange { color: #b46a1e; background: var(--orange-soft); }
.tag.red { color: var(--red); background: var(--red-soft); }
.link-button { background: transparent; color: var(--blue); padding: 0; }
.patient-row-actions { display: inline-flex; align-items: center; gap: 18px; }
.patient-row-actions .link-button { padding: 4px 0; }
.queue-list { display: grid; gap: 10px; }
.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #edf0f4; border-radius: 8px; }
.queue-item.selected { border-color: #b9d7ff; background: #f5f9ff; }
.queue-meta { text-align: right; color: var(--muted); font-size: 11px; }
.queue-meta strong { display: block; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.progress-row { display: grid; gap: 7px; margin-bottom: 15px; }
.progress-label { display: flex; justify-content: space-between; color: #526177; font-size: 12px; }
.progress-track { height: 7px; border-radius: 5px; background: #eef1f5; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 5px; background: var(--blue); }
.progress-fill.mint { background: var(--mint); }
.progress-fill.orange { background: var(--orange); }
.activity-list { display: grid; gap: 14px; }
.activity { display: flex; gap: 10px; align-items: flex-start; }
.activity-mark { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 12px; }
.activity p { margin: 0; color: #46556c; font-size: 12px; line-height: 1.5; }
.activity time { display: block; color: #a0aaba; font-size: 10px; margin-top: 3px; }
.alert-list { display: grid; gap: 10px; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border-radius: 7px; background: #fffaf1; }
.alert.red-alert { background: #fff3f2; }
.alert strong { font-size: 12px; font-weight: 600; }
.alert small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-button { min-height: 108px; padding: 14px 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); transition: .16s ease; }
.quick-button:hover { border-color: #a9cef9; background: #f8fbff; transform: translateY(-1px); }
.quick-button b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 16px; }
.quick-button span { display: block; margin-top: 13px; font-size: 12px; font-weight: 700; }
.quick-button small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.mobile-dashboard { display: none; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.toolbar-left, .toolbar-right { display: flex; gap: 9px; align-items: center; }
.appointment-date { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 11px; }
.appointment-date input { border: 0; outline: none; color: var(--ink); background: transparent; font: inherit; }
.schedule-list { display: grid; gap: 8px; }
.schedule-row { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) 76px; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 7px; }
.schedule-row input { width: 16px; height: 16px; accent-color: var(--blue); }
.schedule-row select { min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.schedule-person strong, .schedule-person small { display: block; }
.schedule-person strong { font-size: 12px; }
.schedule-person small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.schedule-save { width: 100%; margin-top: 12px; }
.search-box, .select-box { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #66748a; outline: none; }
.search-box { min-width: 245px; }
.search-box:focus { border-color: #9fc8ff; }
.split-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 620px; }
.side-list { padding: 12px; }
.side-list-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 12px; color: var(--muted); font-size: 12px; }
.side-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 9px; border-radius: 8px; cursor: pointer; }
.side-row:hover, .side-row.selected { background: var(--blue-soft); }
.side-row strong { display: block; font-size: 12px; }
.side-row small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.side-row time { color: var(--muted); font-size: 10px; }
.side-row-delete { width: 24px; height: 24px; margin-top: 5px; padding: 0; border-radius: 5px; color: var(--red); background: transparent; font-size: 16px; line-height: 1; }
.side-row-delete:hover { background: var(--red-soft); }
.delete-pending-patient-note { margin: 0; color: #4e5c70; line-height: 1.7; }
.form-panel { padding: 20px; }
.patient-banner { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.patient-main { display: flex; align-items: center; gap: 12px; }
.patient-main h2 { font-size: 17px; margin: 0 0 5px; }
.patient-main p { margin: 0; color: var(--muted); font-size: 11px; }
.patient-actions { display: flex; gap: 8px; }
.form-section { padding-top: 17px; }
.form-section h3 { margin: 0 0 11px; font-size: 13px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h3 { margin: 0; }
.section-heading-actions { display: flex; align-items: center; gap: 8px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 11px; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; color: var(--ink); background: #fff; outline: none; }
.field textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #9fc8ff; }
.patient-name-field { position: relative; }
.patient-name-lookup { position: absolute; z-index: 2; top: calc(100% - 1px); right: 0; left: 0; overflow: auto; max-height: 224px; border: 1px solid #b9d6f7; border-radius: 7px; background: #fff; box-shadow: 0 9px 20px rgba(32, 74, 119, .16); }
.patient-name-option { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 0; color: var(--ink); background: #fff; text-align: left; }
.patient-name-option + .patient-name-option { border-top: 1px solid var(--line); }
.patient-name-option:hover, .patient-name-option:focus { background: var(--blue-soft); outline: none; }
.patient-name-option span { min-width: 0; }
.patient-name-option strong, .patient-name-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-name-option strong { font-size: 12px; }
.patient-name-option small, .patient-name-option > span:last-child { color: var(--muted); font-size: 10px; }
.patient-name-option > span:last-child { flex: 0 1 42%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.prescription-editor { display: grid; gap: 12px; margin-top: 14px; }
.prescription-card, .order-note-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.prescription-card-header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.prescription-card-title, .prescription-card-actions, .order-shortcuts { display: flex; align-items: center; gap: 7px; }
.prescription-card-title { min-width: 0; }
.prescription-card-title strong { font-size: 13px; white-space: nowrap; }
.prescription-card-head-side { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.prescription-card-amount { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.prescription-card-amount span { color: var(--muted); font-size: 10px; }
.prescription-card-amount strong { color: var(--orange); font-size: 16px; }
.prescription-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #2d9aef; background: #e6f4ff; font-size: 12px; }
.prescription-icon.infusion { color: #19af9d; background: #e5fbf7; }
.prescription-icon.herbal { color: #b77b33; background: #fff3e2; }
.prescription-icon.external { color: #d25c78; background: #fff0f4; }
.related-link { color: var(--blue); font-size: 11px; }
.order-shortcuts { flex-wrap: wrap; justify-content: flex-end; }
.order-chip { min-height: 27px; padding: 0 9px; border: 1px solid #dbe2ec; border-radius: 6px; color: #5a6b82; background: #fff; font-size: 11px; }
.order-chip:hover, .order-chip.active { color: var(--blue); border-color: #b8d7fb; background: #f1f7ff; }
.icon-action { width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #738197; background: transparent; font-size: 14px; }
.icon-action:hover { color: var(--blue); background: var(--blue-soft); }
.icon-action.danger:hover { color: var(--red); background: var(--red-soft); }
.prescription-summary { padding: 8px 12px; color: var(--muted); font-size: 11px; }
.prescription-grid, .prescription-row { display: grid; align-items: center; gap: 8px; padding: 8px 12px; }
.prescription-grid-western, .prescription-row-western { grid-template-columns: minmax(120px, 1.4fr) minmax(72px, .8fr) minmax(82px, .9fr) minmax(78px, .8fr) 52px 72px minmax(100px, 1fr) 52px 58px 66px 28px; }
.prescription-grid-western-no-skin, .prescription-row-western-no-skin { grid-template-columns: minmax(120px, 1.4fr) minmax(72px, .8fr) minmax(82px, .9fr) minmax(78px, .8fr) 52px minmax(100px, 1fr) 52px 58px 66px 28px; }
.prescription-grid-external, .prescription-row-external { grid-template-columns: minmax(125px, 1.3fr) minmax(76px, .8fr) minmax(82px, .85fr) minmax(100px, 1fr) minmax(78px, .8fr) minmax(72px, .7fr) 52px 50px minmax(100px, 1fr) 58px 66px 28px; }
.prescription-card-infusion { border-color: #cfe9e4; }
.prescription-card-infusion .prescription-card-header { background: #f4fbf9; }
.prescription-grid-infusion, .prescription-row-infusion { grid-template-columns: minmax(145px, 1.45fr) minmax(92px, .85fr) minmax(118px, 1.05fr) 70px minmax(105px, 1fr) minmax(112px, .9fr) 54px 66px 28px; }
.prescription-grid-infusion-no-skin, .prescription-row-infusion-no-skin { grid-template-columns: minmax(145px, 1.45fr) minmax(92px, .85fr) minmax(118px, 1.05fr) minmax(105px, 1fr) minmax(112px, .9fr) 54px 66px 28px; }
.infusion-group-meta { display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-bottom: 1px dashed #cfe3df; background: #f8fcfb; }
.infusion-group-label { flex: 0 0 auto; color: #087b67; font-size: 13px; font-weight: 700; }
.infusion-group-meta > label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.infusion-group-meta select, .infusion-group-meta input { min-height: 32px; border: 1px solid transparent; border-radius: 5px; padding: 7px 8px; color: var(--ink); background: #fff; outline: none; font-size: 12px; }
.infusion-group-meta select:focus, .infusion-group-meta input:focus { border-color: #b9d7f9; background: #fbfdff; }
.infusion-group-duration, .infusion-group-rate { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.infusion-group-duration input { width: 52px; }
.infusion-group-rate input { width: 64px; }
.infusion-group-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.infusion-group-actions .danger { color: var(--red); }
.prescription-card-herbal { border-color: #ead9c0; background: #fffdfa; }
.prescription-card-herbal .prescription-card-header { background: #fffaf2; }
.prescription-grid-herbal, .prescription-row-herbal { grid-template-columns: minmax(150px, 1.6fr) minmax(76px, .7fr) 58px minmax(92px, .9fr) 58px 70px 28px; }
.herbal-prescription-meta { border-top: 1px solid #eadfce; background: #fffaf3; padding: 11px 12px 13px; }
.herbal-meta-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.herbal-meta-heading strong { color: #7b552b; font-size: 12px; }
.herbal-meta-heading span { color: var(--muted); font-size: 10px; }
.herbal-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 9px; }
.herbal-meta-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.herbal-meta-grid input, .herbal-meta-grid select { width: 100%; min-width: 0; min-height: 32px; border: 1px solid #e6d9c7; border-radius: 5px; padding: 6px 8px; color: var(--ink); background: #fff; outline: none; }
.herbal-meta-grid input:focus, .herbal-meta-grid select:focus { border-color: #cf9a59; }
.herbal-processing-fee-hint { color: #9a7549; font-size: 10px; line-height: 1.35; }
.herbal-meta-note { grid-column: span 2; }
.decoction-method-list { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 6px 12px; margin: 8px 0 10px; }
.decoction-method-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.field-inline-add { display: flex; gap: 8px; align-items: center; }
.field-inline-add input { flex: 1; min-height: 32px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; }
.prescription-setting-fee { display: grid; gap: 5px; max-width: 220px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.prescription-setting-fee input { min-height: 32px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; color: var(--ink); background: #fff; }
.prescription-head { color: var(--muted); font-size: 10px; padding-top: 7px; padding-bottom: 4px; }
.prescription-row { border-top: 1px dashed #e1e7ef; }
.prescription-row input, .prescription-row select, .treatment-order-row input, .treatment-order-row select { width: 100%; min-width: 0; min-height: 32px; border: 1px solid transparent; border-radius: 5px; padding: 7px 8px; color: var(--ink); background: #fff; outline: none; font-size: 12px; }
.medication-control { min-width: 0; }
.medication-control input { display: block; width: 100%; }
.medication-stock-summary { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; white-space: normal; }
.prescription-row input:hover, .prescription-row select:hover, .prescription-row input:focus, .prescription-row select:focus, .treatment-order-row input:focus, .treatment-order-row select:focus { border-color: #b9d7f9; background: #fbfdff; }
.infusion-dose-control, .infusion-rate-control { display: flex; align-items: center; gap: 4px; min-width: 0; }
.infusion-dose-control input, .infusion-rate-control input { min-width: 0; flex: 1; }
.infusion-dose-control select { width: 48px; flex: 0 0 48px; padding-inline: 3px; }
.infusion-rate-control span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.infusion-quantity-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 5px; }
.infusion-quantity-control input[readonly] { border-color: #cce9df; color: #087b67; background: #f1fbf7; font-weight: 700; cursor: default; }
.infusion-quantity-control > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.infusion-quantity-control small { grid-column: 1 / -1; font-size: 9px; line-height: 1.25; }
.infusion-quantity-control small.automatic { color: #13856f; }
.infusion-quantity-control small.manual { color: #c76b14; }
.infusion-add-group { width: 100%; min-height: 43px; border: 1px dashed #85cdbf; border-radius: 8px; color: #087b67; background: #f6fcfa; font-size: 12px; font-weight: 700; }
.infusion-add-group:hover { border-color: #34ad94; background: #ecf9f5; }
.form-panel.visit-locked { background: #f8fafc; }
.form-panel.visit-locked input:disabled, .form-panel.visit-locked textarea:disabled, .form-panel.visit-locked select:disabled { color: #64748b; background: #f1f5f9; cursor: not-allowed; }
.form-panel.visit-locked .prescription-card, .form-panel.visit-locked .order-note-card { opacity: .9; }
.prescription-placeholder { min-height: 37px; display: flex; align-items: center; padding: 0 12px; border-top: 1px dashed #e1e7ef; color: #a0acbb; font-size: 11px; }
.prescription-add { justify-self: start; margin: 1px 12px 9px; padding: 5px 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; }
.prescription-add:hover { color: #196bd9; }
.prescription-money { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.prescription-money.line-total { color: var(--orange); font-size: 12px; }
.prescription-card-subtotal { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--line); color: var(--muted); background: #fcfdfe; font-size: 11px; }
.prescription-card-subtotal strong { color: var(--orange); font-size: 16px; }
.fee-summary { padding: 16px 18px; border: 1px solid #efc681; border-radius: 9px; background: linear-gradient(135deg, #fffaf2, #fff5e7); }
.fee-summary-title { margin-bottom: 11px; color: #69471f; font-size: 14px; font-weight: 700; }
.fee-summary-content { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; }
.fee-summary-items { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fee-summary-item { min-width: 132px; padding: 8px 11px; border: 1px solid #efddbd; border-radius: 7px; background: rgba(255, 255, 255, .78); }
.fee-summary-item span { display: block; margin-bottom: 3px; color: #8b7458; font-size: 10px; }
.fee-summary-item strong { color: #594226; font-size: 14px; }
.fee-summary-empty { align-self: center; color: var(--muted); font-size: 11px; }
.fee-summary-grand { min-width: 190px; padding-left: 20px; border-left: 1px solid #edcf9e; text-align: right; }
.fee-summary-grand span { color: #8a6c48; font-size: 11px; }
.fee-summary-grand strong { display: block; margin-top: 3px; color: var(--orange); font-size: 25px; }
.fee-summary > small { display: block; margin-top: 9px; color: #9a846a; font-size: 9px; text-align: right; }
.outpatient-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 13px; border-top: 2px solid #f0c27c; background: #fff8ed; }
.outpatient-total span, .outpatient-total small { color: var(--muted); font-size: 11px; }
.outpatient-total strong { color: var(--orange); font-size: 21px; }
.field-inline-hint { color: var(--muted); font-size: 10px; }
.field input[readonly] { color: #8d5b22; background: #fffaf5; }
.treatment-order-row { display: grid; grid-template-columns: 24px minmax(180px, 1.6fr) minmax(200px, 1fr) 62px 76px 28px; gap: 8px; align-items: center; padding: 8px 12px; }
.treatment-frequency-control { display: flex; align-items: center; gap: 6px; min-width: 0; }
.treatment-frequency-control label { display: flex; align-items: center; gap: 3px; min-width: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.treatment-frequency-control label span { display: none; }
.treatment-frequency-control input { flex: 0 0 64px; width: 64px; min-height: 30px; padding-inline: 4px; border-color: #d8e1ec; text-align: center; font-weight: 600; }
.treatment-frequency-control em { font-style: normal; }
.treatment-total-count, .treatment-total-amount { color: var(--ink); font-size: 11px; white-space: nowrap; text-align: right; }
.treatment-total-amount { color: var(--orange); }
.treatment-order-summary { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; padding: 8px 12px 11px; color: var(--muted); font-size: 11px; }
.treatment-order-summary strong { color: var(--orange); font-size: 16px; }
.order-number { color: var(--ink); text-align: center; font-size: 12px; }
.order-unit, .order-note { color: var(--muted); font-size: 11px; }
.order-price { color: var(--ink); font-size: 12px; text-align: right; }
.order-add { border-top: 1px dashed #e1e7ef; width: calc(100% - 24px); text-align: left; }
.order-note-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: stretch; }
.order-note-card label { padding: 12px; color: #56677f; font-size: 12px; border-right: 1px solid var(--line); }
.order-note-card textarea { min-height: 48px; padding: 12px; border: 0; resize: vertical; outline: none; color: var(--ink); font: inherit; font-size: 12px; }
.full-field { grid-column: 1 / -1; }
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.date-part-row { display: flex; align-items: center; gap: 5px; }
.date-part-row input { min-width: 0; flex: 1; }
.date-part-row input[type="date"] { flex: 0 0 38px; padding: 8px 4px; }
.form-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.history-item { padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.history-item:last-child { border-bottom: 0; }
.history-item header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.history-item p { color: #4f5d73; font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
.history-item-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: inherit; background: transparent; text-align: left; transition: background .16s ease; }
.history-item-button:hover { background: var(--blue-soft); }
.history-item-button:focus-visible { outline: 2px solid #9fc8ff; outline-offset: -2px; }
.history-item-content { min-width: 0; flex: 1; }
.history-item-link { flex: 0 0 auto; color: var(--blue); font-size: 11px; white-space: nowrap; }
.history-item-link span { margin-left: 3px; font-size: 14px; }
.visit-detail { display: grid; gap: 18px; }
.visit-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 1px solid #cfe2fb; border-radius: 8px; background: var(--blue-soft); }
.visit-detail-summary div { display: grid; gap: 5px; }
.visit-detail-summary strong { font-size: 14px; }
.visit-detail-summary span:not(.tag) { color: var(--muted); font-size: 11px; }
.visit-detail-section { min-width: 0; }
.visit-detail-section + .visit-detail-section { padding-top: 17px; border-top: 1px solid var(--line); }
.visit-detail-section .section-heading { margin-bottom: 10px; }
.visit-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.visit-detail-field { min-height: 57px; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.visit-detail-field dt { color: var(--muted); font-size: 11px; }
.visit-detail-field dd { margin: 5px 0 0; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: normal; word-break: break-word; }
.visit-prescription-table { border: 1px solid var(--line); border-radius: 7px; overflow-x: auto; }
.visit-prescription-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.visit-prescription-table th, .visit-prescription-table td { padding: 10px 11px; border-bottom: 1px solid #edf0f4; color: #4f5d73; font-size: 11px; text-align: left; vertical-align: top; }
.visit-prescription-table th { color: var(--muted); background: #f7f9fc; font-size: 10px; font-weight: 600; }
.visit-prescription-table tr:last-child td { border-bottom: 0; }
.visit-prescription-table td strong, .visit-prescription-table td small { display: block; }
.visit-prescription-table td strong { color: var(--ink); font-size: 12px; }
.visit-prescription-table td small { margin-top: 3px; color: var(--muted); }
.visit-detail-note { padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-detail-note strong { font-size: 12px; }
.visit-detail-note p { margin: 7px 0 0; color: #4f5d73; font-size: 12px; line-height: 1.6; }
.visit-treatment-summary { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-treatment-summary strong { font-size: 12px; }
.visit-treatment-summary span, .visit-treatment-summary small { color: var(--muted); font-size: 11px; }
.visit-fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.visit-fee-grid div { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-fee-grid span { color: var(--muted); font-size: 11px; }
.visit-fee-grid strong { color: var(--orange); font-size: 15px; }
.modal-loading { padding: 35px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.bill-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 240px; gap: 16px; min-height: 620px; }
.bill-list { padding: 12px; }
.bill-card { padding: 13px 11px; border-radius: 8px; cursor: pointer; }
.bill-card:hover, .bill-card.selected { background: var(--blue-soft); }
.bill-card-top { display: flex; justify-content: space-between; align-items: center; }
.bill-card strong { font-size: 12px; }
.bill-card small { color: var(--muted); font-size: 10px; display: block; margin-top: 5px; }
.bill-card-meta { color: #52677f !important; }
.bill-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.bill-card-action { color: var(--blue); font-size: 11px; font-weight: 700; }
.billing-pending-toolbar > div { display: flex; flex-direction: column; gap: 3px; }
.billing-pending-toolbar strong { font-size: 13px; }
.billing-pending-toolbar span:not(.tag) { color: var(--muted); font-size: 11px; }
.bill-amount { color: var(--orange); font-weight: 700; }
.bill-main { padding: 20px; }
.bill-title { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.bill-title h2 { margin: 0; font-size: 17px; }
.bill-title p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.total-amount { color: var(--orange); font-weight: 700; font-size: 22px; }
.fee-table { margin-top: 16px; }
.fee-row { display: grid; grid-template-columns: 1fr 74px 74px 86px; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; color: #4a5870; font-size: 12px; }
.fee-row.header { color: var(--muted); font-size: 11px; }
.fee-row span:not(:first-child) { text-align: right; }
.fee-detail-table { border: 1px solid #dfe5ed; border-radius: 6px; overflow: hidden; color: #33435c; font-size: 11px; }
.fee-detail-toolbar { display: flex; align-items: center; gap: 16px; min-height: 34px; padding: 0 10px; border-bottom: 1px solid #dfe5ed; background: #fff; }
.fee-detail-toolbar strong { font-size: 12px; color: var(--text); }
.fee-detail-toolbar label { display: inline-flex; align-items: center; gap: 4px; color: #536176; }
.fee-detail-toolbar input, .fee-detail-check input { accent-color: #79b9f8; }
.fee-detail-toolbar-spacer { flex: 1; }
.fee-detail-toolbar > span:last-child { color: var(--muted); font-size: 10px; }
.fee-detail-head, .fee-detail-row { display: grid; grid-template-columns: 55px minmax(180px, 1.7fr) 70px 58px 58px 74px minmax(90px, 1fr); gap: 0; align-items: center; }
.fee-detail-head { min-height: 32px; padding: 0 10px; color: var(--muted); background: #f8fafc; border-bottom: 1px solid #dfe5ed; }
.fee-detail-row { min-height: 42px; padding: 0 10px; border-bottom: 1px dashed #dfe5ed; }
.fee-detail-row:last-child { border-bottom: 0; }
.fee-detail-row > span:not(.fee-detail-name):not(.fee-detail-remark), .fee-detail-head > span:nth-child(n+3):nth-child(-n+6) { text-align: right; }
.fee-detail-check { display: inline-flex; align-items: center; gap: 8px; color: #5a6b83; }
.fee-detail-check input { width: 14px; height: 14px; margin: 0; }
.fee-detail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #263952; }
.fee-detail-price, .fee-detail-total { font-variant-numeric: tabular-nums; }
.fee-detail-total { color: #1b3559; font-weight: 700; }
.fee-detail-remark { overflow: hidden; padding-left: 10px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.fee-detail-empty { padding: 20px; color: var(--muted); text-align: center; }
.bill-summary { display: grid; gap: 10px; margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); }
.bill-note { grid-column: 1 / -1; display: grid; gap: 5px; padding: 12px 0 2px; color: var(--muted); }
.bill-note strong { color: var(--text); font-size: 12px; }
.bill-note span { font-size: 11px; line-height: 1.6; }
.payment-method { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.payment-method label { font-size: 12px; font-weight: 700; }
.payment-method .select-box { min-width: 150px; }
.charge-workbench { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.charge-amount-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 15px; }
.charge-amount-bar > div:first-child { display: grid; gap: 4px; }
.charge-amount-bar span, .payment-method-heading span { color: var(--muted); font-size: 11px; }
.charge-amount-bar strong { color: var(--orange); font-size: 25px; line-height: 1; }
.charge-amount-actions { display: flex; gap: 6px; }
.amount-action { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: #536176; background: #fff; font-size: 11px; }
.amount-action:hover, .amount-action.active { color: var(--blue); border-color: #9fc8ff; background: var(--blue-soft); }
.payment-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.payment-method-heading strong { font-size: 12px; }
.payment-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.payment-method-button { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; color: #4f5d73; background: #fff; font-size: 11px; }
.payment-method-button:hover, .payment-method-button.selected { color: var(--blue); border-color: #8ab9e7; background: var(--blue-soft); box-shadow: 0 0 0 1px rgba(74, 139, 204, .08); }
.payment-method-button:disabled { cursor: not-allowed; opacity: .55; }
.payment-method-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 4px; color: var(--blue); background: #e8f2ff; font-size: 10px; }
.payment-method-fallback { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.charge-notice { margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.member-payment-note { margin-top: 11px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
.member-payment-note.ready { color: #147b59; background: var(--mint-soft); border-color: #b9e8d6; }
.member-payment-note.warning { color: #a86119; background: var(--orange-soft); border-color: #f2d5ae; }
.member-list-panel { margin-top: 18px; }
.member-tier-summary { margin-top: 18px; }
.member-tier-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.member-tier-pill { min-width: 150px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #c8e2ff; border-radius: 7px; background: var(--blue-soft); color: #2667a9; }
.member-tier-pill strong { color: var(--ink); font-size: 12px; }
.member-tier-pill small { color: #4e77a2; font-size: 11px; }
.member-tier-pill.inactive { border-color: var(--line); background: #f7f8fa; opacity: .7; }
.member-balance { color: var(--mint); white-space: nowrap; }
.member-points { color: #2869c7; white-space: nowrap; }
.member-actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.member-history-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; color: var(--muted); }
.member-history-summary strong { color: var(--ink); }
.charge-footer { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.charge-option { display: inline-flex; align-items: center; gap: 5px; color: #536176; font-size: 10px; white-space: nowrap; }
.charge-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.charge-payment-input { display: grid; grid-template-columns: 72px minmax(110px, 160px); align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.charge-payment-input input { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fffaf5; }
.charge-payment-input small { grid-column: 2; color: var(--muted); font-size: 10px; }
.charge-submit { margin-left: auto; min-width: 112px; }
.empty-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); font-size: 16px; }
.empty-state .primary-button { margin-top: 8px; }
.import-preview-summary { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.import-preview-summary strong { color: var(--ink); font-size: 13px; }
.import-preview-summary span, .import-preview-list > span { color: var(--muted); font-size: 11px; }
.import-preview-list { display: grid; gap: 7px; margin-top: 12px; }
.import-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f3f7; font-size: 12px; }
.summary-line { display: flex; justify-content: space-between; color: #5c6a7f; font-size: 12px; }
.summary-line.total { color: var(--ink); font-size: 15px; font-weight: 700; }
.bill-actions { display: flex; gap: 9px; margin-top: 18px; }
.catalog { padding: 18px 16px; }
.catalog h3 { font-size: 13px; margin: 0 0 13px; }
.catalog-group { border-top: 1px solid var(--line); padding: 12px 0; }
.catalog-group strong { font-size: 11px; }
.catalog-item { display: flex; justify-content: space-between; padding: 8px 0 0; color: #637087; font-size: 11px; }
.task-list { display: grid; gap: 12px; }
.task-card { border: 1px solid var(--line); border-radius: 9px; padding: 15px 17px; background: #fff; }
.task-card-top { display: flex; justify-content: space-between; gap: 12px; }
.task-card h3 { margin: 0; font-size: 14px; }
.task-card p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.task-meta { display: flex; gap: 17px; margin: 15px 0; color: #617087; font-size: 11px; }
.task-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid #edf0f4; }
.task-footer small { color: var(--muted); }
.pharmacy-card { display: grid; gap: 14px; }
.retail-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.5fr); gap: 18px; align-items: start; }
.retail-form .panel-body { display: grid; gap: 18px; }
.retail-type-switch { display: inline-flex; width: fit-content; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f4f7fa; }
.retail-type-switch button { min-width: 96px; padding: 8px 14px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font: 600 12px inherit; cursor: pointer; }
.retail-type-switch button.active { color: #fff; background: var(--blue); box-shadow: 0 1px 3px rgba(33, 79, 151, .25); }
.retail-items-heading { display: flex; justify-content: space-between; align-items: center; }
.retail-item-list { display: grid; gap: 10px; overflow-x: auto; }
.retail-item-row { display: grid; grid-template-columns: minmax(180px, 1fr) 82px 104px 90px 34px; gap: 8px; align-items: start; }
.retail-item-row.treatment-row { min-width: 720px; grid-template-columns: minmax(180px, 1fr) 78px 74px 96px 96px 90px 34px; }
.retail-item-picker { display: grid; gap: 4px; min-width: 0; }
.retail-item-picker small { min-height: 15px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retail-search-tools { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 10px 14px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.retail-scan-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.retail-search-tools > small { color: var(--muted); line-height: 1.6; }
.retail-quick-add { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.retail-quick-add label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.retail-quick-add > small { color: var(--muted); line-height: 1.6; }
.retail-item-description { display: grid; gap: 4px; min-width: 0; min-height: 32px; padding-top: 4px; }
.retail-item-description strong, .retail-item-description small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retail-item-description small { color: var(--muted); font-size: 11px; }
.retail-member-lookup { display: flex; gap: 8px; align-items: center; min-height: 32px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 12px; }
.retail-item-row select, .retail-item-row input { min-width: 0; }
.retail-price-control { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.retail-price-control input { min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fffaf5; }
.retail-compact-field { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.retail-compact-field input { min-height: 32px; padding: 6px 7px; }
.retail-item-row > span { min-height: 32px; display: flex; align-items: center; justify-content: flex-end; text-align: right; font-weight: 600; color: var(--ink); }
.retail-item-row > .icon-action { margin-top: 3px; }
.retail-adjustment-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.retail-adjustment-tools > span { margin-right: 2px; color: var(--muted); font-size: 11px; }
.retail-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.retail-total > span { display: grid; gap: 3px; }
.retail-total small { color: var(--muted); font-size: 11px; font-weight: 400; }
.retail-total [data-retail-discount]:not(:empty) { color: #18745a; }
.retail-total strong { font-size: 24px; color: var(--blue); }
.retail-history table small, .retail-history td small { display: block; color: var(--muted); margin-top: 4px; }
.charge-record-history { margin-top: 18px; }
.charge-record-history td small, .charge-detail-summary + .table-wrap td small { display: block; margin-top: 4px; color: var(--muted); }
.charge-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.charge-detail-summary strong { color: var(--blue); font-size: 17px; }
@media (max-width: 1100px) { .retail-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .retail-search-tools, .retail-quick-add { grid-template-columns: 1fr; } .retail-item-row { grid-template-columns: minmax(0, 1fr) 66px 82px 66px 30px; } }
.pharmacy-items { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.pharmacy-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px; }
.pharmacy-item-row + .pharmacy-item-row { border-top: 1px solid var(--line); }
.pharmacy-item-main, .pharmacy-item-side, .pharmacy-legacy-note, .dispense-patient > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pharmacy-item-main span, .pharmacy-item-main small, .pharmacy-legacy-note small, .dispense-patient span { color: var(--muted); }
.pharmacy-item-side { align-items: flex-end; }
.pharmacy-item-side strong { font-size: 13px; }
.pharmacy-legacy-note { padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.pharmacy-trace { flex-wrap: wrap; }
.pharmacy-amount { font-size: 16px; }
.dispense-patient, .dispense-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dispense-patient { margin-bottom: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.dispense-patient > div > strong { font-size: 18px; }
.dispense-check, .dispense-warning { display: flex; flex-direction: column; gap: 4px; margin-top: 15px; padding: 12px 14px; border-radius: 7px; }
.dispense-check { color: #16614f; background: var(--mint-soft); }
.dispense-warning { color: #a13535; background: #fff1f0; }
.dispense-check span, .dispense-warning span { font-size: 12px; }
.dispense-total { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.dispense-total span { color: var(--muted); }
.dispense-total strong { font-size: 18px; }
.refund-flow { display: grid; gap: 15px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; }
.checkbox-row input { width: 15px; height: 15px; accent-color: var(--blue); }
.refund-order-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.refund-order-summary span { color: var(--muted); }
.refund-order-summary strong { text-align: right; }
.refund-fields { margin-top: 15px; }
.inventory-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.inventory-stat { padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.inventory-stat span { display: block; color: var(--muted); font-size: 11px; }
.inventory-stat strong { display: block; font-size: 22px; margin-top: 9px; }
.report-tabs { display: flex; gap: 5px; padding: 5px; background: #f1f4f8; border-radius: 8px; }
.report-tab { padding: 8px 12px; background: transparent; border-radius: 6px; color: var(--muted); font-size: 12px; }
.report-tab.active { color: var(--blue); background: #fff; box-shadow: 0 2px 5px rgba(31, 53, 83, .08); }
.active-report-period { color: var(--blue); border-color: #8ab9e7; background: var(--blue-soft); }
.report-period-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.report-quick-actions { display: flex; align-items: center; gap: 7px; }
.report-custom-filter { display: flex; align-items: center; gap: 7px; }
.report-custom-filter label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.report-custom-filter .select-box, .report-filter-input { min-height: 32px; }
.report-filter-input { width: 136px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; }
.report-filter-input:focus { border-color: #9fc8ff; }
.report-filter-hint { min-height: 32px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.report-breakdown-panel { margin-bottom: 16px; }
.report-table th, .report-table td { white-space: nowrap; }
.report-risk-list { display: grid; gap: 12px; }
.report-risk-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid #edf0f4; }
.report-risk-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.report-risk-list span { color: var(--muted); }
.report-risk-list strong { font-size: 15px; }
.chart { height: 230px; padding: 20px 8px 7px; display: flex; align-items: end; gap: 14px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 45px, #f1f3f6 46px); }
.bar { flex: 1; min-width: 16px; position: relative; border-radius: 5px 5px 0 0; background: var(--blue); }
.bar.mint { background: var(--mint); }
.bar.orange { background: var(--orange); }
.bar::after { content: attr(data-label); position: absolute; top: calc(100% + 8px); width: 100%; text-align: center; color: var(--muted); font-size: 10px; }
.legend { display: flex; gap: 17px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.legend i.mint { background: var(--mint); }
.legend i.orange { background: var(--orange); }
.referral-summary { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 22px; align-items: center; }
.referral-total { padding-right: 20px; border-right: 1px solid var(--line); }
.referral-total strong { display: block; font-size: 31px; line-height: 1; }
.referral-total span, .referral-total small { display: block; color: var(--muted); font-size: 11px; margin-top: 8px; }
.referral-total small { margin-top: 16px; color: var(--mint); }
.referrer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0f4; }
.referrer-row:last-child { border-bottom: 0; }
.referrer-row strong { display: block; font-size: 12px; }
.referrer-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.referrer-row b { color: var(--orange); font-size: 12px; }
.settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.settings-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-subnav { padding: 10px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.settings-subnav-title { padding: 8px 10px 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-subnav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 7px; color: #536176; background: transparent; text-align: left; font-size: 12px; }
.settings-subnav-item:hover { color: var(--blue); background: #f5f8fc; }
.settings-subnav-item.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.settings-subnav-icon { width: 18px; text-align: center; font-size: 15px; color: currentColor; }
.settings-content { min-width: 0; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.settings-section-heading h2 { margin: 4px 0 0; font-size: 17px; }
.security-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf0f4; }
.security-setting-row:last-child { border-bottom: 0; }
.security-setting-row strong, .security-setting-row small { display: block; }
.security-setting-row strong { font-size: 12px; }
.security-setting-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.print-settings-panel .panel-header { align-items: flex-start; }
.print-template-settings { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.4fr) auto; gap: 14px; align-items: end; margin-bottom: 16px; padding: 14px; border: 1px solid #cfe0ef; border-radius: 8px; background: #f7fbff; }
.print-template-settings h3 { margin: 0 0 4px; }
.print-template-settings label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.print-template-settings textarea { min-height: 76px; resize: vertical; }
.print-template-actions { display: flex; gap: 8px; align-items: center; }
.print-profile-list { display: grid; gap: 10px; }
.print-profile-row { display: grid; grid-template-columns: minmax(210px, 1.5fr) repeat(3, minmax(90px, .55fr)) auto; gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.print-profile-row > div strong, .print-profile-row > div small { display: block; }
.print-profile-row > div small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.print-profile-row label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.print-profile-row select, .print-profile-row input { min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.print-profile-actions { display: flex; gap: 6px; align-items: center; }
.print-preview-overlay { position: fixed; inset: 0; z-index: 1200; padding: 20px; overflow: auto; background: rgba(15, 23, 42, .68); }
.print-preview-overlay[hidden] { display: none; }
.print-preview-dialog { width: min(1120px, 100%); min-height: calc(100vh - 40px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto auto minmax(420px, 1fr) auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.print-preview-dialog > header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.print-preview-dialog > header h2 { margin: 3px 0 0; font-size: 19px; }
.print-preview-toolbar { grid-column: 1 / -1; display: flex; gap: 14px; align-items: end; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.print-preview-toolbar label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.print-preview-toolbar label:first-child { margin-right: auto; }
.print-preview-toolbar label span { color: var(--ink); font-size: 12px; font-weight: 600; }
.print-preview-toolbar select, .print-preview-toolbar input { min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.print-preview-canvas { padding: 18px; overflow: auto; background: #e7ebed; }
.print-preview-canvas .print-document { min-height: 100%; }
.print-history-panel { padding: 18px; overflow: auto; border-left: 1px solid var(--line); background: #fbfcfe; }
.print-history-panel h3 { margin: 0 0 12px; }
.print-history-panel > p { color: var(--muted); }
.print-history-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.print-history-row strong, .print-history-row span { display: block; }
.print-history-row span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.print-history-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.print-history-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px; text-align: center; color: var(--muted); }
.print-history-empty strong { color: var(--ink); font-size: 16px; }
.print-history-empty span { max-width: 320px; }
.print-preview-dialog > footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .print-profile-row { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
  .print-profile-row > div:first-child, .print-profile-actions { grid-column: 1 / -1; }
  .print-preview-dialog { grid-template-columns: 1fr; }
  .print-preview-toolbar { flex-wrap: wrap; }
  .print-preview-toolbar label:first-child { width: 100%; }
  .print-history-panel { border-top: 1px solid var(--line); border-left: 0; }
}
.treatment-catalog-panel { margin-top: 16px; }
.treatment-catalog-tabs { display: flex; gap: 5px; padding: 7px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.treatment-catalog-tabs .report-tab { white-space: nowrap; }
.catalog-setting-list { display: grid; gap: 9px; }
.catalog-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(118px, auto) 34px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.catalog-setting-row:last-child { border-bottom: 0; }
.catalog-setting-row input { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; }
.catalog-setting-row input:focus { border-color: #9fc8ff; }
.catalog-price { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.catalog-price input { min-width: 0; width: 100%; }
.catalog-discount-option { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); font-size: 12px; }
.catalog-discount-option input { min-height: auto; width: 15px; height: 15px; padding: 0; }
.catalog-setting-row .icon-action { justify-self: end; }
.performance-catalog-row { grid-template-columns: minmax(0, 1fr); }
.catalog-setting-main { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(118px, auto) 34px; gap: 10px; align-items: center; }
.catalog-performance-editor { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid #dbe7f2; border-radius: 8px; background: #f7fbff; }
.catalog-performance-editor > label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.catalog-performance-editor input, .catalog-performance-editor select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.catalog-performance-editor > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.task-source { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.treatment-progress-meta strong { color: var(--ink); }
.execution-dialog-summary { display: grid; gap: 5px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #dbe7f2; border-radius: 8px; background: #f7fbff; }
.execution-dialog-summary span, .execution-dialog-summary small { color: var(--muted); }
.performance-report .panel-body { display: grid; gap: 18px; }
.performance-filters { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; }
.performance-filters label, .performance-self-filter { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 10px; }
.performance-filters input, .performance-filters select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.performance-self-filter { min-height: 53px; align-content: end; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: #f7f9fb; }
.performance-self-filter strong { color: var(--ink); font-size: 12px; }
.performance-self-filter small { font-size: 9px; }
.performance-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.performance-summary .metric-card { display: grid; gap: 7px; min-height: 92px; }
.performance-summary .metric-card span { color: var(--muted); font-size: 11px; }
.performance-summary .metric-card strong { font-size: 22px; }
.performance-report td small { display: block; margin-top: 4px; color: var(--muted); white-space: nowrap; }
.negative { color: var(--red) !important; }
.commission-settings-panel { margin-top: 16px; }
.panel-header-actions { display: flex; align-items: center; gap: 8px; }
.commission-setting-head, .commission-setting-row { display: grid; grid-template-columns: minmax(145px, 1.15fr) minmax(145px, 1fr) minmax(100px, .75fr) minmax(100px, .75fr) minmax(120px, .9fr) 70px 34px; gap: 9px; align-items: center; }
.commission-setting-head { padding: 0 0 9px; color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); }
.commission-setting-row { padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.commission-setting-row:last-child { border-bottom: 0; }
.commission-setting-row input, .commission-setting-row select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; font-size: 11px; }
.commission-setting-row input:focus, .commission-setting-row select:focus { border-color: #9fc8ff; }
.commission-value { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.commission-value input { flex: 1; }
.commission-enabled { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.commission-enabled input { width: 15px; min-height: 15px; accent-color: var(--mint); }
.commission-setting-row .icon-action { justify-self: end; }
.commission-empty { padding: 20px 0; }
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #edf0f4; }
.user-row:last-child { border-bottom: 0; }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-info strong { font-size: 12px; display: block; }
.user-info small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.user-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.compact-button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.permission-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.permission-picker legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.permission-option { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 12px; cursor: pointer; }
.permission-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.switch { width: 33px; height: 19px; border-radius: 12px; background: var(--mint); position: relative; }
.switch::after { content: ""; width: 15px; height: 15px; position: absolute; top: 2px; right: 2px; background: #fff; border-radius: 50%; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(17, 30, 49, .38); display: grid; place-items: center; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 11px; box-shadow: 0 20px 70px rgba(17, 30, 49, .24); }
.modal.wide-modal { width: min(920px, 100%); }
.receipt-toolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.receipt-hint { color: var(--muted); font-size: 11px; }
.receipt-detail-table { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.receipt-detail-header { display: grid; grid-template-columns: 1fr 1.5fr .7fr .6fr .6fr .7fr .7fr 1fr 1fr 1fr; min-width: 760px; gap: 8px; padding: 10px; background: #f5f7fa; color: var(--muted); font-size: 10px; }
.receipt-empty { min-height: 70px; display: grid; place-items: center; min-width: 760px; color: var(--muted); font-size: 11px; }
.new-item-form h3 { margin: 0 0 12px; font-size: 14px; }
.new-item-form em { color: var(--red); font-style: normal; }
.inventory-detail-tabs { margin: -5px -22px 18px; padding: 0 22px; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.inventory-detail-tab-content { min-height: 320px; }
.inventory-detail-info-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .8fr); gap: 24px; }
.inventory-detail-section { min-width: 0; }
.inventory-detail-section + .inventory-detail-section { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.inventory-detail-section h3 { margin: 0 0 4px; font-size: 13px; }
.inventory-detail-pricing { padding-left: 24px; border-left: 1px solid var(--line); }
.inventory-detail-pricing .inventory-detail-field { min-height: 63px; }
.inventory-detail-history { margin-top: 12px; padding: 0; color: var(--blue); background: transparent; font-size: 11px; }
.inventory-detail-history:disabled { opacity: 1; cursor: default; }
.stocktake-form { display: grid; gap: 16px; }
.stocktake-intro { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #cfe2fb; border-radius: 7px; background: var(--blue-soft); }
.stocktake-intro strong { font-size: 13px; }
.stocktake-intro span { color: var(--muted); font-size: 11px; }
.stocktake-current { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.stocktake-current span { color: var(--muted); font-size: 12px; }
.stocktake-current strong { font-size: 18px; }
.inventory-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 25px; }
.inventory-detail-field { min-height: 58px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.inventory-detail-field span, .inventory-detail-field strong { display: block; }
.inventory-detail-field span { color: var(--muted); font-size: 11px; }
.inventory-detail-field strong { margin-top: 6px; color: var(--ink); font-size: 13px; font-weight: 600; word-break: break-word; }
.inventory-detail-edit-field { display: grid; gap: 6px; min-height: 58px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.inventory-detail-edit-field span { color: var(--muted); font-size: 11px; }
.inventory-detail-edit-field input, .inventory-detail-edit-field select { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; }
.inventory-detail-edit-field input:focus, .inventory-detail-edit-field select:focus { border-color: #9fc8ff; outline: 2px solid rgba(40, 121, 232, .1); }
.inventory-detail-checkbox { grid-template-columns: 1fr auto; align-items: center; min-height: 44px; }
.inventory-detail-checkbox input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; padding: 0; }
.inventory-edit-hint { margin-bottom: 12px; padding: 10px 12px; color: var(--muted); border: 1px solid #cfe2fb; border-radius: 6px; background: var(--blue-soft); font-size: 11px; }
.inventory-detail-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.inventory-detail-table-head, .inventory-detail-table-row { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr .8fr 1.2fr 1.3fr; min-width: 700px; gap: 10px; padding: 10px 12px; align-items: center; font-size: 11px; }
.inventory-detail-table-head { color: var(--muted); background: #f5f7fa; font-size: 10px; }
.inventory-detail-table-row { border-top: 1px solid #edf0f4; }
.inventory-detail-table-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-detail-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.inventory-detail-toolbar .search-box { min-width: 145px; min-height: 30px; }
.inventory-detail-toolbar .select-box { min-height: 30px; }
.inventory-filter-option { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 11px; white-space: nowrap; }
.inventory-filter-option input { accent-color: var(--blue); }
.inventory-detail-table.inventory-batches-table .inventory-detail-table-head, .inventory-detail-table.inventory-batches-table .inventory-detail-table-row { grid-template-columns: 1fr 1fr .9fr .9fr 1.1fr 1.1fr 1.1fr .8fr 1.3fr .8fr; min-width: 1050px; }
.inventory-detail-table.inventory-stats-table .inventory-detail-table-head, .inventory-detail-table.inventory-stats-table .inventory-detail-table-row { grid-template-columns: .65fr 1.1fr repeat(6, minmax(90px, 1fr)); min-width: 850px; }
.inventory-detail-pagination { padding: 10px 2px 0; color: var(--muted); font-size: 11px; text-align: right; }
.link-text { color: var(--blue); }
.compact-tabs { padding: 2px; }
.compact-tabs .report-tab { padding: 5px 10px; font-size: 11px; }
.inventory-setting-section { padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.inventory-setting-section + .inventory-setting-section { margin-top: 18px; }
.inventory-setting-section h3 { margin: 0 0 14px; font-size: 13px; }
.inventory-setting-row { display: flex; align-items: center; gap: 13px; min-height: 38px; color: var(--ink); font-size: 11px; flex-wrap: wrap; }
.inventory-setting-row > span { width: 76px; color: var(--muted); flex: 0 0 76px; }
.inventory-setting-row label { display: inline-flex; align-items: center; gap: 6px; }
.small-number-input { width: 48px; min-height: 28px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; text-align: center; }
.inventory-detail-empty { padding: 55px 15px; color: var(--muted); text-align: center; font-size: 12px; }
.inventory-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.inventory-detail-stat { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.inventory-detail-stat span { display: block; color: var(--muted); font-size: 10px; }
.inventory-detail-stat strong { display: block; margin-top: 8px; font-size: 16px; }
.inventory-detail-settings { display: grid; gap: 13px; }
.inventory-alert-box { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #ccefe1; border-radius: 7px; background: var(--mint-soft); }
.inventory-alert-box.warning { border-color: #f2d5a7; background: var(--orange-soft); }
.inventory-alert-box strong { font-size: 12px; }
.inventory-alert-box span { color: #5f6c7c; font-size: 11px; }
.inventory-row-clickable { cursor: pointer; }
.inventory-row-clickable:hover { background: var(--blue-soft); }
.inventory-row-clickable:focus { outline: 2px solid #9fc8ff; outline-offset: -2px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 5px 0 0; font-size: 18px; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.close-button { background: transparent; color: var(--muted); font-size: 23px; line-height: 1; }
.modal-body { min-height: 0; overflow-y: auto; padding: 20px 22px; -webkit-overflow-scrolling: touch; }
.prescription-settings { display: grid; gap: 0; }
.prescription-settings section { padding: 2px 0 20px; }
.prescription-settings section + section { padding-top: 20px; border-top: 1px dashed var(--line); }
.prescription-settings section:last-child { padding-bottom: 2px; }
.prescription-settings h3 { margin: 0 0 15px; font-size: 12px; }
.prescription-setting-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 18px; }
.prescription-setting-grid.default-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prescription-setting-option { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 12px; cursor: pointer; }
.prescription-setting-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px 20px; border-top: 1px solid var(--line); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 25px; transform: translate(-50%, 18px); background: #1f2e43; color: #fff; padding: 11px 17px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: 0 8px 26px rgba(25, 40, 61, .2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1120px) { .sidebar { width: 205px; flex-basis: 205px; } .bill-layout { grid-template-columns: 230px minmax(0, 1fr); } .catalog { display: none; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .commission-setting-head { display: none; } .commission-setting-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; } .commission-setting-row .commission-name, .commission-setting-row .commission-enabled { grid-column: span 2; } .commission-setting-row .icon-action { justify-self: start; } .catalog-performance-editor { grid-template-columns: repeat(2, minmax(120px, 1fr)); } .catalog-performance-editor .primary-button { justify-self: start; } .performance-filters { grid-template-columns: repeat(3, minmax(120px, 1fr)); } }
@media (max-width: 820px) { .sidebar { width: 65px; flex-basis: 65px; padding: 18px 8px; } .brand { padding: 0 5px 18px; } .brand > div:last-child, .clinic-switcher, .nav-item:not(.active)::after, .nav-item { font-size: 0; } .nav-item { justify-content: center; gap: 0; padding: 11px 5px; } .nav-item.active { font-size: 0; } .nav-icon { font-size: 17px; } .nav-badge { position: absolute; margin: -20px -22px 0 0; } .server-status { justify-content: center; padding: 7px 0; } .server-status span:last-child { display: none; } .topbar { padding: 14px 18px; } .content { padding: 20px 18px 32px; } .grid-2-1, .grid-1-1, .settings-grid, .settings-layout { grid-template-columns: 1fr; } .settings-subnav { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px; } .settings-subnav-title { display: none; } .settings-subnav-item { width: auto; flex: 0 0 auto; white-space: nowrap; } .split-layout, .bill-layout { grid-template-columns: 1fr; } .side-list { max-height: 220px; overflow-y: auto; } .inventory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar { align-items: stretch; flex-direction: column; } .toolbar-left, .toolbar-right { flex-wrap: wrap; } .search-box { min-width: 0; flex: 1; } .page-heading { align-items: flex-start; flex-direction: column; } .charge-amount-bar { align-items: flex-start; flex-direction: column; } .charge-amount-actions { width: 100%; } .amount-action { flex: 1; } .charge-footer { align-items: flex-start; flex-wrap: wrap; } .charge-submit { width: 100%; margin-left: 0; } .fee-detail-table { overflow-x: auto; } .fee-detail-toolbar, .fee-detail-head, .fee-detail-row { min-width: 620px; } }
@media (max-width: 820px) { .print-template-settings { grid-template-columns: 1fr; } .print-template-actions { justify-content: flex-start; } }
@media (max-width: 520px) { .metric-grid { grid-template-columns: 1fr; } .field-grid { grid-template-columns: 1fr; } .full-field { grid-column: auto; } .referral-summary { grid-template-columns: 1fr; } .referral-total { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); } .topbar-actions .help-button { display: none; } .user-chip { padding-left: 7px; margin-left: 0; } .user-chip > span:nth-child(2) { display: none; } .content { padding-inline: 12px; } .inventory-summary { gap: 8px; } .inventory-stat { padding: 12px; } .prescription-card-header { align-items: flex-start; flex-direction: column; } .prescription-card-head-side { width: 100%; justify-content: space-between; } .prescription-card-actions { width: auto; justify-content: flex-start; } .order-shortcuts { width: 100%; justify-content: flex-start; } .prescription-head { display: none; } .prescription-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; padding: 9px 12px; } .prescription-row select { grid-column: 1 / -1; } .prescription-row button { justify-self: start; } .prescription-money { text-align: left; } .fee-summary-content { flex-direction: column; } .fee-summary-item { min-width: calc(50% - 4px); } .fee-summary-grand { min-width: 0; padding: 11px 0 0; border-top: 1px solid #edcf9e; border-left: 0; } .prescription-setting-grid, .prescription-setting-grid.default-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treatment-order-row { grid-template-columns: 24px minmax(0, 1fr); } .treatment-order-row input[data-field="outpatient-treatment"] { grid-column: 2; } .treatment-order-row .treatment-frequency-control, .treatment-order-row .treatment-total-count, .treatment-order-row .treatment-total-amount { grid-column: 2; justify-self: start; } .treatment-order-row .treatment-frequency-control { width: 100%; } .treatment-order-row .icon-action { grid-column: 2; justify-self: start; } .order-note-card { grid-template-columns: 1fr; } .order-note-card label { border-right: 0; border-bottom: 1px solid var(--line); } .history-item-button { align-items: flex-start; flex-direction: column; gap: 8px; } .history-item-link { align-self: flex-end; } .visit-detail-grid, .visit-fee-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .inventory-pagination { align-items: flex-start; flex-direction: column; } .pagination-controls { justify-content: flex-start; } }
.pharmacy-item-row { min-width: 0; }
@media (max-width: 520px) { .catalog-setting-row { grid-template-columns: minmax(0, 1fr) 34px; } .catalog-price, .catalog-discount-option { grid-column: 1; } .catalog-setting-row .icon-action { grid-column: 2; grid-row: 1 / span 3; } .performance-catalog-row { grid-template-columns: minmax(0, 1fr); } .catalog-setting-main { grid-template-columns: minmax(0, 1fr) 34px; } .catalog-setting-main .catalog-price, .catalog-setting-main .catalog-discount-option { grid-column: 1; } .catalog-setting-main .icon-action { grid-column: 2; grid-row: 1 / span 3; } .catalog-performance-editor, .performance-filters, .performance-summary { grid-template-columns: 1fr; } .performance-report .table-wrap { overflow-x: auto; } .performance-report table { min-width: 850px; } }
@media (max-width: 520px) { .pharmacy-item-row { grid-template-columns: 1fr; } .pharmacy-item-side { align-items: flex-start; } .dispense-patient, .dispense-total { align-items: flex-start; flex-direction: column; } }
@media (max-width: 820px) { .inventory-detail-info-layout { grid-template-columns: 1fr; } .inventory-detail-pricing { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 520px) { .inventory-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .inventory-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inventory-detail-tabs { margin-inline: -12px; padding-inline: 12px; overflow-x: auto; } .inventory-detail-tabs .report-tab { white-space: nowrap; } }

.mobile-secondary-header, .mobile-clinic-workspace { display: none; }

@media (max-width: 600px) {
  body { background: #f4f8f8; }
  .mobile-app-mode .topbar { display: none; }
  .mobile-app-mode .content { padding: 0 0 22px; }
  .app-shell { display: block; min-height: 100dvh; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .main-area { width: 100%; }
  .topbar { min-height: 62px; padding: 10px 14px; position: sticky; top: 0; z-index: 8; }
  .breadcrumb { font-size: 12px; }
  .breadcrumb span:first-of-type { display: none; }
  .topbar-date { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button:first-child { display: none; }
  .topbar-actions .user-chip { min-height: 34px; border: 0; background: transparent; }
  .topbar-actions .user-chip > span:last-child { display: none; }
  .topbar-actions .user-chip .avatar { width: 29px; height: 29px; }
  .topbar-actions .icon-button:last-child { width: 32px; }
  .content { padding: 14px 12px 22px; }
  .mobile-dashboard-mode .topbar { display: none; }
  .mobile-dashboard-mode .content { padding: 0 0 22px; }
  .mobile-dashboard-mode .desktop-dashboard { display: none; }
  .mobile-dashboard { display: block; min-height: calc(100dvh - 92px); background: #fff; }
  .mobile-dashboard-header { min-height: 203px; padding: calc(28px + env(safe-area-inset-top)) 25px 27px; color: #fff; background: #0cbe91; }
  .mobile-dashboard-user { display: flex; align-items: center; gap: 11px; }
  .mobile-dashboard-user .avatar { width: 43px; height: 43px; color: #16805f; background: #e7fbf4; font-size: 16px; }
  .mobile-dashboard-user strong, .mobile-dashboard-user small { display: block; }
  .mobile-dashboard-user strong { font-size: 19px; }
  .mobile-dashboard-user small { margin-top: 3px; color: rgba(255, 255, 255, .78); font-size: 11px; }
  .mobile-dashboard-clinic { display: flex; align-items: center; justify-content: space-between; margin-top: 44px; font-size: 22px; }
  .mobile-dashboard-clinic span:last-child { font-size: 36px; font-weight: 300; line-height: .7; }
  .mobile-work-summary { padding: 28px 20px 20px; }
  .mobile-section-title { display: flex; align-items: baseline; gap: 9px; color: var(--ink); }
  .mobile-section-title strong { font-size: 22px; }
  .mobile-section-title span { color: #84909e; font-size: 16px; }
  .mobile-summary-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding: 19px 0; border-radius: 7px; background: #f5f7f8; }
  .mobile-summary-card > div { min-width: 0; padding: 0 12px; }
  .mobile-summary-card > div + div { border-left: 1px solid #e1e6e8; }
  .mobile-summary-card strong, .mobile-summary-card span { display: block; }
  .mobile-summary-card strong { color: #0cbe91; font-size: 28px; line-height: 1; }
  .mobile-summary-card span { margin-top: 10px; color: #3e4a57; font-size: 13px; white-space: nowrap; }
  .mobile-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 8px; padding: 16px 18px 38px; }
  .mobile-menu-item { min-width: 0; display: grid; justify-items: center; gap: 10px; padding: 0; color: #2d3945; background: transparent; font-size: 14px; line-height: 1.25; }
  .mobile-menu-item:active .mobile-menu-icon { transform: scale(.94); }
  .mobile-menu-icon { width: 51px; height: 51px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 28px; font-weight: 700; line-height: 1; transition: transform .12s ease; }
  .mobile-menu-icon.teal { background: #0cbe91; }
  .mobile-menu-icon.blue { background: #1678eb; }
  .mobile-menu-icon.amber { background: #ffab15; }
  .mobile-menu-icon.green { background: #1cbd66; }
  .mobile-menu-icon.red { background: #fa4848; }
  .mobile-menu-icon.orange { background: #ee6a3d; }
  .page-heading { gap: 8px; margin-bottom: 13px; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 11px; }
  .panel { border-radius: 8px; box-shadow: 0 1px 4px rgba(25, 64, 67, .06); }
  .panel-header { padding: 13px 14px; }
  .panel-body { padding: 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 88px; padding: 12px; }
  .metric-value { font-size: 22px; }
  .grid-2-1, .grid-1-1 { gap: 12px; margin-top: 12px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-button { min-height: 86px; padding: 11px; }
  .quick-button span { margin-top: 9px; }
  .toolbar { gap: 8px; margin-bottom: 11px; }
  .toolbar-left, .toolbar-right { width: 100%; gap: 7px; }
  .toolbar-right { justify-content: flex-start; }
  .search-box { width: 100%; min-height: 40px; }
  .toolbar .button, .toolbar button { min-height: 38px; }
  .split-layout { min-height: auto; gap: 10px; }
  .side-list { max-height: 170px; padding: 8px; }
  .side-row { padding: 10px 8px; }
  .form-panel { padding: 14px; }
  .patient-banner { align-items: flex-start; gap: 10px; }
  .patient-actions { flex-wrap: wrap; justify-content: flex-end; }
  .field input, .field textarea, .field select, .select-box, .search-box { font-size: 16px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal, .modal.wide-modal { width: 100%; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px 14px 0 0; }
  .modal-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex: 0 0 auto; padding-bottom: calc(15px + env(safe-area-inset-bottom)); background: var(--surface); }
  .mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); height: calc(62px + env(safe-area-inset-bottom)); padding: 6px 4px env(safe-area-inset-bottom); border-top: 1px solid #dbe8e8; background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 16px rgba(25, 64, 67, .08); }
  .mobile-nav-item { min-width: 0; border: 0; border-radius: 7px; color: #789093; background: transparent; font: inherit; font-size: 10px; }
  .mobile-nav-item.active { color: #00a97d; background: transparent; font-weight: 700; }
  .mobile-nav-icon { display: block; height: 23px; font-size: 19px; line-height: 21px; }
  .mobile-nav-item span:last-child { display: block; line-height: 17px; }
  body.logged-out .mobile-nav { display: none; }
  .mobile-aux-page { min-height: calc(100dvh - 152px); padding: 4px 2px 18px; }
  .mobile-aux-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 3px 2px 14px; }
  .mobile-aux-heading h1 { margin: 0; color: var(--ink); font-size: 22px; }
  .mobile-aux-heading span, .mobile-profile-group-title { color: var(--muted); font-size: 12px; }
  .mobile-todo-list, .mobile-profile-group { overflow: hidden; border: 1px solid #e2ebeb; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(25, 64, 67, .04); }
  .mobile-todo-item { width: 100%; min-height: 75px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 12px 13px; border: 0; border-bottom: 1px solid #edf1f2; color: var(--ink); background: #fff; text-align: left; font: inherit; }
  .mobile-todo-item:last-child { border-bottom: 0; }
  .mobile-todo-item strong, .mobile-todo-item small { display: block; }
  .mobile-todo-item strong { font-size: 15px; }
  .mobile-todo-item small { margin-top: 5px; color: var(--muted); font-size: 11px; }
  .mobile-todo-item b, .mobile-profile-item b { color: #91a0a4; font-size: 22px; font-weight: 400; }
  .mobile-todo-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: #fff; font-size: 16px; font-weight: 700; }
  .mobile-todo-icon.amber { background: #ffab15; } .mobile-todo-icon.green { background: #1cbd66; } .mobile-todo-icon.blue { background: #1678eb; } .mobile-todo-icon.red { background: #fa4848; }
  .mobile-empty-state { padding: 30px 16px; color: var(--muted); border: 1px solid #e2ebeb; border-radius: 8px; background: #fff; text-align: center; font-size: 13px; }
  .mobile-profile-header { display: flex; align-items: center; gap: 13px; margin: 3px 4px 22px; }
  .mobile-profile-header .avatar { width: 52px; height: 52px; font-size: 19px; }
  .mobile-profile-header h1 { margin: 0; color: var(--ink); font-size: 20px; }
  .mobile-profile-header div > span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
  .mobile-profile-group { margin-top: 14px; }
  .mobile-profile-group-title { display: block; padding: 11px 13px 7px; background: #fff; }
  .mobile-profile-item { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; border: 0; border-top: 1px solid #edf1f2; color: var(--ink); background: #fff; font: inherit; font-size: 14px; text-align: left; }
  .mobile-profile-info { display: grid; gap: 5px; padding: 11px 13px; border-top: 1px solid #edf1f2; background: #f7fbfa; }
  .mobile-profile-info strong { color: #16795f; font-size: 12px; }
  .mobile-profile-info span { color: var(--muted); font-size: 11px; line-height: 1.5; }
  .mobile-logout-button { width: 100%; min-height: 46px; margin-top: 22px; border: 1px solid #ffd8d3; border-radius: 7px; color: #dc4b43; background: #fff; font: inherit; }
  .mobile-secondary-header { position: sticky; top: 62px; z-index: 7; display: block; margin: -14px -12px 14px; border-bottom: 1px solid #dfe9e8; background: #fff; box-shadow: 0 2px 7px rgba(25, 64, 67, .05); }
  .mobile-secondary-top { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
  .mobile-secondary-back { width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 6px; color: #286257; background: #edf8f5; font: 28px/28px Arial, sans-serif; }
  .mobile-secondary-top > div { min-width: 0; flex: 1; }
  .mobile-secondary-top strong, .mobile-secondary-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-secondary-top strong { color: var(--ink); font-size: 16px; }
  .mobile-secondary-top small { margin-top: 3px; color: var(--muted); font-size: 10px; }
  .mobile-secondary-action { min-height: 32px; flex: 0 0 auto; padding: 0 10px; border: 0; border-radius: 6px; color: #fff; background: #0c9c79; font: 12px inherit; white-space: nowrap; }
  .mobile-secondary-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 12px 9px; scrollbar-width: none; }
  .mobile-secondary-tabs::-webkit-scrollbar { display: none; }
  .mobile-secondary-tabs button { min-height: 29px; flex: 0 0 auto; padding: 0 10px; border: 1px solid #d8e7e5; border-radius: 5px; color: #607377; background: #fff; font: 11px inherit; white-space: nowrap; }
  .mobile-secondary-tabs button.active { border-color: #0c9c79; color: #087a5e; background: #e9f8f3; font-weight: 700; }
  .mobile-secondary-header + .page-heading { margin-top: 0; }
  #view[data-mobile-view] .mobile-secondary-header + .page-heading { min-height: 0; margin: 0 0 10px; }
  #view[data-mobile-view] .mobile-secondary-header + .page-heading > div:first-child { display: none; }
  #view[data-mobile-view] .mobile-secondary-header + .page-heading .heading-actions { width: 100%; display: flex; gap: 7px; overflow-x: auto; flex-wrap: nowrap; }
  #view[data-mobile-view] .mobile-secondary-header + .page-heading .heading-actions > button { min-height: 34px; flex: 0 0 auto; padding: 0 11px; font-size: 12px; }
  .mobile-clinic-workspace { display: block; margin: -14px -12px 0; background: #fff; min-height: calc(100dvh - 184px); }
  #view[data-mobile-view="outpatient"] > .mobile-secondary-header, #view[data-mobile-view="appointments"] > .mobile-secondary-header { display: none; }
  .mobile-clinic-page-bar { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid #dfe9e8; background: #fff; }
  .mobile-clinic-page-bar > button:first-child { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 5px; color: #078b69; background: #edf8f5; font: 25px/25px Arial, sans-serif; }
  .mobile-clinic-page-bar strong { color: #173f37; font-size: 17px; }
  .mobile-clinic-page-bar > button:last-child { min-height: 30px; padding: 0 10px; border: 0; border-radius: 5px; color: #fff; background: #0caa80; font: 12px inherit; }
  .mobile-patient-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; border-bottom: 1px solid #d8ece6; background: #effaf7; }
  .mobile-patient-strip strong, .mobile-patient-strip small { display: block; }
  .mobile-patient-strip strong { color: #173f37; font-size: 15px; }
  .mobile-patient-strip small { margin-top: 5px; color: #52776e; font-size: 11px; }
  .mobile-history-button { min-height: 29px; padding: 0 9px; border: 1px solid #b9dcd1; border-radius: 5px; color: #087a5e; background: #fff; font: 11px inherit; }
  .mobile-clinic-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #dfe9e8; }
  .mobile-clinic-tabs button { min-height: 46px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: #46677e; background: #fff; font: 14px inherit; }
  .mobile-clinic-tabs button.active { border-bottom-color: #0cbe91; color: #079872; font-weight: 700; }
  .mobile-clinic-panel { padding: 14px 12px calc(88px + env(safe-area-inset-bottom)); }
  .mobile-clinic-panel.hidden { display: none; }
  .mobile-panel-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .mobile-panel-title strong { color: #1d3c4e; font-size: 15px; }
  .mobile-panel-title span { color: #79909c; font-size: 11px; }
  .mobile-clinic-panel .medical-record-section, .mobile-clinic-panel .form-section { margin: 0 0 12px; padding: 0; border: 0; }
  .mobile-clinic-panel .medical-record-section .section-heading { display: none; }
  .mobile-clinic-panel .field-grid { gap: 10px; }
  .mobile-clinic-panel .field label { color: #58717e; font-size: 12px; }
  .mobile-clinic-panel .field textarea { min-height: 78px; }
  .mobile-treatment-section > h3 { margin: 0 0 10px; color: #1d3c4e; font-size: 15px; }
  .mobile-clinic-panel .prescription-card { border-radius: 7px; }
  .mobile-clinic-panel .prescription-card-header { padding: 12px; }
  .mobile-clinic-panel[data-mobile-outpatient-panel="prescription"] .treatment-order-card { display: none; }
  .mobile-clinic-panel .prescription-notice-card { margin-bottom: 10px; }
  .mobile-clinic-panel .prescription-row-herbal { grid-template-columns: minmax(0, 1.45fr) 56px 42px minmax(88px, .9fr) 28px; gap: 6px; padding: 9px 10px; }
  .mobile-clinic-panel .prescription-row-herbal .medication-control { grid-column: 1; }
  .mobile-clinic-panel .prescription-row-herbal [data-prescription-field="doseAmount"] { grid-column: 2; }
  .mobile-clinic-panel .prescription-row-herbal [data-prescription-field="doseUnit"] { grid-column: 3; }
  .mobile-clinic-panel .prescription-row-herbal [data-prescription-field="specialInstruction"] { grid-column: 4; }
  .mobile-clinic-panel .prescription-row-herbal .prescription-money { display: none; }
  .mobile-clinic-panel .prescription-row-herbal .icon-action { grid-column: 5; min-width: 24px; padding: 0; }
  .mobile-clinic-panel .herbal-prescription-meta { margin: 0 10px 10px; border: 1px solid #d8e4ec; border-radius: 7px; background: #fff; padding: 10px; }
  .mobile-clinic-panel .herbal-meta-heading { margin-bottom: 8px; }
  .mobile-clinic-panel .herbal-meta-heading strong { color: #31597e; }
  .mobile-clinic-panel .herbal-meta-grid { gap: 9px; }
  .mobile-clinic-panel .herbal-meta-grid label { min-height: 57px; padding: 8px 9px; border: 1px solid #d8e4ec; border-radius: 6px; background: #fff; }
  .mobile-clinic-panel .herbal-meta-grid input, .mobile-clinic-panel .herbal-meta-grid select { min-height: 23px; padding: 0; border: 0; border-radius: 0; color: #173a61; background: transparent; }
  .mobile-clinic-panel .herbal-processing-fee { grid-column: 1 / -1; }
  .mobile-save-bar { position: fixed; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); left: 0; z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-top: 1px solid #dbe8e8; background: rgba(255, 255, 255, .98); box-shadow: 0 -3px 12px rgba(25, 64, 67, .08); }
  .mobile-save-bar strong { color: #0a8d6d; font-size: 19px; }
  .mobile-save-bar .primary-button { min-height: 38px; padding: 0 17px; }
  .mobile-workspace-empty, .mobile-panel-empty { display: grid; gap: 9px; padding: 34px 20px; color: #71828e; text-align: center; font-size: 12px; }
  .mobile-workspace-empty strong { color: #253d4d; font-size: 16px; }
  .mobile-workspace-empty .primary-button { justify-self: center; margin-top: 8px; }
  .mobile-appointments-workspace { padding: 12px; background: #f4f8f8; }
  .mobile-list-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 5px 2px 12px; color: #52717e; font-size: 12px; }
  .mobile-list-toolbar button { min-height: 30px; padding: 0; border: 0; color: #00a97d; background: transparent; font: 13px inherit; }
  .mobile-appointment-list { overflow: hidden; border: 1px solid #dce8e7; border-radius: 8px; background: #fff; }
  .mobile-appointment-row { width: 100%; min-height: 63px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid #e6efee; color: #263f50; background: #fff; text-align: left; font: inherit; }
  .mobile-appointment-row:last-child { border-bottom: 0; }
  .mobile-appointment-row strong, .mobile-appointment-row small { display: block; }
  .mobile-appointment-row strong { font-size: 14px; }
  .mobile-appointment-row small { margin-top: 5px; color: #718590; font-size: 11px; }
  .mobile-outline-action { width: 100%; min-height: 43px; margin-top: 14px; border: 1px solid #0cbe91; border-radius: 7px; color: #079872; background: #fff; font: 14px inherit; }
  #view[data-mobile-view] .toolbar { padding: 9px 10px; border: 1px solid #e1ebea; border-radius: 7px; background: #fff; box-shadow: 0 1px 3px rgba(25, 64, 67, .04); }
  #view[data-mobile-view] .toolbar .report-tabs { overflow-x: auto; flex-wrap: nowrap; margin: -1px -2px; padding: 1px 2px; }
  #view[data-mobile-view] .toolbar .report-tab { flex: 0 0 auto; white-space: nowrap; }
  #view[data-mobile-view="appointments"] .grid-2-1 > .panel:first-child .panel-header { padding-bottom: 8px; }
  #view[data-mobile-view="appointments"] .grid-2-1 > .panel:first-child .table-wrap { margin-inline: -14px; }
  #view[data-mobile-view="outpatient"] .side-list { max-height: 210px; padding: 6px; border: 1px solid #e1ebea; }
  #view[data-mobile-view="outpatient"] .patient-banner { margin: -14px -14px 14px; padding: 13px 14px; background: #effaf7; }
  #view[data-mobile-view="billing"] .bill-layout { gap: 10px; }
  #view[data-mobile-view="billing"] .bill-list { max-height: 240px; overflow-y: auto; }
  #view[data-mobile-view="retail"] .retail-layout { gap: 10px; }
  #view[data-mobile-view="retail"] .retail-form .panel-body { gap: 14px; }
  #view[data-mobile-view="inventory"] .inventory-summary { margin-bottom: 10px; }
  #view[data-mobile-view="inventory"] .inventory-stat { min-height: 75px; display: grid; align-content: space-between; }
  #view[data-mobile-view="reports"] .metric-grid { margin-top: 0; }
  #view[data-mobile-view="members"] .member-tier-summary, #view[data-mobile-view="members"] .member-list-panel { margin-top: 10px; }
  .prescription-row-herbal { grid-template-columns: minmax(0, 1fr) minmax(72px, .75fr) 48px minmax(0, 1fr) 58px 28px; }
  .prescription-row-herbal [data-prescription-field="specialInstruction"] { grid-column: 1 / -1; }
  .herbal-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .herbal-meta-note { grid-column: 1 / -1; }
}

.auth-panel { max-width: 420px; margin: 12vh auto; padding: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.auth-brand { display: grid; gap: 5px; margin-bottom: 24px; }
.auth-brand strong { color: var(--ink); font-size: 22px; }
.auth-brand span, .auth-hint { color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.auth-form input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: var(--ink); background: #fff; font: inherit; }
.auth-form input:focus { border-color: #8ab9e7; outline: 2px solid rgba(45, 115, 181, .12); }
.auth-form button { min-height: 42px; }
.auth-hint { margin: 0; }
.app-download-card { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.app-download-card img { flex: 0 0 120px; width: 120px; height: 120px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.app-download-card > div { display: grid; gap: 8px; min-width: 0; }
.app-download-card strong { font-size: 15px; }
.app-download-card span { color: var(--muted); font-size: 12px; }
.app-download-card a { color: #176b66; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 360px) { .app-download-card { gap: 10px; } .app-download-card img { flex-basis: 104px; width: 104px; height: 104px; } }
@media (max-width: 520px) { .prescription-row-infusion .infusion-dose-control { grid-column: 1 / -1; } }

.negotiation-sheet { display: grid; gap: 16px; }
.negotiation-switches { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 8px; background: var(--surface-soft, #f7faf9); }
.negotiation-switches > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.negotiation-switches > div > span { margin-right: 4px; color: var(--muted); font-size: 13px; }
.negotiation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.negotiation-summary > span { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.negotiation-summary strong { color: var(--ink); font-size: 20px; }
.negotiation-summary.loading { display: block; color: var(--muted); }
.negotiation-lines { display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.negotiation-line { display: grid; grid-template-columns: minmax(180px, 1.5fr) .8fr minmax(130px, .8fr) .8fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.negotiation-line > div, .negotiation-line label { display: grid; gap: 4px; }
.negotiation-line small, .negotiation-line label span { color: var(--muted); font-size: 12px; }
.negotiation-line input { width: 100%; min-height: 36px; }
.negotiation-line.restricted { background: #f7f7f7; color: var(--muted); }
.negotiation-warning, .negotiation-error, .negotiation-authorization { padding: 12px; border-radius: 8px; }
.negotiation-warning { background: #fff7df; color: #815e00; }
.negotiation-error { background: #fff0ef; color: #a5312a; }
.negotiation-authorization { display: grid; gap: 10px; border: 1px solid #f0cf77; background: #fffaf0; }
.negotiation-authorization.authorized { border-color: #8fd2bd; background: #effaf7; }
.negotiation-policy-list, .catalog-policy-list { display: grid; gap: 10px; margin-bottom: 16px; }
.negotiation-policy-row { display: grid; grid-template-columns: 120px 140px 1fr 1fr; align-items: end; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.negotiation-policy-row > label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.catalog-policy-list { margin-top: 16px; padding: 12px; border-radius: 8px; background: var(--surface-soft, #f7faf9); }
@media (max-width: 720px) {
  .negotiation-summary { grid-template-columns: 1fr; }
  .negotiation-line, .negotiation-policy-row { grid-template-columns: 1fr; }
}
.infusion-task-card .task-footer { flex-wrap: wrap; gap: 8px; }
.infusion-task-warnings { color: #985017; margin: 8px 0; }
.print-driver-warning { flex-basis: 100%; font-size: 12px; color: #985017; overflow-wrap: anywhere; }
.procurement-panel { display: grid; gap: 10px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft, #f7faf9); }
.barcode-scanner video { width: 100%; max-height: 240px; object-fit: cover; border-radius: 8px; background: #101817; }
.barcode-scanner-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; }
.barcode-scanner-head strong { color: var(--text); }
.outbound-document-form .outbound-document-line {
  display: grid;
  grid-template-columns: minmax(230px, 2fr) minmax(110px, 1fr) minmax(150px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.outbound-document-line .outbound-legacy-option { display: flex; align-items: center; gap: 8px; }
.outbound-document-line .ghost-button { justify-self: start; }
.outbound-document-detail .table-wrap { max-height: 420px; overflow: auto; }
@media (max-width: 720px) {
  .outbound-document-form .outbound-document-line { grid-template-columns: 1fr; }
}
.pharmacy-group-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 12px 0; }
.pharmacy-group-meta div { display: flex; gap: 8px; }
.pharmacy-group-meta dt { color: #667085; }
.pharmacy-group-meta dd { margin: 0; overflow-wrap: anywhere; }