.ds-app__main {
  background: radial-gradient(circle at 88% -10%, rgba(37,99,235,.30), transparent 34rem),
              linear-gradient(180deg, var(--ds-color-bg) 0%, var(--ds-color-bg-deep) 100%);
}
.ds-app__main :is(.touch-dashboard,.timeclock-page,.timesheet-page,.office-page,.employees-page,.office-form-page,.oj-page,.page,.requests-page,.office-timesheets-page,.attendance-page) {
  width: 100% !important; min-width: 0 !important; min-height: 100vh !important; height: auto !important;
  box-sizing: border-box !important; background: transparent !important; color: var(--ds-color-text) !important;
  font-family: var(--ds-font-family) !important;
}
.ds-app__main :is(.timesheet-page,.office-page,.employees-page,.office-form-page,.oj-page,.page,.requests-page,.office-timesheets-page,.attendance-page) { padding: var(--ds-space-8) !important; }
.ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) h1 {
  color: var(--ds-color-text) !important; font-family: var(--ds-font-family) !important;
  font-size: clamp(1.75rem,3vw,2.25rem) !important; font-weight: 750 !important;
  letter-spacing: -.025em !important; text-align: left !important; text-transform: none !important;
}

.ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
}
.ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) p { color: var(--ds-color-text-muted) !important; font-size: var(--ds-font-size-md) !important; text-align: left !important; }
.ds-app__main :is(.back-button,.back)[href="/office"] { display: none !important; }
.ds-app__main :is(.employee-card,.request-card,.timesheet-card,.stat-card,.oj-panel,.oj-stats article,.filters,.filters-card,.list-card,.form-card,.jobs-panel,.punches-card,.absence-card,.calendar-wrapper,.day-card,.quick-periods,.summary,.month-bar,.legend) {
  border: 1px solid var(--ds-color-border) !important; border-radius: var(--ds-radius-card) !important;
  background: rgba(15,27,46,.84) !important; box-shadow: var(--ds-shadow-card) !important; color: var(--ds-color-text) !important;
}
.ds-app__main :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  min-height: var(--ds-control-height); border: 1px solid var(--ds-color-border-strong) !important;
  border-radius: var(--ds-radius-control) !important; background: rgba(2,6,23,.72) !important;
  color: var(--ds-color-text) !important; font-family: var(--ds-font-family) !important;
}
.ds-app__main :is(input,select,textarea)::placeholder { color: var(--ds-color-text-muted) !important; }
.ds-app__main button:not(.day):not(.calendar-cell-button) { border-radius: var(--ds-radius-control) !important; font-family: var(--ds-font-family) !important; }
.ds-app__main :is(.new-button,.primary,.today-button,.approve,.submit,.save,.oj-btn-job,.oj-btn-customer) {
  border: 0 !important; background: linear-gradient(135deg,var(--ds-color-primary),var(--ds-color-accent)) !important; color: white !important;
}
.ds-app__main :is(.topbar-actions,.oj-header-actions,.header-actions) > button,
.ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) > button:is(.new-button,.primary,.today-button,.save) {
  width: 200px !important;
  min-width: 200px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.ds-app__main :is(.page-message,.message,.note-box,.warning-box,.form-error) { border-radius: var(--ds-radius-control) !important; }
.ds-app__main :is(.pill,.status,.oj-status,.oj-job-status) { border-radius: 999px !important; letter-spacing: .02em !important; }
.ds-app__main :is(.modal,.request-modal,.edit-modal,.job-picker-modal,.copy-modal,.hours-modal,.punch-modal-window,.day-dialog) {
  border: 1px solid var(--ds-color-border-strong) !important; border-radius: var(--ds-radius-dialog) !important;
  background: var(--ds-color-surface) !important; color: var(--ds-color-text) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.48) !important;
}
.ds-app__main .touch-dashboard { padding: clamp(1rem,4vw,3rem) !important; }
.ds-app__main .touch-dashboard .brand { color: var(--ds-color-text) !important; font-family: var(--ds-font-family) !important; font-size: clamp(2rem,6vw,3.25rem) !important; letter-spacing: -.04em; }
.ds-app__main .touch-buttons { max-width: 46rem !important; }
.ds-app__main .touch-button {
  min-height: 5.5rem !important; height: auto !important; border: 1px solid var(--ds-color-border) !important;
  border-radius: var(--ds-radius-card) !important; background: linear-gradient(135deg,var(--ds-color-primary),#1d4ed8) !important;
  font-family: var(--ds-font-family) !important; font-size: clamp(1.25rem,3vw,2rem) !important; box-shadow: var(--ds-shadow-card) !important;
}
.ds-app__main .touch-button.primary { background: linear-gradient(135deg,var(--ds-color-success),#059669) !important; }
.ds-app__main .timeclock-page { padding: var(--ds-space-6) !important; }
.ds-app__main .scan-card { border: 1px solid var(--ds-color-border) !important; background: rgba(15,27,46,.92) !important; box-shadow: var(--ds-shadow-card) !important; }
@media (max-width: 760px) {
  .ds-app__main :is(.timesheet-page,.office-page,.employees-page,.office-form-page,.oj-page,.page,.requests-page,.office-timesheets-page,.attendance-page) { padding: var(--ds-space-4) !important; }
  .ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) { align-items: stretch !important; grid-template-columns: 1fr !important; flex-direction: column !important; gap: var(--ds-space-4) !important; }
  .ds-app__main :is(.topbar-actions,.oj-header-actions,.actions) { width: 100%; flex-wrap: wrap; }
  .ds-app__main :is(.topbar-actions,.oj-header-actions,.header-actions) > button,
  .ds-app__main :is(.topbar,.top,.header,.oj-header,.office-header) > button:is(.new-button,.primary,.today-button,.save) {
    width: 100% !important;
    min-width: 0 !important;
  }
}