:root {
  --app-bg: #f7f9fc;
  --app-surface: #ffffff;
  --app-text: #2b2f3a;
  --app-muted: #6f7687;
  --app-border: #e8edf4;
  --app-primary: #00c2a8;
  --app-primary-soft: #e8fffa;
  --app-link: #4f66cb;
  --app-success: #3fb683;
  --app-warning: #d4a850;
  --app-danger: #d55b76;
  --app-radius: 14px;
  --app-radius-sm: 8px;
  --app-shadow: 0 10px 30px rgba(16, 33, 62, 0.06);
}

html,
body {
  background: var(--app-bg);
  color: var(--app-text);
}

.navbar.is-dark {
  background-color: #ffffff;
  border-bottom: 1px solid var(--app-border);
}

.navbar-item,
.navbar-link {
  color: #3c4257;
}

.navbar-item strong {
  color: #2c3248;
}

.navbar-item .button {
  border-radius: 999px;
}

.box,
.table-container,
.notification,
.modal-card {
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}

.box,
.table-container,
.modal-card,
.card {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}

.box {
  padding: 1.4rem;
}

.button {
  border-radius: 0.75rem;
  font-weight: 600;
  border-color: #dbe3ee;
  color: #2f3a52;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:focus,
.button:focus-visible {
  box-shadow: 0 0 0 0.125em rgba(79, 102, 203, 0.15);
}

.button.is-primary {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  color: #ffffff;
}

.button.is-primary:hover {
  background-color: #00ae98;
  border-color: #00ae98;
  color: #ffffff;
}

.button.is-link,
.button.is-info {
  background-color: var(--app-link);
  border-color: var(--app-link);
  color: #fff;
}

.button.is-link:hover,
.button.is-info:hover {
  background-color: #4358b2;
  border-color: #4358b2;
}

.button.is-success {
  background-color: var(--app-success);
  border-color: var(--app-success);
  color: #fff;
}

.button.is-success:hover {
  background-color: #35a874;
  border-color: #35a874;
}

.button.is-warning {
  background-color: #f4d79a;
  border-color: #f4d79a;
  color: #5b3e0d;
}

.button.is-warning:hover {
  background-color: #ecc87f;
  border-color: #ecc87f;
  color: #4f350b;
}

.button.is-danger {
  background-color: var(--app-danger);
  border-color: var(--app-danger);
  color: #fff;
}

.button.is-danger:hover {
  background-color: #c84e69;
  border-color: #c84e69;
}

.button.is-light,
.button.is-info.is-light,
.button.is-link.is-light,
.button.is-success.is-light,
.button.is-warning.is-light,
.button.is-danger.is-light {
  background-color: #f8fbff;
  border-color: #cfd9e8;
  color: #2f3c57;
}

.button.is-link.is-light,
.button.is-info.is-light {
  background-color: #e8eeff;
  border-color: #c7d5ff;
  color: #344697;
}

.button.is-danger.is-light {
  background-color: #ffedf2;
  border-color: #ffc8d6;
  color: #922f4a;
}

.button.is-warning.is-light {
  background-color: #fff6e6;
  border-color: #ffdca0;
  color: #775113;
}

.button.is-light:hover,
.button.is-info.is-light:hover,
.button.is-link.is-light:hover,
.button.is-success.is-light:hover,
.button.is-warning.is-light:hover,
.button.is-danger.is-light:hover {
  background-color: #eef3fa;
  border-color: #bcc9dd;
  color: #27344e;
}

.button.is-text {
  color: #4e5c80;
  background: transparent;
}

.button.is-text:hover {
  color: #4454ad;
  background-color: #eef2ff;
}

.button.is-small {
  border-radius: 0.65rem;
}

.table td .button + .button,
.level .button + .button {
  margin-left: 0.5rem;
}

.button[disabled],
.button.is-static {
  opacity: 0.6;
}

.input,
.textarea,
.select select {
  border-radius: var(--app-radius-sm);
  border-color: #dbe3ee;
  box-shadow: none;
  background: #fff;
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.16);
}

a {
  color: var(--app-link);
}

a:hover {
  color: #3a4da4;
}

.table {
  background: transparent;
}

.table thead th {
  color: #4f5568;
  border-bottom-color: #dde4ee;
  font-weight: 700;
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: #fafcff;
}

.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: #f2f8ff;
}

.tag.is-dark {
  background-color: #56607a;
}

.tag.is-light {
  background-color: #f2f6fb;
  color: #556079;
}

.title,
.subtitle,
.label {
  color: #22293b;
}

.notification.is-warning {
  background-color: #fff9e8;
  color: #8b6a1b;
}

.notification.is-danger {
  background-color: #fff1f4;
  color: #a11b43;
}

.notification.is-success {
  background-color: #ebfff8;
  color: #117554;
}