/* CompetitorsTab — BEM-scoped styles for the Competitors tab in CapturePlanDetailDialog */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.competitors-tab {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Header row: title + add button
   -------------------------------------------------------------------------- */
.competitors-tab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Inline add/edit form
   -------------------------------------------------------------------------- */
.competitors-tab__form {
  border: var(--border-width-hairline) solid var(--color-base-light);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-2);
}

.competitors-tab__form-incumbent {
  display: flex;
  align-items: flex-end;
}

.competitors-tab__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  padding-bottom: var(--spacing-1);
}

.competitors-tab__checkbox-label input[type="checkbox"] {
  width: var(--spacing-2);
  height: var(--spacing-2);
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Competitor card list
   -------------------------------------------------------------------------- */
.competitors-tab__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Individual competitor card
   -------------------------------------------------------------------------- */
.competitors-tab__card {
  border: var(--border-width-hairline) solid var(--color-base-light);
  background-color: var(--color-surface);
  padding: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Card header: company name + badges
   -------------------------------------------------------------------------- */
.competitors-tab__card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-1);
}

.competitors-tab__company-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.competitors-tab__badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Card body: collapsed strengths / weaknesses
   -------------------------------------------------------------------------- */
.competitors-tab__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  margin-bottom: var(--spacing-1);
}

.competitors-tab__field-preview {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.competitors-tab__field-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.competitors-tab__field-text {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Card actions: edit / delete buttons
   -------------------------------------------------------------------------- */
.competitors-tab__card-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  border-top: var(--border-width-hairline) solid var(--color-base-light);
  padding-top: var(--spacing-1);
  margin-top: var(--spacing-1);
}

/* TeamingTab — Teaming partners CRUD tab for capture plans */

/* Container */
.teaming-tab {
  display: flex;
  flex-direction: column;
}

/* Inline form: reuse dialog__action-form base, add top margin */
.teaming-tab__form {
  margin-bottom: var(--spacing-3);
}

/* Checkbox field vertical alignment */
.teaming-tab__exclusive-field {
  justify-content: flex-end;
}

.teaming-tab__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  /* Optical alignment: position label at same baseline as other field labels */
  padding-top: var(--spacing-3);
}

.teaming-tab__checkbox {
  width: var(--spacing-2);
  height: var(--spacing-2);
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Partner list */
.teaming-tab__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}

/* Partner card */
.teaming-tab__card {
  border: var(--border-width-hairline) solid var(--color-base-light);
  background: var(--color-surface);
  padding: var(--spacing-2);
}

.teaming-tab__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.teaming-tab__card-identity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.teaming-tab__partner-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.teaming-tab__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-05);
}

.teaming-tab__card-actions {
  display: flex;
  gap: var(--spacing-05);
  flex-shrink: 0;
}

/* Card body: meta + descriptive text */
.teaming-tab__card-body {
  margin-top: var(--spacing-1);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}

.teaming-tab__meta-item {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.teaming-tab__meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.teaming-tab__capabilities,
.teaming-tab__notes {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.teaming-tab__notes {
  color: var(--color-text-tertiary);
}

/* MilestonesTab — BEM-scoped styles for the Milestones tab in CapturePlanDetailDialog */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.milestones-tab {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Header row: title + add button
   -------------------------------------------------------------------------- */
.milestones-tab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Inline add/edit form
   -------------------------------------------------------------------------- */
.milestones-tab__form {
  border: var(--border-width-hairline) solid var(--color-base-light);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Timeline list
   -------------------------------------------------------------------------- */
.milestones-tab__timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Individual milestone item
   -------------------------------------------------------------------------- */
.milestones-tab__item {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--spacing-2);
  border: var(--border-width-hairline) solid var(--color-base-light);
  background-color: var(--color-surface);
  padding: var(--spacing-105) var(--spacing-2);
  border-left: var(--border-width-thick) solid var(--color-base-light);
}

/* Overdue: danger left border + faint danger background tint */
.milestones-tab__item--overdue {
  border-left-color: var(--color-danger);
  background-color: var(--color-danger-bg);
}

/* --------------------------------------------------------------------------
   Date column
   -------------------------------------------------------------------------- */
.milestones-tab__item-date {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  padding-top: var(--spacing-05);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.milestones-tab__no-date {
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-normal);
  font-style: italic;
}

.milestones-tab__overdue-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* --------------------------------------------------------------------------
   Item body
   -------------------------------------------------------------------------- */
.milestones-tab__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Item header: type badge + title + status badge
   -------------------------------------------------------------------------- */
.milestones-tab__item-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.milestones-tab__item-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}

.milestones-tab__item-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
}

/* --------------------------------------------------------------------------
   Milestone type badges — distinct colors per type using Tier 2 semantics
   -------------------------------------------------------------------------- */
.milestones-tab__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-1);  /* 2px optical — no token at this size */
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  color: var(--color-text-inverse);
  background-color: var(--color-base-dark);
}

.milestones-tab__type-badge--rfi {
  background-color: var(--color-info-dark);
}

.milestones-tab__type-badge--sources-sought {
  background-color: var(--color-primary);
}

.milestones-tab__type-badge--draft-rfp {
  background-color: var(--color-warning-dark);
  color: var(--color-warning-text);
}

.milestones-tab__type-badge--final-rfp {
  background-color: var(--color-accent-warm-dark);
}

.milestones-tab__type-badge--q\&a-period {
  background-color: var(--color-base-darker);
}

.milestones-tab__type-badge--proposal-due {
  background-color: var(--color-danger-dark);
}

.milestones-tab__type-badge--orals {
  background-color: var(--color-secondary-dark);
}

.milestones-tab__type-badge--award {
  background-color: var(--color-success-dark);
}

.milestones-tab__type-badge--other {
  background-color: var(--color-base-dark);
}

/* --------------------------------------------------------------------------
   Item description
   -------------------------------------------------------------------------- */
.milestones-tab__item-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Item actions row
   -------------------------------------------------------------------------- */
.milestones-tab__item-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  border-top: var(--border-width-hairline) solid var(--color-base-light);
  padding-top: var(--spacing-1);
  margin-top: var(--spacing-05);
}

/* =============================================================================
   GateReviewsTab
   BEM root: .gate-reviews-tab
   ============================================================================= */

/* Tier 3 component tokens */
.gate-reviews-tab {
  --gate-review-dot-size: 12px;
  --gate-review-rail-width: var(--spacing-4);       /* 32px — space for dot + gap */
  --gate-review-line-color: var(--color-base-light);
  --gate-review-dot-color-none: var(--color-base-light);
  --gate-review-dot-color-go: var(--color-success);
  --gate-review-dot-color-no-go: var(--color-error);
  --gate-review-dot-color-conditional: var(--color-warning);
  --gate-review-dot-color-pending: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.gate-reviews-tab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-3);
}

.gate-reviews-tab__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Inline form panel
   --------------------------------------------------------------------------- */

.gate-reviews-tab__form-panel {
  background-color: var(--color-base-lightest);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.gate-reviews-tab__form-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2) 0;
}

.gate-reviews-tab__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}

/* ---------------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------------- */

.gate-reviews-tab__timeline {
  display: flex;
  flex-direction: column;
}

.gate-reviews-tab__item {
  display: flex;
  gap: 0;
  min-height: var(--spacing-5); /* 40px */
}

/* Rail: vertical line + dot column */
.gate-reviews-tab__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--gate-review-rail-width);
  flex-shrink: 0;
  padding-top: var(--spacing-105); /* align dot with summary text */
}

.gate-reviews-tab__dot {
  width: var(--gate-review-dot-size);
  height: var(--gate-review-dot-size);
  border-radius: 50%; /* dots are intentionally round — not part of the brutalist layout shapes */
  flex-shrink: 0;
  background-color: var(--gate-review-dot-color-none);
}

.gate-reviews-tab__dot--go {
  background-color: var(--gate-review-dot-color-go);
}

.gate-reviews-tab__dot--no-go {
  background-color: var(--gate-review-dot-color-no-go);
}

.gate-reviews-tab__dot--conditional {
  background-color: var(--gate-review-dot-color-conditional);
}

.gate-reviews-tab__dot--pending {
  background-color: var(--gate-review-dot-color-pending);
}

.gate-reviews-tab__dot--none {
  background-color: var(--gate-review-dot-color-none);
}

/* Vertical connecting line below the dot */
.gate-reviews-tab__line {
  flex: 1;
  width: var(--border-width-hairline);
  background-color: var(--gate-review-line-color);
  margin-top: var(--spacing-05);
  min-height: var(--spacing-2);
}

/* Hide connector on the last item */
.gate-reviews-tab__item--last .gate-reviews-tab__line {
  display: none;
}

/* ---------------------------------------------------------------------------
   Review card
   --------------------------------------------------------------------------- */

.gate-reviews-tab__card {
  flex: 1;
  margin-left: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  background-color: var(--color-surface);
  overflow: hidden;
}

/* Summary row — clickable to expand */
.gate-reviews-tab__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-105) var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--spacing-2);
  color: var(--color-text-primary);
}

.gate-reviews-tab__summary:hover {
  background-color: var(--color-base-lightest);
}

.gate-reviews-tab__summary-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-105);
  min-width: 0;
  flex: 1;
}

.gate-reviews-tab__gate-number {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.gate-reviews-tab__gate-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gate-reviews-tab__summary-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-shrink: 0;
}

.gate-reviews-tab__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Expand/collapse chevron */
.gate-reviews-tab__chevron {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.gate-reviews-tab__chevron--open {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Expandable detail panel
   --------------------------------------------------------------------------- */

.gate-reviews-tab__detail {
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-105);
  background-color: var(--color-base-lightest);
}

.gate-reviews-tab__detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--spacing-2);
  align-items: baseline;
}

.gate-reviews-tab__detail-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.gate-reviews-tab__detail-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.gate-reviews-tab__detail-actions {
  display: flex;
  gap: var(--spacing-1);
  margin-top: var(--spacing-1);
  padding-top: var(--spacing-1);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}

/* EventsTab — BEM-scoped styles for the Events tab in CapturePlanDetailDialog */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.events-tab {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Header row: title + add button
   -------------------------------------------------------------------------- */
.events-tab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

/* --------------------------------------------------------------------------
   Inline add form
   -------------------------------------------------------------------------- */
.events-tab__form {
  border: var(--border-width-hairline) solid var(--color-base-light);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-2);
}

.events-tab__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.events-tab__checkbox-label input[type="checkbox"] {
  width: var(--spacing-2);
  height: var(--spacing-2);
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Section dividers: Upcoming / Past
   -------------------------------------------------------------------------- */
.events-tab__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.events-tab__section-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-tertiary);
  margin: 0;
  padding-bottom: var(--spacing-05);
  border-bottom: var(--border-width-hairline) solid var(--color-base-light);
}

.events-tab__section-heading--past {
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Event card list
   -------------------------------------------------------------------------- */
.events-tab__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* --------------------------------------------------------------------------
   Individual event card — left border colored by event type
   -------------------------------------------------------------------------- */
.events-tab__card {
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-base-light);
  border-left: var(--border-width-thick) solid var(--color-base-light);
  padding: var(--spacing-105) var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Event type colors — distinct left-border per type */
.events-tab__card--customer-meeting {
  border-left-color: var(--color-primary);
}

.events-tab__card--gate-review {
  border-left-color: var(--color-danger);
}

.events-tab__card--team-meeting {
  border-left-color: var(--color-success-dark);
}

.events-tab__card--industry-day {
  border-left-color: var(--color-warning-dark);
}

.events-tab__card--site-visit {
  border-left-color: var(--color-accent-warm-dark);
}

.events-tab__card--capability-briefing {
  border-left-color: var(--color-info-dark);
}

.events-tab__card--competitive-analysis {
  border-left-color: var(--color-secondary-dark);
}

.events-tab__card--other {
  border-left-color: var(--color-base-dark);
}

/* --------------------------------------------------------------------------
   Card header: meta (date/time) + badges
   -------------------------------------------------------------------------- */
.events-tab__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}

.events-tab__card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}

.events-tab__card-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.events-tab__card-time {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}

.events-tab__card-duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.events-tab__card-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Card title
   -------------------------------------------------------------------------- */
.events-tab__card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   Card description
   -------------------------------------------------------------------------- */
.events-tab__card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Location / meeting link row
   -------------------------------------------------------------------------- */
.events-tab__card-location {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.events-tab__meeting-link {
  color: var(--color-primary);
  text-decoration: underline;
}

.events-tab__meeting-link:hover {
  color: var(--color-primary-dark);
}

.events-tab__location-text {
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Outcome row
   -------------------------------------------------------------------------- */
.events-tab__card-outcome {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  border-top: var(--border-width-hairline) solid var(--color-base-light);
  padding-top: var(--spacing-1);
  margin-top: var(--spacing-05);
}

.events-tab__outcome-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.events-tab__outcome-text {
  color: var(--color-text-secondary);
}

.scorecard-widget {
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  background-color: var(--color-surface);
  padding: var(--spacing-2);
}

.scorecard-widget__loading {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.scorecard-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.scorecard-widget__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Overall score */
.scorecard-widget__overall {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}

.scorecard-widget__overall-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

.scorecard-widget__overall-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-none);
}

.scorecard-widget__overall-value--danger {
  color: var(--color-danger-dark);
}

.scorecard-widget__overall-value--warning {
  color: var(--color-warning-dark);
}

.scorecard-widget__overall-value--success {
  color: var(--color-success-dark);
}

/* Dimensions */
.scorecard-widget__dimensions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.scorecard-widget__dimension {
  display: grid;
  grid-template-columns: 10rem 1fr 2rem;
  align-items: center;
  gap: var(--spacing-1);
}

.scorecard-widget__dim-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scorecard-widget__bar-track {
  height: var(--spacing-1);
  background-color: var(--color-base-lighter);
  overflow: hidden;
  /* border-radius: 0 per brutalist design */
}

.scorecard-widget__bar {
  height: 100%;
  transition: width 0.15s ease;
}

.scorecard-widget__bar--danger {
  background-color: var(--color-danger);
}

.scorecard-widget__bar--warning {
  background-color: var(--color-warning);
}

.scorecard-widget__bar--success {
  background-color: var(--color-success);
}

.scorecard-widget__dim-score {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* Score input (edit mode) */
.scorecard-widget__score-input {
  width: 3rem;
  padding: var(--spacing-05) var(--spacing-1);
  font-size: var(--font-size-sm);
  border: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-bg);
  color: var(--color-text-primary);
  text-align: right;
  /* border-radius: 0 per brutalist design */
}

.scorecard-widget__score-input:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--input-border-color-focus);
}

/* Notes (view mode) */
.scorecard-widget__notes {
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}

.scorecard-widget__notes-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin: 0 0 var(--spacing-05);
}

.scorecard-widget__notes-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

/* Notes textarea (edit mode) */
.scorecard-widget__notes-field {
  margin-top: var(--spacing-2);
}

.scorecard-widget__notes-textarea {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--font-size-sm);
  font-family: inherit;
  border: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-bg);
  color: var(--color-text-primary);
  resize: vertical;
  /* border-radius: 0 per brutalist design */
}

.scorecard-widget__notes-textarea:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--input-border-color-focus);
}

/* Form actions */
.scorecard-widget__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}

/* Empty state */
.scorecard-widget__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: var(--spacing-2) 0 0;
}

.pwin-history {
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  background-color: var(--color-surface);
  padding: var(--spacing-2);
}

.pwin-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
}

.pwin-history__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Current PWin display */
.pwin-history__current {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}

.pwin-history__current-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Inline form */
.pwin-history__form {
  padding: var(--spacing-2);
  background-color: var(--color-base-lightest);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  margin-bottom: var(--spacing-2);
}

.pwin-history__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  margin-bottom: var(--spacing-2);
}

.pwin-history__form-field:last-of-type {
  margin-bottom: 0;
}

.pwin-history__form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.pwin-history__input {
  width: 5rem;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--font-size-base);
  border: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-bg);
  color: var(--color-text-primary);
  /* border-radius: 0 per brutalist design */
}

.pwin-history__input:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--input-border-color-focus);
}

.pwin-history__textarea {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--font-size-sm);
  font-family: inherit;
  border: var(--input-border-width) solid var(--input-border-color);
  background-color: var(--input-bg);
  color: var(--color-text-primary);
  resize: vertical;
  /* border-radius: 0 per brutalist design */
}

.pwin-history__textarea:focus {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: var(--input-border-color-focus);
}

.pwin-history__form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}

