:root {
  --ui-control-height: 36px;
  --ui-control-radius: 8px;
  --ui-text-body: 12px;
  --ui-text-hint: 11px;
  --ui-text-label: 10px;
  --ui-space-control-x: 14px;
  --ui-space-control-y: 10px;
  --ui-border: rgba(226, 232, 240, 1);
  --ui-bg: rgba(255, 255, 255, 0.96);
  --ui-bg-soft: rgba(248, 250, 252, 0.9);
  --ui-text: rgba(15, 23, 42, 1);
  --ui-text-muted: rgba(100, 116, 139, 1);
}

.dark {
  --ui-border: rgba(71, 85, 105, 0.55);
  --ui-bg: rgba(15, 23, 42, 0.86);
  --ui-bg-soft: rgba(15, 23, 42, 0.72);
  --ui-text: rgba(248, 250, 252, 1);
  --ui-text-muted: rgba(148, 163, 184, 1);
}

.ui-overline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--ui-text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.ui-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--ui-text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.ui-hint {
  font-size: var(--ui-text-hint);
  line-height: 1.55;
  color: var(--ui-text-muted);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  font-family: 'Chakra Petch', sans-serif;
  font-size: var(--ui-text-label);
  color: var(--ui-text-muted);
}

.ui-banner {
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 12px 16px;
  font-size: var(--ui-text-body);
  line-height: 1.5;
}

.ui-banner-success {
  border-color: rgba(167, 243, 208, 1);
  background: rgba(236, 253, 245, 1);
  color: rgba(4, 120, 87, 1);
}

.ui-banner-error {
  border-color: rgba(254, 202, 202, 1);
  background: rgba(254, 242, 242, 1);
  color: rgba(190, 24, 93, 1);
}

.dark .ui-banner-success {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.1);
  color: rgba(167, 243, 208, 1);
}

.dark .ui-banner-error {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(244, 63, 94, 0.1);
  color: rgba(254, 205, 211, 1);
}

.ui-control-shell {
  height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--ui-space-control-x);
  border-radius: var(--ui-control-radius);
  border: 1px solid var(--ui-border);
  background: var(--ui-bg-soft);
}

.ui-inline-select {
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  outline: none;
  font-size: var(--ui-text-body);
  padding: 0;
  box-shadow: none;
}

.ui-inline-select:focus {
  border: 0;
  box-shadow: none;
}

.ui-input,
.ui-select,
.ui-button {
  height: var(--ui-control-height);
  border-radius: var(--ui-control-radius);
  font-size: var(--ui-text-body);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ui-input,
.ui-select {
  padding: 0 var(--ui-space-control-x);
}

.ui-textarea {
  min-height: 108px;
  padding: var(--ui-space-control-y) var(--ui-space-control-x);
  border-radius: var(--ui-control-radius);
  resize: none;
  font-size: var(--ui-text-body);
  line-height: 1.5;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: rgba(148, 163, 184, 1);
  font-size: var(--ui-text-body);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  border-color: rgba(238, 29, 82, 0.35);
  box-shadow: 0 0 0 3px rgba(238, 29, 82, 0.08);
}

.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid transparent;
  font-family: 'Chakra Petch', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ui-button:disabled {
  cursor: not-allowed;
}

.ui-button-small {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
}

.ui-button-secondary {
  border-color: var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text-muted);
}

.ui-button-secondary:hover {
  background: var(--ui-bg-soft);
}

.ui-button-primary {
  background: rgba(15, 23, 42, 1);
  color: rgba(255, 255, 255, 1);
}

.dark .ui-button-primary {
  background: rgba(248, 250, 252, 1);
  color: rgba(15, 23, 42, 1);
}

.ui-icon-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  color: var(--ui-text-muted);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ui-icon-button:hover {
  background: var(--ui-bg-soft);
}

.ui-filter-chip {
  border-color: var(--ui-border);
  background: transparent;
  color: var(--ui-text-muted);
}

.ui-filter-chip.active {
  border-color: rgba(238, 29, 82, 0.2);
  background: rgba(238, 29, 82, 0.1);
  color: rgba(238, 29, 82, 1);
}

.ui-filter-chip:hover {
  border-color: rgba(105, 201, 208, 0.35);
}

.ui-modal-shell {
  width: 50vw;
  height: 50vh;
  max-width: 50vw;
  max-height: 50vh;
  min-width: 720px;
  min-height: 440px;
}

@media (max-width: 1280px) {
  .ui-modal-shell {
    width: min(calc(100vw - 48px), 820px);
    height: min(calc(100vh - 56px), 560px);
    max-width: min(calc(100vw - 48px), 820px);
    max-height: min(calc(100vh - 56px), 560px);
    min-width: 0;
    min-height: 0;
  }
}