:root {
  --purple: #763f98;
  --purple-dark: #593071;
  --black: #000000;
  --white: #ffffff;
  --paper: #f2f2f2;
  --muted: #666666;
  --danger: #b42424;
  --success: #1f7a42;
  --line: 4px;
  --font: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
  min-height: 100%;
  margin: 0;
  color: var(--black);
  background:
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  font-family: var(--font);
}
button, input, select { font: inherit; }
button, select, input { border-radius: 0; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.wb-app { width: min(1180px, 100%); margin: 0 auto; padding: 18px; }
.wb-frame { border: var(--line) solid var(--black); background: var(--white); }
.wb-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  background: var(--white);
  border: var(--line) solid var(--black);
}
.wb-brand { padding: 14px 16px; border-right: var(--line) solid var(--black); }
.wb-brand h1 { margin: 0; color: var(--purple); font-size: clamp(30px, 6vw, 58px); line-height: .9; letter-spacing: -2px; }
.wb-brand p { margin: 8px 0 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.wb-sync { min-width: 154px; padding: 12px; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.wb-sync[data-state="saving"] { background: #f0e7f5; }
.wb-sync[data-state="synced"] { color: var(--success); }
.wb-sync[data-state="error"] { color: var(--danger); }

.wb-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 16px; margin-top: 16px; }
.wb-main { padding: 18px; }
.wb-side { display: grid; gap: 16px; align-content: start; }

.wb-label { display: block; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.wb-day-line { display: flex; justify-content: space-between; gap: 10px; align-items: center; border-bottom: 3px solid var(--black); padding-bottom: 12px; }
.wb-day-state { font-weight: 900; font-size: 13px; text-transform: uppercase; }
.wb-day-state strong { color: var(--purple); }
.wb-day-btn { min-height: 44px; border: 3px solid var(--black); background: var(--white); font-weight: 900; padding: 8px 14px; text-transform: uppercase; }
.wb-day-btn.is-active { background: var(--black); color: var(--white); }

.wb-clock-wrap { text-align: center; padding: 28px 0 22px; }
.wb-clock-label { font-size: 14px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.wb-clock { font-variant-numeric: tabular-nums; font-weight: 900; font-size: clamp(58px, 12vw, 112px); line-height: .95; letter-spacing: -5px; color: var(--purple); margin-top: 8px; }
.wb-segment { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 15px; margin-top: 10px; }
.wb-running-dot { display: inline-block; width: 11px; height: 11px; border: 2px solid var(--black); margin-right: 6px; background: var(--white); }
.wb-running-dot.is-running { background: var(--purple); animation: wb-blink 1s steps(1) infinite; }
@keyframes wb-blink { 50% { background: var(--white); } }

.wb-progress-frame { height: 58px; border: 6px solid var(--black); position: relative; overflow: hidden; background: var(--white); }
.wb-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--purple); transition: width .2s linear; }
.wb-progress-divisions { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); pointer-events: none; }
.wb-progress-divisions span { border-right: 2px solid var(--black); }
.wb-progress-divisions span:last-child { border-right: 0; }
.wb-progress-text { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 15px; z-index: 2; }

.wb-select { width: 100%; min-height: 54px; border: 4px solid var(--black); background: var(--white); color: var(--black); font-weight: 900; padding: 8px 36px 8px 12px; }
.wb-day-btn:hover, .wb-mini-btn:hover { background: #eee; }

.wb-primary {
  width: 100%; min-height: 92px; margin-top: 12px; border: 6px solid var(--black);
  background: var(--purple); color: var(--white); font-weight: 900; font-size: clamp(26px, 6vw, 46px); letter-spacing: -.04em; text-transform: uppercase;
}
.wb-primary:hover { background: var(--purple-dark); }
.wb-primary.is-running { background: var(--black); color: var(--white); }
.wb-primary:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 4px solid var(--purple); outline-offset: 3px; }
.wb-hint { margin: 9px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }

.wb-stats { display: grid; grid-template-columns: repeat(2, 1fr); border: var(--line) solid var(--black); background: var(--black); gap: var(--line); }
.wb-stat { background: var(--white); min-height: 112px; padding: 14px; }
.wb-stat-name { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wb-stat-value { font-size: clamp(25px, 4vw, 38px); color: var(--purple); font-weight: 900; margin-top: 12px; font-variant-numeric: tabular-nums; }
.wb-stat-sub { color: var(--muted); font-size: 11px; font-weight: 700; margin-top: 3px; }

.wb-panel { border: var(--line) solid var(--black); background: var(--white); }
.wb-panel-head { min-height: 48px; padding: 11px 13px; border-bottom: var(--line) solid var(--black); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.wb-panel-head h2 { margin: 0; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.wb-panel-body { padding: 12px; }
.wb-mini-btn { min-height: 36px; border: 3px solid var(--black); background: var(--white); padding: 6px 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.wb-mini-btn.is-danger { color: var(--danger); }
.wb-button-row { display: flex; flex-wrap: wrap; gap: 8px; }

.wb-purpose { display: grid; gap: 8px; }
.wb-purpose-row { border: 3px solid var(--black); display: grid; grid-template-columns: 105px 1fr; align-items: stretch; }
.wb-purpose-row strong { display: grid; place-items: center; padding: 11px 9px; background: var(--purple); color: var(--white); font-size: 12px; letter-spacing: .06em; }
.wb-purpose-row span { padding: 11px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.wb-purpose-row + .wb-purpose-row strong { background: var(--black); }

.wb-history { margin-top: 16px; }
.wb-table-wrap { overflow-x: auto; }
.wb-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.wb-table th, .wb-table td { border: 2px solid var(--black); padding: 9px; text-align: left; font-size: 12px; }
.wb-table th { background: var(--black); color: var(--white); text-transform: uppercase; letter-spacing: .04em; }
.wb-table td:last-child, .wb-table th:last-child { text-align: right; }
.wb-empty { text-align: center; padding: 28px 10px; font-weight: 800; color: var(--muted); }

.wb-footer { margin-top: 16px; display: flex; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }

.wb-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 16px; z-index: 1000; }
.wb-modal { width: min(520px, 100%); border: 6px solid var(--black); background: var(--white); }
.wb-modal-head { padding: 13px; background: var(--purple); color: var(--white); border-bottom: 5px solid var(--black); display: flex; align-items: center; justify-content: space-between; }
.wb-modal-head h3 { margin: 0; text-transform: uppercase; }
.wb-close { width: 38px; height: 38px; border: 3px solid var(--black); background: var(--white); font-weight: 900; }
.wb-form { padding: 16px; display: grid; gap: 13px; }
.wb-input { width: 100%; min-height: 46px; border: 3px solid var(--black); padding: 9px; background: var(--white); }
.wb-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb-form-actions button { min-height: 48px; border: 4px solid var(--black); font-weight: 900; text-transform: uppercase; }
.wb-save { background: var(--purple); color: var(--white); }
.wb-error { border: 3px solid var(--danger); color: var(--danger); padding: 8px; font-size: 12px; font-weight: 800; }
.wb-toast { position: fixed; right: 16px; bottom: 16px; max-width: 390px; border: 4px solid var(--black); background: var(--white); padding: 13px 16px; font-weight: 900; z-index: 1200; }
.wb-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--purple); }

@media (max-width: 820px) {
  .wb-app { padding: 10px; }
  .wb-grid { grid-template-columns: 1fr; }
  .wb-topbar { grid-template-columns: 1fr; }
  .wb-brand { border-right: 0; border-bottom: var(--line) solid var(--black); }
  .wb-sync { min-height: 44px; }
  .wb-main { padding: 13px; }
  .wb-day-line { align-items: stretch; flex-direction: column; }
  .wb-day-btn { width: 100%; }
  .wb-footer { flex-direction: column; }
}

@media (max-width: 450px) {
  .wb-stats { grid-template-columns: 1fr 1fr; }
  .wb-stat { min-height: 96px; padding: 11px; }
  .wb-clock { letter-spacing: -3px; }
  .wb-progress-frame { height: 52px; }
}

/* Monthly goal widget, based on the supplied Goals reference. */
.wb-goal-widget {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  min-height: 104px;
  margin-top: 16px;
  border: 4px solid var(--black);
  background: var(--white);
}
.wb-goal-icon-section {
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 6px 12px;
  border-right: 4px solid var(--black);
}
.wb-goal-icon { width: 58px; height: 58px; object-fit: contain; display: block; }
.wb-goal-content { min-width: 0; padding: 10px 12px; }
.wb-goal-title {
  color: var(--purple);
  font-weight: 900;
  font-size: clamp(15px, 2.5vw, 21px);
  line-height: 1;
  text-transform: uppercase;
}
.wb-goal-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; }
.wb-goal-bar { height: 40px; border: 4px solid var(--black); position: relative; overflow: hidden; background: var(--white); }
.wb-goal-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--purple); transition: width .25s linear; }
.wb-goal-divisions { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; pointer-events: none; }
.wb-goal-divisions span { border-right: 2px solid var(--black); }
.wb-goal-divisions span:last-child { border-right: 0; }
.wb-goal-percent { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-size: 13px; font-weight: 900; }
.wb-goal-number { color: var(--purple); font-size: clamp(24px, 4vw, 37px); line-height: .9; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wb-goal-number small { display: block; margin-top: 4px; color: var(--black); font-size: 12px; line-height: 1; text-align: right; }
.wb-goal-meta { margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }

.wb-cycle-alert {
  margin-top: 10px;
  border: 4px solid var(--black);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  background: var(--white);
}
.wb-cycle-alert strong { padding: 10px 12px; background: var(--black); color: var(--white); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; display: grid; place-items: center; text-align: center; }
.wb-cycle-alert span { padding: 10px 12px; font-size: 12px; font-weight: 800; line-height: 1.35; }
.wb-cycle-alert.is-complete strong, .wb-cycle-alert.is-ahead strong { background: var(--purple); }
.wb-cycle-alert.is-urgent strong, .wb-cycle-alert.is-behind strong { background: var(--danger); }

.wb-report-btn { background: var(--purple); color: var(--white); }
.wb-report-btn:hover { background: var(--purple-dark); }
.wb-tool-note { margin: 10px 0 0; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.35; }
.wb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wb-span-2 { grid-column: 1 / -1; }
.wb-setting-note { border: 3px solid var(--black); padding: 10px; font-size: 11px; font-weight: 800; line-height: 1.4; }

@media (max-width: 620px) {
  .wb-goal-widget { grid-template-columns: 64px minmax(0, 1fr); }
  .wb-goal-icon { width: 46px; height: 46px; }
  .wb-goal-row { grid-template-columns: 1fr; }
  .wb-goal-number { display: flex; align-items: baseline; justify-content: space-between; }
  .wb-goal-number small { display: inline; margin: 0; }
  .wb-cycle-alert { grid-template-columns: 1fr; }
  .wb-form-grid { grid-template-columns: 1fr; }
  .wb-span-2 { grid-column: auto; }
}

/* v1.2.1 — Protect button label colors from WordPress theme overrides. */
#work-tracker-app button,
#work-tracker-app .wb-day-btn,
#work-tracker-app .wb-mini-btn,
#work-tracker-app .wb-close,
#work-tracker-app .wb-form-actions button {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

#work-tracker-app .wb-primary,
#work-tracker-app .wb-primary.is-running,
#work-tracker-app .wb-day-btn.is-active,
#work-tracker-app .wb-save,
#work-tracker-app .wb-report-btn {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

#work-tracker-app .wb-mini-btn.is-danger {
  color: var(--danger) !important;
  -webkit-text-fill-color: var(--danger) !important;
}