/* Table */
.pwin-history__table-wrap {
  overflow-x: auto;
}

.pwin-history__loading,
.pwin-history__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.pwin-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.pwin-history__th {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  background-color: var(--table-header-bg);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}

.pwin-history__row:not(:last-child) .pwin-history__td {
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}

.pwin-history__td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  color: var(--color-text-primary);
  vertical-align: top;
}

.pwin-history__td--date {
  white-space: nowrap;
  color: var(--color-text-tertiary);
}

.pwin-history__td--pwin {
  white-space: nowrap;
}

.pwin-history__td--factors {
  color: var(--color-text-secondary);
}

/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', sans-serif;
    --font-serif: 'Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
    --font-mono: 'Roboto Mono', 'Bitstream Vera Sans Mono', 'Consolas', 'Courier', monospace;
    --color-red-50: hsl(2, 66%, 52%);
    --color-blue-50: hsl(207, 69%, 45%);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-white: hsl(0, 0%, 100%);
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-2xl: 42rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-extralight: 200;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-relaxed: 1.625;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
    --shadow-md: 0 4px 6px hsla(0, 0%, 0%, 0.1), 0 2px 4px hsla(0, 0%, 0%, 0.06);
    --shadow-lg: 0 10px 15px hsla(0, 0%, 0%, 0.1), 0 4px 6px hsla(0, 0%, 0%, 0.05);
    --shadow-xl: 0 20px 25px hsla(0, 0%, 0%, 0.1), 0 10px 10px hsla(0, 0%, 0%, 0.04);
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-gray-1: hsl(0, 0%, 99%);
    --color-gray-2: hsl(0, 0%, 98%);
    --color-gray-5: hsl(0, 0%, 94%);
    --color-gray-90: hsl(0, 0%, 11%);
    --color-gray-cool-1: hsl(210, 25%, 99%);
    --color-gray-cool-2: hsl(203, 23%, 97%);
    --color-gray-cool-4: hsl(218, 18%, 96%);
    --color-gray-cool-5: hsl(200, 10%, 93%);
    --color-gray-cool-10: hsl(200, 6%, 87%);
    --color-gray-cool-20: hsl(206, 6%, 79%);
    --color-gray-cool-30: hsl(204, 5%, 68%);
    --color-gray-cool-40: hsl(208, 4%, 57%);
    --color-gray-cool-50: hsl(210, 4%, 46%);
    --color-gray-cool-60: hsl(214, 8%, 37%);
    --color-gray-cool-70: hsl(217, 15%, 28%);
    --color-gray-cool-80: hsl(210, 3%, 18%);
    --color-gray-cool-90: hsl(220, 6%, 12%);
    --color-blue-10: hsl(210, 56%, 91%);
    --color-blue-20: hsl(208, 63%, 80%);
    --color-blue-30: hsl(209, 68%, 68%);
    --color-blue-40: hsl(207, 56%, 57%);
    --color-blue-warm-60v: hsl(218, 100%, 42%);
    --color-blue-warm-70v: hsl(214, 65%, 30%);
    --color-blue-warm-80v: hsl(216, 57%, 20%);
    --color-blue-warm-90v: hsl(218, 76%, 15%);
    --color-blue-warm-90v-54: hsla(218, 76%, 15%, 0.54);
    --color-blue-warm-80: hsl(218, 25%, 19%);
    --color-blue-cool-5v: hsl(193, 70%, 93%);
    --color-blue-cool-20v: hsl(193, 61%, 75%);
    --color-blue-cool-40v: hsl(196, 66%, 48%);
    --color-blue-cool-60v: hsl(199, 91%, 29%);
    --color-red-5: hsl(0, 50%, 96%);
    --color-red-30: hsl(5, 75%, 75%);
    --color-red-60v: hsl(0, 91%, 37%);
    --color-red-70v: hsl(3, 94%, 27%);
    --color-red-dark-70: hsl(0, 65%, 30%);
    --color-red-dark-60: hsl(0, 55%, 38%);
    --color-red-cool-10: hsl(349, 44%, 92%);
    --color-red-cool-50v: hsl(351, 79%, 50%);
    --color-red-vivid-20: hsl(4, 75%, 95%);
    --color-red-vivid-30: hsl(3, 71%, 84%);
    --color-red-vivid-40: hsl(2, 64%, 58%);
    --color-red-vivid-50: hsl(0, 73%, 41%);
    --color-red-vivid-60: hsl(0, 55%, 24%);
    --color-green-cool-5: hsl(120, 19%, 94%);
    --color-green-cool-20v: hsl(128, 64%, 66%);
    --color-green-vivid-10: hsl(145, 40%, 90%);
    --color-green-vivid-40: hsl(145, 63%, 42%);
    --color-green-vivid-50: hsl(145, 58%, 55%);
    --color-green-vivid-60: hsl(145, 63%, 33%);
    --color-green-vivid-70: hsl(145, 56%, 28%);
    --color-gold-5: hsl(40, 43%, 93%);
    --color-gold-20v: hsl(43, 100%, 59%);
    --color-gold-vivid-10: hsl(45, 75%, 92%);
    --color-gold-vivid-30: hsl(43, 96%, 56%);
    --color-gold-vivid-40: hsl(43, 100%, 75%);
    --color-gold-vivid-50: hsl(43, 77%, 45%);
    --color-gold-vivid-70: hsl(46, 60%, 22%);
    --color-brown-60: hsl(33, 65%, 32%);
    --color-brown-70: hsl(33, 75%, 26%);
    --color-orange-20v: hsl(28, 100%, 74%);
    --color-orange-30v: hsl(26, 94%, 62%);
    --color-orange-50v: hsl(25, 100%, 38%);
    --color-pink-5: hsl(326, 78%, 95%);
    --color-pink-60v: hsl(335, 78%, 42%);
    --color-cyan-5: hsl(186, 52%, 94%);
    --color-cyan-30v: hsl(191, 100%, 45%);
    --color-amber-10: hsl(48, 96%, 89%);
    --color-amber-60v: hsl(33, 92%, 37%);
    --color-violet-5: hsl(270, 50%, 96%);
    --color-violet-70v: hsl(270, 70%, 35%);
    --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-size-2xs: 0.8125rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.375rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
    --font-size-6xl: 3rem;
    --line-height-none: 1;
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.35;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;
    --spacing-05: 0.25rem;
    --spacing-1: 0.5rem;
    --spacing-105: 0.75rem;
    --spacing-2: 1rem;
    --spacing-205: 1.25rem;
    --spacing-3: 1.5rem;
    --spacing-4: 2rem;
    --spacing-5: 2.5rem;
    --spacing-6: 3rem;
    --spacing-8: 4rem;
    --border-width-hairline: 1px;
    --border-width-thin: 2px;
    --border-width-thick: 4px;
    --radius-0: 0;
    --shadow-base: 0 1px 3px hsla(0, 0%, 0%, 0.1), 0 1px 2px hsla(0, 0%, 0%, 0.06);
    --width-2xs: 5rem;
    --width-xs: 17rem;
    --width-sm: 28rem;
    --width-lg: 56rem;
    --width-mobile: 20rem;
    --width-tablet: 40rem;
    --width-desktop: 64rem;
    --width-widescreen: 87.5rem;
    --max-width-prose-wide: 75ch;
    --color-primary: var(--color-blue-warm-60v);
    --color-primary-light: var(--color-blue-30);
    --color-primary-lighter: var(--color-blue-10);
    --color-primary-dark: var(--color-blue-warm-70v);
    --color-primary-darker: var(--color-blue-warm-80v);
    --color-secondary: var(--color-red-50);
    --color-secondary-vivid: var(--color-red-cool-50v);
    --color-secondary-lighter: var(--color-red-cool-10);
    --color-secondary-dark: var(--color-red-60v);
    --color-success: var(--color-green-vivid-40);
    --color-success-light: var(--color-green-vivid-50);
    --color-success-lighter: var(--color-green-vivid-10);
    --color-success-dark: var(--color-green-vivid-60);
    --color-success-darker: var(--color-green-vivid-70);
    --color-warning: var(--color-gold-vivid-30);
    --color-warning-light: var(--color-gold-vivid-40);
    --color-warning-lighter: var(--color-gold-vivid-10);
    --color-warning-dark: var(--color-gold-vivid-50);
    --color-warning-darker: var(--color-gold-vivid-70);
    --color-warning-text: var(--color-brown-70);
    --color-warning-text-light: var(--color-brown-60);
    --color-danger: var(--color-red-vivid-40);
    --color-danger-light: var(--color-red-vivid-30);
    --color-danger-lighter: var(--color-red-vivid-20);
    --color-danger-dark: var(--color-red-vivid-50);
    --color-danger-text: var(--color-red-dark-70);
    --color-danger-text-light: var(--color-red-dark-60);
    --color-info: var(--color-cyan-30v);
    --color-info-light: var(--color-blue-cool-20v);
    --color-info-lighter: var(--color-blue-cool-5v);
    --color-info-dark: var(--color-blue-cool-40v);
    --color-info-darker: var(--color-blue-cool-60v);
    --color-accent-warm: var(--color-orange-30v);
    --color-accent-warm-light: var(--color-orange-20v);
    --color-accent-warm-dark: var(--color-orange-50v);
    --color-accent-cool: var(--color-cyan-30v);
    --color-base-lightest: var(--color-gray-5);
    --color-base-lighter: var(--color-gray-cool-10);
    --color-base-light: var(--color-gray-cool-30);
    --color-base: var(--color-gray-cool-50);
    --color-base-dark: var(--color-gray-cool-60);
    --color-base-darker: var(--color-gray-cool-70);
    --color-base-darkest: var(--color-gray-90);
    --color-ink: var(--color-gray-90);
    --color-overlay: var(--color-blue-warm-90v-54);
    --color-text-primary: var(--color-ink);
    --color-text-secondary: var(--color-base-dark);
    --color-text-tertiary: var(--color-base);
    --color-text-muted: var(--color-base-light);
    --color-text-inverse: var(--color-white);
    --color-surface: var(--color-white);
    --color-surface-light: var(--color-gray-cool-1);
    --color-surface-hover: var(--color-gray-cool-5);
    --icon-size-sm: var(--spacing-2);
    --icon-size-md: var(--spacing-205);
    --radius-button: var(--radius-0);
    --radius-input: var(--radius-0);
    --radius-card: var(--radius-0);
    --radius-dialog: var(--radius-0);
    --shadow-input: var(--shadow-sm);
    --shadow-card: var(--shadow-base);
    --shadow-dialog: var(--shadow-lg);
    --z-negative: -1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-drawer: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-toast: 700;
    --z-max: 9999;
    --color-header: var(--color-blue-warm-80);
    --color-nav-border: var(--color-base-lighter);
    --color-code-bg: var(--color-gray-90);
    --color-code-text: var(--color-gray-cool-10);
    --color-info-bg: var(--color-cyan-5);
    --color-info-border: var(--color-info);
    --color-warning-bg: var(--color-warning-lighter);
    --color-warning-border: var(--color-gold-20v);
    --color-success-bg: var(--color-green-cool-5);
    --color-success-border: var(--color-success);
    --color-danger-bg: var(--color-danger-lighter);
    --color-danger-border: var(--color-danger-light);
    --color-kanban-bg: var(--color-gray-cool-4);
    --color-kanban-header: var(--color-base-dark);
    --color-kanban-count-bg: var(--color-base-lighter);
    --color-kanban-count-text: var(--color-base-dark);
    --color-kanban-empty: var(--color-base-light);
    --color-kanban-card-bg: var(--color-white);
    --color-kanban-card-border: var(--color-base-lighter);
    --color-kanban-divider: var(--color-base-lighter);
    --color-kanban-drop-bg: var(--color-gray-cool-5);
    --kanban-column-gap: var(--spacing-1);
    --kanban-column-width: var(--width-xs);
    --kanban-card-gap: var(--spacing-1);
    --kanban-column-padding: var(--spacing-1);
    --color-dropzone-border: var(--color-base-lighter);
    --color-dropzone-border-hover: var(--color-primary-light);
    --color-dropzone-bg-hover: var(--color-primary-lighter);
    --color-dropzone-border-reject: var(--color-danger);
    --color-dropzone-bg-reject: var(--color-danger-lighter);
    --color-dialog-overlay: var(--color-overlay);
    --color-dialog-bg: var(--color-white);
    --color-dialog-border: var(--color-base-lighter);
    --dialog-max-width: var(--width-tablet);
    --dialog-max-width-sm: var(--width-sm);
    --dialog-max-width-lg: var(--width-lg);
    --btn-height-sm: var(--spacing-4);
    --btn-height: var(--spacing-5);
    --btn-height-lg: var(--spacing-6);
    --btn-padding-x: var(--spacing-3);
    --btn-padding-y: var(--spacing-105);
    --btn-padding-x-sm: var(--spacing-2);
    --btn-padding-y-sm: var(--spacing-1);
    --btn-font-size: var(--font-size-sm);
    --btn-font-weight: var(--font-weight-semibold);
    --icon-btn-size-sm: 28px;
    --icon-btn-size-md: 32px;
    --icon-btn-color: var(--color-text-secondary);
    --icon-btn-color-hover: var(--color-text-primary);
    --icon-btn-hover-bg: var(--color-surface-hover);
    --btn-radius: var(--radius-button);
    --btn-border-width: var(--border-width-hairline);
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: var(--color-primary-dark);
    --btn-primary-text: var(--color-text-inverse);
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--color-primary);
    --btn-secondary-text: var(--color-primary);
    --btn-secondary-bg-hover: var(--color-primary);
    --btn-secondary-text-hover: var(--color-text-inverse);
    --btn-tertiary-bg: transparent;
    --btn-tertiary-text: var(--color-primary);
    --btn-tertiary-text-hover: var(--color-primary-dark);
    --btn-ghost-bg: transparent;
    --btn-ghost-text: var(--color-base-dark);
    --btn-ghost-text-hover: var(--color-ink);
    --btn-ghost-bg-hover: var(--color-base-lighter);
    --btn-danger-bg: var(--color-danger);
    --btn-danger-bg-hover: var(--color-danger-dark);
    --btn-danger-text: var(--color-text-inverse);
    --btn-warning-bg: var(--color-warning-dark);
    --btn-warning-bg-hover: var(--color-warning-darker);
    --btn-warning-text: var(--color-text-inverse);
    --focus-ring-width: var(--border-width-thin);
    --focus-ring-offset: var(--border-width-thin);
    --focus-ring-color: var(--color-primary);
    --focus-ring-color-danger: var(--color-danger);
    --input-height: var(--spacing-5);
    --input-padding-x: var(--spacing-2);
    --input-padding-y: var(--spacing-105);
    --input-font-size: var(--font-size-base);
    --input-radius: var(--radius-input);
    --input-border-width: var(--border-width-hairline);
    --input-border-color: var(--color-base-lighter);
    --input-border-color-focus: var(--focus-ring-color);
    --input-bg: var(--color-white);
    --card-padding: var(--spacing-3);
    --card-radius: var(--radius-card);
    --card-shadow: var(--shadow-card);
    --card-bg: var(--color-white);
    --card-border-color: var(--color-base-lighter);
    --table-header-bg: var(--color-base-lighter);
    --table-header-weight: var(--font-weight-semibold);
    --table-cell-padding-x: var(--spacing-2);
    --table-cell-padding-y: var(--spacing-105);
    --table-border-color: var(--color-base-lighter);
    --table-row-hover-bg: var(--color-gray-2);
    --alert-padding-x: var(--spacing-2);
    --alert-padding-y: var(--spacing-105);
    --alert-border-left-width: var(--border-width-thick);
    --alert-icon-size: var(--spacing-205);
    --alert-gap: var(--spacing-105);
    --legal-max-width: var(--width-tablet);
    --legal-padding-x: var(--spacing-3);
    --legal-padding-y: var(--spacing-6);
    --legal-section-gap: var(--spacing-5);
    --legal-paragraph-gap: var(--spacing-2);
    --legal-list-gap: var(--spacing-105);
    --legal-heading-color: var(--color-ink);
    --legal-body-color: var(--color-text-secondary);
    --legal-meta-color: var(--color-text-tertiary);
    --legal-link-color: var(--color-primary);
    --legal-link-hover-color: var(--color-primary-dark);
    --legal-divider-color: var(--color-base-lighter);
    --legal-bg: var(--color-white);
    --legal-header-bg: var(--color-gray-cool-2);
    --profile-menu-bg: var(--color-surface);
    --profile-menu-item-color: var(--color-text-primary);
    --profile-menu-item-hover-bg: var(--color-base-lightest);
    --profile-menu-divider: var(--color-base-lighter);
    --profile-menu-danger-color: var(--color-danger);
    --profile-menu-danger-hover-bg: var(--color-danger-lighter);
    --card-grid-min-width: 18.75rem;
    --card-grid-min-height: 12.5rem;
    --card-grid-badge-padding: var(--spacing-05) var(--spacing-1);
    --tag-gap: var(--spacing-05);
    --tag-remove-size: 16px;
    --tag-remove-color: var(--color-text-tertiary);
    --tag-remove-color-hover: var(--color-text-primary);
    --nav-overlay-bg: hsla(0, 0%, 100%, 0.1);
    --nav-text-muted: hsla(0, 0%, 100%, 0.5);
    --nav-primary-highlight: hsla(214, 100%, 42%, 0.05);
    --textarea-min-height-sm: 3.75rem;
    --textarea-min-height-md: 5rem;
    --textarea-min-height-lg: 12.5rem;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
      -o-tab-size: 4;
         tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::-moz-placeholder {
    opacity: 1;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::-moz-placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    -webkit-appearance: button;
       -moz-appearance: button;
            appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-3 {
    top: var(--spacing-3);
  }
  .right-3 {
    right: var(--spacing-3);
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .float-left {
    float: left;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-1 {
    margin: var(--spacing-1);
  }
  .m-2 {
    margin: var(--spacing-2);
  }
  .m-3 {
    margin: var(--spacing-3);
  }
  .m-4 {
    margin: var(--spacing-4);
  }
  .m-5 {
    margin: var(--spacing-5);
  }
  .mx-1 {
    margin-inline: var(--spacing-1);
  }
  .mx-2 {
    margin-inline: var(--spacing-2);
  }
  .mx-3 {
    margin-inline: var(--spacing-3);
  }
  .mx-4 {
    margin-inline: var(--spacing-4);
  }
  .mx-5 {
    margin-inline: var(--spacing-5);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: var(--spacing-1);
  }
  .my-2 {
    margin-block: var(--spacing-2);
  }
  .my-3 {
    margin-block: var(--spacing-3);
  }
  .my-4 {
    margin-block: var(--spacing-4);
  }
  .my-5 {
    margin-block: var(--spacing-5);
  }
  .\!mt-0 {
    margin-top: calc(var(--spacing) * 0) !important;
  }
  .\!mt-4 {
    margin-top: var(--spacing-4) !important;
  }
  .mt-1 {
    margin-top: var(--spacing-1);
  }
  .mt-2 {
    margin-top: var(--spacing-2);
  }
  .mt-3 {
    margin-top: var(--spacing-3);
  }
  .mt-4 {
    margin-top: var(--spacing-4);
  }
  .mt-5 {
    margin-top: var(--spacing-5);
  }
  .mt-8 {
    margin-top: var(--spacing-8);
  }
  .mr-1 {
    margin-right: var(--spacing-1);
  }
  .mr-2 {
    margin-right: var(--spacing-2);
  }
  .mr-3 {
    margin-right: var(--spacing-3);
  }
  .mr-4 {
    margin-right: var(--spacing-4);
  }
  .mr-5 {
    margin-right: var(--spacing-5);
  }
  .mb-1 {
    margin-bottom: var(--spacing-1);
  }
  .mb-2 {
    margin-bottom: var(--spacing-2);
  }
  .mb-3 {
    margin-bottom: var(--spacing-3);
  }
  .mb-4 {
    margin-bottom: var(--spacing-4);
  }
  .mb-5 {
    margin-bottom: var(--spacing-5);
  }
  .mb-6 {
    margin-bottom: var(--spacing-6);
  }
  .mb-8 {
    margin-bottom: var(--spacing-8);
  }
  .ml-1 {
    margin-left: var(--spacing-1);
  }
  .ml-2 {
    margin-left: var(--spacing-2);
  }
  .ml-3 {
    margin-left: var(--spacing-3);
  }
  .ml-4 {
    margin-left: var(--spacing-4);
  }
  .ml-5 {
    margin-left: var(--spacing-5);
  }
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-5 {
    height: var(--spacing-5);
  }
  .h-8 {
    height: var(--spacing-8);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-full {
    height: 100%;
  }
  .min-h-\[150px\] {
    min-height: 150px;
  }
  .min-h-\[200px\] {
    min-height: 200px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-5 {
    width: var(--spacing-5);
  }
  .w-8 {
    width: var(--spacing-8);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-grab {
    cursor: grab;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .list-none {
    list-style-type: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: var(--spacing-1);
  }
  .gap-2 {
    gap: var(--spacing-2);
  }
  .gap-3 {
    gap: var(--spacing-3);
  }
  .gap-4 {
    gap: var(--spacing-4);
  }
  .gap-6 {
    gap: var(--spacing-6);
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
      margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-6 {
    -moz-column-gap: var(--spacing-6);
         column-gap: var(--spacing-6);
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-b-4 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 4px;
  }
  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-accent-cool {
    border-color: var(--color-accent-cool);
  }
  .border-accent-warm {
    border-color: var(--color-accent-warm);
  }
  .border-base-lighter {
    border-color: var(--color-base-lighter);
  }
  .border-blue-600 {
    border-color: var(--color-blue-600);
  }
  .border-info-border {
    border-color: var(--color-info-border);
  }
  .border-nav-border {
    border-color: var(--color-nav-border);
  }
  .border-primary {
    border-color: var(--color-primary);
  }
  .border-secondary {
    border-color: var(--color-secondary);
  }
  .border-success {
    border-color: var(--color-success);
  }
  .border-warning {
    border-color: var(--color-warning);
  }
  .border-warning-border {
    border-color: var(--color-warning-border);
  }
  .bg-accent-cool {
    background-color: var(--color-accent-cool);
  }
  .bg-accent-warm {
    background-color: var(--color-accent-warm);
  }
  .bg-base {
    background-color: var(--color-base);
  }
  .bg-base-dark {
    background-color: var(--color-base-dark);
  }
  .bg-base-darker {
    background-color: var(--color-base-darker);
  }
  .bg-base-light {
    background-color: var(--color-base-light);
  }
  .bg-base-lighter {
    background-color: var(--color-base-lighter);
  }
  .bg-base-lightest {
    background-color: var(--color-base-lightest);
  }
  .bg-code-bg {
    background-color: var(--color-code-bg);
  }
  .bg-danger {
    background-color: var(--color-danger);
  }
  .bg-gray-1 {
    background-color: var(--color-gray-1);
  }
  .bg-gray-2 {
    background-color: var(--color-gray-2);
  }
  .bg-gray-5 {
    background-color: var(--color-gray-5);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-header {
    background-color: var(--color-header);
  }
  .bg-info {
    background-color: var(--color-info);
  }
  .bg-info-bg {
    background-color: var(--color-info-bg);
  }
  .bg-ink {
    background-color: var(--color-ink);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-secondary {
    background-color: var(--color-secondary);
  }
  .bg-success {
    background-color: var(--color-success);
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .bg-warning-bg {
    background-color: var(--color-warning-bg);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: var(--spacing-1);
  }
  .p-2 {
    padding: var(--spacing-2);
  }
  .p-3 {
    padding: var(--spacing-3);
  }
  .p-4 {
    padding: var(--spacing-4);
  }
  .p-5 {
    padding: var(--spacing-5);
  }
  .p-6 {
    padding: var(--spacing-6);
  }
  .p-8 {
    padding: var(--spacing-8);
  }
  .px-1 {
    padding-inline: var(--spacing-1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: var(--spacing-2);
  }
  .px-3 {
    padding-inline: var(--spacing-3);
  }
  .px-4 {
    padding-inline: var(--spacing-4);
  }
  .px-5 {
    padding-inline: var(--spacing-5);
  }
  .px-6 {
    padding-inline: var(--spacing-6);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: var(--spacing-1);
  }
  .py-2 {
    padding-block: var(--spacing-2);
  }
  .py-3 {
    padding-block: var(--spacing-3);
  }
  .py-4 {
    padding-block: var(--spacing-4);
  }
  .py-5 {
    padding-block: var(--spacing-5);
  }
  .py-6 {
    padding-block: var(--spacing-6);
  }
  .py-8 {
    padding-block: var(--spacing-8);
  }
  .py-\[18px\] {
    padding-block: 18px;
  }
  .pt-1 {
    padding-top: var(--spacing-1);
  }
  .pt-2 {
    padding-top: var(--spacing-2);
  }
  .pt-3 {
    padding-top: var(--spacing-3);
  }
  .pt-4 {
    padding-top: var(--spacing-4);
  }
  .pt-5 {
    padding-top: var(--spacing-5);
  }
  .pr-1 {
    padding-right: var(--spacing-1);
  }
  .pr-2 {
    padding-right: var(--spacing-2);
  }
  .pr-3 {
    padding-right: var(--spacing-3);
  }
  .pr-4 {
    padding-right: var(--spacing-4);
  }
  .pr-5 {
    padding-right: var(--spacing-5);
  }
  .pb-1 {
    padding-bottom: var(--spacing-1);
  }
  .pb-2 {
    padding-bottom: var(--spacing-2);
  }
  .pb-3 {
    padding-bottom: var(--spacing-3);
  }
  .pb-4 {
    padding-bottom: var(--spacing-4);
  }
  .pb-5 {
    padding-bottom: var(--spacing-5);
  }
  .pl-1 {
    padding-left: var(--spacing-1);
  }
  .pl-2 {
    padding-left: var(--spacing-2);
  }
  .pl-3 {
    padding-left: var(--spacing-3);
  }
  .pl-4 {
    padding-left: var(--spacing-4);
  }
  .pl-5 {
    padding-left: var(--spacing-5);
  }
  .pl-6 {
    padding-left: var(--spacing-6);
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .font-ui {
    font-family: var(--font-ui);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[1\.5rem\] {
    font-size: 1.5rem;
  }
  .text-\[1\.46rem\] {
    font-size: 1.46rem;
  }
  .text-\[1\.95rem\] {
    font-size: 1.95rem;
  }
  .text-\[2\.25rem\] {
    font-size: 2.25rem;
  }
  .text-\[2\.44rem\] {
    font-size: 2.44rem;
  }
  .leading-\[1\.2\] {
    --tw-leading: 1.2;
    line-height: 1.2;
  }
  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }
  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }
  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }
  .leading-\[1\.62\] {
    --tw-leading: 1.62;
    line-height: 1.62;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-extralight {
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: var(--font-weight-extralight);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-base {
    color: var(--color-base);
  }
  .text-base-dark {
    color: var(--color-base-dark);
  }
  .text-base-darker {
    color: var(--color-base-darker);
  }
  .text-base-light {
    color: var(--color-base-light);
  }
  .text-base-lighter {
    color: var(--color-base-lighter);
  }
  .text-code-text {
    color: var(--color-code-text);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-gray-900 {
    color: var(--color-gray-900);
  }
  .text-header {
    color: var(--color-header);
  }
  .text-ink {
    color: var(--color-ink);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .overline {
    text-decoration-line: overline;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-25 {
    opacity: 25%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.1)), 0 4px 6px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.1)), 0 2px 4px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.06));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.1)), 0 10px 10px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.04));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .hover\:bg-gray-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-200);
      }
    }
  }
  .hover\:text-ink {
    &:hover {
      @media (hover: hover) {
        color: var(--color-ink);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:shadow-md {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 6px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.1)), 0 2px 4px var(--tw-shadow-color, hsla(0, 0%, 0%, 0.06));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .focus-visible\:outline {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 1px;
    }
  }
  .focus-visible\:outline-4 {
    &:focus-visible {
      outline-style: var(--tw-outline-style);
      outline-width: 4px;
    }
  }
  .focus-visible\:outline-offset-0 {
    &:focus-visible {
      outline-offset: 0px;
    }
  }
  .focus-visible\:outline-\[\#2491ff\] {
    &:focus-visible {
      outline-color: #2491ff;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}
.dark {
  --color-base-lightest: var(--color-gray-cool-90);
  --color-base-lighter: var(--color-gray-cool-70);
  --color-base-light: var(--color-gray-cool-50);
  --color-base: var(--color-gray-cool-40);
  --color-base-dark: var(--color-gray-cool-20);
  --color-base-darker: var(--color-gray-cool-10);
  --color-base-darkest: var(--color-gray-cool-5);
  --color-ink: var(--color-white);
  --color-primary: var(--color-blue-30);
  --color-primary-light: var(--color-blue-20);
  --color-primary-lighter: var(--color-blue-warm-80v);
  --color-primary-dark: var(--color-blue-40);
  --color-primary-darker: var(--color-blue-50);
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-cool-20);
  --color-text-tertiary: var(--color-gray-cool-30);
  --color-text-muted: var(--color-gray-cool-40);
  --color-surface: var(--color-gray-cool-80);
  --color-surface-light: var(--color-gray-cool-80);
  --color-surface-hover: var(--color-gray-cool-70);
  --color-surface-active: var(--color-gray-cool-60);
  --card-bg: var(--color-gray-cool-80);
  --card-border-color: var(--color-gray-cool-70);
  --table-header-bg: var(--color-gray-cool-80);
  --table-border-color: var(--color-gray-cool-70);
  --table-row-hover-bg: var(--color-gray-cool-70);
  --input-bg: var(--color-gray-cool-80);
  --input-border-color: var(--color-gray-cool-60);
  --input-bg-disabled: var(--color-gray-cool-70);
  --color-dialog-bg: var(--color-gray-cool-80);
  --color-dialog-border: var(--color-gray-cool-70);
  --color-header: var(--color-blue-warm-header);
  --profile-menu-bg: var(--color-gray-cool-80);
  --profile-menu-item-color: var(--color-white);
  --profile-menu-item-hover-bg: var(--color-gray-cool-70);
  --profile-menu-divider: var(--color-gray-cool-70);
  --profile-menu-danger-hover-bg: var(--color-red-vivid-60);
  --profile-menu-danger-color: var(--color-red-30);
  --nav-overlay-bg: hsla(0, 0%, 100%, 0.15);
  --nav-text-muted: hsla(0, 0%, 100%, 0.6);
  --nav-primary-highlight: hsla(214, 100%, 60%, 0.1);
}
@layer components {
  .page-header {
    background-color: var(--color-white);
    padding: var(--spacing-5) 0;
    border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  }
  .page-header__container {
    max-width: var(--width-widescreen);
    margin: 0 auto;
    padding: 0 var(--spacing-3);
  }
  .page-header__category {
    font-family: var(--font-ui);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--spacing-1) 0;
  }
  .page-header__title {
    font-family: var(--font-ui);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
    margin: 0 0 var(--spacing-2) 0;
  }
  .page-header__description {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-base-dark);
    margin: 0;
    max-width: var(--max-width-prose-wide);
  }
  .section-label {
    font-family: var(--font-ui);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
    margin: var(--spacing-5) 0 0 0;
  }
  .section-label--uppercase {
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-loose);
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    margin: var(--spacing-4) 0 0 0;
  }
  .section-heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
    margin: 0 0 var(--spacing-3) 0;
  }
  .subsection-heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-ink);
    margin: 0 0 var(--spacing-2) 0;
  }
  .component-heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--color-ink);
    margin: 0 0 var(--spacing-1) 0;
  }
  .small-heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    color: var(--color-ink);
    margin: 0 0 var(--spacing-1) 0;
  }
  .label-heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    color: var(--color-base-dark);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin: 0 0 var(--spacing-05) 0;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    height: var(--btn-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-ui);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--line-height-none);
    text-decoration: none;
    border: var(--btn-border-width) solid transparent;
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .btn--sm {
    height: var(--btn-height-sm);
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--font-size-xs);
  }
  .btn--lg {
    height: var(--btn-height-lg);
    padding: var(--btn-padding-y) var(--spacing-4);
    font-size: var(--font-size-base);
  }
  .btn--primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
  }
  .btn--primary:hover:not(:disabled) {
    background-color: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
  }
  .btn--secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
  }
  .btn--secondary:hover:not(:disabled) {
    background-color: var(--btn-secondary-bg-hover);
    color: var(--btn-secondary-text-hover);
  }
  .btn--tertiary {
    background-color: var(--btn-tertiary-bg);
    border-color: transparent;
    color: var(--btn-tertiary-text);
    padding-left: 0;
    padding-right: 0;
  }
  .btn--tertiary:hover:not(:disabled) {
    color: var(--btn-tertiary-text-hover);
    text-decoration: underline;
  }
  .btn--ghost {
    background-color: var(--btn-ghost-bg);
    border-color: transparent;
    color: var(--btn-ghost-text);
  }
  .btn--ghost:hover:not(:disabled) {
    background-color: var(--btn-ghost-bg-hover);
    color: var(--btn-ghost-text-hover);
  }
  .btn--danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
  }
  .btn--danger:hover:not(:disabled) {
    background-color: var(--btn-danger-bg-hover);
    border-color: var(--btn-danger-bg-hover);
  }
  .btn--warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-bg);
    color: var(--btn-warning-text);
  }
  .btn--warning:hover:not(:disabled) {
    background-color: var(--btn-warning-bg-hover);
    border-color: var(--btn-warning-bg-hover);
  }
  .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--icon-btn-color);
    transition: color 0.15s ease, background-color 0.15s ease;
    border-radius: 0;
    line-height: 1;
  }
  .icon-button--sm {
    width: var(--icon-btn-size-sm);
    height: var(--icon-btn-size-sm);
  }
  .icon-button--md {
    width: var(--icon-btn-size-md);
    height: var(--icon-btn-size-md);
  }
  .icon-button--action:hover {
    color: var(--icon-btn-color-hover);
    background-color: var(--icon-btn-hover-bg);
  }
  .icon-button--subtle:hover {
    color: var(--icon-btn-color-hover);
  }
  .icon-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  label,
