.btn {
  font-family: var(--wadai-font-sans);
  font-weight: 600;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  padding-block-start: 0.625rem;
  padding-block-end: 0.625rem;
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
  min-height: 2.75rem;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--color-focus-ring);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary {
  background-color: var(--wadai-color-primary);
  color: var(--wadai-color-primary-contrast);
  border-color: transparent;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background-color: var(--color-primary-hover);
  border-color: transparent;
  color: var(--wadai-color-primary-contrast);
}
.btn-primary:active {
  background-color: var(--color-primary-active);
}

.btn-secondary {
  background-color: var(--color-surface-muted);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background-color: color-mix(in srgb, var(--color-surface-muted) 75%, var(--wadai-color-primary) 25%);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:active {
  background-color: color-mix(in srgb, var(--color-surface-muted) 65%, var(--wadai-color-primary) 35%);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background-color: color-mix(in srgb, var(--color-surface-subtle) 80%, var(--wadai-color-primary) 20%);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:active {
  background-color: color-mix(in srgb, var(--color-surface-subtle) 60%, var(--wadai-color-primary) 40%);
}

.btn-danger {
  background-color: var(--wadai-color-danger);
  color: var(--wadai-color-danger-contrast, #ffffff);
  border-color: transparent;
}
.btn-danger:hover, .btn-danger:focus-visible {
  background-color: color-mix(in srgb, var(--wadai-color-danger) 82%, #ffffff 18%);
  border-color: transparent;
  color: var(--wadai-color-danger-contrast, #ffffff);
}
.btn-danger:active {
  background-color: color-mix(in srgb, var(--wadai-color-danger) 74%, #000000 26%);
}

.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--wadai-color-primary);
  padding: 0;
}
.btn-link:hover, .btn-link:focus-visible {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.form-label {
  display: inline-block;
  font-weight: 500;
  color: var(--color-text);
  margin-block-end: 0.5rem;
}

.form-control,
.form-select {
  width: 100%;
  font-family: var(--wadai-font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  padding-block-start: 0.6rem;
  padding-block-end: 0.6rem;
  padding-inline-start: 0.85rem;
  padding-inline-end: 0.85rem;
  min-height: 2.875rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--wadai-color-primary);
  box-shadow: 0 0 0 0.25rem var(--color-focus-ring);
}

.form-text {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-block-start: 0.5rem;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.form-check-input {
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  margin-top: 0.1rem;
}

.form-check-input:checked {
  background-color: var(--wadai-color-primary);
  border-color: var(--wadai-color-primary);
}

.form-check-label {
  cursor: pointer;
  color: var(--color-text);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.input-group-text {
  background-color: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  border-radius: var(--radius-lg);
}

.form-floating > label {
  color: var(--color-text-muted);
}

.navbar {
  min-block-size: 4.25rem;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: color-mix(in srgb, var(--color-surface-elevated) 92%, transparent);
  border-block-end: 1px solid var(--color-border);
  padding-block-start: 0.65rem;
  padding-block-end: 0.65rem;
  padding-inline-start: 1.25rem;
  padding-inline-end: 1.25rem;
  backdrop-filter: blur(12px);
}

.navbar-brand {
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}
.nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.15rem var(--color-focus-ring);
}
.nav-link.active, .nav-link:hover {
  color: var(--wadai-color-primary);
}

.navbar-toggler {
  background: none;
  border: 0;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
}

@media (max-width: 768px) {
  .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }
}
.card {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.card-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.card-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.card-footer {
  background-color: var(--color-surface-muted);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.card-header {
  background-color: var(--color-surface-muted);
  border-block-end: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text);
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(0, 0, 0, 0.45);
}

/*
  IMPORTANT:
  Bootstrap modals are display:none until .show is applied.
  The previous theme override forced all .modal elements to display:flex, which
  made hidden modals cover the page and block clicks.
*/
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: auto;
}

.modal.show {
  display: flex;
}

.modal-dialog {
  max-width: 600px;
  width: 100%;
}

.modal-content {
  background-color: var(--color-surface-elevated);
  color: var(--color-text);
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  background-color: var(--color-surface-muted);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.modal-body {
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.modal-title {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.modal-close {
  background: none;
  border: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}
.modal-close:hover, .modal-close:focus {
  color: var(--color-text);
}

.dir-demo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 2px dashed var(--wadai-color-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}
.dir-demo::before, .dir-demo::after {
  position: absolute;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dir-demo::before {
  content: "inline-start";
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}
.dir-demo::after {
  content: "inline-end";
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
}

.wad-section {
  background: var(--color-surface);
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  padding-inline-start: 1.75rem;
  padding-inline-end: 1.75rem;
  display: grid;
  gap: 1.5rem;
}

.wad-section__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.wad-section__title {
  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.wad-section__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.wad-metric-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wad-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  background-color: var(--color-primary-subtle);
  color: var(--wadai-color-primary);
  border: 1px solid color-mix(in srgb, var(--wadai-color-primary) 35%, transparent);
}

.wad-status-badge[data-status=job-active] {
  background-color: color-mix(in srgb, var(--color-job-active) 18%, transparent);
  color: var(--color-job-active);
  border-color: color-mix(in srgb, var(--color-job-active) 45%, transparent);
}

.wad-status-badge[data-status=job-completed] {
  background-color: color-mix(in srgb, var(--color-job-completed) 18%, transparent);
  color: var(--color-job-completed);
  border-color: color-mix(in srgb, var(--color-job-completed) 45%, transparent);
}

.wad-status-badge[data-status=offer-pending] {
  background-color: color-mix(in srgb, var(--color-offer-pending) 25%, transparent);
  color: var(--color-offer-pending);
  border-color: color-mix(in srgb, var(--color-offer-pending) 50%, transparent);
}

.wad-job-card {
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.25rem;
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.wad-job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.wad-job-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.wad-job-card__title {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  font-weight: 600;
  color: var(--color-text);
}

.wad-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.wad-job-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.wad-job-card__body {
  display: grid;
  gap: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.wad-job-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-block-start: 1px dashed var(--color-border);
  padding-block-start: 1rem;
}

.wad-job-card__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.wad-step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-surface);
  padding: 0.75rem;
  box-shadow: var(--shadow-xs);
}

.wad-step-tabs__item {
  flex: 1 1 160px;
  min-width: 140px;
}

.wad-step-tabs__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.wad-step-tabs__link:hover {
  color: var(--wadai-color-primary);
  background: var(--color-primary-subtle);
  border-color: color-mix(in srgb, var(--wadai-color-primary) 35%, transparent);
}

.wad-step-tabs__link[aria-current=step],
.wad-step-tabs__link.is-active {
  color: var(--wadai-color-primary);
  background: var(--color-primary-subtle);
  border-color: color-mix(in srgb, var(--wadai-color-primary) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wadai-color-primary) 55%, transparent);
}

.wad-earner-profile {
  display: grid;
  gap: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.wad-earner-profile__header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.wad-avatar {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary-subtle);
  color: var(--wadai-color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.wad-earner-profile__meta {
  display: grid;
  gap: 0.25rem;
}

.wad-earner-profile__name {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.wad-earner-profile__roles {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.wad-earner-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wad-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: 0.85rem;
}

.wad-payment-status {
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1rem;
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}

.wad-payment-status__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}

.wad-payment-status__label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.wad-payment-status__value {
  font-weight: 600;
  color: var(--color-text);
}

.wad-metric-card {
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.wad-metric-card__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wad-metric-card__value {
  font-size: clamp(1.75rem, 1.6rem + 0.6vw, 2.25rem);
  font-weight: 600;
  color: var(--color-text);
}

.wad-notification-item {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.wad-notification-item__title {
  margin: 0;
  font-weight: 600;
  color: var(--color-text);
}

.wad-notification-item__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.wad-table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-surface);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.wad-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.wad-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.85rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.wad-table tbody td {
  padding: 1rem 1.25rem;
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  color: var(--color-text);
}

.wad-table tbody tr:last-child td {
  border-block-end: none;
}

.wad-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-surface-subtle) 80%, transparent);
}

.wad-rtl-balanced {
  direction: rtl;
}

.wad-rtl-balanced input,
.wad-rtl-balanced select,
.wad-rtl-balanced textarea {
  text-align: start;
}

@media (max-width: 768px) {
  .wad-section__header {
    flex-direction: column;
    align-items: flex-start;
  }
  .wad-job-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .wad-step-tabs__item {
    flex: 1 1 100%;
  }
  .wad-metric-grid {
    grid-template-columns: 1fr;
  }
}
:root, [data-theme=light] {
  color-scheme: light;
  font-family: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --wadai-font-sans: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --wadai-font-mono: Fira Code, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 12px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 20px 32px rgba(15, 23, 42, 0.16);
  --wadai-neutral-0: #ffffff;
  --wadai-neutral-50: #f9fafb;
  --wadai-neutral-100: #f2f4f7;
  --wadai-neutral-200: #e4e7eb;
  --wadai-neutral-300: #cbd2d9;
  --wadai-neutral-400: #9aa5b1;
  --wadai-neutral-500: #7b8794;
  --wadai-neutral-600: #616e7c;
  --wadai-neutral-700: #4b5563;
  --wadai-neutral-800: #364152;
  --wadai-neutral-900: #1f2933;
  --wadai-color-body-bg: #f9fafb;
  --wadai-color-surface: #ffffff;
  --wadai-color-surface-muted: #f2f4f7;
  --wadai-color-surface-subtle: #f9fafb;
  --wadai-color-surface-elevated: #ffffff;
  --wadai-color-border: #e4e7eb;
  --wadai-color-border-strong: #cbd2d9;
  --wadai-color-divider: rgba(31, 41, 51, 0.12);
  --wadai-color-text: #1f2933;
  --wadai-color-text-muted: #616e7c;
  --wadai-color-text-inverse: #ffffff;
  --wadai-color-primary: #d90217;
  --wadai-color-primary-contrast: #ffffff;
  --wadai-color-primary-hover: rgb(203.98, 1.88, 21.62);
  --wadai-color-primary-active: rgb(190.96, 1.76, 20.24);
  --wadai-color-primary-subtle: rgba(217, 2, 23, 0.08);
  --wadai-color-secondary: #4b5563;
  --wadai-color-secondary-contrast: #ffffff;
  --wadai-color-success: #0f9d8a;
  --wadai-color-success-contrast: #ffffff;
  --wadai-color-warning: #f29d15;
  --wadai-color-warning-contrast: #3b2d04;
  --wadai-color-danger: #931226;
  --wadai-color-danger-contrast: #ffffff;
  --wadai-color-info: #1f6feb;
  --wadai-color-info-contrast: #ffffff;
  --wadai-color-earner: #10827c;
  --wadai-color-company: #254edb;
  --wadai-color-admin: #6f42c1;
  --wadai-color-job-active: #11998e;
  --wadai-color-job-completed: #0f6f4f;
  --wadai-color-offer-pending: #f0a202;
  --wadai-color-focus-ring: rgba(217, 2, 23, 0.35);
  --wadai-color-shadow-color: rgba(17, 24, 39, 0.12);
  --color-earner: var(--wadai-color-earner);
  --color-company: var(--wadai-color-company);
  --color-admin: var(--wadai-color-admin);
  --color-job-active: var(--wadai-color-job-active);
  --color-job-completed: var(--wadai-color-job-completed);
  --color-offer-pending: var(--wadai-color-offer-pending);
  --color-secondary: var(--wadai-color-secondary);
  --color-success: var(--wadai-color-success);
  --color-success-contrast: var(--wadai-color-success-contrast);
  --color-warning: var(--wadai-color-warning);
  --color-warning-contrast: var(--wadai-color-warning-contrast);
  --color-danger: var(--wadai-color-danger);
  --color-danger-contrast: var(--wadai-color-danger-contrast);
  --color-info: var(--wadai-color-info);
  --color-info-contrast: var(--wadai-color-info-contrast);
  --color-primary-contrast: var(--wadai-color-primary-contrast);
  --color-text: var(--wadai-color-text);
  --color-text-muted: var(--wadai-color-text-muted);
  --color-text-inverse: var(--wadai-color-text-inverse);
  --color-surface: var(--wadai-color-surface);
  --color-surface-muted: var(--wadai-color-surface-muted);
  --color-surface-subtle: var(--wadai-color-surface-subtle);
  --color-surface-elevated: var(--wadai-color-surface-elevated);
  --color-border: var(--wadai-color-border);
  --color-border-strong: var(--wadai-color-border-strong);
  --color-primary-hover: var(--wadai-color-primary-hover);
  --color-primary-active: var(--wadai-color-primary-active);
  --color-primary-subtle: var(--wadai-color-primary-subtle);
  --color-focus-ring: var(--wadai-color-focus-ring);
  --color-divider: var(--wadai-color-divider);
  --radius-surface: var(--radius-lg);
  --shadow-color: var(--wadai-color-shadow-color, rgba(15, 23, 42, 0.12));
}

[data-theme=dark] {
  color-scheme: dark;
  font-family: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --wadai-font-sans: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --wadai-font-mono: Fira Code, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 12px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 20px 32px rgba(15, 23, 42, 0.16);
  --wadai-neutral-0: #0b0f14;
  --wadai-neutral-50: #111620;
  --wadai-neutral-100: #161d29;
  --wadai-neutral-200: #1e2735;
  --wadai-neutral-300: #273142;
  --wadai-neutral-400: #323d50;
  --wadai-neutral-500: #3e4a60;
  --wadai-neutral-600: #4b586f;
  --wadai-neutral-700: #5d6b84;
  --wadai-neutral-800: #73839b;
  --wadai-neutral-900: #e8edf5;
  --wadai-color-body-bg: #111620;
  --wadai-color-surface: #161d29;
  --wadai-color-surface-muted: #111620;
  --wadai-color-surface-subtle: #0b0f14;
  --wadai-color-surface-elevated: #1e2735;
  --wadai-color-border: #273142;
  --wadai-color-border-strong: #323d50;
  --wadai-color-divider: rgba(232, 237, 245, 0.16);
  --wadai-color-text: #e8edf5;
  --wadai-color-text-muted: rgba(115, 131, 155, 0.72);
  --wadai-color-text-inverse: #0b0f14;
  --wadai-color-primary: rgb(245.8342465753, 2.2657534247, 26.0561643836);
  --wadai-color-primary-contrast: #ffffff;
  --wadai-color-primary-hover: rgb(252.8208219178, 18.5591780822, 41.4405479452);
  --wadai-color-primary-active: rgb(251.6010958904, 2.3189041096, 26.6673972603);
  --wadai-color-primary-subtle: rgba(217, 2, 23, 0.22);
  --wadai-color-secondary: rgb(92.3793103448, 104.6965517241, 121.9406896552);
  --wadai-color-secondary-contrast: #f9fafb;
  --wadai-color-success: rgb(19.126744186, 200.193255814, 175.9660465116);
  --wadai-color-success-contrast: #0b0f14;
  --wadai-color-warning: rgb(243.3, 166.8, 44.4);
  --wadai-color-warning-contrast: #0b0f14;
  --wadai-color-danger: rgb(171.5890909091, 21.0109090909, 44.3563636364);
  --wadai-color-danger-contrast: #fdf2f8;
  --wadai-color-info: rgb(57.88, 128.28, 237.4);
  --wadai-color-info-contrast: #0b0f14;
  --wadai-color-earner: rgb(23.1802739726, 188.3397260274, 179.6471232877);
  --wadai-color-company: rgb(69.7, 104.55, 224.4);
  --wadai-color-admin: rgb(136.92, 100.02, 204.16);
  --wadai-color-job-active: rgb(21.76, 195.84, 181.76);
  --wadai-color-job-completed: rgb(23.2285714286, 171.8914285714, 122.3371428571);
  --wadai-color-offer-pending: rgb(250.6314049587, 169.1761983471, 2.0885950413);
  --wadai-color-focus-ring: rgba(255, 255, 255, 0.55);
  --wadai-color-shadow-color: rgba(0, 0, 0, 0.6);
  --color-earner: var(--wadai-color-earner);
  --color-company: var(--wadai-color-company);
  --color-admin: var(--wadai-color-admin);
  --color-job-active: var(--wadai-color-job-active);
  --color-job-completed: var(--wadai-color-job-completed);
  --color-offer-pending: var(--wadai-color-offer-pending);
  --color-secondary: var(--wadai-color-secondary);
  --color-success: var(--wadai-color-success);
  --color-success-contrast: var(--wadai-color-success-contrast);
  --color-warning: var(--wadai-color-warning);
  --color-warning-contrast: var(--wadai-color-warning-contrast);
  --color-danger: var(--wadai-color-danger);
  --color-danger-contrast: var(--wadai-color-danger-contrast);
  --color-info: var(--wadai-color-info);
  --color-info-contrast: var(--wadai-color-info-contrast);
  --color-primary-contrast: var(--wadai-color-primary-contrast);
  --color-text: var(--wadai-color-text);
  --color-text-muted: var(--wadai-color-text-muted);
  --color-text-inverse: var(--wadai-color-text-inverse);
  --color-surface: var(--wadai-color-surface);
  --color-surface-muted: var(--wadai-color-surface-muted);
  --color-surface-subtle: var(--wadai-color-surface-subtle);
  --color-surface-elevated: var(--wadai-color-surface-elevated);
  --color-border: var(--wadai-color-border);
  --color-border-strong: var(--wadai-color-border-strong);
  --color-primary-hover: var(--wadai-color-primary-hover);
  --color-primary-active: var(--wadai-color-primary-active);
  --color-primary-subtle: var(--wadai-color-primary-subtle);
  --color-focus-ring: var(--wadai-color-focus-ring);
  --color-divider: var(--wadai-color-divider);
  --radius-surface: var(--radius-lg);
  --shadow-color: var(--wadai-color-shadow-color, rgba(15, 23, 42, 0.12));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    font-family: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
    --wadai-font-sans: Inter, Segoe UI, Helvetica Neue, Arial, sans-serif;
    --wadai-font-mono: Fira Code, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    --radius-xs: 0.375rem;
    --radius-sm: 0.625rem;
    --radius-md: 0.875rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.1);
    --shadow-md: 0 12px 24px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 20px 32px rgba(15, 23, 42, 0.16);
    --wadai-neutral-0: #0b0f14;
    --wadai-neutral-50: #111620;
    --wadai-neutral-100: #161d29;
    --wadai-neutral-200: #1e2735;
    --wadai-neutral-300: #273142;
    --wadai-neutral-400: #323d50;
    --wadai-neutral-500: #3e4a60;
    --wadai-neutral-600: #4b586f;
    --wadai-neutral-700: #5d6b84;
    --wadai-neutral-800: #73839b;
    --wadai-neutral-900: #e8edf5;
    --wadai-color-body-bg: #111620;
    --wadai-color-surface: #161d29;
    --wadai-color-surface-muted: #111620;
    --wadai-color-surface-subtle: #0b0f14;
    --wadai-color-surface-elevated: #1e2735;
    --wadai-color-border: #273142;
    --wadai-color-border-strong: #323d50;
    --wadai-color-divider: rgba(232, 237, 245, 0.16);
    --wadai-color-text: #e8edf5;
    --wadai-color-text-muted: rgba(115, 131, 155, 0.72);
    --wadai-color-text-inverse: #0b0f14;
    --wadai-color-primary: rgb(245.8342465753, 2.2657534247, 26.0561643836);
    --wadai-color-primary-contrast: #ffffff;
    --wadai-color-primary-hover: rgb(252.8208219178, 18.5591780822, 41.4405479452);
    --wadai-color-primary-active: rgb(251.6010958904, 2.3189041096, 26.6673972603);
    --wadai-color-primary-subtle: rgba(217, 2, 23, 0.22);
    --wadai-color-secondary: rgb(92.3793103448, 104.6965517241, 121.9406896552);
    --wadai-color-secondary-contrast: #f9fafb;
    --wadai-color-success: rgb(19.126744186, 200.193255814, 175.9660465116);
    --wadai-color-success-contrast: #0b0f14;
    --wadai-color-warning: rgb(243.3, 166.8, 44.4);
    --wadai-color-warning-contrast: #0b0f14;
    --wadai-color-danger: rgb(171.5890909091, 21.0109090909, 44.3563636364);
    --wadai-color-danger-contrast: #fdf2f8;
    --wadai-color-info: rgb(57.88, 128.28, 237.4);
    --wadai-color-info-contrast: #0b0f14;
    --wadai-color-earner: rgb(23.1802739726, 188.3397260274, 179.6471232877);
    --wadai-color-company: rgb(69.7, 104.55, 224.4);
    --wadai-color-admin: rgb(136.92, 100.02, 204.16);
    --wadai-color-job-active: rgb(21.76, 195.84, 181.76);
    --wadai-color-job-completed: rgb(23.2285714286, 171.8914285714, 122.3371428571);
    --wadai-color-offer-pending: rgb(250.6314049587, 169.1761983471, 2.0885950413);
    --wadai-color-focus-ring: rgba(255, 255, 255, 0.55);
    --wadai-color-shadow-color: rgba(0, 0, 0, 0.6);
    --color-earner: var(--wadai-color-earner);
    --color-company: var(--wadai-color-company);
    --color-admin: var(--wadai-color-admin);
    --color-job-active: var(--wadai-color-job-active);
    --color-job-completed: var(--wadai-color-job-completed);
    --color-offer-pending: var(--wadai-color-offer-pending);
    --color-secondary: var(--wadai-color-secondary);
    --color-success: var(--wadai-color-success);
    --color-success-contrast: var(--wadai-color-success-contrast);
    --color-warning: var(--wadai-color-warning);
    --color-warning-contrast: var(--wadai-color-warning-contrast);
    --color-danger: var(--wadai-color-danger);
    --color-danger-contrast: var(--wadai-color-danger-contrast);
    --color-info: var(--wadai-color-info);
    --color-info-contrast: var(--wadai-color-info-contrast);
    --color-primary-contrast: var(--wadai-color-primary-contrast);
    --color-text: var(--wadai-color-text);
    --color-text-muted: var(--wadai-color-text-muted);
    --color-text-inverse: var(--wadai-color-text-inverse);
    --color-surface: var(--wadai-color-surface);
    --color-surface-muted: var(--wadai-color-surface-muted);
    --color-surface-subtle: var(--wadai-color-surface-subtle);
    --color-surface-elevated: var(--wadai-color-surface-elevated);
    --color-border: var(--wadai-color-border);
    --color-border-strong: var(--wadai-color-border-strong);
    --color-primary-hover: var(--wadai-color-primary-hover);
    --color-primary-active: var(--wadai-color-primary-active);
    --color-primary-subtle: var(--wadai-color-primary-subtle);
    --color-focus-ring: var(--wadai-color-focus-ring);
    --color-divider: var(--wadai-color-divider);
    --radius-surface: var(--radius-lg);
    --shadow-color: var(--wadai-color-shadow-color, rgba(15, 23, 42, 0.12));
  }
}
body {
  margin: 0;
  font-family: var(--wadai-font-sans);
  color: var(--wadai-color-text);
  background-color: var(--wadai-color-body-bg);
  min-height: 100vh;
}

a {
  color: var(--wadai-color-primary);
  text-decoration: none;
}
a:hover, a:focus {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

main {
  padding-block: 3rem;
}

/*# sourceMappingURL=wadai.css.map */