/* v1.3.0 — Completed-cycle payment history and income reports. */
.wb-history-btn { background: var(--black); color: var(--white); }
.wb-history-btn:hover { background: #242424; }
.wb-modal-wide { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.wb-payment-history { padding: 16px; display: grid; gap: 14px; }
.wb-history-summary { display: grid; grid-template-columns: repeat(4, 1fr); border: 4px solid var(--black); background: var(--black); gap: 4px; }
.wb-history-summary > div { min-height: 92px; background: var(--white); padding: 12px; }
.wb-history-summary span { display: block; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.wb-history-summary strong { display: block; margin-top: 12px; color: var(--purple); font-size: clamp(21px, 3vw, 31px); line-height: 1; font-variant-numeric: tabular-nums; }
.wb-history-note { margin: 0; border: 3px solid var(--black); padding: 10px; font-size: 11px; font-weight: 800; line-height: 1.4; }
.wb-payment-table-wrap { overflow-x: auto; }
.wb-payment-table { width: 100%; min-width: 790px; border-collapse: collapse; }
.wb-payment-table th, .wb-payment-table td { border: 2px solid var(--black); padding: 9px; text-align: left; font-size: 12px; }
.wb-payment-table th { background: var(--black); color: var(--white); text-transform: uppercase; letter-spacing: .04em; }
.wb-payment-table td:nth-child(2), .wb-payment-table td:nth-child(3), .wb-payment-table td:nth-child(4), .wb-payment-table td:nth-child(5) { text-align: right; }
.wb-payment-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.wb-payment-status { min-width: 82px; min-height: 35px; border: 3px solid var(--black); background: var(--white); color: var(--black); padding: 5px 8px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.wb-payment-status.is-paid { background: var(--purple); color: var(--white); }
.wb-income-report-section { border: 4px solid var(--black); }
.wb-income-report-head { padding: 12px; border-bottom: 4px solid var(--black); }
.wb-income-report-head h4 { margin: 0; font-size: 15px; text-transform: uppercase; }
.wb-income-report-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.35; }
.wb-income-report-grid { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--black); gap: 4px; }
.wb-income-period { background: var(--white); padding: 12px; display: grid; gap: 8px; align-content: start; }
.wb-income-period > strong { color: var(--purple); font-size: 14px; }
.wb-history-report-primary { min-height: 42px; border: 3px solid var(--black); background: var(--purple); color: var(--white); padding: 7px 9px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.wb-history-report-primary:hover { background: var(--purple-dark); }

@media (max-width: 700px) {
  .wb-history-summary { grid-template-columns: 1fr 1fr; }
  .wb-income-report-grid { grid-template-columns: 1fr; }
}

#work-tracker-app .wb-history-btn,
#work-tracker-app .wb-payment-status.is-paid,
#work-tracker-app .wb-history-report-primary {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

#work-tracker-app .wb-payment-status {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

/* v1.4.0 — Financial ledger, pace, corrections, statements, and backups. */
.wb-daily-target { margin-top: 10px; border: 4px solid var(--black); padding: 10px; }
.wb-daily-target > div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:900; text-transform:uppercase; }
.wb-thin-progress { height: 14px; border: 3px solid var(--black); margin-top: 7px; background: var(--white); overflow:hidden; }
.wb-thin-progress span { display:block; height:100%; background:var(--purple); transition:width .2s linear; }
.wb-secondary-action { width:100%; min-height:44px; margin-top:8px; border:4px solid var(--black); background:var(--white); color:var(--black); font-weight:900; text-transform:uppercase; }
.wb-money-strip { margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--black); border:4px solid var(--black); }
.wb-money-strip > div { background:var(--white); padding:12px; min-height:88px; }
.wb-money-strip span { display:block; font-size:10px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.wb-money-strip strong { display:block; margin-top:11px; color:var(--purple); font-size:clamp(22px,3vw,31px); font-variant-numeric:tabular-nums; }
.wb-money-strip .is-credit strong { color:var(--success); }
.wb-payment-line { border:4px solid var(--black); border-top:0; padding:9px 11px; display:flex; justify-content:space-between; gap:10px; font-size:11px; font-weight:900; text-transform:uppercase; }
.wb-payment-line strong { color:var(--purple); }
.wb-record-payment { width:100%; min-height:58px; margin-top:8px; border:5px solid var(--black); background:var(--purple); color:var(--white); font-size:20px; font-weight:900; text-transform:uppercase; }
.wb-record-payment:hover { background:var(--purple-dark); }
.wb-row-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.wb-source-badge, .wb-auto-status { display:inline-block; border:2px solid var(--black); padding:4px 6px; background:var(--white); font-size:9px; font-weight:900; text-transform:uppercase; }
.wb-table tr.is-voided, .wb-payment-table tr.is-voided { opacity:.55; text-decoration:line-through; }
.wb-danger-save { background:var(--danger); color:var(--white); }
.wb-textarea { min-height:90px; resize:vertical; font:inherit; border-radius:0; }
.wb-payment-ref-preview { border:4px solid var(--black); display:flex; justify-content:space-between; align-items:center; padding:10px 12px; }
.wb-payment-ref-preview span { font-size:10px; font-weight:900; letter-spacing:.08em; }
.wb-payment-ref-preview strong { color:var(--purple); font-size:18px; }
.wb-payment-confirm { padding:18px; }
.wb-confirm-amount { color:var(--purple); font-size:46px; font-weight:900; line-height:1; }
.wb-confirm-ref { margin-top:8px; font-weight:900; }
.wb-payment-confirm p { border:3px solid var(--black); padding:10px; font-size:12px; font-weight:700; line-height:1.45; }
.wb-tab-row { display:grid; grid-template-columns:1fr 1fr; border:4px solid var(--black); background:var(--black); gap:4px; }
.wb-tab { min-height:44px; border:0; background:var(--white); color:var(--black); font-weight:900; }
.wb-tab.is-active { background:var(--purple); color:var(--white); }
.wb-audit-list { padding:16px; display:grid; gap:8px; max-height:70vh; overflow:auto; }
.wb-audit-item { border:3px solid var(--black); padding:10px; }
.wb-audit-item strong { color:var(--purple); font-size:11px; }
.wb-audit-item span { float:right; color:var(--muted); font-size:10px; font-weight:800; }
.wb-audit-item p { margin:7px 0 0; font-size:12px; font-weight:700; }

@media (max-width:620px) {
  .wb-money-strip { grid-template-columns:1fr; }
  .wb-payment-line { flex-direction:column; }
}

#work-tracker-app .wb-record-payment,
#work-tracker-app .wb-danger-save,
#work-tracker-app .wb-tab.is-active {
  color:var(--white) !important;
  -webkit-text-fill-color:var(--white) !important;
}
#work-tracker-app .wb-secondary-action,
#work-tracker-app .wb-tab {
  color:var(--black) !important;
  -webkit-text-fill-color:var(--black) !important;
}