.label {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-base-dark);
    margin-bottom: var(--spacing-1);
  }
  input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="search"],
textarea,
select {
    display: block;
    width: 100%;
    height: var(--input-height, 40px);
    padding: var(--spacing-1) var(--spacing-105);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    border: var(--border-width-hairline) solid var(--color-base-lighter);
    border-radius: 0;
    transition: border-color 0.15s ease;
  }
  textarea {
    height: auto;
    min-height: 6.25rem;
    resize: vertical;
  }
  select {
    padding-right: var(--spacing-4);
    cursor: pointer;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--color-text-muted);
  }
  input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
  }
  input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border: var(--border-width-thin) solid var(--color-primary);
    padding: 7px 11px;
    outline: none;
    box-shadow: none;
  }
  textarea:focus {
    padding: 7px 11px;
  }
  .input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--width-mobile);
  }
  .input-group__icon {
    position: absolute;
    left: var(--spacing-105);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
  .input-group__input {
    padding-left: var(--spacing-5) !important;
  }
  .search-clear {
    position: absolute;
    right: var(--spacing-1);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-3);
    height: var(--spacing-3);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-tertiary);
    cursor: pointer;
  }
  .search-clear:hover {
    color: var(--color-text-primary);
  }
  .select--auto {
    width: auto !important;
    display: inline-block;
    min-width: 8.75rem;
  }
  .select--sm {
    height: var(--spacing-4);
    padding: 4px 28px 4px 8px;
    font-size: var(--font-size-sm);
  }
  .filter-tabs {
    display: flex;
    gap: var(--spacing-1);
    padding: var(--spacing-05);
    background-color: var(--color-base-lightest);
    border-radius: var(--radius-sm);
    display: inline-flex;
  }
  .filter-tab {
    padding: var(--spacing-05) var(--spacing-2);
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .filter-tab:hover {
    color: var(--color-text-primary);
    background-color: var(--color-white);
  }
  .filter-tab.active {
    color: var(--color-primary);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-weight-semibold);
  }
  .page-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
    width: 100%;
  }
  .page-toolbar > * {
    flex-shrink: 0;
  }
  .date-range-filter {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
  }
  .date-range-filter input[type="date"] {
    width: 9.375rem;
  }
  .date-separator {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
  }
  @media (max-width: 1024px) {
    .page-toolbar {
      flex-wrap: wrap;
    }
  }
  @media (max-width: 768px) {
    .page-toolbar {
      flex-direction: column;
      align-items: stretch;
    }
    .page-toolbar > .input-group {
      width: 100%;
      max-width: none;
    }
    .date-range-filter {
      flex-direction: column;
      align-items: stretch;
    }
    .date-range-filter input[type="date"] {
      width: 100%;
    }
  }
  .card {
    background-color: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
  }
  .card--bordered {
    border: var(--border-width-hairline) solid var(--card-border-color);
    box-shadow: none;
  }
  .dialog__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-4);
    height: var(--spacing-4);
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--color-base-dark);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .dialog__close:hover {
    background-color: var(--color-base-lighter);
  }
  .dialog__close:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
  .alert {
    display: flex;
    gap: var(--alert-gap);
    padding: var(--alert-padding-y) var(--alert-padding-x);
    border-radius: var(--radius-sm);
    border: var(--border-width-hairline) solid transparent;
    border-left-width: var(--alert-border-left-width);
    box-shadow: var(--shadow-sm);
  }
  .alert__icon {
    flex-shrink: 0;
    width: var(--alert-icon-size);
    height: var(--alert-icon-size);
    margin-top: 2px;
    color: currentColor;
  }
  .alert__icon svg {
    width: 100%;
    height: 100%;
  }
  .alert__content {
    flex: 1;
  }
  .alert__title {
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-05) 0;
  }
  .alert__message {
    font-size: var(--font-size-sm);
    margin: 0;
  }
  .alert--info {
    background-color: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-darker);
  }
  .alert--info .alert__title {
    color: var(--color-info-darker);
  }
  .alert--info .alert__message {
    color: var(--color-info-dark);
  }
  .alert--success {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-darker);
  }
  .alert--success .alert__title {
    color: var(--color-success-darker);
  }
  .alert--success .alert__message {
    color: var(--color-success-dark);
  }
  .alert--warning {
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--color-warning-text);
  }
  .alert--warning .alert__title {
    color: var(--color-warning-text);
  }
  .alert--warning .alert__message {
    color: var(--color-warning-text-light);
  }
  .alert--error {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    border-left-color: var(--color-danger);
    color: var(--color-danger-text);
  }
  .alert--error .alert__title {
    color: var(--color-danger-text);
  }
  .alert--error .alert__message {
    color: var(--color-danger-text-light);
  }
  .table-wrapper {
    background: var(--color-surface);
    border-radius: var(--radius-card);
    border: var(--border-width-hairline) solid var(--color-base-light);
    overflow: hidden;
  }
  .table {
    width: 100%;
    border-collapse: collapse;
  }
  .table th {
    background: var(--table-header-bg);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    text-align: left;
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: var(--table-header-weight);
    color: var(--color-base-dark);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: var(--border-width-hairline) solid var(--color-base-light);
  }
  .table td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    border-bottom: var(--border-width-hairline) solid var(--table-border-color);
    font-size: var(--font-size-sm);
    color: var(--color-base-darker);
    vertical-align: middle;
  }
  .table tr:last-child td {
    border-bottom: none;
  }
  .table tbody tr {
    transition: background-color 0.15s ease;
  }
  .table tbody tr:hover td {
    background-color: var(--table-row-hover-bg);
  }
  .table--clickable tbody tr {
    cursor: pointer;
  }
  .table--clickable tbody tr:hover td {
    background-color: var(--table-row-hover-bg);
  }
  .table__title {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }
  .table__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin-left: var(--spacing-1);
  }
  .badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-05) var(--spacing-1);
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .badge--sm {
    padding: var(--border-width-hairline) var(--spacing-1);
    font-size: 0.625rem;
  }
  .badge--default {
    background-color: var(--color-base-lighter);
    color: var(--color-base-dark);
  }
  .badge--success {
    background-color: var(--color-success-lighter);
    color: var(--color-success-dark);
  }
  .badge--warning {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning-dark);
  }
  .badge--error {
    background-color: var(--color-danger-lighter);
    color: var(--color-danger-dark);
  }
  .badge--info {
    background-color: var(--color-info-lighter);
    color: var(--color-info-dark);
  }
  .badge--primary {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary-dark);
  }
  .badge--secondary {
    background-color: var(--color-secondary-lighter);
    color: var(--color-secondary-dark);
  }
  .badge--accent {
    background-color: var(--color-accent-warm-light);
    color: var(--color-accent-warm-dark);
  }
  .badge--pink {
    background-color: var(--color-pink-5);
    color: var(--color-pink-60v);
  }
  .badge--gold {
    background-color: var(--color-amber-10);
    color: var(--color-amber-60v);
  }
  .badge--federal {
    background-color: var(--color-blue-10);
    color: var(--color-blue-warm-70v);
  }
  .badge--sled {
    background-color: var(--color-green-cool-5);
    color: var(--color-success-dark);
  }
  .badge--commercial {
    background-color: var(--color-gold-5);
    color: var(--color-gold-vivid-50);
  }
  .badge--international {
    background-color: var(--color-violet-5);
    color: var(--color-violet-70v);
  }
  .badge--ta-active {
    background-color: var(--color-success-lighter);
    color: var(--color-success-dark);
  }
  .badge--ta-expired {
    background-color: var(--color-danger-lighter);
    color: var(--color-danger-dark);
  }
  .badge--ta-pending {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning-dark);
  }
  .badge--ta-none {
    background-color: var(--color-base-lighter);
    color: var(--color-base-dark);
  }
  .badge--state {
    background-color: var(--color-accent-warm-light);
    color: var(--color-accent-warm-dark);
  }
  .badge--exceptional {
    background-color: var(--color-success-lighter);
    color: var(--color-success-dark);
  }
  .badge--very-good {
    background-color: var(--color-info-lighter);
    color: var(--color-info-dark);
  }
  .badge--satisfactory {
    background-color: var(--color-base-lighter);
    color: var(--color-base-dark);
  }
  .badge--marginal {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning-dark);
  }
  .badge--unsatisfactory {
    background-color: var(--color-danger-lighter);
    color: var(--color-danger-dark);
  }
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--tag-gap);
  }
  .tag__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tag-remove-size);
    height: var(--tag-remove-size);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: var(--tag-remove-color);
    transition: color 0.15s ease;
    line-height: 1;
    border-radius: 0;
  }
  .tag__remove:hover {
    color: var(--tag-remove-color-hover);
  }
  .legal-shell {
    min-height: 100vh;
    background-color: var(--legal-bg);
    display: flex;
    flex-direction: column;
  }
  .legal-shell__header {
    background-color: var(--legal-header-bg);
    border-bottom: var(--border-width-hairline) solid var(--legal-divider-color);
    padding: var(--spacing-3) var(--legal-padding-x);
  }
  .legal-shell__header-inner {
    max-width: var(--legal-max-width);
    margin: 0 auto;
  }
  .legal-shell__logo {
    font-family: var(--font-ui);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    text-decoration: none;
  }
  .legal-shell__logo:hover {
    color: var(--legal-link-color);
  }
  .legal-shell__content {
    flex: 1;
    padding: var(--legal-padding-y) var(--legal-padding-x);
  }
  .legal-shell__content-inner {
    max-width: var(--legal-max-width);
    margin: 0 auto;
  }
  .legal-shell__footer {
    border-top: var(--border-width-hairline) solid var(--legal-divider-color);
    padding: var(--spacing-3) var(--legal-padding-x);
    text-align: center;
  }
  .legal-shell__footer-text {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    color: var(--legal-meta-color);
    margin: 0;
  }
  .legal-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--legal-heading-color);
    margin: 0 0 var(--spacing-2) 0;
  }
  .legal-lead {
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--legal-body-color);
    margin: 0 0 var(--spacing-4) 0;
  }
  .legal-meta {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--legal-meta-color);
    margin: 0 0 var(--spacing-4) 0;
  }
  .legal-section {
    margin-bottom: var(--legal-section-gap);
  }
  .legal-section:last-child {
    margin-bottom: 0;
  }
  .legal-section__heading {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--legal-heading-color);
    margin: 0 0 var(--spacing-2) 0;
  }
  .legal-section__subheading {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--legal-heading-color);
    margin: var(--spacing-3) 0 var(--spacing-1) 0;
  }
  .legal-paragraph {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--legal-body-color);
    margin: 0 0 var(--legal-paragraph-gap) 0;
  }
  .legal-paragraph:last-child {
    margin-bottom: 0;
  }
  .legal-list {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--legal-body-color);
    margin: 0 0 var(--legal-paragraph-gap) 0;
    padding-left: var(--spacing-3);
    list-style-type: disc;
  }
  .legal-list li {
    margin-bottom: var(--legal-list-gap);
  }
  .legal-list li:last-child {
    margin-bottom: 0;
  }
  .legal-emphasis {
    font-weight: var(--font-weight-semibold);
    color: var(--legal-heading-color);
  }
  .legal-link {
    color: var(--legal-link-color);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .legal-link:hover {
    color: var(--legal-link-hover-color);
  }
  .legal-divider {
    border: none;
    border-top: var(--border-width-hairline) solid var(--legal-divider-color);
    margin: var(--legal-section-gap) 0;
  }
  .legal-nav-card {
    background-color: var(--color-gray-cool-2);
    border: var(--border-width-hairline) solid var(--legal-divider-color);
    padding: var(--spacing-3);
    margin-bottom: var(--legal-section-gap);
  }
  .legal-nav-card__title {
    font-family: var(--font-ui);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--legal-heading-color);
    margin: 0 0 var(--spacing-1) 0;
  }
  .legal-nav-card__description {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--legal-body-color);
    margin: 0;
  }
  .legal-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--legal-section-gap);
  }
  .legal-doc-table th {
    font-family: var(--font-ui);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--legal-meta-color);
    text-align: left;
    padding: var(--spacing-1) var(--spacing-2);
    border-bottom: var(--border-width-hairline) solid var(--legal-divider-color);
  }
  .legal-doc-table td {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--legal-body-color);
    padding: var(--spacing-2);
    border-bottom: var(--border-width-hairline) solid var(--legal-divider-color);
    vertical-align: top;
  }
  .legal-doc-table tr:last-child td {
    border-bottom: none;
  }
  .legal-doc-table__title {
    font-weight: var(--font-weight-medium);
    color: var(--legal-heading-color);
  }
  .legal-contact {
    background-color: var(--color-gray-cool-2);
    border: var(--border-width-hairline) solid var(--legal-divider-color);
    padding: var(--spacing-3);
  }
  .legal-contact__heading {
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--legal-heading-color);
    margin: 0 0 var(--spacing-1) 0;
  }
  .legal-contact__text {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--legal-body-color);
    margin: 0;
  }
  @media (max-width: 640px) {
    .legal-title {
      font-size: var(--font-size-4xl);
    }
    .legal-section__heading {
      font-size: var(--font-size-2xl);
    }
    .legal-section__subheading {
      font-size: var(--font-size-lg);
    }
    .legal-lead {
      font-size: var(--font-size-base);
    }
    .legal-doc-table {
      display: block;
    }
    .legal-doc-table thead {
      display: none;
    }
    .legal-doc-table tbody,
    .legal-doc-table tr,
    .legal-doc-table td {
      display: block;
      width: 100%;
    }
    .legal-doc-table tr {
      margin-bottom: var(--spacing-3);
      border-bottom: var(--border-width-hairline) solid var(--legal-divider-color);
      padding-bottom: var(--spacing-3);
    }
    .legal-doc-table td {
      border-bottom: none;
      padding: var(--spacing-05) 0;
    }
    .legal-doc-table tr:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
}
.login-page {
  font-family: var(--font-ui);
  min-height: 100vh;
  display: flex;
}
.login-hero {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
  padding: var(--spacing-6) var(--spacing-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-hero__content {
  margin-top: auto;
  margin-bottom: auto;
}
.login-hero__text h1 {
  font-family: var(--font-ui);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-205);
  max-width: 25rem;
}
.login-hero__text p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  max-width: 23.75rem;
  color: hsla(0, 0%, 100%, 0.9);
  line-height: var(--line-height-relaxed);
}
.login-hero__footer {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: hsla(0, 0%, 100%, 0.7);
  line-height: var(--line-height-relaxed);
  max-width: var(--width-mobile);
}
.login-form-pane {
  flex: 1;
  max-width: 35rem;
  background: var(--color-white);
  padding: var(--spacing-8) var(--spacing-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-form-header {
  margin-bottom: var(--spacing-4);
}
.login-heading {
  font-family: var(--font-ui);
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.login-subtitle {
  margin: var(--spacing-1) 0 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.login-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-205);
  background: var(--color-danger-lighter);
  border: var(--border-width-hairline) solid var(--color-danger-light);
  border-radius: var(--input-radius);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-2);
}
.login-error__dismiss {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}
.login-error__dismiss:hover {
  opacity: 1;
}
.login-success-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-205);
  background: var(--color-success-lighter);
  border: var(--border-width-hairline) solid var(--color-success-light);
  border-radius: var(--input-radius);
  color: var(--color-success);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-2);
}
.login-success-message .login-error__dismiss {
  color: var(--color-success);
}
.login-field input:disabled,
.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-205);
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.login-field label {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.login-field input {
  font-family: var(--font-sans);
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--input-radius);
  border: var(--border-width-thin) solid var(--input-border-color);
  background: var(--color-base-lightest);
  font-size: var(--input-font-size);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.login-field input::-moz-placeholder {
  color: var(--color-text-muted);
}
.login-field input::placeholder {
  color: var(--color-text-muted);
}
.login-field input:focus {
  border-color: var(--input-border-color-focus);
  background: var(--color-white);
  box-shadow: 0 0 0 var(--input-focus-ring-width) hsla(218, 100%, 42%, 0.2);
}
.login-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  margin-top: calc(-1 * var(--spacing-05));
}
.login-field-inline a {
  font-family: var(--font-ui);
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: var(--font-weight-bold);
}
.login-field-inline a:hover {
  color: var(--color-primary-dark);
}
.login-btn {
  font-family: var(--font-ui);
  border: none;
  border-radius: var(--btn-radius);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-105);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  width: 100%;
  height: var(--btn-height);
}
.login-btn:focus-visible {
  outline: var(--spacing-05) solid var(--color-primary-light);
  outline-offset: 0;
}
.login-btn:active {
  transform: translateY(1px);
}
.login-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.login-btn--primary:hover {
  background: var(--btn-primary-bg-hover);
}
.login-btn--outline {
  background: var(--color-white);
  border: var(--border-width-thin) solid var(--input-border-color);
  color: var(--color-text-primary);
}
.login-btn--outline:hover {
  background: var(--color-base-lightest);
  border-color: var(--color-base-light);
}
.login-btn__icon {
  width: var(--font-size-xl);
  height: var(--font-size-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-btn__icon svg {
  width: var(--font-size-xl);
  height: var(--font-size-xl);
}
.login-oidc-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-105);
}
.login-divider {
  display: flex;
  align-items: center;
  gap: var(--spacing-105);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  margin: var(--spacing-05) 0;
}
.login-divider__line {
  flex: 1;
  height: var(--border-width-hairline);
  background: var(--color-base-lighter);
}
.login-notice {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-1);
  line-height: var(--line-height-relaxed);
}
.login-field-row {
  display: flex;
  gap: var(--spacing-2);
}
.login-field--half {
  flex: 1;
}
.login-field label .required {
  color: var(--color-danger);
}
.login-field__hint {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--spacing-05);
}
.login-field-inline--center {
  justify-content: center;
  gap: var(--spacing-1);
  margin-top: var(--spacing-3);
}
.login-field-inline--center span {
  color: var(--color-text-secondary);
}
.login-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
}
.login-success__icon {
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: 50%;
  background: var(--color-success-lighter);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-success__icon svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
}
.login-success__title {
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.login-success__message {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: var(--width-mobile);
  line-height: var(--line-height-relaxed);
}
.waitlist-message {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-2);
}
.waitlist-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3);
  text-align: center;
  padding: var(--spacing-4) 0;
}
.waitlist-success .login-success__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.waitlist-success .login-success__message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}
@media (max-width: 1024px) {
  .login-form-pane {
    padding: var(--spacing-6) var(--spacing-6);
  }
}
@media (max-width: 880px) {
  .login-page {
    flex-direction: column;
  }
  .login-hero {
    min-height: 17.5rem;
    padding: var(--spacing-4) var(--spacing-3);
  }
  .login-hero__text h1 {
    font-size: var(--font-size-3xl);
  }
  .login-hero__text p {
    font-size: var(--font-size-base);
  }
  .login-form-pane {
    max-width: none;
    padding: var(--spacing-5) var(--spacing-3) var(--spacing-6);
  }
}
@media (max-width: 540px) {
  .login-hero {
    min-height: 13.75rem;
    padding: var(--spacing-3) var(--spacing-205);
  }
  .login-hero__text h1 {
    font-size: var(--font-size-2xl);
  }
  .login-hero__text p {
    font-size: var(--font-size-sm);
  }
  .login-form-pane {
    padding: var(--spacing-4) var(--spacing-205) var(--spacing-5);
  }
  .login-form-header {
    margin-bottom: var(--spacing-3);
  }
  .login-heading {
    font-size: var(--font-size-2xl);
  }
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  text-align: center;
}
.empty-state--full-page {
  min-height: 25rem;
}
.empty-state svg {
  color: var(--color-base-light);
  margin-bottom: var(--spacing-2);
}
.empty-state h3 {
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  margin: 0 0 var(--spacing-1) 0;
}
.empty-state p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 25rem;
  margin: 0 0 var(--spacing-3) 0;
}
.filter-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-left: auto;
}
.filter-checkbox input[type="checkbox"] {
  width: var(--spacing-2);
  height: var(--spacing-2);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.filter-checkbox span {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--font-size-xs);
  padding-top: 1px;
}
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
  padding: var(--spacing-8);
  width: 100%;
}
.loading-state p {
  margin-top: var(--spacing-3);
  color: var(--color-text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
}
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
  width: 100%;
}
.error-state p {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-2) 0;
}
.spinner {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border: var(--border-width-thin) solid var(--color-base-lighter);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.pagination-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.pagination-info {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.dialog__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}
.dialog__metric-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin: 0;
}
.dialog__metric-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
@media (max-width: 640px) {
  .dialog__metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
.btn--icon {
  padding: var(--spacing-05);
  min-width: unset;
}
.btn--icon.btn--sm {
  width: var(--btn-height-sm);
}
.btn--icon.btn--md,
.btn--icon:not(.btn--sm):not(.btn--lg) {
  width: var(--btn-height);
}
.btn--icon.btn--lg {
  width: var(--btn-height-lg);
}
.btn--full-width {
  width: 100%;
}
.btn--loading {
  pointer-events: none;
}
.btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.btn__icon svg {
  width: var(--spacing-2);
  height: var(--spacing-2);
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn__spinner {
  animation: btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}
.page-header-shell .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-105) var(--spacing-2);
  margin-bottom: var(--spacing-105);
  flex-shrink: 0;
}
.page-header-shell .page-header h1 {
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}
.page-header-shell .header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.view-toggle {
  display: flex;
  gap: var(--border-width-hairline);
  border: var(--border-width-hairline) solid var(--color-gray-200);
  background: var(--color-base-lightest);
}
.view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-base);
  transition: background 0.2s ease, color 0.2s ease;
}
.view-toggle__btn:hover {
  color: var(--color-base-darker);
  background: var(--color-base-lighter);
}
.view-toggle__btn--active {
  background: var(--color-primary);
  color: var(--color-surface);
}
.view-toggle__btn--active:hover {
  background: var(--color-primary-dark);
  color: var(--color-surface);
}
.view-toggle__btn svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}
.inline-edit {
  cursor: pointer;
  padding: var(--spacing-05) var(--spacing-1);
  margin: calc(-1 * var(--spacing-05)) calc(-1 * var(--spacing-1));
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
  min-height: 1.5em;
}
.inline-edit:hover {
  background-color: var(--color-base-lightest);
}
.inline-edit--multiline {
  white-space: pre-wrap;
}
.inline-edit__placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}
.inline-edit__input {
  width: 100%;
  padding: var(--spacing-1) var(--spacing-105);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: 0;
  background-color: var(--color-white);
  font-size: inherit;
  font-family: inherit;
  color: var(--color-ink);
}
.inline-edit__input:focus {
  outline: none;
  border: var(--border-width-thin) solid var(--color-primary);
  padding: 7px 11px;
}
.inline-edit__textarea {
  width: 100%;
  padding: var(--spacing-1);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: 0;
  background-color: var(--color-white);
  font-size: inherit;
  font-family: inherit;
  color: var(--color-ink);
  resize: vertical;
  min-height: var(--textarea-min-height-sm);
}
.inline-edit__textarea:focus {
  outline: none;
  border: var(--border-width-thin) solid var(--color-primary);
  padding: 7px 11px;
}
.inline-edit__select-wrapper {
  cursor: pointer;
  padding: var(--spacing-05) var(--spacing-1);
  margin: calc(-1 * var(--spacing-05)) calc(-1 * var(--spacing-1));
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
  display: inline-block;
}
.inline-edit__select-wrapper:hover {
  background-color: var(--color-base-lightest);
}
.inline-edit__select {
  padding: var(--spacing-05) var(--spacing-1);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: 0;
  background-color: var(--color-white);
  font-size: inherit;
  font-family: inherit;
  color: var(--color-ink);
  cursor: pointer;
  min-width: 7.5rem;
  width: auto;
}
.inline-edit__select:focus {
  outline: none;
  border: var(--border-width-thin) solid var(--color-primary);
}
.page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--card-grid-min-height);
  height: 100%;
  width: 100%;
  padding: var(--spacing-8);
}
.page-loader__spinner {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border: var(--border-width-thin) solid var(--color-base-lighter);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: page-loader-spin 0.8s linear infinite;
  margin-bottom: var(--spacing-2);
}
.page-loader__text {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  margin: 0;
}
@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.chunk-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: var(--spacing-4);
  background: var(--color-base-lightest);
}
.chunk-error__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 25rem;
}
.chunk-error__icon {
  color: var(--color-error);
  margin-bottom: var(--spacing-3);
}
.chunk-error__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1);
}
.chunk-error__description {
  font-size: var(--font-size-md);
  color: var(--color-base);
  margin: 0 0 var(--spacing-3);
}
.chunk-error__button {
  font-family: var(--font-ui);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  height: var(--btn-height);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.chunk-error__button:hover {
  background-color: var(--color-primary-dark);
}
.error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: var(--spacing-4);
  background: var(--color-base-lightest);
}
.error-boundary__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 25rem;
}
.error-boundary__icon {
  color: var(--color-error);
  margin-bottom: var(--spacing-3);
}
.error-boundary__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1);
}
.error-boundary__description {
  font-size: var(--font-size-md);
  color: var(--color-base);
  margin: 0 0 var(--spacing-3);
}
.error-boundary__button {
  font-family: var(--font-ui);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-weight: var(--btn-font-weight);
  font-size: var(--btn-font-size);
  height: var(--btn-height);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.error-boundary__button:hover {
  background-color: var(--color-primary-dark);
}
.toast {
  position: fixed;
  bottom: var(--spacing-3);
  right: var(--spacing-3);
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-1-5) var(--spacing-2);
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  z-index: 9999;
  min-width: 17.5rem;
  max-width: 26.25rem;
  animation: toast-slide-in 0.3s ease-out;
}
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.toast__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast__message {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}
.toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-3);
  height: var(--spacing-3);
  border: none;
  background: transparent;
  color: var(--color-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.toast__close:hover {
  background-color: var(--color-base-lighter);
}
.toast--success {
  border-left: var(--border-width-thick) solid var(--color-success);
}
.toast--success .toast__icon {
  color: var(--color-success);
}
.toast--error {
  border-left: var(--border-width-thick) solid var(--color-error);
}
.toast--error .toast__icon {
  color: var(--color-error);
}
.toast--warning {
  border-left: var(--border-width-thick) solid var(--color-warning);
}
.toast--warning .toast__icon {
  color: var(--color-warning);
}
.toast--info {
  border-left: var(--border-width-thick) solid var(--color-primary);
}
.toast--info .toast__icon {
  color: var(--color-primary);
}
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--spacing-6) var(--spacing-3) var(--spacing-3);
  overflow-y: auto;
  animation: dialog-overlay-fade 0.2s ease-out;
}
.dialog-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--color-dialog-overlay);
  backdrop-filter: blur(2px);
}
@keyframes dialog-overlay-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dialog {
  position: relative;
  background: var(--color-dialog-bg);
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-dialog);
  width: 100%;
  max-width: var(--dialog-max-width-sm);
  max-height: calc(100vh - var(--spacing-8) - var(--spacing-3));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dialog-slide-up 0.2s ease-out;
}
@keyframes dialog-slide-up {
  from {
    transform: translateY(var(--spacing-2));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.dialog--sm {
  max-width: var(--dialog-max-width-sm);
}
.dialog--md {
  max-width: var(--dialog-max-width);
}
.dialog--lg {
  max-width: var(--dialog-max-width-lg);
}
.dialog--half {
  max-width: 50vw;
  min-width: var(--dialog-max-width);
}
.dialog--three-quarter {
  max-width: 75vw;
  min-width: var(--dialog-max-width-lg);
}
.dialog__accent {
  height: var(--border-width-thick);
  width: 100%;
  flex-shrink: 0;
  background-color: var(--color-primary);
}
.dialog__accent--danger {
  background-color: var(--color-danger);
}
.dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-3) 0 var(--spacing-3);
  flex-shrink: 0;
}
.dialog__header-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-105);
  flex: 1;
  min-width: 0;
}
.dialog__header-titles {
  flex: 1;
  min-width: 0;
}
.dialog__icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.dialog__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}
.dialog__subtitle {
  margin: var(--spacing-05) 0 0 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
}
.dialog__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-shrink: 0;
}
.dialog__body {
  padding: var(--spacing-3);
  overflow-y: auto;
  flex: 1;
}
.dialog__body--confirm {
  padding-top: var(--spacing-105);
}
.dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-105);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-base-lightest);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
  flex-shrink: 0;
  margin: 0;
}
.dialog__footer--plain {
  background-color: transparent;
}
.dialog__message {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}
.dialog__message--indented {
  padding-left: calc(24px + var(--spacing-105));
}
.dialog__tabs {
  display: flex;
  gap: var(--spacing-05);
  padding: 0 var(--spacing-3);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  background-color: transparent;
  flex-shrink: 0;
  overflow-x: auto;
  margin-bottom: var(--spacing-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dialog__tabs::-webkit-scrollbar {
  display: none;
}
.dialog__tab {
  position: relative;
  padding: var(--spacing-105) var(--spacing-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-base-dark);
  background: transparent;
  border: none;
  border-bottom: var(--border-width-thin) solid transparent;
  margin-bottom: calc(-1 * var(--border-width-hairline));
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dialog__tab:hover {
  color: var(--color-text-primary);
}
.dialog__tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.dialog__tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}
.dialog__section {
  margin-bottom: var(--spacing-3);
}
.dialog__section:last-child {
  margin-bottom: 0;
}
.dialog__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  margin-top: var(--spacing-4);
  padding-bottom: var(--spacing-1);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__section-header:first-child {
  margin-top: 0;
}
.dialog__section-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-primary);
  display: block;
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-1);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__section-header .dialog__section-title {
  margin: 0;
  padding: 0;
  border: none;
  display: inline-block;
}
.dialog__section-title:first-child {
  margin-top: 0;
}
.dialog__field {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-3);
}
.dialog__field:last-child {
  margin-bottom: 0;
}
.dialog__form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}
.dialog__form-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.dialog__form-grid > .dialog__field {
  margin-bottom: 0;
}
.dialog__field--full {
  grid-column: 1 / -1;
}
.dialog__project-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-105);
  line-height: var(--line-height-normal);
}
.dialog__badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-wrap: wrap;
}
.dialog__btn--delete {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-05) var(--spacing-1);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-base);
  font-size: var(--font-size-xs);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-medium);
  transition: all 0.15s ease;
  gap: var(--spacing-05);
}
.dialog__btn--delete:hover {
  background-color: var(--color-danger-lighter);
  color: var(--color-danger);
}
.dialog__btn--delete:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
.dialog__saving-indicator {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-normal);
  margin-left: var(--spacing-1);
}
.dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-top: var(--spacing-3);
}
.dialog__section-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  white-space: pre-wrap;
}
.dialog__section-content--secondary {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-secondary);
}
.dialog__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.dialog__list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-105);
  background-color: var(--color-surface-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.dialog__list-item-primary {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.dialog__list-item-secondary {
  color: var(--color-text-secondary);
}
.dialog__list-item-tertiary {
  color: var(--color-text-tertiary);
}
.dialog__metadata {
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}
.dialog__metadata-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin: 0;
}
.dialog__alert--error {
  padding: var(--spacing-2);
  margin-top: var(--spacing-2);
  background-color: var(--color-error-lighter);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.dialog__checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  cursor: pointer;
  margin-bottom: var(--spacing-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dialog__checkbox input[type="checkbox"] {
  width: var(--spacing-2);
  height: var(--spacing-2);
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.dialog__checkbox label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding-top: 1px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 0;
  line-height: 1;
}
.dialog__intro {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
  margin-bottom: var(--spacing-3);
}
.dialog__required {
  color: var(--color-danger);
  margin-left: 0.25rem;
}
.dialog__loading,
.dialog__empty {
  text-align: center;
  padding: var(--spacing-4);
  color: var(--color-base);
  margin: 0;
}
.dialog__tag-input {
  display: flex;
  gap: var(--spacing-1);
}
.dialog__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
  margin-top: var(--spacing-1);
}
.dialog__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-05);
  padding: var(--spacing-05) var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.dialog__tag--primary {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}
.dialog__tag--info {
  background-color: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.dialog__tag--success {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__tag--default {
  background-color: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.dialog__tag-remove {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  display: flex;
  align-items: center;
}
.dialog__tag-remove:hover {
  opacity: 1;
}
.dialog__card {
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
}
.dialog__card--form {
  background: var(--color-base-lightest);
  border-style: dashed;
  margin-bottom: var(--spacing-2);
}
.dialog__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-2);
}
.dialog__card-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.dialog__card-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}
.dialog__badge--won {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__badge--lost {
  background-color: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.dialog__badge--pending {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__badge--primary {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}
.dialog__preferred-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-05);
  padding: var(--card-grid-badge-padding);
  background-color: var(--color-gold-5v);
  color: var(--color-gold-50v);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: var(--spacing-1);
}
.dialog__item-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.dialog__item-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.dialog__item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
  margin-top: var(--spacing-05);
}
.dialog__item-content {
  flex: 1;
}
.dialog__item-notes {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-1);
  padding: var(--spacing-1);
  background-color: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.dialog__overall-score {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-left: var(--spacing-1);
}
.dialog__score--high {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__score--medium {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__score--low {
  background-color: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.dialog__accomplishments {
  margin: var(--spacing-1) 0;
  padding-left: var(--spacing-3);
  list-style: disc;
}
.dialog__accomplishment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-05);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.dialog__accomplishment-item span {
  flex: 1;
}
.dialog__remove-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-error);
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.dialog__remove-btn:hover {
  opacity: 1;
}
.dialog__actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2);
}
.dialog__actions-title {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.dialog__action-form {
  background-color: var(--color-base-lightest);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}
.dialog__action-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-2);
}
.dialog__action-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.dialog__action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  background-color: var(--color-base-lightest);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
}
.dialog__action-item--completed {
  opacity: 0.6;
}
.dialog__action-checkbox {
  margin-top: var(--spacing-05);
  cursor: pointer;
}
.dialog__action-content {
  flex: 1;
}
.dialog__action-task {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.dialog__action-task--completed {
  text-decoration: line-through;
}
.dialog__action-meta {
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-05);
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.dialog__action-category {
  padding: 0 6px;
  background-color: var(--color-base-lighter);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.dialog__action-priority {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.dialog__action-priority--high {
  background-color: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.dialog__action-priority--medium {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__action-priority--low {
  background-color: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.dialog__action-delete {
  color: var(--color-error);
  padding: var(--spacing-05) var(--spacing-1);
}
.dialog__action-delete:hover {
  background-color: var(--color-error-lighter);
}
.dialog__scores-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-1);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__status-badge {
  display: inline-block;
  margin-left: var(--spacing-1);
  padding: var(--spacing-05) var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  vertical-align: middle;
}
.dialog__status-badge--customer {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__status-badge--prospect {
  background-color: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.dialog__status-badge--partner {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}
.dialog__status-badge--vendor {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.dialog__table th {
  text-align: left;
  padding: var(--spacing-1);
  font-weight: var(--font-weight-semibold);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__table td {
  padding: var(--spacing-1);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__table tr:last-child td {
  border-bottom: none;
}
.dialog__table-cell--right {
  text-align: right;
}
.dialog__primary-badge {
  margin-left: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
}
.dialog__activity {
  padding: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dialog__activity:last-child {
  border-bottom: none;
}
.dialog__activity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dialog__activity-type {
  display: inline-block;
  padding: var(--spacing-05) var(--spacing-1);
  margin-right: var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--color-base-lighter);
  color: var(--color-text-secondary);
}
.dialog__activity-subject {
  font-weight: var(--font-weight-medium);
}
.dialog__activity-date {
  font-size: var(--font-size-xs);
  color: var(--color-base);
}
.dialog__activity-description {
  margin: var(--spacing-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.dialog__activity-meta {
  margin: var(--spacing-05) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-base);
}
.dialog__log-activity-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}
.dialog__card-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.dialog__card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
  margin-top: 2px;
}
.dialog__card-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.dialog__card--new {
  background: var(--color-base-lightest);
  border-style: dashed;
}
.dialog__review-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}
.dialog__review-indicator {
  width: var(--spacing-105);
  height: var(--spacing-105);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: var(--spacing-05);
}
.dialog__review-indicator--pink {
  background-color: var(--color-pink-5);
}
.dialog__review-indicator--red {
  background-color: var(--color-danger-light);
}
.dialog__review-indicator--gold {
  background-color: var(--color-warning);
}
.dialog__review-indicator--default {
  background-color: var(--color-base-light);
}
.dialog__priority-badge {
  display: inline-block;
  padding: var(--card-grid-badge-padding);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.dialog__priority-badge--critical {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}
.dialog__priority-badge--high {
  background-color: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.dialog__priority-badge--medium {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__priority-badge--low {
  background-color: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.dialog__question-content {
  flex: 1;
}
.dialog__question-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
.dialog__question-number {
  display: inline-block;
  padding: var(--card-grid-badge-padding);
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}
.dialog__question-category {
  display: inline-block;
  padding: var(--card-grid-badge-padding);
  background-color: var(--color-base-lighter);
  color: var(--color-base-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.dialog__question-status {
  display: inline-block;
  padding: var(--card-grid-badge-padding);
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.dialog__question-status--answered {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__question-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}
.dialog__question-response {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background-color: var(--color-base-lightest);
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-1);
}
.dialog__badge--overdue {
  background-color: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.dialog__badge--due {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.dialog__badge--in-progress {
  background-color: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.dialog__badge--approved {
  background-color: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.dialog__select--sm {
  padding: var(--spacing-05) 6px;
  font-size: var(--font-size-sm);
  min-width: auto;
  width: auto;
}
@media (max-width: 640px) {
  .dialog--lg,
  .dialog--md {
    max-width: 100%;
  }
  .dialog__form-grid,
  .dialog__form-grid--3col {
    grid-template-columns: 1fr;
  }
  .dialog__metrics {
    grid-template-columns: repeat(2, 1fr);
  }
}
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-base-lightest);
}
.app-header {
  background: var(--color-primary-darker);
  color: var(--color-text-inverse);
  padding: var(--spacing-2) 0;
}
.app-header__inner {
  padding: 0 var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.app-header__logo {
  width: var(--spacing-5);
  height: var(--spacing-5);
  flex-shrink: 0;
}
.app-header__title {
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.header-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: var(--color-text-inverse);
  transition: background 0.15s ease;
}
.header-icon-btn:hover {
  background: var(--nav-overlay-bg);
}
.header-icon-btn:focus-visible {
  outline: var(--border-width-thin) solid var(--color-white);
  outline-offset: var(--border-width-thin);
}
.header-icon-btn--muted {
  color: var(--nav-text-muted);
}
.header-icon--muted {
  opacity: 0.5;
}
.header-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: var(--spacing-2);
  height: var(--spacing-2);
  padding: 0 var(--spacing-05);
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.header-profile {
  position: relative;
}
.header-profile__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.header-profile__btn:focus-visible {
  outline: var(--border-width-thin) solid var(--color-white);
  outline-offset: var(--border-width-thin);
  border-radius: 0;
}
.header-profile__avatar {
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: 50%;
  background: var(--color-accent-cool);
  color: var(--color-text-inverse);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: var(--tracking-wide);
}
.header-profile__avatar--image {
  -o-object-fit: cover;
     object-fit: cover;
  background: none;
}
.profile-menu {
  position: absolute;
  top: calc(100% + var(--spacing-1));
  right: 0;
  background: var(--profile-menu-bg);
  border-radius: 0;
  box-shadow: var(--shadow-md);
  min-width: 12.5rem;
  padding: var(--spacing-1) 0;
  z-index: var(--z-popover);
}
.profile-menu__group {
  padding: var(--spacing-05) 0;
}
.profile-menu__divider {
  height: var(--border-width-hairline);
  background: var(--profile-menu-divider);
  margin: var(--spacing-1) 0;
}
.profile-menu__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-105);
  width: 100%;
  padding: var(--spacing-105) var(--spacing-2);
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--profile-menu-item-color);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.profile-menu__item:hover {
  background-color: var(--profile-menu-item-hover-bg);
}
.profile-menu__item:focus-visible {
  outline: var(--border-width-thin) solid var(--color-primary);
  outline-offset: calc(-1 * var(--border-width-thin));
}
.profile-menu__item--signout {
  color: var(--color-text-secondary);
}
.profile-menu__item--signout:hover {
  background-color: var(--profile-menu-danger-hover-bg);
  color: var(--profile-menu-danger-color);
}
.profile-menu__icon {
  width: var(--spacing-205);
  height: var(--spacing-205);
  flex-shrink: 0;
  stroke: var(--color-text-secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-menu__item:hover .profile-menu__icon {
  stroke: var(--color-text-primary);
}
.profile-menu__item--signout:hover .profile-menu__icon {
  stroke: var(--profile-menu-danger-color);
}
.section-nav {
  background: var(--color-white);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.section-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--width-widescreen);
  margin: 0 auto;
  padding: 0 var(--spacing-3);
  gap: 0;
}
.section-nav__item {
  display: flex;
}
.section-nav .section-nav__item .section-nav__link {
  display: flex;
  align-items: center;
  height: var(--spacing-6);
  padding: 0 var(--spacing-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: var(--border-width-thick) solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.section-nav .section-nav__item .section-nav__link:hover {
  color: var(--color-text-primary);
}
.section-nav .section-nav__item .section-nav__link.section-nav__link--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  border-bottom-color: var(--color-primary);
}
.section-nav__link:focus-visible {
  outline: var(--spacing-05) solid var(--color-primary);
  outline-offset: 0;
}
.app-layout {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.sidenav {
  width: 16.25rem;
  flex-shrink: 0;
  background: var(--color-white);
  border-right: var(--border-width-hairline) solid var(--color-base-lighter);
  padding: var(--spacing-2) 0;
  overflow-y: auto;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: calc(100vh - 130px);
}
.sidenav__nav {
  display: flex;
  flex-direction: column;
}
.sidenav__section {
  border-bottom: var(--border-width-hairline) solid var(--color-base-lightest);
}
.sidenav__section:last-child {
  border-bottom: none;
}
.sidenav__separator {
  height: 1px;
  background: var(--color-base-lighter);
  margin: var(--spacing-2) var(--spacing-105);
}
.sidenav__section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-105) var(--spacing-205);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.sidenav__section-btn:hover {
  background: var(--color-base-lightest);
}
.sidenav__section-btn--active {
  color: var(--color-primary);
  background: var(--nav-primary-highlight);
}
.sidenav__section-btn:focus-visible {
  outline: var(--spacing-05) solid var(--color-primary-light);
  outline-offset: calc(-1 * var(--spacing-05));
}
.sidenav-chevron {
  transition: transform 0.2s ease;
  color: var(--color-base);
}
.sidenav-chevron--expanded {
  transform: rotate(90deg);
}
.sidenav__items {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-1) 0;
}
.sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-205) var(--spacing-1) var(--spacing-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidenav__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  color: var(--color-base);
  transition: color 0.15s ease;
}
.sidenav__item-icon svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}
.sidenav__item:hover .sidenav__item-icon {
  color: var(--color-ink);
}
.sidenav__item--active .sidenav__item-icon {
  color: var(--color-primary);
}
.sidenav__item-label {
  flex: 1;
  min-width: 0;
}
.sidenav__item:hover {
  background: var(--color-base-lightest);
  color: var(--color-ink);
}
.sidenav__item--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  background: var(--nav-primary-highlight);
  border-left: var(--border-width-thin) solid var(--color-primary);
  padding-left: calc(var(--spacing-4) - var(--border-width-thin));
}
.sidenav__item:focus-visible {
  outline: var(--spacing-05) solid var(--color-primary-light);
  outline-offset: calc(-1 * var(--spacing-05));
}
.app-main {
  flex: 1;
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-2);
  min-width: 0;
  overflow-x: auto;
  overflow-y: scroll;
  height: calc(100vh - 130px);
  background: var(--color-white);
}
.app-content {
  background: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-base);
}
.app-welcome {
  font-family: var(--font-ui);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.app-footer {
  background: var(--color-base-darkest);
  color: var(--color-text-inverse);
  padding: var(--spacing-2) 0;
  margin-top: auto;
}
.app-footer__inner {
  max-width: var(--width-widescreen);
  margin: 0 auto;
  padding: 0 var(--spacing-3);
}
.app-footer p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-base-light);
}
@media (max-width: 1024px) {
  .section-nav__link {
    padding: 0 var(--spacing-105);
    font-size: var(--font-size-xs);
  }
  .sidenav {
    width: 13.75rem;
    height: calc(100vh - 130px);
  }
  .app-main {
    height: calc(100vh - 130px);
  }
}
@media (max-width: 768px) {
  .section-nav__list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .section-nav__list::-webkit-scrollbar {
    display: none;
  }
  .section-nav__link {
    white-space: nowrap;
  }
  .app-layout {
    flex-direction: column;
    overflow: visible;
  }
  .sidenav {
    width: 100%;
    border-right: none;
    border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
    padding: var(--spacing-1) 0;
    height: auto;
    position: static;
  }
  .sidenav__section-btn {
    padding: var(--spacing-105) var(--spacing-2);
  }
  .sidenav__item {
    padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4);
  }
  .sidenav__item--active {
    padding-left: calc(var(--spacing-4) - var(--border-width-thin));
  }
  .app-main {
    padding: var(--spacing-2);
    height: auto;
    overflow: visible;
  }
  .app-content {
    padding: var(--spacing-3);
  }
}
.accounts-grid,
.contacts-grid,
.partners-grid,
.pp-grid,
.contracts-grid,
.proposals-grid,
.cp-grid,
.kanban-column__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-width), 1fr));
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-4);
}
.kanban-column__cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
@media (max-width: 640px) {
  .accounts-grid,
  .contacts-grid,
  .partners-grid,
  .pp-grid,
  .contracts-grid,
  .proposals-grid,
  .cp-grid {
    grid-template-columns: 1fr;
  }
}
.account-card,
.contact-card,
.partner-card,
.pp-card,
.contract-card,
.proposal-card,
.cp-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  min-height: var(--card-grid-min-height);
}
.account-card:hover,
.contact-card:hover,
.partner-card:hover,
.pp-card:hover,
.contract-card:hover,
.proposal-card:hover,
.cp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-base-light);
}
.account-card__header,
.contact-card__header,
.partner-card__header,
.pp-card__header,
.contract-card__header,
.proposal-card__header,
.cp-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}
.account-card__title,
.contact-card__info,
.partner-card__name,
.pp-card__name,
.contract-card__name,
.proposal-card__name,
.cp-card__name {
  flex: 1;
  min-width: 0;
}
.account-card__name,
.contact-card__name,
.partner-card__name,
.pp-card__name,
.contract-card__name,
.proposal-card__name,
.cp-card__name {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  margin: 0 0 var(--spacing-05) 0;
  line-height: var(--line-height-tight);
}
.account-card__dba,
.contact-card__title {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: block;
}
.account-card__avatar,
.contact-avatar {
  width: var(--spacing-5);
  height: var(--spacing-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}
.contact-avatar {
  border-radius: 50%;
}
.avatar {
  width: var(--spacing-5);
  height: var(--spacing-5);
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}
.avatar--round {
  border-radius: 50%;
}
.account-card__body,
.contact-card__body {
  margin-bottom: var(--spacing-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}
.account-card__type,
.contact-card__account {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.account-card__details,
.partner-card__meta,
.pp-card__meta,
.proposal-card__meta,
.cp-card__meta {
  margin-bottom: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.account-card__detail,
.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.account-card__detail svg {
  color: var(--color-base-light);
  flex-shrink: 0;
}
.account-card__footer,
.contact-card__footer,
.partner-card__footer,
.pp-card__footer,
.contract-card__footer,
.proposal-card__footer,
.cp-card__footer {
  margin-top: auto;
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.account-card__stat,
.stat {
  display: flex;
  flex-direction: column;
}
.account-card__stat-value,
.stat-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}
.account-card__stat-label,
.stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.contact-card__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.contact-card__link:hover {
  color: var(--color-primary);
}
.pp-card__client {
  margin-bottom: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.pp-card__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  margin-bottom: var(--spacing-2);
}
.pp-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.partner-card__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-05);
  margin-bottom: var(--spacing-2);
}
.capability-tag {
  background-color: var(--color-base-lightest);
  color: var(--color-text-secondary);
  padding: var(--card-grid-badge-padding);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}
.contract-card__number,
.proposal-card__solicitation {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}
.contract-card__values {
  display: flex;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2);
}
.value-item {
  display: flex;
  flex-direction: column;
}
.value-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.value-amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}
.funding-indicator {
  margin-bottom: var(--spacing-2);
}
.funding-bar {
  height: var(--spacing-05);
  background-color: var(--color-base-lighter);
  border-radius: 0;
  margin-bottom: var(--spacing-05);
  overflow: hidden;
}
.funding-bar__fill {
  height: 100%;
  background-color: var(--color-primary);
}
.funding-indicator--healthy .funding-bar__fill {
  background-color: var(--color-success);
}
.funding-indicator--moderate .funding-bar__fill {
  background-color: var(--color-warning);
}
.funding-indicator--low .funding-bar__fill {
  background-color: var(--color-error);
}
.funding-indicator--critical .funding-bar__fill {
  background-color: var(--color-error-dark);
}
.funding-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.proposal-card__opportunity,
.cp-card__opportunity {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin-bottom: var(--spacing-2);
}
.proposal-card__deadline {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}
.proposal-card__deadline--urgent {
  color: var(--color-warning-dark);
  font-weight: var(--font-weight-medium);
}
.proposal-card__stats,
.cp-card__stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);
  background-color: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.cp-card__themes {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}
