:root {
  --panel-button-primary-bg: #f5f5f3;
  --panel-button-primary-fg: #0a0a0a;
  --panel-button-primary-hover: #ffffff;
  --panel-button-primary-active: #d8d8d4;
  --panel-button-secondary-bg: transparent;
  --panel-button-secondary-fg: #e9e9e6;
  --panel-button-secondary-border: #555754;
  --panel-button-secondary-hover: #202120;
  --panel-button-neutral-bg: #252625;
  --panel-button-neutral-fg: #e9e9e6;
  --panel-button-neutral-hover: #303130;
  --panel-button-success-bg: #2e6b49;
  --panel-button-success-fg: #effff4;
  --panel-button-warning-bg: #76572c;
  --panel-button-warning-fg: #fff7e8;
  --panel-button-danger-bg: #7a383b;
  --panel-button-danger-fg: #fff3f3;
  --panel-button-danger-hover: #914548;
  --panel-button-disabled-bg: #343534;
  --panel-button-disabled-fg: #777875;
  --panel-button-focus-ring: #f5f5f3;
}

:root[data-theme="light"] {
  --panel-button-primary-bg: #111211;
  --panel-button-primary-fg: #ffffff;
  --panel-button-primary-hover: #282a28;
  --panel-button-primary-active: #000000;
  --panel-button-secondary-fg: #1a1b1a;
  --panel-button-secondary-border: #8f918c;
  --panel-button-secondary-hover: #f0f0ed;
  --panel-button-neutral-bg: #e5e6e1;
  --panel-button-neutral-fg: #1a1b1a;
  --panel-button-neutral-hover: #d8d9d4;
  --panel-button-success-bg: #dff4e6;
  --panel-button-success-fg: #174d2e;
  --panel-button-warning-bg: #fff0d4;
  --panel-button-warning-fg: #674314;
  --panel-button-danger-bg: #fbe1e1;
  --panel-button-danger-fg: #721f25;
  --panel-button-danger-hover: #f6cccc;
  --panel-button-disabled-bg: #e2e3df;
  --panel-button-disabled-fg: #969893;
  --panel-button-focus-ring: #111211;
}

.btn,
.icon-btn,
.auth-btn {
  border: 1px solid var(--panel-button-secondary-border);
  background: var(--panel-button-secondary-bg);
  color: var(--panel-button-secondary-fg);
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}

.btn:hover,
.icon-btn:hover,
.auth-btn:hover {
  background: var(--panel-button-secondary-hover);
  border-color: var(--panel-button-secondary-fg);
  color: var(--panel-button-secondary-fg);
}

.btn:active,
.icon-btn:active,
.auth-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.auth-btn:focus-visible {
  outline: 2px solid var(--panel-button-focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--panel-button-focus-ring);
}

.btn.primary,
.btn--primary,
.btn-primary,
.auth-btn-accent {
  background: var(--panel-button-primary-bg);
  border-color: var(--panel-button-primary-bg);
  color: var(--panel-button-primary-fg);
  font-weight: 600;
}

.btn.primary:hover,
.btn--primary:hover,
.btn-primary:hover,
.auth-btn-accent:hover {
  background: var(--panel-button-primary-hover);
  border-color: var(--panel-button-primary-hover);
  color: var(--panel-button-primary-fg);
}

.btn.primary:active,
.btn--primary:active,
.btn-primary:active,
.auth-btn-accent:active {
  background: var(--panel-button-primary-active);
  border-color: var(--panel-button-primary-active);
}

.btn.ghost,
.btn--ghost,
.btn-secondary,
.auth-btn-secondary {
  background: var(--panel-button-secondary-bg);
  border-color: var(--panel-button-secondary-border);
  color: var(--panel-button-secondary-fg);
}

.btn.neutral,
.auth-btn-primary {
  background: var(--panel-button-neutral-bg);
  border-color: var(--panel-button-neutral-bg);
  color: var(--panel-button-neutral-fg);
}