/* v1.4.1 — Global accumulated balance. */
.wb-global-balance { border:5px solid var(--black); border-top:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); background:var(--black); gap:4px; }
.wb-global-balance > div { background:var(--white); }
.wb-global-main { padding:14px; }
.wb-global-main > span, .wb-global-support span { display:block; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.wb-global-main > strong { display:block; margin-top:8px; color:var(--purple); font-size:clamp(30px,5vw,48px); line-height:1; font-variant-numeric:tabular-nums; }
.wb-global-main > small { display:block; margin-top:7px; color:var(--muted); font-size:10px; font-weight:800; line-height:1.35; }
.wb-global-support { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:var(--black) !important; }
.wb-global-support > div { background:var(--white); padding:12px; }
.wb-global-support strong { display:block; margin-top:9px; color:var(--purple); font-size:clamp(18px,2.5vw,25px); font-variant-numeric:tabular-nums; }
@media (max-width:720px) {
  .wb-global-balance { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .wb-global-support { grid-template-columns:1fr; }
}

/* v1.4.2 — Payment processing fees. */
.wb-fee-preview { border:4px solid var(--black); background:var(--white); padding:11px 12px; display:grid; gap:5px; }
.wb-fee-preview strong { color:var(--purple); font-size:18px; font-variant-numeric:tabular-nums; }
.wb-fee-preview span { color:var(--black); font-size:10px; font-weight:800; line-height:1.35; }

/* v1.4.3 — Modal scrolling + strict contrast rules, including WordPress theme overrides. */
.wb-modal-backdrop {
  overflow: hidden;
}
.wb-modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-modal-head {
  flex: 0 0 auto;
  background: var(--purple) !important;
  color: var(--white) !important;
}
.wb-modal-head h3 {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
.wb-modal > :not(.wb-modal-head) {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.wb-modal-wide {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

/* White controls always use dark readable content. */
#work-tracker-app button.wb-day-btn:not(.is-active),
#work-tracker-app button.wb-mini-btn:not(.wb-report-btn):not(.wb-history-btn),
#work-tracker-app button.wb-secondary-action,
#work-tracker-app button.wb-tab:not(.is-active),
.wb-modal-backdrop button.wb-close,
.wb-modal-backdrop button.wb-mini-btn:not(.wb-report-btn):not(.wb-history-btn),
.wb-modal-backdrop button.wb-secondary-action,
.wb-modal-backdrop button.wb-tab:not(.is-active),
.wb-modal-backdrop .wb-form-actions button:not(.wb-save):not(.wb-danger-save),
.wb-modal-backdrop button[data-long-pause] {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

/* Purple controls always use white content. */
#work-tracker-app button.wb-primary,
#work-tracker-app button.wb-record-payment,
#work-tracker-app button.wb-report-btn,
#work-tracker-app button.wb-tab.is-active,
.wb-modal-backdrop button.wb-save,
.wb-modal-backdrop button.wb-record-payment,
.wb-modal-backdrop button.wb-report-btn,
.wb-modal-backdrop button.wb-history-report-primary,
.wb-modal-backdrop button.wb-tab.is-active,
.wb-modal-backdrop button[data-long-continue] {
  background: var(--purple) !important;
  background-color: var(--purple) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

/* Black controls always use white content. */
#work-tracker-app button.wb-primary.is-running,
#work-tracker-app button.wb-day-btn.is-active,
#work-tracker-app button.wb-history-btn,
.wb-modal-backdrop button.wb-history-btn {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

/* Destructive controls retain a clear high-contrast treatment. */
.wb-modal-backdrop button.wb-danger-save {
  background: var(--danger) !important;
  background-color: var(--danger) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
#work-tracker-app button.wb-mini-btn.is-danger,
.wb-modal-backdrop button.wb-mini-btn.is-danger {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--danger) !important;
  -webkit-text-fill-color: var(--danger) !important;
}

/* Form fields must remain readable even when the active WordPress theme restyles inputs. */
#work-tracker-app .wb-input,
#work-tracker-app .wb-select,
.wb-modal-backdrop .wb-input,
.wb-modal-backdrop .wb-select,
.wb-modal-backdrop textarea,
.wb-modal-backdrop select,
.wb-modal-backdrop input {
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
  opacity: 1;
}
.wb-modal-backdrop option {
  background: var(--white) !important;
  color: var(--black) !important;
}

@media (max-width: 620px) {
  .wb-modal-backdrop { padding: 8px; align-items: center; }
  .wb-modal {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .wb-modal-head { padding: 10px 11px; }
  .wb-modal-head h3 { font-size: 15px; }
  .wb-close { width: 36px; height: 36px; flex: 0 0 36px; }
}

/* Base text contrast on light WORK BAR surfaces. */
#work-tracker-app,
#work-tracker-app .wb-frame,
#work-tracker-app .wb-panel,
#work-tracker-app .wb-panel-head,
.wb-modal-backdrop .wb-modal,
.wb-modal-backdrop .wb-form,
.wb-modal-backdrop .wb-payment-confirm,
.wb-modal-backdrop .wb-payment-history,
.wb-modal-backdrop .wb-setting-note,
.wb-modal-backdrop .wb-history-note {
  color: var(--black) !important;
}
#work-tracker-app .wb-panel-head h2,
.wb-modal-backdrop .wb-income-report-head h4 {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}

/* v1.5.0 — Simplified money hierarchy + quick task countdown. */
.wb-global-earnings {
  margin-top: 16px;
  border: 5px solid var(--black);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  gap: 4px;
  background: var(--black);
}
.wb-total-earned {
  min-height: 150px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--purple);
  color: var(--white);
}
.wb-total-earned > span,
.wb-total-support span,
.wb-cycle-money span {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wb-total-earned > strong {
  display: block;
  margin-top: 9px;
  color: var(--white);
  font-size: clamp(38px, 7vw, 68px);
  line-height: .92;
  font-variant-numeric: tabular-nums;
}
.wb-total-earned > small {
  display: block;
  margin-top: 10px;
  max-width: 560px;
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}
.wb-total-support {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  background: var(--black);
}
.wb-total-support > div {
  padding: 13px;
  background: var(--white);
  color: var(--black);
}
.wb-total-support strong {
  display: block;
  margin-top: 7px;
  color: var(--purple);
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wb-total-support small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
}
.wb-cycle-money {
  border: 5px solid var(--black);
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px;
  background: var(--black);
}
.wb-cycle-money > div {
  min-height: 84px;
  padding: 12px;
  background: var(--white);
  color: var(--black);
}
.wb-cycle-money strong {
  display: block;
  margin-top: 9px;
  color: var(--purple);
  font-size: clamp(21px, 3vw, 30px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wb-cycle-money .is-credit strong { color: var(--success); }

.wb-countdown-panel .wb-panel-head { background: var(--white); color: var(--black); }
.wb-countdown-status {
  border: 2px solid var(--black);
  padding: 4px 6px;
  background: var(--white);
  color: var(--black);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
}
.wb-countdown-display {
  border: 5px solid var(--black);
  padding: 13px 8px;
  background: var(--white);
  color: var(--purple);
  text-align: center;
  font-size: clamp(36px, 7vw, 58px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.wb-countdown-input-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.wb-countdown-input-row > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.2;
}
.wb-countdown-input-row .wb-input {
  min-height: 42px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wb-countdown-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.wb-countdown-action {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  border: 4px solid var(--black);
  background: var(--purple);
  color: var(--white);
  font-weight: 900;
  font-size: 17px;
  text-transform: uppercase;
}
.wb-countdown-action.is-running { background: var(--black); color: var(--white); }
.wb-countdown-action:hover { background: var(--purple-dark); }
.wb-countdown-action.is-running:hover { background: #242424; }

#work-tracker-app button.wb-countdown-action {
  background: var(--purple) !important;
  background-color: var(--purple) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
#work-tracker-app button.wb-countdown-action.is-running {
  background: var(--black) !important;
  background-color: var(--black) !important;
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}

@media (max-width: 720px) {
  .wb-global-earnings { grid-template-columns: 1fr; }
  .wb-total-support { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}
@media (max-width: 450px) {
  .wb-total-support { grid-template-columns: 1fr; }
  .wb-countdown-input-row { grid-template-columns: 1fr; }
  .wb-countdown-presets { grid-template-columns: 1fr 1fr; }
}
.wb-countdown-meta {
  margin-top: 6px;
  text-align: center;
  color: var(--black);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#work-tracker-app .wb-total-earned,
#work-tracker-app .wb-total-earned > span,
#work-tracker-app .wb-total-earned > strong,
#work-tracker-app .wb-total-earned > small {
  color: var(--white) !important;
  -webkit-text-fill-color: var(--white) !important;
}
#work-tracker-app .wb-total-support > div,
#work-tracker-app .wb-cycle-money > div,
#work-tracker-app .wb-countdown-panel,
#work-tracker-app .wb-countdown-panel .wb-panel-head,
#work-tracker-app .wb-countdown-status,
#work-tracker-app .wb-countdown-meta {
  color: var(--black) !important;
  -webkit-text-fill-color: var(--black) !important;
}