:root {
  --wf-brand: #db2b64;
  --wf-brand-hover: #bd2052;
  --wf-brand-soft: #fff1f6;
  --wf-accent: #f23a34;
  --wf-canvas: #eef2f6;
  --wf-surface: #ffffff;
  --wf-surface-muted: #f7f9fc;
  --wf-border: #dfe5ed;
  --wf-border-strong: #cbd5e1;
  --wf-text: #243044;
  --wf-heading: #111827;
  --wf-muted: #667085;
  --wf-danger: #b42318;
  --wf-danger-soft: #fef3f2;
  --wf-success: #047857;
  --wf-success-soft: #ecfdf5;
  --wf-warning: #a15c07;
  --wf-warning-soft: #fffaeb;
  --wf-radius-sm: 8px;
  --wf-radius: 12px;
  --wf-radius-lg: 18px;
  --wf-control-height: 44px;
  --wf-shadow: 0 10px 28px rgba(31, 42, 61, .055);
}

* { box-sizing: border-box; }
html { position: relative; min-height: 100%; font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { margin: 0; background: var(--wf-surface); color: var(--wf-text); font-family: "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea { transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
:focus-visible { outline: 3px solid rgba(219, 43, 100, .22); outline-offset: 2px; }

/* Public site */
.site-header { background: #e8eef8; }
.landing-container { max-width: 1160px; }
.app-nav { min-height: 78px; border-bottom: 0; background: #e8eef8; }
.workflare-brand { display: inline-flex; align-items: center; padding: 0; }
.workflare-brand-logo { display: block; width: 260px; height: auto; }
.app-nav .nav-link { color: #333948; font-size: 1.08rem; padding: .65rem .85rem; }
.app-nav .nav-link:hover { color: #0c1425; }
.landing-hero { min-height: 478px; padding: 42px 0 56px; background: #e8eef8; }
.landing-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 32px; }
.landing-hero-copy h1 { max-width: 520px; margin: 0 0 12px; color: #3a3f4d; font-size: clamp(2.4rem, 5vw, 3.15rem); line-height: 1.03; font-weight: 800; }
.landing-hero-copy p { max-width: 560px; margin-bottom: 30px; color: #182747; font-size: 1.3rem; line-height: 1.3; }
.landing-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 0; border-radius: var(--wf-radius-sm); background: var(--wf-accent); color: #fff; padding: .78rem 1.4rem; font-weight: 700; text-decoration: none; }
.landing-button:hover { background: #d92d2a; color: #fff; }
.landing-illustration svg { width: 100%; height: auto; overflow: visible; }
.dash-path { fill: none; stroke: #96add2; stroke-width: 2.3; stroke-linecap: round; stroke-dasharray: 10 13; }
.icon-line { fill: none; stroke: #91a9cf; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.icon-fill { fill: #91a9cf; stroke: none; opacity: .95; }
.icon-fill-light { fill: #91a9cf; opacity: .55; }
.landing-feature-intro { padding: 48px 0 58px; background: #fff; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.benefit-grid article { border-top: 3px solid var(--wf-accent); padding-top: 18px; }
.benefit-grid h2 { margin-bottom: 8px; color: #17356d; font-size: 1.3rem; }
.benefit-grid p { margin: 0; color: #30415f; line-height: 1.5; }
.landing-pricing { padding: 58px 0 74px; background: #fff; }
.landing-pricing h2 { color: #17356d; font-size: 2.15rem; }
.pricing-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; }
.landing-signup-card { display: grid; gap: 14px; min-width: min(420px, 100%); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg); background: var(--wf-surface); padding: 24px; box-shadow: var(--wf-shadow); }
.landing-signup-card h3 { margin: 0; color: #17356d; font-size: 1.4rem; font-weight: 800; }
.landing-signup-card label { display: grid; gap: 7px; color: #344054; font-weight: 700; }
.landing-signup-card input { width: 100%; min-height: var(--wf-control-height); border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; padding: 10px 12px; }
.landing-signup-card input:focus { border-color: var(--wf-brand); box-shadow: 0 0 0 3px rgba(219, 43, 100, .1); outline: 0; }
.signup-success, .signup-error { border-radius: 10px; padding: 11px 13px; font-size: .92rem; }
.signup-success { border: 1px solid #a7f3d0; background: var(--wf-success-soft); color: var(--wf-success); }
.signup-error { border: 1px solid #fecdd3; background: var(--wf-danger-soft); color: var(--wf-danger); }
.footer { padding: 24px 0; border-top: 1px solid var(--wf-border); background: #fff; }
.error-state { width: min(720px, calc(100% - 40px)); margin: 56px auto; border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg); background: #fff; padding: 28px; box-shadow: var(--wf-shadow); }
.error-state h1 { margin: 0 0 10px; color: var(--wf-heading); font-size: 1.8rem; }
.error-state p { color: var(--wf-muted); }

/* Authentication and onboarding */
.auth-body { min-height: 100vh; background: var(--wf-canvas); color: var(--wf-text); }
.auth-main { display: grid; min-height: 100vh; place-items: center; padding: 40px 20px; }
.auth-card { width: min(480px, 100%); border: 1px solid var(--wf-border); border-radius: var(--wf-radius-lg); background: rgba(255, 255, 255, .97); padding: 32px; box-shadow: 0 24px 70px rgba(31, 42, 61, .13); }
.auth-card-wide { width: min(680px, 100%); }
.auth-brand { display: inline-flex; text-decoration: none; }
.auth-brand-logo { display: block; width: 220px; height: auto; }
.auth-header { margin: 28px 0 24px; }
.auth-header h1 { margin: 0; color: var(--wf-heading); font-size: 1.8rem; font-weight: 750; }
.auth-header p { margin: 8px 0 0; color: var(--wf-muted); line-height: 1.45; }
.auth-form, .onboarding-form { display: grid; gap: 18px; }
.auth-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-field { display: grid; gap: 7px; color: #344054; font-size: .92rem; font-weight: 700; }
.auth-field input, .auth-field select { width: 100%; min-height: var(--wf-control-height); border: 1px solid var(--wf-border); border-radius: 10px; background: var(--wf-surface-muted); color: var(--wf-heading); padding: 10px 12px; }
.auth-field input:focus, .auth-field select:focus { border-color: var(--wf-brand); background: #fff; box-shadow: 0 0 0 3px rgba(219, 43, 100, .1); outline: 0; }
.auth-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-link { color: var(--wf-brand); font-weight: 700; text-decoration: none; }
.auth-link:hover { color: var(--wf-brand-hover); text-decoration: underline; }
.auth-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid transparent; border-radius: var(--wf-radius-sm); padding: 9px 16px; font-weight: 750; text-decoration: none; cursor: pointer; }
.auth-button-primary { background: var(--wf-brand); color: #fff; }
.auth-button-primary:hover { background: var(--wf-brand-hover); color: #fff; }
.auth-button-secondary { border-color: var(--wf-border-strong); background: #fff; color: var(--wf-text); }
.auth-button-secondary:hover { border-color: var(--wf-brand); background: var(--wf-brand-soft); color: var(--wf-brand-hover); }
.auth-button-block { width: 100%; }
.auth-notice { margin-bottom: 18px; border: 1px solid var(--wf-border); border-radius: 10px; padding: 11px 13px; }
.auth-notice-error { border-color: #fecdca; background: var(--wf-danger-soft); color: var(--wf-danger); }
.auth-notice-success { border-color: #a7f3d0; background: var(--wf-success-soft); color: var(--wf-success); }
.auth-status { text-align: center; }
.onboarding-form { gap: 22px; }
.onboarding-section { display: grid; gap: 16px; }
.onboarding-section h2 { margin: 0; color: var(--wf-heading); font-size: 1.05rem; }

/* Application shell */
.admin-body { background: var(--wf-canvas); color: var(--wf-text); overflow-x: hidden; font-size: .9rem; }
.admin-app-shell { display: grid; grid-template-columns: 236px 1fr; width: min(1540px, calc(100vw - 40px)); min-height: calc(100vh - 40px); margin: 20px auto; overflow: hidden; border: 1px solid var(--wf-border); border-radius: var(--wf-radius); background: var(--wf-surface); box-shadow: 0 18px 48px rgba(31, 42, 61, .08); }
.admin-app-sidebar { padding: 18px 12px; border-right: 1px solid var(--wf-border); background: var(--wf-surface-muted); }
.admin-logo { display: flex; align-items: center; margin: 0 8px 24px; text-decoration: none; }
.admin-logo-image { display: block; width: 150px; height: auto; }
.admin-active-project { margin: 0 0 20px; padding: 13px; border: 1px solid var(--wf-border); border-radius: var(--wf-radius); background: #fff; }
.admin-active-project-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.admin-active-project-title { display: grid; min-width: 0; gap: 2px; }
.admin-active-project-title strong, .admin-active-project-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-active-project-title span { color: var(--wf-muted); font-size: .78rem; }
.admin-active-project-status { margin: 10px 0 0; overflow: hidden; color: var(--wf-text); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-active-project-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.admin-active-project .admin-project-icon-button { width: 30px; height: 30px; padding: 6px; }
.admin-active-project .admin-project-switch { display: inline-block; color: var(--wf-brand); font-size: .8rem; font-weight: 750; text-decoration: none; }
.admin-active-project .admin-project-switch:hover { color: var(--wf-brand-hover); text-decoration: underline; }
.admin-nav { display: grid; gap: 20px; }
.admin-nav-section { display: grid; gap: 4px; }
.admin-nav-label { padding: 0 12px 4px; color: #8a94a6; font-size: .72rem; font-weight: 700; }
.admin-nav-link { position: relative; display: flex; align-items: center; min-height: 38px; border-radius: var(--wf-radius-sm); color: #465264; padding: 8px 12px; font-weight: 650; text-decoration: none; }
.admin-nav-link::before { position: absolute; top: 7px; bottom: 7px; left: -12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; content: ""; }
.admin-nav-link:hover { background: #eef2f7; color: var(--wf-heading); }
.admin-nav-link.active { background: #fff; color: var(--wf-heading); box-shadow: inset 0 0 0 1px var(--wf-border); }
.admin-nav-link.active::before { background: var(--wf-brand); }
.admin-app-main { min-width: 0; background: #fbfcfe; }
.admin-topbar { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px; border-bottom: 1px solid #e8ecf2; background: #fff; }
.admin-topbar h1 { margin: 0; color: var(--wf-heading); font-size: .98rem; font-weight: 750; }
.admin-topbar-actions { display: flex; align-items: center; gap: 12px; }
.admin-mobile-menu { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--wf-border); border-radius: var(--wf-radius-sm); background: #fff; }
.admin-mobile-menu span { display: block; width: 18px; height: 2px; margin: 3px auto; background: var(--wf-text); }
.admin-page { display: grid; align-content: start; gap: 16px; padding: 20px 22px 24px; }
.admin-page-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.admin-checkbox-row { display: flex !important; min-height: 36px; align-items: center; gap: 9px; font-weight: 650 !important; }
.admin-checkbox-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--wf-brand); }
.admin-form-grid fieldset { min-width: 0; border: 1px solid var(--wf-border); border-radius: 10px; padding: 14px; }
.admin-form-grid legend { width: auto; float: none; margin: 0 0 8px; padding: 0 4px; color: var(--wf-heading); font-size: .92rem; font-weight: 750; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--wf-border); padding: 12px 14px; text-align: left; vertical-align: middle; }
.admin-table th { background: #f5f7fa; color: var(--wf-muted); font-size: .8rem; }
.admin-table-actions { text-align: right !important; }

/* User menu */
.login-partial { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; padding: 5px 8px 5px 5px; }
.login-menu-trigger { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; }
.login-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: linear-gradient(135deg, var(--wf-brand), var(--wf-accent)); color: #fff; font-size: .72rem; font-weight: 800; }
.login-user { display: grid; line-height: 1.1; }
.login-user strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.login-user span { color: var(--wf-muted); font-size: .68rem; }
.admin-menu-wrap { position: relative; }
.admin-dropdown { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(240px, calc(100vw - 32px)); border: 1px solid var(--wf-border); border-radius: var(--wf-radius); background: #fff; padding: 8px; box-shadow: 0 20px 55px rgba(31, 42, 61, .14); }
.admin-dropdown[hidden] { display: none; }
.admin-dropdown a, .admin-dropdown button { display: block; width: 100%; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--wf-text); padding: 9px 11px; text-align: left; text-decoration: none; font-weight: 700; }
.admin-dropdown a:hover, .admin-dropdown button:hover { background: var(--wf-brand-soft); color: var(--wf-brand-hover); }
.admin-dropdown form { margin: 0; }

/* Cards, summaries and collections */
.admin-card { border: 1px solid #e5eaf0; border-radius: var(--wf-radius); background: #fff; padding: 18px; box-shadow: var(--wf-shadow); }
.admin-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.admin-card-header-actions-only { justify-content: flex-end; }
.admin-card-header > div { min-width: 0; }
.admin-card h2 { margin: 0; color: var(--wf-heading); font-size: 1.08rem; font-weight: 750; }
.admin-card h3 { margin: 0; color: var(--wf-heading); font-size: .98rem; font-weight: 750; }
.admin-card p { margin: 5px 0 0; color: var(--wf-muted); line-height: 1.45; }
.admin-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-feature-link { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; min-height: 132px; align-content: start; align-items: start; color: inherit; text-decoration: none; }
.admin-feature-link:hover { border-color: rgba(219, 43, 100, .45); background: #fffafb; color: inherit; }
.admin-feature-link strong { color: var(--wf-heading); font-size: 1rem; }
.admin-feature-icon { display: grid; width: 42px; height: 42px; border-radius: 11px; background: var(--wf-brand-soft); color: var(--wf-brand); place-items: center; }
.admin-feature-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.admin-feature-content { display: grid; min-width: 0; gap: 6px; }
.admin-feature-content > span { color: var(--wf-muted); font-size: .84rem; line-height: 1.45; }
.admin-clean-list { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--wf-border); border-radius: 10px; list-style: none; overflow: hidden; }
.admin-clean-list li { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #edf1f5; background: #fff; }
.admin-clean-list li:last-child { border-bottom: 0; }
.admin-list-content { display: grid; min-width: 0; gap: 3px; }
.admin-list-content strong, .admin-list-content a { color: var(--wf-heading); font-weight: 750; }
.admin-list-content span, .admin-list-content small { color: var(--wf-muted); font-size: .8rem; }
.admin-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.admin-empty-state { border: 1px dashed var(--wf-border-strong); border-radius: 10px; background: #fbfcfe; padding: 16px; color: var(--wf-muted); }
.admin-empty-state strong { color: var(--wf-heading); font-size: .92rem; }
.admin-empty-action { display: grid; min-height: 180px; place-items: center; }

/* Buttons and notices */
.admin-primary-button, .admin-secondary-button, .admin-table-action, .admin-danger-button, .admin-danger-link { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--wf-radius-sm); padding: 8px 13px; font-size: .82rem; line-height: 1.2; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; }
.admin-primary-button { background: var(--wf-brand); color: #fff; }
.admin-primary-button:hover { background: var(--wf-brand-hover); color: #fff; }
.admin-primary-button:disabled { opacity: .5; cursor: not-allowed; }
.admin-secondary-button { border-color: var(--wf-border-strong); background: #fff; color: var(--wf-text); }
.admin-secondary-button:hover { border-color: var(--wf-brand); background: var(--wf-brand-soft); color: var(--wf-brand-hover); }
.admin-table-action { min-height: 34px; border-color: #f3c6d5; background: var(--wf-brand-soft); color: var(--wf-brand-hover); padding: 6px 10px; font-size: .78rem; }
.admin-table-action:hover { border-color: var(--wf-brand); background: #ffe4ed; color: var(--wf-brand-hover); }
.admin-danger-button { background: var(--wf-danger); color: #fff; }
.admin-danger-button:hover { background: #912018; color: #fff; }
.admin-danger-link { min-height: 34px; border-color: #fecdca; background: var(--wf-danger-soft); color: var(--wf-danger); padding: 6px 10px; font-size: .78rem; }
.admin-danger-link:hover { border-color: var(--wf-danger); background: #fee4e2; color: #912018; }
.admin-icon-button { display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--wf-border-strong); border-radius: var(--wf-radius-sm); background: #fff; color: var(--wf-text); padding: 8px; place-items: center; text-decoration: none; }
.admin-icon-button:hover { border-color: var(--wf-brand); background: var(--wf-brand-soft); color: var(--wf-brand-hover); }
.admin-icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-header-actions, .admin-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-form-actions { grid-column: 1 / -1; margin-top: 2px; }
.admin-alert { grid-column: 1 / -1; margin-bottom: 16px; border: 1px solid var(--wf-border); border-radius: 10px; padding: 11px 13px; }
.admin-alert-error { border-color: #fecdca; background: var(--wf-danger-soft); color: var(--wf-danger); }
.admin-alert-success { border-color: #a7f3d0; background: var(--wf-success-soft); color: var(--wf-success); }
.admin-alert-warning { border-color: #fedf89; background: var(--wf-warning-soft); color: var(--wf-warning); }
.admin-alert-info { border-color: #b9d7f7; background: #eff8ff; color: #175cd3; }
.admin-status { display: inline-flex; align-items: center; width: fit-content; border: 1px solid #a7f3d0; border-radius: 999px; background: var(--wf-success-soft); color: var(--wf-success); padding: 4px 8px; font-size: .74rem; font-weight: 750; }

/* Forms */
.admin-form-card { width: min(820px, 100%); }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.admin-form-grid label { display: grid; gap: 7px; color: #344054; font-weight: 700; }
.admin-form-field-wide { grid-column: 1 / -1; }
.admin-form-grid input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .admin-form-grid select, .admin-form-grid textarea { width: 100%; min-height: var(--wf-control-height); border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; color: var(--wf-heading); padding: 10px 12px; }
.admin-form-grid textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.admin-form-grid input:focus, .admin-form-grid select:focus, .admin-form-grid textarea:focus { border-color: var(--wf-brand); box-shadow: 0 0 0 3px rgba(219, 43, 100, .1); outline: 0; }
.admin-form-grid input:disabled, .admin-form-grid select:disabled, .admin-form-grid textarea:disabled { background: #f2f4f7; color: var(--wf-muted); cursor: not-allowed; }
.admin-checkbox { display: flex !important; align-items: center; gap: 8px !important; min-height: var(--wf-control-height); }
.admin-checkbox input { width: 18px; height: 18px; accent-color: var(--wf-brand); }
.admin-field-hint { color: var(--wf-muted); font-size: .78rem; font-weight: 400; }

/* Tables */
.admin-data-table { overflow-x: auto; border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; }
.admin-table-filter { display: grid; gap: 6px; width: min(360px, calc(100% - 24px)); margin: 12px; color: #344054; font-size: .8rem; font-weight: 700; }
.admin-table-filter input { width: 100%; min-height: 40px; border: 1px solid var(--wf-border); border-radius: 9px; background: var(--wf-surface-muted); padding: 8px 11px; }
.admin-table-filter input:focus { border-color: var(--wf-brand); background: #fff; box-shadow: 0 0 0 3px rgba(219, 43, 100, .1); outline: 0; }
.admin-data-table table { width: 100%; border-collapse: collapse; }
.admin-data-table th { border-top: 1px solid #e9edf3; border-bottom: 1px solid #e9edf3; background: #f5f7fa; color: #596579; padding: 10px 12px; font-size: .76rem; font-weight: 750; text-align: left; white-space: nowrap; }
.admin-data-table td { border-bottom: 1px solid #eef1f5; background: #fff; color: var(--wf-text); padding: 11px 12px; font-size: .85rem; vertical-align: middle; }
.admin-data-table tbody tr:last-child td { border-bottom: 0; }
.admin-data-table td:last-child { text-align: right; }
.admin-table-row-overdue td { background: #fff8f7; }
.admin-table-primary { display: block; color: var(--wf-heading); font-weight: 750; }
.admin-table-secondary { display: block; margin-top: 3px; color: var(--wf-muted); font-size: .78rem; }
.admin-data-table a.admin-table-primary { text-decoration: none; }
.admin-data-table a.admin-table-primary:hover { color: var(--wf-brand-hover); text-decoration: underline; }
.admin-table-sort { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: inherit; padding: 0; font: inherit; font-weight: inherit; white-space: nowrap; }
.admin-table-sort svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
.admin-data-table th[aria-sort="ascending"] .admin-table-sort,
.admin-data-table th[aria-sort="descending"] .admin-table-sort { color: var(--wf-heading); }
.admin-drag-handle { width: 38px; color: var(--wf-muted); cursor: grab; text-align: center !important; }
.admin-drag-handle:active { cursor: grabbing; }
.admin-drag-handle svg { width: 20px; height: 20px; fill: currentColor; }
.admin-sort-dragging { opacity: .45; }
.project-list-indicator { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--wf-border); border-radius: 999px; background: var(--wf-surface-muted); color: var(--wf-text); padding: 3px 8px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.project-list-indicator-warning { border-color: #f2c3bf; background: #fff4f2; color: #a93226; }

/* Project work */
.admin-status-badge { display: inline-flex; align-items: center; width: fit-content; border: 1px solid #b9d7f7; border-radius: 999px; background: #eff8ff; color: #175cd3; padding: 5px 10px; font-size: .82rem; font-weight: 750; }
.finance-empty-actions { align-content: center; gap: 10px; }
.finance-area-filter { display: flex; justify-content: flex-end; }
.finance-area-filter label { display: grid; width: min(280px, 100%); gap: 6px; color: #344054; font-size: .82rem; font-weight: 700; }
.finance-area-filter select { min-height: 40px; border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; color: var(--wf-heading); padding: 8px 11px; }
.finance-comparison { margin-top: 4px; }
.finance-total-row td { border-top: 2px solid var(--wf-border-strong); color: var(--wf-heading); font-weight: 800; }
.finance-negative { color: var(--wf-danger) !important; font-weight: 750; }
.finance-account-settings { max-width: 960px; }
.finance-account-settings select,
.finance-account-settings input[type="number"] { min-width: 9rem; }
.finance-update-existing { margin-top: 18px; }
.finance-account-settings .admin-form-actions { margin-top: 18px; }
.project-overview-content { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 16px; }
.overview-card-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.overview-card-summary::-webkit-details-marker, .overview-completed-checklist > summary::-webkit-details-marker { display: none; }
.overview-card-summary:focus-visible, .overview-completed-checklist > summary:focus-visible { border-radius: 6px; outline: 3px solid rgba(219, 43, 100, .18); outline-offset: 4px; }
.overview-card-chevron { width: 9px; height: 9px; flex: 0 0 auto; border-right: 2px solid var(--wf-muted); border-bottom: 2px solid var(--wf-muted); transform: rotate(45deg); transition: transform .15s ease; }
.overview-card[open] > .overview-card-summary .overview-card-chevron { transform: rotate(225deg); }
.overview-card-body { margin-top: 16px; }
.project-overview-finance { min-width: 0; }
.project-overview-finance-summary { display: grid; grid-template-columns: 1fr; margin: 0; }
.project-overview-finance-summary > div { display: grid; gap: 5px; border-bottom: 1px solid var(--wf-border); padding: 10px 0; }
.project-overview-finance-summary > div:first-child { padding-top: 0; }
.project-overview-finance-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.project-overview-finance-summary dt { color: var(--wf-muted); font-size: .76rem; font-weight: 700; }
.project-overview-finance-summary dd { margin: 0; color: var(--wf-heading); font-size: 1.05rem; font-weight: 800; }
.project-overview-checklists { display: grid; grid-column: 1; min-width: 0; gap: 12px; }
.project-overview-activity { grid-column: 1; min-width: 0; }
.project-activity-timeline { display: grid; gap: 18px; }
.project-activity-day h3 { margin: 0 0 9px; color: var(--wf-muted); font-size: .78rem; font-weight: 750; }
.project-activity-day ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.project-activity-item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 0 0 15px; }
.project-activity-item:not(:last-child)::before { position: absolute; top: 13px; bottom: -1px; left: 5px; width: 1px; background: var(--wf-border-strong); content: ""; }
.project-activity-item:last-child { padding-bottom: 0; }
.project-activity-dot { z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 2px solid #64748b; border-radius: 50%; background: #fff; }
.project-activity-checklist .project-activity-dot { border-color: #16856f; }
.project-activity-milestone .project-activity-dot { border-color: #1f6feb; }
.project-activity-finance .project-activity-dot { border-color: #b7791f; }
.project-activity-photo .project-activity-dot { border-color: var(--wf-accent); }
.project-activity-item > div { display: grid; gap: 2px; min-width: 0; }
.project-activity-item strong { color: var(--wf-heading); font-size: .88rem; }
.project-activity-item span { overflow-wrap: anywhere; color: var(--wf-text); font-size: .82rem; }
.project-activity-item small { color: var(--wf-muted); font-size: .74rem; }
.project-activity-more { display: flex; justify-content: flex-end; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--wf-border); }
.project-activity-more a { color: var(--wf-accent); font-size: .82rem; font-weight: 750; text-decoration: none; }
.project-activity-more a:hover { text-decoration: underline; }
.project-activity-full { max-width: 900px; }
.project-activity-flyout-trigger { width: 34px; height: 34px; padding: 7px; }
.project-activity-flyout { --bs-offcanvas-width: min(430px, 92vw); border-left: 1px solid var(--wf-border); }
.project-activity-flyout .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--wf-border); padding: 18px 20px; }
.project-activity-flyout .offcanvas-header > div { display: grid; gap: 2px; }
.project-activity-flyout .offcanvas-header span { color: var(--wf-muted); font-size: .72rem; font-weight: 700; }
.project-activity-flyout .offcanvas-header h2 { margin: 0; color: var(--wf-heading); font-size: 1.05rem; font-weight: 800; }
.project-activity-flyout .offcanvas-body { padding: 20px; }
.project-activity-flyout-footer { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--wf-border); }
.project-activity-flyout-footer a { color: var(--wf-accent); font-size: .82rem; font-weight: 750; text-decoration: none; }
.project-activity-flyout-footer a:hover { text-decoration: underline; }
.project-overview-checklist-list { display: grid; gap: 12px; }
.overview-open-checklist { border: 1px solid var(--wf-border); border-radius: 10px; padding: 14px; }
.overview-completed-checklist { overflow: hidden; border: 1px solid var(--wf-border); border-radius: 10px; background: #fbfcfe; }
.overview-completed-checklist > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; list-style: none; cursor: pointer; }
.overview-completed-checklist > summary:hover { background: var(--wf-surface-muted); }
.overview-completed-checklist[open] > summary { border-bottom: 1px solid var(--wf-border); }
.overview-completed-checklist[open] > summary .overview-card-chevron { transform: rotate(225deg); }
.overview-checklist-title { display: grid; min-width: 0; gap: 2px; }
.overview-checklist-title strong { overflow-wrap: anywhere; color: var(--wf-heading); }
.overview-checklist-title small { color: var(--wf-muted); font-size: .76rem; }
.overview-checklist-completed { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; color: var(--wf-muted); font-size: .78rem; }
.overview-completed-checklist-body { padding: 13px; }
.project-overview-main { display: grid; grid-column: 1; min-width: 0; align-content: start; gap: 16px; }
.project-overview-sidebar { display: grid; grid-column: 2; min-width: 0; align-content: start; gap: 16px; }
.project-milestone-overview { min-width: 0; }
.project-status-current { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-photo-categories { display: grid; gap: 16px; }
.project-photo-category-missing { border-color: #f2c3bf; background: #fffdfc; }
.project-photo-category-status { display: flex; align-items: center; gap: 12px; margin: -3px 0 14px; color: var(--wf-muted); font-size: .8rem; }
.project-photo-category-status strong { color: var(--wf-danger); }
.project-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.project-photo { overflow: hidden; margin: 0; border: 1px solid var(--wf-border); border-radius: 10px; background: var(--wf-surface-muted); }
.project-photo > a { display: block; aspect-ratio: 4 / 3; background: #eef1f5; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; }
.project-photo figcaption { display: grid; gap: 5px; padding: 10px; }
.project-photo figcaption strong { overflow: hidden; color: var(--wf-heading); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.project-photo figcaption span { color: var(--wf-muted); font-size: .72rem; }
.project-photo figcaption form { justify-self: end; margin-top: 3px; }
.project-photo-required-input { width: 8rem; min-height: 38px; border: 1px solid var(--wf-border); border-radius: 9px; padding: 7px 9px; }
.project-photo-category-settings .admin-form-actions { margin-top: 18px; }
.project-template-form { max-width: 1040px; }
.project-template-section { display: grid; gap: 12px; margin-top: 24px; }
.project-template-section h2 { margin: 0; }
.project-template-form > form > .admin-form-actions { margin-top: 24px; }
.project-template-empty-actions { align-content: center; gap: 10px; }
.project-template-wizard { display: grid; gap: 22px; }
.project-template-wizard-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.project-template-wizard-steps li { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--wf-muted); font-size: .78rem; font-weight: 700; text-align: center; }
.project-template-wizard-steps li::before { position: absolute; top: 15px; right: 50%; left: -50%; height: 2px; background: var(--wf-border); content: ""; }
.project-template-wizard-steps li:first-child::before { display: none; }
.project-template-wizard-steps li > span { z-index: 1; display: grid; width: 32px; height: 32px; border: 1px solid var(--wf-border-strong); border-radius: 50%; background: #fff; color: var(--wf-muted); place-items: center; }
.project-template-wizard-steps li.is-current { color: var(--wf-heading); }
.project-template-wizard-steps li.is-current > span { border-color: var(--wf-brand); background: var(--wf-brand); color: #fff; }
.project-template-wizard-steps li.is-complete::before, .project-template-wizard-steps li.is-current::before, .project-template-wizard-steps li.is-complete > span { border-color: var(--wf-brand); background: var(--wf-brand-soft); }
.project-template-wizard-steps li.is-complete > span { color: var(--wf-brand-hover); }
.project-template-wizard-panel { display: grid; gap: 16px; }
.project-template-wizard-panel-hidden { display: none; }
.project-template-wizard-panel > h2 { margin: 0; }
.project-template-wizard-actions { padding-top: 20px; border-top: 1px solid var(--wf-border); }
.project-template-wizard-next { margin-left: auto; }
.project-template-summary { display: grid; gap: 14px; }
.project-template-summary > section { border: 1px solid var(--wf-border); border-radius: 10px; padding: 14px; }
.project-template-summary h3 { margin-bottom: 10px; }
.project-template-summary dl { display: grid; gap: 10px; margin: 0; }
.project-template-summary dl > div { display: grid; gap: 3px; }
.project-template-summary dt { color: var(--wf-muted); font-size: .76rem; font-weight: 700; }
.project-template-summary dd { margin: 0; color: var(--wf-heading); white-space: pre-wrap; }
.project-template-summary ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.project-template-summary li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--wf-border); padding: 9px 0; }
.project-template-summary li:first-child { padding-top: 0; }
.project-template-summary li:last-child { border-bottom: 0; padding-bottom: 0; }
.project-template-summary li strong { color: var(--wf-muted); font-size: .76rem; white-space: nowrap; }
.project-template-summary p { margin: 0; }
.project-status-current > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-status-label { color: var(--wf-muted); font-size: .8rem; font-weight: 700; }
.project-status-history { margin-top: 16px; }
.project-status-history td:last-child { text-align: left; }
.milestone-table-date { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.milestone-table-completion { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 2px 6px; }
.milestone-table-completion small { grid-column: 1 / -1; color: var(--wf-muted); font-size: .72rem; }
.milestone-table-state { display: inline-flex; align-items: center; gap: 8px; color: var(--wf-heading); white-space: nowrap; }
.project-timeline { position: relative; display: grid; gap: 0; max-width: 920px; padding: 2px 0 2px 38px; }
.project-timeline::before { position: absolute; top: 8px; bottom: 8px; left: 9px; width: 2px; background: var(--wf-border-strong); content: ""; }
.project-timeline-group { position: relative; display: grid; gap: 8px; padding-bottom: 16px; }
.project-timeline-marker { position: absolute; top: 1px; left: -38px; z-index: 1; width: 20px; height: 20px; border: 5px solid #fff; border-radius: 50%; background: #175cd3; box-shadow: 0 0 0 1px #175cd3; }
.project-timeline-date { margin: 0; color: var(--wf-muted); font-size: .78rem; font-weight: 750; }
.project-timeline-group-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.project-timeline-card { display: grid; min-width: 0; gap: 9px; border: 1px solid var(--wf-border); border-radius: 10px; background: var(--wf-surface-muted); padding: 11px 12px; }
.project-timeline-card-complete { background: #fbfcfe; }
.project-timeline-card-overdue { border-color: #efcbc7; background: #fff8f7; }
.project-timeline-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-timeline-card-header > div:first-child { display: grid; min-width: 0; gap: 3px; }
.project-timeline-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.project-timeline-card-actions .admin-icon-button { width: 32px; height: 32px; padding: 6px; }
.project-timeline-card strong { overflow-wrap: anywhere; color: var(--wf-heading); font-size: .9rem; }
.project-timeline-card small { color: var(--wf-muted); font-size: .76rem; }
.project-timeline-card-footer { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--wf-border); padding-top: 8px; color: var(--wf-muted); font-size: .74rem; }
.project-timeline-today { position: relative; display: flex; min-height: 42px; align-items: flex-start; gap: 7px; color: var(--wf-danger); padding: 1px 0 14px; font-size: .76rem; font-weight: 800; }
.project-timeline-today time { color: var(--wf-muted); font-weight: 600; }
.project-timeline-today-arrow { position: absolute; top: 1px; left: -36px; z-index: 2; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid var(--wf-danger); filter: drop-shadow(0 0 1px #fff); }
.project-overview-timeline { max-width: none; }
.project-overview-timeline .project-timeline-group-items { grid-template-columns: 1fr; }
.project-overview-milestone { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--wf-border); border-radius: 9px; background: var(--wf-surface-muted); color: var(--wf-text); padding: 10px 11px; text-align: left; cursor: pointer; }
.project-overview-milestone:hover { border-color: var(--wf-brand); background: var(--wf-brand-soft); }
.project-overview-milestone-overdue { border-color: #efcbc7; background: #fff8f7; }
.project-overview-milestone-overdue:hover { border-color: #dd9f99; background: #fff1ef; }
.project-overview-milestone-copy { display: grid; min-width: 0; gap: 3px; }
.project-overview-milestone-copy strong { overflow-wrap: anywhere; color: var(--wf-heading); font-size: .85rem; }
.project-overview-milestone-copy small { color: var(--wf-muted); font-size: .74rem; }
.project-overview-milestone-check { display: flex; flex: 0 0 auto; align-items: center; margin-left: auto; }
.project-milestone-details { display: grid; gap: 12px; margin: 0; }
.project-milestone-details div { display: grid; gap: 3px; }
.project-milestone-details dt { color: var(--wf-muted); font-size: .76rem; font-weight: 700; }
.project-milestone-details dd { margin: 0; color: var(--wf-text); white-space: pre-wrap; }
.project-milestone-details .project-milestone-date { display: flex; align-items: center; gap: 8px; }
.milestone-date-edit { width: 28px; height: 28px; padding: 5px; }
.milestone-date-history { display: grid; gap: 6px; border-top: 1px solid var(--wf-border); padding-top: 12px; }
.milestone-date-history > strong { color: var(--wf-heading); font-size: .78rem; }
.milestone-date-history ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--wf-muted); font-size: .74rem; }
.milestone-date-suggestions { display: grid; gap: 8px; margin: 0; border: 0; padding: 0; }
.milestone-date-suggestions legend { margin-bottom: 2px; color: var(--wf-heading); font-size: .92rem; font-weight: 750; }
.milestone-date-suggestion { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wf-border); border-radius: 9px; background: var(--wf-surface-muted); padding: 10px 12px; }
.milestone-date-suggestion > input { width: 18px; height: 18px; accent-color: var(--wf-brand); }
.milestone-date-suggestion > span { display: grid; gap: 2px; }
.milestone-date-suggestion small { color: var(--wf-muted); }
.project-list { display: grid; gap: 12px; }
.checklist-item { display: grid; gap: 12px; border: 1px solid var(--wf-border); border-radius: var(--wf-radius); background: #fff; padding: 16px; }
.checklist-item-complete { background: #fbfcfe; }
.checklist-item-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.checklist-item-content { min-width: 0; }
.checklist-item-header h3 { margin: 0; color: var(--wf-heading); font-size: 1rem; }
.checklist-item-header p { margin: 4px 0 0; color: var(--wf-muted); }
.admin-user-menu { width: 230px; }
.project-checkbox { display: flex; align-items: center; gap: 9px; color: var(--wf-heading); font-weight: 750; cursor: pointer; }
.project-checkbox input { width: 20px; height: 20px; accent-color: var(--wf-brand); }
.checklist-complete-trigger { flex: 0 0 auto; border: 0; background: transparent; padding: 8px; }
.checklist-complete-trigger:hover:not(:disabled) { color: var(--wf-brand-hover); }
.checklist-complete-trigger:disabled { color: var(--wf-muted); cursor: not-allowed; }
.checklist-fake-checkbox { width: 20px; height: 20px; border: 1px solid #7b8494; border-radius: 3px; background: #fff; }
.checklist-complete-trigger:hover:not(:disabled) .checklist-fake-checkbox { border-color: var(--wf-brand); background: var(--wf-brand-soft); }
.checklist-fake-checkbox-checked { position: relative; border-color: var(--wf-brand); background: var(--wf-brand); }
.checklist-fake-checkbox-checked::after { position: absolute; top: 2px; left: 6px; width: 6px; height: 11px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; content: ""; transform: rotate(45deg); }
.checklist-complete-trigger-checked:hover:not(:disabled) .checklist-fake-checkbox { border-color: var(--wf-brand-hover); background: var(--wf-brand-hover); }
.checklist-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--wf-muted); font-size: .8rem; }
.checklist-item-footer { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--wf-border); padding-top: 10px; }
.checklist-item-status { color: var(--wf-muted); font-size: .78rem; }
.checklist-note-button { display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 6px; background: transparent; color: var(--wf-muted); padding: 5px; place-items: center; }
.checklist-note-button:hover { background: var(--wf-brand-soft); color: var(--wf-brand-hover); }
.checklist-note-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.checklist-completion-modal { border: 0; border-radius: var(--wf-radius); box-shadow: 0 24px 70px rgba(31, 42, 61, .18); }
.checklist-completion-modal .modal-header { align-items: flex-start; border-bottom-color: var(--wf-border); }
.checklist-completion-modal .modal-title { color: var(--wf-heading); font-size: 1.08rem; font-weight: 750; }
.checklist-completion-modal .modal-header p { margin: 4px 0 0; color: var(--wf-muted); }
.checklist-completion-modal .modal-body { display: grid; gap: 18px; }
.checklist-modal-complete-state { cursor: default; }
.checklist-comment-field { display: grid; gap: 7px; color: #344054; font-weight: 700; }
.checklist-comment-field textarea { width: 100%; min-height: 112px; border: 1px solid var(--wf-border); border-radius: 10px; background: #fff; color: var(--wf-heading); padding: 10px 12px; resize: vertical; line-height: 1.45; }
.checklist-comment-field textarea:focus { border-color: var(--wf-brand); box-shadow: 0 0 0 3px rgba(219, 43, 100, .1); outline: 0; }
.checklist-reopen-message, .checklist-note-content { margin: 0; color: var(--wf-text); }
.checklist-note-content { white-space: pre-wrap; }
.checklist-completion-modal .modal-footer { border-top-color: var(--wf-border); }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .landing-hero-grid, .benefit-grid, .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid { align-items: stretch; }
  .landing-signup-card { min-width: 0; }
  .admin-app-shell { display: block; width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .admin-app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 100; width: 270px; overflow-y: auto; border-right: 1px solid var(--wf-border); box-shadow: 18px 0 44px rgba(31, 42, 61, .14); transform: translateX(-105%); transition: transform .2s ease; }
  .admin-body.admin-menu-open { overflow: hidden; }
  .admin-menu-open .admin-app-sidebar { transform: translateX(0); }
  .admin-mobile-menu { display: block; flex: 0 0 auto; }
  .admin-topbar { justify-content: flex-start; padding: 10px 16px; }
  .admin-topbar-actions { margin-left: auto; }
  .admin-page { padding: 16px; }
  .admin-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-overview-content { grid-template-columns: 1fr; }
  .project-overview-main, .project-overview-sidebar { grid-column: 1; }
}

@media (max-width: 640px) {
  .workflare-brand-logo { width: 210px; }
  .auth-main { padding: 20px 12px; }
  .auth-card { padding: 24px 20px; }
  .admin-card-grid { grid-template-columns: 1fr; }
  .project-template-wizard-steps li { font-size: .68rem; }
  .project-template-wizard-steps li > span { width: 28px; height: 28px; }
  .project-template-wizard-steps li::before { top: 13px; }
  .project-template-wizard-actions { align-items: stretch; flex-direction: column-reverse; }
  .project-template-wizard-actions > *, .project-template-wizard-next { width: 100%; margin-left: 0; }
  .auth-form-row, .admin-form-grid { grid-template-columns: 1fr; }
  .admin-form-field-wide { grid-column: auto; }
  .project-status-current { align-items: flex-start; flex-direction: column; }
  .admin-card-header { align-items: stretch; flex-direction: column; }
  .admin-header-actions, .admin-form-actions { justify-content: flex-start; }
  .admin-clean-list li { align-items: flex-start; flex-direction: column; }
  .admin-list-actions { width: 100%; justify-content: flex-start; }
  .login-user { display: none; }
  .project-timeline-group-items { grid-template-columns: 1fr; }
  .project-timeline-card-header { align-items: stretch; flex-direction: column; }
  .project-timeline-card-actions { justify-content: space-between; }
  .checklist-item-header { align-items: flex-start; }
}