.themes-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}
.stat-value--success {
  color: var(--color-success-dark);
}
.stat-value--info {
  color: var(--color-info-dark);
}
.stat-value--warning {
  color: var(--color-warning-dark);
}
.stat-value--error {
  color: var(--color-error-dark);
}
.stat-value--default {
  color: var(--color-ink);
}
.preferred-badge,
.featured-badge {
  position: absolute;
  top: var(--spacing-2);
  right: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-05);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning-dark);
  background-color: var(--color-warning-lighter);
  padding: var(--card-grid-badge-padding);
  border-radius: 0;
}
.tag-list,
.certification-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-05);
  margin-bottom: var(--spacing-2);
}
.tag-badge,
.cert-badge {
  font-size: var(--font-size-xs);
  padding: var(--card-grid-badge-padding);
  border-radius: var(--radius-sm);
  background-color: var(--color-base-lighter);
  color: var(--color-text-secondary);
}
.score-display {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.score-display--excellent {
  color: var(--color-success-dark);
}
.score-display--good {
  color: var(--color-info-dark);
}
.score-display--fair {
  color: var(--color-warning-dark);
}
.score-display--poor {
  color: var(--color-danger-dark);
}
.coming-soon {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.coming-soon__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8);
  text-align: center;
}
.coming-soon__icon {
  width: var(--spacing-8);
  height: var(--spacing-8);
  color: var(--color-base-light);
  margin-bottom: var(--spacing-3);
}
.coming-soon__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-1);
}
.coming-soon__body {
  max-width: var(--width-desktop);
  margin: var(--spacing-4) auto;
}
.coming-soon__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-8) var(--spacing-6);
  min-height: 50vh;
  justify-content: center;
  background-color: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  box-shadow: var(--shadow-sm);
}
.coming-soon__headline {
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.coming-soon__description {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: var(--width-tablet);
  margin-bottom: var(--spacing-8);
}
.coming-soon__content .coming-soon__description {
  font-size: var(--font-size-md);
  color: var(--color-base);
  margin: 0;
  max-width: 25rem;
}
.coming-soon__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
  width: 100%;
  margin-bottom: var(--spacing-8);
  text-align: left;
}
@media (min-width: 768px) {
  .coming-soon__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
  }
}
.coming-soon__feature {
  padding: var(--spacing-5);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: var(--color-surface);
  border-color: var(--color-base-lighter);
}
.coming-soon__feature:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.coming-soon__feature-icon {
  width: var(--spacing-4);
  height: var(--spacing-4);
  color: var(--color-primary);
  margin-bottom: var(--spacing-3);
}
.coming-soon__feature-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}
.coming-soon__feature-desc {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.coming-soon__progress {
  width: 100%;
  max-width: 27.5rem;
  margin-top: var(--spacing-2);
}
.coming-soon__progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.coming-soon__progress-track {
  height: var(--spacing-1);
  background-color: var(--color-base-lighter);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.coming-soon__progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.coming-soon__progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    hsla(0, 0%, 100%, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    hsla(0, 0%, 100%, 0.2) 50%,
    hsla(0, 0%, 100%, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  animation: progress-shimmer 2s linear infinite;
}
@keyframes progress-shimmer {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
.pipeline-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.board-container {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 0 var(--spacing-2) 0;
}
.error-message {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.success-message {
  background-color: var(--color-green-cool-5);
  color: var(--color-success-dark);
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
}
.info-message {
  background-color: var(--color-info-bg);
  color: var(--color-info-dark);
  padding: var(--spacing-2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-2);
}
.loading {
  text-align: center;
  padding: var(--spacing-4);
  color: var(--color-text-tertiary);
}
.empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--spacing-2);
}
.jurisdiction-badge,
.stage-badge {
  display: inline-block;
  padding: var(--spacing-05) var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.jurisdiction-badge.federal {
  background-color: var(--color-blue-10);
  color: var(--color-blue-warm-70v);
}
.jurisdiction-badge.state {
  background-color: var(--color-accent-warm-light);
  color: var(--color-accent-warm-dark);
}
.jurisdiction-badge.unknown {
  background-color: var(--color-base-lightest);
  color: var(--color-base);
}
.stage-badge.new {
  background-color: var(--color-blue-10);
  color: var(--color-primary-dark);
}
.stage-badge.qualified {
  background-color: var(--color-gold-5);
  color: var(--color-accent-warm-dark);
}
.stage-badge.proposal {
  background-color: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.stage-badge.negotiation {
  background-color: var(--color-red-cool-10);
  color: var(--color-secondary-dark);
}
.stage-badge.won {
  background-color: var(--color-green-cool-5);
  color: var(--color-success-dark);
}
.stage-badge.lost {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}
.stage-badge.passed {
  background-color: var(--color-base-lightest);
  color: var(--color-base);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-105) var(--spacing-3);
  border-bottom: var(--border-width-hairline) solid var(--color-dialog-border);
}
.dialog-header h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-base);
  transition: all 0.15s ease;
}
.dialog-close:hover {
  background: var(--color-surface-light);
  color: var(--color-base-darker);
}
.dialog-content {
  padding: var(--spacing-3);
  overflow-y: auto;
  flex: 1;
}
.upload-step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.upload-intro {
  color: var(--color-text-secondary);
  margin: 0;
  text-align: center;
}
.upload-step-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-2);
  padding-top: var(--spacing-1);
}
.entry-step {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
  }
  .table {
    min-width: 50rem;
  }
  .dialog {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
}
.contracts-dashboard-page {
  padding: var(--spacing-3);
  max-width: var(--width-widescreen);
  margin: 0 auto;
}
.dashboard-loading,
.dashboard-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);
  color: var(--color-base);
}
.dashboard-error button {
  margin-top: var(--spacing-2);
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-4);
}
.dashboard-header h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.header-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  margin-top: var(--spacing-05);
}
.header-actions {
  display: flex;
  gap: var(--spacing-1);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}
