.device-screen-content {
  position: absolute;
  left: var(--screen-left, 0px);
  top: var(--screen-top, 0px);
  width: 960px;
  height: 600px;
  transform-origin: 0 0;
  transform: scale(var(--screen-scale, 1));
}
@media (max-width: 760px) {
  .device-screen-content { width: 280px; height: 640px; }
}
.device-screen-content .feature-app-screen {
  display: grid;
  grid-template-columns: 21% minmax(0, 1fr);
  height: 100%;
  font-size: 14.4px;
  line-height: 1.5;
  color: #354030;
}

.device-screen-content .app-sidebar {
  display: flex;
  flex-direction: column;
  padding: 1.8em .8em;
  background: #f0f4ed;
  border-right: 1px solid #e0e7dc;
}

.device-screen-content .app-logo { width: 8.5em; max-width: 100%; }

.device-screen-content .app-logo img { display: block; width: 100%; height: auto; }

.device-screen-content .app-sidebar .app-logo { margin: 0 .5em 1.9em; max-width: calc(100% - 1em); }

.device-screen-content .app-section-label { font-size: .75em; letter-spacing: .04em; color: #829079; margin: 0 .7em 1em; }

.device-screen-content .app-menu-item { display: flex; align-items: center; gap: .65em; padding: .8em .6em; margin-bottom: .3em; border-radius: 7px; font-size: .85em; color: #697660; }

.device-screen-content .app-menu-item.current { background: #dbe9d3; color: #34452c; font-weight: 700; }

.device-screen-content .app-menu-item i { font-style: normal; width: 1.1em; text-align: center; }

.device-screen-content .app-sidebar-bottom { margin-top: auto; padding: 1em .5em 0; font-size: .75em; color: #839079; }

.device-screen-content .app-workspace { min-width: 0; padding: 1.8em 2em; }

.device-screen-content .mobile-app-bar { display: none; }

.device-screen-content .muted { font-size: .85em; color: #7c8775; }

.device-screen-content .calendar-title { display: flex; justify-content: space-between; align-items: start; }

.device-screen-content .calendar-title h2, .device-screen-content .calendar-title h3, .device-screen-content .app-page-title h3 { font-size: 1.65em; line-height: 1.3; margin: .3em 0 1em; }

.device-screen-content .calendar-symbol { display: none; }

.device-screen-content .day-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8em; margin: 0 0 1.5em; }

.device-screen-content .preview-day, .device-screen-content .day-picker button { font-size: inherit; line-height: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: .35em; padding: .65em .5em; background: #fff; border: 1px solid #e2e8df; border-radius: 5px; font-weight: 700; }

.device-screen-content .preview-day span, .device-screen-content .day-picker button span { font-size: .7em; font-weight: 500; }

.device-screen-content .preview-day.active, .device-screen-content .day-picker button.active { color: #354030; background: #9dbf95; border-color: #9dbf95; }

.device-screen-content .agenda-heading { display: flex; justify-content: space-between; gap: 1em; font-size: .85em; padding-bottom: .65em; margin-bottom: .8em; border-bottom: 1px solid #e3e9df; color: #7b8973; }

.device-screen-content .agenda-heading span:last-child { font-size: .85em; }

.device-screen-content .appointment { display: flex; align-items: center; gap: 1.3em; padding: 1.05em .9em; margin: .75em 0; background: #fff; border: 1px solid #e3e9df; border-left: 3px solid #c3d2b9; border-radius: 7px; }

.device-screen-content .appointment.green { background: #edf4e8; border-left-color: #9dbf95; }

.device-screen-content .appointment time, .device-screen-content .appointment strong { font-size: .9em; }

.device-screen-content .appointment div { flex: 1; }

.device-screen-content .appointment strong { display: block; }

.device-screen-content .appointment div > span { display: block; font-size: .8em; margin-top: .25em; color: #839079; }

.device-screen-content .appointment-label { display: inline; font-size: .7em; background: #edf4e7; color: #657a58; border-radius: 20px; padding: .5em .7em; }

.device-screen-content .calendar-gap { display: flex; gap: 1.6em; padding: .5em 1em; font-size: .8em; color: #839079; }

.device-screen-content .product-bottom { display: flex; justify-content: space-between; margin-top: 1.4em; padding: 0; font-size: .7em; color: #839079; }

.device-screen-content .app-page-title { display: flex; align-items: start; justify-content: space-between; gap: 1em; margin-bottom: 1.2em; }

.device-screen-content .app-page-title h3 { margin-bottom: 0; }

.device-screen-content .app-page-title > span { font-size: .75em; padding: .6em 1em; border: 1px solid #dce5d6; border-radius: 20px; color: #718367; }

.device-screen-content .app-patient-search { padding: .85em 1em; margin-bottom: 1.2em; border: 1px solid #dfe7d8; border-radius: 7px; background: #fff; font-size: .85em; color: #8a9582; }

.device-screen-content .app-profile { display: flex; align-items: center; gap: 1em; padding: 1.2em; margin-bottom: 1.1em; border: 1px solid #dfe7d8; border-radius: 8px; background: #edf4e8; }

.device-screen-content .app-profile > span { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: #d6e5cd; color: #58764d; }

.device-screen-content .app-profile strong, .device-screen-content .app-record strong { display: block; font-size: .9em; }

.device-screen-content .app-profile small, .device-screen-content .app-record small { display: block; font-size: .75em; margin-top: .35em; color: #7b8973; }

.device-screen-content .app-contact-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-bottom: 1.2em; }

.device-screen-content .app-contact-summary > div { padding: .9em; border: 1px solid #e0e7da; border-radius: 6px; background: #fff; }

.device-screen-content .app-contact-summary small { display: block; font-size: .7em; color: #86927e; margin-bottom: .5em; }

.device-screen-content .app-contact-summary span { font-size: .85em; }

.device-screen-content .app-record { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em; margin-top: .6em; border: 1px solid #e1e8dc; border-radius: 6px; background: #fff; }

.device-screen-content .app-record > span { font-size: .75em; color: #6d8062; }

.device-screen-content .app-record > b { font-family: Geologica, Arial, sans-serif; font-weight: 400; font-size: 1.2em; white-space: nowrap; }

.device-screen-content .app-income-summary { display: grid; grid-template-columns: 1.3fr 1fr; gap: .8em; margin-bottom: 1.4em; }

.device-screen-content .app-income-summary > div { padding: 1.3em 1.2em; border: 1px solid #dfe7d8; border-radius: 8px; background: #edf4e8; }

.device-screen-content .app-income-summary > div:last-child { background: #fff; }

.device-screen-content .app-income-summary small { display: block; font-size: .75em; color: #74866a; margin-bottom: .65em; }

.device-screen-content .app-income-summary strong { font-family: Geologica, Arial, sans-serif; font-size: 2em; font-weight: 400; }

.device-screen-content .preview-tabs { display: flex; gap: 1.6em; margin-bottom: 1.1em; border-bottom: 1px solid #dfe7d8; font-size: .85em; }

.device-screen-content .preview-tabs span { padding-bottom: .65em; }

.device-screen-content .preview-tabs .active { border-bottom: 2px solid #9dbf95; font-weight: 700; }

.device-screen-content .preview-note-meta { display: flex; justify-content: space-between; gap: 1em; font-size: .75em; color: #829079; margin-bottom: 1.2em; }

.device-screen-content .preview-note { padding: 1.2em; margin-bottom: .8em; border: 1px solid #e0e7da; border-radius: 7px; background: #fff; }

.device-screen-content .preview-note small { display: block; font-size: .65em; color: #829079; letter-spacing: .04em; margin-bottom: .65em; }

.device-screen-content .preview-note strong { font-size: .9em; }

.device-screen-content .preview-lines { display: grid; gap: .5em; margin-top: 1em; }

.device-screen-content .preview-lines i { display: block; height: .35em; background: #e8ede5; border-radius: 5px; }

.device-screen-content .preview-lines i:last-child { width: 65%; }

.device-screen-content .preview-lines.short { width: 80%; }

.device-screen-content .preview-save { display: flex; justify-content: space-between; gap: 1em; font-size: .75em; color: #7b8973; margin-top: 1.2em; }

.device-screen-content .preview-connection { display: flex; align-items: center; justify-content: center; gap: 2em; padding: 1.6em 0; }

.device-screen-content .preview-connection > div { display: grid; justify-items: center; gap: .7em; font-size: .85em; }

.device-screen-content .preview-calendar-icon { display: grid; place-items: center; width: 2.3em; height: 2.3em; font-size: 1.7em; color: #56794a; border-radius: 12px; background: #e1ecdb; }

.device-screen-content .preview-calendar-icon.google { background: #edf2fc; color: #4475c5; font-size: 1.7em; font-weight: 700; }

.device-screen-content .preview-sync { font-size: 2em; color: #9dbf95; }

.device-screen-content .preview-connected { display: flex; align-items: center; gap: .9em; padding: 1em; margin-bottom: 1.3em; border-radius: 7px; background: #edf4e8; font-size: .85em; }

.device-screen-content .preview-connected > span { color: #58764d; font-size: 1.3em; }

.device-screen-content .preview-connected small { display: block; color: #7b8973; margin-top: .35em; }

@media (max-width: 760px) {
.device-screen-content .feature-app-screen { grid-template-columns: 1fr; font-size: 11px; }

.device-screen-content .app-sidebar { display: none; }

.device-screen-content .app-workspace { padding: 2.3em 1em 1.1em; }

.device-screen-content .mobile-app-bar { display: flex; justify-content: space-between; align-items: center; font-size: .65em; color: #829079; margin-bottom: 1.8em; }

.device-screen-content .mobile-app-bar .app-logo { width: 90px; }

.device-screen-content .calendar-title h2, .device-screen-content .calendar-title h3, .device-screen-content .app-page-title h3 { font-size: 1.45em; }

.device-screen-content .app-page-title > span, .device-screen-content .product-bottom span:last-child { display: none; }

.device-screen-content .day-picker { gap: .4em; }

.device-screen-content .preview-day, .device-screen-content .day-picker button { padding: .65em .2em; }

.device-screen-content .appointment { gap: .7em; padding: 1em .65em; }

.device-screen-content .app-contact-summary { grid-template-columns: 1fr; gap: .55em; }

.device-screen-content .app-profile { padding: 1em .8em; }

.device-screen-content .app-income-summary { gap: .5em; }

.device-screen-content .app-income-summary > div { padding: 1.2em .7em; }

.device-screen-content .app-income-summary strong { font-size: 1.8em; }

.device-screen-content .app-record { padding: .8em; gap: .6em; }

.device-screen-content .preview-note-meta { flex-direction: column; gap: .3em; }

.device-screen-content .preview-connection { gap: 1.3em; }

.device-screen-content .preview-save { flex-direction: column; gap: .4em; }
}