.btn.neutral:hover,
.auth-btn-primary:hover {
  background: var(--panel-button-neutral-hover);
  border-color: var(--panel-button-neutral-hover);
  color: var(--panel-button-neutral-fg);
}

.btn.success,
.btn--success,
.btn-success {
  background: var(--panel-button-success-bg);
  border-color: var(--panel-button-success-bg);
  color: var(--panel-button-success-fg);
}

.btn.warning,
.btn--warning,
.btn-warning {
  background: var(--panel-button-warning-bg);
  border-color: var(--panel-button-warning-bg);
  color: var(--panel-button-warning-fg);
}

.btn.danger,
.btn--danger,
.btn-danger,
.btn-destructive,
.iconbtn--danger {
  background: var(--panel-button-danger-bg);
  border-color: var(--panel-button-danger-bg);
  color: var(--panel-button-danger-fg);
}

.btn.danger:hover,
.btn--danger:hover,
.btn-danger:hover,
.btn-destructive:hover,
.iconbtn--danger:hover {
  background: var(--panel-button-danger-hover);
  border-color: var(--panel-button-danger-hover);
  color: var(--panel-button-danger-fg);
}

.btn:disabled,
.btn[aria-disabled="true"],
.icon-btn:disabled,
.auth-btn:disabled {
  background: var(--panel-button-disabled-bg);
  border-color: var(--panel-button-disabled-bg);
  color: var(--panel-button-disabled-fg);
  opacity: 1;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

button.is-loading,
.btn.is-loading,
.auth-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button.is-loading::after,
.btn.is-loading::after,
.auth-btn.is-loading::after {
  content: "";
  width: 1em;
  height: 1em;
  position: absolute;
  inset: 50% auto auto 50%;
  margin: -.5em 0 0 -.5em;
  border: 2px solid var(--panel-button-secondary-fg);
  border-right-color: transparent;
  border-radius: 50%;
  animation: panel-button-spin .65s linear infinite;
}

.btn.primary.is-loading::after,
.btn--primary.is-loading::after,
.btn-primary.is-loading::after,
.auth-btn-accent.is-loading::after {
  border-color: var(--panel-button-primary-fg);
  border-right-color: transparent;
}

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

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn,
  .auth-btn,
  button.is-loading::after,
  .btn.is-loading::after,
  .auth-btn.is-loading::after {
    transition: none;
    animation: none;
  }
}

:root {
  --panel-button-secondary-border: #777b76;
  --panel-button-secondary-hover: #292b29;
  --panel-button-neutral-bg: #343735;
  --panel-button-neutral-hover: #414441;
  --panel-button-success-bg: #4dcd82;
  --panel-button-success-fg: #06180d;
  --panel-button-warning-bg: #f0b44d;
  --panel-button-warning-fg: #201505;
  --panel-button-danger-bg: #f27a80;
  --panel-button-danger-fg: #2a070a;
  --panel-button-danger-hover: #ff9297;
  --panel-button-disabled-bg: #3d403d;
  --panel-button-disabled-fg: #8f928d;
}

:root[data-theme="light"] {
  --panel-button-secondary-border: #6f736d;
  --panel-button-secondary-hover: #eceee9;
  --panel-button-neutral-bg: #d7d9d4;
  --panel-button-neutral-hover: #c8cbc5;
  --panel-button-success-bg: #4dcd82;
  --panel-button-success-fg: #06180d;
  --panel-button-warning-bg: #f0b44d;
  --panel-button-warning-fg: #201505;
  --panel-button-danger-bg: #f27a80;
  --panel-button-danger-fg: #2a070a;
  --panel-button-danger-hover: #dc6269;
  --panel-button-disabled-bg: #e0e2dd;
  --panel-button-disabled-fg: #858982;
}

.btn.primary,
.btn--primary,
.btn-primary,
.btn.success,
.btn--success,
.btn-success,
.btn.warning,
.btn--warning,
.btn-warning,
.btn.danger,
.btn--danger,
.btn-danger,
.btn-destructive,
.auth-btn-accent {
  font-weight: 650;
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .72);
}