@media (max-width: 1024px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
}
.metric-card {
  background-color: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2) var(--spacing-3);
}
.metric-card.metric-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.metric-card.metric-primary .metric-label {
  color: hsla(0, 0%, 100%, 0.8);
}
.metric-card.metric-primary .metric-subtitle {
  color: hsla(0, 0%, 100%, 0.7);
}
.metric-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.metric-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: var(--spacing-05) 0;
  font-variant-numeric: tabular-nums;
}
.metric-card.metric-primary .metric-value {
  color: var(--color-text-inverse);
}
.metric-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-base);
}
.dashboard-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2);
}
@media (max-width: 1024px) {
  .dashboard-panels {
    grid-template-columns: 1fr;
  }
}
.dashboard-panel {
  background-color: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  background-color: var(--color-base-lightest);
}
.panel-header h3 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.panel-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--spacing-05) var(--spacing-1);
  background-color: var(--color-info-lighter);
  color: var(--color-info-dark);
  border-radius: var(--radius-sm);
}
.panel-badge.alert {
  background-color: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.panel-content {
  padding: var(--spacing-2);
}
.contracts-dashboard-page .empty-state.success {
  color: var(--color-success-dark);
  background-color: var(--color-success-lighter);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2);
}
.status-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.status-row:hover {
  background-color: var(--color-base-lightest);
}
.status-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.status-indicator {
  width: var(--spacing-105);
  height: var(--spacing-105);
  border-radius: 0;
}
.status-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.status-metrics {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.status-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: var(--spacing-3);
  text-align: center;
}
.status-value {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
  font-variant-numeric: tabular-nums;
  min-width: 6.25rem;
  text-align: right;
}
.expiring-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-105);
  max-height: var(--width-mobile);
  overflow-y: auto;
}
.expiring-item {
  padding: var(--spacing-105);
  border-radius: var(--radius-sm);
  background-color: var(--color-base-lightest);
  border-left: var(--border-width-thin) solid var(--color-base-lighter);
}
.expiring-item.critical {
  border-left-color: var(--color-error);
  background-color: var(--color-error-lighter);
}
.expiring-item.warning {
  border-left-color: var(--color-warning);
  background-color: var(--color-warning-lighter);
}
.expiring-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-05);
}
.contract-number {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-base-dark);
}
.days-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--card-grid-badge-padding);
  border-radius: var(--radius-sm);
  background-color: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.days-badge.critical {
  background-color: var(--color-error);
  color: var(--color-text-inverse);
}
.days-badge.warning {
  background-color: var(--color-warning);
  color: var(--color-text-primary);
}
.contract-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-05);
}
.contract-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-base);
}
.funding-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-105);
  max-height: var(--width-mobile);
  overflow-y: auto;
}
.funding-item {
  padding: var(--spacing-105);
  border-radius: var(--radius-sm);
  background-color: var(--color-warning-lighter);
  border-left: var(--border-width-thin) solid var(--color-warning);
}
.funding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-05);
}
.remaining-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: var(--card-grid-badge-padding);
  border-radius: var(--radius-sm);
  background-color: var(--color-warning);
  color: var(--color-text-primary);
}
.funding-bar-container {
  height: var(--spacing-05);
  background-color: var(--color-base-lighter);
  border-radius: 0;
  margin: var(--spacing-1) 0;
  overflow: hidden;
}
.funding-bar {
  height: 100%;
  background-color: var(--color-warning);
  border-radius: 0;
}
.funding-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-base-dark);
}
.quick-actions .panel-content {
  padding: var(--spacing-2);
}
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-105) var(--spacing-2);
  background: none;
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  transition: all 0.15s ease;
  text-align: left;
}
.action-btn:hover {
  background-color: var(--color-base-lightest);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.action-btn svg {
  color: var(--color-base);
  flex-shrink: 0;
}
.action-btn:hover svg {
  color: var(--color-primary);
}
.accounting-dashboard {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.accounting-dashboard .quick-stats {
  display: flex;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-2) var(--spacing-3);
  flex-wrap: wrap;
}
.accounting-dashboard .quick-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.accounting-dashboard .quick-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.accounting-dashboard .quick-stat__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.accounting-dashboard .quick-actions {
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.accounting-dashboard .quick-actions h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.accounting-dashboard .action-buttons {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.accounting-dashboard .action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-105) var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}
.accounting-dashboard .action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}
.time-dashboard {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.status-badge {
  display: inline-flex;
  padding: var(--spacing-05) var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}
.status-badge--success {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.status-badge--info {
  background: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.status-badge--warning {
  background: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.status-badge--error {
  background: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.status-badge--default {
  background: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.status-badge--active {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.status-badge--setup {
  background: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.status-badge--complete {
  background: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.status-badge--on-hold {
  background: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.status-badge--draft {
  background: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.status-badge--submitted {
  background: var(--color-info-lighter);
  color: var(--color-info-dark);
}
.status-badge--accepted {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.status-badge--rejected {
  background: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.status-badge--overdue {
  background: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.status-badge--on-track {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.status-badge--at-risk {
  background: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.status-badge--approved {
  background: var(--color-success-lighter);
  color: var(--color-success-dark);
}
.status-badge--pending {
  background: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.time-dashboard .quick-stats {
  display: flex;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-2) var(--spacing-3);
  flex-wrap: wrap;
}
.time-dashboard .quick-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.time-dashboard .quick-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.time-dashboard .quick-stat__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.time-dashboard .quick-actions {
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.time-dashboard .quick-actions h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.time-dashboard .action-buttons {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}
.time-dashboard .action-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-105) var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}
.time-dashboard .action-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-lightest);
}
.approvals-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.approvals-page .approvals-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.approvals-page .approval-card {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
  gap: var(--spacing-2);
}
.approvals-page .approval-card__icon {
  width: var(--spacing-5);
  height: var(--spacing-5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
  color: var(--color-base-dark);
  flex-shrink: 0;
}
.approvals-page .approval-card__main {
  flex: 1;
  min-width: 0;
}
.approvals-page .approval-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-05);
}
.approvals-page .approval-card__type {
  font-size: var(--font-size-xs);
  color: var(--color-base);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
}
.approvals-page .approval-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.approvals-page .approval-card__meta {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.approvals-page .approval-card__meta .separator {
  color: var(--color-base-light);
}
.approvals-page .approval-card__actions {
  display: flex;
  gap: var(--spacing-1);
  flex-shrink: 0;
}
.projects-dashboard {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.summary-card {
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.summary-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}
.summary-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-base);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}
.summary-card__header svg {
  flex-shrink: 0;
}
.summary-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.summary-card__subtext {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  margin-top: var(--spacing-05);
}
.summary-card__progress {
  margin-top: var(--spacing-105);
}
.summary-card__progress span {
  font-size: var(--font-size-xs);
  color: var(--color-base);
  margin-top: var(--spacing-05);
  display: block;
}
.summary-card--warning {
  border-left: var(--border-width-thin) solid var(--color-warning);
}
.summary-card--danger {
  border-color: var(--color-error-light);
  background: var(--color-error-lighter);
}
.summary-card--danger .summary-card__value {
  color: var(--color-error-dark);
}
.summary-card--info {
  border-color: var(--color-info-light);
  background: var(--color-info-lighter);
}
.summary-card--info .summary-card__value {
  color: var(--color-info-dark);
}
.summary-card--success {
  border-color: var(--color-success-light);
  background: var(--color-success-lighter);
}
.summary-card--success .summary-card__value {
  color: var(--color-success-dark);
}
.summary-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  margin-top: var(--spacing-05);
}
.progress-bar {
  height: var(--spacing-1);
  background: var(--color-base-lighter);
  border-radius: 0;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.progress-bar__fill--primary {
  background: var(--color-primary);
}
.progress-bar__fill--danger {
  background: var(--color-error);
}
.alerts-section {
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.alerts-section h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.alert-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-2);
}
.alert-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-105);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  padding: var(--spacing-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.alert-card:hover {
  border-color: var(--color-base-light);
  box-shadow: var(--shadow-sm);
}
.alert-card--danger {
  border-color: var(--color-error-light);
  background: var(--color-error-lightest);
}
.alert-card--warning {
  border-color: var(--color-warning-light);
  background: var(--color-warning-lightest);
}
.alert-card__icon {
  width: var(--spacing-5);
  height: var(--spacing-5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alert-card__icon--danger {
  background: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.alert-card__icon--warning {
  background: var(--color-warning-lighter);
  color: var(--color-warning-dark);
}
.alert-card__content {
  min-width: 0;
}
.alert-card__value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.alert-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.quick-stats {
  display: flex;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-2) var(--spacing-3);
  flex-wrap: wrap;
}
.quick-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-1) var(--spacing-2);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.quick-stat__label {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.quick-stat__value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.quick-stat__value--warning {
  color: var(--color-warning-dark);
}
.recent-section {
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2);
}
.section-header h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.recent-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-105) var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all 0.15s ease;
}
.recent-item:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}
.recent-item__main {
  min-width: 0;
}
.recent-item__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-05);
}
.recent-item__meta {
  display: flex;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  color: var(--color-base);
}
.project-number {
  font-family: var(--font-mono);
  color: var(--color-primary);
}
.contract-ref {
  color: var(--color-base-dark);
}
.recent-item__status {
  flex-shrink: 0;
}
.quick-actions {
  padding: 0 var(--spacing-2) var(--spacing-3);
}
.quick-actions h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.deliverables-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.deliverables-page .summary-cards {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.deliverables-page .summary-card {
  min-width: 6.25rem;
  text-align: center;
}
.deliverables-page .page-toolbar {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.deliverables-page .filter-select {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--spacing-4) var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  background: var(--color-white);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 9.375rem;
}
.deliverables-table-wrapper {
  flex: 1;
  overflow: auto;
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.deliverables-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
}
.deliverables-table th {
  text-align: left;
  padding: var(--spacing-105) var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-base-lightest);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  white-space: nowrap;
}
.deliverables-table td {
  padding: var(--spacing-105) var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  vertical-align: middle;
}
.deliverables-table tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.deliverables-table tbody tr:hover {
  background-color: var(--color-base-lightest);
}
.deliverables-table tbody tr:last-child td {
  border-bottom: none;
}
.cdrl-number {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}
.deliverable-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}
.deliverable-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.did-reference {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-base);
}
.project-name {
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.actions-cell {
  text-align: right;
}
.deliverables-page .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: hsla(0, 0%, 0%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-2);
}
.deliverables-page .dialog {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 34.375rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.deliverables-page .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.deliverables-page .dialog-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.deliverables-page .dialog-close {
  background: none;
  border: none;
  padding: var(--spacing-1);
  cursor: pointer;
  color: var(--color-base);
}
.deliverables-page .dialog-body {
  padding: var(--spacing-2);
  overflow-y: auto;
}
.deliverables-page .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.deliverables-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}
.deliverables-page .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}
.deliverables-page .form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.deliverables-page .form-group input,
.deliverables-page .form-group select,
.deliverables-page .form-group textarea {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  background: var(--color-white);
}
.deliverables-page .form-group textarea {
  height: auto;
  resize: vertical;
}
.project-financials-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.project-financials-page .project-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.type-badge {
  display: inline-flex;
  padding: var(--spacing-05) var(--spacing-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.type-badge--billable {
  background: var(--color-success-lightest);
  color: var(--color-success-dark);
}
.type-badge--internal {
  background: var(--color-base-lighter);
  color: var(--color-base-dark);
}
.financials-content {
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.financials-section {
  margin-bottom: var(--spacing-3);
}
.financials-section h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-2);
}
.metric-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-base);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}
.metric-card__header svg {
  flex-shrink: 0;
}
.metric-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.metric-card__subtext {
  font-size: var(--font-size-sm);
  color: var(--color-base);
  margin-top: var(--spacing-05);
}
.variance--positive {
  color: var(--color-success-dark);
}
.variance--negative {
  color: var(--color-error-dark);
}
.wbs-table-wrapper,
.trend-table-wrapper {
  overflow-x: auto;
}
.wbs-table,
.trend-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
}
.wbs-table th,
.trend-table th {
  text-align: left;
  padding: var(--spacing-105) var(--spacing-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-base-lightest);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  white-space: nowrap;
}
.wbs-table td,
.trend-table td {
  padding: var(--spacing-105) var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  font-size: var(--font-size-sm);
}
.wbs-table tbody tr:last-child td,
.trend-table tbody tr:last-child td {
  border-bottom: none;
}
.wbs-number {
  font-family: var(--font-mono);
  color: var(--color-primary);
}
.text-right {
  text-align: right;
}
.percent-badge {
  display: inline-block;
  padding: var(--spacing-05) var(--spacing-1);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.percent-badge--danger {
  background: var(--color-error-lighter);
  color: var(--color-error-dark);
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  padding: var(--spacing-1) var(--spacing-2);
  min-width: 7.5rem;
}
.stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.wbs-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.project-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.budget-tag {
  font-size: var(--font-size-sm);
  padding: var(--spacing-05) var(--spacing-1);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
  color: var(--color-base-dark);
}
.wbs-tree {
  flex: 1;
  margin: 0 var(--spacing-2) var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.wbs-tree__header {
  display: flex;
  align-items: center;
  padding: var(--spacing-105) var(--spacing-2);
  background: var(--color-base-lightest);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.wbs-tree__col--toggle {
  width: var(--spacing-4);
  flex-shrink: 0;
}
.wbs-tree__col--number {
  width: var(--width-2xs);
  flex-shrink: 0;
}
.wbs-tree__col--name {
  flex: 1;
  min-width: 0;
}
.wbs-tree__col--code {
  width: 6.25rem;
  flex-shrink: 0;
}
.wbs-tree__col--budget {
  width: 8.75rem;
  flex-shrink: 0;
  text-align: right;
}
.wbs-tree__col--actions {
  width: 4.375rem;
  flex-shrink: 0;
}
.wbs-tree__body {
  overflow: auto;
}
.wbs-node__row {
  display: flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
  transition: background-color 0.15s ease;
}
.wbs-node__row:hover {
  background-color: var(--color-base-lightest);
}
.wbs-node:last-child > .wbs-node__row {
  border-bottom: none;
}
.wbs-node__toggle {
  width: var(--spacing-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-btn {
  background: none;
  border: none;
  padding: var(--spacing-05);
  cursor: pointer;
  color: var(--color-base);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.toggle-btn:hover {
  background: var(--color-base-lighter);
  color: var(--color-text-primary);
}
.wbs-node__number {
  width: var(--width-2xs);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}
.wbs-node__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbs-node__name:hover {
  color: var(--color-primary);
}
.wbs-node__charge-code {
  width: 6.25rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.wbs-node__budget {
  width: 8.75rem;
  flex-shrink: 0;
  display: flex;
  gap: var(--spacing-1);
  justify-content: flex-end;
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.wbs-node__budget span {
  padding: var(--card-grid-badge-padding);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
}
.wbs-node__actions {
  width: 4.375rem;
  flex-shrink: 0;
  display: flex;
  gap: var(--spacing-05);
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.wbs-node__row:hover .wbs-node__actions {
  opacity: 1;
}
.wbs-page .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: hsla(0, 0%, 0%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-2);
}
.wbs-page .dialog {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 31.25rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.wbs-page .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.wbs-page .dialog-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.wbs-page .dialog-close {
  background: none;
  border: none;
  padding: var(--spacing-1);
  cursor: pointer;
  color: var(--color-base);
}
.wbs-page .dialog-body {
  padding: var(--spacing-2);
  overflow-y: auto;
}
.wbs-page .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.wbs-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}
.wbs-page .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}
.wbs-page .form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.wbs-page .form-group input,
.wbs-page .form-group select,
.wbs-page .form-group textarea {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  background: var(--color-white);
}
.wbs-page .form-group textarea {
  height: auto;
  resize: vertical;
}
.milestones-page {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: auto;
}
.milestones-page .summary-cards {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.milestones-page .summary-card {
  min-width: 7.5rem;
  text-align: center;
}
.milestones-page .page-toolbar {
  display: flex;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.milestones-page .filter-select {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--spacing-4) var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  background: var(--color-white);
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 10rem;
}
.milestones-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-105);
  padding: 0 var(--spacing-2) var(--spacing-2);
}
.milestone-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  background: var(--color-white);
  border: var(--border-width-hairline) solid var(--color-base-lighter);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: all 0.15s ease;
}
.milestone-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}
.milestone-card__main {
  flex: 1;
  min-width: 0;
}
.milestone-card__header {
  display: flex;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}
.milestone-card__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-05);
}
.milestone-card__meta {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  color: var(--color-base);
}
.milestone-card__date {
  text-align: right;
  flex-shrink: 0;
}
.date-label {
  font-size: var(--font-size-xs);
  color: var(--color-base);
  margin-bottom: var(--spacing-05);
}
.date-value {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.type-tag {
  font-size: var(--font-size-xs);
  padding: var(--spacing-05) var(--spacing-1);
  background: var(--color-base-lightest);
  border-radius: var(--radius-sm);
  color: var(--color-base-dark);
}
.milestones-page .dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: hsla(0, 0%, 0%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-2);
}
.milestones-page .dialog {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 31.25rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.milestones-page .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2);
  border-bottom: var(--border-width-hairline) solid var(--color-base-lighter);
}
.milestones-page .dialog-header h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}
.milestones-page .dialog-close {
  background: none;
  border: none;
  padding: var(--spacing-1);
  cursor: pointer;
  color: var(--color-base);
}
.milestones-page .dialog-body {
  padding: var(--spacing-2);
  overflow-y: auto;
}
.milestones-page .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2);
  padding: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.milestones-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
}
.milestones-page .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}
.milestones-page .form-group label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.milestones-page .form-group input,
.milestones-page .form-group select,
.milestones-page .form-group textarea {
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  background: var(--color-white);
}
.milestones-page .form-group textarea {
  height: auto;
  resize: vertical;
}
.kanban-board__status-text {
  color: var(--color-text-tertiary);
}
.kanban-board__status-danger {
  color: var(--color-danger);
}
.kanban-board__columns {
  gap: var(--kanban-column-gap);
}
.kanban-column {
  background-color: var(--color-kanban-bg);
  width: var(--kanban-column-width);
  min-width: var(--kanban-column-width);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
  height: 100%;
}
.kanban-column--drop-target {
  background-color: var(--color-kanban-drop-bg);
}
.kanban-column__header {
  background-color: transparent;
}
.kanban-column__title {
  color: var(--color-kanban-header);
}
.kanban-column__count {
  background-color: var(--color-kanban-count-bg);
  color: var(--color-kanban-count-text);
}
.kanban-column__divider {
  height: 1px;
  background-color: var(--color-kanban-divider);
  margin: 0 var(--spacing-1) var(--spacing-1) var(--spacing-1);
}
.kanban-column__content {
  background-color: transparent;
  padding: var(--kanban-column-padding);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kanban-card-gap);
}
.kanban-column__empty {
  color: var(--color-kanban-empty);
}
.kanban-card {
  background-color: var(--color-kanban-card-bg);
  border: var(--border-width-hairline) solid var(--color-kanban-card-border);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}
