/* [project]/libs/core/ui/src/tokens.css [app-client] (css) */
@font-face {
  font-family: IRANSansX;
  src: url("/fonts/iranSansx/fonts/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2"), url("/fonts/iranSansx/fonts/Woff/IRANSansXFaNum-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: IRANSansX;
  src: url("/fonts/iranSansx/fonts/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2"), url("/fonts/iranSansx/fonts/Woff/IRANSansXFaNum-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --color-ink: #1e2638;
  --color-ink-soft: #445069;
  --color-muted: #656f84;
  --color-paper: #fff;
  --color-surface: #ffffffc7;
  --color-surface-solid: #fff;
  --color-line: #1e26381f;
  --color-accent: var(--user-accent, #6856d9);
  --color-accent-deep: var(--user-accent-deep, #5543c3);
  --color-accent-subtle: var(--user-accent-subtle, #efedff);
  --color-success: #007e9f;
  --color-success-subtle: #007e9f1f;
  --color-warning: #d79628;
  --color-warning-subtle: #d7962824;
  --color-danger: #ba2b2e;
  --color-danger-subtle: #ba2b2e1a;
  --color-info: #3275b4;
  --color-info-subtle: #3275b41f;
  --color-on-accent: var(--user-on-accent, #fff);
  --color-focus-ring: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --muted: var(--color-muted);
  --paper: var(--color-paper);
  --panel: var(--color-surface);
  --line: var(--color-line);
  --accent: var(--color-accent);
  --accent-deep: var(--color-accent-deep);
  --stop: var(--color-danger);
  --start: var(--color-accent);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --font-display: "IRANSansX", sans-serif;
  --font-body: "IRANSansX", sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --radius-sm: .5rem;
  --radius-md: .625rem;
  --radius-lg: 1.125rem;
  --radius-full: 999px;
  --radius: var(--radius-lg);
  --shadow-sm: 0 2px 8px #202c260f;
  --shadow-md: 0 12px 32px #202c261a;
  --shadow-lg: 0 18px 50px #202c261f;
  --shadow: var(--shadow-lg);
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;
  --z-tooltip: 400;
  --duration-fast: .15s;
  --duration-normal: .25s;
  --duration-slow: .4s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.45, 0, .55, 1);
  --bp-xs: 390px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --touch-min: 2.75rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-height: 3.75rem;
}

@supports (color: lab(0% 0 0)) {
  :root {
    --color-ink: lab(15.0914% .523895 -12.7074);
    --color-ink-soft: lab(33.6076% .305563 -16.4398);
    --color-muted: lab(46.4539% -.207305 -12.939);
    --color-paper: lab(100% 0 0);
    --color-surface: lab(100% 0 0 / .78);
    --color-surface-solid: lab(100% 0 0);
    --color-line: lab(15.0914% .523895 -12.7074 / .12);
    --color-success: lab(48.197% -25.5097 -35.6742);
    --color-success-subtle: lab(48.197% -25.5097 -35.6742 / .12);
    --color-warning: lab(67.3872% 18.7132 63.1076);
    --color-warning-subtle: lab(67.3872% 18.7132 63.1076 / .14);
    --color-danger: lab(42.4959% 56.9739 35.4904);
    --color-danger-subtle: lab(42.4959% 56.9739 35.4904 / .1);
    --color-info: lab(47.2838% -4.9921 -40.4988);
    --color-info-subtle: lab(47.2838% -4.9921 -40.4988 / .12);
    --shadow-sm: 0 2px 8px lab(16.7482% -6.6562 1.91945 / .06);
    --shadow-md: 0 12px 32px lab(16.7482% -6.6562 1.91945 / .1);
    --shadow-lg: 0 18px 50px lab(16.7482% -6.6562 1.91945 / .12);
  }
}

[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --color-ink: #e0e8f9;
  --color-ink-soft: #acb8cf;
  --color-muted: #8892a8;
  --color-paper: #101622;
  --color-surface: #181f2ee6;
  --color-surface-solid: #1d2433;
  --color-line: #e0e8f91f;
  --color-accent: var(--user-accent, #6856d9);
  --color-accent-deep: var(--user-accent-deep, #5543c3);
  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-focus-ring: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --shadow-sm: 0 2px 8px #00000040;
  --shadow-md: 0 12px 32px #00000059;
  --shadow-lg: 0 18px 50px #00000073;
}

@supports (color: lab(0% 0 0)) {
  [data-theme="dark"] {
    --color-ink: lab(91.7639% -.440538 -9.37252);
    --color-ink-soft: lab(74.3064% -.424385 -13.0298);
    --color-muted: lab(60.3813% -.336051 -12.9914);
    --color-paper: lab(7.0769% .310712 -9.02114);
    --color-surface: lab(11.6467% .403248 -10.9039 / .9);
    --color-surface-solid: lab(13.9722% .308588 -10.9296);
    --color-line: lab(91.7639% -.440538 -9.37252 / .12);
    --shadow-sm: 0 2px 8px lab(0% 0 0 / .25);
    --shadow-md: 0 12px 32px lab(0% 0 0 / .35);
    --shadow-lg: 0 18px 50px lab(0% 0 0 / .45);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-normal: 0s;
  }
}

/* [project]/libs/core/ui/src/components.css [app-client] (css) */
.ui-focus-ring:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ui-btn {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  border: 0;
  display: inline-flex;
}

.ui-btn:active:not(:disabled) {
  transform: scale(.98);
}

.ui-btn:disabled, .ui-btn[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.ui-btn--sm {
  min-height: 2rem;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

.ui-btn--md {
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
}

.ui-btn--lg {
  min-height: 2.75rem;
  padding-inline: var(--space-5);
  font-size: var(--text-base);
}

.ui-btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.ui-btn--primary:hover:not(:disabled) {
  background: var(--color-accent-deep);
}

.ui-btn--secondary {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.ui-btn--secondary:hover:not(:disabled) {
  background: #3d66d029;
  background: lab(44.8533% 13.5164 -60.1598 / .16);
}

.ui-btn--ghost {
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line);
  background: none;
}

.ui-btn--ghost:hover:not(:disabled) {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.ui-btn--danger {
  color: var(--color-danger);
  background: none;
  border: 1px solid #ba2b2e47;
  border: 1px solid lab(42.4959% 56.9739 35.4904 / .28);
}

.ui-btn--danger:hover:not(:disabled) {
  background: var(--color-danger-subtle);
}

.ui-btn--success {
  background: var(--color-success);
  color: var(--color-on-accent);
}

.ui-btn--success:hover:not(:disabled) {
  filter: brightness(.95);
}

.ui-btn--start {
  background: var(--color-accent);
  color: var(--color-on-accent);
  min-width: 5.5rem;
  font-weight: 700;
}

.ui-btn--start:hover:not(:disabled) {
  background: var(--color-accent-deep);
}

.ui-btn--stop {
  background: var(--color-danger);
  color: var(--color-on-accent);
  min-width: 5.5rem;
  font-weight: 700;
}

.ui-btn--stop:not(:disabled) {
  animation: 1.6s infinite ui-pulse-stop;
}

@keyframes ui-pulse-stop {
  0%, 100% {
    box-shadow: 0 0 #ba2b2e59;
    box-shadow: 0 0 lab(42.4959% 56.9739 35.4904 / .35);
  }

  50% {
    box-shadow: 0 0 0 8px #ba2b2e00;
    box-shadow: 0 0 0 8px lab(42.4959% 56.9739 35.4904 / 0);
  }
}

.ui-btn--loading {
  pointer-events: none;
  position: relative;
  color: #0000 !important;
}

.ui-btn--loading:after {
  content: "";
  inset-inline-start: 50%;
  border: 2px solid;
  width: 1rem;
  height: 1rem;
  color: var(--color-on-accent);
  border-inline-end-color: #0000;
  border-radius: 50%;
  margin: -.5rem 0 0 -.5rem;
  animation: .65s linear infinite ui-spin;
  position: absolute;
  top: 50%;
}

.ui-btn--ghost.ui-btn--loading:after, .ui-btn--danger.ui-btn--loading:after {
  color: var(--color-ink-soft);
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

button:not([class*="ui-btn"]).primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  border: 0;
  margin-top: .35rem;
  padding: .65rem 1.1rem;
  font-weight: 700;
}

button:not([class*="ui-btn"]).primary:hover:not(:disabled) {
  background: var(--color-accent-deep);
}

button:not([class*="ui-btn"]).ghost {
  color: var(--color-ink-soft);
  border: 1px solid var(--color-line);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
  background: none;
  padding: .45rem .85rem;
}

button:not([class*="ui-btn"]).ghost:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

button:not([class*="ui-btn"]).danger {
  color: var(--color-danger);
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  cursor: pointer;
  background: none;
  border: 1px solid #ba2b2e47;
  border: 1px solid lab(42.4959% 56.9739 35.4904 / .28);
  padding: .45rem .85rem;
}

button:not([class*="ui-btn"]).danger:hover {
  background: var(--color-danger-subtle);
}

button:not([class*="ui-btn"]).start {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 0;
  min-width: 5.5rem;
  padding: .65rem 1.1rem;
  font-weight: 700;
}

button:not([class*="ui-btn"]).stop {
  background: var(--color-danger);
  color: var(--color-on-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 0;
  min-width: 5.5rem;
  padding: .65rem 1.1rem;
  font-weight: 700;
  animation: 1.6s infinite ui-pulse-stop;
}

button:not([class*="ui-btn"]):disabled, .start:disabled, .stop:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.ui-icon-btn {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-solid);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.ui-icon-btn:hover:not(:disabled) {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.ui-icon-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-field {
  gap: var(--space-2);
  display: grid;
}

.ui-field__label {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  font-weight: 600;
}

.ui-field__hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0;
}

.ui-field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin: 0;
}

.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  min-height: 2.5rem;
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-solid);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.ui-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%235a6b66' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: .65rem;
  background-repeat: no-repeat;
  padding-inline-start: 2.25rem;
  padding-inline-end: var(--space-3);
}

[dir="ltr"] .ui-select {
  background-position: right .65rem center;
  padding-inline-start: var(--space-3);
  padding-inline-end: 2.25rem;
}

.ui-checkbox {
  appearance: none;
  background: var(--color-surface-solid);
  cursor: pointer;
  width: 1.125rem;
  height: 1.125rem;
  transition: background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  border: 1.5px solid #202c2638;
  border: 1.5px solid lab(16.7482% -6.6562 1.91945 / .22);
  border-radius: .3rem;
  flex-shrink: 0;
  place-content: center;
  margin: 0;
  display: inline-grid;
}

.ui-checkbox:after {
  content: "";
  border: 2px solid #0000;
  border-inline-end-color: var(--color-on-accent);
  border-bottom-color: var(--color-on-accent);
  width: .45rem;
  height: .25rem;
  transition: transform var(--duration-fast) var(--ease-out);
  margin-block-end: .1rem;
  transform: rotate(45deg)scale(0);
}

.ui-checkbox:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ui-checkbox:checked:after {
  transform: rotate(45deg)scale(1);
}

.ui-checkbox:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ui-checkbox:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-color: #007b668c;
  border-color: lab(45.6129% -35.2776 3.0459 / .55);
  outline: none;
}

.ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled {
  opacity: .65;
  cursor: not-allowed;
  background: #202c260a;
  background: lab(16.7482% -6.6562 1.91945 / .04);
}

.ui-input--error, .ui-select--error, .ui-textarea--error {
  border-color: #ba2b2e73;
  border-color: lab(42.4959% 56.9739 35.4904 / .45);
}

.ui-textarea {
  resize: vertical;
  min-height: 6.5rem;
  line-height: var(--leading-relaxed);
}

.ui-password-wrap {
  display: block;
  position: relative;
}

.ui-password-input {
  padding-inline-end: 2.75rem;
}

.ui-password-toggle {
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  color: var(--color-muted);
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2);
  transform: translateY(-50%);
}

.ui-password-toggle:hover {
  color: var(--color-ink-soft);
  background: var(--color-accent-subtle);
}

.ui-badge {
  align-items: center;
  gap: var(--space-1);
  padding-block: .15rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-tight);
  white-space: nowrap;
  display: inline-flex;
}

.ui-badge--default {
  color: var(--color-ink-soft);
  background: #202c2614;
  background: lab(16.7482% -6.6562 1.91945 / .08);
}

.ui-badge--accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.ui-badge--success {
  background: var(--color-success-subtle);
  color: #00512a;
  color: lab(29.363% -32.2878 16.7087);
}

.ui-badge--warning {
  background: var(--color-warning-subtle);
  color: #764b00;
  color: lab(35.9765% 17.8288 65.2658);
}

.ui-badge--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.ui-badge--info {
  background: var(--color-info-subtle);
  color: #004f8b;
  color: lab(32.0502% -2.01271 -40.1671);
}

.ui-chip {
  align-items: center;
  gap: var(--space-1);
  padding-block: .2rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  font-size: var(--text-xs);
  background: var(--color-surface-solid);
  color: var(--color-ink-soft);
  font-weight: 500;
  display: inline-flex;
}

.ui-chip--accent {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
  border-color: #007b6640;
  border-color: lab(45.6129% -35.2776 3.0459 / .25);
}

.ui-chip--muted {
  color: var(--color-muted);
  background: #202c260d;
  background: lab(16.7482% -6.6562 1.91945 / .05);
}

.ui-chip__remove {
  color: inherit;
  opacity: .7;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
}

.ui-chip__remove:hover {
  opacity: 1;
}

.ui-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: var(--space-5);
}

.ui-card__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  display: flex;
}

.ui-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  margin: 0;
  font-weight: 700;
}

.ui-modal-backdrop {
  z-index: var(--z-modal-backdrop);
  padding: var(--space-5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #202c2673;
  background: lab(16.7482% -6.6562 1.91945 / .45);
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.ui-modal {
  z-index: var(--z-modal);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  width: min(100%, 480px);
  max-height: min(92vh, 760px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  position: relative;
  overflow-y: auto;
}

.ui-modal__header {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  display: flex;
}

.ui-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: 0;
  font-weight: 700;
}

.ui-modal__body {
  gap: var(--space-4);
  display: grid;
}

.ui-modal__footer {
  justify-content: flex-end;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  display: flex;
}

.ui-confirm-dialog__message {
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.ui-muted {
  color: var(--color-muted);
}

.ui-error-text {
  color: var(--color-danger);
  font-size: var(--text-sm);
  margin: 0;
}

.muted {
  color: var(--color-muted);
}

.error {
  margin: 0 0 var(--space-3);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* [project]/libs/core/ui/src/MemberPicker.css [app-client] (css) */
.member-picker {
  gap: .65rem;
  min-width: min(100%, 17rem);
  display: grid;
}

.member-picker__search-label {
  font-size: .84rem;
  font-weight: 700;
}

.member-picker__search {
  border: 1px solid var(--line);
  background: var(--panel);
  width: 100%;
  color: var(--ink);
  font: inherit;
  border-radius: 12px;
  padding: .72rem .85rem;
}

.member-picker__search:focus-visible, .member-picker__person:focus-visible, .member-picker__chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.member-picker__selected {
  flex-wrap: wrap;
  gap: .4rem;
  display: flex;
}

.member-picker__chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  display: inline-flex;
}

.member-picker__list {
  border: 1px solid var(--line);
  border-radius: 12px;
  max-height: 17rem;
  display: grid;
  overflow-y: auto;
}

.member-picker__person {
  border: 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  color: var(--ink);
  text-align: start;
  font: inherit;
  cursor: pointer;
  background: none;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  display: flex;
}

.member-picker__person:last-child {
  border-bottom: 0;
}

.member-picker__person:not(.is-existing):hover {
  background: #6452d212;
}

.member-picker__person.is-existing {
  opacity: .62;
  cursor: default;
}

.member-picker__avatar {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
  background: #6452d21f;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.member-picker__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.member-picker__identity {
  gap: .1rem;
  min-width: 0;
  display: grid;
}

.member-picker__identity strong, .member-picker__identity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.member-picker__identity small {
  color: var(--muted);
}

.member-picker__action {
  color: var(--muted);
  white-space: nowrap;
  margin-inline-start: auto;
  font-size: .76rem;
}

.member-picker__empty {
  color: var(--muted);
  margin: 0;
  padding: .8rem;
  font-size: .85rem;
}

/* [project]/libs/core/ui/src/a11y.css [app-client] (css) */
.skip-link {
  z-index: calc(var(--z-tooltip) + 1);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--duration-fast) var(--ease-out);
  font-weight: 700;
  text-decoration: none;
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
}

.skip-link:focus, .skip-link:focus-visible {
  transform: translateY(0);
}

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

#main-content:focus {
  outline: none;
}

#main-content:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="tab"]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.muted, .ui-empty__desc, .auth-card__subtitle {
  color: var(--color-ink-soft);
}

/* [project]/libs/core/ui/src/motion.css [app-client] (css) */
@keyframes tempo-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tempo-scale-in {
  from {
    opacity: 0;
    transform: scale(.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tempo-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tempo-toast-in {
  from {
    opacity: 0;
    transform: translateY(.65rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tempo-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(.5rem);
  }
}

@keyframes tempo-live-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

@keyframes tempo-atmosphere-drift {
  from {
    transform: translate3d(0, 0, 0)scale(1);
  }

  to {
    transform: translate3d(-1.5%, 2%, 0)scale(1.03);
  }
}

.modal-backdrop, .ui-modal-backdrop {
  animation: tempo-fade-in var(--duration-fast) var(--ease-out);
  will-change: opacity;
}

.modal, .ui-modal {
  animation: tempo-scale-in var(--duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

.panel, .list-panel {
  animation: tempo-rise var(--duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

.ui-toast {
  animation: tempo-toast-in var(--duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

.ui-toast.is-exiting {
  animation: tempo-toast-out var(--duration-fast) var(--ease-out) forwards;
}

.ui-btn:active:not(:disabled), .ui-icon-btn:active:not(:disabled) {
  transform: scale(.98);
}

.tempo-live-pulse, .task-table__status-pulse, .task-list-summary__pulse, .app-shell__live-dot, .kanban-card.is-running .kanban-card__live-dot {
  animation: tempo-live-pulse 1.5s var(--ease-out) infinite;
}

@keyframes tempo-hourglass-turn {
  0%, 38% {
    transform: rotate(0);
  }

  50%, 88% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tempo-hourglass-running {
    transform-box: view-box;
    transform-origin: center;
    animation: 5.6s ease-in-out infinite tempo-hourglass-turn;
  }

  .task-card-list .task-card {
    animation: tempo-rise var(--duration-normal) var(--ease-out) both;
  }

  .task-card-list .task-card:first-child {
    animation-delay: 0s;
  }

  .task-card-list .task-card:nth-child(2) {
    animation-delay: 35ms;
  }

  .task-card-list .task-card:nth-child(3) {
    animation-delay: 70ms;
  }

  .task-card-list .task-card:nth-child(4) {
    animation-delay: .105s;
  }

  .task-card-list .task-card:nth-child(5) {
    animation-delay: .14s;
  }

  .task-card-list .task-card:nth-child(n+6) {
    animation-delay: .175s;
  }

  .task-table tbody tr {
    animation: tempo-rise var(--duration-normal) var(--ease-out) both;
  }

  .task-table tbody tr:first-child {
    animation-delay: 0s;
  }

  .task-table tbody tr:nth-child(2) {
    animation-delay: 30ms;
  }

  .task-table tbody tr:nth-child(3) {
    animation-delay: 60ms;
  }

  .task-table tbody tr:nth-child(4) {
    animation-delay: 90ms;
  }

  .task-table tbody tr:nth-child(5) {
    animation-delay: .12s;
  }

  .task-table tbody tr:nth-child(n+6) {
    animation-delay: .15s;
  }

  .kanban-board--enter .kanban-column__cards .kanban-card {
    animation: tempo-rise var(--duration-normal) var(--ease-out) both;
  }

  .kanban-board--enter .kanban-column__cards .kanban-card:first-child {
    animation-delay: 0s;
  }

  .kanban-board--enter .kanban-column__cards .kanban-card:nth-child(2) {
    animation-delay: 40ms;
  }

  .kanban-board--enter .kanban-column__cards .kanban-card:nth-child(3) {
    animation-delay: 80ms;
  }

  .kanban-board--enter .kanban-column__cards .kanban-card:nth-child(n+4) {
    animation-delay: .12s;
  }
}

.atmosphere {
  animation: tempo-atmosphere-drift 18s var(--ease-out) infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere {
    animation: none !important;
  }

  .modal-backdrop, .ui-modal-backdrop, .modal, .ui-modal, .panel, .list-panel, .ui-toast, .task-card-list .task-card, .task-table tbody tr, .kanban-column__cards .kanban-card {
    will-change: auto;
    transition: none !important;
    animation: 1ms linear tempo-fade-in !important;
  }

  .ui-toast.is-exiting {
    animation: 1ms linear reverse tempo-fade-in !important;
  }

  .tempo-live-pulse, .task-table__status-pulse, .task-list-summary__pulse, .app-shell__live-dot, .kanban-card.is-running .kanban-card__live-dot, .task-card.is-running .task-card__time strong:before {
    animation: none !important;
  }

  .ui-btn:active:not(:disabled), .ui-icon-btn:active:not(:disabled) {
    transform: none;
  }
}

/* [project]/libs/core/ui/src/states.css [app-client] (css) */
@keyframes ui-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.ui-skeleton {
  border-radius: var(--radius-md, 10px);
  background: linear-gradient(110deg, #1a24210f 30%, #1a24211a 50%, #1a24210f 70%) 0 0 / 200% 100%;
  animation: 1.2s ease-in-out infinite ui-shimmer;
}

.ui-skeleton--text {
  border-radius: 6px;
  height: .85rem;
}

.ui-skeleton--block {
  height: 3rem;
}

.ui-skeleton-table {
  gap: .45rem;
  margin-top: .75rem;
  display: grid;
}

.ui-skeleton-table__head, .ui-skeleton-table__row {
  grid-template-columns: 2fr 1fr 1fr .75fr;
  gap: .55rem;
  display: grid;
}

.ui-skeleton-table__head .ui-skeleton {
  opacity: .7;
  height: .75rem;
}

.ui-skeleton-table__row .ui-skeleton {
  height: 2.75rem;
}

.ui-skeleton-kanban {
  gap: .75rem;
  margin-top: .75rem;
  padding-bottom: .35rem;
  display: flex;
  overflow-x: auto;
}

.ui-skeleton-kanban__col {
  border: 1px solid var(--line);
  background: #ffffff8c;
  border-radius: 14px;
  flex: 0 0 min(17rem, 78vw);
  gap: .45rem;
  padding: .65rem;
  display: grid;
}

.ui-skeleton-kanban__col .ui-skeleton:first-child {
  width: 55%;
  height: 1.25rem;
}

.ui-skeleton-list {
  gap: .45rem;
  display: grid;
}

.ui-skeleton-list .ui-skeleton {
  height: 3.25rem;
}

.ui-skeleton-cards {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .55rem;
  display: grid;
}

.ui-skeleton-cards .ui-skeleton {
  height: 4.5rem;
}

.ui-empty {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff8c;
  border-radius: 14px;
  justify-items: center;
  gap: .55rem;
  padding: 2rem 1.25rem;
  display: grid;
}

.ui-empty.is-compact {
  border-radius: 12px;
  gap: .35rem;
  padding: 1.25rem .85rem;
}

.ui-empty__icon {
  width: 3rem;
  height: 3rem;
  color: var(--accent-deep);
  background: #0f766e1a;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ui-empty.is-compact .ui-empty__icon {
  width: 2.25rem;
  height: 2.25rem;
}

.ui-empty__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.ui-empty.is-compact .ui-empty__icon svg {
  width: 1rem;
  height: 1rem;
}

.ui-empty__title {
  color: var(--ink-soft);
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ui-empty.is-compact .ui-empty__title {
  font-size: .88rem;
}

.ui-empty__desc {
  max-width: 26rem;
  margin: 0;
  font-size: .85rem;
  line-height: 1.5;
}

.ui-empty.is-compact .ui-empty__desc {
  font-size: .78rem;
}

.ui-inline-error {
  background: #fee2e273;
  border: 1px solid #dc262640;
  border-radius: 12px;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin: .75rem 0 0;
  padding: .75rem .85rem;
  display: flex;
}

.ui-inline-error__msg {
  color: #991b1b;
  flex: 1;
  min-width: 10rem;
  margin: 0;
  font-size: .88rem;
}

.ui-offline-banner {
  z-index: var(--z-sticky);
  color: #fff;
  text-align: center;
  background: #78350f;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  font-size: .84rem;
  font-weight: 600;
  display: flex;
  position: sticky;
  top: 0;
}

.ui-offline-banner svg {
  flex-shrink: 0;
}

.ui-error-fallback {
  text-align: center;
  background: var(--paper, #f4f7f6);
  place-content: center;
  justify-items: center;
  gap: .75rem;
  min-height: 100vh;
  padding: 2rem;
  display: grid;
}

.ui-error-fallback__icon {
  color: #dc2626;
  background: #dc26261f;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
}

.ui-error-fallback h1 {
  color: var(--ink);
  margin: 0;
  font-size: 1.15rem;
}

.ui-error-fallback p {
  max-width: 24rem;
  color: var(--muted);
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton {
    animation: none;
  }
}

/* [project]/libs/core/ui/src/responsive.css [app-client] (css) */
:root {
  --bp-xs: 390px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --touch-min: 2.75rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --mobile-nav-height: 3.75rem;
}

@media (max-width: 767px) {
  .ui-toast-stack {
    bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + var(--space-2));
    inset-inline-end: calc(var(--space-3) + var(--safe-right, 0px));
  }

  .modal-backdrop, .ui-modal-backdrop {
    place-items: stretch stretch;
    padding: 0;
  }

  .modal, .ui-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100dvh;
    max-height: none;
    padding-top: calc(var(--space-5) + var(--safe-top));
    padding-bottom: calc(var(--space-5) + var(--safe-bottom));
    padding-inline: calc(var(--space-4) + var(--safe-right))
      calc(var(--space-4) + var(--safe-left));
    border-inline: 0;
    border-radius: 0;
    animation: none;
  }

  .modal-backdrop, .ui-modal-backdrop {
    animation: none;
  }

  .ui-icon-btn {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .ui-btn--sm {
    min-height: var(--touch-min);
  }

  .notif-bell__btn.ui-icon-btn, .user-menu__trigger, .kanban-card__action, .task-table__action {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  .view-mode-toggle__btn {
    min-height: var(--touch-min) !important;
  }
}

@media (max-width: 389px) {
  .page {
    padding-inline: calc(var(--space-3) + var(--safe-right))
      calc(var(--space-3) + var(--safe-left));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page {
    padding-inline: clamp(1rem, 3vw, 2rem);
  }
}

@media (min-width: 1280px) {
  .page {
    max-width: var(--bp-lg);
    margin-inline: auto;
  }
}

/* [project]/frontend/app/globals.css [app-client] (css) */
* {
  margin: 0;
}

body {
  min-width: 320px;
}

.ui-preview-page .brand {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  letter-spacing: -.03em;
  color: var(--color-accent-deep);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 800;
}

.ui-preview-page .headline {
  margin-block: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
}

.ui-preview-page .lede {
  max-width: 34rem;
  color: var(--color-ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.ui-preview-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-block-end: var(--space-6);
  display: flex;
}

.ui-preview-grid {
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  display: grid;
}

.ui-preview-row {
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-block-end: var(--space-3);
  display: flex;
}

.ui-preview-row:last-child {
  margin-block-end: 0;
}

.ui-preview-form {
  gap: var(--space-4);
  display: grid;
}

.ui-preview-swatches {
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  display: grid;
}

.ui-preview-swatch {
  gap: var(--space-2);
  text-align: center;
  display: grid;
}

.ui-preview-swatch span {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  height: 3rem;
  display: block;
}

.ui-preview-swatch code {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* [project]/frontend/app/assistant-popup.css [app-client] (css) */
.assistant-widget {
  --assistant-accent: #6657d9;
  z-index: 1000;
  right: auto;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: calc(16px + env(safe-area-inset-left));
  font-family: inherit;
  position: fixed;
}

.assistant-widget * {
  box-sizing: border-box;
}

.assistant-widget button, .assistant-widget textarea {
  font: inherit;
}

.assistant-launcher {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(145deg, #735fe2, #5140b5);
  border: 1px solid #ffffff3d;
  border-radius: 18px;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  font: 700 14px inherit;
  transition: all .2s;
  display: grid;
  box-shadow: 0 14px 35px #32248245;
}

.assistant-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px #32248255;
}

.assistant-launcher span {
  background: #ffffff1f;
  border-radius: 11px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  display: grid;
}

.assistant-panel {
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 100%;
  background: #fbfaff;
  border: 1px solid #dedbea;
  border-radius: 25px;
  flex-direction: column;
  width: min(460px, 100vw - 32px);
  height: min(720px, 100dvh - 110px);
  transition: opacity .2s, transform .28s cubic-bezier(.2, .8, .2, 1), visibility .2s;
  display: flex;
  position: absolute;
  bottom: 70px;
  left: 0;
  right: auto;
  overflow: hidden;
  transform: translateY(18px)scale(.96);
  box-shadow: 0 26px 80px #24203642;
}

.is-open .assistant-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.assistant-header {
  z-index: 3;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #ffffffed;
  border-bottom: 1px solid #e8e5f1;
  align-items: center;
  gap: 11px;
  padding: 16px 17px;
  display: flex;
  position: relative;
}

.assistant-avatar {
  color: #fff;
  background: linear-gradient(145deg, #7662e4, #5040b7);
  border-radius: 14px;
  place-items: center;
  width: 43px;
  height: 43px;
  font-size: 20px;
  display: grid;
  box-shadow: 0 8px 18px #5946bd38;
}

.assistant-header > div {
  flex: 1;
}

.assistant-header h2 {
  color: #252235;
  margin: 0;
  font-size: 15px;
}

.assistant-header p {
  color: #777e8c;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 10px;
  display: flex;
}

.assistant-header i {
  background: #22a06b;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 3px #22a06b1c;
}

.assistant-close, .assistant-history-toggle {
  color: #696376;
  cursor: pointer;
  background: #f0eef6;
  border: 0;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.assistant-close {
  font-size: 22px;
}

.assistant-history-toggle {
  font-size: 17px;
}

.assistant-history {
  z-index: 2;
  background: #fff;
  flex-direction: column;
  width: 78%;
  padding: 15px;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  position: absolute;
  inset: 76px 0 0 auto;
  transform: translateX(105%);
  box-shadow: -18px 14px 45px #2e294735;
}

.assistant-history.is-open {
  transform: none;
}

.assistant-history > header {
  border-bottom: 1px solid #eceaf1;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 13px;
  display: flex;
}

.assistant-history > header strong {
  font-size: 12px;
}

.assistant-history > header button {
  color: #fff;
  cursor: pointer;
  background: #6657d9;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 10px;
}

.assistant-history > div {
  flex: 1;
  padding-top: 10px;
  overflow: auto;
}

.assistant-history > div > button {
  color: #50586a;
  text-align: right;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  gap: 4px;
  width: 100%;
  margin-bottom: 5px;
  padding: 11px;
  display: grid;
}

.assistant-history > div > button:hover, .assistant-history > div > button.is-active {
  color: #5142b9;
  background: #f0eefb;
}

.assistant-history > div b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  overflow: hidden;
}

.assistant-history > div small, .assistant-history > div > p {
  color: #949aa6;
  font-size: 9px;
}

.assistant-history footer {
  border-top: 1px solid #eceaf1;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  display: flex;
}

.assistant-history footer > span {
  color: #6252cb;
  background: #ece9ff;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.assistant-history footer p {
  flex: 1;
  display: grid;
}

.assistant-history footer b {
  font-size: 10px;
}

.assistant-history footer small {
  color: #9298a4;
  font-size: 8px;
}

.assistant-history footer a {
  color: #6d6680;
  text-decoration: none;
}

.assistant-feed {
  background: radial-gradient(circle at 15% 0, #eeeaff 0, #0000 38%), #f8f8fc;
  flex: 1;
  padding: 18px;
  overflow: auto;
}

.assistant-welcome {
  text-align: center;
  place-items: center;
  max-width: 390px;
  margin: auto;
  padding: 18px 0;
  display: grid;
}

.assistant-welcome > span {
  color: #fff;
  background: linear-gradient(145deg, #786ae5, #5545bd);
  border-radius: 19px;
  place-items: center;
  width: 57px;
  height: 57px;
  margin-bottom: 11px;
  font-size: 25px;
  display: grid;
  box-shadow: 0 12px 28px #6051c93d;
}

.assistant-welcome > small {
  color: #7064ca;
  font-size: 9px;
  font-weight: 700;
}

.assistant-welcome h3 {
  color: #28253a;
  margin: 7px 0;
  font-size: 20px;
}

.assistant-welcome > p {
  color: #7e8492;
  margin: 0 8px 16px;
  font-size: 10px;
  line-height: 1.8;
}

.assistant-welcome > div {
  gap: 7px;
  width: 100%;
  display: grid;
}

.assistant-welcome button {
  color: #373445;
  text-align: right;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e4e3ec;
  border-radius: 13px;
  grid-template-columns: 1fr auto;
  gap: 3px;
  padding: 11px 13px;
  transition: all .2s;
  display: grid;
}

.assistant-welcome button:hover {
  border-color: #cfc9ef;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #4d438412;
}

.assistant-welcome button b {
  font-size: 11px;
}

.assistant-welcome button small {
  color: #858b97;
  grid-row: 2;
  font-size: 8px;
}

.assistant-welcome button em {
  color: #7769c9;
  grid-area: 1 / 2 / 3;
  align-self: center;
  font-style: normal;
}

.assistant-message {
  flex-direction: column;
  align-items: flex-start;
  max-width: 86%;
  margin: 0 0 15px;
  display: flex;
}

.assistant-message > div {
  color: #34313d;
  background: #fff;
  border: 1px solid #e3e1eb;
  border-radius: 5px 15px 15px;
  padding: 10px 13px;
  box-shadow: 0 4px 14px #31295c0a;
}

.assistant-message b {
  font-size: 9px;
}

.assistant-message p {
  white-space: pre-wrap;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.8;
}

.assistant-message small {
  color: #26805d;
  margin-top: 6px;
  font-size: 8px;
  display: block;
}

.assistant-message time {
  color: #97919f;
  margin-top: 4px;
  font-size: 8px;
}

.assistant-message.is-user {
  align-items: flex-end;
  margin-right: auto;
}

.assistant-message.is-user > div {
  color: #fff;
  background: #6753d8;
  border: 0;
  border-radius: 15px 5px 15px 15px;
}

.assistant-typing {
  background: #fff;
  border: 1px solid #e4e0ed;
  border-radius: 5px 15px 15px;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 13px;
  display: flex;
}

.assistant-typing span {
  background: #8a80b5;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1s ease-in-out infinite assistant-pulse;
}

.assistant-typing span:nth-child(2) {
  animation-delay: .15s;
}

.assistant-typing span:nth-child(3) {
  animation-delay: .3s;
}

.assistant-typing small {
  color: #888e9a;
  margin-right: 5px;
  font-size: 9px;
}

.assistant-composer-zone {
  background: #fff;
  border-top: 1px solid #ece9f2;
  padding: 8px 12px 9px;
}

.assistant-composer > label {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.assistant-composer .assistant-composer-shell {
  background: #fff;
  border: 1px solid #ddd9e7;
  border-radius: 17px;
  align-items: flex-end;
  gap: 7px;
  min-height: 50px;
  padding: 5px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  box-shadow: 0 5px 18px #32275c0a;
}

.assistant-composer .assistant-composer-shell:focus-within {
  border-color: #8473df;
  box-shadow: 0 0 0 3px #7662dc13, 0 7px 22px #32275c0e;
}

.assistant-composer-mark {
  width: 34px;
  height: 34px;
  color: var(--assistant-accent);
  background: #f0edff;
  border-radius: 11px;
  flex: none;
  align-self: center;
  place-items: center;
  font-size: 16px;
  display: grid;
}

.assistant-widget .assistant-composer .assistant-composer-input {
  resize: none;
  color: #2e2b36;
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  align-self: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 24px;
  max-height: 88px;
  padding: 3px 4px;
  font-size: 12px;
  line-height: 1.6;
  overflow-y: auto;
}

.assistant-composer-input::placeholder {
  color: #aaa5b1;
}

.assistant-composer-actions {
  flex: none;
  align-items: center;
  gap: 4px;
  display: flex;
}

.assistant-composer button {
  background: var(--assistant-accent);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
}

.assistant-composer button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.assistant-composer button svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 19px;
  height: 19px;
}

.assistant-composer .assistant-send svg {
  fill: currentColor;
  stroke: currentColor;
}

.assistant-composer > small {
  color: #a09aa9;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 16px;
  margin: 3px 0 0;
  font-size: 7px;
  display: flex;
}

.assistant-composer > small kbd {
  color: #8d8695;
  font: inherit;
  background: #faf9fb;
  border: 1px solid #e5e2e9;
  border-radius: 4px;
  padding: 0 4px;
}

.assistant-error {
  color: #b53a48;
  background: #fff0f0;
  border-radius: 9px;
  margin: 0 0 6px;
  padding: 7px 10px;
  font-size: 9px;
}

.assistant-backdrop {
  display: none;
}

@keyframes assistant-pulse {
  0%, 60%, 100% {
    opacity: .45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@media (max-width: 600px) {
  .assistant-widget {
    bottom: calc(16px + var(--mobile-nav-height, 3.75rem) + env(safe-area-inset-bottom));
  }

  .assistant-widget:has(.assistant-panel[aria-hidden="false"]) {
    bottom: 0;
  }

  .assistant-launcher {
    width: 54px;
    height: 54px;
  }

  .assistant-panel {
    transform-origin: bottom;
    border-radius: 25px 25px 0 0;
    width: 100%;
    height: min(88dvh, 760px);
    position: fixed;
    inset: auto 0 0;
    transform: translateY(100%);
  }

  .assistant-backdrop {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #211d337a;
    border: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .assistant-header {
    padding-top: 18px;
  }

  .assistant-feed {
    padding: 14px;
  }

  .assistant-history {
    width: min(88%, 350px);
    inset: 75px 0 0;
  }

  .assistant-composer-zone {
    padding: 7px 8px max(7px,env(safe-area-inset-bottom));
  }

  .assistant-composer .assistant-composer-shell {
    gap: 4px;
    padding: 4px;
  }

  .assistant-composer-mark {
    display: none;
  }

  .assistant-composer textarea {
    padding-inline: 7px;
    font-size: 13px;
  }

  .assistant-composer > small {
    display: none;
  }
}

.assistant-loading {
  color: #706a7b;
  margin: auto;
  font-size: 12px;
}

.assistant-header i.is-offline {
  background: #c47a19;
  box-shadow: 0 0 0 3px #c47a191c;
}

@media (prefers-reduced-motion: reduce) {
  .assistant-panel, .assistant-launcher, .assistant-history, .assistant-welcome button, .assistant-typing span {
    transition: none;
    animation: none;
  }
}

.assistant-composer .assistant-voice {
  color: #686174;
  background: #f3f1f8;
  flex: none;
}

.assistant-composer .assistant-voice.is-active {
  color: #fff;
  background: #d94f69;
  animation: 1.4s infinite assistant-voice;
  box-shadow: 0 0 0 4px #d94f6920;
}

@keyframes assistant-voice {
  50% {
    box-shadow: 0 0 0 8px #d94f6908;
  }
}

.assistant-widget {
  --assistant-accent: var(--color-accent);
}

.assistant-launcher {
  background: linear-gradient(145deg,var(--color-accent),var(--color-accent-deep));
  box-shadow: 0 14px 35px color-mix(in srgb,var(--color-accent) 28%,transparent);
  color: var(--color-on-accent);
}

.assistant-launcher:hover {
  box-shadow: 0 18px 42px color-mix(in srgb,var(--color-accent) 38%,transparent);
}

.assistant-composer button {
  color: var(--color-on-accent);
}

.assistant-composer .assistant-file-input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.assistant-composer .assistant-attach {
  color: #686174;
  background: #f3f1f8;
  flex: none;
}

.assistant-composer .assistant-pending-file {
  color: #5142a9;
  background: #f6f3ff;
  border: 1px solid #dedbea;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  padding: 5px 8px;
  font-size: 10px;
  display: flex;
}

.assistant-pending-file span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.assistant-composer .assistant-pending-file button {
  color: #5142a9;
  background: none;
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 17px;
}

.assistant-message-file {
  overflow-wrap: anywhere;
  margin-top: 7px;
  font-size: 10px;
  display: block;
}

/* [project]/libs/modules/codex/src/Codex.css [app-client] (css) */
.codex-page {
  gap: 1rem;
  width: 100%;
  min-width: 0;
  padding: 1rem;
  display: grid;
}

.codex-admin-header {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: 1rem;
  padding: 1.25rem;
}

.codex-admin-header span {
  color: var(--color-accent);
  font-weight: 700;
}

.codex-admin-header h1 {
  margin: .35rem 0;
}

.codex-admin-header p {
  color: var(--color-muted);
  margin: 0;
}

.codex-admin-toggle {
  align-items: center;
  gap: .65rem;
  font-weight: 700;
  display: flex;
}

.codex-admin-message {
  background: var(--color-accent-subtle);
  border-radius: .75rem;
  padding: .75rem 1rem;
}

.codex-job-report {
  gap: .5rem;
  min-width: 0;
  margin-block: .75rem;
  display: grid;
}

.codex-job-report pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  border: 1px solid var(--color-line);
  border-radius: .75rem;
  max-height: 28rem;
  padding: .75rem;
  overflow-y: auto;
}

.codex-job-report > button {
  justify-self: start;
}

.codex-settings, .codex-queue {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: 1rem;
  gap: 1rem;
  padding: 1.25rem;
  display: grid;
}

.codex-environment {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  display: grid;
}

.codex-environment > *, .codex-settings .ui-field {
  min-width: 0;
}

.codex-actions {
  flex-wrap: wrap;
  gap: .75rem;
  display: flex;
}

.codex-job-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: .75rem;
  display: grid;
}

.codex-job {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  min-width: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  overflow-wrap: anywhere;
  border-radius: .875rem;
  gap: .5rem;
  padding: 1rem;
  transition: border-color .16s, box-shadow .16s;
  display: grid;
}

.codex-job:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.codex-job:focus-visible {
  outline: 3px solid var(--color-accent-subtle);
  outline-offset: 2px;
}

.codex-job h3, .codex-job p, .codex-job-details p {
  margin: 0;
}

.codex-job h3 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.codex-job p {
  color: var(--color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.codex-job-modal {
  width: min(100%, 42rem);
}

.codex-job-details {
  overflow-wrap: anywhere;
  gap: .75rem;
  display: grid;
}

.codex-task-panel {
  gap: .75rem;
  padding-block: 1rem;
  display: grid;
}

.codex-task-panel > button {
  justify-self: start;
}

.codex-task-panel__form {
  gap: .75rem;
  display: grid;
}

.codex-task-panel__jobs {
  gap: .75rem;
  padding: 0;
  list-style: none;
  display: grid;
}

.codex-task-panel__jobs li {
  overflow-wrap: anywhere;
  gap: .35rem;
  display: grid;
}

@media (max-width: 767px) {
  .app-shell:has(.codex-page) {
    padding-block-end: 1rem;
  }

  :is(.app-shell:has(.codex-page) .app-shell__sidebar, .app-shell:has(.codex-page) .mobile-bottom-nav, .app-shell:has(.codex-page) .app-shell__fab) {
    display: none;
  }

  .app-shell:has(.codex-page) .app-shell__kanban-menu {
    display: inline-flex;
  }

  .app-shell:has(.codex-page) .app-shell__brand {
    text-decoration: none;
  }

  .app-shell:has(.codex-page) .app-shell__brand span {
    display: none;
  }

  .app-shell.is-sidebar-open:has(.codex-page) .app-shell__sidebar {
    background: var(--color-surface-solid);
    border-radius: 1rem;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    display: flex;
  }

  .app-shell:has(.codex-page) .app-shell__nav {
    gap: .5rem;
    display: grid;
  }

  .app-shell:has(.codex-page) .app-shell__nav button {
    min-height: 2.75rem;
    color: var(--color-ink);
    font: inherit;
    text-align: start;
    background: none;
    border: 0;
    border-radius: .75rem;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    display: flex;
  }

  .app-shell:has(.codex-page) .app-shell__nav button.is-active {
    color: var(--color-accent);
    background: var(--color-accent-subtle);
  }

  .codex-environment {
    grid-template-columns: 1fr;
  }

  .codex-page {
    padding: .5rem;
  }
}

.ssh-runner-settings {
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  display: grid;
}

.ssh-server-form {
  gap: 1rem;
  display: grid;
}

.ssh-server-form fieldset {
  gap: .65rem;
  min-width: 0;
  display: grid;
}

.ssh-job-list {
  gap: 1rem;
  min-width: 0;
  display: grid;
}

.ssh-job-list article {
  border-bottom: 1px solid var(--color-line);
  min-width: 0;
  padding: .75rem;
}

.ssh-job-list pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 28rem;
  overflow: auto;
}

.ssh-job-session {
  overflow-wrap: anywhere;
  display: block;
}

.ssh-job-session code {
  -webkit-user-select: all;
  user-select: all;
}

.ssh-token {
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
  display: block;
}

.codex-automation-project {
  border: 1px solid var(--border, #dce2eb);
  border-radius: 12px;
  gap: .75rem;
  margin-block: 1rem;
  padding: 1rem;
  display: grid;
}

.codex-tabs {
  border-bottom: 1px solid var(--color-line);
  gap: .5rem;
  min-width: 0;
  padding: .25rem .25rem .5rem;
  display: flex;
  overflow-x: auto;
}

.codex-tabs button {
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: .75rem;
  flex: none;
  padding: .75rem 1rem;
}

.codex-tabs button:hover {
  background: var(--color-accent-subtle);
}

.codex-tabs button.is-active {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  font-weight: 700;
}

.codex-tabs button:focus-visible, .codex-tab-panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.codex-tab-panel {
  min-width: 0;
}

.codex-tab-panel[hidden] {
  display: none;
}

.codex-page {
  gap: 1.25rem;
  max-width: 84rem;
  margin-inline: auto;
  padding: clamp(.75rem, 2vw, 1.5rem);
}

.codex-admin-header {
  background: linear-gradient(115deg, var(--color-surface-solid) 58%, var(--color-accent-subtle));
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.codex-admin-header h1 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.5;
}

.codex-admin-header p {
  max-width: 46rem;
  line-height: 1.8;
}

.codex-eyebrow {
  color: var(--color-accent);
  font-size: .78rem;
  font-weight: 750;
}

.codex-settings {
  gap: .85rem;
}

.codex-global-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.codex-global-row h2 {
  margin: .2rem 0;
  font-size: 1.15rem;
}

.codex-global-row p {
  color: var(--color-muted);
  margin: 0;
}

.codex-admin-toggle {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  cursor: pointer;
  border-radius: .8rem;
  padding: .7rem 1rem;
}

.codex-admin-toggle input {
  accent-color: var(--color-accent);
  width: 1.1rem;
  height: 1.1rem;
}

.codex-global-details {
  border-top: 1px solid var(--color-line);
  padding-top: .75rem;
}

.codex-global-details summary {
  cursor: pointer;
  font-weight: 650;
}

.codex-global-details summary span {
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 400;
}

.codex-global-details .ui-field {
  margin-top: .85rem;
}

.codex-settings > button {
  justify-self: start;
}

.codex-card.codex-projects-panel {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: 1rem;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

.codex-projects-panel > .ui-field {
  max-width: 34rem;
}

.codex-section-heading h2, .codex-section-heading h3 {
  margin: .15rem 0 .3rem;
}

.codex-section-heading p {
  max-width: 52rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.8;
}

.codex-automation-project {
  border-color: var(--color-line);
  background: var(--color-surface);
  gap: 1.1rem;
  min-width: 0;
  margin: .25rem 0 0;
  padding: 1.25rem;
}

.codex-automation-project legend {
  color: var(--color-muted);
  padding-inline: .55rem;
  font-size: .85rem;
}

.codex-project-summary {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.codex-project-summary > div {
  gap: .2rem;
  display: grid;
}

.codex-project-summary strong {
  font-size: 1.12rem;
}

.codex-project-summary span {
  color: var(--color-muted);
  font-size: .85rem;
}

.codex-status-pill {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-line);
  white-space: nowrap;
  border-radius: 99px;
  align-items: center;
  padding: .3rem .7rem;
  display: inline-flex;
}

.codex-status-pill.is-on {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-color: #0000;
}

.codex-project-nav {
  border-bottom: 1px solid var(--color-line);
  flex-wrap: wrap;
  gap: .4rem;
  padding-bottom: .75rem;
  display: flex;
}

.codex-project-nav button {
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: .7rem;
  padding: .55rem .75rem;
  font-size: .9rem;
}

.codex-project-nav button:hover, .codex-project-nav button:focus-visible {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.codex-project-nav button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.codex-project-nav button.is-active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 700;
}

.codex-project-section {
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding: .25rem 0;
  display: grid;
}

.codex-project-section > .ui-field {
  max-width: 36rem;
}

.codex-project-section p {
  color: var(--color-muted);
  margin: 0;
  line-height: 1.75;
}

.codex-option {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  cursor: pointer;
  border-radius: .85rem;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1rem;
  display: flex;
}

.codex-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.codex-option input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-accent);
  flex: none;
  margin-top: .25rem;
}

.codex-option span {
  gap: .2rem;
  display: grid;
}

.codex-option small {
  color: var(--color-muted);
  line-height: 1.6;
}

.codex-manager-field {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: .85rem;
  gap: .4rem;
  padding: 1rem;
  display: grid;
}

.codex-manager-field .ui-field {
  max-width: 35rem;
}

.codex-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: .85rem 1rem;
  display: grid;
}

.codex-form-grid > * {
  min-width: 0;
}

.codex-form-grid > p {
  align-self: center;
  font-size: .84rem;
}

:is(.codex-form-grid > .ui-field:has(textarea), .codex-form-grid > .ui-field:has(input[dir="ltr"]:where([maxlength="20000"]))) {
  grid-column: 1 / -1;
}

.codex-billing-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
  display: grid;
}

.codex-project-section ol {
  gap: .6rem;
  padding-inline-start: 1.5rem;
  display: grid;
}

.codex-project-section li {
  border: 1px solid var(--color-line);
  overflow-wrap: anywhere;
  border-radius: .7rem;
  padding: .7rem;
}

.codex-save-bar {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: .85rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  display: flex;
}

.codex-save-bar > div {
  gap: .2rem;
  display: grid;
}

.codex-save-bar span {
  color: var(--color-muted);
  font-size: .84rem;
}

.codex-save-bar [role="status"] {
  color: var(--color-accent);
}

.codex-queue {
  min-width: 0;
}

.codex-queue > h2 {
  margin: 0;
}

.codex-queue > h3 {
  margin-bottom: 0;
}

.ssh-runner-settings {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

.ssh-settings-intro span {
  color: var(--color-accent);
  font-size: .78rem;
  font-weight: 750;
}

.ssh-settings-intro h2 {
  margin: .3rem 0;
}

.ssh-settings-intro p {
  max-width: 65rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.8;
}

.ssh-settings-nav {
  border-bottom: 1px solid var(--color-line);
  gap: .4rem;
  display: flex;
  overflow-x: auto;
}

.ssh-settings-nav button {
  color: var(--color-muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  flex: none;
  padding: .7rem .9rem;
}

.ssh-settings-nav button[aria-current="page"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 700;
}

.ssh-settings-nav button:hover {
  background: var(--color-accent-subtle);
}

.ssh-settings-nav button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.ssh-settings-notice {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  border-radius: .7rem;
  margin: 0;
  padding: .7rem 1rem;
}

.ssh-settings-hint {
  color: var(--color-muted);
  margin: 0;
}

.ssh-runner-settings > form:not(.ssh-server-form), .ssh-runner-settings > article {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .85rem;
  padding: 1rem;
}

.ssh-runner-settings > form:not(.ssh-server-form) {
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
  display: flex;
}

.ssh-runner-settings > form:not(.ssh-server-form) .ui-field {
  min-width: min(100%, 18rem);
}

.ssh-server-modal {
  width: min(100%, 48rem);
  max-height: min(92vh, 58rem);
}

.ssh-form-section {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .85rem;
  gap: .75rem;
  min-width: 0;
  padding: 1rem;
  display: grid;
}

.ssh-form-section h3, .ssh-form-section p {
  margin: 0;
}

.ssh-form-section p {
  color: var(--color-muted);
  font-size: .84rem;
  line-height: 1.65;
}

.ssh-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  display: grid;
}

.ssh-form-grid > * {
  min-width: 0;
}

.ssh-form-grid > .ui-field:has(textarea) {
  grid-column: 1 / -1;
}

.ssh-server-form fieldset {
  border: 1px solid var(--color-line);
  border-radius: .7rem;
  padding: .75rem;
}

.ssh-project-list {
  gap: .4rem;
  max-height: 12rem;
  display: grid;
  overflow: auto;
}

.ssh-project-list label, .ssh-server-enabled {
  align-items: center;
  gap: .55rem;
  display: flex;
}

.ssh-project-list input, .ssh-server-enabled input {
  accent-color: var(--color-accent);
}

.ssh-form-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
  display: flex;
}

.ssh-runner-settings > article p {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.ssh-settings-group {
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  border-radius: .9rem;
  gap: 1rem;
  min-width: 0;
  padding: 1.1rem;
  display: grid;
}

.ssh-settings-group > .codex-section-heading {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.ssh-settings-group > .codex-section-heading h3 {
  margin: 0 0 .25rem;
}

.ssh-settings-group > .codex-section-heading p {
  color: var(--color-muted);
  margin: 0;
  line-height: 1.65;
}

.ssh-settings-details {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: .8rem;
  min-width: 0;
  padding: .75rem 1rem;
}

.ssh-settings-details summary {
  cursor: pointer;
  color: var(--color-accent);
  font-weight: 650;
}

.ssh-settings-details > form, .ssh-settings-details > .ssh-job-list {
  margin-top: 1rem;
}

.ssh-settings-details > form:not(.ssh-server-form) {
  flex-wrap: wrap;
  align-items: end;
  gap: .75rem;
  display: flex;
}

.ssh-settings-details > form:not(.ssh-server-form) .ui-field {
  min-width: min(100%, 18rem);
}

.ssh-settings-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: .75rem;
  display: grid;
}

.ssh-settings-list article {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  overflow-wrap: anywhere;
  border-radius: .8rem;
  min-width: 0;
  padding: 1rem;
}

.ssh-settings-list article h3 {
  margin: 0;
}

.ssh-settings-list article p {
  color: var(--color-muted);
  line-height: 1.7;
}

.ssh-settings-list article button {
  margin: .2rem .2rem .2rem 0;
}

.ssh-server-card {
  align-content: start;
  gap: .65rem;
  display: grid;
}

.ssh-server-card__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  display: flex;
}

.ssh-server-card__head p {
  text-align: start;
  overflow-wrap: anywhere;
  direction: ltr;
  margin: .25rem 0 0;
  font-size: .84rem;
}

.ssh-server-card__purpose {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.ssh-state {
  background: var(--color-surface);
  color: var(--color-muted);
  border-radius: 999px;
  flex: none;
  padding: .2rem .55rem;
  font-size: .75rem;
}

.ssh-state.is-on {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.ssh-server-card__meta {
  color: var(--color-muted);
  flex-wrap: wrap;
  gap: .35rem .8rem;
  font-size: .84rem;
  display: flex;
}

.ssh-server-card__details {
  border-top: 1px solid var(--color-line);
  padding-top: .55rem;
  font-size: .84rem;
}

.ssh-server-card__details summary {
  cursor: pointer;
  color: var(--color-accent);
}

.ssh-server-card__details p {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .ssh-form-grid {
    grid-template-columns: 1fr;
  }

  .ssh-form-actions > button {
    flex: auto;
  }

  .codex-form-grid, .codex-billing-grid {
    grid-template-columns: 1fr;
  }

  .codex-project-nav {
    scrollbar-width: thin;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .codex-project-nav button {
    flex: none;
  }

  .codex-automation-project {
    padding: .85rem;
  }

  .codex-save-bar > button {
    width: 100%;
  }

  .codex-global-row {
    align-items: flex-start;
  }
}

/* [project]/libs/modules/auth/web/AuthPage.css [app-client] (css) */
.auth-page {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  display: grid;
  overflow-x: clip;
}

.auth-page__aside {
  justify-content: center;
  gap: var(--space-6);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  color: var(--color-on-accent);
  background: linear-gradient(165deg, #2b4c9f 0%, #3d66d0 45%, #253e7c 100%);
  background: linear-gradient(165deg, lab(33.5573% 11.3022 -49.5328) 0%, lab(44.8533% 13.5164 -60.1598) 45%, lab(26.9892% 7.73892 -38.9991) 100%);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.auth-page__brand-block {
  z-index: 1;
  position: relative;
}

.auth-page__brand {
  width: min(17rem, 100%);
  height: auto;
  margin: 0 0 var(--space-3);
  background: #fff;
  border-radius: 1rem;
  padding: .5rem .75rem;
  display: block;
}

.auth-card__logo {
  display: none;
}

.auth-page__tagline {
  max-width: 22rem;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  opacity: .92;
  margin: 0;
}

.auth-page__features {
  z-index: 1;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}

.auth-page__features li {
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  display: flex;
}

.auth-page__features li:before {
  content: "";
  background: #ffffffd9;
  background: lab(100% 0 0 / .85);
  border-radius: 50%;
  flex-shrink: 0;
  width: .45rem;
  height: .45rem;
}

.auth-page__decor {
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, #ffffff24 0%, #0000 68%);
  background: radial-gradient(circle, lab(100% 0 0 / .14) 0%, #0000 68%);
  border-radius: 50%;
  width: min(420px, 70%);
  position: absolute;
  inset: auto -20% -25% auto;
}

.auth-page__main {
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  place-items: center;
  display: grid;
}

.auth-card {
  width: min(100%, 400px);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-md);
  animation: auth-rise var(--duration-normal) var(--ease-out);
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}

.auth-card__header {
  text-align: center;
  margin-block-end: var(--space-5);
}

.auth-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  font-weight: 800;
}

.auth-card__subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.auth-mode-toggle {
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  background: #202c260a;
  background: lab(16.7482% -6.6562 1.91945 / .04);
  grid-template-columns: 1fr 1fr;
  margin-block-end: var(--space-5);
  display: grid;
  position: relative;
}

.auth-mode-toggle__btn {
  z-index: 1;
  border-radius: var(--radius-full);
  min-height: 2.25rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
  background: none;
  border: 0;
  font-weight: 600;
  position: relative;
}

.auth-mode-toggle__btn.is-active {
  color: var(--color-on-accent);
}

.auth-mode-toggle__indicator {
  inset-block: var(--space-1);
  width: calc(50% - var(--space-1));
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal) var(--ease-out);
  position: absolute;
  inset-inline-start: var(--space-1);
}

.auth-mode-toggle__indicator[data-mode="register"] {
  transform: translateX(-100%);
}

.auth-form {
  gap: var(--space-4);
  display: grid;
}

.auth-form__error {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 0;
}

.auth-form__submit {
  width: 100%;
  margin-block-start: var(--space-1);
}

.onboarding-modal {
  width: min(100%, 440px);
}

.onboarding-modal__body p {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  line-height: var(--leading-relaxed);
}

.onboarding-modal__tips {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
  padding-inline-start: var(--space-5);
}

.onboarding-modal__tips li + li {
  margin-block-start: var(--space-2);
}

@media (max-width: 860px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-page__aside {
    display: none;
  }

  .auth-page__main {
    align-content: center;
    min-height: 100vh;
  }

  .auth-card__logo {
    width: 9rem;
    height: auto;
    margin: 0 auto 1rem;
    display: block;
  }
}

@media (max-width: 390px) {
  .auth-card {
    padding: var(--space-5);
    box-shadow: none;
    background: none;
    border: none;
  }
}

/* [project]/libs/modules/dashboard/src/App.css [app-client] (css) */
* {
  box-sizing: border-box;
}

html, body, #root {
  min-height: 100%;
}

body {
  color: var(--ink);
  font-family: var(--font-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

button, input, textarea {
  font: inherit;
}

.page {
  isolation: isolate;
  min-height: 100vh;
  padding: 2.5rem clamp(1.25rem, 4vw, 3rem) 3rem;
  position: relative;
  overflow-x: clip;
}

.layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  display: grid;
}

.list-panel {
  min-width: 0;
}

.atmosphere {
  z-index: -1;
  background: radial-gradient(50% 60% at 88% 20%, #0f766e38, #0000 70%), radial-gradient(40% 50% at 12% 8%, #d9770629, #0000 65%), linear-gradient(#e8efe9 0%, #0000 75%);
  height: 70vh;
  position: absolute;
  inset: -20% -10% auto;
}

.form-row {
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  display: grid;
}

.priority-badge {
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 700;
}

.priority-badge.p-low {
  color: var(--muted);
  background: #6b7c7424;
}

.priority-badge.p-high {
  color: #92500a;
  background: #d9770626;
}

.priority-badge.p-urgent {
  color: var(--stop);
  background: #b4231824;
}

.assignee-badge {
  color: var(--accent-deep);
  background: #0f766e1a;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 600;
}

.due-badge {
  color: var(--ink-soft);
  border: 1px dashed #1a242140;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .72rem;
}

.due-badge.is-overdue {
  color: var(--stop);
  background: #b4231814;
  border-color: #b4231880;
  font-weight: 700;
}

.my-tasks-toggle {
  margin-inline-start: auto;
}

.label-chip {
  color: #fff;
  text-shadow: 0 1px 2px #00000040;
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 700;
}

.label-chip.pickable {
  cursor: pointer;
  opacity: .55;
  border: 2px solid #0000;
  transition: opacity .15s, border-color .15s;
}

.label-chip.pickable.is-selected {
  opacity: 1;
  border-color: #1a24218c;
}

.form-labels > span {
  color: var(--ink-soft);
  margin-bottom: .4rem;
  font-size: .85rem;
  display: block;
}

.label-picker {
  flex-wrap: wrap;
  gap: .4rem;
  display: flex;
}

.entry-form select {
  border: 1px solid var(--line);
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  padding: .6rem .75rem;
}

.role-badge {
  color: var(--accent-deep);
  background: #0f766e1f;
  border-radius: 999px;
  margin-inline-start: .45rem;
  padding: .1rem .5rem;
  font-size: .72rem;
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1.35rem 1.35rem 1.5rem;
}

.panel-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
  display: flex;
}

.panel-tools {
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  display: flex;
}

.view-toggle {
  border: 1px solid var(--line);
  background: #ffffffb3;
  border-radius: 999px;
  padding: .2rem;
  display: inline-flex;
}

.view-btn {
  color: var(--ink-soft);
  background: none;
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .88rem;
  font-weight: 600;
}

.view-btn.is-active {
  background: var(--accent);
  color: #fff;
}

.panel-head h2 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.2rem;
}

.entry-form {
  gap: var(--space-4);
  display: grid;
}

input:not(.ui-input):not(.ui-checkbox):not([type="search"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:not(.ui-textarea), select:not(.ui-select) {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-solid);
  width: 100%;
  color: var(--ink);
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  outline: none;
}

input:not(.ui-input):not(.ui-checkbox):not([type="search"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:not(.ui-textarea):focus, select:not(.ui-select):focus {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  border-color: #007b668c;
  border-color: lab(45.6129% -35.2776 3.0459 / .55);
}

textarea:not(.ui-textarea) {
  resize: vertical;
  min-height: 6.5rem;
  line-height: var(--leading-relaxed);
}

.entry-form label:not(.ui-field) {
  gap: var(--space-2);
  display: grid;
}

.entry-form label:not(.ui-field) span {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
}

.muted, .empty {
  color: var(--muted);
  margin: .5rem 0 0;
}

.title-block {
  justify-items: start;
  gap: .35rem;
  min-width: 0;
  display: grid;
}

.title-tags {
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  display: flex;
}

.file-badge {
  color: #9a3412;
  background: #d9770624;
  border-radius: 999px;
  padding: .12rem .45rem;
  font-size: .75rem;
  font-weight: 700;
  display: inline-block;
}

.files-field {
  gap: .65rem;
  display: grid;
}

.files-head {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.files-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

.files-count {
  color: var(--accent-deep);
  background: #0f766e1f;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .78rem;
  font-weight: 700;
}

.file-dropzone {
  text-align: center;
  cursor: pointer;
  background: #0f766e0d;
  border: 2px dashed #0f766e59;
  border-radius: 14px;
  gap: .25rem;
  padding: 1rem;
  transition: border-color .15s, background .15s;
  display: grid;
  position: relative;
}

.file-dropzone:hover, .file-dropzone.is-dragover, .file-dropzone.has-files {
  background: #0f766e1a;
  border-color: #0f766ea6;
}

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

.dropzone-title {
  color: var(--accent-deep);
  margin: 0;
  font-weight: 700;
}

.dropzone-hint {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
}

.file-empty {
  color: var(--muted);
  text-align: center;
  background: #1a24210a;
  border-radius: 10px;
  margin: 0;
  padding: .55rem .65rem;
  font-size: .85rem;
}

.file-list.pending li {
  background: #d9770614;
  border-color: #d9770659;
}

.file-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
}

.file-badge-new {
  color: #9a3412;
  background: #d977062e;
  border-radius: 999px;
  padding: .12rem .45rem;
  font-size: .72rem;
  font-weight: 700;
}

.upload-now-btn {
  width: 100%;
  margin-top: 0;
}

.file-list {
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.file-list li {
  border: 1px solid var(--line);
  background: #ffffffd9;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .45rem .55rem;
  font-size: .85rem;
  display: flex;
}

.file-list a {
  color: var(--accent-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
}

.file-list a:hover {
  text-decoration: underline;
}

.file-size {
  color: var(--muted);
  white-space: nowrap;
  font-size: .78rem;
}

.cell-text {
  max-width: 100%;
  font-family: var(--font-display);
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  display: block;
  overflow: hidden;
}

.desc-clamp {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--ink-soft);
  word-break: break-word;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.col-datetime .date-main {
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: .25rem;
  font-size: .85rem;
  display: block;
  overflow: hidden;
}

.col-datetime .timer-value {
  font-family: var(--font-display);
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 1.05rem;
  font-weight: 700;
  display: inline-block;
}

.col-status {
  overflow: visible;
}

.status-wrap {
  justify-content: center;
  align-items: center;
  gap: .35rem;
  display: inline-flex;
  position: relative;
}

.dash {
  color: var(--muted);
}

.project {
  max-width: 100%;
  color: var(--accent-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0f766e1a;
  border-radius: 999px;
  padding: .12rem .5rem;
  font-size: .78rem;
  display: inline-block;
  overflow: hidden;
}

.status {
  white-space: nowrap;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .78rem;
  font-weight: 700;
  display: inline-block;
}

.status.running {
  color: var(--accent-deep);
  background: #0f766e24;
}

.status.idle {
  color: var(--muted);
  background: #1a24210f;
}

.sessions {
  display: inline-block;
  position: relative;
}

.session-badge {
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .4rem;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  display: inline-flex;
}

.session-badge::-webkit-details-marker {
  display: none;
}

.sessions[open] .session-badge {
  background: var(--accent-deep);
}

.sessions ul {
  inset-inline-start: 50%;
  z-index: 30;
  border: 1px solid var(--line);
  min-width: 280px;
  box-shadow: var(--shadow);
  text-align: start;
  background: #fff;
  border-radius: 12px;
  gap: .45rem;
  margin: 0;
  padding: .65rem .75rem;
  list-style: none;
  display: grid;
  position: absolute;
  top: calc(100% + .45rem);
  translate: -50%;
}

.sessions li {
  color: var(--muted);
  justify-content: space-between;
  gap: .75rem;
  font-size: .82rem;
  display: flex;
}

.sessions li strong {
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.modal-backdrop {
  z-index: 100;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #1a242173;
  place-items: center;
  padding: 1.25rem;
  display: grid;
  position: fixed;
  inset: 0;
}

.modal {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 18px;
  width: min(100%, 480px);
  max-height: min(92vh, 760px);
  padding: 1.25rem 1.25rem 1.4rem;
  overflow-y: auto;
  box-shadow: 0 24px 60px #1a24212e;
}

.modal.task-modal {
  background: linear-gradient(145deg, #fff 0%, #fbfcff 100%);
  width: min(100%, 1080px);
  padding: 1.5rem;
}

.task-modal__header {
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.task-modal__header h2 {
  color: #18284c;
  margin: 0;
  font-size: 1.7rem;
}

.task-modal__header p, .task-form-section__header p {
  color: #71809a;
  margin: .35rem 0 0;
  font-size: .88rem;
}

.task-modal .entry-form {
  gap: 1rem;
}

.task-form-section {
  background: linear-gradient(135deg, #f7faffeb, #ffffffeb);
  border: 1px solid #dfe6f1;
  border-radius: 1rem;
  gap: 1rem;
  padding: 1.15rem;
  display: grid;
}

.task-form-section__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.task-form-section__header h3 {
  color: #1b2b4e;
  margin: 0;
  font-size: 1.03rem;
}

.task-form-section__header h3 small {
  color: #52627d;
  font-weight: 600;
}

.task-form-section__header > span {
  color: #1464e8;
  background: #eaf1ff;
  border-radius: .65rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.35rem;
  display: grid;
}

.task-form-section em {
  color: #e44d5d;
  font-style: normal;
}

.task-main-fields {
  grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr) minmax(14rem, 1.25fr);
  align-items: end;
  gap: .9rem;
  display: grid;
}

.task-priority {
  border: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.task-priority legend {
  color: var(--muted);
  font-size: var(--text-sm);
  grid-column: 1 / -1;
  margin-bottom: .45rem;
  padding: 0;
  font-weight: 600;
}

.task-priority label {
  color: #54627b;
  cursor: pointer;
  background: #edf1f6;
  border: 1px solid #0000;
  border-radius: .8rem;
  place-items: center;
  min-height: 2.8rem;
  padding: .4rem;
  font-size: .82rem;
  font-weight: 700;
  display: grid;
}

.task-priority label.is-active {
  color: #1260d7;
  background: #dce9ff;
  border-color: #b8d2ff;
}

.task-priority input, .task-okr-toggle > input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.task-okr-section {
  gap: .85rem;
}

.task-okr-toggle {
  cursor: pointer;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  display: flex !important;
}

.task-okr-toggle__track {
  background: #cbd4e2;
  border-radius: 999px;
  align-items: center;
  width: 3rem;
  height: 1.75rem;
  padding: .18rem;
  transition: background .18s;
  display: inline-flex;
}

.task-okr-toggle__track > span {
  background: #fff;
  border-radius: 50%;
  width: 1.38rem;
  height: 1.38rem;
  transition: transform .18s;
  box-shadow: 0 1px 3px #11264938;
}

.task-okr-toggle > input:checked + .task-okr-toggle__track {
  background: #1769ee;
}

.task-okr-toggle > input:checked + .task-okr-toggle__track > span {
  transform: translateX(-1.25rem);
}

.task-okr-toggle b, .task-okr-toggle small {
  display: block;
}

.task-okr-toggle small {
  color: #71809a;
  margin-top: .15rem;
  font-size: .76rem;
  font-weight: 400;
}

.task-okr-fields {
  border-top: 1px solid #e5ebf5;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  padding-top: .9rem;
  display: grid;
}

.task-schedule-fields {
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: .9rem;
  display: grid;
}

.task-schedule-fields .estimate-row {
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  display: grid;
}

.task-schedule-fields .estimate-label {
  grid-column: 1 / -1;
}

.modal-actions {
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .35rem;
  display: flex;
}

.checklist-section {
  background: #ffffff8c;
  border: 1px solid #1a24211a;
  border-radius: 12px;
  margin: .25rem 0 .75rem;
  padding: .75rem;
}

.deps-section {
  background: #ffffff8c;
  border: 1px solid #1a24211a;
  border-radius: 12px;
  gap: .55rem;
  margin: .25rem 0 .75rem;
  padding: .75rem;
  display: grid;
}

.deps-section h3, .deps-blocks h4 {
  margin: 0;
  font-size: .9rem;
}

.deps-hint {
  margin: 0;
  font-size: .82rem;
}

.deps-list {
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.deps-list li {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  display: flex;
}

.deps-list li > div {
  gap: .1rem;
  min-width: 0;
  display: grid;
}

.deps-status {
  color: var(--stop);
  font-size: .75rem;
}

.deps-status.is-done {
  color: var(--accent-deep, #3746a4);
}

.deps-add-form {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.deps-add-form select {
  border: 1px solid var(--line);
  min-width: 160px;
  font: inherit;
  background: #fff;
  border-radius: 10px;
  flex: 1;
  padding: .5rem .65rem;
}

.blocked-badge {
  color: #9a3412;
  background: #ea580c1f;
  border-radius: 6px;
  padding: .15rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-block;
}

.checklist-head {
  color: var(--ink-soft);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .85rem;
  font-weight: 600;
  display: flex;
}

.checklist-hint {
  margin: .25rem 0 .75rem;
  font-size: .85rem;
}

.checklist-progress {
  background: #1a242114;
  border-radius: 999px;
  height: 6px;
  margin-bottom: .65rem;
  overflow: hidden;
}

.checklist-progress-bar {
  background: var(--accent, #4258c9);
  border-radius: inherit;
  height: 100%;
  transition: width .2s;
}

.checklist-list {
  flex-direction: column;
  gap: .35rem;
  margin: 0 0 .65rem;
  padding: 0;
  list-style: none;
  display: flex;
}

.checklist-list li {
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .35rem .45rem;
  display: flex;
}

.checklist-list li.is-done .checklist-item span {
  color: var(--muted);
  text-decoration: line-through;
}

.checklist-item {
  cursor: pointer;
  flex: 1;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.checklist-item span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.checklist-item-actions {
  flex-shrink: 0;
  gap: .15rem;
  display: flex;
}

.checklist-add {
  gap: .5rem;
  display: flex;
}

.checklist-add input {
  flex: 1;
}

.checklist-badge {
  color: var(--accent-deep, #3746a4);
  font-variant-numeric: tabular-nums;
  background: #0f766e1f;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 700;
}

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

.discussion-section {
  background: #ffffff8c;
  border: 1px solid #1a24211a;
  border-radius: 12px;
  margin: .5rem 0 .85rem;
  padding: .75rem;
}

.discussion-tabs {
  gap: .35rem;
  margin-bottom: .75rem;
  display: flex;
}

.discussion-tabs button {
  cursor: pointer;
  color: var(--ink-soft);
  background: none;
  border: 1px solid #1a24211f;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .85rem;
}

.discussion-tabs button.is-active {
  background: var(--accent, #4258c9);
  color: #fff;
  border-color: #0000;
  font-weight: 700;
}

.comments-list, .activity-list {
  flex-direction: column;
  gap: .65rem;
  max-height: 220px;
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.comment-meta {
  color: var(--muted);
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
  font-size: .78rem;
  display: flex;
}

.comment-body {
  white-space: pre-wrap;
  margin: 0;
  font-size: .92rem;
}

.comment-form {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.activity-list li {
  align-items: flex-start;
  gap: .65rem;
  display: flex;
}

.activity-dot {
  background: var(--accent, #4258c9);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: .45rem;
}

.activity-content p {
  margin: 0 0 .15rem;
  font-size: .88rem;
}

.activity-content time {
  color: var(--muted);
  font-size: .75rem;
}

.estimate-badge {
  color: var(--ink-soft);
  background: #1a242114;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 600;
}

.estimate-row {
  align-items: end;
}

.estimate-label {
  color: var(--ink-soft);
  flex: 100%;
  font-size: .85rem;
}

.estimate-row label {
  flex: 1;
}

@media (max-width: 820px) {
  .task-main-fields, .task-okr-fields, .task-schedule-fields {
    grid-template-columns: 1fr;
  }

  .task-priority {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .page {
    width: 100%;
    max-width: 100vw;
    padding: var(--space-3);
  }

  .layout, .list-panel, .panel {
    min-width: 0;
    max-width: 100%;
  }

  .panel {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
  }

  .panel-head {
    align-items: flex-start;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .panel-tools {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
  }

  .task-list-summary {
    gap: var(--space-2);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto;
  }

  .task-list-summary::-webkit-scrollbar {
    display: none;
  }

  .task-list-summary__card {
    flex: 0 0 8.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* [project]/frontend/app/dashboard/dashboard.css [app-client] (css) */
.overview-page {
  --overview-ink: #20243f;
  --overview-muted: #77809b;
  --overview-line: #e9e9f3;
  width: min(100%, 1500px);
  color: var(--overview-ink);
  margin-inline: auto;
  padding: .75rem 0 3rem;
}

.overview-page a {
  text-decoration: none;
}

.overview-hero {
  color: #1e2940;
  background: #fbfcfe;
  border: 1px solid #dee2eb;
  border-radius: 18px;
  display: grid;
  overflow: hidden;
}

.overview-hero__top {
  color: #6a7489;
  border-bottom: 1px solid #e7eaf0;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 49px;
  padding: .65rem clamp(1.2rem, 2.4vw, 2rem);
  font-size: .78rem;
  display: flex;
}

.overview-hero__location {
  align-items: center;
  gap: .6rem;
  min-width: 0;
  display: flex;
}

.overview-hero__location strong {
  color: #2b3650;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.overview-hero__date {
  white-space: nowrap;
}

.overview-hero__main {
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, .7fr);
  display: grid;
}

.overview-hero__copy {
  border-inline-start: 4px solid #6856d9;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
}

.overview-hero__role {
  color: #6653c5;
  font-size: .76rem;
  font-weight: 800;
}

.overview-kicker {
  letter-spacing: .01em;
  font-size: .8rem;
  font-weight: 800;
}

.overview-hero h1 {
  letter-spacing: -.02em;
  margin: .55rem 0 .4rem;
  font-size: clamp(1.45rem, 2.2vw, 2.2rem);
  line-height: 1.35;
}

.overview-hero p {
  color: #667187;
  margin: 0;
  font-size: .92rem;
  line-height: 1.8;
}

.overview-hero__actions {
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 1.35rem;
  display: flex;
}

.overview-hero__actions a, .overview-hero__next a {
  color: #5542b1;
  align-items: center;
  gap: .35rem;
  font-size: .83rem;
  font-weight: 800;
  display: inline-flex;
}

.overview-hero__actions a:hover, .overview-hero__next a:hover {
  text-decoration: underline;
}

.overview-hero__next {
  background: #f4f6fa;
  border-inline-start: 1px solid #e5e9f0;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.4vw, 2.25rem);
  display: flex;
}

.overview-hero__next-label {
  color: #67728a;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 800;
  display: inline-flex;
}

.overview-hero__next-label i {
  background: #6856d9;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.overview-hero__next strong {
  color: #23304a;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
  font-size: 1.02rem;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.overview-hero__next-meta {
  color: #778197;
  font-size: .78rem;
  line-height: 1.7;
}

.overview-hero__next a {
  margin-top: auto;
  padding-top: .35rem;
}

.overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
  display: grid;
}

.overview-stat {
  border: 1px solid var(--overview-line);
  background: #fff;
  border-radius: 20px;
  flex-direction: column;
  min-height: 150px;
  padding: 1.2rem 1.35rem;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 9px 24px #2831600b;
}

.overview-stat__accent {
  background: var(--stat-color);
  border-radius: 999px;
  width: 38px;
  height: 6px;
  margin-bottom: 1rem;
}

.overview-stat > span:nth-child(2) {
  color: var(--overview-muted);
  font-size: .87rem;
  font-weight: 700;
}

.overview-stat strong {
  margin-top: .1rem;
  font-size: clamp(1.8rem, 2.5vw, 2.35rem);
  line-height: 1.25;
}

.overview-stat small {
  color: var(--overview-muted);
  margin-top: auto;
  font-size: .75rem;
}

.overview-stat--violet {
  --stat-color: #6d56db;
}

.overview-stat--coral {
  --stat-color: #ec766f;
}

.overview-stat--blue {
  --stat-color: #4c9bc9;
}

.overview-stat--mint {
  --stat-color: #55b9a2;
}

.overview-stat:after {
  content: "";
  background: var(--stat-color);
  opacity: .055;
  border-radius: 50%;
  width: 115px;
  height: 115px;
  position: absolute;
  inset: auto auto -34px -34px;
}

.overview-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 1.1rem;
  margin-top: 1.1rem;
  display: grid;
}

.overview-card {
  border: 1px solid var(--overview-line);
  background: #fff;
  border-radius: 22px;
  min-width: 0;
  margin-top: 1.1rem;
  padding: 1.4rem;
  box-shadow: 0 9px 24px #2831600b;
}

.overview-grid .overview-card {
  margin-top: 0;
}

.overview-card__heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.overview-kicker {
  color: #6856ce;
}

.overview-card h2 {
  margin: .35rem 0 0;
  font-size: 1.13rem;
  line-height: 1.5;
}

.overview-card__heading > a {
  color: #6551c9;
  flex-shrink: 0;
  font-size: .84rem;
  font-weight: 800;
}

.overview-card__heading > a:hover {
  text-decoration: underline;
}

.overview-card__badge {
  color: #624dc7;
  background: #f2efff;
  border-radius: 9px;
  padding: .35rem .65rem;
  font-size: .8rem;
  font-weight: 800;
}

.overview-chart {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: .65rem;
  height: 175px;
  margin-top: 1.45rem;
  display: grid;
}

.overview-chart__day {
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 100%;
  display: flex;
}

.overview-chart__count {
  color: #5b4ac6;
  height: 1.2rem;
  font-size: .77rem;
  font-weight: 800;
}

.overview-chart__track {
  background: #f6f4fd;
  border-radius: 10px 10px 5px 5px;
  align-items: end;
  width: min(100%, 43px);
  height: 125px;
  display: flex;
}

.overview-chart__track span {
  border-radius: inherit;
  background: linear-gradient(#8e7be9, #5e4bc5);
  width: 100%;
  display: block;
}

.overview-chart__day:first-child .overview-chart__track span {
  background: linear-gradient(#73cfc0, #3caa95);
}

.overview-chart__label {
  color: var(--overview-muted);
  white-space: nowrap;
  margin-top: .4rem;
  font-size: .72rem;
}

.overview-card__note {
  color: var(--overview-muted);
  margin: 1rem 0 0;
  font-size: .82rem;
  line-height: 1.7;
}

.overview-focus {
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  min-height: 205px;
  display: flex;
}

.overview-focus__ring {
  aspect-ratio: 1;
  border-radius: 50%;
  flex: 0 0 155px;
  place-items: center;
  width: 155px;
  display: grid;
}

.overview-focus__ring > div {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 116px;
  display: flex;
}

.overview-focus__ring strong {
  font-size: 2rem;
  line-height: 1.25;
}

.overview-focus__ring span {
  color: var(--overview-muted);
  font-size: .7rem;
}

.overview-focus__legend {
  gap: .7rem;
  min-width: 145px;
  display: grid;
}

.overview-focus__legend > span {
  color: var(--overview-muted);
  white-space: nowrap;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  display: flex;
}

.overview-focus__legend strong {
  color: var(--overview-ink);
  margin-inline-start: auto;
}

.overview-focus__dot {
  background: #e9e5f8;
  border-radius: 50%;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
}

.overview-focus__dot--urgent {
  background: #6b55da;
}

.overview-task-list {
  margin-top: 1rem;
  display: grid;
}

.overview-task {
  min-width: 0;
  color: var(--overview-ink);
  border-top: 1px solid #eff0f6;
  align-items: center;
  gap: .8rem;
  padding: .8rem .2rem;
  display: flex;
}

.overview-task:hover {
  background: #f9f8ff;
}

.overview-task__priority {
  background: #8ec8ba;
  border-radius: 999px;
  flex: 0 0 9px;
  width: 9px;
  height: 36px;
}

.overview-task__priority--urgent {
  background: #e86c6b;
}

.overview-task__priority--high {
  background: #f1a85e;
}

.overview-task__priority--medium {
  background: #7b86d9;
}

.overview-task__body {
  gap: .25rem;
  min-width: 0;
  display: grid;
}

.overview-task__body strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
  overflow: hidden;
}

.overview-task__body small {
  color: var(--overview-muted);
  font-size: .77rem;
}

.overview-task__tag {
  color: #6459ae;
  background: #f0eff9;
  border-radius: 999px;
  margin-inline-start: auto;
  padding: .32rem .6rem;
  font-size: .74rem;
  font-weight: 800;
}

.overview-task__tag--urgent {
  color: #cf5954;
  background: #fff0ee;
}

.overview-task__tag--high {
  color: #b87530;
  background: #fff4e8;
}

.overview-task__arrow {
  color: #9ea3b8;
}

.overview-task-empty {
  text-align: center;
  justify-items: center;
  gap: .35rem;
  padding: 2.5rem 1rem;
  display: grid;
}

.overview-task-empty > span {
  color: #2a9a70;
  background: #e6f7f0;
  border-radius: 18px;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.6rem;
  display: grid;
}

.overview-task-empty p {
  color: var(--overview-muted);
  font-size: .86rem;
}

.overview-team__metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.15rem;
  display: grid;
}

.overview-team__metrics > div {
  background: #f8f7fd;
  border-radius: 15px;
  gap: .25rem;
  padding: 1rem;
  display: grid;
}

.overview-team__metrics strong {
  color: #5846b6;
  font-size: 1.45rem;
}

.overview-team__metrics span {
  color: var(--overview-muted);
  font-size: .78rem;
}

.overview-team__projects {
  gap: .4rem;
  margin-top: 1rem;
  display: grid;
}

.overview-team__projects a {
  color: var(--overview-ink);
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(75px, 30%) 2.5rem;
  align-items: center;
  gap: 1rem;
  padding: .65rem;
  display: grid;
}

.overview-team__projects a:hover {
  background: #f9f8ff;
}

.overview-team__projects a > span {
  gap: .2rem;
  min-width: 0;
  display: grid;
}

.overview-team__projects a strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .85rem;
  overflow: hidden;
}

.overview-team__projects a small {
  color: var(--overview-muted);
  font-size: .75rem;
}

.overview-team__projects a b {
  color: #6754c7;
  font-size: .8rem;
}

.overview-team__bar {
  background: #ebe8f6;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.overview-team__bar span {
  border-radius: inherit;
  background: linear-gradient(90deg, #8e7be9, #5e4bc5);
  height: 100%;
  display: block;
}

.overview-team__error {
  color: #a55143;
  margin: 1rem 0 0;
}

.overview-empty {
  text-align: center;
  border: 1px dashed #ccc8e7;
  border-radius: 18px;
  margin-top: 1.2rem;
  padding: 2rem;
}

.overview-empty h2 {
  margin: 0 0 .5rem;
}

.overview-empty p {
  color: var(--overview-muted);
}

.overview-empty a {
  color: #fff;
  background: #6856d9;
  border-radius: 10px;
  margin-top: 1rem;
  padding: .7rem 1rem;
  font-weight: 800;
  display: inline-block;
}

@media (max-width: 1040px) {
  .overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-hero__main {
    grid-template-columns: minmax(0, 1.3fr) minmax(230px, .8fr);
  }
}

@media (max-width: 620px) {
  .overview-page {
    padding-inline: .25rem;
  }

  .overview-hero {
    border-radius: 15px;
  }

  .overview-hero__top {
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    padding: .75rem 1rem;
  }

  .overview-hero__main {
    grid-template-columns: 1fr;
  }

  .overview-hero__copy {
    padding: 1.3rem 1rem;
  }

  .overview-hero p {
    font-size: .85rem;
  }

  .overview-hero__next {
    border-inline-start: 0;
    border-top: 1px solid #e5e9f0;
    padding: 1rem;
  }

  .overview-stats {
    gap: .65rem;
  }

  .overview-stat {
    border-radius: 15px;
    min-height: 125px;
    padding: .9rem;
  }

  .overview-stat__accent {
    margin-bottom: .65rem;
  }

  .overview-stat strong {
    font-size: 1.65rem;
  }

  .overview-card {
    border-radius: 17px;
    padding: 1rem;
  }

  .overview-card__heading {
    align-items: center;
  }

  .overview-card__heading > a {
    font-size: .75rem;
  }

  .overview-focus {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .overview-chart {
    gap: .25rem;
  }

  .overview-chart__label {
    font-size: .62rem;
  }

  .overview-team__metrics {
    gap: .4rem;
  }

  .overview-team__metrics > div {
    padding: .65rem;
  }

  .overview-team__metrics strong {
    font-size: 1.1rem;
  }

  .overview-team__metrics span {
    font-size: .65rem;
  }

  .overview-team__projects a {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: .5rem;
  }

  .overview-team__bar {
    display: none;
  }
}

/* [project]/libs/modules/integrations/src/IntegrationsPanel.css [app-client] (css) */
.integrations-panel {
  gap: 1rem;
  display: grid;
}

.integrations-panel__docs {
  background: #f0fdfabf;
  border: 1px solid #0f766e38;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  padding: .75rem .85rem;
  display: flex;
}

.integrations-panel__docs p {
  color: var(--ink-soft);
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
}

.integrations-panel__docs a {
  color: var(--accent-deep);
  font-weight: 700;
  text-decoration: none;
}

.integrations-panel__docs a:hover {
  text-decoration: underline;
}

.integrations-panel__readonly {
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff8c;
  border-radius: 10px;
  padding: .65rem .75rem;
  font-size: .84rem;
}

.integrations-section {
  gap: .65rem;
  display: grid;
}

.integrations-section__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
}

.integrations-list {
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.integrations-list__item {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  justify-content: space-between;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem .75rem;
  display: flex;
}

.integrations-list__main {
  gap: .2rem;
  min-width: 0;
  display: grid;
}

.integrations-list__main strong {
  font-size: .9rem;
}

.integrations-list__meta {
  color: var(--muted);
  word-break: break-word;
  font-size: .76rem;
}

.integrations-list__prefix {
  align-items: center;
  gap: .35rem;
  margin-top: .15rem;
  display: inline-flex;
}

.integrations-list__prefix code {
  direction: ltr;
  background: #1a24210f;
  border-radius: 8px;
  padding: .15rem .45rem;
  font-size: .78rem;
}

.integrations-list__actions {
  flex-shrink: 0;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.integrations-empty {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 12px;
  margin: 0;
  padding: .85rem;
  font-size: .84rem;
}

.integrations-form {
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  display: flex;
}

.integrations-form .ui-field {
  flex: 1;
  min-width: 10rem;
}

.integrations-secret {
  background: linear-gradient(#fffbeb 0%, #fef3c7 100%);
  border: 1px solid #f59e0b73;
  border-radius: 12px;
  gap: .55rem;
  padding: .85rem;
  display: grid;
}

.integrations-secret__head {
  align-items: center;
  gap: .45rem;
  display: flex;
}

.integrations-secret__head strong {
  color: #92400e;
  font-size: .92rem;
}

.integrations-secret__value {
  align-items: stretch;
  gap: .45rem;
  display: flex;
}

.integrations-secret__value code {
  word-break: break-all;
  text-align: left;
  direction: ltr;
  background: #fff;
  border: 1px solid #f59e0b59;
  border-radius: 10px;
  flex: 1;
  padding: .55rem .65rem;
  font-size: .82rem;
}

.integrations-secret__hint {
  color: #92400e;
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
}

.integrations-webhook-wizard {
  border: 1px solid var(--line);
  background: #ffffffb8;
  border-radius: 12px;
  gap: .75rem;
  padding: .85rem;
  display: grid;
}

.integrations-webhook-wizard__steps {
  gap: .35rem;
  display: flex;
}

.integrations-webhook-wizard__step {
  text-align: center;
  color: var(--muted);
  flex: 1;
  gap: .2rem;
  font-size: .72rem;
  display: grid;
}

.integrations-webhook-wizard__step-dot {
  background: #1a24211f;
  border-radius: 999px;
  height: .28rem;
}

.integrations-webhook-wizard__step.is-active {
  color: var(--accent-deep);
  font-weight: 700;
}

.integrations-webhook-wizard__step.is-active .integrations-webhook-wizard__step-dot, .integrations-webhook-wizard__step.is-done .integrations-webhook-wizard__step-dot {
  background: var(--accent);
}

.integrations-webhook-wizard__body {
  gap: .65rem;
  display: grid;
}

.integrations-webhook-wizard__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
  display: flex;
}

.integrations-events {
  gap: .45rem;
  display: grid;
}

.integrations-events__item {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #ffffffd9;
  border-radius: 10px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .55rem;
  padding: .55rem .65rem;
  display: grid;
}

.integrations-events__item:has(input:checked) {
  background: #f0fdfad9;
  border-color: #0f766e47;
}

.integrations-events__item input {
  margin-top: .15rem;
}

.integrations-events__label {
  color: var(--ink-soft);
  font-size: .86rem;
  font-weight: 700;
}

.integrations-events__hint {
  color: var(--muted);
  margin-top: .1rem;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.4;
  display: block;
}

.integrations-webhook-summary {
  background: #0f766e0f;
  border-radius: 10px;
  gap: .35rem;
  padding: .65rem .75rem;
  font-size: .84rem;
  display: grid;
}

.integrations-webhook-summary dt {
  color: var(--muted);
  font-size: .74rem;
}

.integrations-webhook-summary dd {
  word-break: break-word;
  margin: 0 0 .35rem;
}

.integrations-skeleton {
  gap: .45rem;
  display: grid;
}

.integrations-skeleton__row {
  background: linear-gradient(110deg, #1a24210f 30%, #1a24211a 50%, #1a24210f 70%) 0 0 / 200% 100%;
  border-radius: 12px;
  height: 3.5rem;
  animation: 1.2s ease-in-out infinite integrations-shimmer;
}

@keyframes integrations-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .integrations-skeleton__row {
    animation: none;
  }
}

.mcp-panel {
  border: 1px solid var(--line);
  background: var(--color-surface-solid, #fff);
  border-radius: 16px;
  gap: 1.25rem;
  min-width: 0;
  padding: 1.25rem;
  display: grid;
}

.mcp-panel__header, .mcp-panel__subheading, .mcp-token__heading {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  display: flex;
}

.mcp-panel__header {
  align-items: flex-start;
}

.mcp-panel__header > div {
  flex: 1;
  min-width: 0;
}

.mcp-panel h4, .mcp-panel h5 {
  color: var(--ink);
  margin: 0;
}

.mcp-panel h4 {
  font-size: 1rem;
}

.mcp-panel h5 {
  font-size: .88rem;
}

.mcp-panel__header p, .mcp-panel__hint {
  color: var(--muted);
  margin: .4rem 0 0;
  font-size: .8rem;
  line-height: 1.9;
}

.mcp-panel__subheading > span {
  color: var(--muted);
  font-size: .75rem;
}

.mcp-panel__actions {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.mcp-connection {
  border: 1px solid var(--line);
  background: var(--color-paper, #f8faf9);
  border-radius: 10px;
  min-width: 0;
  font-size: .8rem;
}

.mcp-connection summary {
  cursor: pointer;
  color: var(--ink-soft);
  padding: .8rem 1rem;
  font-weight: 600;
}

.mcp-connection summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
}

.mcp-connection__body {
  color: var(--muted);
  gap: .65rem;
  padding: 0 1rem 1rem;
  display: grid;
}

.mcp-connection__endpoint {
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.mcp-connection__endpoint > code {
  flex: 1;
  min-width: 0;
}

.mcp-connection__endpoint > button {
  flex-shrink: 0;
}

.mcp-connection code {
  overflow-wrap: anywhere;
  text-align: left;
  color: var(--ink-soft);
  font-size: .76rem;
  line-height: 1.7;
  display: block;
}

.mcp-panel .integrations-secret, .mcp-panel .integrations-secret__value, .mcp-panel .integrations-secret__value code {
  min-width: 0;
}

.mcp-token {
  flex-wrap: wrap;
  gap: .85rem;
  padding: 1rem;
}

.mcp-token--editing {
  border-color: var(--accent);
}

.mcp-token .integrations-list__main {
  flex: 15rem;
  gap: .4rem;
}

.mcp-token .integrations-list__actions {
  margin-inline-start: auto;
}

.mcp-token__heading {
  justify-content: flex-start;
}

.mcp-token__heading strong {
  overflow-wrap: anywhere;
}

.mcp-token__prefix {
  width: fit-content;
  color: var(--muted);
  font-size: .75rem;
}

.mcp-token__grants {
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .25rem;
  display: flex;
}

.mcp-token__grant {
  background: var(--color-paper, #f8faf9);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  border-radius: 6px;
  padding: .2rem .5rem;
  font-size: .72rem;
}

.mcp-form {
  border-top: 1px solid var(--line);
  gap: 1.15rem;
  min-width: 0;
  padding-top: 1.25rem;
  display: grid;
}

.mcp-form__fields {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  display: grid;
}

.mcp-form__fields > .ui-field {
  min-width: 0;
}

.mcp-form__fields input {
  width: 100%;
  min-width: 0;
}

.mcp-form__permissions {
  gap: .75rem;
  min-width: 0;
  display: grid;
}

.mcp-form__permissions > .mcp-panel__hint {
  margin: 0;
}

.mcp-workspace {
  border: 1px solid var(--line);
  border-radius: 12px;
  min-inline-size: 0;
  margin: 0;
  padding: .4rem .85rem .6rem;
}

.mcp-workspace legend {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  max-width: 100%;
  padding: 0 .4rem;
  font-size: .82rem;
  font-weight: 700;
}

.mcp-project {
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem);
  align-items: center;
  gap: .75rem;
  padding: .7rem .3rem;
  display: grid;
}

.mcp-project + .mcp-project {
  border-top: 1px solid var(--line);
}

.mcp-project > span {
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: .83rem;
  line-height: 1.7;
}

.mcp-project > select {
  width: 100%;
  min-width: 0;
  font-size: .78rem;
}

.mcp-project--selected > span {
  color: var(--accent-deep);
  font-weight: 600;
}

.mcp-form__footer {
  border-top: 1px solid var(--line);
  gap: .85rem;
  padding-top: .85rem;
  display: grid;
}

.mcp-form__footer .mcp-panel__actions {
  justify-content: flex-end;
}

.mcp-form__footer .mcp-panel__hint {
  margin: 0;
}

@media (max-width: 520px) {
  .mcp-panel {
    gap: 1rem;
    padding: .85rem;
  }

  .mcp-project {
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
  }

  .mcp-workspace {
    padding-inline: .6rem;
  }

  .mcp-connection__endpoint {
    flex-direction: column;
    align-items: flex-start;
  }

  .mcp-form__footer .mcp-panel__actions > button {
    flex: 1;
  }
}

.integrations-tabs {
  border: 1px solid var(--line);
  background: var(--color-paper, #f8faf9);
  border-radius: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  padding: .3rem;
  display: grid;
}

.integrations-tabs__tab {
  min-width: 0;
  min-height: 2.65rem;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  padding: .55rem .75rem;
  font-size: .85rem;
  font-weight: 600;
}

.integrations-tabs__tab:hover {
  color: var(--accent-deep);
}

.integrations-tabs__tab[aria-selected="true"] {
  border-color: var(--line);
  background: var(--color-surface-solid, #fff);
  color: var(--accent-deep);
  box-shadow: 0 1px 3px #1a24210f;
}

.integrations-tabs__tab:focus-visible, .integrations-tabpanel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.integrations-tabpanel {
  min-width: 0;
}

.integrations-panel [hidden] {
  display: none;
}

.gmail-integration {
  gap: 1rem;
  display: grid;
}

.gmail-integration__header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.gmail-integration__header h4 {
  margin: 0 0 .35rem;
}

.gmail-integration__header p {
  max-width: 48rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.8;
}

.gmail-integration__status {
  border-radius: 999px;
  flex: none;
  padding: .3rem .65rem;
  font-size: .78rem;
  font-weight: 700;
}

.gmail-integration__status.is-connected {
  color: #166534;
  background: #dcfce7;
}

.gmail-integration__status.is-disconnected {
  color: #64748b;
  background: #f1f5f9;
}

.gmail-integration__connect {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  justify-self: start;
  padding: .65rem 1rem;
  font-weight: 700;
  text-decoration: none;
}

.gmail-integration__connect:hover {
  background: var(--accent-deep);
}

.gmail-integration__connect[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
}

.gmail-integration__connections {
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.gmail-integration__connections > li {
  border: 1px solid var(--line);
  background: var(--color-surface-solid, #fff);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem;
  display: flex;
}

.gmail-integration__account {
  align-items: center;
  gap: .65rem;
  min-width: 0;
  display: flex;
}

.gmail-integration__account > div {
  gap: .2rem;
  min-width: 0;
  display: grid;
}

.gmail-integration__account strong {
  overflow-wrap: anywhere;
}

.gmail-integration__account span:last-child {
  color: var(--muted);
  font-size: .78rem;
}

.gmail-integration__account-state {
  background: #94a3b8;
  border-radius: 999px;
  width: .65rem;
  height: .65rem;
}

.gmail-integration__account-state.is-active {
  background: #22c55e;
  box-shadow: 0 0 0 4px #dcfce7;
}

.gmail-integration__account-state.is-expired {
  background: #f59e0b;
}

.gmail-integration__actions {
  flex-wrap: wrap;
  flex: none;
  gap: .45rem;
  display: flex;
}

.gmail-sync-result {
  background: #f0fdfabf;
  border: 1px solid #0f766e40;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .9rem;
  display: flex;
}

.gmail-sync-result strong {
  color: var(--accent-deep);
}

.gmail-sync-result p {
  color: var(--muted);
  margin: .2rem 0 0;
  font-size: .78rem;
}

.gmail-sync-result dl {
  gap: .65rem;
  margin: 0;
  display: flex;
}

.gmail-sync-result dl > div {
  background: var(--color-surface-solid, #fff);
  text-align: center;
  border-radius: 9px;
  min-width: 5.8rem;
  padding: .5rem .65rem;
}

.gmail-sync-result dt {
  color: var(--muted);
  font-size: .72rem;
}

.gmail-sync-result dd {
  color: var(--ink);
  margin: .2rem 0 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.gmail-sync-reauth {
  gap: 1rem;
  display: grid;
}

.gmail-sync-reauth > p {
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.8;
}

@media (max-width: 720px) {
  .gmail-integration__header, .gmail-integration__connections > li, .gmail-sync-result {
    flex-direction: column;
    align-items: stretch;
  }

  .gmail-integration__status {
    align-self: flex-start;
  }

  .gmail-integration__actions {
    width: 100%;
  }

  .gmail-integration__actions .ui-btn {
    flex: 1;
  }

  .gmail-sync-result dl {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
  }

  .gmail-sync-result dl > div {
    min-width: 0;
  }
}

.integration-guide {
  border: 1px solid var(--line);
  background: var(--color-surface-solid, #fff);
  border-radius: 12px;
  min-width: 0;
}

.integration-guide summary {
  color: var(--accent-deep);
  cursor: pointer;
  padding: .85rem 1rem;
  font-size: .85rem;
  font-weight: 700;
}

.integration-guide summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 12px;
}

.integration-guide__body {
  min-width: 0;
  color: var(--ink-soft);
  gap: .8rem;
  padding: 0 1rem 1rem;
  font-size: .82rem;
  line-height: 1.9;
  display: grid;
}

.integration-guide__body h5 {
  margin: .5rem 0 0;
  font-size: .86rem;
}

.integration-guide__body p, .integration-guide__body ul {
  margin: 0;
}

.integration-guide__body pre {
  border: 1px solid var(--line);
  background: var(--color-paper, #f8faf9);
  text-align: left;
  border-radius: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: .85rem;
  font-size: .75rem;
  line-height: 1.8;
  overflow-x: auto;
}

.integration-guide__table {
  min-width: 0;
  overflow-x: auto;
}

.integration-guide table {
  border-collapse: collapse;
  text-align: start;
  width: 100%;
  font-size: .78rem;
}

.integration-guide th, .integration-guide td {
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  text-align: start;
  padding: .6rem;
}

.integration-guide td code[dir="ltr"] {
  display: inline-block;
}

.oauth-consent {
  width: min(100%, 46rem);
  margin: 3rem auto;
  padding: 0 1rem;
}

.oauth-consent h1 {
  margin: 0;
  font-size: 1.25rem;
}

.oauth-consent h2 {
  margin: 0;
  font-size: .95rem;
}

.oauth-consent__client {
  border: 1px solid var(--line);
  background: var(--color-paper, #f8faf9);
  overflow-wrap: anywhere;
  border-radius: 10px;
  padding: 1rem;
}

.oauth-consent__client p {
  color: var(--muted);
  margin: .5rem 0 0;
  font-size: .85rem;
  line-height: 1.8;
}

.gitea-panel {
  gap: 1rem;
  min-width: 0;
  display: grid;
}

.gitea-panel p {
  margin: 0;
  line-height: 1.8;
}

.gitea-panel label {
  gap: .4rem;
  display: grid;
}

.gitea-panel select, .gitea-panel textarea {
  border: 1px solid var(--line, #d4d4d4);
  background: var(--surface, #fff);
  width: 100%;
  color: inherit;
  font: inherit;
  border-radius: 8px;
  padding: .65rem;
}

.gitea-panel textarea {
  resize: vertical;
  min-height: 100px;
}

.gitea-form {
  gap: .75rem;
  padding-block: 1rem;
  display: grid;
}

.gitea-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  display: flex;
}

.gitea-list {
  gap: .5rem;
  padding: 0;
  list-style: none;
  display: grid;
}

.gitea-list button {
  text-align: start;
  border: 1px solid var(--line, #ddd);
  width: 100%;
  color: inherit;
  cursor: pointer;
  background: none;
  border-radius: 10px;
  padding: .85rem;
  display: block;
}

.gitea-list button[aria-pressed="true"] {
  background: #0f766e14;
  border-color: #0f766e;
}

.gitea-list small {
  opacity: .7;
  margin-top: .5rem;
  display: block;
}

.gitea-detail {
  border-top: 1px solid var(--line, #ddd);
  gap: 1rem;
  min-width: 0;
  padding-top: 1rem;
  display: grid;
}

.gitea-detail pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 0;
}

.gitea-detail code {
  overflow-wrap: anywhere;
}

.gitea-detail article {
  border: 1px solid var(--line, #ddd);
  border-radius: 8px;
  padding: .75rem;
}

.gitea-error {
  color: #b91c1c;
}

/* [project]/libs/modules/notifications/src/NotificationsBell.css [app-client] (css) */
.notif-bell, .notif-bell__btn {
  position: relative;
}

.notif-bell__icon {
  color: var(--ink-soft);
  display: flex;
}

.notif-bell__badge {
  top: -.15rem;
  background: var(--stop);
  color: #fff;
  text-align: center;
  border-radius: 999px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.1rem;
  position: absolute;
  inset-inline-start: -.15rem;
}

.notif-panel {
  top: calc(100% + .4rem);
  width: min(380px, 100vw - 2rem);
  max-height: min(440px, 70vh);
  z-index: var(--z-dropdown);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #fff;
  border-radius: 14px;
  flex-direction: column;
  display: flex;
  position: absolute;
  inset-inline-end: 0;
  overflow: hidden;
}

.notif-panel__head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .75rem .85rem;
  display: flex;
}

.notif-panel__head strong {
  font-size: .92rem;
}

.notif-panel__body {
  padding: .55rem;
  overflow-y: auto;
}

.notif-push-setting {
  border-bottom: 1px solid var(--line);
  background: #0f766e0a;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  display: flex;
}

.notif-push-setting span {
  gap: .12rem;
  display: grid;
}

.notif-push-setting strong {
  font-size: .8rem;
}

.notif-push-setting small {
  color: var(--muted);
  font-size: .72rem;
}

.notif-panel__error {
  background: #fee2e28c;
  border-radius: 10px;
  margin: .35rem .55rem;
  padding: .55rem .65rem;
  font-size: .82rem;
}

.notif-empty {
  text-align: center;
  color: var(--muted);
  gap: .35rem;
  padding: 1.75rem 1rem;
  display: grid;
}

.notif-empty strong {
  color: var(--ink-soft);
  font-size: .92rem;
}

.notif-empty p {
  margin: 0;
  font-size: .82rem;
}

.notif-skeleton {
  gap: .45rem;
  padding: .35rem;
  display: grid;
}

.notif-skeleton__row {
  background: linear-gradient(110deg, #1a24210f 30%, #1a24211a 50%, #1a24210f 70%) 0 0 / 200% 100%;
  border-radius: 10px;
  height: 3.25rem;
  animation: 1.2s ease-in-out infinite notif-shimmer;
}

@keyframes notif-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.notif-list {
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.notif-item {
  text-align: start;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: #0f766e0a;
  border: 1px solid #0000;
  border-radius: 10px;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .55rem;
  padding: .65rem .7rem;
  transition: background .12s, border-color .12s;
  display: grid;
}

.notif-item:hover {
  border-color: var(--line);
  background: #0f766e14;
}

.notif-item.is-unread {
  background: #0f766e1a;
  border-color: #0f766e2e;
}

.notif-item__icon {
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  display: flex;
}

.notif-item__icon.is-task_assigned {
  color: #2563eb;
  background: #3b82f61f;
}

.notif-item__icon.is-comment_on_task {
  color: var(--accent-deep);
  background: #0f766e1f;
}

.notif-item__icon.is-due_soon {
  color: #d97706;
  background: #f59e0b24;
}

.notif-item__icon.is-mention {
  color: #9333ea;
  background: #a855f71f;
}

.notif-item__icon.is-task_completed {
  color: #047857;
  background: linear-gradient(135deg, #10b9812e, #0f766e1a);
  box-shadow: 0 0 0 4px #10b9810f;
}

.notif-item:has(.is-task_completed) {
  background: linear-gradient(135deg, #ecfdf5f2, #f0fdfae6);
  animation: .28s ease-out notif-complete-in;
  position: relative;
  overflow: hidden;
}

.notif-item__title {
  color: #047857;
  font-size: .82rem;
}

.notif-item__project {
  color: var(--muted);
  font-size: .72rem;
}

@keyframes notif-complete-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.notif-item__content {
  gap: .15rem;
  min-width: 0;
  display: grid;
}

.notif-item__msg {
  font-size: .86rem;
  line-height: 1.45;
}

.notif-item__meta {
  color: var(--muted);
  font-size: .74rem;
}

@media (prefers-reduced-motion: reduce) {
  .notif-skeleton__row {
    animation: none;
  }

  .notif-item:has(.is-task_completed) {
    animation: none;
  }
}

@media (max-width: 480px) {
  .notif-panel {
    inset-inline: 1rem;
    width: auto;
    max-height: calc(100vh - 5.25rem);
    position: fixed;
    top: 4.25rem;
  }
}

/* [project]/libs/modules/projects/src/ProjectTabs.css [app-client] (css) */
.project-tabs-wrap {
  margin-bottom: .85rem;
  position: relative;
}

.project-tabs-wrap:before, .project-tabs-wrap:after {
  content: "";
  pointer-events: none;
  z-index: 0;
  width: 1.75rem;
  position: absolute;
  top: 0;
  bottom: 0;
}

.project-tabs-wrap:before {
  background: linear-gradient(to left, transparent, var(--paper, #e8efe9));
  inset-inline-start: 0;
}

.project-tabs-wrap:after {
  background: linear-gradient(to right, transparent, var(--paper, #e8efe9));
  inset-inline-end: 0;
}

.project-tabs {
  z-index: 1;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  gap: .4rem;
  padding-bottom: .25rem;
  display: flex;
  position: relative;
  overflow-x: auto;
}

.project-tab {
  scroll-snap-align: start;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: pointer;
  background: #ffffffc7;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  font-size: .88rem;
  font-weight: 600;
  transition: background .12s, border-color .12s, color .12s;
  display: inline-flex;
}

.project-tab:hover {
  color: var(--accent-deep);
  background: #0f766e14;
}

.project-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.project-tab__count {
  font-variant-numeric: tabular-nums;
  min-width: 1.35rem;
  height: 1.35rem;
  color: inherit;
  background: #1a242114;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.project-tab.is-active .project-tab__count {
  background: #ffffff38;
}

.project-tab--mine {
  margin-inline-start: .15rem;
}

@media (max-width: 720px) {
  .project-tabs-wrap {
    margin-inline: calc(var(--space-3) * -1);
  }

  .project-tabs {
    padding-inline: var(--space-3);
    scrollbar-width: none;
  }

  .project-tabs::-webkit-scrollbar {
    display: none;
  }

  .project-tab {
    min-height: var(--touch-min);
    padding-inline: var(--space-4);
  }

  .project-tabs-wrap:before, .project-tabs-wrap:after {
    width: 1.25rem;
  }
}

/* [project]/libs/modules/projects/src/ProjectsModal.css [app-client] (css) */
.modal.projects-modal {
  flex-direction: column;
  width: min(96vw, 1080px);
  max-width: none;
  max-height: min(92vh, 900px);
  display: flex;
  overflow: hidden;
}

.projects-modal__body {
  flex: 1;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  display: grid;
}

.projects-modal__nav {
  border-inline-end: 1px solid var(--line);
  background: #ffffff73;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem;
  display: flex;
}

.projects-modal__nav-btn {
  width: 100%;
  color: var(--ink-soft);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  align-items: center;
  gap: .45rem;
  padding: .55rem .65rem;
  font-size: .84rem;
  font-weight: 600;
  transition: background .12s, color .12s;
  display: flex;
}

.projects-modal__nav-btn:hover {
  color: var(--accent-deep);
  background: #0f766e14;
}

.projects-modal__nav-btn.is-active {
  color: var(--accent-deep);
  background: #0f766e1f;
  border-color: #0f766e38;
}

.projects-modal__nav-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.projects-modal__project-picker {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: .65rem;
}

.projects-modal__project-picker .ui-field__label {
  font-size: .72rem;
}

.projects-modal__main {
  min-width: 0;
  padding: .85rem 1rem 1rem;
  overflow-y: auto;
}

.projects-modal__section-title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.projects-create {
  gap: .5rem;
  margin-bottom: 1rem;
  display: flex;
}

.projects-create .ui-input {
  flex: 1;
}

.projects-empty {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff8c;
  border-radius: 14px;
  margin-bottom: 1rem;
  padding: 1.25rem 1rem;
}

.projects-empty strong {
  color: var(--ink-soft);
  margin-bottom: .35rem;
  display: block;
}

.projects-empty p {
  margin: 0;
  font-size: .85rem;
}

.projects-cards {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
  display: grid;
}

.projects-card {
  border: 1px solid var(--line);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  border-radius: 12px;
  gap: .8rem;
  padding: 1rem;
  transition: border-color .12s, box-shadow .12s;
  display: grid;
  position: relative;
}

.projects-card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle), var(--shadow-sm);
}

.projects-card.is-archived {
  opacity: .72;
}

.projects-card__head {
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  display: flex;
}

.projects-card__head strong {
  font-size: .95rem;
}

.projects-card__identity {
  align-items: center;
  min-width: 0;
  display: flex;
}

.projects-card__link {
  color: inherit;
  gap: .8rem;
  text-decoration: none;
  display: grid;
}

.projects-card__progress {
  gap: .45rem;
  display: grid;
}

.projects-card__progress-head {
  color: var(--color-muted);
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}

.projects-card__chart {
  background: var(--color-accent-subtle);
  border-radius: .45rem;
  height: 2.5rem;
  overflow: hidden;
}

.projects-card__chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.projects-card__progress-track {
  background: var(--color-line);
  border-radius: 99px;
  height: .35rem;
  overflow: hidden;
}

.projects-card__progress-track span {
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  transition: width .4s;
  display: block;
}

.projects-card {
  background: #ffffffeb;
  border: 0;
  border-radius: 1rem;
  gap: .7rem;
  min-height: 20rem;
  padding: 1.25rem;
  box-shadow: 0 10px 28px #23447514;
}

.projects-card__link {
  gap: .7rem;
  height: 100%;
}

.projects-card__identity {
  text-align: right;
}

.projects-card__title {
  flex: 1;
  min-width: 0;
}

.projects-card__title strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.05rem;
  display: block;
  overflow: hidden;
}

.projects-card__title p {
  color: #91a1ba;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: .25rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
}

.projects-card__status {
  border-radius: 999px;
  align-self: flex-start;
  align-items: center;
  gap: .45rem;
  margin-top: .35rem;
  padding: .45rem .75rem;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
}

.projects-card__status span {
  background: currentColor;
  border-radius: 50%;
  width: .45rem;
  height: .45rem;
}

.projects-card__status.is-progress {
  color: #1da98a;
  background: #e5faf4;
}

.projects-card__status.is-idle {
  color: #d48a13;
  background: #fff3df;
}

.projects-card__status.is-archived {
  color: #8b9ab2;
  background: #f0f3f7;
}

.projects-card__status.is-loading {
  color: #8495ad;
  background: #f1f4f8;
}

.projects-card__members {
  color: #8494ad;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
  font-size: .72rem;
  display: flex;
}

.projects-card__avatars {
  direction: ltr;
  align-items: center;
  display: flex;
}

.projects-card__avatars span, .projects-card__avatars b {
  color: #38516f;
  background: #dbe4ef;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: -.35rem;
  font-size: .58rem;
  font-weight: 700;
  display: grid;
}

.projects-card__avatars span {
  aspect-ratio: 1;
  box-sizing: border-box;
  flex: 0 0 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
  overflow: hidden;
}

.projects-card__avatars span:first-child {
  margin-left: 0;
}

.projects-card__avatars img, .projects-members__avatar img, .project-task-modal__assignee b img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.projects-card__avatars b {
  background: #f1f5fa;
  border-radius: 999px;
  width: auto;
  min-width: 1.8rem;
  padding: 0 .35rem;
  font-size: .68rem;
}

.projects-card__progress {
  border-top: 1px solid #edf1f7;
  padding-top: .85rem;
}

.projects-card__progress-head {
  color: #546883;
  font-size: .78rem;
}

.projects-card__chart {
  background: linear-gradient(#7445e829, #7445e808);
  height: 4rem;
  margin-top: .25rem;
}

.projects-card__footer {
  color: #9aa9bd;
  border-top: 1px solid #edf1f7;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .68rem;
  display: flex;
}

.projects-card__footer span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.projects-card {
  direction: rtl;
  background: #fff;
  border-radius: 1.9rem;
  gap: 0;
  min-height: 24rem;
  padding: 2rem;
  box-shadow: 0 18px 44px #24457717;
}

.projects-card__link {
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0;
  height: 100%;
  display: grid;
}

.projects-card__menu-trigger {
  color: #70819b;
  font-size: 1.7rem;
}

.projects-card__title strong {
  color: #172d54;
  font-size: 1.35rem;
  line-height: 1.25;
}

.projects-card__title p {
  color: #98a8c0;
  margin-top: .35rem;
  font-size: .95rem;
}

.projects-card__status {
  border-radius: 999px;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  margin-top: 1.9rem;
  padding: .8rem 1.1rem;
  font-size: 1rem;
}

.projects-card__status.is-complete {
  color: #3565df;
  background: #edf2ff;
}

.projects-card__members {
  color: #8295b2;
  min-height: 4.3rem;
  padding: 1.5rem 0 1rem;
  font-size: .95rem;
}

.projects-card__progress {
  border-top: 1px solid #e7edf6;
  grid-template-rows: auto 1fr;
  min-height: 10.8rem;
  padding-top: 1.6rem;
  display: grid;
}

.projects-card__progress-head {
  color: #536886;
  align-items: center;
  font-size: 1rem;
}

.projects-card__progress-head strong {
  color: var(--color-accent-deep);
  font-size: 1.1rem;
}

.projects-card__chart {
  background: linear-gradient(#6f4ce22e, #6f4ce20d);
  border-radius: .8rem;
  align-self: end;
  height: 6.15rem;
  margin-top: 1.25rem;
}

.projects-card__chart svg {
  overflow: visible;
}

.projects-card__footer {
  color: #93a4bc;
  direction: rtl;
  border-top: 1px solid #e7edf6;
  padding-top: 1.45rem;
  font-size: .82rem;
}

@media (max-width: 460px) {
  .projects-card {
    border-radius: 1.35rem;
    min-height: 21rem;
    padding: 1.4rem;
  }

  .projects-card__status {
    margin-top: 1.2rem;
  }

  .projects-card__progress {
    min-height: 8.5rem;
    padding-top: 1.1rem;
  }

  .projects-card__chart {
    height: 4.75rem;
    margin-top: .8rem;
  }

  .projects-card__footer {
    flex-direction: column;
    gap: .4rem;
  }
}

.project-page {
  background: var(--color-paper);
  min-height: 100vh;
  padding: 0 0 2rem;
}

.projects-page {
  background: var(--color-paper);
  min-height: 100vh;
  padding: 1rem 0 2rem;
}

.projects-page__header {
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.projects-page__heading {
  text-align: right;
  min-width: 0;
}

.projects-page__workspace {
  color: var(--muted);
  margin: 0 0 .15rem;
  font-size: .75rem;
  line-height: 1.4;
}

.projects-page__title-row {
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .75rem;
  display: flex;
}

.projects-page__header h1 {
  text-align: right;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
}

.projects-page__title-row > p {
  color: var(--muted);
  margin: 0;
  font-size: .85rem;
  line-height: 1.6;
}

.projects-page__back {
  border: 1px solid var(--color-line);
  min-height: 2.25rem;
  color: var(--color-accent-deep);
  background: var(--color-surface-solid);
  border-radius: .65rem;
  flex-shrink: 0;
  align-items: center;
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.projects-page__back:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.projects-page__toolbar {
  direction: rtl;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.25rem;
  display: flex;
}

.projects-page__create-form {
  gap: 1rem;
  display: grid;
}

.projects-page__create-actions {
  justify-content: flex-end;
  gap: .6rem;
  display: flex;
}

.projects-page__archive-toggle {
  color: var(--color-muted);
  cursor: pointer;
  direction: rtl;
  align-items: center;
  gap: .6rem;
  margin-inline-start: auto;
  display: inline-flex;
}

.projects-page__archive-toggle input {
  appearance: none;
  border: 1px solid var(--color-line);
  background: var(--color-line);
  cursor: pointer;
  border-radius: 1rem;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  transition: background .15s;
  position: relative;
}

.projects-page__archive-toggle input:before {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: .9rem;
  height: .9rem;
  transition: transform .15s;
  position: absolute;
  top: .18rem;
  right: .18rem;
  box-shadow: 0 1px 3px #0002;
}

.projects-page__archive-toggle input:checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.projects-page__archive-toggle input:checked:before {
  transform: translateX(-1.05rem);
}

.projects-page__archive-toggle input:focus-visible {
  outline: 2px solid var(--color-accent-deep);
  outline-offset: 2px;
}

.projects-page__grid {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  display: grid;
}

.projects-page__grid > .projects-card {
  min-width: 0;
}

.projects-page__grid .projects-card__link {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.projects-page__grid .projects-card__head, .projects-page__grid .projects-card__identity, .projects-page__grid .projects-card__summary, .projects-page__grid .projects-card__progress, .projects-page__grid .projects-card__footer {
  min-width: 0;
}

.projects-page__grid .projects-card__title {
  overflow: hidden;
}

.projects-page__grid .projects-card__title strong {
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.projects-page__grid .projects-card__identity {
  padding-inline-end: 2.35rem;
}

.projects-page__grid .projects-card__menu-trigger {
  background: #fff;
  border: 1px solid #e5eaf3;
}

.projects-page__grid .projects-card__members {
  flex: 1;
  min-width: 0;
}

.projects-page__grid .projects-card__members > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.projects-page__grid .projects-card__status {
  white-space: nowrap;
  flex: none;
}

.projects-page__grid .projects-card__chart {
  overflow: hidden;
}

.projects-page__skeleton {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-solid);
  gap: .8rem;
  min-height: 12rem;
  padding: 1.25rem;
  display: grid;
}

.projects-page__skeleton span {
  background: linear-gradient(90deg, var(--color-line), var(--color-accent-subtle), var(--color-line));
  background-size: 200% 100%;
  border-radius: .4rem;
  height: .9rem;
  animation: 1.2s ease-in-out infinite project-skeleton;
  display: block;
}

.projects-page__skeleton span:first-child {
  border-radius: .8rem;
  width: 45%;
  height: 2.8rem;
}

.projects-page__skeleton span:last-child {
  width: 100%;
  height: 2.5rem;
}

@keyframes project-skeleton {
  to {
    background-position: -200% 0;
  }
}

.project-page__back {
  color: var(--color-accent-deep);
  margin-bottom: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.project-task-workspace {
  margin-top: 4rem;
  position: relative;
}

.project-task-views {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-surface-solid);
  padding: 2rem 1.25rem 1.25rem;
  overflow: hidden;
}

.project-task-views__header {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 1rem;
  margin: 0 -1.25rem 1rem;
  padding: 1.25rem 1.25rem 0;
  display: flex;
}

.project-task-views__eyebrow {
  color: var(--muted);
  margin: 0 0 .25rem;
  font-size: .78rem;
}

.project-task-views__toolbar {
  justify-content: flex-end;
  margin-bottom: 1.25rem;
  display: flex;
}

.project-task-views h2 {
  margin: 0;
  font-size: 1.2rem;
}

.project-task-views__tabs {
  z-index: 1;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem;
  display: flex;
  position: absolute;
  bottom: calc(100% - 1px);
  right: 0;
}

.project-task-views__tabs button {
  border: 1px solid var(--line);
  min-height: 2.75rem;
  box-shadow: none;
  background: var(--color-surface-solid);
  border-bottom: 0;
  border-radius: .75rem .75rem 0 0;
  padding-inline: 1.2rem;
  font-size: .95rem;
}

.project-task-views__tabs button[aria-selected="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

@media (max-width: 720px) {
  .project-task-workspace {
    margin-top: 3.5rem;
  }

  .project-task-views__tabs {
    right: 0;
  }

  .projects-page__header {
    align-items: flex-start;
  }

  .projects-page__title-row {
    display: block;
  }

  .projects-page__title-row > p {
    margin-top: .15rem;
  }

  .projects-page__back {
    white-space: nowrap;
    min-height: 2rem;
    padding: .25rem .55rem;
  }
}

@media (max-width: 460px) {
  .projects-page__header {
    flex-direction: column;
    gap: .6rem;
  }

  .projects-page__back {
    align-self: flex-start;
  }
}

.projects-card__meta {
  color: var(--muted);
  font-size: .78rem;
}

.projects-card__actions {
  flex-wrap: wrap;
  gap: .3rem;
  display: flex;
}

.projects-card__menu {
  z-index: 3;
  position: absolute;
  top: .7rem;
  left: .7rem;
}

.projects-card__menu-trigger {
  width: 2rem;
  height: 2rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .5rem;
  place-items: center;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
}

.projects-card__menu-trigger:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.projects-card__menu-popover {
  border: 1px solid var(--line);
  background: var(--color-surface-solid);
  min-width: 8rem;
  box-shadow: var(--shadow-md);
  border-radius: .65rem;
  padding: .35rem;
  display: grid;
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
}

.projects-card__menu-popover button {
  color: var(--ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .4rem;
  padding: .55rem .7rem;
}

.projects-card__menu-popover button:hover {
  background: var(--color-accent-subtle);
}

.projects-card__menu-popover button.is-danger {
  color: var(--color-danger);
}

.projects-card__rename {
  gap: .45rem;
  display: flex;
}

.projects-card__rename .ui-input {
  flex: 1;
}

.projects-archived {
  margin-top: 1rem;
}

.projects-archived summary {
  cursor: pointer;
  color: var(--muted);
  padding: .35rem 0;
  font-size: .85rem;
  font-weight: 600;
  list-style: none;
}

.projects-archived summary::-webkit-details-marker {
  display: none;
}

.projects-archived .projects-cards {
  margin-top: .55rem;
}

.projects-members {
  gap: .85rem;
  display: grid;
}

.projects-members__add {
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  display: flex;
}

.projects-members__add .ui-field {
  flex: 1;
  min-width: 10rem;
}

.projects-members__table {
  border-collapse: collapse;
  width: 100%;
}

.projects-members__table th, .projects-members__table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  padding: .55rem .45rem;
}

.projects-members__table th {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.projects-members__user {
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.projects-members__avatar {
  aspect-ratio: 1;
  width: 1.85rem;
  min-width: 1.85rem;
  height: 1.85rem;
  min-height: 1.85rem;
  color: var(--accent-deep);
  text-transform: uppercase;
  background: #0f766e24;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  overflow: hidden;
}

.projects-members__email {
  color: var(--muted);
  font-size: .74rem;
  display: block;
}

.projects-members__actions {
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.projects-members__hint, .projects-members__permissions-hint {
  color: var(--muted);
  margin: 0;
  font-size: .82rem;
  line-height: 1.7;
}

.ui-modal.projects-members__permissions-modal {
  width: min(94vw, 760px);
}

.projects-members__permissions {
  gap: .85rem;
  display: grid;
}

.projects-members__permission-group {
  border: 1px solid var(--line);
  border-radius: .65rem;
  min-width: 0;
  margin: 0;
  padding: .7rem;
}

.projects-members__permission-group legend {
  padding: 0 .35rem;
  font-size: .83rem;
  font-weight: 700;
}

.projects-members__permission-grid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .55rem 1rem;
  display: grid;
}

.projects-members__permission-grid label {
  cursor: pointer;
  align-items: flex-start;
  gap: .45rem;
  font-size: .82rem;
  line-height: 1.5;
  display: flex;
}

.projects-members__permission-grid input {
  accent-color: var(--accent);
  margin-top: .2rem;
}

.projects-members__permission-actions {
  justify-content: flex-end;
  display: flex;
}

.projects-labels {
  gap: .85rem;
  display: grid;
}

.projects-labels__add {
  gap: .55rem;
  display: grid;
}

.projects-labels__palette {
  flex-wrap: wrap;
  gap: .35rem;
  display: flex;
}

.projects-labels__swatch {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 999px;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
}

.projects-labels__swatch.is-selected {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
}

.projects-labels__list {
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.projects-labels__item {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  padding: .55rem .7rem;
  display: flex;
}

.projects-labels__item-actions {
  align-items: center;
  gap: .25rem;
  display: flex;
}

.projects-view-empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem 1rem;
  font-size: .9rem;
}

@media (max-width: 720px) {
  .projects-modal__body {
    grid-template-columns: 1fr;
  }

  .projects-modal__nav {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    flex-flow: wrap;
  }

  .projects-modal__project-picker {
    border-top: 0;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
  }

  .projects-members__table thead {
    display: none;
  }

  .projects-members__table tr {
    border-bottom: 1px solid var(--line);
    gap: .35rem;
    padding: .65rem 0;
    display: grid;
  }

  .projects-members__table td {
    border: 0;
    padding: .15rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-dashboard__skeleton-stat, .projects-dashboard__skeleton-block {
    animation: none;
  }
}

.projects-card {
  border-radius: 1.2rem;
  min-height: 20rem;
  padding: 1.45rem;
}

.projects-card__link {
  grid-template-rows: auto auto 1fr auto;
}

.projects-card__menu {
  top: 1.05rem;
  left: 1.1rem;
}

.projects-card__head {
  min-height: 3.2rem;
}

.projects-card__title strong {
  font-size: 1rem;
}

.projects-card__title p {
  font-size: .76rem;
}

.projects-card__summary {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  min-height: 3.25rem;
  margin: 1.15rem 0 .85rem;
  display: flex;
}

.projects-card__status {
  border-radius: 999px;
  align-self: auto;
  width: auto;
  margin: 0;
  padding: .45rem .75rem;
  font-size: .75rem;
}

.projects-card__status span {
  width: .45rem;
  height: .45rem;
}

.projects-card__members {
  min-height: 0;
  padding: 0;
  font-size: .73rem;
}

.projects-card__members > span {
  display: inline;
}

.projects-card__avatars span, .projects-card__avatars b {
  width: 1.8rem;
  height: 1.8rem;
  font-size: .56rem;
}

.projects-card__avatars span {
  flex-basis: 1.8rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
}

.projects-card__progress {
  border-top-color: #e8eef7;
  min-height: 0;
  padding-top: .9rem;
}

.projects-card__progress-head {
  font-size: .78rem;
}

.projects-card__progress-head strong {
  font-size: .9rem;
}

.projects-card__chart {
  border-radius: .55rem;
  height: 4rem;
  margin-top: .65rem;
}

.projects-card__footer {
  direction: ltr;
  align-items: center;
  padding-top: .85rem;
  font-size: .68rem;
}

.projects-card__date, .projects-card__metrics, .projects-card__metrics > span {
  align-items: center;
  gap: .3rem;
  display: inline-flex;
}

.projects-card__metrics {
  color: #7f91ac;
  direction: rtl;
  gap: .85rem;
}

@media (max-width: 460px) {
  .projects-card {
    min-height: 19rem;
    padding: 1.2rem;
  }

  .projects-card__footer {
    font-size: .62rem;
  }
}

@media (min-width: 900px) {
  .projects-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.7rem;
  }

  .projects-card {
    aspect-ratio: auto;
    border-radius: 1.15rem;
    height: auto;
    min-height: 0;
    padding: 1.1rem 1.25rem;
  }

  .projects-card__link {
    height: auto;
    display: grid;
  }

  .projects-card__head {
    min-height: 3.45rem;
  }

  .projects-card__title strong {
    font-size: 1.1rem;
  }

  .projects-card__title p {
    font-size: .78rem;
  }

  .projects-card__summary {
    min-height: 2.35rem;
    margin: .85rem 0 .75rem;
  }

  .projects-card__status {
    padding: .45rem .8rem;
    font-size: .75rem;
  }

  .projects-card__members {
    font-size: .72rem;
  }

  .projects-card__progress {
    border: 0;
    min-height: 0;
    padding: 0;
  }

  .projects-card__progress-head {
    font-size: .78rem;
  }

  .projects-card__chart {
    border-radius: .45rem;
    height: 4.75rem;
    margin-top: .7rem;
  }

  .projects-card__footer {
    border: 0;
    margin-top: .9rem;
    padding-top: .4rem;
    font-size: .7rem;
  }
}

.project-page__title {
  color: var(--color-ink);
  overflow-wrap: anywhere;
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.project-page__header {
  direction: rtl;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.project-page__header .project-page__title {
  min-width: 0;
  margin: 0;
}

.project-page__header .project-page__back {
  flex-shrink: 0;
  margin: 0;
}

.project-workspace-header {
  border-bottom: 1px solid #e7e9ef;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .25rem .2rem 1rem;
  display: flex;
}

.project-workspace-header__identity, .project-workspace-header__actions, .project-workspace-header__members {
  align-items: center;
  display: flex;
}

.project-workspace-header__identity {
  gap: .75rem;
  min-width: 0;
}

.project-workspace-header__identity > div {
  min-width: 0;
}

.project-workspace-header__identity span {
  color: #9299a7;
  font-size: .68rem;
  font-weight: 700;
}

.project-workspace-header__identity h1 {
  color: #172239;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: .15rem 0 0;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.35;
  overflow: hidden;
}

.project-workspace-header__back {
  color: #677083;
  background: #fff;
  border: 1px solid #e1e4ea;
  border-radius: .65rem;
  flex: 0 0 2.25rem;
  place-items: center;
  height: 2.25rem;
  text-decoration: none;
  display: grid;
}

.project-workspace-header__actions {
  flex-shrink: 0;
  gap: 1rem;
}

.project-workspace-header__members {
  direction: ltr;
}

.project-workspace-header__members > span, .project-workspace-header__members > b {
  color: #5947c2;
  background: #ece9ff;
  border: 2px solid #f7f8fa;
  border-radius: 50%;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-left: -.35rem;
  font-size: .67rem;
  font-weight: 800;
  display: grid;
}

.project-workspace-header__members > b {
  color: #6f7785;
  background: #f0f1f4;
}

.project-workspace-header__members > span {
  overflow: hidden;
}

.project-workspace-header__members > span img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.project-workspace-header__members small {
  color: #7e8694;
  white-space: nowrap;
  margin-left: .65rem;
  font-size: .72rem;
}

.project-task-views__tabs {
  scrollbar-width: none;
  border-bottom: 1px solid #e7e9ef;
  gap: .2rem;
  padding: .55rem 0 0;
  display: flex;
  overflow-x: auto;
}

.project-task-views__tabs::-webkit-scrollbar {
  display: none;
}

.project-task-views__tabs .ui-btn {
  white-space: nowrap;
  border-radius: .5rem .5rem 0 0;
  min-height: 2.65rem;
}

.project-task-views__tabs .ui-btn--primary {
  border-color: #0000;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent-deep);
  box-shadow: none;
  background: none;
}

.project-task-views {
  padding-top: .65rem;
}

.project-task-views__toolbar {
  justify-content: flex-end;
  margin: -.15rem 0 .45rem;
  display: flex;
}

@media (max-width: 767px) {
  .project-workspace-header {
    align-items: flex-start;
    padding: .25rem .5rem .75rem;
  }

  .project-workspace-header__actions {
    gap: .5rem;
  }

  .project-workspace-header__members small, .project-workspace-header__members > span:nth-of-type(n+3) {
    display: none;
  }

  .project-workspace-header__identity h1 {
    max-width: 42vw;
    font-size: 1.1rem;
  }

  .project-workspace-header__actions .ui-btn {
    min-height: 2.75rem;
    padding-inline: .75rem;
  }

  .project-task-views__tabs {
    padding-inline: .5rem;
  }
}

.project-page:has([data-project-view="kanban"]) {
  flex-direction: column;
  flex: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
}

.project-page:has([data-project-view="kanban"]) .project-page__header {
  flex-shrink: 0;
  margin-bottom: .75rem;
}

.project-task-workspace[data-project-view="kanban"] {
  flex-direction: column;
  flex: none;
  min-width: 0;
  min-height: 0;
  margin-top: 0;
  display: flex;
}

[data-project-view="kanban"] .project-task-views__tabs {
  flex-shrink: 0;
  margin-bottom: -1px;
  position: relative;
  inset: auto;
}

[data-project-view="kanban"] .project-task-views {
  flex-direction: column;
  flex: none;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: visible;
}

[data-project-view="kanban"] .project-task-views__toolbar {
  flex-shrink: 0;
}

[data-project-view="kanban"] .kanban {
  flex: none;
  height: 40rem;
  min-height: 40rem;
  margin: 0;
}

[data-project-view="kanban"] .kanban-board, [data-project-view="kanban"] .kanban-column__cards {
  overflow-anchor: none;
}

@media (max-width: 767px), (max-height: 650px) {
  .project-page:has([data-project-view="kanban"]) .project-page__title {
    font-size: 1.5rem;
  }

  [data-project-view="kanban"] .project-task-views {
    padding: .75rem;
  }

  [data-project-view="kanban"] .project-task-views__toolbar {
    margin-bottom: .5rem;
  }

  [data-project-view="kanban"] .project-task-views__tabs {
    gap: .25rem;
  }

  [data-project-view="kanban"] .project-task-views__tabs button {
    min-height: 2rem;
    padding-inline: .6rem;
    font-size: .8rem;
  }
}

@media (max-height: 500px) {
  .project-page:has([data-project-view="kanban"]) .project-page__header {
    margin-bottom: .25rem;
  }

  [data-project-view="kanban"] .project-task-views {
    padding: .5rem;
  }

  [data-project-view="kanban"] .kanban {
    height: auto;
    min-height: 0;
  }

  [data-project-view="kanban"] .kanban-column {
    gap: .35rem;
    padding: .5rem;
  }

  [data-project-view="kanban"] .kanban-column__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem;
  }

  [data-project-view="kanban"] .kanban-column__accent, [data-project-view="kanban"] .kanban-column__rename {
    grid-column: 1 / -1;
  }

  [data-project-view="kanban"] .kanban-column__title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  [data-project-view="kanban"] .kanban-column__toolbar {
    flex-wrap: nowrap;
  }
}

.project-page:has(.project-task-workspace) {
  background: #fff;
  min-height: 0;
}

.project-task-workspace {
  min-width: 0;
  margin-top: 0;
}

.project-workspace-header {
  direction: ltr;
  background: #fff;
  border-bottom: 0;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.8rem);
  min-height: 5.5rem;
  padding: .7rem .25rem .85rem;
  display: grid;
}

.project-workspace-header__identity {
  text-align: left;
  min-width: 0;
}

.project-workspace-header__identity h1 {
  color: #101b42;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: clamp(1.3rem, 1.7vw, 1.65rem);
  font-weight: 800;
  line-height: 1.23;
  display: -webkit-box;
}

.project-workspace-header__identity p {
  color: #65718d;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: .2rem 0 0;
  font-size: .76rem;
  line-height: 1.3;
  overflow: hidden;
}

[data-project-view="kanban"] .project-workspace-header__identity p {
  display: none;
}

.project-workspace-header__members {
  white-space: nowrap;
  flex-shrink: 0;
}

.project-workspace-header__members > span, .project-workspace-header__members > b {
  border-color: #fff;
  width: 2rem;
  height: 2rem;
}

.project-workspace-header__members small {
  color: #77829a;
  margin-left: 1rem;
}

.project-workspace-header__create.ui-btn {
  background: var(--color-accent);
  white-space: nowrap;
  min-height: 2.9rem;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-radius: .65rem;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  padding-inline: 1.05rem;
  display: inline-flex;
}

.project-task-views__tabs {
  direction: rtl;
  border: 0;
  flex-wrap: nowrap;
  align-self: stretch;
  align-items: center;
  gap: .1rem;
  padding: 0;
  position: static;
}

.project-task-views__tabs .ui-btn {
  min-height: 3.2rem;
  box-shadow: none;
  color: #465577;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  font-size: .82rem;
  display: inline-flex;
}

.project-task-views__tabs .ui-btn--primary {
  color: var(--color-accent-deep);
  border-bottom: 2px solid var(--color-accent);
}

.project-task-views__tabs button[aria-selected="true"] {
  border: 0;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-accent-deep);
  background: none;
}

.project-task-views__tabs .ui-btn:focus-visible, .project-workspace-header__create:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #978bff;
}

.project-task-views {
  background: none;
  border: 0;
  border-radius: 0;
  padding: .1rem 0 0;
  overflow: visible;
}

.project-task-views__controls {
  background: #f8f9fc;
  border: 1px solid #e7eaf2;
  border-radius: .8rem;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  margin: .1rem 0 .85rem;
  padding: .55rem;
  display: flex;
}

.project-task-views__controls .filters-bar {
  background: none;
  border: 0;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.project-task-views__controls .filters-bar__top {
  flex-wrap: nowrap;
}

.project-task-views__controls .filters-search {
  background: #fff;
  border-color: #e6e9f2;
  flex: 12rem;
  order: 0;
  min-width: 7rem;
}

.project-task-views__controls .filters-search__input {
  background: none;
  border: 0;
  min-height: 2.65rem;
}

.project-task-views__controls .filters-bar__toggle {
  background: #fff;
  border-color: #e6e9f2;
  order: 1;
  min-height: 2.65rem;
}

.project-task-views__controls .filters-bar__total {
  color: #75819b;
  order: 2;
  margin-inline-start: 0;
  padding-inline: .25rem;
}

.project-task-views__column-filter {
  color: #5042aa;
  white-space: nowrap;
  background: #f5f3ff;
  border: 1px solid #ded9f2;
  border-radius: 10px;
  align-items: center;
  gap: .35rem;
  min-height: 2.65rem;
  padding: .25rem .4rem .25rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
}

.project-task-views__column-filter .ui-button {
  min-height: 2rem;
}

.project-task-views__toolbar {
  flex: none;
  order: 2;
  align-items: center;
  gap: .35rem;
  margin: 0;
  display: flex;
}

.project-task-views__toolbar .ui-btn {
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: .55rem;
  min-height: 2.65rem;
}

.project-task-views__add-column {
  position: relative;
}

.project-task-views__add-column > form {
  z-index: 10;
  top: calc(100% + .4rem);
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: .6rem;
  gap: .4rem;
  width: 16rem;
  padding: .5rem;
  display: flex;
  position: absolute;
  inset-inline-end: 0;
  box-shadow: 0 10px 25px #14234222;
}

.project-task-views__add-column input {
  min-width: 0;
  font: inherit;
  border: 1px solid #dce1ed;
  border-radius: .4rem;
  flex: 1;
  padding: .4rem;
  font-size: .8rem;
}

[data-project-view="kanban"] .project-task-views__tabs {
  margin: 0;
}

[data-project-view="kanban"] .project-task-views {
  padding: .1rem 0 0;
}

[data-project-view="kanban"] .kanban {
  height: min(65rem, 100dvh - 17.5rem);
  min-height: 27rem;
}

.project-task-workspace .kanban-board {
  gap: .55rem;
  padding-bottom: .5rem;
}

.project-task-workspace .kanban-column {
  background: linear-gradient(#fafbfe, #f6f8fc);
  border-color: #e9edf6;
  border-radius: .8rem;
  flex: 0 0 18rem;
  gap: .45rem;
  width: 18rem;
  min-width: 18rem;
  max-width: none;
  padding: .4rem;
}

.project-task-workspace .kanban-column__head {
  gap: 0;
  padding: .35rem .4rem .25rem;
}

.project-task-workspace .kanban-column__accent {
  display: none;
}

.project-task-workspace .kanban-column__title-row {
  justify-content: flex-start;
  gap: .45rem;
  min-height: 2rem;
}

.project-task-workspace .kanban-column__title {
  color: #101b42;
  flex: 0 auto;
  font-size: .9rem;
  line-height: 1.35;
}

.project-task-workspace .kanban-column__count {
  background: var(--kanban-accent);
  color: #fff;
  border-radius: 50%;
  order: -1;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 .25rem;
}

.project-task-workspace .kanban-column__grip {
  order: 3;
  margin-inline-start: auto;
}

.project-task-workspace .kanban-column__toolbar {
  opacity: 1;
  gap: .15rem;
}

.project-task-workspace .kanban-column__add-task.ui-btn {
  border-radius: .45rem;
  min-height: 1.9rem;
  padding: .2rem .5rem;
  font-size: .7rem;
}

.project-task-workspace .kanban-column__icon-btn {
  opacity: 0;
  width: 1.85rem;
  height: 1.85rem;
}

.project-task-workspace .kanban-column:hover .kanban-column__icon-btn, .project-task-workspace .kanban-column:focus-within .kanban-column__icon-btn {
  opacity: .8;
}

@media (hover: none) {
  .project-task-workspace .kanban-column__icon-btn {
    opacity: .8;
  }
}

.project-task-workspace .kanban-column__cards {
  scrollbar-gutter: auto;
  gap: .45rem;
  padding: 0 .05rem .15rem;
}

.project-task-workspace .kanban-card {
  touch-action: pan-y;
  border-color: #e6eaf3;
  border-radius: .65rem;
  gap: .5rem;
  min-width: 0;
  padding: .7rem .75rem;
  box-shadow: 0 2px 8px #26395e0a;
}

.project-task-workspace .kanban-card__eyebrow {
  color: #7785a5;
  direction: ltr;
  justify-content: space-between;
  font-size: .68rem;
}

.project-task-workspace .kanban-card__title {
  color: #111d42;
  font-size: .83rem;
  line-height: 1.45;
}

.project-task-workspace .kanban-card__open {
  direction: auto;
  text-align: start;
}

.project-task-workspace .kanban-card__priority {
  font-size: .68rem;
}

.project-task-workspace .kanban-card__label {
  border-radius: 999px;
  font-size: .68rem;
}

.project-task-workspace .kanban-card__footer {
  min-height: 2rem;
  margin-top: .15rem;
}

.project-task-workspace .kanban-card__due {
  color: #647394;
  background: none;
  padding: 0;
  font-weight: 500;
}

.project-task-workspace .kanban-card__timer {
  margin-top: 0;
  padding-top: .25rem;
}

.project-task-workspace .kanban-card__timer-label {
  font-size: .65rem;
}

.project-task-workspace .kanban-card__timer .ui-icon-btn {
  width: 1.8rem;
  height: 1.8rem;
}

.project-task-workspace .kanban-column--add {
  background: #fafbfe;
}

@media (max-width: 1250px) {
  .project-workspace-header {
    grid-template-columns: minmax(10rem, 1fr) auto;
  }

  .project-workspace-header__members {
    grid-area: 2 / 1;
  }

  .project-task-views__tabs {
    grid-area: 1 / 2;
  }

  .project-workspace-header__create {
    grid-area: 2 / 2;
    justify-self: end;
  }
}

@media (max-width: 767px) {
  .project-workspace-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .5rem;
    min-height: 0;
    padding: .6rem .25rem .8rem;
  }

  .project-workspace-header__identity {
    grid-column: 1 / -1;
  }

  .project-workspace-header__identity h1 {
    font-size: 1.3rem;
  }

  .project-workspace-header__identity p {
    font-size: .72rem;
  }

  .project-workspace-header__members {
    grid-area: 2 / 1;
  }

  .project-workspace-header__create {
    grid-area: 2 / 2;
  }

  .project-task-views__tabs {
    grid-area: 3 / 1 / auto / -1;
    width: 100%;
    overflow-x: auto;
  }

  .project-task-views__tabs .ui-btn {
    min-height: 2.65rem;
    padding-inline: .55rem;
    font-size: .72rem;
  }

  .project-task-views__controls {
    flex-wrap: wrap;
    padding: .4rem;
  }

  .project-task-views__controls .filters-bar {
    flex-basis: 100%;
  }

  .project-task-views__controls .filters-bar__top {
    flex-wrap: nowrap;
    display: flex;
  }

  .project-task-views__controls .filters-search {
    flex: auto;
    min-width: 0;
  }

  .project-task-views__controls .filters-bar__toggle {
    flex: none;
  }

  .project-task-views__controls .filters-bar__total {
    display: none;
  }

  .project-task-views__toolbar {
    margin-inline-start: auto;
  }

  .project-task-views__add-column > form {
    inset-inline-end: auto;
    width: min(16rem, 100vw - 2rem);
    left: 0;
  }

  [data-project-view="kanban"] .project-task-views {
    padding: 0;
  }

  [data-project-view="kanban"] .kanban {
    height: max(25rem, 100dvh - 20rem);
    min-height: 25rem;
  }

  .project-task-workspace .kanban-column {
    flex: 0 0 min(80vw, 18rem);
    width: min(80vw, 18rem);
    min-width: min(80vw, 18rem);
    max-width: none;
  }

  .project-task-workspace .kanban-column__icon-btn {
    opacity: .8;
  }
}

@media (max-width: 600px) {
  .project-task-workspace .kanban-column {
    flex-basis: calc(100% - .5rem);
    width: calc(100% - .5rem);
    min-width: calc(100% - .5rem);
  }
}

.project-gantt {
  background: #fff;
  border: 1px solid #e4e8f1;
  border-radius: .85rem;
  min-width: 0;
  overflow: hidden;
}

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

.project-gantt__toolbar {
  background: #fafbfe;
  border-bottom: 1px solid #e6eaf2;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: .65rem .9rem;
  display: flex;
}

.project-gantt__toolbar > div:first-child {
  flex-direction: column;
  gap: .15rem;
  display: flex;
}

.project-gantt__toolbar strong {
  color: #14203f;
  font-size: .94rem;
}

.project-gantt__toolbar span {
  color: #7a859c;
  font-size: .72rem;
}

.project-gantt__actions, .project-gantt__zoom {
  align-items: center;
  gap: .35rem;
  display: flex;
}

.project-gantt__filters {
  scrollbar-width: thin;
  background: #fff;
  border-bottom: 1px solid #e6eaf2;
  align-items: end;
  gap: .55rem;
  padding: .7rem .9rem;
  display: flex;
  overflow-x: auto;
}

.project-gantt__filters label {
  color: #65718b;
  flex: none;
  gap: .2rem;
  font-size: .66rem;
  font-weight: 700;
  display: grid;
}

.project-gantt__filters label > span {
  color: inherit;
  font-size: inherit;
}

.project-gantt__filters input:not([type="checkbox"]), .project-gantt__filters select {
  color: #172443;
  width: 8.5rem;
  min-height: 2.15rem;
  font: inherit;
  background: #fff;
  border: 1px solid #d7dce7;
  border-radius: .45rem;
  padding: .35rem .45rem;
  font-size: .72rem;
}

.project-gantt__filters .project-gantt__search input {
  width: 14rem;
}

.project-gantt__filters .project-gantt__check {
  white-space: nowrap;
  align-self: center;
  align-items: center;
  gap: .35rem;
  padding-top: 1rem;
  display: flex;
}

.project-gantt__no-results {
  color: #7c4350;
  background: #fff7f8;
  border-bottom: 1px solid #eadde0;
  padding: .65rem .9rem;
  font-size: .76rem;
}

.project-gantt__no-results button {
  color: #6048bd;
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  margin-inline-start: .4rem;
  font-weight: 800;
}

.project-gantt__unscheduled {
  background: #fffcf3;
  border-bottom: 1px solid #e6eaf2;
  padding: .8rem .9rem;
}

.project-gantt__unscheduled > header {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.project-gantt__unscheduled > header > div {
  align-items: center;
  gap: .55rem;
  display: flex;
}

.project-gantt__unscheduled > header > div:first-child {
  flex-direction: column;
  align-items: flex-start;
  gap: .12rem;
}

.project-gantt__unscheduled header strong {
  color: #463716;
  font-size: .82rem;
}

.project-gantt__unscheduled header span, .project-gantt__unscheduled-empty {
  color: #796a47;
  font-size: .68rem;
}

.project-gantt__unscheduled-list {
  gap: .4rem;
  max-height: 15rem;
  margin-top: .65rem;
  display: grid;
  overflow-y: auto;
}

.project-gantt__unscheduled-list article {
  background: #fff;
  border: 1px solid #eadfbe;
  border-radius: .55rem;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  display: flex;
}

.project-gantt__unscheduled-list article > div:first-child {
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  display: flex;
}

.project-gantt__unscheduled-list a {
  color: #2f245f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
  overflow: hidden;
}

.project-gantt__unscheduled-list small, .project-gantt__read-only {
  color: #83785e;
  font-size: .64rem;
}

.project-gantt__unscheduled-list form {
  flex-wrap: wrap;
  align-items: end;
  gap: .4rem;
  display: flex;
}

.project-gantt__unscheduled-list form label {
  color: #736747;
  gap: .15rem;
  font-size: .62rem;
  display: grid;
}

.project-gantt__unscheduled-list form input {
  min-height: 2rem;
  font: inherit;
  border: 1px solid #d9ceb0;
  border-radius: .4rem;
  padding: .25rem .4rem;
}

.project-gantt__unscheduled-list form .ui-inline-error {
  width: 100%;
}

.project-gantt__unscheduled-empty {
  margin: .65rem 0 0;
}

.project-gantt__zoom {
  background: #fff;
  border: 1px solid #e0e4ed;
  border-radius: .55rem;
  padding: .2rem;
}

.project-gantt__zoom button {
  color: #61708e;
  cursor: pointer;
  min-width: 3rem;
  min-height: 2rem;
  font: inherit;
  background: none;
  border: 0;
  border-radius: .4rem;
  padding: .2rem .55rem;
  font-size: .75rem;
}

.project-gantt__zoom button.is-active {
  color: #fff;
  background: #6655cf;
  font-weight: 700;
}

.project-gantt__shell {
  direction: ltr;
  grid-template-columns: minmax(27rem, 38%) minmax(0, 1fr);
  min-width: 0;
  display: grid;
}

.project-gantt__table {
  z-index: 2;
  direction: rtl;
  background: #fff;
  border-right: 1px solid #dde2ec;
  box-shadow: 5px 0 12px #1826490a;
}

.project-gantt__table-head, .project-gantt__task {
  grid-template-columns: minmax(10rem, 2fr) minmax(6rem, 1fr) minmax(5rem, .8fr) minmax(6rem, .8fr);
  align-items: center;
  gap: .6rem;
  display: grid;
}

.project-gantt__table-head {
  color: #687590;
  background: #f6f8fc;
  border-bottom: 1px solid #dde2ec;
  height: 48px;
  padding: 0 .7rem;
  font-size: .7rem;
  font-weight: 800;
}

.project-gantt__task {
  color: #46536e;
  cursor: pointer;
  text-align: right;
  width: 100%;
  height: 56px;
  font: inherit;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  padding: 0 .7rem;
  font-size: .72rem;
  text-decoration: none;
}

.project-gantt__task:hover {
  background: #f7f5ff;
}

.project-gantt__task:focus-visible {
  z-index: 2;
  outline-offset: -3px;
  background: #f7f5ff;
  outline: 3px solid #6a55d8;
  position: relative;
}

.project-gantt__group {
  color: #34425e;
  background: #f0f3f8;
  border-bottom: 1px solid #dfe4ed;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 0 .75rem;
  font-size: .72rem;
  display: flex;
}

.project-gantt__group span {
  color: #748097;
  font-size: .66rem;
}

.project-gantt__task > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.project-gantt__task > span:first-child {
  flex-direction: column;
  display: flex;
}

.project-gantt__task small {
  color: #8a94a8;
  text-align: right;
  direction: ltr;
  font-size: .62rem;
}

.project-gantt__task b {
  color: #172443;
  text-overflow: ellipsis;
  font-size: .78rem;
  overflow: hidden;
}

.project-gantt__progress {
  direction: ltr;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.project-gantt__progress i {
  background: #e8eaf1;
  border-radius: 999px;
  width: 3.2rem;
  height: .35rem;
  overflow: hidden;
}

.project-gantt__progress i b {
  border-radius: inherit;
  background: #7465db;
  height: 100%;
  display: block;
}

.project-gantt__progress em {
  color: #65718b;
  font-size: .68rem;
  font-style: normal;
}

.project-gantt__progress.is-empty {
  direction: rtl;
}

.project-gantt__progress.is-empty em {
  color: #9aa3b5;
}

.project-gantt__scroll {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  direction: ltr;
  min-width: 0;
  overflow-x: auto;
}

.project-gantt__timeline {
  min-width: 100%;
  position: relative;
}

.project-gantt__dates {
  background: #f6f8fc;
  border-bottom: 1px solid #dde2ec;
  height: 48px;
  display: flex;
}

.project-gantt__dates > div {
  color: #697690;
  white-space: nowrap;
  border-right: 1px solid #e5e9f1;
  flex: none;
  place-items: center;
  font-size: .66rem;
  display: grid;
  overflow: hidden;
}

.project-gantt__dates > div.is-today {
  color: #df3857;
  background: #fff2f5;
  font-weight: 800;
}

.project-gantt__grid {
  background-image: linear-gradient(to right, #edf0f5 1px, #0000 1px), linear-gradient(#edf0f5 1px, #0000 1px);
  position: relative;
}

.project-gantt__group-line {
  z-index: 1;
  background: #f0f3f8cc;
  border-block: 1px solid #dfe4ed;
  position: absolute;
  left: 0;
  right: 0;
}

.project-gantt__today {
  z-index: 2;
  pointer-events: none;
  background: #eb4762;
  width: 2px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.project-gantt__today span {
  color: #fff;
  white-space: nowrap;
  background: #eb4762;
  border-radius: 999px;
  padding: .12rem .35rem;
  font-size: .6rem;
  position: absolute;
  top: .25rem;
  left: .35rem;
}

.project-gantt__dependencies {
  z-index: 2;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.project-gantt__dependencies path {
  fill: none;
  stroke: #8175bd;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.project-gantt__dependencies path.is-blocked {
  stroke: #bc5261;
  stroke-width: 2px;
  stroke-dasharray: 4 3;
}

.project-gantt__dependencies marker path {
  fill: #8175bd;
  stroke: none;
}

.project-gantt__bar {
  --gantt-bar-bg: #dcd8fa;
  --gantt-bar-border: #bdb5f1;
  --gantt-bar-fill: #7666dc;
  --gantt-bar-text: #30227f;
  z-index: 3;
  background: var(--gantt-bar-bg);
  height: 28px;
  color: var(--gantt-bar-text);
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--gantt-bar-border);
  touch-action: none;
  border: 0;
  border-radius: .45rem;
  padding: 0;
  text-decoration: none;
  position: absolute;
  overflow: visible;
}

.project-gantt__bar > span {
  background: var(--gantt-bar-fill);
  opacity: .28;
  position: absolute;
  inset: 0 auto 0 0;
}

.project-gantt__bar b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  line-height: 28px;
  display: block;
  position: relative;
  overflow: hidden;
}

.project-gantt__bar-main {
  z-index: 2;
  color: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0 .25rem;
  position: absolute;
  inset: 0 8px;
  overflow: hidden;
}

.project-gantt__bar.is-schedule-editable .project-gantt__bar-main {
  cursor: grab;
}

.project-gantt__bar.is-schedule-editable .project-gantt__bar-main:active {
  cursor: grabbing;
}

.project-gantt__bar.is-saving {
  opacity: .62;
}

.project-gantt__resize {
  z-index: 5;
  background: color-mix(in srgb, var(--gantt-bar-text) 60%, transparent);
  cursor: ew-resize;
  border: 0;
  border-radius: 3px;
  width: 10px;
  padding: 0;
  position: absolute;
  top: 3px;
  bottom: 3px;
}

.project-gantt__resize.is-start {
  left: 2px;
}

.project-gantt__resize.is-end {
  right: 2px;
}

.project-gantt__schedule-status {
  color: #4f4381;
  background: #f7f5ff;
  border-block: 1px solid #d8dced;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: .45rem .75rem;
  font-size: .75rem;
  display: flex;
}

.project-gantt__schedule-status button {
  color: #5946c4;
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  font-weight: 800;
  text-decoration: underline;
}

.project-gantt__schedule-panel {
  z-index: 1000;
  background: #17213b70;
  place-items: center;
  padding: 1rem;
  display: grid;
  position: fixed;
  inset: 0;
}

.project-gantt__schedule-panel form {
  background: #fff;
  border-radius: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  width: min(32rem, 100%);
  padding: 1rem;
  display: grid;
  box-shadow: 0 1rem 3rem #17213b45;
}

.project-gantt__schedule-panel h3, .project-gantt__schedule-panel p, .project-gantt__schedule-panel > form > div, .project-gantt__schedule-panel > form > span {
  grid-column: 1 / -1;
  margin: 0;
}

.project-gantt__schedule-panel label {
  gap: .3rem;
  font-size: .75rem;
  font-weight: 700;
  display: grid;
}

.project-gantt__schedule-panel input {
  min-height: 2.5rem;
  font: inherit;
  border: 1px solid #ccd3e1;
  border-radius: .4rem;
  padding: .4rem;
}

.project-gantt__schedule-panel > form > div {
  gap: .5rem;
  display: flex;
}

.project-gantt__bar:hover, .project-gantt__bar:focus-within {
  outline-offset: 2px;
  outline: 2px solid #5946c4;
}

.project-gantt__bar-main:focus-visible, .project-gantt__resize:focus-visible {
  outline-offset: 2px;
  outline: 3px solid #2f247e;
}

.project-gantt__bar.is-done {
  --gantt-bar-bg: #dcf3e8;
  --gantt-bar-border: #91cfaf;
  --gantt-bar-fill: #2d9b68;
  --gantt-bar-text: #17613f;
}

.project-gantt__bar.is-overdue {
  --gantt-bar-bg: #fff0ee;
  --gantt-bar-border: #efaaa2;
  --gantt-bar-fill: #d95d52;
  --gantt-bar-text: #92362f;
}

.project-gantt__bar.is-review {
  --gantt-bar-bg: #fff5d9;
  --gantt-bar-border: #e5c56c;
  --gantt-bar-fill: #c99419;
  --gantt-bar-text: #77590c;
}

.project-gantt__bar.is-blocked {
  --gantt-bar-bg: #f1edf4;
  --gantt-bar-border: #aa9ab6;
  --gantt-bar-fill: #725c80;
  --gantt-bar-text: #4f3d5b;
}

.project-gantt__bar.is-also-overdue {
  border-inline-end: 3px solid #d95d52;
}

.project-gantt__bar.is-partial {
  border-inline-start: 3px dotted var(--gantt-bar-text);
}

.project-gantt__bar.is-unscheduled {
  border: 1px dashed var(--gantt-bar-border);
  background: color-mix(in srgb, var(--gantt-bar-bg) 45%, white);
  width: min(16rem, 100% - 1rem);
  box-shadow: none;
  opacity: .86;
  left: .5rem;
}

.project-gantt__dependency-indicator {
  z-index: 4;
  color: #fff;
  opacity: 1;
  background: #7568b0;
  border: 2px solid #fff;
  border-radius: 999px;
  align-items: center;
  gap: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  display: flex;
  position: absolute;
  inset: -8px -8px auto auto;
  box-shadow: 0 1px 3px #27345435;
}

.project-gantt__dependency-indicator.is-blocked {
  background: #bc5261;
}

.project-gantt__dependency-indicator small {
  color: inherit;
  font-size: 8px;
  font-weight: 800;
}

.project-gantt__milestone {
  z-index: 4;
  color: #4d368d;
  cursor: pointer;
  max-width: 10rem;
  font: inherit;
  background: none;
  border: 0;
  align-items: center;
  gap: .35rem;
  padding: 0;
  display: flex;
  position: absolute;
  transform: translateX(-7px);
}

.project-gantt__milestone i {
  background: #7357c8;
  border: 2px solid #fff;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #5940a9;
}

.project-gantt__milestone span {
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border-radius: .3rem;
  padding: .1rem .3rem;
  font-size: .66rem;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 1px 3px #27345425;
}

.project-gantt__milestone:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #5946c4;
}

.project-gantt__milestone-panel {
  color: #283450;
  background: #faf9ff;
  border: 1px solid #ddd7f3;
  border-radius: .7rem;
  gap: .6rem;
  margin: .75rem;
  padding: .8rem;
  display: grid;
}

.project-gantt__milestone-panel > div:first-child {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.project-gantt__milestone-panel small {
  color: #5940a9;
  background: #e9e3fa;
  border-radius: 999px;
  padding: .15rem .4rem;
}

.project-gantt__milestone-panel p {
  white-space: pre-wrap;
  margin: 0;
}

.project-gantt__milestone-panel > div:last-child, .project-gantt__milestone-form > div {
  gap: .4rem;
  display: flex;
}

.project-gantt__milestone-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  display: grid;
}

.project-gantt__milestone-form label {
  color: #59657c;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
}

.project-gantt__milestone-form label:last-of-type, .project-gantt__milestone-form > div {
  grid-column: 1 / -1;
}

.project-gantt__milestone-form input, .project-gantt__milestone-form select, .project-gantt__milestone-form textarea {
  color: #172443;
  min-height: 2.35rem;
  font: inherit;
  background: #fff;
  border: 1px solid #d7dce7;
  border-radius: .45rem;
  padding: .45rem .55rem;
}

.project-gantt__milestone-form textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.project-gantt__empty {
  justify-items: center;
  gap: .75rem;
  padding-bottom: 1.5rem;
  display: grid;
}

.project-gantt__mobile {
  display: none;
}

.project-gantt__mobile-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 10rem;
}

@media (max-width: 900px) {
  .project-gantt__shell {
    grid-template-columns: 17rem minmax(0, 1fr);
  }

  .project-gantt__table-head, .project-gantt__task {
    grid-template-columns: minmax(9rem, 1fr) 5rem;
  }

  .project-gantt__table-head span:nth-child(2), .project-gantt__table-head span:nth-child(3), .project-gantt__task > span:nth-child(2), .project-gantt__task > span:nth-child(3) {
    display: none;
  }
}

@media (max-width: 600px) {
  .project-gantt {
    border-inline: 0;
    border-radius: .7rem;
    overflow: clip;
  }

  .project-gantt__toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-gantt__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .project-gantt__filters {
    overscroll-behavior-inline: contain;
    max-width: 100%;
    padding-inline: .7rem;
  }

  .project-gantt__filters:after {
    content: "";
    flex: 0 0 .15rem;
  }

  .project-gantt__shell {
    display: none;
  }

  .project-gantt__mobile {
    overscroll-behavior: contain;
    background: #f7f8fc;
    gap: .65rem;
    max-height: min(65dvh, 42rem);
    padding: .7rem;
    display: grid;
    overflow-y: auto;
  }

  .project-gantt__mobile-card {
    background: #fff;
    border: 1px solid #e1e5ef;
    border-radius: .7rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    padding: .75rem;
    display: grid;
    box-shadow: 0 2px 8px #21345a0a;
  }

  .project-gantt__mobile-card > a {
    color: #172443;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    text-decoration: none;
    display: flex;
  }

  .project-gantt__mobile-card > a:focus-visible {
    outline-offset: 3px;
    border-radius: .3rem;
    outline: 3px solid #6a55d8;
  }

  .project-gantt__mobile-card > a small {
    color: #8490a8;
    text-align: start;
    direction: ltr;
    font-size: .62rem;
  }

  .project-gantt__mobile-card > a strong {
    overflow-wrap: anywhere;
    font-size: .82rem;
    line-height: 1.5;
  }

  .project-gantt__mobile-meta {
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: .35rem;
    display: flex;
  }

  .project-gantt__mobile-meta span {
    color: #594b9d;
    background: #f0eefb;
    border-radius: 999px;
    padding: .2rem .45rem;
    font-size: .64rem;
  }

  .project-gantt__mobile-dates {
    color: #5f6d88;
    scrollbar-width: thin;
    grid-column: 1 / -1;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .68rem;
    display: flex;
    overflow-x: auto;
  }

  .project-gantt__mobile-dates time {
    background: #fafbfe;
    border: 1px solid #dfe3ed;
    border-radius: .4rem;
    flex: none;
    padding: .25rem .4rem;
  }

  .project-gantt__mobile-dates i {
    background: linear-gradient(90deg, #7565d9, #a99fee);
    flex: 1 0 2rem;
    height: 2px;
  }

  .project-gantt__mobile-card > .ui-btn {
    white-space: nowrap;
    align-self: start;
  }

  .project-gantt__unscheduled > header, .project-gantt__unscheduled-list article {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gantt *, .project-gantt :before, .project-gantt :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.ui-modal.project-task-modal {
  width: min(860px, 100%);
}

.project-task-modal__heading {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.project-task-modal__heading h3 {
  overflow-wrap: anywhere;
  font-size: 1.5rem;
}

.project-task-modal__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  display: grid;
}

.project-task-modal__details dt {
  color: var(--color-muted);
  font-size: .85rem;
}

.project-task-modal__details dd {
  margin: .25rem 0 0;
}

.project-task-modal__description {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.project-task-modal__form > fieldset {
  border: 0;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.project-task-modal__form label {
  gap: .4rem;
  display: grid;
}

.project-task-modal__form select, .project-task-modal__form textarea {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  width: 100%;
  color: inherit;
  font: inherit;
  border-radius: .6rem;
  padding: .65rem;
}

.project-task-modal__estimate {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  display: grid;
}

.project-task-modal__form .project-task-modal__label {
  align-items: center;
  margin-inline-end: 1rem;
  display: inline-flex;
}

.project-task-modal__sections {
  gap: 1.25rem;
  margin-top: 1.5rem;
  display: grid;
}

@media (max-width: 480px) {
  .project-task-modal__details {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ui-modal.project-task-modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: none;
    max-height: 94dvh;
    margin-block-start: auto;
  }

  .project-task-modal__heading {
    align-items: flex-start;
  }

  .project-task-modal__heading h3 {
    min-width: 0;
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .project-task-modal__details, .project-task-modal__estimate {
    gap: var(--space-3);
    grid-template-columns: 1fr;
  }

  .project-task-modal__sections {
    gap: var(--space-4);
    margin-block-start: var(--space-4);
  }

  .project-task-modal__form select, .project-task-modal__form textarea {
    min-height: var(--touch-min);
    font-size: 1rem;
  }
}

.task-completion-panel {
  border-block-start: 1px solid var(--color-line);
  gap: .8rem;
  min-width: 0;
  padding-block: 1rem;
  display: grid;
}

.task-completion-panel h3, .task-completion-panel p {
  margin: 0;
}

.task-completion-panel textarea {
  resize: vertical;
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  width: 100%;
  color: inherit;
  font: inherit;
  border-radius: .6rem;
  padding: .65rem;
}

.task-completion-panel a {
  overflow-wrap: anywhere;
}

.task-completion-panel label {
  gap: .4rem;
  display: grid;
}

.task-completion-panel fieldset {
  min-width: 0;
}

.kanban-card__completion {
  color: var(--color-primary);
  font-size: .75rem;
  font-weight: 600;
}

.ui-modal.project-task-modal {
  color: #17213d;
  background: #fff;
  border: 1px solid #e6eaf3;
  border-radius: 1rem;
  flex-direction: column;
  width: min(1100px, 100vw - 3rem);
  height: min(92dvh, 900px);
  max-height: none;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.ui-modal.project-task-modal.is-expanded {
  width: min(1400px, 100vw - 2rem);
  height: calc(100dvh - 2rem);
}

.project-task-modal > .ui-modal__header {
  border-bottom: 1px solid #e8ebf2;
  flex: none;
  margin: 0;
  padding: 0;
  display: block;
}

.project-task-modal__masthead {
  padding: 1rem 1.4rem .75rem;
}

.project-task-modal__topline {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 2.5rem;
  display: flex;
}

.project-task-modal__breadcrumb {
  color: #52617e;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: .78rem;
  overflow: hidden;
}

.project-task-modal__actions {
  direction: ltr;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.project-task-modal__actions button, .project-task-modal__small-action {
  color: #4d5c77;
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  font: inherit;
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: .55rem;
  place-items: center;
  padding: 0;
  display: inline-grid;
}

.project-task-modal__actions button:hover, .project-task-modal__small-action:hover {
  color: #3e4bdf;
  background: #f3f5ff;
}

.project-task-modal__actions button:focus-visible, .project-task-modal__small-action:focus-visible, .project-task-modal__text-action:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #4959e7;
}

.project-task-modal__menu {
  position: relative;
}

.project-task-modal__menu-list {
  z-index: 5;
  background: #fff;
  border: 1px solid #e2e7f1;
  border-radius: .6rem;
  width: 9rem;
  padding: .35rem;
  display: grid;
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  box-shadow: 0 10px 25px #17213d22;
}

.project-task-modal__menu-list button {
  text-align: start;
  white-space: nowrap;
  border: 0;
  justify-content: start;
  width: 100%;
  height: auto;
  min-height: 2.2rem;
  padding: .35rem .55rem;
}

.project-task-modal__menu-list button:last-child {
  color: #b5273c;
}

.project-task-modal__identity {
  text-align: start;
  padding: .5rem 0 .25rem;
}

.project-task-modal__identity small {
  color: #71809b;
  font-size: .75rem;
  display: block;
}

.project-task-modal__identity > div {
  align-items: center;
  gap: .85rem;
  min-width: 0;
  display: flex;
}

.project-task-modal__identity h2 {
  overflow-wrap: anywhere;
  min-width: 0;
  margin: .1rem 0;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.45;
}

.project-task-modal__status {
  background: var(--color-accent-subtle);
  max-width: 11rem;
  color: var(--color-accent-deep);
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  flex: none;
  padding: .35rem .7rem;
  font-size: .77rem;
  font-weight: 700;
  overflow: hidden;
}

.project-task-modal__identity p {
  color: #6d7890;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 48rem;
  margin: .15rem 0 0;
  font-size: .78rem;
  overflow: hidden;
}

.project-task-modal > .ui-modal__body {
  flex-direction: column;
  flex: auto;
  gap: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  overflow-y: auto;
}

.project-task-modal .task-detail-tabs {
  z-index: 2;
  direction: rtl;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e8ebf2;
  border-radius: 0;
  flex: none;
  justify-content: flex-start;
  gap: .4rem;
  margin: 0;
  padding: 0 1.3rem;
  display: flex;
  position: sticky;
  top: 0;
  overflow-x: auto;
}

.project-task-modal .task-detail-tabs button {
  min-height: 3rem;
  box-shadow: none;
  color: #596681;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  border-radius: 0;
  flex: none;
  padding: .55rem 1rem;
}

.project-task-modal .task-detail-tabs button[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-deep);
  box-shadow: none;
  background: none;
}

.project-task-modal__panel[hidden] {
  display: none;
}

.project-task-modal__panel {
  min-width: 0;
}

.project-task-modal__overview {
  direction: rtl;
  grid-template-columns: minmax(0, 1fr) 18rem;
  min-width: 0;
  display: grid;
}

.project-task-modal__primary {
  min-width: 0;
  padding: 0 1.55rem 1rem;
}

.project-task-modal__aside {
  color: #15213d;
  border-inline-start: 1px solid #e7eaf2;
  min-width: 0;
  padding: 1.2rem 1.3rem;
}

.project-task-modal__aside h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.project-task-modal__aside dl {
  gap: .65rem;
  margin: 0;
  display: grid;
}

.project-task-modal__aside dl > div {
  grid-template-columns: 5.8rem minmax(0, 1fr);
  align-items: start;
  gap: .4rem;
  min-width: 0;
  font-size: .78rem;
  display: grid;
}

.project-task-modal__aside dt {
  color: #63708b;
}

.project-task-modal__aside dd {
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
  font-weight: 600;
}

.project-task-modal__status-select {
  color: #15213d;
  width: 100%;
  min-width: 0;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dfe4ee;
  border-radius: .5rem;
  padding: .35rem .45rem;
}

.project-task-modal__status-select:disabled {
  opacity: .6;
  cursor: wait;
}

.project-task-modal__status-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.project-task-modal__priority.is-low {
  color: #25845a;
}

.project-task-modal__priority.is-medium {
  color: #aa731d;
}

.project-task-modal__priority.is-high {
  color: #b85f18;
}

.project-task-modal__priority.is-urgent {
  color: #c2344c;
}

.project-task-modal__assignee {
  align-items: center;
  gap: .3rem;
  display: inline-flex;
}

.project-task-modal__assignee b {
  color: #66514a;
  background: #e8e2df;
  border-radius: 50%;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  font-size: .65rem;
  display: inline-grid;
}

.project-task-modal__virtual-assignment {
  gap: .55rem;
  min-width: 0;
  font-size: .78rem;
  display: grid;
}

.project-task-modal__virtual-assignment small {
  color: #66738d;
  line-height: 1.6;
}

.project-task-modal__virtual-assignment a {
  color: #4355d9;
  text-decoration: none;
}

.project-task-modal__tags {
  flex-wrap: wrap;
  gap: .3rem;
  display: flex;
}

.project-task-modal__tags span {
  color: #4552b7;
  background: #f8f9fe;
  border: 1px solid;
  border-radius: 999px;
  padding: .2rem .45rem;
  font-weight: 500;
}

.project-task-modal__timer {
  border-block: 1px solid #e8ebf2;
  gap: .6rem;
  margin-top: 1.1rem;
  padding: 1rem 0;
  display: grid;
}

.project-task-modal__timer > span {
  color: #66738d;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  display: flex;
}

.project-task-modal__timer strong {
  letter-spacing: .08em;
  justify-self: end;
  font-size: 1.35rem;
}

.project-task-modal__timer .ui-btn {
  color: #4254d9;
  background: #eef0ff;
  border-radius: 999px;
  justify-self: end;
}

.project-task-modal__dates {
  padding-top: 1rem;
}

.project-task-modal__sessions {
  margin-top: 1rem;
  font-size: .75rem;
}

.project-task-modal__section {
  border-bottom: 1px solid #e8ebf2;
  min-width: 0;
  padding: 1rem 0;
}

.project-task-modal__section:last-child {
  border-bottom: 0;
}

.project-task-modal__section-heading {
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-bottom: .6rem;
  display: flex;
}

.project-task-modal__section-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.project-task-modal__section-heading h3 span {
  color: #77839c;
  font-size: .75rem;
  font-weight: 500;
}

.project-task-modal__description {
  color: #53627e;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: .3rem 0;
  line-height: 1.9;
}

.project-task-modal__empty {
  color: #8290a9;
  margin: .6rem 0;
  font-size: .82rem;
}

.project-task-modal__checklist-summary {
  color: #68758e;
  font-size: .72rem;
}

.project-task-modal__section .checklist-section {
  box-shadow: none;
  background: none;
  border: 0;
  padding: 0;
}

.project-task-modal__section .checklist-head {
  font-size: 1rem;
}

.project-task-modal__section .checklist-list {
  margin-top: .7rem;
}

.project-task-modal__section .checklist-list li {
  background: none;
  border: 0;
  border-radius: .4rem;
}

.project-task-modal__section .checklist-list li.is-done .checklist-item span {
  color: #26334f;
  text-decoration: none;
}

.project-task-modal__section .checklist-item span {
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.7;
  overflow: visible;
}

.project-task-modal__section .checklist-progress {
  width: min(15rem, 100%);
  margin-inline-end: auto;
}

.project-task-modal__section .checklist-item-actions {
  opacity: 0;
}

.project-task-modal__section .checklist-list li:hover .checklist-item-actions, .project-task-modal__section .checklist-list li:focus-within .checklist-item-actions {
  opacity: 1;
}

@media (hover: none) {
  .project-task-modal__section .checklist-item-actions {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .project-task-modal__section .checklist-list li {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .project-task-modal__section .checklist-item {
    flex-basis: 100%;
  }

  .project-task-modal__section .checklist-item-actions {
    justify-content: flex-end;
    width: 100%;
  }
}

.project-task-modal__section .checklist-head .ui-btn {
  color: #4555da;
  border-radius: .5rem;
  font-size: .72rem;
}

.project-task-modal__file-input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.project-task-modal__files {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.project-task-modal__files li {
  border: 1px solid #e4e8f1;
  border-radius: .6rem;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .55rem;
  display: flex;
}

.project-task-modal__file-icon {
  color: #4355dc;
  background: #eef0ff;
  border-radius: .4rem;
  flex: 0 0 2.3rem;
  place-items: center;
  height: 2.3rem;
  display: grid;
  position: relative;
  overflow: hidden;
}

.project-task-modal__file-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.project-task-modal__file-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .76rem;
  overflow: hidden;
}

.project-task-modal__file-name small {
  color: #7b89a3;
  margin-top: .15rem;
  display: block;
}

.project-task-modal__files a, .project-task-modal__files button {
  color: #52617f;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .3rem;
  flex: none;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  text-decoration: none;
  display: grid;
}

.project-task-modal__text-action {
  color: #4255db;
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  padding: .2rem 0;
  font-size: .78rem;
}

.project-task-modal__latest {
  min-width: 0;
  padding: .4rem 0;
}

.project-task-modal__latest > div {
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  font-size: .77rem;
  display: flex;
}

.project-task-modal__latest time {
  color: #7a87a1;
}

.project-task-modal__latest span {
  color: #18805c;
  background: #eaf9f1;
  border-radius: 999px;
  padding: .2rem .45rem;
}

.project-task-modal__latest p {
  color: #4e5b76;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: .5rem 0 0;
  line-height: 1.75;
}

.project-task-modal__footer {
  z-index: 2;
  background: #fff;
  border-top: 1px solid #e8ebf2;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: .6rem;
  margin-top: auto;
  padding: .75rem 1.3rem;
  display: flex;
  position: sticky;
  bottom: 0;
}

.project-task-modal__footer > div {
  gap: .55rem;
  display: flex;
}

.project-task-modal > .ui-modal__body > .task-reports, .project-task-modal > .ui-modal__body > .discussion-section, .project-task-modal > .ui-modal__body > :not(.project-task-modal__panel):not(.task-detail-tabs):not(.project-task-modal__footer):not(.codex-task-chat) {
  margin: 1rem 1.4rem;
}

.project-task-modal .task-reports__header h3 {
  font-size: 1.1rem;
}

.project-task-modal .task-report {
  box-shadow: none;
  border-radius: .7rem;
  padding: 1rem;
}

.project-task-modal .task-report-body {
  overflow-wrap: anywhere;
}

.project-task-modal .task-reports__filters {
  background: #fafbff;
  border: 1px solid #e7eaf2;
  border-radius: .7rem;
  padding: .85rem;
}

.project-task-modal .task-reports__list {
  gap: .7rem;
}

.project-task-modal .task-report__meta {
  gap: .55rem;
}

.project-task-modal .task-report__actions {
  gap: .5rem;
}

.project-task-modal .activity-list {
  gap: 0;
  max-height: none;
  overflow: visible;
}

.project-task-modal .activity-list li {
  border-bottom: 1px solid #ebedf4;
  padding: .8rem 0;
  position: relative;
}

.project-task-modal .activity-content {
  overflow-wrap: anywhere;
  min-width: 0;
}

.project-task-modal .codex-task-panel {
  background: #fff;
  border: 1px solid #e7eaf2;
  border-radius: .75rem;
  min-width: 0;
  padding: 1rem;
}

.project-task-modal .codex-task-panel__jobs li {
  background: #fbfcff;
  border: 1px solid #e7eaf2;
  border-radius: .6rem;
  padding: .8rem;
}

.project-task-modal .codex-task-panel a {
  overflow-wrap: anywhere;
}

.ui-modal.project-task-modal:has(.codex-task-chat) {
  width: min(1180px, 100vw - 2rem);
  height: min(94dvh, 980px);
}

.ui-modal.project-task-modal.is-expanded:has(.codex-task-chat) {
  width: min(1400px, 100vw - 2rem);
  height: calc(100dvh - 2rem);
}

.project-task-modal:has(.codex-task-chat) > .ui-modal__body {
  overflow: hidden;
}

.project-task-modal > .ui-modal__body > .codex-task-chat {
  margin: 0;
}

.project-task-modal .codex-task-chat {
  background: #fff;
  flex-direction: column;
  flex: auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.project-task-modal .codex-task-chat__header {
  background: #fbfcff;
  border-bottom: 1px solid #e9edf5;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1.5rem;
  display: flex;
}

.project-task-modal .codex-task-chat__heading, .project-task-modal .codex-task-chat__header-controls {
  align-items: center;
  gap: .8rem;
  min-width: 0;
  display: flex;
}

.project-task-modal .codex-task-chat__back {
  color: #52617b;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce3f0;
  border-radius: .6rem;
  flex: none;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  display: inline-grid;
}

.project-task-modal .codex-task-chat__back:hover {
  color: #3347be;
  background: #eef1ff;
}

.project-task-modal .codex-task-chat__back:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #4959e7;
}

.project-task-modal .codex-task-chat__mark, .project-task-modal .codex-task-chat__avatar {
  color: #4354c8;
  background: #e9edff;
  border-radius: .75rem;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.25rem;
  display: grid;
}

.project-task-modal .codex-task-chat__heading h3, .project-task-modal .codex-task-chat__activity h4 {
  color: #17213d;
  margin: 0;
  font-size: 1rem;
}

.project-task-modal .codex-task-chat__heading p, .project-task-modal .codex-task-chat__activity-header p {
  color: #75819a;
  margin: .2rem 0 0;
  font-size: .76rem;
}

.project-task-modal .codex-task-chat__running {
  color: #177447;
  background: #ecf9f1;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: .45rem;
  padding: .4rem .65rem;
  font-size: .76rem;
  font-weight: 700;
  display: inline-flex;
}

.project-task-modal .codex-task-chat__running i {
  background: #20a35c;
  border-radius: 50%;
  width: .45rem;
  height: .45rem;
}

.project-task-modal .codex-task-chat__session, .project-task-modal .codex-task-chat__activity-header label {
  color: #68758d;
  gap: .25rem;
  min-width: 13rem;
  font-size: .72rem;
  font-weight: 700;
  display: grid;
}

.project-task-modal .codex-task-chat select {
  color: #273451;
  width: 100%;
  min-height: 2.35rem;
  font: inherit;
  background: #fff;
  border: 1px solid #dce3f0;
  border-radius: .55rem;
  padding: .35rem .6rem;
  font-size: .8rem;
}

.project-task-modal .codex-task-chat__tabs {
  border-bottom: 1px solid #e9edf5;
  flex: none;
  gap: 1.3rem;
  padding: 0 1.5rem;
  display: flex;
}

.project-task-modal .codex-task-chat__tabs button {
  color: #63708b;
  min-height: 2.9rem;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid #0000;
  align-items: center;
  gap: .45rem;
  padding: .5rem .15rem;
  font-size: .82rem;
  font-weight: 700;
  display: inline-flex;
}

.project-task-modal .codex-task-chat__tabs button[aria-selected="true"] {
  color: #3347be;
  border-bottom-color: #465bd8;
}

.project-task-modal .codex-task-chat__tabs span {
  color: #6a7891;
  background: #eef1f8;
  border-radius: 999px;
  padding: .12rem .4rem;
  font-size: .7rem;
}

.project-task-modal .codex-task-chat__error {
  flex: none;
  padding: .4rem 1.5rem;
}

.project-task-modal .codex-task-chat__conversation, .project-task-modal .codex-task-chat__activity {
  flex-direction: column;
  flex: auto;
  min-height: 0;
  display: flex;
  position: relative;
}

.project-task-modal .codex-task-chat__messages, .project-task-modal .codex-task-chat__events {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  flex: auto;
  min-height: 0;
  overflow-y: auto;
}

.project-task-modal .codex-task-chat__messages {
  background: #fff;
  flex-direction: column;
  gap: 1.35rem;
  padding: 1.5rem clamp(1rem, 5vw, 3rem);
  display: flex;
}

.project-task-modal .codex-task-chat__message {
  align-items: flex-start;
  gap: .8rem;
  min-width: 0;
  max-width: min(100%, 54rem);
  display: flex;
}

.project-task-modal .codex-task-chat__message--user {
  align-self: flex-start;
}

.project-task-modal .codex-task-chat__message--user .codex-task-chat__avatar {
  color: #2761ad;
  background: #e7f0ff;
  font-size: .8rem;
  font-weight: 800;
}

.project-task-modal .codex-task-chat__bubble {
  background: #f8faff;
  border: 1px solid #e7ebf4;
  border-radius: .3rem .95rem .95rem;
  min-width: 0;
  padding: .9rem 1.1rem;
  box-shadow: 0 2px 8px #1b2b4908;
}

.project-task-modal .codex-task-chat__message--user .codex-task-chat__bubble {
  background: #f0f5ff;
  border-color: #dce8ff;
}

.project-task-modal .codex-task-chat__message-meta {
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .55rem;
  display: flex;
}

.project-task-modal .codex-task-chat__message-meta strong {
  color: #20304f;
  font-size: .84rem;
}

.project-task-modal .codex-task-chat__message-meta time {
  color: #8792a7;
  font-size: .72rem;
}

.project-task-modal .codex-task-chat__markdown {
  color: #24314c;
  overflow-wrap: anywhere;
  font-size: .88rem;
  line-height: 1.85;
}

.project-task-modal .codex-task-chat__markdown :first-child {
  margin-top: 0;
}

.project-task-modal .codex-task-chat__markdown :last-child {
  margin-bottom: 0;
}

.project-task-modal .codex-task-chat__markdown p, .project-task-modal .codex-task-chat__markdown ul, .project-task-modal .codex-task-chat__markdown ol, .project-task-modal .codex-task-chat__markdown blockquote {
  margin: .55rem 0;
}

.project-task-modal .codex-task-chat__markdown ul, .project-task-modal .codex-task-chat__markdown ol {
  padding-inline-start: 1.5rem;
}

.project-task-modal .codex-task-chat__markdown li + li {
  margin-top: .25rem;
}

.project-task-modal .codex-task-chat__markdown h1, .project-task-modal .codex-task-chat__markdown h2, .project-task-modal .codex-task-chat__markdown h3 {
  margin: 1.1rem 0 .5rem;
  line-height: 1.5;
}

.project-task-modal .codex-task-chat__markdown h1 {
  font-size: 1.22rem;
}

.project-task-modal .codex-task-chat__markdown h2 {
  font-size: 1.08rem;
}

.project-task-modal .codex-task-chat__markdown h3 {
  font-size: .98rem;
}

.project-task-modal .codex-task-chat__markdown pre {
  color: #e8edf9;
  text-align: left;
  direction: ltr;
  background: #18243b;
  border-radius: .65rem;
  max-width: 100%;
  margin: .75rem 0;
  padding: .9rem 1rem;
  font-size: .78rem;
  line-height: 1.6;
  overflow: auto;
}

.project-task-modal .codex-task-chat__markdown :not(pre) > code {
  direction: ltr;
  background: #e6ebf6;
  border-radius: .3rem;
  padding: .12rem .3rem;
  font-size: .85em;
}

.project-task-modal .codex-task-chat__markdown blockquote {
  color: #52617b;
  border-inline-start: 3px solid #9babdb;
  padding-inline-start: .9rem;
}

.project-task-modal .codex-task-chat__markdown table {
  border-collapse: collapse;
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.project-task-modal .codex-task-chat__markdown th, .project-task-modal .codex-task-chat__markdown td {
  border: 1px solid #dce3ef;
  padding: .4rem .6rem;
}

.project-task-modal .codex-task-chat__markdown a {
  color: #3354bf;
  text-decoration: underline;
}

.project-task-modal .codex-task-chat__markdown img {
  max-width: 100%;
  height: auto;
}

.project-task-modal .codex-task-chat__composer {
  background: #fff;
  border-top: 1px solid #e9edf5;
  flex: none;
  padding: .75rem 1.5rem 1rem;
}

.project-task-modal .codex-task-chat__composer .ui-field {
  gap: .4rem;
}

.project-task-modal .codex-task-chat__composer .ui-textarea {
  resize: vertical;
  background: #fbfcff;
  border-radius: .7rem;
  min-height: 5.4rem;
  max-height: 11rem;
  line-height: 1.7;
}

.project-task-modal .codex-task-chat__composer-footer {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: .55rem;
  display: flex;
}

.project-task-modal .codex-task-chat__composer-footer small {
  color: #8a96aa;
  font-size: .72rem;
}

.project-task-modal .codex-task-chat__hint {
  color: #567294;
  margin: 0 0 .5rem;
  font-size: .75rem;
}

.project-task-modal .codex-task-chat__jump {
  inset-inline-end: 1.5rem;
  color: #3449b9;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d7e0f2;
  border-radius: 999px;
  padding: .45rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  position: absolute;
  bottom: 11.6rem;
  box-shadow: 0 5px 18px #1b2b4922;
}

.project-task-modal .codex-task-chat__empty {
  color: #66758f;
  text-align: center;
  flex: auto;
  align-content: center;
  place-items: center;
  gap: .55rem;
  min-height: 10rem;
  display: grid;
}

.project-task-modal .codex-task-chat__empty > span {
  color: #5266d8;
  font-size: 2rem;
}

.project-task-modal .codex-task-chat__empty strong {
  color: #2c3a59;
}

.project-task-modal .codex-task-chat__empty p {
  margin: 0;
  font-size: .8rem;
}

.project-task-modal .codex-task-chat__activity-header {
  border-bottom: 1px solid #edf0f6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  display: flex;
}

.project-task-modal .codex-task-chat__events {
  background: #f9fbff;
  padding: 1rem 1.5rem;
}

.project-task-modal .codex-task-chat__event {
  background: #fff;
  border: 1px solid #e3e8f2;
  border-radius: .65rem;
  margin-bottom: .6rem;
}

.project-task-modal .codex-task-chat__event summary {
  cursor: pointer;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  list-style: none;
  display: flex;
}

.project-task-modal .codex-task-chat__event summary::-webkit-details-marker {
  display: none;
}

.project-task-modal .codex-task-chat__event-dot {
  background: #5b73d9;
  border-radius: 50%;
  flex: none;
  width: .45rem;
  height: .45rem;
}

.project-task-modal .codex-task-chat__event-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #263653;
  flex: auto;
  min-width: 0;
  font-size: .8rem;
  font-weight: 700;
  overflow: hidden;
}

.project-task-modal .codex-task-chat__event time {
  color: #8995a9;
  flex: none;
  font-size: .7rem;
}

.project-task-modal .codex-task-chat__event pre {
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  border-top: 1px solid #e9edf5;
  max-height: 26rem;
  margin: 0;
  padding: .85rem;
  font-size: .75rem;
  overflow: auto;
}

.project-task-modal .codex-task-chat__event-body {
  border-top: 1px solid #e9edf5;
  gap: .9rem;
  padding: 1rem;
  display: grid;
}

.project-task-modal .codex-task-chat__event-body > .codex-task-chat__markdown {
  min-width: 0;
}

.project-task-modal .codex-task-chat__raw {
  border: 1px solid #e9edf5;
  border-radius: .5rem;
  min-width: 0;
}

.project-task-modal .codex-task-chat__raw > summary {
  color: #52617b;
  font-size: .75rem;
  font-weight: 700;
}

.project-task-modal .codex-task-chat__raw pre {
  border-top: 1px solid #e9edf5;
  max-height: 26rem;
}

@media (max-width: 767px) {
  .ui-modal.project-task-modal:has(.codex-task-chat) {
    width: 100%;
    height: 100dvh;
  }

  .ui-modal.project-task-modal.is-expanded:has(.codex-task-chat) {
    width: 100%;
    height: 100dvh;
  }

  .project-task-modal .codex-task-chat__header, .project-task-modal .codex-task-chat__activity-header {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding: .7rem 1rem;
  }

  .project-task-modal .codex-task-chat__header-controls {
    justify-content: space-between;
  }

  .project-task-modal .codex-task-chat__session {
    min-width: 0;
  }

  .project-task-modal .codex-task-chat__tabs {
    padding: 0 1rem;
  }

  .project-task-modal .codex-task-chat__messages {
    padding: 1rem;
  }

  .project-task-modal .codex-task-chat__composer {
    padding: .6rem 1rem calc(.65rem + env(safe-area-inset-bottom, 0px));
  }

  .project-task-modal .codex-task-chat__events {
    padding: .75rem 1rem;
  }
}

:is(body:has(.project-task-modal) .assistant-widget, body:has(.project-task-modal) .assistant-panel) {
  display: none;
}

@media (max-width: 900px) {
  .project-task-modal__overview {
    grid-template-columns: 1fr;
  }

  .project-task-modal__primary {
    padding: 0 1rem;
  }

  .project-task-modal__aside {
    border-inline-start: 0;
    border-top: 1px solid #e8ebf2;
    padding: 1rem;
  }

  .project-task-modal__aside dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }

  .project-task-modal__aside dl > div {
    display: block;
  }

  .project-task-modal__aside dd {
    margin-top: .2rem;
  }
}

@media (max-width: 767px) {
  .ui-modal.project-task-modal, .ui-modal.project-task-modal.is-expanded {
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    padding: 0;
  }

  .project-task-modal__masthead {
    padding: .8rem 1rem .5rem;
  }

  .project-task-modal__identity > div {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
  }

  .project-task-modal__identity h2 {
    font-size: 1.15rem;
  }

  .project-task-modal .task-detail-tabs {
    padding: 0 .6rem;
  }

  .project-task-modal .task-detail-tabs button {
    min-height: 2.85rem;
    padding: .5rem .7rem;
  }

  .project-task-modal__files {
    grid-template-columns: 1fr;
  }

  .project-task-modal__footer {
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
  }

  .project-task-modal__footer .ui-btn {
    min-width: 0;
    padding-inline: .55rem;
    font-size: .76rem;
  }
}

@media (min-width: 768px) {
  .project-workspace-header {
    direction: rtl;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 4.4rem;
    padding-block: .25rem .4rem;
  }

  .project-workspace-header__identity {
    display: none;
  }

  .project-task-views__tabs {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .project-workspace-header__members {
    grid-area: 1 / 2;
  }

  .project-workspace-header__create {
    grid-area: 1 / 3;
    justify-self: end;
  }
}

.project-task-modal__create-title {
  text-align: start;
  gap: .1rem;
  display: grid;
}

.project-task-modal__create-title h2 {
  color: #17213d;
  margin: 0;
  font-size: 1.35rem;
}

.project-task-modal__create-title span {
  color: #71809b;
  font-size: .75rem;
}

.project-task-modal__form {
  padding: 0;
}

.project-task-modal__form > fieldset {
  border: 0;
  margin: 0;
}

.project-task-modal__form-fields {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .85fr);
  min-width: 0;
  padding: 0;
  display: grid;
}

.project-task-modal__main-fields, .project-task-modal__settings {
  align-content: start;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  display: grid;
}

.project-task-modal__settings {
  background: #fcfdff;
  border-inline-start: 1px solid #e7eaf2;
}

.project-task-modal__settings h3 {
  margin: 0;
  font-size: 1rem;
}

.project-task-modal__field {
  color: #26334f;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  display: grid;
}

.project-task-modal__field > span, .task-assignee-picker legend span {
  color: #8994a8;
  font-size: .7rem;
  font-weight: 500;
}

.project-task-modal__field > b {
  color: #d62f4b;
}

.project-task-modal__field input, .project-task-modal__field textarea {
  box-sizing: border-box;
  color: #17213d;
  width: 100%;
  font: inherit;
  background: #fff;
  border: 1px solid #dfe4ee;
  border-radius: .65rem;
  padding: .75rem .85rem;
  font-weight: 400;
}

.project-task-modal__field textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.8;
}

.project-task-modal__field input:focus, .project-task-modal__field textarea:focus {
  outline-offset: 1px;
  border-color: #0000;
  outline: 2px solid #5365ee;
}

.project-task-modal__field input[aria-invalid="true"] {
  border-color: #d62f4b;
}

.project-task-modal__field small {
  color: #77849d;
  font-weight: 400;
}

.project-task-modal__field-error {
  color: #c42843 !important;
}

.project-task-modal__priority, .task-assignee-picker, .project-task-modal__labels {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.project-task-modal__priority legend, .task-assignee-picker legend, .project-task-modal__labels legend {
  color: #26334f;
  margin-bottom: .45rem;
  font-size: .8rem;
  font-weight: 700;
}

.project-task-modal__priority {
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  display: grid;
}

.project-task-modal__priority legend {
  grid-column: 1 / -1;
}

.project-task-modal__priority label {
  cursor: pointer;
}

.project-task-modal__priority input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.project-task-modal__priority label span {
  color: #52617e;
  background: #f5f7fa;
  border: 1px solid #e1e6ef;
  border-radius: .55rem;
  place-items: center;
  min-height: 2.65rem;
  font-size: .76rem;
  display: grid;
}

.project-task-modal__priority input:checked + span {
  color: #3347d7;
  background: #eef0ff;
  border-color: #6474ef;
  box-shadow: inset 0 0 0 1px #6474ef;
}

.project-task-modal__dates-grid, .project-task-modal__estimate {
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  display: grid;
}

.project-task-modal__okr {
  border-top: 1px solid #e5e9f1;
  padding-top: .85rem;
}

.project-task-modal__okr > label {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.project-task-modal__okr > label span {
  gap: .15rem;
  display: grid;
}

.project-task-modal__okr small {
  color: #7d89a0;
  font-weight: 400;
}

.project-task-modal__okr input[role="switch"] {
  accent-color: #4d5ee5;
  width: 2.5rem;
  height: 1.35rem;
}

.project-task-modal__okr select {
  margin-top: .7rem;
}

.project-task-modal__labels {
  flex-wrap: wrap;
  gap: .45rem .75rem;
  display: flex;
}

.project-task-modal__labels legend {
  width: 100%;
}

.project-task-modal__labels label {
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  display: inline-flex;
}

.task-assignee-picker__selected {
  flex-wrap: wrap;
  gap: .4rem;
  display: flex;
}

.task-assignee-picker__chip {
  background: #f0f2f8;
  border-radius: 999px;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
  padding: .25rem .4rem;
  font-size: .72rem;
  display: inline-flex;
}

.task-assignee-picker__chip.is-virtual {
  color: #4b3bbb;
  background: #f0edff;
}

.task-assignee-picker__chip b, .task-assignee-picker__menu button b {
  color: #3d4cc8;
  background: #dde2fa;
  border-radius: 50%;
  flex: 0 0 1.5rem;
  place-items: center;
  height: 1.5rem;
  display: grid;
}

.task-assignee-picker__chip span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.task-assignee-picker__chip button {
  color: #64708a;
  cursor: pointer;
  background: none;
  border: 0;
}

.task-assignee-picker__add {
  color: #4255d9;
  cursor: pointer;
  background: #fff;
  border: 1px dashed #aeb8ce;
  border-radius: 999px;
  min-height: 2rem;
  padding: .3rem .65rem;
}

.task-assignee-picker__menu {
  z-index: 4;
  background: #fff;
  border: 1px solid #dfe4ee;
  border-radius: .65rem;
  gap: .35rem;
  margin-top: .45rem;
  padding: .45rem;
  display: grid;
  position: relative;
  box-shadow: 0 10px 25px #17213d18;
}

.task-assignee-picker__menu input {
  min-height: 2.5rem;
  font: inherit;
  border: 1px solid #dfe4ee;
  border-radius: .5rem;
  padding: .5rem .65rem;
}

.task-assignee-picker__menu [role="listbox"] {
  max-height: 10rem;
  display: grid;
  overflow: auto;
}

.task-assignee-picker__menu button {
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .45rem;
  align-items: center;
  gap: .5rem;
  padding: .45rem;
  display: flex;
}

.task-assignee-picker__menu button:hover {
  background: #f2f4ff;
}

.task-assignee-picker__menu [role="listbox"] > small {
  color: #73809a;
  padding: .3rem .45rem;
  font-size: .68rem;
}

.task-assignee-picker__virtual-action {
  color: #64708a;
  margin-top: .6rem;
  line-height: 1.6;
  display: block;
}

.project-task-modal .files-field {
  gap: .55rem;
  display: grid;
}

.project-task-modal .file-dropzone {
  cursor: pointer;
  text-align: center;
  background: #fafbff;
  border: 1px dashed #a9b8dd;
  border-radius: .75rem;
  place-items: center;
  min-height: 7.5rem;
  padding: 1rem;
  display: grid;
}

.project-task-modal .file-dropzone.is-dragover {
  background: #f0f2ff;
  border-color: #4c60e8;
}

.project-task-modal .dropzone-title, .project-task-modal .dropzone-hint, .project-task-modal .file-empty {
  margin: .15rem;
}

.project-task-modal .dropzone-title {
  color: #354bd2;
  font-weight: 700;
}

.project-task-modal .dropzone-hint, .project-task-modal .file-empty {
  color: #7b88a1;
  font-size: .72rem;
}

.project-task-modal .file-list {
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.project-task-modal .file-list li {
  border: 1px solid #e3e7ef;
  border-radius: .6rem;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .55rem .7rem;
  display: flex;
}

.project-task-modal .file-name, .project-task-modal .file-list a {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.project-task-modal .file-badge-new {
  color: #21815e;
  font-size: .68rem;
}

.project-task-modal .file-size {
  color: #7d89a0;
  font-size: .7rem;
}

.project-task-modal__footer small {
  color: #7b87a0;
  align-self: center;
}

.project-task-modal__footer kbd {
  background: #f7f8fb;
  border: 1px solid #dce1eb;
  border-radius: .25rem;
  padding: .15rem .3rem;
  font-family: inherit;
}

@media (max-width: 900px) {
  .project-task-modal__form-fields {
    grid-template-columns: 1fr;
  }

  .project-task-modal__settings {
    border-inline-start: 0;
    border-top: 1px solid #e7eaf2;
  }
}

@media (max-width: 767px) {
  .project-task-modal__main-fields, .project-task-modal__settings {
    padding: 1rem;
  }

  .project-task-modal__priority {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-task-modal__dates-grid, .project-task-modal__estimate {
    grid-template-columns: 1fr;
  }

  .project-task-modal__field input, .project-task-modal__field textarea, .task-assignee-picker__add {
    min-height: 2.75rem;
  }

  .project-task-modal__footer {
    flex-wrap: wrap;
  }

  .project-task-modal__footer > div {
    width: 100%;
  }

  .project-task-modal__footer > div .ui-btn {
    flex: 1;
    min-height: 2.75rem;
  }

  .project-task-modal__footer small {
    display: none;
  }

  .project-workspace-header {
    direction: rtl;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .project-workspace-header__identity {
    text-align: right;
    grid-area: 1 / 1;
  }

  .project-workspace-header__create {
    grid-area: 1 / 2;
  }

  .project-task-views__tabs {
    grid-area: 2 / 1 / auto / -1;
    min-width: 0;
  }

  .project-workspace-header__members {
    grid-area: 3 / 1 / auto / -1;
  }
}

/* [project]/libs/modules/projects/src/ProjectDashboardPanel.css [app-client] (css) */
.project-insights {
  --insights-ink: #202a3b;
  --insights-muted: #697589;
  --insights-line: #e4e9f0;
  color: var(--insights-ink);
  gap: 1.1rem;
  min-width: 0;
  display: grid;
}

.project-insights__header {
  border: 1px solid var(--insights-line);
  background: #fff;
  border-right: 4px solid #6253c4;
  border-radius: 18px;
  justify-content: space-between;
  align-items: end;
  gap: 1.25rem;
  padding: 1.4rem 1.6rem;
  display: flex;
}

.project-insights__header span, .project-insights__panel-head span {
  color: #6253c4;
  font-size: .76rem;
  font-weight: 700;
}

.project-insights__header h2 {
  margin: .25rem 0 .35rem;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.35;
}

.project-insights__header p {
  color: var(--insights-muted);
  margin: 0;
  font-size: .87rem;
}

.project-insights__header a {
  color: #4d45a5;
  flex: none;
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
}

.project-insights__header a:hover, .project-insights__attention-list a:hover strong {
  text-decoration: underline;
}

.project-insights__metrics {
  grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: .7rem;
  display: grid;
}

.project-insights__metric, .project-insights__panel {
  border: 1px solid var(--insights-line);
  background: #fff;
  border-radius: 16px;
  min-width: 0;
}

.project-insights__metric {
  border-top: 3px solid var(--metric-accent, #a0a9b8);
  align-content: space-between;
  gap: .35rem;
  min-height: 7.2rem;
  padding: 1rem 1.15rem;
  display: grid;
}

.project-insights__metric--success {
  --metric-accent: #4a9d80;
}

.project-insights__metric--danger {
  --metric-accent: #d06b65;
}

.project-insights__metric--violet {
  --metric-accent: #7563d5;
}

.project-insights__metric--amber {
  --metric-accent: #d0a052;
}

.project-insights__metric--blue {
  --metric-accent: #6595bd;
}

.project-insights__metric--progress {
  --metric-accent: #6253c4;
  background: linear-gradient(145deg, #fff 20%, #f5f3ff);
}

.project-insights__metric-heading {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.project-insights__metric-heading > span {
  color: var(--insights-muted);
  font-size: .8rem;
  font-weight: 600;
}

.project-insights__metric-heading > strong {
  color: #5042aa;
}

.project-insights__metric-progress {
  background: #e4e0f5;
  border-radius: 999px;
  height: .55rem;
  overflow: hidden;
}

.project-insights__metric-progress > span {
  border-radius: inherit;
  background: linear-gradient(90deg, #7566d0, #4f42aa);
  height: 100%;
  transition: width .18s;
  display: block;
}

.project-insights__metric > span, .project-insights__metric small, .project-insights__panel-head small, .project-insights__muted {
  color: var(--insights-muted);
}

.project-insights__metric > span {
  font-size: .8rem;
  font-weight: 600;
}

.project-insights__metric strong {
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem;
  line-height: 1;
}

.project-insights__metric small {
  font-size: .72rem;
}

.project-insights__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
  display: grid;
}

.project-insights__trend {
  margin-bottom: 18px;
}

.project-insights__trend-ranges {
  direction: rtl;
  gap: 6px;
  display: flex;
}

.project-insights__trend-ranges button {
  color: #687386;
  cursor: pointer;
  font: inherit;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}

.project-insights__trend-ranges button.is-active {
  color: #5848b7;
  background: #f0edff;
  border-color: #7563d5;
  font-weight: 700;
}

.project-insights__trend-chart {
  direction: ltr;
  padding-top: 14px;
}

.project-insights__trend-chart svg {
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}

.project-insights__trend-grid {
  stroke: #edf0f3;
  stroke-width: 1px;
}

.project-insights__trend-line {
  fill: none;
  stroke: #6856d9;
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-insights__trend-chart circle {
  fill: #fff;
  stroke: #6856d9;
  stroke-width: 3px;
  outline: none;
}

.project-insights__trend-chart circle:hover, .project-insights__trend-chart circle:focus {
  fill: #6856d9;
  r: 6px;
}

.project-insights__trend-axis {
  color: #8993a4;
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.project-insights__trend-chart > p {
  color: #8993a4;
  direction: rtl;
  margin: 8px 0 0;
  font-size: 11px;
}

.project-insights__trend-empty {
  text-align: center;
  color: #687386;
  border: 1px dashed #dfe3e8;
  border-radius: 12px;
  padding: 28px;
}

.project-insights__trend-empty strong {
  color: #354052;
  margin-bottom: 6px;
  display: block;
}

.project-insights__trend-empty p {
  margin: 0;
  font-size: 13px;
}

.project-insights__panel {
  padding: 1.3rem 1.4rem;
}

.project-insights__panel-head {
  justify-content: space-between;
  align-items: start;
  gap: .7rem;
  margin-bottom: 1.2rem;
  display: flex;
}

.project-insights__panel-head h3 {
  margin: .2rem 0 0;
  font-size: 1rem;
}

.project-insights__panel-head small {
  white-space: nowrap;
  font-size: .75rem;
}

.project-insights__muted {
  margin: .8rem 0 0;
  font-size: .79rem;
  line-height: 1.8;
}

.project-insights__progress-body {
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: center;
  gap: 1.35rem;
  display: grid;
}

.project-insights__ring {
  aspect-ratio: 1;
  border-radius: 50%;
  place-items: center;
  width: 9rem;
  display: grid;
}

.project-insights__ring > div {
  text-align: center;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  align-content: center;
  width: 7.4rem;
  display: grid;
}

.project-insights__ring strong {
  font-size: 1.55rem;
}

.project-insights__ring span {
  color: var(--insights-muted);
  font-size: .75rem;
}

.project-insights__status-visualization {
  gap: .85rem;
  display: grid;
}

.project-insights__stacked-bar {
  direction: rtl;
  background: #edf0f4;
  border-radius: 999px;
  width: 100%;
  height: 1.15rem;
  display: flex;
  overflow: hidden;
}

.project-insights__stacked-bar a {
  border-inline-end: 2px solid #fff;
  min-width: 3px;
  height: 100%;
  transition: filter .16s, transform .16s;
}

.project-insights__stacked-bar a:hover, .project-insights__stacked-bar a:focus-visible {
  filter: brightness(.88);
  outline: none;
  transform: scaleY(1.18);
}

.project-insights__status-legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .8rem;
  display: grid;
}

.project-insights__status-legend a {
  min-width: 0;
  color: inherit;
  border-radius: 8px;
  grid-template-columns: .6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  padding: .35rem .45rem;
  font-size: .73rem;
  text-decoration: none;
  display: grid;
}

.project-insights__status-legend a:hover, .project-insights__status-legend a:focus-visible {
  background: #f3f1fb;
  outline: 2px solid #d8d2f3;
}

.project-insights__status-legend a.is-empty {
  opacity: .46;
}

.project-insights__status-legend i {
  border-radius: 50%;
  width: .55rem;
  height: .55rem;
}

.project-insights__status-legend span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.project-insights__status-legend strong, .project-insights__status-total strong {
  font-variant-numeric: tabular-nums;
}

.project-insights__status-total {
  color: var(--insights-muted);
  margin: 0;
  font-size: .7rem;
}

.project-insights__day-chart {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: .5rem;
  height: 10rem;
  padding-top: .4rem;
  display: grid;
}

.project-insights__day {
  text-align: center;
  grid-template-rows: 1rem 1fr 1rem;
  align-items: end;
  gap: .3rem;
  height: 100%;
  display: grid;
}

.project-insights__day b {
  font-size: .7rem;
  font-weight: 600;
}

.project-insights__day > div {
  border-bottom: 1px solid var(--insights-line);
  height: 100%;
  position: relative;
}

.project-insights__day > div span {
  background: #8e80d6;
  border-radius: 5px 5px 0 0;
  min-height: 3px;
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
}

.project-insights__day:first-child > div span {
  background: #5142ab;
}

.project-insights__day small {
  color: var(--insights-muted);
  white-space: nowrap;
  font-size: .68rem;
  overflow: hidden;
}

.project-insights__schedule-note {
  color: var(--insights-muted);
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: 1rem;
  font-size: .73rem;
  display: flex;
}

.project-insights__schedule-note span:before {
  content: "";
  vertical-align: middle;
  background: #d0a052;
  border-radius: 50%;
  width: .45rem;
  height: .45rem;
  margin-inline-end: .38rem;
  display: inline-block;
}

.project-insights__schedule-note span + span:before {
  background: #d06b65;
}

.project-insights__effort-summary {
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
  display: flex;
}

.project-insights__effort-summary > div {
  gap: .3rem;
  display: grid;
}

.project-insights__effort-summary span, .project-insights__week span {
  color: var(--insights-muted);
  font-size: .75rem;
}

.project-insights__effort-summary strong {
  font-size: 1.05rem;
}

.project-insights__effort-summary .project-insights__effort-ratio {
  color: #27735d;
  white-space: nowrap;
  background: #e8f4ef;
  border-radius: 999px;
  padding: .35rem .55rem;
  font-weight: 700;
}

.project-insights__effort-summary .project-insights__effort-ratio.is-over {
  color: #a64e49;
  background: #f9eceb;
}

.project-insights__effort-chart {
  gap: .72rem;
  display: grid;
}

.project-insights__effort-row {
  grid-template-columns: 4rem minmax(5rem, 1fr) minmax(4.5rem, auto);
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  display: grid;
}

.project-insights__effort-row > div {
  background: #edf0f4;
  border-radius: 999px;
  height: .65rem;
  overflow: hidden;
}

.project-insights__effort-row i {
  border-radius: inherit;
  min-width: .18rem;
  height: 100%;
  display: block;
}

.project-insights__effort-row i.is-estimate {
  background: #a9b2c1;
}

.project-insights__effort-row i.is-logged {
  background: #4a9d80;
}

.project-insights__effort-row i.is-over {
  background: #d06b65;
}

.project-insights__effort-row strong {
  text-align: end;
  white-space: nowrap;
}

.project-insights__effort-status {
  color: #417663;
  margin: .85rem 0 0;
  font-size: .75rem;
}

.project-insights__effort-status.is-over {
  color: #a64e49;
}

.project-insights__effort-empty {
  background: #f8fafb;
  border: 1px dashed #cfd6df;
  border-radius: 10px;
  gap: .3rem;
  padding: .8rem;
  display: grid;
}

.project-insights__effort-empty strong {
  font-size: .82rem;
}

.project-insights__effort-empty span {
  color: var(--insights-muted);
  font-size: .75rem;
}

.project-insights__week {
  border-top: 1px solid var(--insights-line);
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  margin-top: 1.3rem;
  padding-top: 1rem;
  display: flex;
}

.project-insights__week strong {
  font-size: .9rem;
}

.project-insights__members {
  gap: .85rem;
  display: grid;
}

.project-insights__member {
  color: inherit;
  border-radius: 8px;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(7.5rem, auto);
  align-items: center;
  gap: .7rem;
  padding: .35rem;
  text-decoration: none;
  transition: background-color .12s;
  display: grid;
}

.project-insights__member:hover, .project-insights__member:focus-visible {
  background: #f6f4fc;
  outline: none;
}

.project-insights__avatar {
  color: #5547aa;
  background: #e9e5fa;
  border-radius: 50%;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-size: .65rem;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.project-insights__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project-insights__member > div {
  min-width: 0;
}

.project-insights__member strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: .35rem;
  font-size: .77rem;
  display: block;
  overflow: hidden;
}

.project-insights__member small {
  color: var(--insights-muted);
  white-space: nowrap;
  font-size: .7rem;
}

.project-insights__member-stats {
  text-align: end;
  gap: .15rem;
  display: grid;
}

.project-insights__attention-list {
  display: grid;
}

.project-insights__attention-note {
  color: var(--insights-muted);
  margin: 0 0 .8rem;
  font-size: .72rem;
}

.project-insights__attention-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
  display: grid;
}

.project-insights__attention-categories button {
  border: 1px solid var(--insights-line);
  color: inherit;
  text-align: right;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem .6rem;
  padding: .75rem;
  display: grid;
}

.project-insights__attention-categories button:hover, .project-insights__attention-categories button.is-active {
  background: #f7f5ff;
  border-color: #7563d5;
}

.project-insights__attention-categories span {
  font-size: .76rem;
  font-weight: 700;
}

.project-insights__attention-categories strong {
  color: #6552c8;
  font-size: 1rem;
}

.project-insights__attention-categories small {
  color: var(--insights-muted);
  grid-column: 1 / -1;
  font-size: .65rem;
}

.project-insights__attention-drilldown {
  border: 1px solid var(--insights-line);
  border-radius: 12px;
  padding: .2rem .85rem .4rem;
}

.project-insights__attention-drilldown > div:first-child {
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  display: flex;
}

.project-insights__attention-drilldown > div:first-child span {
  color: var(--insights-muted);
  font-size: .72rem;
}

.project-insights__attention-clear {
  color: #276d55;
  background: #eef8f3;
  border-radius: 12px;
  align-items: center;
  gap: .8rem;
  padding: 1rem;
  display: flex;
}

.project-insights__attention-clear > span {
  background: #d4eee2;
  border-radius: 50%;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-weight: 800;
  display: grid;
}

.project-insights__attention-clear p {
  color: #527467;
  margin: .2rem 0 0;
  font-size: .72rem;
}

.project-insights__attention-list a {
  border-top: 1px solid var(--insights-line);
  color: inherit;
  grid-template-columns: minmax(0, 1fr) minmax(6rem, auto) 1rem;
  align-items: center;
  gap: .7rem;
  padding: .7rem 0;
  text-decoration: none;
  display: grid;
}

.project-insights__attention-kind {
  border-radius: 6px;
  width: fit-content;
  padding: .25rem .48rem;
  font-size: .69rem;
  font-weight: 700;
}

.project-insights__attention-kind.is-overdue {
  color: #a74944;
  background: #fbebe9;
}

.project-insights__attention-kind.is-blocked {
  color: #496f95;
  background: #e9f0f7;
}

.project-insights__attention-list strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8rem;
  overflow: hidden;
}

.project-insights__attention-list small {
  color: var(--insights-muted);
  font-size: .72rem;
}

.project-insights__attention-list a > span:last-child {
  color: var(--insights-muted);
}

.project-insights__loading {
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  display: grid;
}

.project-insights__loading span {
  background: #eef0f5;
  border-radius: 16px;
  height: 7rem;
  animation: 1.2s ease-in-out infinite projects-shimmer;
}

@media (max-width: 950px) {
  .project-insights__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-insights__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .project-insights__header {
    padding: 1.1rem;
    display: grid;
  }

  .project-insights__metrics {
    grid-template-columns: 1fr;
  }

  .project-insights__metric {
    min-height: 6.5rem;
    padding: .8rem;
  }

  .project-insights__panel {
    padding: 1rem;
  }

  .project-insights__effort-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-insights__effort-row {
    grid-template-columns: 3.6rem minmax(4rem, 1fr);
  }

  .project-insights__effort-row strong {
    text-align: start;
    grid-column: 2;
  }

  .project-insights__progress-body {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .project-insights__columns {
    width: 100%;
  }

  .project-insights__attention-list a {
    grid-template-columns: minmax(0, 1fr) 1rem;
  }

  .project-insights__attention-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-insights__attention-list small {
    grid-area: 2 / 1;
  }
}

/* [project]/libs/modules/projects/src/ProjectStatusBars.css [app-client] (css) */
.projects-card__breakdown {
  border-top: 1px solid #e8eef7;
  gap: .85rem;
  min-width: 0;
  padding: .95rem 0;
  display: grid;
}

.projects-card__status-row {
  gap: .42rem;
  min-width: 0;
  display: grid;
}

.projects-card__status-row-head {
  color: #34435d;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
}

.projects-card__status-row-head small {
  color: #8997aa;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 500;
}

.projects-card__status-bar {
  direction: rtl;
  background: #e8edf3;
  border-radius: 999px;
  height: 1.4rem;
  display: flex;
  overflow: hidden;
}

.projects-card__status-segment {
  color: #fff;
  white-space: nowrap;
  flex: none;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: 100%;
  font-size: .68rem;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.projects-card__status-segment.is-done, .projects-card__status-legend i.is-done {
  background: #319f78;
}

.projects-card__status-segment.is-overdue, .projects-card__status-legend i.is-overdue {
  background: #dc645f;
}

.projects-card__status-segment.is-unassigned, .projects-card__status-legend i.is-unassigned {
  background: #9ba5b2;
}

.projects-card__status-segment.is-other, .projects-card__status-legend i.is-other {
  background: #b6c7da;
}

.projects-card__status-legend {
  color: #718097;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  padding-top: .15rem;
  font-size: .65rem;
  display: flex;
}

.projects-card__status-legend span {
  white-space: nowrap;
  align-items: center;
  gap: .25rem;
  display: inline-flex;
}

.projects-card__status-legend i {
  border-radius: 50%;
  width: .48rem;
  height: .48rem;
  display: inline-block;
}

.projects-card__breakdown-loading {
  gap: 1.1rem;
  padding: 1.1rem 0;
  display: grid;
}

.projects-card__breakdown-loading > * {
  border-radius: 999px;
  width: 100%;
  height: 1.4rem;
  display: block;
}

@media (max-width: 460px) {
  .projects-card__breakdown {
    gap: .7rem;
  }

  .projects-card__status-legend {
    gap: .3rem .6rem;
  }
}

/* [project]/libs/modules/reports/src/ReportsModal.css [app-client] (css) */
.modal.reports-modal {
  flex-direction: column;
  width: min(96vw, 68rem);
  max-width: none;
  max-height: min(92vh, 880px);
  display: flex;
  overflow: hidden;
}

.reports-modal__body {
  padding-top: .25rem;
  overflow-y: auto;
}

.reports-view-tabs {
  border: 1px solid var(--line);
  background: #ffffffb3;
  border-radius: 12px;
  gap: .25rem;
  margin-bottom: 1rem;
  padding: .25rem;
  display: inline-flex;
}

.reports-view-tabs button {
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: .5rem .9rem;
}

.reports-view-tabs button.is-active {
  background: var(--accent);
  color: #fff;
}

.management-report {
  gap: 1rem;
  display: grid;
}

.management-report__intro, .management-report__heading, .management-task-row {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.management-report__intro p, .management-report__intro time {
  color: var(--muted);
  margin: .2rem 0 0;
  font-size: .8rem;
}

.management-report__cards {
  grid-template-columns: repeat(6, minmax(6rem, 1fr));
  gap: .5rem;
  display: grid;
}

.management-report__card {
  border: 1px solid var(--line);
  background: #ffffffd1;
  border-radius: 12px;
  gap: .2rem;
  padding: .75rem;
  display: grid;
}

.management-report__card span {
  color: var(--muted);
  font-size: .75rem;
}

.management-report__card strong {
  font-size: 1.35rem;
}

.management-report__card.is-overdue, .management-report__card.is-blocked {
  border-color: #b91c1c4d;
}

.management-report__section {
  gap: .6rem;
  display: grid;
}

.management-report__heading h3 {
  margin: 0;
  font-size: .95rem;
}

.management-report__heading span {
  color: var(--muted);
  font-size: .75rem;
}

.management-task-list {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  display: grid;
  overflow: hidden;
}

.management-task-row {
  border-bottom: 1px solid var(--line);
  padding: .65rem .75rem;
}

.management-task-row:last-child {
  border-bottom: 0;
}

.management-task-row > div:first-child {
  gap: .15rem;
  min-width: 0;
  display: grid;
}

.management-task-row a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.management-task-row span, .management-task-row span a {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 500;
}

.management-task-row__meta {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem;
  display: flex;
}

.management-task-row mark {
  color: var(--accent-deep);
  background: #0f766e1a;
  border-radius: 999px;
  padding: .18rem .42rem;
  font-size: .7rem;
}

.management-task-row mark.is-overdue, .management-task-row mark.is-blocked {
  color: #b91c1c;
  background: #b91c1c1a;
}

.management-task-row mark.is-urgent, .management-task-row mark.is-high {
  color: #92500a;
  background: #d977061f;
}

.management-task-row time {
  color: var(--muted);
  align-self: center;
  font-size: .72rem;
}

.management-projects a {
  color: var(--accent-deep);
  font-weight: 700;
}

.management-report__later {
  color: var(--muted);
  background: #0f766e0f;
  border-radius: 10px;
  margin: 0;
  padding: .7rem .8rem;
  font-size: .78rem;
}

@media (max-width: 760px) {
  .management-report__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .management-report__intro, .management-task-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .management-task-row__meta {
    justify-content: flex-start;
  }
}

.reports-modal__filters {
  gap: .75rem;
  margin-bottom: 1rem;
  display: grid;
}

.reports-period {
  border: 1px solid var(--line);
  background: #ffffffa6;
  border-radius: 12px;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .25rem;
  display: inline-flex;
}

.reports-period__btn {
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 9px;
  padding: .4rem .75rem;
  font-size: .84rem;
  font-weight: 600;
  transition: background .12s, color .12s;
}

.reports-period__btn:hover {
  color: var(--accent-deep);
  background: #0f766e14;
}

.reports-period__btn.is-active {
  background: var(--accent);
  color: #fff;
}

.reports-modal__filter-row {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: .55rem;
  display: grid;
}

.reports-modal__dates {
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  display: grid;
}

.reports-modal__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
  display: flex;
}

.reports-summary {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
  display: grid;
}

.reports-summary__card {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  gap: .15rem;
  padding: .75rem .85rem;
  display: grid;
}

.reports-summary__card span {
  color: var(--muted);
  font-size: .76rem;
}

.reports-summary__card strong {
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
}

.reports-summary__card.is-over {
  background: #fee2e28c;
  border-color: #dc262647;
}

.reports-summary__card.is-over strong {
  color: #b91c1c;
}

.reports-summary__card.is-under strong {
  color: var(--accent-deep);
}

.reports-summary__card.is-match strong {
  color: var(--ink);
}

.reports-chart {
  border: 1px solid var(--line);
  background: #ffffffb8;
  border-radius: 12px;
  gap: .55rem;
  margin-bottom: 1rem;
  padding: .85rem;
  display: grid;
}

.reports-chart__title {
  color: var(--ink-soft);
  margin: 0 0 .25rem;
  font-size: .88rem;
  font-weight: 700;
}

.reports-chart__legend {
  color: var(--muted);
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: .35rem;
  font-size: .72rem;
  display: flex;
}

.reports-chart__legend span {
  align-items: center;
  gap: .3rem;
  display: inline-flex;
}

.reports-chart__legend i {
  border-radius: 2px;
  width: .65rem;
  height: .65rem;
  font-style: normal;
}

.reports-chart__legend i.est {
  background: #1a24212e;
}

.reports-chart__legend i.act {
  background: var(--accent);
}

.reports-chart__row {
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  display: grid;
}

.reports-chart__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 600;
  overflow: hidden;
}

.reports-chart__bars {
  gap: .2rem;
  display: grid;
}

.reports-chart__bar {
  background: #1a242114;
  border-radius: 999px;
  height: .45rem;
  overflow: hidden;
}

.reports-chart__bar > span {
  border-radius: inherit;
  min-width: 2px;
  height: 100%;
  transition: width .25s;
  display: block;
}

.reports-chart__bar > span.is-estimate {
  background: #1a242138;
}

.reports-chart__bar > span.is-tracked {
  background: var(--accent);
}

.reports-chart__bar > span.is-tracked.is-over {
  background: #dc2626;
}

.reports-chart__bar > span.is-tracked.is-under {
  background: #059669;
}

.reports-table-wrap {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  overflow-x: auto;
}

.reports-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
}

.reports-table th, .reports-table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  padding: .6rem .75rem;
}

.reports-table th {
  color: var(--muted);
  background: #0f766e0d;
  font-size: .76rem;
  font-weight: 700;
}

.reports-table tbody tr:last-child td {
  border-bottom: 0;
}

.reports-table td.is-over {
  color: #b91c1c;
  font-weight: 600;
}

.reports-table td.is-under {
  color: #047857;
  font-weight: 600;
}

.reports-table td.is-match {
  color: var(--muted);
}

.reports-variance-badge {
  border-radius: 999px;
  margin-inline-start: .35rem;
  padding: .12rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-block;
}

.reports-variance-badge.is-over {
  color: #991b1b;
  background: #fee2e2e6;
}

.reports-variance-badge.is-under {
  color: #047857;
  background: #d1fae5e6;
}

.reports-empty {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff80;
  border-radius: 14px;
  padding: 2rem 1rem;
}

.reports-empty strong {
  color: var(--ink-soft);
  margin-bottom: .35rem;
  display: block;
}

.reports-empty p {
  margin: 0;
  font-size: .85rem;
}

.reports-skeleton {
  gap: .55rem;
  display: grid;
}

.reports-skeleton__card, .reports-skeleton__block {
  background: linear-gradient(110deg, #1a24210f 30%, #1a24211a 50%, #1a24210f 70%) 0 0 / 200% 100%;
  border-radius: 12px;
  animation: 1.2s ease-in-out infinite reports-shimmer;
}

.reports-skeleton__card {
  height: 4rem;
}

.reports-skeleton__block {
  height: 10rem;
}

@keyframes reports-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.reports-error {
  background: #fee2e273;
  border: 1px solid #dc262640;
  border-radius: 12px;
  gap: .65rem;
  padding: 1rem;
  display: grid;
}

@media (max-width: 720px) {
  .reports-modal__dates {
    grid-template-columns: 1fr;
  }

  .reports-chart__row {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reports-skeleton__card, .reports-skeleton__block {
    animation: none;
  }
}

/* [project]/libs/modules/shell/src/AppShell.css [app-client] (css) */
.app-shell {
  --app-view-bar-height: 0px;
  padding-block-start: var(--space-4);
}

.app-shell__header {
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-2);
}

.app-shell__view-bar {
  display: none;
}

@media (min-width: 768px) {
  .app-shell {
    --app-view-bar-height: 3.5rem;
  }

  .app-shell__view-bar {
    z-index: var(--z-sticky);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    background: #ffffffeb;
    background: lab(100% 0 0 / .92);
    justify-content: center;
    align-items: center;
    margin-block-end: var(--space-4);
    display: flex;
    position: sticky;
    top: 0;
  }
}

.app-shell__topbar {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
  display: flex;
}

.app-shell__topbar-end {
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  display: flex;
}

.app-shell__hero {
  margin-block-end: var(--space-4);
}

.app-shell__brand-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.app-shell__brand {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -.03em;
  color: var(--color-accent-deep);
  font-weight: 800;
  line-height: var(--leading-tight);
  margin: 0;
}

.app-shell__stats {
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: stretch;
  display: flex;
}

.app-shell__stat {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  gap: .1rem;
  min-width: 4.5rem;
  display: grid;
}

.app-shell__stat strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 12rem;
  overflow: hidden;
}

.app-shell__stat span:last-child {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.app-shell__stat--live {
  background: var(--color-accent-subtle);
  border-color: #007b6659;
  border-color: lab(45.6129% -35.2776 3.0459 / .35);
}

.app-shell__stat--live strong {
  color: var(--color-accent-deep);
}

.app-shell__live-dot {
  background: var(--color-accent);
  width: .45rem;
  height: .45rem;
  vertical-align: middle;
  border-radius: 50%;
  margin-inline-end: var(--space-1);
  display: inline-block;
}

.app-shell__toolbar {
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  display: flex;
}

.app-shell__toolbar-actions {
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.app-shell__cta {
  font-weight: 700;
}

.app-shell__main {
  margin-block-start: 0;
}

.app-shell__footer {
  margin-block-start: var(--space-7);
}

.app-shell__fab {
  z-index: calc(var(--z-sticky) + 1);
  width: var(--touch-min, 2.75rem);
  height: var(--touch-min, 2.75rem);
  box-shadow: var(--shadow-md);
  border-radius: 50%;
  padding: 0;
  display: none;
  position: fixed;
  inset-block-end: calc(var(--space-4) + var(--mobile-nav-height, 3.75rem) + var(--safe-bottom, 0px));
  inset-inline-start: calc(var(--space-4) + var(--safe-right, 0px));
}

.mobile-bottom-nav {
  z-index: var(--z-sticky);
  height: calc(var(--mobile-nav-height) + var(--safe-bottom, 0px));
  padding-inline: calc(var(--space-2) + var(--safe-right, 0px))
    calc(var(--space-2) + var(--safe-left, 0px));
  border-block-start: 1px solid var(--color-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff0;
  background: lab(100% 0 0 / .94);
  padding-block-end: var(--safe-bottom, 0px);
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  box-shadow: 0 -4px 24px #202c2614;
  box-shadow: 0 -4px 24px lab(16.7482% -6.6562 1.91945 / .08);
}

.mobile-bottom-nav__item {
  min-height: var(--touch-min);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
  background: none;
  border: 0;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: .15rem;
  font-weight: 600;
  text-decoration: none;
  display: grid;
}

.mobile-bottom-nav__item.is-active {
  color: var(--color-accent-deep);
  background: var(--color-accent-subtle);
}

.mobile-bottom-nav__item svg {
  flex-shrink: 0;
}

.view-mode-toggle {
  padding: var(--space-1);
  gap: var(--space-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-line);
  background: #ffffffa6;
  background: lab(100% 0 0 / .65);
  display: inline-flex;
}

.view-mode-toggle__btn {
  border-radius: var(--radius-full) !important;
  gap: var(--space-1) !important;
  min-height: 2.125rem !important;
  padding-inline: var(--space-3) !important;
  border: none !important;
}

.view-mode-toggle__btn.ui-btn--ghost {
  color: var(--color-ink-soft);
  background: none;
}

.view-mode-toggle__btn.is-active, .view-mode-toggle__btn.ui-btn--primary {
  box-shadow: var(--shadow-sm);
}

.workspace-switcher {
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: 1;
  min-width: min(100%, 280px);
  display: flex;
}

.workspace-switcher__field {
  flex: 1;
  min-width: 10rem;
}

.workspace-switcher__field .ui-field__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-accent-deep);
  font-weight: 700;
}

.workspace-switcher__field .ui-select {
  background: var(--color-surface-solid);
  border-color: #007b6659;
  border-color: lab(45.6129% -35.2776 3.0459 / .35);
  min-height: 2.5rem;
  font-weight: 600;
}

.workspace-switcher__actions {
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.workspace-create-inline {
  gap: var(--space-1);
  align-items: center;
  width: 100%;
  display: flex;
}

.workspace-create-inline input {
  min-height: 2.25rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  font: inherit;
  flex: 1;
}

.user-menu {
  position: relative;
}

.user-menu__trigger {
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface-solid);
  cursor: pointer;
  font: inherit;
  color: var(--color-ink);
  max-width: min(100%, 14rem);
  display: inline-flex;
}

.user-menu__trigger:hover {
  background: var(--color-accent-subtle);
  border-color: #007b6659;
  border-color: lab(45.6129% -35.2776 3.0459 / .35);
}

.user-menu__avatar {
  aspect-ratio: 1;
  background: var(--color-accent);
  width: 2rem;
  height: 2rem;
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.user-menu__avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-menu__name {
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  overflow: hidden;
}

.user-menu__role {
  flex-shrink: 0;
}

.user-menu__chevron {
  opacity: .6;
  flex-shrink: 0;
}

.user-menu__dropdown {
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-md);
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
}

.user-menu__meta {
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--color-line);
  gap: .15rem;
  margin-block-end: var(--space-1);
  display: grid;
}

.user-menu__meta strong {
  font-size: var(--text-sm);
}

.user-menu__meta span {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.user-menu__item {
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  cursor: pointer;
  text-align: start;
  background: none;
  border: 0;
  display: flex;
}

.user-menu__item:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.user-menu__item--danger {
  color: var(--color-danger);
}

.user-menu__item--danger:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.user-menu__lock {
  color: var(--color-muted);
  opacity: .75;
  margin-inline-start: auto;
}

@media (min-width: 768px) {
  .app-shell {
    max-width: none;
    padding: 0;
  }

  .app-shell__header {
    z-index: var(--z-sticky);
    padding: var(--space-3) var(--space-6);
    border-block-end: 1px solid var(--color-line);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: #f7faffe6;
    background: lab(98.2419% -.730693 -3.30186 / .9);
    margin: 0;
    position: sticky;
    inset-block-start: 0;
  }

  .app-shell__topbar {
    min-height: 2.9rem;
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    flex-direction: row-reverse;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .app-shell__hero {
    margin: 0;
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-6);
  }

  .app-shell__brand-row {
    gap: var(--space-3);
  }

  .app-shell__brand {
    font-size: 1.35rem;
  }

  .app-shell__brand span {
    color: var(--color-muted);
    font-family: var(--font-body);
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-block-start: .05rem;
    font-size: .63rem;
    font-weight: 700;
    display: block;
  }

  .app-shell__stats, .app-shell__toolbar {
    display: none;
  }

  .app-shell__workspace {
    grid-template-columns: 16.5rem minmax(0, 1fr);
    min-height: calc(100vh - 5.4rem);
    display: grid;
  }

  .app-shell__sidebar {
    height: calc(100vh - 5.4rem);
    padding: var(--space-5) var(--space-3);
    border-inline-end: 1px solid var(--color-line);
    background: #f7faffa8;
    background: lab(98.2419% -.730693 -3.30186 / .66);
    flex-direction: column;
    grid-area: 1 / 1;
    display: flex;
    position: sticky;
    inset-block-start: 5.4rem;
  }

  .app-shell__content {
    min-width: 0;
    padding: var(--space-5) var(--space-6) var(--space-8);
    grid-column: 2;
  }

  .app-shell__sidebar-label {
    margin: 0 var(--space-3) var(--space-2);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .app-shell__nav {
    gap: var(--space-1);
    display: grid;
  }

  .app-shell__context-nav {
    flex-shrink: 0;
    max-height: 35vh;
    overflow: hidden auto;
  }

  .app-shell__context-nav button span {
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .app-shell__context-nav button svg {
    flex-shrink: 0;
  }

  .app-shell__nav button {
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 2.75rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-ink-soft);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
    background: none;
    border: 0;
    font-weight: 650;
    display: flex;
  }

  .app-shell__nav button:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent-deep);
  }

  .app-shell__nav button.is-active {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: 0 8px 18px #3d66d033;
    box-shadow: 0 8px 18px lab(44.8533% 13.5164 -60.1598 / .2);
  }

  .app-shell__sidebar-divider {
    height: 1px;
    margin: var(--space-5) var(--space-3);
    background: var(--color-line);
  }

  .app-shell__sidebar-footer {
    padding: var(--space-3);
    border-block-start: 1px solid var(--color-line);
    margin-top: auto;
  }

  .app-shell__sidebar-footer .ui-btn {
    width: 100%;
  }

  .app-shell__view-bar {
    margin: 0 0 var(--space-4);
    box-shadow: none;
    background: none;
    border: 0;
    justify-content: flex-start;
    padding: 0;
    position: static;
  }
}

@media (max-width: 767px) {
  .app-shell__sidebar, .app-shell__workspace {
    display: contents;
  }
}

@media (min-width: 768px) {
  html, body, #root {
    width: 100%;
    max-width: none;
  }

  .page.app-shell {
    background: var(--color-paper);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .app-shell .atmosphere {
    display: none;
  }

  .app-shell__header {
    align-items: center;
    column-gap: var(--space-5);
    height: 5rem;
    padding: 0 var(--space-5);
    background: var(--color-surface-solid);
    direction: ltr;
    grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr);
    display: grid;
  }

  .app-shell__topbar {
    display: contents;
  }

  .app-shell__topbar .workspace-switcher {
    direction: rtl;
    grid-area: 1 / 3;
    justify-self: end;
    width: min(100%, 24rem);
    max-width: 24rem;
  }

  .app-shell__topbar-end {
    direction: rtl;
    grid-area: 1 / 1;
    justify-self: start;
  }

  .app-shell__hero {
    pointer-events: none;
    direction: rtl;
    grid-area: 1 / 2;
    justify-self: center;
    position: static;
    transform: none;
  }

  .app-shell__brand {
    align-items: baseline;
    gap: var(--space-2);
    white-space: nowrap;
    display: flex;
  }

  .app-shell__brand span {
    margin: 0;
    display: inline;
  }

  .app-shell__workspace {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - 5rem);
    display: flex;
  }

  .app-shell__sidebar {
    width: 15rem;
    height: calc(100vh - 5rem);
    padding: var(--space-5) var(--space-3);
    border-inline-end: 1px solid var(--color-line);
    background: var(--color-surface-solid);
    flex: 0 0 15rem;
    position: sticky;
    inset-block-start: 5rem;
  }

  .app-shell__content {
    width: auto;
    min-width: 0;
    padding: var(--space-5) var(--space-4);
    flex: 1 1 0;
  }

  .app-shell__view-bar {
    display: none;
  }

  .app-shell__main.layout {
    width: 100%;
    max-width: none;
    display: block;
  }

  .app-shell__main .panel, .app-shell__main .list-panel {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .app-shell__nav button {
    min-height: 2.6rem;
  }

  .app-shell__header {
    height: auto;
    padding: .7rem var(--space-5);
    border-block-end: 1px solid var(--color-line);
    background: #fffffff0;
    background: lab(100% 0 0 / .94);
    display: block;
  }

  .app-shell__header-inner {
    align-items: center;
    gap: var(--space-5);
    direction: rtl;
    grid-template-columns: auto minmax(18rem, 28rem) auto;
    min-height: 3.5rem;
    display: grid;
  }

  .app-shell__header .app-shell__brand {
    color: var(--color-accent-deep);
    white-space: nowrap;
    grid-column: 1;
    align-items: baseline;
    gap: .45rem;
    font-size: 1.45rem;
    text-decoration: none;
    display: flex;
  }

  .app-shell__header .app-shell__brand span {
    color: var(--color-muted);
    font-family: var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
    font-size: .65rem;
    display: inline;
  }

  .app-shell__workspace-control {
    grid-column: 2;
    min-width: 0;
  }

  .app-shell__workspace-control .workspace-switcher {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    min-width: 0;
  }

  .app-shell__workspace-control .workspace-switcher__field {
    min-width: 10rem;
    max-width: 15rem;
  }

  .app-shell__workspace-control .workspace-switcher__field .ui-field__label {
    display: none;
  }

  .app-shell__workspace-control .workspace-switcher__field .ui-select {
    min-height: 2.55rem;
  }

  .app-shell__workspace-control .workspace-switcher__actions {
    flex-wrap: nowrap;
  }

  .app-shell__header-actions {
    justify-self: end;
    align-items: center;
    gap: var(--space-2);
    direction: rtl;
    grid-column: 3;
    display: flex;
  }

  .app-shell__workspace {
    background: var(--color-paper);
    min-height: calc(100vh - 4.9rem);
  }

  .app-shell__sidebar {
    width: 15.5rem;
    height: calc(100vh - 4.9rem);
    padding: var(--space-5) var(--space-3);
    border-inline-end: 1px solid var(--color-line);
    background: #ffffffd6;
    background: lab(100% 0 0 / .84);
    flex-basis: 15.5rem;
    inset-block-start: 4.9rem;
  }

  .app-shell__sidebar-label {
    margin: 0 var(--space-3) var(--space-2);
    letter-spacing: .02em;
  }

  .app-shell__nav {
    gap: .25rem;
  }

  .app-shell__nav button {
    border-radius: .7rem;
    min-height: 2.8rem;
  }

  .app-shell__sidebar-divider {
    margin: var(--space-4) var(--space-3);
  }

  .app-shell__content {
    padding: var(--space-5);
  }
}

@media (max-width: 767px) {
  .app-shell__header-inner {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    display: flex;
  }

  .app-shell__workspace-control {
    order: 3;
    width: 100%;
  }

  .app-shell__workspace-control .workspace-switcher__field .ui-field__label {
    display: none;
  }

  .app-shell__header-actions {
    align-items: center;
    gap: var(--space-2);
    display: flex;
  }

  .app-shell {
    padding-inline: var(--space-4);
    padding-block-end: calc(var(--mobile-nav-height) + var(--safe-bottom, 0px) + var(--space-4));
  }

  .app-shell__main {
    padding-block-end: var(--space-2);
  }

  .mobile-bottom-nav {
    gap: var(--space-1);
    display: flex;
  }

  .mobile-bottom-nav[data-keyboard-open="true"] {
    display: none;
  }

  body:has([role="dialog"][aria-modal="true"]:not([aria-hidden="true"])) .mobile-bottom-nav {
    display: none;
  }

  body:has([role="dialog"][aria-modal="true"]:not([aria-hidden="true"])) .app-shell__fab {
    display: none;
  }

  .app-shell__brand-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-shell__stats {
    width: 100%;
  }

  .app-shell__stat {
    flex: 1;
    min-width: 0;
  }

  .app-shell__stat strong {
    max-width: 100%;
  }

  .app-shell__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .view-mode-toggle {
    justify-content: stretch;
    width: 100%;
  }

  .view-mode-toggle__btn {
    flex: 1;
    justify-content: center;
  }

  .app-shell__toolbar-actions {
    justify-content: stretch;
  }

  .app-shell__toolbar-actions .ui-btn {
    flex: 1;
    justify-content: center;
  }

  .app-shell__cta {
    display: none;
  }

  .app-shell__fab {
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .app-shell__btn-label, .user-menu__name, .user-menu__role {
    display: none;
  }
}

@media (max-width: 389px) {
  .view-mode-toggle__btn span {
    display: none;
  }

  .view-mode-toggle__btn {
    padding-inline: var(--space-2) !important;
  }
}

@media (max-width: 767px) {
  html, body {
    overflow-x: clip;
  }

  .page.app-shell {
    width: 100%;
    max-width: 100vw;
    padding: 0 var(--space-3) calc(var(--mobile-nav-height) + var(--safe-bottom, 0px) + var(--space-5));
  }

  .app-shell__header {
    z-index: var(--z-sticky);
    margin-inline: calc(var(--space-3) * -1);
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff5;
    background: lab(100% 0 0 / .96);
    margin-block-end: var(--space-3);
    position: sticky;
    inset-block-start: 0;
  }

  .app-shell__header-inner {
    flex-wrap: wrap;
  }

  .app-shell__brand {
    white-space: nowrap;
    font-size: 1.25rem;
  }

  .app-shell__brand span {
    display: none;
  }

  .app-shell__workspace-control {
    min-width: 0;
  }

  .app-shell__workspace-control .workspace-switcher {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .app-shell__workspace-control .workspace-switcher__field {
    min-width: 0;
  }

  .app-shell__workspace-control .workspace-switcher__actions {
    flex-wrap: nowrap;
  }

  .app-shell__content, .app-shell__main, .app-shell__main.layout, .app-shell__main .panel, .app-shell__main .list-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .app-shell__toolbar {
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .app-shell__toolbar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .mobile-bottom-nav {
    min-width: 320px;
    overflow: hidden;
  }

  .mobile-bottom-nav__item {
    touch-action: manipulation;
    min-width: 0;
  }
}

@media (max-width: 389px) {
  .page.app-shell {
    padding-inline: var(--space-2);
  }

  .app-shell__header {
    margin-inline: calc(var(--space-2) * -1);
    padding-inline: var(--space-2);
  }
}

@media (min-width: 768px) {
  .page.app-shell {
    color: #182c4d;
    background: #f6f9fe;
  }

  .app-shell__header {
    border-color: #e7edf6;
    height: 4.5rem;
    padding: 0 2rem;
    box-shadow: 0 1px #213d6705;
  }

  .app-shell__header-inner {
    grid-template-columns: auto minmax(10rem, 15rem) minmax(18rem, 25rem) auto;
    gap: 2rem;
    min-height: 4.5rem;
  }

  .app-shell__header-inner.has-project-control {
    grid-template-columns: auto minmax(9rem, 13rem) minmax(9rem, 13rem) minmax(15rem, 22rem) auto;
  }

  .app-shell__brand {
    gap: .35rem;
    font-weight: 800;
    color: #2860e8 !important;
    font-size: 1.5rem !important;
  }

  .app-shell__brand span {
    font-weight: 700;
    color: #9aa8bd !important;
    font-size: .58rem !important;
  }

  .app-shell__workspace-control {
    grid-column: 2;
    min-width: 0;
  }

  .app-shell__project-control {
    grid-column: 3;
    min-width: 0;
  }

  .project-switcher__field .ui-field__label {
    display: none;
  }

  .project-switcher__field .ui-select {
    color: #233b60;
    min-height: 2.55rem;
    box-shadow: none;
    background: none;
    border: 0;
    font-weight: 700;
  }

  .app-shell__workspace-control .workspace-switcher {
    justify-content: flex-start;
  }

  .app-shell__workspace-control .workspace-switcher__field {
    max-width: 13rem;
  }

  .app-shell__workspace-control .workspace-switcher__field .ui-select {
    color: #233b60;
    min-height: 2.55rem;
    box-shadow: none;
    background: none;
    border: 0;
    font-weight: 700;
  }

  .app-shell__workspace-control .workspace-switcher__actions {
    gap: .15rem;
  }

  .app-shell__workspace-control .workspace-switcher__actions .ui-btn {
    color: #7888a1;
  }

  .app-shell__search {
    grid-column: 3;
    min-width: 0;
    display: block;
    position: relative;
  }

  .app-shell__search input {
    color: #253c60;
    background: #f2f6fc;
    border: 0;
    border-radius: 999px;
    outline: 0;
    width: 100%;
    height: 2.55rem;
    padding: 0 1rem 0 2.75rem;
    font-size: .82rem;
  }

  .app-shell__search input::placeholder {
    color: #adbad0;
  }

  .app-shell__search input:focus {
    box-shadow: 0 0 0 3px #2b61e81f;
  }

  .app-shell__search svg {
    color: #b7c4d8;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
  }

  .app-shell__header-actions {
    grid-column: 4;
    gap: .8rem;
  }

  .app-shell__header-actions .user-menu__trigger {
    background: none;
    border: 0;
    padding: 0;
  }

  .app-shell__header-inner.has-project-control .app-shell__search {
    grid-column: 4;
  }

  .app-shell__header-inner.has-project-control .app-shell__header-actions {
    grid-column: 5;
  }

  .app-shell__header-actions .user-menu__avatar {
    color: #18304f;
    background: linear-gradient(145deg, #d6e0ed, #879ab4);
    border: 2px solid #fff;
    width: 2.35rem;
    height: 2.35rem;
    box-shadow: 0 2px 8px #1f375d1f;
  }

  .app-shell__header-actions .user-menu__name, .app-shell__header-actions .user-menu__role, .app-shell__header-actions .user-menu__chevron {
    display: none;
  }

  .app-shell__workspace {
    direction: rtl;
    min-height: calc(100vh - 4.5rem);
  }

  .app-shell__sidebar {
    background: #ffffffb8;
    border-inline-start: 1px solid #e5ecf6;
    border-inline-end: 0;
    flex-basis: 16.5rem;
    width: 16.5rem;
    height: calc(100vh - 4.5rem);
    padding: 1.55rem 1rem;
    inset-block-start: 4.5rem;
  }

  .app-shell__content {
    direction: rtl;
    padding: 2rem 2.4rem 3rem;
  }

  .app-shell__sidebar-label {
    color: #8b9ab2;
    margin: 0 .85rem .7rem;
    font-size: .78rem;
    font-weight: 700;
  }

  .app-shell__nav {
    gap: .3rem;
  }

  .app-shell__nav button {
    color: #304463;
    border-radius: .85rem;
    min-height: 3rem;
    padding: 0 .9rem;
    font-size: .88rem;
  }

  .app-shell__nav button svg {
    color: currentColor;
  }

  .app-shell__nav button:hover {
    color: #2860e8;
    background: #eef4ff;
  }

  .app-shell__nav button.is-active {
    color: #2860e8;
    box-shadow: none;
    background: #edf3ff;
  }

  .app-shell__sidebar-divider {
    background: #e8eef7;
    margin: 1.35rem .85rem;
  }

  .app-shell__sidebar-footer {
    border-color: #e8eef7;
    padding: 1rem .85rem 0;
  }

  .app-shell__sidebar-footer .ui-btn {
    background: #2860e8;
    border-radius: 999px;
    min-height: 2.75rem;
    box-shadow: 0 8px 18px #2860e833;
  }
}

.global-search {
  width: min(520px, 48vw);
  position: relative;
}

.global-search .app-shell__search {
  width: 100%;
}

.global-search__results {
  z-index: 60;
  border: 1px solid var(--color-border, #e3e6eb);
  background: #fff;
  border-radius: 12px;
  width: min(520px, 100vw - 32px);
  max-height: 65vh;
  padding: 10px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  overflow: auto;
  box-shadow: 0 18px 45px #18203324;
}

.global-search__results header {
  justify-content: space-between;
  padding: 5px 7px 10px;
  font-size: 12px;
  display: flex;
}

.global-search__results header span, .global-search__results footer {
  color: #747b88;
  font-size: 10px;
}

.global-search__results div > small {
  color: var(--color-accent-deep);
  padding: 10px 7px 4px;
  font-weight: 700;
  display: block;
}

.global-search__results a {
  color: inherit;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 9px 7px;
  text-decoration: none;
  display: flex;
}

.global-search__results a:hover, .global-search__results a:focus-visible {
  background: #f5f3ff;
  outline: none;
}

.global-search__results a span {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.global-search__results a b, .global-search__results a em {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.global-search__results a em {
  color: #747b88;
  font-size: 10px;
  font-style: normal;
}

.global-search__results p {
  color: #747b88;
  padding: 18px 7px;
  font-size: 12px;
}

.global-search__results footer {
  border-top: 1px solid #eef0f3;
  margin-top: 8px;
  padding: 9px 7px 2px;
  display: block;
}

@media (max-width: 767px) {
  .app-shell__search, .app-shell__project-control {
    display: none;
  }
}

@media (min-width: 768px) {
  .app-shell__content:has(.project-page) {
    padding: 1rem;
  }

  .app-shell__header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .app-shell__header-inner .app-shell__search {
    grid-column: 2;
    justify-self: center;
    width: min(100%, 28rem);
  }

  .app-shell__header-inner .app-shell__header-actions {
    grid-column: 3;
  }

  .app-shell:has(.project-page) .app-shell__header-inner {
    grid-template-columns: 15.5rem minmax(0, 1fr) auto;
  }

  .app-shell:has(.project-page) .app-shell__header-inner > .global-search {
    grid-column: 2;
    justify-self: end;
  }
}

.workspace-tree {
  flex-shrink: 0;
  max-height: 45vh;
  overflow: hidden auto;
}

.app-shell__sidebar-label {
  display: block;
}

.workspace-picker {
  margin: 0 .7rem .6rem;
  position: relative;
}

.workspace-picker[open] {
  z-index: var(--z-dropdown);
}

.workspace-picker__trigger {
  border: 1px solid var(--color-line);
  background: var(--color-accent-subtle);
  min-height: 2.9rem;
  color: var(--color-accent-deep);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: .65rem;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  font-weight: 700;
  list-style: none;
  display: flex;
}

.workspace-picker__trigger::-webkit-details-marker {
  display: none;
}

.workspace-picker__trigger span {
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.workspace-picker__trigger svg {
  flex-shrink: 0;
}

.workspace-picker[open] .workspace-picker__trigger {
  border-color: var(--color-accent-deep);
}

.workspace-picker[open] .workspace-picker__trigger svg:last-child {
  transform: rotate(180deg);
}

.workspace-picker__menu {
  border: 1px solid var(--color-line);
  background: #fff;
  border-radius: .7rem;
  max-height: min(16rem, 40vh);
  padding: .3rem;
  position: absolute;
  inset-block-start: calc(100% + .35rem);
  inset-inline: 0;
  overflow-y: auto;
  box-shadow: 0 8px 24px #1722391a;
}

.workspace-picker__option {
  width: 100%;
  min-height: 2.65rem;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .5rem;
  align-items: center;
  gap: .55rem;
  padding: .55rem .6rem;
  display: flex;
}

.workspace-picker__option span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.workspace-picker__option svg {
  flex-shrink: 0;
}

.workspace-picker__option:hover, .workspace-picker__option.is-active {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.workspace-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-tree__heading {
  color: var(--color-muted);
  font-size: var(--text-xs);
  margin: .65rem 1.35rem .25rem;
  font-weight: 700;
}

.workspace-tree button {
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .6rem;
}

.workspace-tree__item {
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
  min-width: 0;
  min-height: 2.7rem;
  padding: .55rem .65rem;
  display: flex;
}

.workspace-tree__item span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.workspace-tree__item svg {
  flex-shrink: 0;
  margin-block-start: .15rem;
}

.workspace-tree button:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
}

.workspace-tree button.is-active {
  background: var(--color-accent-subtle);
  color: var(--color-accent-deep);
  font-weight: 700;
}

.workspace-tree__message {
  color: var(--color-muted);
  font-size: var(--text-xs);
  padding: .55rem .65rem;
}

.app-shell:has([data-project-view="kanban"]) .app-shell__content {
  flex-direction: column;
  flex: 1 1 0;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.app-shell:has([data-project-view="kanban"]) .app-shell__main.layout {
  flex-direction: column;
  flex: 1 1 0;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.app-shell__kanban-menu, .app-shell__sidebar-backdrop, .app-shell__sidebar-mobile-close {
  display: none;
}

@media (max-width: 767px) {
  .app-shell:has([data-project-view="kanban"]) .app-shell__content {
    padding: .5rem 0;
  }

  :is(.app-shell:has([data-project-view="kanban"]) .mobile-bottom-nav, .app-shell:has([data-project-view="kanban"]) .app-shell__fab) {
    display: none;
  }
}

.page.app-shell {
  --tempo-navy: #172239;
  --tempo-muted: #77808f;
  --tempo-line: #e6e8ed;
  --tempo-purple: var(--color-accent);
  --tempo-purple-soft: var(--user-accent-soft, #f2f0ff);
  color: var(--tempo-navy);
  background: #f7f8fa;
}

.app-shell__sidebar-brand, .app-shell__sidebar-create, .app-shell__sidebar-brand--project {
  display: none;
}

@media (min-width: 768px) {
  .page.app-shell {
    background: #f7f8fa;
  }

  .app-shell__header {
    z-index: var(--z-sticky);
    border-block-end: 1px solid var(--tempo-line);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #fffffff0;
    height: 4.35rem;
    padding: 0 2.25rem;
    position: sticky;
    inset-block-start: 0;
    box-shadow: 0 1px #17223905;
  }

  .app-shell__header-inner {
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 30rem) auto;
    gap: 1.5rem;
    min-height: 4.35rem;
  }

  .app-shell__header .app-shell__brand {
    display: none;
  }

  .app-shell__header-inner > .global-search {
    grid-column: 2;
    justify-self: center;
    width: 100%;
  }

  .app-shell__header-actions {
    grid-column: 3;
    gap: .75rem;
  }

  .app-shell__search input {
    height: 2.5rem;
    color: var(--tempo-navy);
    background: #f7f8fa;
    border: 1px solid #0000;
    border-radius: .65rem;
    font-size: .78rem;
  }

  .app-shell__search input:focus {
    border-color: #d9d3fb;
    box-shadow: 0 0 0 3px #6856d91f;
  }

  .app-shell__search svg {
    color: #969ead;
  }

  .app-shell__header-actions .user-menu__avatar {
    color: #604a3d;
    box-shadow: none;
    background: #e9e2dd;
  }

  .app-shell__workspace {
    direction: rtl;
    background: #f7f8fa;
    min-height: calc(100vh - 4.35rem);
  }

  .app-shell__sidebar {
    border-inline-start: 1px solid var(--tempo-line);
    background: #fff;
    border-inline-end: 0;
    flex-basis: 16.5rem;
    width: 16.5rem;
    height: calc(100vh - 4.35rem);
    padding: 1.35rem 1rem 1rem;
    inset-block-start: 4.35rem;
    overflow: hidden auto;
  }

  .app-shell__sidebar-brand {
    color: var(--tempo-navy);
    align-items: center;
    gap: .5rem;
    margin: 0 .5rem 1.25rem;
    text-decoration: none;
    display: flex;
  }

  .app-shell__sidebar-brand i {
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-deep));
    width: 2.05rem;
    height: 2.05rem;
    color: var(--color-on-accent);
    border-radius: .62rem;
    place-items: center;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 800;
    display: grid;
  }

  .app-shell__sidebar-brand strong {
    font-size: 1.05rem;
  }

  .app-shell__sidebar-brand span {
    background: var(--color-accent-subtle);
    color: var(--color-accent-deep);
    letter-spacing: .03em;
    border-radius: .3rem;
    padding: .18rem .32rem;
    font-size: .55rem;
    font-weight: 700;
  }

  .app-shell__sidebar-create {
    border: 1px solid var(--color-accent-subtle);
    background: var(--tempo-purple-soft);
    width: 100%;
    color: var(--tempo-navy);
    cursor: pointer;
    font: inherit;
    text-align: start;
    border-radius: .75rem;
    align-items: center;
    gap: .7rem;
    margin-block-end: 1.15rem;
    padding: .72rem .8rem;
    display: flex;
  }

  .app-shell__sidebar-create svg {
    color: var(--tempo-purple);
  }

  .app-shell__sidebar-create span {
    flex-direction: column;
    gap: .08rem;
    display: flex;
  }

  .app-shell__sidebar-create strong {
    font-size: .77rem;
  }

  .app-shell__sidebar-create small {
    color: #969ead;
    font-size: .6rem;
  }

  .app-shell__sidebar-create:hover {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
  }

  .app-shell__sidebar-label {
    color: #9ca2ae;
    margin: .55rem .75rem .45rem;
    font-size: .63rem;
    font-weight: 700;
  }

  .app-shell__nav {
    gap: .18rem;
  }

  .app-shell__nav button {
    color: #596174;
    border-radius: .63rem;
    min-height: 2.9rem;
    padding: .4rem .75rem;
    font-size: .8rem;
    font-weight: 600;
    position: relative;
  }

  .app-shell__nav button:hover {
    color: var(--tempo-purple);
    background: #f6f6f9;
  }

  .app-shell__nav button.is-active {
    background: var(--color-accent-subtle);
    color: var(--color-accent-deep);
    box-shadow: none;
  }

  .app-shell__nav button.is-active:after {
    background: var(--tempo-purple);
    content: "";
    border-radius: 3px;
    width: 3px;
    height: 1.6rem;
    position: absolute;
    inset-inline-start: -1rem;
  }

  .app-shell__sidebar-divider {
    background: var(--tempo-line);
    margin: 1rem .7rem;
  }

  .workspace-tree {
    max-height: 34vh;
    margin-block-end: .35rem;
  }

  .workspace-picker__trigger {
    border-color: var(--color-accent-subtle);
    background: var(--tempo-purple-soft);
    color: var(--color-accent-deep);
    font-size: .76rem;
  }

  .workspace-picker__menu {
    border-color: #eceaf5;
  }

  .workspace-picker__option {
    font-size: .76rem;
  }

  .workspace-tree__heading {
    color: #9ca2ae;
    font-size: .63rem;
  }

  .workspace-tree button {
    color: #687183;
    font-size: .76rem;
  }

  .workspace-tree__item {
    border-radius: .55rem;
    min-height: 2.45rem;
    padding: .45rem .55rem;
  }

  .workspace-tree button:hover, .workspace-tree button.is-active {
    background: var(--tempo-purple-soft);
    color: var(--color-accent-deep);
  }

  .app-shell__content {
    padding: 2rem 2.5rem 3rem;
  }

  .app-shell__content .panel, .app-shell__content .list-panel {
    border-color: var(--tempo-line);
    box-shadow: 0 2px 8px #17223908;
  }
}

@media (max-width: 767px) {
  .page.app-shell {
    padding: 0 1rem calc(var(--mobile-nav-height) + var(--safe-bottom, 0px) + 1rem);
  }

  .app-shell__header {
    border-block-end: 1px solid var(--tempo-line);
    background: #fff;
    margin-inline: -1rem;
    padding: .75rem 1rem;
  }

  .app-shell__header-inner {
    min-height: 2.4rem;
  }

  .app-shell__brand {
    color: var(--tempo-navy);
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
  }

  .app-shell__brand i {
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-deep));
    width: 1.9rem;
    height: 1.9rem;
    color: var(--color-on-accent);
    border-radius: .55rem;
    place-items: center;
    font-size: 1rem;
    font-style: normal;
    display: grid;
  }

  .app-shell__brand span {
    background: var(--color-accent-subtle);
    color: var(--tempo-purple);
    letter-spacing: .03em;
    border-radius: .28rem;
    padding: .16rem .3rem;
    font-size: .5rem;
  }

  .app-shell__header-actions .user-menu__avatar {
    color: #604a3d;
    background: #e9e2dd;
  }

  .mobile-bottom-nav {
    border-color: var(--tempo-line);
    background: #fffffff5;
  }

  .mobile-bottom-nav__item.is-active {
    color: var(--tempo-purple);
    background: var(--tempo-purple-soft);
  }
}

.page.app-shell {
  --color-accent: var(--user-accent, #6856d9);
  --color-accent-deep: var(--user-accent-deep, #5543c3);
  --color-accent-subtle: var(--user-accent-subtle, #efedff);
  --color-focus-ring: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

@media (min-width: 768px) {
  .app-shell__header-inner {
    grid-template-columns: auto minmax(18rem, 30rem) auto;
  }

  .app-shell:has(.project-page) .app-shell__header-inner {
    grid-template-columns: auto minmax(18rem, 30rem) auto;
  }

  .app-shell__header .app-shell__brand {
    color: var(--tempo-navy);
    grid-column: 1;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    display: flex;
    font-size: 1.05rem !important;
  }

  .app-shell__header .app-shell__brand i {
    background: linear-gradient(145deg, var(--color-accent), var(--color-accent-deep));
    width: 2rem;
    height: 2rem;
    color: var(--color-on-accent);
    border-radius: .6rem;
    place-items: center;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 800;
    display: grid;
  }

  .app-shell__header .app-shell__brand strong {
    font-weight: 800;
  }

  .app-shell__header .app-shell__brand span {
    background: var(--color-accent-subtle);
    color: var(--tempo-purple);
    letter-spacing: .03em;
    text-transform: none;
    border-radius: .28rem;
    padding: .18rem .32rem;
    font-weight: 700;
    font-size: .55rem !important;
  }

  .app-shell__header-inner > .global-search {
    grid-column: 2;
    justify-self: center;
    width: 100%;
  }

  .app-shell:has(.project-page) .app-shell__header-inner > .global-search {
    grid-column: 2;
    justify-self: center;
    width: 100%;
  }

  .app-shell__header-inner > .app-shell__header-actions {
    grid-column: 3;
  }

  .app-shell:has(.project-page) .app-shell__header-inner > .app-shell__header-actions {
    grid-column: 3;
  }

  .app-shell .app-shell__header {
    height: 4.4rem;
    padding-inline: 1.9rem;
  }

  .app-shell .app-shell__header-inner {
    grid-template-columns: 15rem minmax(16rem, 1fr) auto;
    min-height: 4.4rem;
  }

  .app-shell .app-shell__header .app-shell__brand {
    color: var(--color-accent-deep);
    flex-direction: row-reverse;
    justify-self: start;
    font-size: 1.2rem !important;
  }

  .app-shell .app-shell__brand span {
    display: none;
  }

  .app-shell .app-shell__brand i {
    width: 2.4rem;
    height: 2.4rem;
  }

  .app-shell .global-search {
    max-width: 35rem;
  }

  .app-shell .app-shell__search input {
    background: #f9faff;
    border: 1px solid #e6eaf3;
    border-radius: .65rem;
    height: 2.8rem;
  }

  .app-shell .app-shell__sidebar {
    background: #fff;
    flex-direction: column;
    flex-basis: 15rem;
    width: 15rem;
    padding: 1rem .85rem;
    display: flex;
  }

  .app-shell .app-shell__sidebar-create, .app-shell .app-shell__sidebar > .app-shell__sidebar-label {
    display: none;
  }

  .app-shell .workspace-picker {
    order: 1;
    margin: 0 .2rem 1rem;
  }

  .app-shell .workspace-picker__trigger {
    color: #1b294b;
    background: #fff;
    border-color: #e7eaf3;
    min-height: 3rem;
  }

  .app-shell .app-shell__nav {
    order: 2;
    gap: .15rem;
  }

  .app-shell .app-shell__nav button {
    border-radius: .5rem;
    min-height: 2.75rem;
  }

  .app-shell .app-shell__sidebar-divider {
    order: 3;
    margin: 1rem .65rem;
  }

  .app-shell .workspace-tree {
    flex: 1;
    order: 4;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }

  .app-shell .workspace-tree__heading {
    margin: .15rem .75rem .45rem;
    font-size: .7rem;
  }

  .app-shell .workspace-tree__item {
    align-items: center;
    min-height: 2.4rem;
  }

  .app-shell .app-shell__content {
    background: #fff;
    padding: .3rem 1.7rem 1.5rem;
  }

  .page.app-shell {
    direction: rtl;
    grid-template-rows: 4.4rem minmax(0, 1fr);
    grid-template-columns: 15rem minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    display: grid;
  }

  .app-shell .atmosphere {
    display: none;
  }

  .app-shell .app-shell__workspace {
    display: contents;
  }

  .app-shell .app-shell__header {
    grid-area: 1 / 2;
    min-width: 0;
    margin: 0;
  }

  .app-shell .app-shell__header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-shell .app-shell__header .app-shell__brand {
    display: none;
  }

  .app-shell .app-shell__header-inner > .global-search {
    grid-column: 1;
    justify-self: center;
  }

  :is(.app-shell .app-shell__header-inner > .app-shell__header-actions, .app-shell:has(.project-page) .app-shell__header-inner > .app-shell__header-actions) {
    grid-column: 2;
  }

  .app-shell .app-shell__sidebar {
    border-inline-start: 0;
    border-inline-end: 1px solid #e6e9f2;
    grid-area: 1 / 1 / 3;
    align-self: start;
    width: 15rem;
    height: 100dvh;
    min-height: 0;
    padding: 0 .85rem 1rem;
    position: sticky;
    top: 0;
    overflow-y: auto;
  }

  .app-shell .app-shell__sidebar-brand--project {
    color: var(--color-accent-deep);
    border-bottom: 1px solid #e6e9f2;
    flex: 0 0 4.4rem;
    order: 0;
    align-items: center;
    gap: .55rem;
    margin: 0 -.85rem 1rem;
    padding: 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    text-decoration: none;
    display: flex;
  }

  .app-shell .app-shell__sidebar-brand--project img {
    object-fit: contain;
    width: auto;
    max-width: 100%;
    height: 3.55rem;
    display: block;
  }

  .app-shell .app-shell__content {
    flex: none;
    grid-area: 2 / 2;
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .app-shell .app-shell__header .app-shell__brand img {
    object-fit: contain;
    width: auto;
    height: 2.3rem;
    display: block;
  }
}

@media (min-width: 768px) {
  .page.app-shell {
    --shell-rail-width: 4.65rem;
    --shell-panel-width: 19.75rem;
    grid-template-columns: var(--shell-panel-width) minmax(0, 1fr);
    background: #fff;
  }

  .page.app-shell.is-sidebar-collapsed {
    grid-template-columns: var(--shell-rail-width) minmax(0, 1fr);
  }

  .app-shell .app-shell__header {
    background: #fff;
    border-color: #e9ebf3;
  }

  :is(.app-shell .app-shell__header-inner, .app-shell:has(.project-page) .app-shell__header-inner) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .app-shell .app-shell__header-title {
    color: #101b42;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    overflow: hidden;
  }

  .app-shell .app-shell__header-inner > .app-shell__header-actions {
    grid-column: 2;
  }

  .app-shell .app-shell__sidebar {
    width: var(--shell-panel-width);
    background: none;
    border: 0;
    flex-direction: row;
    flex-basis: auto;
    height: 100dvh;
    padding: 0;
    display: flex;
    overflow: visible;
    box-shadow: 10px 0 35px #2730590a;
  }

  .app-shell.is-sidebar-collapsed .app-shell__sidebar {
    width: var(--shell-rail-width);
  }

  .app-shell__rail {
    z-index: 2;
    flex: 0 0 var(--shell-rail-width);
    background: #fff;
    border: 1px solid #eef0f7;
    border-radius: 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
    min-height: 0;
    margin: .75rem 0;
    padding: 1rem .45rem;
    display: none;
    position: relative;
    box-shadow: 0 12px 32px #232e560f;
  }

  .app-shell.is-sidebar-collapsed .app-shell__rail {
    display: flex;
  }

  .app-shell__rail-logo {
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
  }

  .app-shell__rail-logo img {
    object-fit: contain;
    width: 2.45rem;
    height: 2.45rem;
    display: block;
  }

  .app-shell__rail-expand {
    color: #5540c8;
    cursor: pointer;
    background: #f0edff;
    border: 0;
    border-radius: .7rem;
    width: 2.5rem;
    height: 2.5rem;
    display: none;
    transform: rotate(180deg);
  }

  .app-shell.is-sidebar-collapsed .app-shell__rail-expand {
    place-items: center;
    display: grid;
  }

  .app-shell__rail-nav, .app-shell__rail-workspaces, .app-shell__rail-bottom {
    justify-items: center;
    gap: .4rem;
    width: 100%;
    display: grid;
  }

  .app-shell__rail-nav {
    gap: .6rem;
  }

  .app-shell__rail-nav a, .app-shell__rail-nav button, .app-shell__rail-workspaces a, .app-shell__rail-workspaces button, .app-shell__rail-bottom > a {
    color: #536280;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: .8rem;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    text-decoration: none;
    display: grid;
  }

  .app-shell__rail-nav a:hover, .app-shell__rail-nav button:hover, .app-shell__rail-nav .is-active, .app-shell__rail-workspaces a:hover {
    color: #5941cf;
    background: #f0edff;
  }

  .app-shell__rail-workspaces {
    border-top: 1px solid #e4e7f0;
    gap: .5rem;
    padding-top: 1rem;
  }

  .app-shell__rail-workspaces button {
    color: #25314f;
    background: #e9ecf4;
    border-radius: .7rem;
    width: 2.3rem;
    height: 2.3rem;
    font-weight: 750;
  }

  .app-shell__rail-workspaces button.is-active {
    color: #fff;
    background: linear-gradient(145deg, #825ff1, #5a45d3);
    box-shadow: 0 4px 10px #6853dd33;
  }

  .app-shell__rail-workspaces a {
    border: 1px solid #e1e6f1;
    width: 2.4rem;
    height: 2.4rem;
  }

  .app-shell__rail-bottom {
    gap: 1rem;
    margin-top: auto;
  }

  .app-shell__rail-bottom .notif-bell {
    place-items: center;
    display: grid;
  }

  .app-shell__rail-bottom .notif-bell__btn {
    color: #536280;
    width: 2.8rem;
    height: 2.8rem;
  }

  .app-shell__rail-bottom .app-shell__rail-avatar {
    aspect-ratio: 1;
    color: #202d4a;
    background: #dfe4f2;
    border-radius: 50%;
    flex: 0 0 2.8rem;
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    font-size: .8rem;
    font-weight: 800;
    overflow: hidden;
  }

  .app-shell__rail-avatar img, .app-shell__profile-avatar img {
    object-fit: cover;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: block;
  }

  .app-shell__sidebar-panel {
    background: #fff;
    border: 1px solid #eef0f7;
    border-radius: 1.25rem 0 0 1.25rem;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin: .75rem 0 .75rem .5rem;
    padding: .7rem .85rem .9rem;
    display: flex;
    overflow: hidden auto;
    box-shadow: 0 12px 32px #232e560d;
  }

  .app-shell.is-sidebar-collapsed .app-shell__sidebar-panel {
    display: none;
  }

  .app-shell__sidebar-heading {
    order: 0;
    justify-content: space-between;
    align-items: center;
    min-height: 3.5rem;
    margin-bottom: .65rem;
    display: flex;
  }

  .app-shell .app-shell__sidebar-brand--project {
    flex: initial;
    border: 0;
    width: 8.7rem;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .app-shell .app-shell__sidebar-brand--project img {
    object-position: right center;
    width: 100%;
    height: auto;
    max-height: 3rem;
  }

  .app-shell__sidebar-collapse {
    color: #75839e;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: .5rem;
    place-items: center;
    width: 2rem;
    height: 2rem;
    display: grid;
  }

  .app-shell__sidebar-collapse:hover {
    color: #5941cf;
    background: #f1efff;
  }

  .app-shell .workspace-picker {
    order: 1;
    margin: .2rem 0 .85rem;
  }

  .app-shell .workspace-picker__trigger {
    color: #1c2946;
    background: #f6f7fc;
    border: 0;
    border-radius: .85rem;
    gap: .7rem;
    width: 100%;
    min-height: 3.55rem;
    padding: .6rem .75rem;
    font-size: .8rem;
    box-shadow: inset 0 0 0 1px #ebedf5;
  }

  .app-shell .workspace-picker__trigger .workspace-picker__avatar {
    background: #e2e5f0;
    border-radius: .65rem;
    flex: 0 0 2.25rem;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    font-weight: 800;
    display: grid;
  }

  .app-shell .workspace-picker__trigger .workspace-picker__text {
    flex: 1;
    gap: .1rem;
    min-width: 0;
    display: grid;
  }

  .app-shell .workspace-picker__trigger .workspace-picker__text strong, .app-shell .workspace-picker__trigger .workspace-picker__text small {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .app-shell .workspace-picker__trigger .workspace-picker__text small {
    color: #8290aa;
    font-size: .65rem;
    font-weight: 500;
  }

  .app-shell__sidebar-panel > .app-shell__sidebar-label {
    display: none;
  }

  .app-shell__sidebar-search {
    order: 2;
    margin-bottom: 1rem;
  }

  .app-shell__sidebar-search .global-search {
    width: 100%;
    max-width: none;
  }

  .app-shell__sidebar-search .app-shell__search {
    direction: rtl;
    background: #fafbfe;
    border: 1px solid #e4e8f3;
    border-radius: .8rem;
    grid-template-columns: 2.4rem minmax(0, 1fr) 3rem;
    align-items: center;
    width: 100%;
    display: grid;
  }

  .app-shell__sidebar-search .app-shell__search:focus-within {
    border-color: #d9d3fb;
    box-shadow: 0 0 0 3px #6856d91f;
  }

  .app-shell__sidebar-search .app-shell__search input {
    text-align: right;
    direction: rtl;
    background: none;
    border: 0;
    outline: 0;
    grid-area: 1 / 2;
    width: 100%;
    min-width: 0;
    height: 2.8rem;
    padding: 0;
    font-size: .75rem;
  }

  .app-shell__sidebar-search .app-shell__search input:focus {
    box-shadow: none;
    border: 0;
  }

  .app-shell .app-shell__sidebar-search .app-shell__search input, .app-shell .app-shell__sidebar-search .app-shell__search input:hover, .app-shell .app-shell__sidebar-search .app-shell__search input:focus, .app-shell .app-shell__sidebar-search .app-shell__search input:focus-visible {
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    outline: 0;
  }

  .app-shell__sidebar-search .app-shell__search svg {
    grid-area: 1 / 1;
    justify-self: center;
    position: static;
    transform: none;
  }

  .app-shell__sidebar-search .global-search__shortcut {
    color: #8190aa;
    pointer-events: none;
    background: #eef0f8;
    border-radius: .3rem;
    grid-area: 1 / 3;
    justify-self: center;
    padding: .2rem .3rem;
    font-size: .65rem;
    line-height: 1;
  }

  .app-shell__sidebar-search .global-search__results {
    width: min(26rem, 80vw);
    right: 0;
  }

  .app-shell .app-shell__nav {
    order: 3;
    gap: .15rem;
    display: grid;
  }

  .app-shell .app-shell__nav button {
    color: #4b5b7b;
    border-radius: .72rem;
    gap: .8rem;
    min-height: 2.65rem;
    padding: .45rem .7rem;
    font-size: .8rem;
    font-weight: 650;
  }

  .app-shell .app-shell__nav button:hover, .app-shell .app-shell__nav button.is-active {
    color: #5540c8;
    background: #f0edff;
  }

  .app-shell .app-shell__nav button.is-active:after {
    display: none;
  }

  .app-shell .app-shell__sidebar-divider {
    background: #e8ebf4;
    order: 4;
    margin: 1rem .35rem .7rem;
  }

  .app-shell .workspace-tree {
    flex: none;
    order: 5;
    max-height: 13rem;
    margin: 0;
    overflow-y: auto;
  }

  .app-shell .workspace-tree__heading {
    color: #8591ab;
    letter-spacing: .04em;
    margin: .2rem .65rem .55rem;
    font-size: .67rem;
  }

  .app-shell .workspace-tree__item {
    color: #4b5b7b;
    white-space: nowrap;
    align-items: center;
    gap: .55rem;
    min-height: 2.25rem;
    padding: .4rem .6rem;
    font-size: .72rem;
  }

  .app-shell .workspace-tree__item span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .app-shell .workspace-tree__item svg {
    fill: currentColor;
    stroke: currentColor;
    width: 9px;
    height: 9px;
    margin: 0;
  }

  .app-shell .workspace-tree__item.is-active {
    color: #5540c8;
    background: #f0edff;
  }

  .app-shell__sidebar-shortcuts {
    border-top: 1px solid #e8ebf4;
    order: 6;
    gap: .2rem;
    margin-top: 1rem;
    padding: 1rem .35rem 0;
    display: grid;
  }

  .app-shell__sidebar-shortcuts p {
    color: #8591ab;
    letter-spacing: .04em;
    margin: 0 .3rem .5rem;
    font-size: .67rem;
    font-weight: 750;
  }

  .app-shell__sidebar-shortcuts a {
    color: #4b5b7b;
    border-radius: .6rem;
    align-items: center;
    gap: .7rem;
    min-height: 2.2rem;
    padding: .3rem .35rem;
    font-size: .75rem;
    text-decoration: none;
    display: flex;
  }

  .app-shell__sidebar-shortcuts a:hover {
    color: #5540c8;
    background: #f0edff;
  }

  .app-shell__sidebar-settings {
    border-top: 1px solid #e8ebf4;
    order: 7;
    gap: .2rem;
    margin-top: 1rem;
    padding: 1rem .35rem 0;
    display: grid;
  }

  .app-shell__sidebar-settings p {
    color: #8591ab;
    letter-spacing: .04em;
    margin: 0 .3rem .5rem;
    font-size: .67rem;
    font-weight: 750;
  }

  .app-shell__sidebar-settings button {
    color: #4b5b7b;
    cursor: pointer;
    min-height: 2.2rem;
    font: inherit;
    text-align: start;
    background: none;
    border: 0;
    border-radius: .6rem;
    align-items: center;
    gap: .7rem;
    padding: .3rem .35rem;
    font-size: .75rem;
    display: flex;
  }

  .app-shell__sidebar-settings button:hover, .app-shell__sidebar-settings button.is-active {
    color: #5540c8;
    background: #f0edff;
  }

  .app-shell__sidebar-profile {
    color: #1c2946;
    border-top: 1px solid #e8ebf4;
    order: 8;
    align-items: center;
    gap: .65rem;
    min-height: 3.9rem;
    margin-top: auto;
    padding: 1rem .25rem 0;
    text-decoration: none;
    display: flex;
  }

  .app-shell__profile-avatar {
    background: #dfe4f2;
    border-radius: 50%;
    flex: 0 0 2.5rem;
    place-items: center;
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    font-size: .8rem;
    font-weight: 800;
    display: grid;
    position: relative;
    overflow: hidden;
  }

  .app-shell__profile-avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .app-shell__profile-avatar i {
    background: #25bf82;
    border: 2px solid #fff;
    border-radius: 50%;
    width: .65rem;
    height: .65rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .app-shell__sidebar-profile > span:nth-child(2) {
    gap: .1rem;
    min-width: 0;
    display: grid;
  }

  .app-shell__sidebar-profile strong, .app-shell__sidebar-profile small {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .app-shell__sidebar-profile strong {
    font-size: .76rem;
  }

  .app-shell__sidebar-profile small {
    color: #8591ab;
    font-size: .65rem;
  }

  .app-shell__profile-more {
    color: #75839e;
    margin-inline-start: auto;
  }

  .app-shell .app-shell__content {
    background: #fff;
  }
}

@media (max-width: 767px) {
  .app-shell__header-title {
    display: none;
  }

  .app-shell__kanban-menu {
    touch-action: manipulation;
    align-items: center;
    gap: .45rem;
    min-width: 3.2rem;
    min-height: 2.75rem;
    padding-inline: .65rem;
    display: inline-flex;
  }

  .app-shell__menu-icon {
    gap: 3px;
    width: 1.15rem;
    display: grid;
  }

  .app-shell__menu-icon i {
    background: currentColor;
    border-radius: 2px;
    width: 100%;
    height: 2px;
    display: block;
  }

  .app-shell .app-shell__sidebar {
    z-index: 101;
    width: min(21rem, 88vw);
    height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    visibility: hidden;
    background: #fff;
    border: 0;
    transition: transform .22s, visibility 0s linear .22s;
    display: flex;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    overflow: hidden;
    transform: translateX(110%);
    box-shadow: -18px 0 48px #1722393d;
  }

  .app-shell.is-sidebar-open .app-shell__sidebar {
    visibility: visible;
    transition-delay: 0s;
    transform: translateX(0);
  }

  .app-shell .app-shell__sidebar-panel {
    overscroll-behavior: contain;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden auto;
  }

  .app-shell__rail {
    display: none;
  }

  .app-shell__sidebar-heading {
    justify-content: space-between;
    align-items: center;
    min-height: 3rem;
    margin-bottom: .65rem;
    display: flex;
  }

  .app-shell .app-shell__sidebar-brand--project {
    width: 8.5rem;
    display: flex;
  }

  .app-shell .app-shell__sidebar-brand--project img {
    width: 100%;
    height: auto;
    display: block;
  }

  .app-shell__sidebar-collapse {
    display: none;
  }

  .app-shell__sidebar-mobile-close {
    color: #4b5872;
    width: 2.75rem;
    height: 2.75rem;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    background: #f3f4f8;
    border: 0;
    border-radius: .7rem;
    place-items: center;
    padding: 0;
    font-size: 1.7rem;
    line-height: 1;
    display: grid;
  }

  .app-shell__sidebar-backdrop {
    z-index: 100;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: #11182785;
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .app-shell .app-shell__nav {
    gap: .2rem;
    display: grid;
  }

  .app-shell .app-shell__nav button, .app-shell__sidebar-settings button, .app-shell__sidebar-shortcuts a {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .app-shell__sidebar {
    transition: none;
  }
}

.app-shell .app-shell__search input[type="search"], .app-shell .app-shell__search input[type="search"]:hover, .app-shell .app-shell__search input[type="search"]:focus, .app-shell .app-shell__search input[type="search"]:focus-visible {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

@media (min-width: 768px) {
  .page.app-shell, .page.app-shell.is-sidebar-collapsed {
    --shell-rail-width: 4.4rem;
    --shell-workspace-width: 17.5rem;
    --shell-total-width: calc(var(--shell-rail-width) + var(--shell-workspace-width));
    grid-template-columns: var(--shell-total-width) minmax(0, 1fr);
  }

  .page.app-shell.is-sidebar-collapsed {
    --shell-total-width: var(--shell-rail-width);
  }

  .app-shell .app-shell__sidebar, .app-shell.is-sidebar-collapsed .app-shell__sidebar {
    width: var(--shell-total-width);
    flex-basis: var(--shell-total-width);
    box-shadow: none;
  }

  .app-shell .app-shell__rail {
    display: none;
  }

  .app-shell .app-shell__sidebar-panel {
    flex: 0 0 var(--shell-workspace-width);
    border: 0;
    box-shadow: none;
    background: #f8f9fc;
    border-inline-end: 1px solid #e7e6ef;
    border-radius: 0;
    margin: 0;
    padding: 1.1rem .8rem .9rem;
  }

  .app-shell.is-sidebar-collapsed .app-shell__sidebar-panel {
    display: none;
  }

  .app-shell .app-shell__content {
    min-width: 0;
  }
}

.workspace-rail {
  flex: 0 0 var(--shell-rail-width, 4.4rem);
  background: #28213f;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  min-height: 0;
  padding: 1rem .45rem;
  display: flex;
}

.workspace-rail__brand, .workspace-rail__add, .workspace-rail__avatar {
  cursor: pointer;
  border: 0;
  border-radius: .9rem;
  flex: 0 0 3.1rem;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  padding: 0;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
  display: grid;
}

.workspace-rail__brand {
  background: #6c50dd;
  margin-block-end: .3rem;
}

.workspace-rail__brand img {
  object-fit: contain;
  width: 2.35rem;
  height: 2.35rem;
  display: block;
}

.workspace-rail__list {
  scrollbar-width: thin;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: .7rem;
  width: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden auto;
}

.workspace-rail__avatar {
  color: #fff;
  font: inherit;
  background: #7358df;
  font-size: 1.15rem;
  font-weight: 800;
}

.workspace-rail__avatar img {
  border-radius: inherit;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.workspace-rail__avatar:hover, .workspace-rail__avatar.is-active {
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #a691ff;
}

.workspace-rail__avatar:disabled {
  cursor: wait;
}

.workspace-rail__add {
  color: #fff;
  background: none;
  border: 1px solid #817a9c;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
}

.workspace-rail__add:hover {
  background: #42355e;
}

.app-shell__workspace-identity {
  gap: .15rem;
  min-width: 0;
  display: grid;
}

.app-shell__workspace-identity strong {
  color: #202c4c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  overflow: hidden;
}

.app-shell__workspace-identity small {
  color: #8c97ad;
  font-size: .73rem;
}

.app-shell .app-shell__sidebar-heading {
  flex: none;
  min-height: 3rem;
  padding-inline: .45rem;
}

.app-shell .app-shell__sidebar-search {
  margin-bottom: .7rem;
}

.app-shell .app-shell__nav {
  border-bottom: 1px solid #e4e7f0;
  padding-bottom: .8rem;
}

.app-shell .app-shell__sidebar-settings {
  flex: none;
  order: 5;
  margin-top: .8rem;
  padding-top: .8rem;
}

.app-shell .app-shell__sidebar-profile {
  flex: none;
  order: 6;
}

.workspace-projects {
  flex-direction: column;
  flex: none;
  order: 4;
  min-height: 0;
  display: flex;
}

.workspace-projects__heading {
  flex: none;
  justify-content: space-between;
  align-items: center;
  margin: .35rem .45rem .3rem;
  display: flex;
}

.workspace-projects__heading h2 {
  color: #65718b;
  margin: 0;
  font-size: .78rem;
  font-weight: 750;
}

.workspace-projects__heading a {
  color: #687596;
  border-radius: .45rem;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
}

.workspace-projects__heading a:hover {
  color: var(--color-accent-deep);
  background: #eeebff;
}

.workspace-projects__list {
  overflow: visible;
}

.workspace-projects__more {
  min-height: 2.4rem;
  color: var(--color-accent-deep);
  border-radius: .6rem;
  justify-content: space-between;
  align-items: center;
  margin: .4rem .45rem 0;
  padding: .35rem .5rem;
  font-size: .76rem;
  font-weight: 750;
  text-decoration: none;
  display: flex;
}

.workspace-projects__more:hover, .workspace-projects__more:focus-visible, .workspace-projects__more.is-active {
  background: #eeeaff;
}

.workspace-projects__more span {
  color: #7b86a1;
  font-size: .7rem;
}

.workspace-projects__row {
  border-radius: .6rem;
  align-items: center;
  display: flex;
}

.workspace-projects__row.is-dragging {
  opacity: .5;
}

.workspace-projects__item {
  color: #425172;
  cursor: pointer;
  min-width: 0;
  min-height: 2.65rem;
  font: inherit;
  text-align: start;
  background: none;
  border: 0;
  border-radius: .6rem;
  flex: auto;
  align-items: center;
  gap: .65rem;
  padding: .35rem .45rem;
  font-size: .78rem;
  display: flex;
}

.workspace-projects__item > span:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.workspace-projects__item:hover, .workspace-projects__item.is-active {
  color: var(--color-accent-deep);
  background: #eeeaff;
}

.workspace-projects__item.is-active {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: calc(.45rem - 3px);
  font-weight: 750;
}

.workspace-projects__move {
  opacity: 0;
  flex: none;
  gap: .05rem;
  display: flex;
}

.workspace-projects__row:hover .workspace-projects__move, .workspace-projects__row:focus-within .workspace-projects__move {
  opacity: 1;
}

.workspace-projects__move button {
  color: #697694;
  cursor: pointer;
  width: 1.35rem;
  height: 1.65rem;
  font: inherit;
  background: none;
  border: 0;
  border-radius: .3rem;
  padding: 0;
}

.workspace-projects__move button:hover:not(:disabled) {
  color: var(--color-accent-deep);
  background: #eae5ff;
}

.workspace-projects__move button:disabled {
  opacity: .3;
  cursor: default;
}

.workspace-projects__order-error {
  color: #bb334b;
  margin: .2rem .5rem;
  font-size: .72rem;
}

.workspace-projects__icon {
  color: #fff;
  background: #6e52df;
  border-radius: .48rem;
  flex: 0 0 1.8rem;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
}

.workspace-projects__icon--1 {
  background: #ff9c2d;
}

.workspace-projects__icon--2 {
  background: #08bba2;
}

.workspace-projects__icon--3 {
  background: #ee477b;
}

.workspace-projects__icon--4 {
  background: #367ff3;
}

.workspace-projects__icon--5 {
  background: #66738f;
}

.workspace-projects__empty, .workspace-projects__retry {
  color: #7c879e;
  margin: .5rem;
  font-size: .76rem;
}

.workspace-projects__retry {
  cursor: pointer;
  text-align: start;
  background: none;
  border: 0;
}

@media (hover: none) {
  .workspace-projects__move {
    opacity: 1;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .page.app-shell {
    --shell-rail-width: 3.8rem;
    --shell-workspace-width: 14.5rem;
  }

  .app-shell .app-shell__sidebar-panel {
    padding-inline: .5rem;
  }
}

@media (max-width: 767px) {
  .app-shell .app-shell__sidebar {
    flex-direction: row;
    width: min(23rem, 94vw);
    padding: 0;
  }

  .app-shell .workspace-rail {
    --shell-rail-width: 3.7rem;
    padding: .9rem .25rem;
  }

  .workspace-rail__brand, .workspace-rail__add, .workspace-rail__avatar {
    flex-basis: 2.7rem;
    width: 2.7rem;
    height: 2.7rem;
  }

  .app-shell .app-shell__sidebar-panel {
    padding: max(.7rem, env(safe-area-inset-top)) .6rem max(.7rem, env(safe-area-inset-bottom));
    background: #f8f9fc;
  }

  .app-shell .app-shell__sidebar-mobile-close {
    flex: 0 0 2.4rem;
    display: grid;
  }

  .app-shell .app-shell__sidebar-heading {
    gap: .3rem;
  }

  .app-shell .workspace-projects {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-rail__avatar {
    transition: none;
  }
}

/* [project]/libs/modules/tasks/src/CalendarView.css [app-client] (css) */
.calendar-view {
  gap: 1rem;
  margin-top: .35rem;
  display: grid;
}

.calendar-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.calendar-toolbar__center {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  display: flex;
}

.calendar-toolbar__title {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.calendar-weekdays {
  text-align: center;
  color: var(--muted);
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
  padding-inline: .1rem;
  font-size: .78rem;
  font-weight: 700;
  display: grid;
}

.calendar-weekdays span {
  padding: .25rem 0;
}

.calendar-grid-wrap {
  position: relative;
}

.calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
  transition: opacity .18s;
  display: grid;
}

.calendar-grid.is-loading {
  opacity: .55;
  pointer-events: none;
}

.calendar-cell-wrap {
  min-width: 0;
  position: relative;
}

.calendar-cell {
  border: 1px solid var(--line);
  text-align: start;
  cursor: pointer;
  width: 100%;
  min-height: 6.25rem;
  color: inherit;
  font: inherit;
  background: #ffffffe0;
  border-radius: 12px;
  flex-direction: column;
  gap: .35rem;
  padding: .45rem;
  transition: border-color .12s, background .12s, box-shadow .12s;
  display: flex;
}

.calendar-cell.is-pad {
  background: none;
  border-color: #0000;
  min-height: 0;
  padding: 0;
}

.calendar-cell.is-today .calendar-cell__day {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
}

.calendar-cell.is-active, .calendar-cell.is-hover {
  background: #0f766e12;
  border-color: #0f766e73;
  box-shadow: inset 0 0 0 1px #0f766e1f;
}

.calendar-cell.is-drop {
  background: #0f766e24;
  border-color: #0f766ea6;
}

.calendar-cell.has-overdue:not(.is-active):not(.is-hover) {
  border-color: #d9770647;
}

.calendar-cell__day {
  font-variant-numeric: tabular-nums;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
}

.calendar-cell__pills {
  flex-direction: column;
  flex: 1;
  gap: .2rem;
  min-width: 0;
  display: flex;
}

.calendar-pill {
  max-width: 100%;
  color: var(--accent-deep);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: #0f766e1f;
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: .25rem;
  padding: .18rem .45rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
  display: inline-flex;
}

.calendar-pill__text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.calendar-pill__dot {
  background: currentColor;
  border-radius: 50%;
  flex-shrink: 0;
  width: .35rem;
  height: .35rem;
}

@media (prefers-reduced-motion: no-preference) {
  .calendar-pill.is-running .calendar-pill__dot {
    animation: 1.5s ease-in-out infinite calendar-pulse;
  }
}

@keyframes calendar-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

.calendar-pill--low {
  color: var(--muted);
  background: #1a242112;
}

.calendar-pill--high {
  color: #9a3412;
  background: #d9770624;
}

.calendar-pill--urgent {
  color: #b91c1c;
  background: #dc26261f;
}

.calendar-pill.is-overdue {
  color: #991b1b;
  background: #fee2e2d9;
  border-color: #dc262659;
}

.calendar-pill--more {
  color: var(--muted);
  cursor: default;
  background: #1a24210f;
  align-self: flex-start;
}

.calendar-pill.is-dragging {
  opacity: .5;
}

@media (prefers-reduced-motion: no-preference) {
  .calendar-pill.is-dragging {
    transform: scale(.98);
  }
}

.calendar-skeleton {
  pointer-events: none;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .4rem;
  display: grid;
  position: absolute;
  inset: 0;
}

.calendar-skeleton__cell {
  background: linear-gradient(110deg, #1a24210f 30%, #1a24211a 50%, #1a24210f 70%) 0 0 / 200% 100%;
  border-radius: 12px;
  min-height: 6.25rem;
}

@media (prefers-reduced-motion: no-preference) {
  .calendar-skeleton__cell {
    animation: 1.2s ease-in-out infinite calendar-shimmer;
  }
}

.calendar-skeleton__cell.is-pad {
  opacity: .35;
}

@keyframes calendar-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.calendar-popover {
  z-index: 20;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: 12px;
}

.calendar-popover--hover {
  inset-inline: 0;
  max-height: 11rem;
  padding: .55rem .65rem;
  position: absolute;
  top: calc(100% + .35rem);
  overflow: auto;
}

.calendar-popover--panel {
  background: #ffffffeb;
  padding: .85rem 1rem;
}

.calendar-popover__head {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
  display: flex;
}

.calendar-popover__head h3 {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
}

.calendar-popover__empty {
  color: var(--muted);
  margin: 0;
  font-size: .85rem;
}

.calendar-popover__list {
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.calendar-popover__task {
  border: 1px solid var(--line);
  text-align: start;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: #fff;
  border-radius: 10px;
  gap: .12rem;
  padding: .5rem .65rem;
  transition: background .12s;
  display: grid;
}

.calendar-popover__task:hover {
  background: #0f766e0f;
}

.calendar-popover__task strong {
  font-size: .88rem;
}

.calendar-popover__task span {
  color: var(--muted);
  font-size: .76rem;
}

.calendar-popover__task--high {
  border-inline-start: 3px solid #d97706;
}

.calendar-popover__task--urgent, .calendar-popover__task.is-overdue {
  border-inline-start: 3px solid #dc2626;
}

.calendar-popover__task--low {
  border-inline-start: 3px solid var(--muted);
}

.calendar-popover__hint {
  color: var(--muted);
  margin: .65rem 0 0;
  font-size: .78rem;
}

.calendar-popover--hover .calendar-popover__list {
  gap: .2rem;
}

.calendar-popover--hover .calendar-popover__task {
  background: none;
  border: 0;
  padding: .35rem .45rem;
}

.calendar-popover--hover .calendar-popover__task strong {
  font-size: .78rem;
  font-weight: 600;
}

.calendar-popover--hover .calendar-popover__task span {
  display: none;
}

.calendar-empty-month {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff8c;
  border-radius: 14px;
  padding: 1.25rem 1rem;
}

.calendar-empty-month strong {
  color: var(--ink-soft);
  margin-bottom: .35rem;
  font-size: .95rem;
  display: block;
}

.calendar-empty-month p {
  margin: 0;
  font-size: .84rem;
}

@media (max-width: 720px) {
  .calendar-cell {
    min-height: 4.5rem;
    padding: .35rem;
  }

  .calendar-pill {
    padding: .12rem .35rem;
    font-size: .62rem;
  }

  .calendar-skeleton__cell {
    min-height: 4.5rem;
  }

  .calendar-popover--hover {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-grid {
    transition: none;
  }

  .calendar-skeleton__cell {
    animation: none;
  }
}

/* [project]/libs/modules/tasks/src/KanbanBoard.css [app-client] (css) */
.kanban {
  min-width: 0;
  height: 40rem;
  min-height: 0;
  margin-top: .25rem;
  display: flex;
}

.kanban-board {
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: auto;
  overscroll-behavior: contain;
  flex: 1;
  align-items: stretch;
  gap: .7rem;
  min-width: 0;
  min-height: 0;
  padding-bottom: .65rem;
  display: flex;
  overflow: auto hidden;
}

.kanban-column {
  --kanban-accent: #4258c9;
  scroll-snap-align: start;
  background: #f3f4f7;
  border: 1px solid #e7e9ef;
  border-radius: 12px;
  flex-direction: column;
  flex: 0 0 284px;
  gap: .65rem;
  width: 284px;
  min-width: 284px;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: .75rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
  display: flex;
}

.kanban-column.is-drop {
  background: #0f766e12;
  border-color: #0f766e8c;
  box-shadow: inset 0 0 0 2px #0f766e2e;
}

.kanban-column__head {
  flex-shrink: 0;
  gap: .45rem;
  display: grid;
}

.kanban-column__accent {
  background: var(--kanban-accent);
  opacity: .85;
  border-radius: 999px;
  width: 2.25rem;
  height: 3px;
  display: block;
}

.kanban-column.is-dragging-column {
  opacity: .45;
}

.kanban-column-drop-indicator {
  background: var(--accent, #4258c9);
  border-radius: 999px;
  flex-shrink: 0;
  align-self: stretch;
  width: 4px;
  box-shadow: 0 0 0 1px #0f766e33;
}

.kanban-column__head.is-draggable {
  cursor: grab;
}

.kanban-column__head.is-draggable:active {
  cursor: grabbing;
}

.kanban-column__grip {
  opacity: .35;
  background-image: radial-gradient(currentColor 1.1px, #0000 1.2px);
  background-position: center;
  background-size: .32rem .32rem;
  flex-shrink: 0;
  width: .7rem;
  height: .95rem;
  display: inline-block;
}

.kanban-column__title-row {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.kanban-column__title {
  min-width: 0;
  font-family: var(--font-display);
  color: var(--ink);
  flex: 1;
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
}

.kanban-column__count {
  font-variant-numeric: tabular-nums;
  min-width: 1.4rem;
  height: 1.4rem;
  color: var(--muted);
  background: #1a242114;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 .4rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
}

.kanban-column__toolbar {
  opacity: .72;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.kanban-column__add-task {
  margin-inline-end: auto;
}

.kanban-column__icon-btn {
  width: 1.85rem;
  height: 1.85rem;
}

.kanban-column__icon-btn--danger:hover:not(:disabled) {
  color: #b91c1c;
  background: #dc26261a;
}

.kanban-column__system-note {
  color: var(--muted);
  margin-inline-start: auto;
  font-size: .72rem;
  font-weight: 600;
}

.kanban-column__rename {
  gap: .4rem;
  display: grid;
}

.kanban-column__rename input {
  border: 1px solid var(--line);
  min-height: 2.25rem;
  font: inherit;
  border-radius: 10px;
  padding: .4rem .65rem;
}

.kanban-column__cards {
  overscroll-behavior-y: contain;
  overscroll-behavior-x: auto;
  scrollbar-gutter: stable;
  border-radius: 10px;
  flex: 1;
  align-content: start;
  gap: .6rem;
  min-height: 0;
  padding-inline-end: .1rem;
  transition: background .15s;
  display: grid;
  overflow: hidden auto;
}

.kanban-column__page-status, .kanban-column__page-end {
  text-align: center;
  color: var(--muted);
  margin: 0;
  padding: .6rem;
  font-size: .78rem;
}

.kanban-column__page-sentinel {
  height: 1px;
}

.kanban-column__page-status:before {
  content: "";
  border: 2px solid;
  vertical-align: -.12rem;
  border-inline-end-color: #0000;
  border-radius: 50%;
  width: .75rem;
  height: .75rem;
  margin-inline-end: .4rem;
  animation: .7s linear infinite kanban-page-spin;
  display: inline-block;
}

@keyframes kanban-page-spin {
  to {
    transform: rotate(360deg);
  }
}

.kanban-column__page-error {
  color: #b91c1c;
  border: 1px solid #b91c1c33;
  border-radius: 10px;
  justify-items: center;
  gap: .35rem;
  padding: .65rem;
  font-size: .78rem;
  display: grid;
}

.kanban-column.is-drop .kanban-column__cards {
  background: #0f766e0a;
}

.kanban-drop-indicator {
  background: var(--accent, #4258c9);
  border-radius: 999px;
  flex-shrink: 0;
  height: 3px;
  box-shadow: 0 0 0 1px #0f766e33;
}

.kanban-column__empty {
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  background: #ffffff73;
  border-radius: 12px;
  justify-items: center;
  gap: .45rem;
  margin: 0;
  padding: 1.35rem .75rem;
  font-size: .84rem;
  display: grid;
}

.kanban-column__empty-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--muted);
  opacity: .7;
  border: 1px dashed #1a24212e;
  border-radius: 999px;
  place-items: center;
  font-size: 1rem;
  display: grid;
}

.kanban-column__empty p {
  margin: 0;
}

.kanban-column--add {
  background: #ffffff73;
  border-style: dashed;
}

.kanban-column__add-form {
  gap: .55rem;
  display: grid;
}

.kanban-column__add-form input {
  border: 1px solid var(--line);
  min-height: 2.25rem;
  font: inherit;
  border-radius: 10px;
  padding: .4rem .65rem;
}

.kanban-card {
  border: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  background: #fff;
  border-radius: 10px;
  align-self: start;
  gap: .65rem;
  padding: .75rem;
  display: grid;
  box-shadow: 0 1px 3px #1722390d;
}

@media (prefers-reduced-motion: no-preference) {
  .kanban-card {
    transition: transform var(--duration-normal) var(--ease-out),
      box-shadow var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      opacity var(--duration-fast) ease;
  }
}

.kanban-card:active {
  cursor: grabbing;
}

@media (prefers-reduced-motion: no-preference) {
  .kanban-card.is-dragging {
    opacity: .45;
    transform: rotate(1.5deg)scale(1.02);
    box-shadow: 0 14px 28px #1a24211f;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kanban-card.is-dragging {
    opacity: .75;
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
  }
}

.kanban-card.is-running {
  background: #0f766e0d;
  border-color: #0f766e61;
}

.kanban-card.is-blocked {
  background: #fffbebd9;
  border-color: #d9770659;
}

.kanban-card.is-busy {
  opacity: .88;
}

.kanban-card__live {
  color: var(--accent-deep);
  background: #0f766e1a;
  border-radius: 8px;
  align-items: center;
  gap: .4rem;
  padding: .3rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
}

.kanban-card__live-dot {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: .45rem;
  height: .45rem;
}

.kanban-card__live-time {
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.kanban-card__body {
  gap: .35rem;
  min-width: 0;
  display: grid;
}

.kanban-card__blocked {
  justify-self: start;
  font-size: .72rem;
}

.kanban-card__title {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.55;
}

.kanban-card__eyebrow {
  color: #8a92a1;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 700;
  display: flex;
}

.kanban-card__priority {
  white-space: nowrap;
  background: #f0f1f4;
  border-radius: 99px;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: .12rem .42rem;
  line-height: 1.4;
}

.kanban-card__priority--urgent {
  color: #c52b3f;
  background: #feecee;
}

.kanban-card__priority--high {
  color: #a85c06;
  background: #fff0df;
}

.kanban-card__priority--medium {
  color: #604bc8;
  background: #eeeaff;
}

.kanban-card__priority--low {
  color: #24734f;
  background: #e8f6ef;
}

.kanban-card__assignees {
  color: var(--muted);
  overflow-wrap: anywhere;
  margin: 0;
  font-size: .76rem;
  line-height: 1.4;
}

.kanban-card__assignees-label {
  color: var(--ink-soft);
  font-weight: 700;
}

.kanban-card__project {
  color: var(--muted);
  margin: 0;
  font-size: .76rem;
}

.kanban-card__desc {
  color: var(--ink-soft);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.kanban-card__labels {
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  display: flex;
}

.kanban-card__label {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  max-width: 7rem;
  padding: .12rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  display: inline-block;
  overflow: hidden;
}

.kanban-card__label-overflow {
  color: var(--muted);
  background: #1a24210f;
  border-radius: 999px;
  padding: .1rem .35rem;
  font-size: .72rem;
  font-weight: 700;
}

.kanban-card__checklist {
  color: var(--muted);
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.kanban-card__checklist-bar {
  background: #1a242114;
  border-radius: 999px;
  flex: 1;
  height: 5px;
  overflow: hidden;
}

.kanban-card__checklist-bar > div {
  background: var(--accent);
  border-radius: inherit;
  height: 100%;
  transition: width .2s;
}

.kanban-card__footer {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.kanban-card__people {
  direction: ltr;
  padding-left: .3rem;
  display: flex;
}

.kanban-card__people .kanban-card__avatar + .kanban-card__avatar {
  margin-left: -.35rem;
}

.kanban-card__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  display: flex;
}

.kanban-card__due {
  color: var(--muted);
  background: #1a24210f;
  border-radius: 999px;
  padding: .1rem .4rem;
  font-size: .72rem;
  font-weight: 600;
}

.kanban-card__due.is-overdue {
  color: #9a3412;
  background: #d9770624;
}

.kanban-card__time {
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  font-size: .78rem;
  font-weight: 700;
}

.kanban-card__avatar {
  color: #604a3d;
  text-transform: uppercase;
  background: #e9e3de;
  border: 2px solid #fff;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1.65rem;
  height: 1.65rem;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
}

.kanban-card__avatar--empty {
  color: #9aa1ac;
  background: #f0f1f4;
}

.kanban-card__avatar--virtual {
  color: #5b43c7;
  background: #e7e2ff;
  font-size: .56rem;
}

.kanban-card__avatar img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.kanban-card__actions {
  border-top: 1px solid #1a24210f;
  align-items: center;
  gap: .2rem;
  padding-top: .15rem;
  display: flex;
}

.kanban-card__reorder {
  border-inline-end: 1px solid #1a242114;
  align-items: center;
  gap: .1rem;
  margin-inline-end: auto;
  padding-inline-end: .25rem;
  display: inline-flex;
}

.kanban-card__action--reorder:hover:not(:disabled) {
  color: var(--accent-deep);
  background: #0f766e1a;
}

.kanban-card__action {
  width: 1.85rem;
  height: 1.85rem;
}

.kanban-card__action--start:hover:not(:disabled) {
  color: var(--accent-deep);
  background: #0f766e1f;
}

.kanban-card__action--stop:hover:not(:disabled) {
  color: #b45309;
  background: #d977061f;
}

.kanban-card__action--danger:hover:not(:disabled) {
  color: #b91c1c;
  background: #dc26261a;
}

@media (max-width: 767px) {
  .kanban {
    width: 100%;
    height: min(68dvh, 40rem);
    overflow: hidden;
  }

  .kanban-board {
    gap: var(--space-3);
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .kanban-board::-webkit-scrollbar {
    display: none;
  }

  .kanban-column {
    width: calc(100vw - 3.5rem);
    min-width: 0;
    max-width: 23rem;
    height: auto;
    min-height: 0;
    padding: var(--space-3);
    scroll-snap-align: center;
    flex-basis: calc(100vw - 3.5rem);
  }

  .kanban-board {
    scroll-padding-inline: var(--space-4);
  }

  .kanban-card {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    touch-action: pan-y;
  }

  .kanban-card__title {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.65;
  }

  .kanban-card__action {
    width: var(--touch-min);
    height: var(--touch-min);
  }
}

.kanban-card--compact {
  gap: .65rem;
}

.kanban-card__open {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}

.kanban-card__timer {
  border-top: 1px solid #f0f1f4;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: -.15rem;
  padding-top: .35rem;
  display: flex;
}

.kanban-card__timer-label {
  color: #9aa1ac;
  font-size: .68rem;
}

@media (min-width: 1200px) {
  .kanban-column {
    flex-basis: 300px;
    width: 300px;
    min-width: 300px;
  }
}

/* [project]/libs/modules/tasks/src/TaskCardList.css [app-client] (css) */
.task-list-view__table {
  display: block;
}

.task-card-list {
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

.task-card {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #ffffffd1;
  border-radius: 14px;
  gap: .55rem;
  padding: .85rem;
  display: grid;
}

.task-card.is-running {
  background: #f0fdfae6;
  border-color: #0f766e59;
  box-shadow: 0 0 0 1px #0f766e1f;
}

.task-card.is-running .task-card__time strong:before {
  content: "";
  background: var(--accent);
  vertical-align: middle;
  width: .45rem;
  height: .45rem;
  animation: tempo-live-pulse 1.5s var(--ease-out) infinite;
  border-radius: 50%;
  margin-inline-end: .35rem;
  display: inline-block;
}

.task-card__title {
  text-align: start;
  width: 100%;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.45;
}

.task-card__meta {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
  line-height: 1.45;
}

.task-card__meta .is-overdue {
  color: #b91c1c;
  font-weight: 600;
}

.task-card__tags {
  flex-wrap: wrap;
  gap: .35rem;
  display: flex;
}

.task-card__stats {
  justify-content: space-between;
  align-items: center;
  gap: .55rem;
  display: flex;
}

.task-card__time {
  gap: .1rem;
  display: grid;
}

.task-card__time strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  font-size: 1.05rem;
}

.task-card__time span {
  color: var(--muted);
  font-size: .72rem;
}

.task-card__sessions summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
}

.task-card__actions {
  gap: .45rem;
  padding-top: .15rem;
  display: flex;
}

.task-card__action {
  min-width: var(--touch-min, 2.75rem);
  min-height: var(--touch-min, 2.75rem);
}

@media (max-width: 767px) {
  .task-list-view__table {
    display: none;
  }

  .task-card-list {
    display: grid;
  }

  .task-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .task-card__title {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.65;
  }

  .task-card__stats {
    flex-wrap: wrap;
  }

  .task-card__actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .task-card__action {
    width: 100%;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .task-card {
    grid-template-columns: 1fr auto;
    grid-template-areas: "title actions"
                         "meta actions"
                         "stats stats"
                         "tags tags";
    align-items: start;
  }

  .task-card__title {
    grid-area: title;
  }

  .task-card__meta {
    grid-area: meta;
  }

  .task-card__tags {
    grid-area: tags;
  }

  .task-card__stats {
    grid-area: stats;
  }

  .task-card__actions {
    flex-direction: column;
    grid-area: actions;
    padding-top: 0;
  }

  .task-card__sessions {
    grid-column: 1 / -1;
  }
}

.task-card--compact {
  gap: .65rem;
}

.task-card__timer {
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

/* [project]/libs/modules/tasks/src/TaskFiltersBar.css [app-client] (css) */
.filters-bar {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  gap: .75rem;
  margin: 0 0 .5rem;
  padding: .65rem;
  display: grid;
}

.filters-bar__top {
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  display: flex;
}

.filters-search {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  direction: rtl;
  background: #f8f9fb;
  flex: 14rem;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  align-items: center;
  min-width: min(100%, 12rem);
  display: grid;
  position: relative;
}

.filters-search:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.filters-search__icon {
  color: var(--muted);
  pointer-events: none;
  grid-area: 1 / 1;
  justify-self: center;
}

.filters-search__input {
  text-align: right;
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  font: inherit;
  font-size: var(--text-sm);
  direction: rtl;
  background: none;
  border: 0;
  outline: 0;
  grid-area: 1 / 2;
  padding: 0 .4rem 0 .6rem;
}

.filters-search .filters-search__input, .filters-search .filters-search__input:hover, .filters-search .filters-search__input:focus, .filters-search .filters-search__input:focus-visible {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.filters-search__clear {
  grid-area: 1 / 1;
  justify-self: center;
  width: 1.85rem;
  height: 1.85rem;
}

.filters-bar__toggle {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  min-height: 2.5rem;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  background: #fff;
  align-items: center;
  gap: .35rem;
  padding: .45rem .75rem;
  font-size: .85rem;
  font-weight: 600;
  display: inline-flex;
}

.filters-bar__toggle.has-active {
  color: var(--accent-deep);
  background: #0f766e14;
  border-color: #0f766e73;
}

.filters-bar__toggle-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 700;
}

.filters-bar__total {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-inline-start: auto;
  font-size: .84rem;
  font-weight: 600;
}

.filters-bar__chips {
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.filters-bar__panel {
  gap: .75rem;
  display: grid;
}

.filters-bar__modal-backdrop {
  z-index: 1000;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #0f17156b;
  place-items: center;
  padding: 1rem;
  display: grid;
  position: fixed;
  inset: 0;
}

.filters-bar__modal {
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  border-radius: 16px;
  width: min(46rem, 100%);
  max-height: min(90vh, 46rem);
  padding: 1rem;
  overflow: auto;
  box-shadow: 0 1.5rem 4rem #0f171533;
}

.filters-bar__modal-head {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.filters-bar__modal-head h2 {
  margin: 0;
  font-size: 1rem;
}

.filters-bar__section-title {
  color: var(--muted);
  letter-spacing: .01em;
  margin: 0 0 .45rem;
  font-size: .78rem;
  font-weight: 700;
}

.filters-bar__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: .65rem;
  display: grid;
}

.filters-bar__grid .ui-field {
  min-width: 0;
}

.filters-bar__secondary {
  border-top: 1px solid var(--line);
  gap: .65rem;
  padding-top: .75rem;
  display: grid;
}

.filters-bar__dates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: .65rem;
  display: grid;
}

.filters-bar__date .ui-input {
  width: 100%;
}

.filters-bar__checks {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #1a242108;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .85rem;
  padding: .55rem .7rem;
  display: flex;
}

.filters-bar__check {
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  display: inline-flex;
}

@media (max-width: 1099px) {
  .filters-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .filters-bar__grid, .filters-bar__dates {
    grid-template-columns: 1fr;
  }

  .filters-bar__checks {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .filters-bar {
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    margin-block-start: var(--space-2);
  }

  .filters-bar__top {
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) auto;
    display: grid;
  }

  .filters-search {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .filters-search__input {
    min-height: var(--touch-min);
    font-size: 1rem;
  }

  .filters-bar__toggle {
    min-height: var(--touch-min);
    border-radius: var(--radius-md);
  }

  .filters-bar__total {
    align-self: center;
    margin-inline-start: 0;
  }

  .filters-bar__chips {
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-block-end: var(--space-1);
    overflow-x: auto;
  }

  .filters-bar__chips::-webkit-scrollbar {
    display: none;
  }

  .filters-bar__modal-backdrop {
    place-items: end stretch;
    padding: 0;
  }

  .filters-bar__modal {
    width: 100%;
    max-height: 88dvh;
    padding: var(--space-4);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* [project]/libs/modules/tasks/src/TaskTable.css [app-client] (css) */
.task-list-summary {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .65rem;
  margin: 0 0 1rem;
  display: grid;
}

.task-list-summary__card {
  border: 1px solid var(--line);
  background: #ffffffbf;
  border-radius: 12px;
  gap: .15rem;
  padding: .75rem .9rem;
  display: grid;
}

.task-list-summary__card strong {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
}

.task-list-summary__card span:last-child {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}

.task-list-summary__card--live {
  background: #0f766e14;
  border-color: #0f766e59;
}

.task-list-summary__card--live strong {
  color: var(--accent);
  align-items: center;
  gap: .35rem;
  display: inline-flex;
}

.task-list-summary__pulse {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: .45rem;
  height: .45rem;
}

.table-wrap {
  border: 1px solid var(--line);
  scrollbar-gutter: stable;
  background: #ffffffc7;
  border-radius: 14px;
  width: 100%;
  max-height: min(70vh, 720px);
  overflow: auto;
}

.task-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
}

.task-table .w-title {
  width: 34%;
}

.task-table .w-assignees {
  width: 18%;
}

.task-table .w-time, .task-table .w-status, .task-table .w-actions {
  width: 16%;
}

.task-table th, .task-table td {
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  padding: .75rem .85rem;
}

.task-table th {
  z-index: 2;
  color: var(--muted);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--line);
  background: #fffffff5;
  font-size: .76rem;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.task-table tbody tr:last-child td {
  border-bottom: 0;
}

.task-table tbody tr {
  transition: background .12s;
}

.task-table tbody tr:hover, .task-table tbody tr:focus-within {
  background: #0f766e0b;
}

.task-table tbody tr.is-running {
  background: #0f766e12;
}

.task-table tbody tr.is-running:hover, .task-table tbody tr.is-running:focus-within {
  background: #0f766e1a;
}

.task-table tbody tr.is-busy {
  opacity: .85;
}

.task-table td.col-time, .task-table td.col-status, .task-table td.col-assignees {
  text-align: center;
}

.task-table td.col-assignees {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: .8rem;
  line-height: 1.45;
}

.task-table td.col-actions {
  text-align: center;
}

.task-table__title-cell {
  gap: .3rem;
  min-width: 0;
  display: grid;
}

.task-table__title {
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  display: block;
}

.task-table__title:hover {
  color: var(--accent-deep);
}

.task-table__meta {
  color: var(--muted);
  margin: 0;
  font-size: .78rem;
  line-height: 1.4;
}

.task-table__meta-sep {
  opacity: .55;
  margin: 0 .35rem;
}

.task-table__meta-overdue {
  color: #b45309;
  font-weight: 600;
}

.task-table__tags {
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  display: flex;
}

.task-table__timer {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--accent-deep);
  direction: ltr;
  font-size: 1rem;
  font-weight: 700;
  display: block;
}

.task-table__date {
  color: var(--muted);
  margin-top: .15rem;
  font-size: .72rem;
  display: block;
}

.task-table__status-wrap {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .35rem;
  display: inline-flex;
}

.task-table__status-badge {
  align-items: center;
  gap: .35rem;
  display: inline-flex;
}

.task-table__status-pulse {
  background: currentColor;
  border-radius: 50%;
  width: .45rem;
  height: .45rem;
}

.task-table__actions {
  justify-content: center;
  align-items: center;
  gap: .25rem;
  display: inline-flex;
}

.task-table__action {
  color: var(--muted);
}

.task-table__action:hover:not(:disabled) {
  color: var(--accent-deep);
  background: #0f766e1a;
}

.task-table__action--start:hover:not(:disabled) {
  color: var(--accent-deep);
  background: #0f766e1f;
}

.task-table__action--stop:hover:not(:disabled) {
  color: #b45309;
  background: #d977061f;
}

.task-table__action--danger:hover:not(:disabled) {
  color: #b91c1c;
  background: #dc26261a;
}

.task-list-empty {
  text-align: center;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #ffffff80;
  border-radius: 14px;
  margin: 1.5rem 0 0;
  padding: 2rem 1.25rem;
}

.task-list-empty strong {
  color: var(--ink-soft);
  margin-bottom: .35rem;
  font-size: 1rem;
  display: block;
}

/* [project]/libs/modules/workspace/src/UsersModal.css [app-client] (css) */
.users-modal {
  width: min(640px, 100%);
}

.users-modal__body {
  gap: .85rem;
  display: grid;
}

.users-modal__toolbar {
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem;
  display: flex;
}

.users-modal__toolbar .ui-field {
  flex: 1;
  min-width: 10rem;
}

.users-modal__toolbar .ui-field:last-child {
  flex: 0 8.5rem;
  min-width: 7rem;
}

.users-modal__toolbar .ui-input[type="search"], .users-modal__toolbar .ui-input[type="search"]:hover, .users-modal__toolbar .ui-input[type="search"]:focus, .users-modal__toolbar .ui-input[type="search"]:focus-visible {
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.users-modal__table {
  border-collapse: collapse;
  width: 100%;
}

.users-modal__table th, .users-modal__table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  padding: .55rem .45rem;
}

.users-modal__table th {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.users-modal__user {
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.users-modal__avatar {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--accent-deep);
  text-transform: uppercase;
  background: #0f766e24;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
}

.users-modal__avatar img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.users-modal__email {
  color: var(--muted);
  text-overflow: ellipsis;
  font-size: .74rem;
  display: block;
  overflow: hidden;
}

.users-modal__meta {
  color: var(--muted);
  font-size: .72rem;
  display: block;
}

.users-modal__role-cell {
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  display: flex;
}

.users-modal__actions {
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  display: flex;
}

.users-modal__you {
  color: var(--muted);
  font-size: .78rem;
}

@media (max-width: 560px) {
  .users-modal__table thead {
    display: none;
  }

  .users-modal__table tr {
    border-bottom: 1px solid var(--line);
    gap: .45rem;
    padding: .65rem 0;
    display: grid;
  }

  .users-modal__table td {
    border: none;
    padding: 0;
    display: block;
  }

  .users-modal__actions {
    justify-content: flex-start;
  }
}

/* [project]/libs/modules/workspace/src/WorkspaceSettingsModal.css [app-client] (css) */
.ws-settings-modal {
  flex-direction: column;
  width: min(820px, 100%);
  max-height: min(90vh, 760px);
  display: flex;
  overflow: hidden;
}

.workspace-settings-page {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: 1rem 0 3rem;
}

.workspace-settings-page__header {
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
}

.workspace-settings-page__eyebrow {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0 0 .35rem;
}

.workspace-settings-page__header h1 {
  color: var(--color-ink);
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.ws-settings-page-panel {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  width: 100%;
  min-height: 36rem;
  max-height: none;
  box-shadow: var(--shadow-sm);
  border-radius: 1.25rem;
}

.ws-settings-page-panel > .panel-head {
  border-bottom: 1px solid var(--color-line);
  margin: 0;
  padding: 1.25rem 1.4rem;
}

.ws-settings-page-panel > .panel-head h2 {
  font-size: var(--text-lg);
}

.ws-settings-page-panel .ws-settings-modal__body {
  min-height: 32rem;
}

.ws-settings-page-panel .ws-settings-modal__nav {
  background: var(--color-paper);
  padding: 1rem;
}

.ws-settings-page-panel .ws-settings-modal__nav-btn {
  min-height: 2.75rem;
  padding-inline: .8rem;
}

.ws-settings-page-panel .ws-settings-modal__main {
  padding: 1.5rem;
}

.ws-settings-page-panel .ws-settings-modal__section-title {
  font-size: 1.1rem;
}

.ws-settings-general__appearance {
  border: 1px solid var(--color-line);
  border-radius: .9rem;
  gap: .8rem;
  margin-block: 1.25rem;
  padding: 1rem;
  display: grid;
}

.ws-settings-general__appearance h4, .ws-settings-general__appearance p {
  margin: 0;
}

.ws-settings-general__appearance p {
  color: var(--color-muted);
  font-size: .84rem;
}

.ws-settings-general__appearance-row, .ws-settings-general__appearance-actions, .ws-settings-general__color {
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.ws-settings-general__avatar-preview {
  color: #fff;
  border-radius: .9rem;
  flex: 0 0 4rem;
  place-items: center;
  width: 4rem;
  height: 4rem;
  font-size: 1.45rem;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.ws-settings-general__avatar-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-settings-general__cover-preview {
  background: linear-gradient(125deg, color-mix(in srgb, var(--workspace-cover-color) 67%, #201b38), var(--workspace-cover-color));
  border-radius: .75rem;
  height: 7rem;
  position: relative;
  overflow: hidden;
}

.ws-settings-general__cover-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-settings-general__cover-preview:not(.has-image):after {
  content: "";
  inset-inline-end: 12%;
  border: 1px solid #ffffff3d;
  border-radius: 50%;
  width: 9rem;
  height: 9rem;
  position: absolute;
  top: -3rem;
}

.ws-settings-general__appearance-actions small {
  color: var(--color-muted);
  flex-basis: 100%;
}

.ws-settings-general__upload {
  border: 1px solid var(--color-line);
  cursor: pointer;
  border-radius: .5rem;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .7rem;
  display: inline-flex;
}

.ws-settings-general__upload:focus-within {
  outline: 2px solid var(--color-accent);
}

.ws-settings-general__upload input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.ws-settings-general__color {
  font-weight: 700;
}

.ws-settings-general__color input {
  border: 1px solid var(--color-line);
  cursor: pointer;
  background: none;
  border-radius: .4rem;
  width: 3rem;
  height: 2.2rem;
  padding: .1rem;
}

@media (max-width: 720px) {
  .workspace-settings-page {
    padding-top: .25rem;
  }

  .workspace-settings-page__header {
    align-items: start;
  }

  .ws-settings-page-panel {
    border-radius: 1rem;
    min-height: 0;
  }

  .ws-settings-page-panel .ws-settings-modal__body {
    min-height: 0;
  }
}

.workspaces-page {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: 1rem 0 3rem;
}

.workspaces-page__header {
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.75rem;
  display: flex;
}

.workspaces-page__header p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0 0 .35rem;
}

.workspaces-page__header h1 {
  color: var(--color-ink);
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.workspaces-page__settings {
  color: var(--color-accent-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.workspaces-page__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1.2rem;
  display: grid;
}

.workspace-card {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  width: 100%;
  min-height: 18rem;
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  border-radius: 1.25rem;
  flex-direction: column;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.workspace-card:hover {
  border-color: var(--workspace-card-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.workspace-card.is-active {
  border-color: var(--workspace-card-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-card-accent) 24%, transparent), var(--shadow-sm);
}

.workspace-card__cover {
  background: linear-gradient(125deg, color-mix(in srgb, var(--workspace-card-accent) 67%, #201b38), var(--workspace-card-accent));
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 6.2rem;
  padding: .9rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.workspace-card__cover:before, .workspace-card__cover:after {
  content: "";
  pointer-events: none;
  border: 1px solid #ffffff3d;
  border-radius: 50%;
  width: 9rem;
  height: 9rem;
  position: absolute;
}

.workspace-card__cover:before {
  inset-inline-start: -2rem;
  top: -4.5rem;
}

.workspace-card__cover:after {
  inset-inline-end: 2rem;
  top: 1.4rem;
}

.workspace-card__cover.has-image:before, .workspace-card__cover.has-image:after {
  display: none;
}

.workspace-card__cover-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.workspace-card__cover.has-image:after {
  background: linear-gradient(#1014255c, #0000 70%);
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  display: block;
  inset: 0;
}

.workspace-card__cover-detail {
  inset-inline-start: 1.2rem;
  color: #fff3;
  font-size: 7rem;
  line-height: 1;
  position: absolute;
  top: -.75rem;
}

.workspace-card__state {
  z-index: 1;
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #ffffff2b;
  border: 1px solid #ffffff4d;
  border-radius: 999px;
  padding: .3rem .65rem;
  font-size: .7rem;
  font-weight: 750;
  position: relative;
}

.workspace-card__content {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0 1.2rem 1.2rem;
  display: flex;
}

.workspace-card__identity {
  justify-content: space-between;
  align-items: flex-end;
  gap: .5rem;
  margin-top: -2.2rem;
  display: flex;
}

.workspace-card__mark {
  z-index: 1;
  border: 4px solid var(--color-surface-solid);
  background: var(--workspace-card-accent);
  border-radius: 1.15rem;
  flex: 0 0 4.4rem;
  place-items: center;
  height: 4.4rem;
  font-size: 1.4rem;
  font-weight: 800;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px #1418321f;
}

.workspace-card__mark img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.workspace-card__role {
  background: var(--color-paper);
  color: var(--color-muted);
  border-radius: 999px;
  margin-bottom: .3rem;
  padding: .22rem .58rem;
  font-size: .72rem;
  font-weight: 700;
}

.workspace-card__content h2 {
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: .85rem 0 .35rem;
  font-size: 1.05rem;
  overflow: hidden;
}

.workspace-card__content p {
  color: var(--color-muted);
  margin: 0;
  font-size: .79rem;
}

.workspace-card__actions {
  grid-template-columns: 1fr auto;
  gap: .55rem;
  margin-top: auto;
  padding-top: 1.4rem;
  display: grid;
}

.workspace-card__actions button {
  cursor: pointer;
  min-height: 2.45rem;
  font: inherit;
  border-radius: .7rem;
  padding: .45rem .8rem;
  font-size: .76rem;
  font-weight: 750;
}

.workspace-card__enter {
  border: 1px solid var(--workspace-card-accent);
  background: var(--workspace-card-accent);
  color: var(--workspace-card-foreground);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  display: flex;
}

.workspace-card__enter:hover:not(:disabled) {
  filter: brightness(.94);
}

.workspace-card__edit {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  color: var(--color-ink);
}

.workspace-card__edit:hover {
  border-color: var(--workspace-card-accent);
  background: color-mix(in srgb, var(--workspace-card-accent) 8%, white);
}

.workspace-card__actions button:disabled {
  opacity: .5;
  cursor: default;
}

.workspace-card.is-archived .workspace-card__cover {
  filter: saturate(.55);
}

.workspaces-page__skeleton {
  background: linear-gradient(90deg,
    var(--color-line),
    var(--color-accent-subtle),
    var(--color-line));
  background-size: 200% 100%;
  border-radius: 1rem;
  height: 18rem;
  animation: 1.2s ease-in-out infinite workspace-skeleton;
}

@keyframes workspace-skeleton {
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 560px) {
  .workspaces-page__header {
    flex-direction: column;
    align-items: start;
  }

  .workspaces-page__grid {
    grid-template-columns: 1fr;
  }
}

.goals-page {
  width: min(100%, 70rem);
  margin-inline: auto;
  padding: 1rem 0 3rem;
}

.goals-page__header {
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.25rem;
  display: flex;
}

.goals-page__header p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0 0 .3rem;
}

.goals-page__header h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}

.goals-page__header .ui-field__label {
  display: none;
}

.goals-page__header .ui-select {
  min-width: 12rem;
}

.goals-overview {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  border-radius: 1rem;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.2rem;
  display: flex;
}

.goals-overview div {
  gap: .15rem;
  display: grid;
}

.goals-overview span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.goals-overview strong {
  font-size: var(--text-lg);
}

.goals-overview button {
  color: var(--color-accent-deep);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  border: 0;
  margin-inline-start: auto;
  font-weight: 700;
}

.goals-advanced {
  border: 1px solid var(--color-line);
  background: #ffffffbf;
  background: lab(100% 0 0 / .75);
  border-radius: 1rem;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  display: grid;
}

.goals-advanced__tabs {
  border-bottom: 1px solid var(--color-line);
  gap: .35rem;
  padding-bottom: .75rem;
  display: flex;
}

.goals-advanced__tab {
  color: var(--color-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: .65rem;
  padding: .55rem .9rem;
  font-weight: 700;
  transition: background .2s, color .2s;
}

.goals-advanced__tab:hover, .goals-advanced__tab.is-active {
  color: var(--color-accent-deep);
  background: var(--color-accent-subtle);
}

.goals-advanced__panel {
  align-items: end;
  min-height: 4.8rem;
  display: grid;
}

.goals-advanced form {
  flex-wrap: wrap;
  align-items: end;
  gap: .65rem;
  display: flex;
}

.goals-advanced .ui-field {
  flex: 11rem;
}

.goals-field-label {
  align-items: center;
  gap: .35rem;
  display: inline-flex;
}

.goals-field-help {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-accent-deep);
  cursor: help;
  border: 1px solid;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  position: relative;
}

.goals-field-help__tooltip {
  z-index: 10;
  border: 1px solid var(--color-line);
  width: min(19rem, 70vw);
  color: var(--color-ink);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-md);
  font-size: var(--text-xs);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-radius: .7rem;
  padding: .7rem .8rem;
  font-weight: 500;
  line-height: 1.8;
  transition: opacity .15s, transform .15s, visibility .15s;
  position: absolute;
  inset-block-start: calc(100% + .55rem);
  inset-inline-end: 0;
  transform: translateY(-.25rem);
}

.goals-field-help:hover .goals-field-help__tooltip, .goals-field-help:focus .goals-field-help__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.goals-page__error {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border-radius: .75rem;
  padding: .75rem 1rem;
}

.goals-advanced .goals-key-result-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.goals-key-result-form > :first-child, .goals-key-result-form > :nth-child(2) {
  grid-column: 1 / -1;
}

.goals-key-result-form > .ui-button {
  width: 100%;
}

.objectives-list {
  gap: 1rem;
  display: grid;
}

.objective-card {
  border: 1px solid var(--color-line);
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  border-radius: 1rem;
  padding: 1.25rem;
}

.objective-card header {
  align-items: start;
  gap: 1rem;
  display: flex;
}

.objective-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

.objective-card p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: .3rem 0 0;
}

.objective-card header > strong {
  color: var(--color-accent-deep);
  font-size: var(--text-lg);
  margin-inline-start: auto;
}

.objective-card__status {
  color: #16876e;
  font-size: var(--text-xs);
  white-space: nowrap;
  background: #e6faf4;
  border-radius: 999px;
  padding: .3rem .6rem;
  font-weight: 700;
}

.objective-card__status.at_risk {
  color: #b77610;
  background: #fff4df;
}

.objective-card__status.off_track {
  color: #c43846;
  background: #fff0f1;
}

.objective-card__bar, .key-result__progress {
  background: var(--color-line);
  border-radius: 99px;
  height: .45rem;
  overflow: hidden;
}

.objective-card__bar {
  margin: 1rem 0;
}

.objective-card__bar span, .key-result__progress > span {
  border-radius: inherit;
  background: var(--color-accent);
  height: 100%;
  display: block;
}

.key-results {
  gap: .75rem;
  display: grid;
}

.key-result {
  border-top: 1px solid var(--color-line);
  grid-template-columns: minmax(0, 1fr) minmax(9rem, .8fr) 5rem;
  align-items: center;
  gap: 1rem;
  padding-top: .75rem;
  display: grid;
}

.key-result div:first-child {
  gap: .2rem;
  display: grid;
}

.key-result div:first-child span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.key-result__progress {
  position: relative;
}

.key-result__progress b {
  color: var(--color-muted);
  font-size: .68rem;
  position: absolute;
  inset-block-start: -.1rem;
  inset-inline-end: 0;
  transform: translateY(-100%);
}

.key-result input {
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  width: 100%;
  min-height: 2.25rem;
  font: inherit;
  border-radius: .55rem;
  padding-inline: .55rem;
}

@media (max-width: 720px) {
  .goals-page__header {
    flex-direction: column;
    align-items: start;
  }

  .goals-overview {
    flex-wrap: wrap;
    align-items: start;
  }

  .goals-overview button {
    text-align: start;
    width: 100%;
    margin-inline-start: 0;
  }

  .goals-advanced__tabs {
    overflow-x: auto;
  }

  .goals-advanced__tab {
    white-space: nowrap;
    flex: 1 0 auto;
  }

  .goals-advanced .goals-key-result-form {
    grid-template-columns: 1fr;
  }

  .goals-key-result-form > :first-child, .goals-key-result-form > :nth-child(2) {
    grid-column: auto;
  }

  .key-result {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .key-result__progress {
    margin-top: .8rem;
  }
}

.ws-settings-modal__body {
  flex: 1;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  min-height: 0;
  display: grid;
}

.ws-settings-modal__nav {
  border-inline-end: 1px solid var(--line);
  background: #ffffff73;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem;
  display: flex;
}

.ws-settings-modal__nav-btn {
  width: 100%;
  color: var(--ink-soft);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 10px;
  padding: .55rem .65rem;
  font-size: .84rem;
  font-weight: 600;
  transition: background .12s, color .12s;
}

.ws-settings-modal__nav-btn:hover {
  color: var(--accent-deep);
  background: #0f766e14;
}

.ws-settings-modal__nav-btn.is-active {
  color: var(--accent-deep);
  background: #0f766e1f;
  border-color: #0f766e38;
}

.ws-settings-modal__main {
  min-width: 0;
  padding: .85rem 1rem 1rem;
  overflow-y: auto;
}

.ws-settings-modal__section-title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.ws-settings-modal__readonly {
  color: var(--ink-soft);
  background: #f0fdfabf;
  border: 1px solid #0f766e2e;
  border-radius: 10px;
  margin: 0 1rem .85rem;
  padding: .65rem .75rem;
  font-size: .84rem;
  line-height: 1.5;
}

.ws-settings-general {
  gap: .85rem;
  display: grid;
}

.ws-settings-general__rename {
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  display: flex;
}

.ws-settings-general__rename .ui-field {
  flex: 1;
  min-width: 12rem;
}

.ws-settings-general__meta {
  flex-wrap: wrap;
  gap: .45rem;
  display: flex;
}

.ws-settings-general__meta-card {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  gap: .12rem;
  min-width: 7rem;
  padding: .65rem .75rem;
  display: grid;
}

.ws-settings-general__meta-card span {
  color: var(--muted);
  font-size: .74rem;
}

.ws-settings-general__meta-card strong {
  font-size: .92rem;
}

.ws-software-info {
  gap: 1.25rem;
  display: grid;
}

.ws-software-info__intro {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  display: flex;
}

.ws-software-info__mark {
  background: var(--accent-deep);
  color: #fff;
  border-radius: 1rem;
  flex: 0 0 3.5rem;
  place-items: center;
  height: 3.5rem;
  font-size: 1.45rem;
  font-weight: 800;
  display: grid;
  box-shadow: 0 8px 20px #0f766e2e;
}

.ws-software-info__intro .ws-settings-modal__section-title {
  margin-bottom: .25rem;
  font-size: 1.2rem;
}

.ws-software-info__intro p, .ws-software-info__note {
  color: var(--muted);
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
}

.ws-software-info__details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0;
  display: grid;
}

.ws-software-info__details div {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 12px;
  gap: .35rem;
  padding: 1rem;
  display: grid;
}

.ws-software-info__details dt {
  color: var(--muted);
  font-size: .76rem;
}

.ws-software-info__details dd {
  color: var(--ink);
  text-align: start;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.ws-software-info__note {
  background: #0f766e14;
  border-radius: 10px;
  padding: .8rem 1rem;
}

.ws-members {
  gap: .85rem;
  display: grid;
}

.ws-members__add {
  flex-wrap: wrap;
  align-items: end;
  gap: .45rem;
  display: flex;
}

.ws-members__add .ui-field {
  flex: 1;
  min-width: 10rem;
}

.ws-members__table {
  border-collapse: collapse;
  width: 100%;
}

.ws-members__table th, .ws-members__table td {
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  padding: .55rem .45rem;
}

.ws-members__table th {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
}

.ws-members__user {
  align-items: center;
  gap: .5rem;
  min-width: 0;
  display: flex;
}

.ws-members__avatar {
  width: 1.85rem;
  height: 1.85rem;
  color: var(--accent-deep);
  text-transform: uppercase;
  background: #0f766e24;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
}

.ws-members__avatar img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-members__email {
  color: var(--muted);
  font-size: .74rem;
  display: block;
}

.ws-members__actions {
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  display: flex;
}

.ws-members__role-readonly {
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
}

.ws-access-preview, .ws-offboarding {
  border: 1px solid color-mix(in srgb, var(--accent-deep) 28%, var(--line));
  background: color-mix(in srgb, var(--accent-deep) 5%, white);
  border-radius: 14px;
  gap: .8rem;
  padding: 1rem;
  display: grid;
}

.ws-access-preview header, .ws-offboarding__actions {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}

.ws-access-preview header div {
  gap: .15rem;
  display: grid;
}

.ws-access-preview header span {
  color: var(--muted);
  font-size: .75rem;
}

.ws-access-preview header strong {
  color: var(--accent-deep);
}

.ws-access-preview__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  display: grid;
}

.ws-access-preview__grid section {
  border: 1px solid var(--line);
  background: #ffffffb8;
  border-radius: 10px;
  padding: .7rem;
}

.ws-access-preview h4, .ws-offboarding h3, .ws-offboarding h4 {
  margin: 0 0 .35rem;
}

.ws-access-preview p, .ws-access-preview ul, .ws-offboarding p, .ws-offboarding ul {
  margin: 0;
  font-size: .8rem;
  line-height: 1.75;
}

.ws-access-preview ul, .ws-offboarding ul {
  padding-inline-start: 1.15rem;
}

.ws-access-preview small {
  color: var(--muted);
  line-height: 1.6;
}

.ws-access-preview__note {
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding-top: .65rem;
}

.ws-offboarding {
  z-index: 2;
  border-color: color-mix(in srgb, var(--color-danger, #c33) 35%, var(--line));
  background: var(--color-surface-solid, white);
  box-shadow: var(--shadow-md);
  position: sticky;
  bottom: 0;
}

.ws-offboarding__summary {
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  display: grid;
}

.ws-offboarding__summary span {
  background: var(--color-paper, #f7f7f7);
  color: var(--muted);
  border-radius: 9px;
  gap: .15rem;
  padding: .55rem;
  font-size: .7rem;
  display: grid;
}

.ws-offboarding__summary strong {
  color: var(--ink);
  font-size: 1rem;
}

.ws-offboarding__ack {
  background: var(--color-danger-subtle, #fff0f1);
  border-radius: 9px;
  align-items: start;
  gap: .5rem;
  padding: .65rem;
  font-size: .8rem;
  line-height: 1.6;
  display: flex;
}

.ws-offboarding__ack input {
  margin-top: .3rem;
}

.ws-offboarding__clear {
  color: var(--accent-deep);
}

.ws-offboarding__actions {
  justify-content: flex-end;
  padding-top: .25rem;
}

@media (max-width: 720px) {
  .ws-settings-modal__body {
    grid-template-columns: 1fr;
  }

  .ws-settings-modal__nav {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
  }

  .ws-settings-modal__nav-btn {
    white-space: nowrap;
    width: auto;
  }

  .ws-members__table thead {
    display: none;
  }

  .ws-software-info__details {
    grid-template-columns: 1fr;
  }

  .ws-members__table tr {
    border-bottom: 1px solid var(--line);
    gap: .35rem;
    padding: .65rem 0;
    display: grid;
  }

  .ws-members__table td {
    border-bottom: 0;
    padding: 0;
  }

  .ws-access-preview__grid, .ws-offboarding__summary {
    grid-template-columns: 1fr;
  }
}

.workspaces-page__archive-toggle {
  color: var(--color-muted);
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  display: flex;
}

.ws-settings-general__danger {
  border: 1px solid color-mix(in srgb, var(--color-danger, #c33) 28%, var(--color-line));
  border-radius: .9rem;
  gap: .65rem;
  margin-top: 1.5rem;
  padding: 1rem;
  display: grid;
}

.ws-settings-general__danger h4, .ws-settings-general__danger p {
  margin: 0;
}

.ws-settings-general__danger p {
  color: var(--color-muted);
  font-size: .8rem;
  line-height: 1.7;
}

.ws-settings-general__danger > div {
  flex-wrap: wrap;
  gap: .5rem;
  display: flex;
}

.ws-settings-general__danger button:last-child {
  color: var(--color-danger, #c33);
}

/* [project]/libs/core/ui/src/Toast.css [app-client] (css) */
.ui-toast-stack {
  bottom: var(--space-4, 1rem);
  z-index: var(--z-toast);
  pointer-events: none;
  flex-direction: column-reverse;
  gap: .5rem;
  width: min(22rem, 100vw - 2rem);
  display: flex;
  position: fixed;
  inset-inline-end: var(--space-4, 1rem);
}

.ui-toast {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  background: #fffffff5;
  border-radius: 12px;
  align-items: flex-start;
  gap: .55rem;
  padding: .75rem .85rem;
  display: flex;
}

.ui-toast__icon {
  flex-shrink: 0;
  margin-top: .1rem;
  display: flex;
}

.ui-toast__body {
  min-width: 0;
  color: var(--ink);
  flex: 1;
  font-size: .88rem;
  line-height: 1.45;
}

.ui-toast__close {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  background: none;
  border: 0;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
}

.ui-toast__close:hover {
  color: var(--ink-soft);
  background: #1a242114;
}

.ui-toast.is-success {
  background: #ecfdf5f7;
  border-color: #05966947;
}

.ui-toast.is-success .ui-toast__icon {
  color: #059669;
}

.ui-toast.is-error {
  background: #fef2f2f7;
  border-color: #dc262647;
}

.ui-toast.is-error .ui-toast__icon {
  color: #dc2626;
}

.ui-toast.is-info {
  background: #f0fdfaf7;
  border-color: #0f766e38;
}

.ui-toast.is-info .ui-toast__icon {
  color: var(--accent-deep);
}

@media (max-width: 767px) {
  .ui-toast-stack {
    bottom: calc(var(--mobile-nav-height, 3.75rem) + var(--safe-bottom, 0px) + var(--space-2, .5rem));
    inset-inline-end: calc(var(--space-3, .75rem) + var(--safe-right, 0px));
  }
}

/*# sourceMappingURL=_1t47jk6._.css.map*/