:root {
  color-scheme: light;
  --ink: #202427; --muted: #59636d; --line: #dde2e6;
  --surface: #f5f6f7; --white: #ffffff; --chrome: #fafbfc;
  --field: #ffffff; --hover: #edf1f2; --secondary: #45515a;
  --action: #006b5b; --action-ink: #ffffff; --action-hover: #005447;
  --tint: #e8f2ee; --accent-text: #006b5b; --strong-border: #86939c;
  --success-bg: #e7f2eb; --success-ink: #22603f;
  --pending-bg: #faf0d9; --pending-ink: #79590f;
  --error-bg: #f8e9e7; --error-ink: #933e38;
  --neutral-bg: #edf0f2; --neutral-ink: #52616b;
  --chart-primary: #006b5b; --chart-secondary: #354956;
  --hatch-base: #edf1f2; --hatch-line: #82938d;
  background: #e9ecef; color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f4f2; --muted: #adb7bf; --line: #383f44;
  --surface: #151719; --white: #1e2124; --chrome: #1b1e21;
  --field: #191c1f; --hover: #2b3237; --secondary: #c7cfd5;
  --action: #5dd6b5; --action-ink: #10251f; --action-hover: #83e2c8;
  --tint: #243a33; --accent-text: #5dd6b5; --strong-border: #7c8992;
  --success-bg: #253c30; --success-ink: #9edbb7;
  --pending-bg: #3d3420; --pending-ink: #e8ca83;
  --error-bg: #402b2a; --error-ink: #f0b1a9;
  --neutral-bg: #30373d; --neutral-ink: #b7c3cc;
  --chart-primary: #5dd6b5; --chart-secondary: #3e9682;
  --hatch-base: #2a3135; --hatch-line: #829c93;
  background: #111315;
}
.theme-toggle { border: 1px solid var(--line); }
.theme-toggle .theme-to-light { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-to-light { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-to-dark { display: none; }
:root .campaign-view { --campaign-border: var(--line); }
:root :focus-visible { outline-color: var(--accent-text); }
:root .app-shell { border-color: var(--white); box-shadow: 0 10px 45px #0000000a; border-radius: 12px; }
:root :is(.sidebar, .topbar) { background: var(--chrome); border-color: var(--line); }
:root .sidebar { border-radius: 6px 0 0 6px; }
:root .workspace { border-radius: 0 6px 6px 0; }
:root .brand-mark { background: var(--action); color: var(--action-ink); border-radius: 6px; }
:root .brand-mark span { border-color: var(--chrome); }
:root :is(.panel, .stat-card, .project-table, .calendar-day, .team-card, .campaign-task, .campaign-table, .earning-stat) { background: var(--white); border-color: var(--line); }
:root .modal { background: var(--white); color: var(--ink); border-color: var(--strong-border); border-radius: 8px; box-shadow: 0 25px 80px #00000030; }
:root .modal::backdrop { background: #11171988; }
:root :is(.search-box, .field input, .field select, .field textarea, .quiet-select, .work-tools select, .section-toolbar select) { background: var(--field); color: var(--ink); border-color: var(--strong-border); }
:root .search-box { border-color: var(--line); color: var(--secondary); }
:root .field textarea[readonly] { background: var(--surface); color: var(--secondary); }
:root :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root .search-box:focus-within { border-color: var(--accent-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 15%, transparent); }
:root :is(.nav-link, .role-switch button) { color: var(--secondary); }
:root .nav-link:hover { background: var(--hover); color: var(--ink); }
:root .nav-link.active { color: var(--action-ink); background: var(--action); box-shadow: none; }
:root :is(.role-switch, .nav-count) { background: var(--neutral-bg); }
:root .nav-count { color: var(--neutral-ink); }
:root .role-switch button.selected { background: var(--white); color: var(--accent-text); box-shadow: none; }
:root .active .nav-count { color: inherit; background: #ffffff22; }
:root :is(.notification-button, .theme-toggle) { background: var(--field); border-color: var(--line); color: var(--ink); }
:root .unread-dot { border-color: var(--field); }
:root .icon-button:hover { background: var(--hover); }
:root :is(.outlined, .stat-card .icon-button) { border-color: var(--strong-border); }
:root .primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
:root .primary:hover { background: var(--action-hover); }
:root .secondary { color: var(--secondary); border-color: var(--strong-border); }
:root .secondary:hover { background: var(--hover); }
:root :is(.stat-card:first-child, .earning-stat:first-child) { background: var(--white); color: var(--ink); border-color: var(--line); border-top: 3px solid var(--action); }
:root :is(.stat-card:first-child .stat-number, .earning-stat:first-child > strong) { color: var(--accent-text); }
:root .stat-card:first-child .icon-button { background: var(--tint); color: var(--accent-text); border: 1px solid var(--line); }
:root .weekly-goal { background: var(--tint); }
:root :is(.weekly-goal strong, .goal-icon, .reminder-panel h3, .positive-text, .text-link, .info-line svg, .project-item:hover .project-copy strong, .work-metric > svg, .task-reward strong, .money-cell, .payout-summary > svg, .payout-summary > strong, .fixed-reward strong, .task-detail-meta strong, .payout-dialog-amount, .rate-label, .campaign-notice > svg) { color: var(--accent-text); }
:root .work-metric strong { color: var(--ink); }
:root .goal-track { background: var(--line); }
:root .goal-track span { background: var(--action); }
:root :is(.brand small, .workspace-label, .nav-heading, .weekly-goal p, .goal-caption, .demo-label, .profile-text small, .profile-button > svg, .breadcrumb, .page-heading p, .stat-note, .stat-card:first-child .stat-note, .chart-summary small, .tiny-icon, .label-small, .reminder-panel p, .member-row-copy small, .muted-icon, .progress-value > span, .chart-legend, .project-copy small, .dashboard-footer, .result-count, .team-card p, .team-card small, .notification-item small, .section-caption, .campaign-name, .task-excerpt, .task-reward span, .task-card-meta, .work-footnote, .earning-stat p, .earning-stat:first-child p, .earning-day, .payout-summary > span, .payout-summary > p, .earnings-empty-line, .demo-finance-note, .connection-label, .field-hint, .fixed-reward small, .task-detail-meta) { color: var(--muted); }
:root :is(.breadcrumb span:last-child, .campaign-notice span:not(.demo-pill), .work-metric span, .work-tabs button, .earnings-tabs button, .filter-tabs button, .check-field, .post-detail p, #work-admin-detail p, #payout-dialog-summary p, #info-body p, #review-detail-meta p) { color: var(--secondary); }
:root :is(.work-tabs button.active, .earnings-tabs button[aria-selected="true"], .filter-tabs button.active) { color: var(--accent-text); border-color: var(--accent-text); }
:root .status-dot { background: var(--accent-text); }
:root .connection-label .status-dot { background: #b38b32; }
:root .check-field input { accent-color: var(--action); }
:root .avatar-stack .avatar { border-color: var(--white); }
:root :is(.badge.completed, .campaign-badge.open, .campaign-badge.approved, .campaign-badge.paid) { background: var(--success-bg); color: var(--success-ink); }
:root :is(.badge.in-progress, .campaign-badge.pending, .campaign-badge.requested, .demo-pill) { background: var(--pending-bg); color: var(--pending-ink); }
:root :is(.badge.pending, .campaign-badge.rejected) { background: var(--error-bg); color: var(--error-ink); }
:root :is(.campaign-badge.closed, .campaign-badge.draft) { background: var(--neutral-bg); color: var(--neutral-ink); }
:root .timer-panel { background: #252d2c; }
:root .timer-panel p { color: #ccd6d0; }
:root .timer-status { color: #d9e8e1; border-color: #829b8f; }
:root .timer-panel .panel-heading h2, :root .timer-panel #timer-display { color: #f1f4f2; }
:root :is(.project-table th, .calendar-weekday, .campaign-table th) { background: var(--surface); color: var(--secondary); border-color: var(--line); }
:root :is(.project-table td, .campaign-table td, .calendar-day, .task-card-actions, .post-detail hr, .import-toolbar) { border-color: var(--line); }
:root .calendar-day.outside { background: var(--surface); }
:root .calendar-day > span { color: var(--muted); }
:root .calendar-day.today > span { background: var(--action); color: var(--action-ink); }
:root .calendar-event { background: var(--tint); color: var(--accent-text); border-color: var(--accent-text); }
:root .legend-dot.green { background: var(--chart-primary); }
:root .legend-dot.dark-green { background: var(--chart-secondary); }
:root .legend-dot.hatched { background: repeating-linear-gradient(130deg, var(--hatch-line) 0, var(--hatch-line) 1px, var(--hatch-base) 1px, var(--hatch-base) 3px); }
:root .earning-bar.approved { background: var(--chart-primary); }
:root .earning-bar-pair { border-color: var(--strong-border); background: repeating-linear-gradient(to top, transparent 0, transparent 34px, var(--line) 34px, var(--line) 35px); }
:root :is(.campaign-table td small, .post-author span:not(.facebook-mark)) { color: var(--muted); }
:root .submission-feedback { background: var(--neutral-bg); color: var(--secondary); }
:root #review-comment { background: var(--surface); color: var(--ink); border-color: var(--accent-text); }
:root .form-error { background: var(--error-bg); color: var(--error-ink); border-color: var(--error-ink); }
:root .toast { background: var(--ink); color: var(--white); }
:root [data-tooltip]::after { background: var(--ink); color: var(--white); }
:root[data-theme="dark"] .avatar-peach { background: #654c3f; color: #f9d4b8; }
:root[data-theme="dark"] .avatar-mint { background: #315941; color: #bfe5ce; }
:root[data-theme="dark"] .avatar-lilac { background: #514663; color: #e4d1fc; }
:root[data-theme="dark"] .avatar-yellow { background: #5b5330; color: #f4e2a0; }
:root[data-theme="dark"] .avatar-neutral { background: #44544a; color: #d1e1d4; }
:root[data-theme="dark"] .project-icon { color: #b6c5f0; background: #343d59; }
:root[data-theme="dark"] .project-icon.teal { color: #96d7d0; background: #294b47; }
:root[data-theme="dark"] .project-icon.orange { color: #ebbd94; background: #594634; }
:root[data-theme="dark"] .project-icon.yellow { color: #e3d093; background: #504b30; }
:root[data-theme="dark"] .project-icon.lilac { color: #ccb0f1; background: #4c3e60; }
:root[data-theme="dark"] .project-icon.peach { color: #ecc2b5; background: #5b453f; }
:root[data-theme="dark"] .facebook-mark { color: #a8c8fe; background: #334461; }
@media (max-width: 760px) {
  :root .app-shell, :root .workspace, :root .sidebar { border-radius: 0; }
}
@media (max-width: 520px) {
  .topbar .theme-toggle { width: 30px; height: 31px; }
  .topbar .theme-toggle svg { width: 16px; height: 16px; }
  .topbar .search-box { min-width: 55px; }
}