.kanban-card--dragging {
  box-shadow: var(--shadow-lg);
  opacity: 0.95;
}
.kanban-card__title {
  color: var(--color-ink);
}
.kanban-card__department {
  color: var(--color-base);
}
.kanban-card__value-row {
  border-top: var(--border-width-hairline) solid var(--color-base-lightest);
}
.kanban-card__value-label {
  color: var(--color-base);
}
.kanban-card__value-amount {
  color: var(--color-success-dark);
}
.kanban-card__date-label {
  color: var(--color-base);
}
.kanban-card__date-value {
  color: var(--color-base-dark);
}
.pipeline-card__pwin {
  display: block;
  text-align: left;
  margin-top: var(--spacing-05);
  font-size: var(--font-size-sm);
  color: var(--color-base-dark);
}
.opportunity-form__hint {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-style: italic;
}
.opportunity-form__team-card {
  background-color: var(--color-surface-light);
}
.opportunity-form__team-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 500;
}
.opportunity-form__input--sm {
  font-size: var(--font-size-sm);
}
.opportunity-form__section-divider {
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
  padding-top: var(--spacing-3);
}
.opportunity-form__section-heading {
  font-family: var(--font-ui);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}
.opportunity-form__actions {
  padding-top: var(--spacing-2);
  border-top: var(--border-width-hairline) solid var(--color-base-lighter);
}
.dropzone {
  transition: all 0.2s ease;
}
.dropzone--default {
  border-color: var(--color-dropzone-border);
  background-color: transparent;
}
.dropzone--active {
  border-color: var(--color-dropzone-border-hover);
  background-color: var(--color-dropzone-bg-hover);
}
.dropzone--reject {
  border-color: var(--color-dropzone-border-reject);
  background-color: var(--color-dropzone-bg-reject);
}
.dropzone__text--danger {
  color: var(--color-danger);
}
.dropzone__text--primary {
  color: var(--color-primary);
}
.dropzone__text--dark {
  color: var(--color-base-dark);
}
.dropzone__text--muted {
  color: var(--color-base);
}
.dropzone__text--subtle {
  color: var(--color-base-light);
}
.dropzone__file-item {
  background-color: var(--color-surface-light);
}
.dropzone__file-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.dropzone__file-name {
  color: var(--color-ink);
}
.dropzone__file-size {
  color: var(--color-base);
}
.dropzone__file-header {
  color: var(--color-base-dark);
}
.dialog__textarea--sm {
  min-height: var(--textarea-min-height-sm);
}
.dialog__textarea--md {
  min-height: var(--textarea-min-height-md);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
}
.form-field__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.form-field__required {
  color: var(--color-danger);
  margin-left: var(--spacing-05);
}
.form-field__hint {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}
.form-field--error .form-field__input input,
.form-field--error .form-field__input select,
.form-field--error .form-field__input textarea {
  border-color: var(--color-danger);
}
.form-field__error {
  font-size: var(--font-size-2xs);
  color: var(--color-danger);
  margin: 0;
}
.coming-soon-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-primary);
  padding: var(--spacing-4);
}
.coming-soon-page__container {
  max-width: var(--width-tablet);
  width: 100%;
  text-align: center;
}
.coming-soon-page__header {
  margin-bottom: var(--spacing-5);
}
.coming-soon-page__logo {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-1);
}
.coming-soon-page__tagline {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.coming-soon-page__content {
  margin-bottom: var(--spacing-5);
}
.coming-soon-page__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}
.coming-soon-page__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-4);
}
.coming-soon-page__features {
  display: flex;
  gap: var(--spacing-3);
  text-align: left;
}
.coming-soon-page__feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-05);
  padding: var(--spacing-2);
  background: var(--color-surface-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
}
.coming-soon-page__feature strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.coming-soon-page__feature span {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.coming-soon-page__signup {
  background: var(--color-surface-secondary);
  border: var(--border-width-thin) solid var(--color-border-primary);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}
.coming-soon-page__signup h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-1);
}
.coming-soon-page__signup p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}
.coming-soon-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.coming-soon-page__input {
  padding: var(--spacing-105) var(--spacing-2);
  border: var(--border-width-thin) solid var(--color-border-primary);
  background: var(--color-surface-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.coming-soon-page__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-input);
}
.coming-soon-page__footer {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.time-tracker-screen {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}
.time-entry-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: 24px;
}
.time-entry-form__fields {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: center;
}
.time-entry-form__fields input {
  flex: 2;
}
.time-entry-form__fields select {
  flex: 1;
  height: 40px;
  min-width: 160px;
}
.timer-control-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 100px;
  justify-content: center;
}
.running-timer-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-primary-lighter);
  border: 1px solid var(--color-primary);
  margin-bottom: 24px;
}
.running-timer-panel__info {
  flex: 1;
  min-width: 0;
}
.running-timer-panel__description {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.running-timer-panel__project {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.running-timer-panel__time {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
.running-timer-panel__actions {
  display: flex;
  gap: 8px;
}
.time-entry-list {
  margin-top: 8px;
}
.time-entry-list__group {
  margin-bottom: 24px;
}
.time-entry-list__group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 4px;
}
.time-entry-list__group-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.time-entry-list__group-total {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.time-entry-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color 0.15s ease;
}
.time-entry-item:hover {
  background: var(--color-base-lightest);
}
.time-entry-item__main {
  flex: 1;
  min-width: 0;
}
.time-entry-item__description {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time-entry-item__meta {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.time-entry-item__project {
  font-weight: 500;
}
.time-entry-item__time-range {
  color: var(--color-text-tertiary);
}
.time-entry-item__duration {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.entry-action-menu {
  position: relative;
}
.entry-action-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: 0;
}
.entry-action-menu__trigger:hover {
  background: var(--color-base-lighter);
  color: var(--color-text-primary);
}
.entry-action-menu__dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  min-width: 140px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 4px 0;
}
.entry-action-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
}
.entry-action-menu__item:hover {
  background: var(--color-base-lightest);
}
.entry-action-menu__item--danger {
  color: var(--color-danger);
}
.entry-action-menu__item--danger:hover {
  background: var(--color-danger-lighter);
}
.dialog__textarea--lg {
  min-height: var(--textarea-min-height-lg);
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}