/*
---------------------------------------------------------------------------
DEVNITE STUDIOS
---------------------------------------------------------------------------
Project      : Kirzen 4.1
Organization : Devnite Studios
License      : Proprietary
Copyright    : © 2026 Devnite Studios. All rights reserved.

This source file is proprietary software developed and maintained by
Devnite Studios as part of the Kirzen 4.1 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Devnite Studios.
---------------------------------------------------------------------------
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&display=swap");

/* ============================================================================
   RESET
   ============================================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--bg-base);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(
      circle at 50% -20%,
      rgba(88, 101, 242, 0.035),
      transparent 38%
    ),
    var(--bg-base);

  color: var(--text-primary);

  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
}

body::selection {
  background: rgba(88, 101, 242, 0.3);
  color: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
}

img {
  display: block;
  max-width: 100%;
}

svg {
  display: block;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================================
   FOCUS
   ============================================================================ */

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.14);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 38px;

  padding: 9px 15px;

  border: 1px solid transparent;
  border-radius: var(--radius-md);

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(88, 101, 242, 0.16);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 6px 18px rgba(88, 101, 242, 0.2);
}

.btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

.btn-ghost {
  color: var(--text-secondary);
  padding: 7px 10px;
}

.btn-ghost:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.btn-ghost-sm {
  color: var(--accent-primary);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
}

.btn-ghost-sm:hover {
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  opacity: 0.88;
}

/* ============================================================================
   LAYOUT
   ============================================================================ */

.layout-container,
.main-container {
  width: 100%;
  max-width: var(--container-max);

  margin: 0 auto;

  padding: 42px 32px 56px;

  flex: 1;
}

/* No min-height here on purpose. The body is a flex column, so `flex: 1`
   above already stretches this to the bottom of the viewport. Asking for
   another `100vh - navbar` on top of that added a footer worth of dead space
   to the end of every short page. */

/* ============================================================================
   PAGE HEADER
   ============================================================================ */

.page-header {
  margin-bottom: 30px;
}

/* The back link is inline-flex, so inside a plain block header it sat on the
   same line as whatever followed it. */
.page-header .btn-back {
  display: flex;
  width: max-content;
}

.page-title {
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.55px;
}

.page-subtitle {
  margin-top: 6px;

  color: var(--text-secondary);

  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================================
   NAVBAR, single global viewport shell
   ============================================================================ */

#navbar-container {
  position: relative;
  z-index: 1000;
  min-height: var(--navbar-height);
  height: var(--navbar-height);
}

#navbar-container:not(.navbar-ready) #navbar {
  visibility: hidden;
  opacity: 0;
}

#navbar-container.navbar-ready #navbar {
  visibility: visible;
  opacity: 1;
  animation: navbar-enter 160ms ease-out both;
}

@keyframes navbar-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  width: 100%;
  height: var(--navbar-height);
  box-sizing: border-box;
  padding: 0 24px;
  background:
    linear-gradient(180deg, rgba(24, 24, 28, 0.72), rgba(9, 9, 11, 0.58));
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-top-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  /* Avoid creating a containing block for the fixed mobile drawer. */
  transform: none;
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 18%, rgba(255,255,255,.045) 50%, transparent 82%);
  opacity: .8;
}

.navbar.is-scrolled {
  background:
    linear-gradient(180deg, rgba(24, 24, 28, 0.84), rgba(9, 9, 11, 0.74));
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.navbar-inner {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 36px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.nav-brand:hover { opacity: 0.8; }

/* Hamburger button, only shown on mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  order: 3;
}

.nav-hamburger:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

.nav-hamburger-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 99px;
  background: var(--text-primary);
  transition: transform 220ms ease, opacity 220ms ease, width 220ms ease;
  transform-origin: center;
}

.nav-hamburger.is-open .nav-hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open .nav-hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-links-inner { display: contents; }

/* Mobile auth section, hidden on desktop */
.nav-mobile-auth { display: none; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.035);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 99px;
  background: var(--accent-primary);
  opacity: 0.9;
}

[data-auth-link] { display: none !important; }

.navbar.user-authenticated [data-auth-link].is-auth-visible {
  display: inline-flex !important;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.nav-auth-state { display: flex; align-items: center; }

.nav-login-btn {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 13px;
  border-radius: 9px;
}

.nav-user { position: relative; }

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav-user-btn:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-color);
}

.nav-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-hover);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.06);
}

.nav-username {
  max-width: 130px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-chevron {
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.nav-user-btn[aria-expanded="true"] .nav-user-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 182px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.nav-dropdown.open { display: flex; }

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-dropdown-item:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.nav-dropdown-item.danger { color: var(--danger); }
.nav-dropdown-item.danger:hover { background: var(--danger-subtle); }
.nav-dropdown-divider { height: 1px; margin: 4px 0; background: var(--border-color); }

/* Mobile overlay */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: var(--navbar-height) 0 0 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.nav-mobile-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Mobile user header in drawer */
.nav-mobile-user-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}
.nav-mobile-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-surface-hover);
}
.nav-mobile-user-info { min-width: 0; display: flex; flex-direction: column; }
.nav-mobile-user-name { color: var(--text-primary); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile-user-tag { color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile-logout { text-align: left; color: var(--danger) !important; }
.nav-mobile-logout:hover { background: var(--danger-subtle) !important; }

.nav-mobile-auth-state.hidden { display: none !important; }

@media (max-width: 900px) {
  .navbar-inner {
    gap: 16px;
  }

  .nav-links {
    gap: 0;
  }
}

@media (max-width: 760px) {
  .navbar { padding: 0 16px; }

  .navbar-inner {
    padding: 0 4px;
    grid-template-columns: auto 1fr auto auto;
    gap: 0;
  }

  /* Show hamburger, hide desktop nav links */
  .nav-hamburger { display: flex; }

  /* Desktop user menu: hide username/chevron, keep avatar */
  .nav-username,
  .nav-user-chevron {
    display: none;
  }

  .nav-right {
    min-width: auto;
    order: 2;
  }

  /* Desktop nav links collapse into off-canvas drawer */
  .nav-links {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    bottom: auto;
    height: calc(100vh - var(--navbar-height));
    height: calc(100dvh - var(--navbar-height));
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: min(300px, 80vw);
    padding: 8px;
    border-left: 1px solid var(--border-color);
    background: var(--bg-surface);
    box-shadow: -12px 0 40px rgba(0,0,0,0.4);
    overflow-x: visible;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    aria-hidden: true;
  }

  .nav-links.is-open {
    transform: translateX(0);
  }

  .nav-links-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .nav-link {
    min-height: 42px;
    padding: 10px 13px;
    font-size: 13px;
  }

  .nav-link.active::after {
    left: 0;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 3px;
    height: auto;
    border-radius: 99px;
  }

  /* Mobile-only auth section shown in drawer */
  .nav-mobile-auth {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
  }

  /* Hide desktop user dropdown on mobile, mobile drawer handles it */
  .nav-auth-state {
    display: none;
  }

  /* Mobile overlay becomes visible */
  .nav-mobile-overlay { display: block; }

  /* Hide desktop auth links from drawer (already handled there) */
  [data-auth-link] { display: none !important; }
  .navbar.user-authenticated [data-auth-link].is-auth-visible {
    display: flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #navbar-container.navbar-ready #navbar { animation: none; }
  .navbar { transition: none; }
  .nav-links { transition: none; }
  .nav-hamburger-bar { transition: none; }
  .nav-mobile-overlay { transition: none; }
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
  position: relative;

  padding: 21px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);

  background: var(--bg-surface);

  box-shadow: var(--shadow-sm);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-grid {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 14px;
}

/* ============================================================================
   BADGES
   ============================================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 24px;

  padding: 4px 9px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);

  background: var(--bg-surface-hover);

  color: var(--text-secondary);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.045em;
  text-transform: uppercase;

  white-space: nowrap;
}

.badge-premium {
  color: var(--warning);
  border-color: rgba(234, 179, 8, 0.25);
  background: var(--warning-subtle);
}

.badge-developer {
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.25);
  background: var(--success-subtle);
}

.badge-beta {
  color: var(--accent-primary);
  border-color: rgba(88, 101, 242, 0.25);
  background: var(--accent-subtle);
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 600;
}

.form-label .required {
  color: var(--danger);
}

.form-input,
.form-select {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);

  background: var(--bg-surface);
  color: var(--text-primary);

  font-size: 13px;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.form-input:hover,
.form-select:hover {
  border-color: var(--border-strong);
}

.form-input:focus,
.form-select:focus {
  outline: none;

  border-color: var(--accent-primary);

  background: var(--bg-surface-2);

  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.11);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-select {
  cursor: pointer;
  appearance: auto;
}

.form-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   SEARCH
   ============================================================================ */

.search-wrapper {
  position: relative;

  width: 100%;
  max-width: 360px;
}

.search-input {
  width: 100%;

  padding: 9px 36px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);

  background: var(--bg-surface);
  color: var(--text-primary);

  font-size: 13px;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.search-input:hover {
  border-color: var(--border-strong);
}

.search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.11);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-icon {
  position: absolute;

  left: 11px;
  top: 50%;

  transform: translateY(-50%);

  color: var(--text-muted);

  pointer-events: none;
}

.clear-search {
  position: absolute;

  right: 9px;
  top: 50%;

  padding: 2px;

  color: var(--text-muted);

  transform: translateY(-50%);

  cursor: pointer;
}

.clear-search:hover {
  color: var(--text-primary);
}

/* ============================================================================
   TABS
   ============================================================================ */

.tabs-nav {
  display: flex;

  gap: 2px;

  margin-bottom: 26px;

  border-bottom: 1px solid var(--border-color);

  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 42px;

  padding: 9px 14px;

  margin-bottom: -1px;

  border-bottom: 2px solid transparent;

  color: var(--text-muted);

  font-size: 13px;
  font-weight: 500;

  white-space: nowrap;

  cursor: pointer;

  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.tab-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.018);
}

.tab-btn.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.tab-btn.soon {
  opacity: 0.45;
  cursor: not-allowed;
}

.badge-soon {
  padding: 2px 6px;

  border-radius: var(--radius-full);

  background: var(--accent-subtle);
  color: var(--accent-primary);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tab-pane {
  display: none;
  opacity: 0;
}

.tab-pane.active {
  display: block;
  animation: tab-fade-in 0.15s ease forwards;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================================
   LOADING / SKELETON
   ============================================================================ */

.skeleton {
  position: relative;
  overflow: hidden;

  background: var(--bg-surface);
  border-radius: var(--radius-md);
}

.skeleton::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.045),
    transparent
  );

  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ============================================================================
   STATES
   ============================================================================ */

.empty-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 11px;

  padding: 58px 24px;

  color: var(--text-secondary);

  text-align: center;
}

.empty-state svg,
.error-state svg {
  color: var(--text-muted);
}

.empty-state p,
.error-state p {
  max-width: 380px;

  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================================
   TOASTS
   ============================================================================ */

#toast-container {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 8px;

  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;

  max-width: 360px;

  padding: 11px 14px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);

  background: var(--bg-surface);

  color: var(--text-primary);

  font-size: 13px;
  font-weight: 500;

  box-shadow: var(--shadow-lg);

  pointer-events: auto;

  animation: toast-in 180ms ease;
}

.toast.success {
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.3);
}

.toast.error {
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}

.toast.info {
  color: var(--accent-primary);
  border-color: rgba(88, 101, 242, 0.3);
}

.toast.out {
  animation: toast-out 160ms ease forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(7px);
  }
}

/* ============================================================================
   MODALS
   ============================================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;

  z-index: 500;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.66);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  opacity: 0;
  pointer-events: none;

  transition: opacity var(--transition-fast);
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  width: 100%;
  max-width: 480px;

  overflow: hidden;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);

  background: var(--bg-surface);

  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 17px 20px;

  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border-radius: var(--radius-sm);

  color: var(--text-muted);

  cursor: pointer;
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  padding: 15px 20px;

  border-top: 1px solid var(--border-color);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.site-footer {
  margin-top: auto;

  padding: 38px 32px;

  border-top: 1px solid var(--border-color);
}

.footer-inner {
  max-width: var(--container-max);

  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-brand-name {
  font-size: 15px;
  font-weight: 700;
}

.footer-brand-desc {
  max-width: 250px;

  color: var(--text-muted);

  font-size: 12px;
  line-height: 1.55;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 38px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col-title {
  color: var(--text-muted);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.footer-col a {
  color: var(--text-secondary);

  font-size: 12px;

  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  max-width: var(--container-max);

  margin: 23px auto 0;
  padding-top: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top: 1px solid var(--border-subtle);
}

.footer-copyright,
.footer-version {
  color: var(--text-muted);
  font-size: 11px;
}

.footer-version {
  font-family: monospace;
}

/* ============================================================================
   STATUS
   ============================================================================ */

.status-dot {
  display: inline-block;

  width: 8px;
  height: 8px;

  flex-shrink: 0;

  border-radius: 50%;
}

.status-dot--online {
  background: var(--success);

  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);

  animation: status-pulse 2.5s ease-in-out infinite;
}

.status-dot--offline {
  background: var(--danger);
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.48;
  }
}

.ping-good {
  color: var(--success);
  font-weight: 600;
}

.ping-ok {
  color: var(--warning);
  font-weight: 600;
}

.ping-bad {
  color: var(--danger);
  font-weight: 600;
}

/* ============================================================================
   FILTERS
   ============================================================================ */

.controls-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  margin-bottom: 22px;
}

.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.filter-btn {
  padding: 6px 12px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);

  background: var(--bg-surface);

  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 500;

  cursor: pointer;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.filter-btn.active {
  color: #fff;
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.results-count {
  display: block;

  margin-bottom: 13px;

  color: var(--text-muted);

  font-size: 12px;
}

/* ============================================================================
   COMING SOON
   ============================================================================ */

.coming-soon-section {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 13px;

  padding: 60px 24px;

  text-align: center;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;

  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: var(--radius-full);

  background: var(--accent-subtle);
  color: var(--accent-primary);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coming-soon-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.coming-soon-desc {
  max-width: 400px;

  color: var(--text-secondary);

  font-size: 13px;
  line-height: 1.55;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

@media (max-width: 768px) {
  .layout-container,
  .main-container {
    padding: 30px 18px 42px;
  }

  .page-header {
    margin-bottom: 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    gap: 26px;
  }
}

@media (max-width: 520px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  #toast-container {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .toast {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  /* Never stretches: inside a flex column it would take the whole width and
     drag the label to the middle. */
  align-self: flex-start;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted, #a0aec0);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}
.btn-back:hover {
  color: var(--text-primary, #e2e8f0);
}

html[data-reduce-motion="on"] *,html[data-reduce-motion="on"] *::before,html[data-reduce-motion="on"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html[data-accent-glow="off"] .stat-card{background:var(--bg-surface);box-shadow:none}

/* Unified select/dropdown treatment */
select.form-select,.discover-select,.discover-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
select.form-select option,.discover-select option,.discover-form select option{background:var(--bg-surface);color:var(--text-primary)}
.nav-dropdown{border-color:rgba(255,255,255,.12)!important;background:rgba(20,20,24,.78)!important;backdrop-filter:blur(20px);box-shadow:0 22px 60px rgba(0,0,0,.24)!important}

/* ============================================================================
   COOKIE CONSENT BANNER
   ============================================================================ */
#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 0 24px 24px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
}

#cookie-consent-banner.cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#cookie-consent-banner.cookie-banner--hiding {
  opacity: 0;
  transform: translateY(8px);
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.cookie-banner__copy { flex: 1; min-width: 0; }

.cookie-banner__title {
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.cookie-banner__sub {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.cookie-banner__link {
  color: var(--accent-primary);
  text-decoration: underline;
}

.cookie-banner__link:hover { opacity: 0.8; }

.cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cookie-banner__btn--primary {
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  color: #fff;
}

.cookie-banner__btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.cookie-banner__btn--secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.cookie-banner__btn--secondary:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

@media (max-width: 640px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .cookie-banner__actions { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  #cookie-consent-banner { transition: none; }
}

.badge-bug-hunter { border-color: color-mix(in srgb, #ef4444 28%, transparent); color: #ef4444; }

.badge-translator { border-color: color-mix(in srgb, #10b981 28%, transparent); color: #10b981; }

.badge-early-adopter { border-color: color-mix(in srgb, #06b6d4 28%, transparent); color: #06b6d4; }


/* ==========================================================================
   INTERFACE PREFERENCES
   Driven by data attributes that preferences.js writes on <html>, so a
   preference applies everywhere without each page knowing about it.
   ========================================================================== */

html[data-font-scale="small"] main {
  zoom: 0.92;
}

html[data-font-scale="large"] main {
  zoom: 1.1;
}

html[data-reduce-motion="true"],
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

html[data-high-contrast="true"] {
  --text-secondary: #e5e7eb;
  --text-muted: #c3c7cf;
  --border-color: rgba(255, 255, 255, 0.28);
  --border-subtle: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.42);
}

html[data-underline-links="true"] main a:not(.btn):not([class*="-btn"]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-always-show-focus="true"] a:focus,
html[data-always-show-focus="true"] button:focus,
html[data-always-show-focus="true"] input:focus,
html[data-always-show-focus="true"] select:focus,
html[data-always-show-focus="true"] textarea:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}


/* ==========================================================================
   INLINE ICONS
   The text glyphs that used to stand in for icons were replaced with inline
   SVG, so their containers need to centre a box instead of a character.
   ========================================================================== */

.stat-icon,
.quick-action-icon,
.quick-action-arrow,
.overview-action-icon,
.overview-action-arrow,
.admin-card-icon,
.premium-symbol,
.autorole-hero-icon,
.autorole-help-icon,
.commands-state-icon,
.log-category-icon,
.role-option-check,
.role-picker-chevron,
.panel-link,
.commands-page-btn,
.servers-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.stat-icon svg,
.quick-action-icon svg,
.overview-action-icon svg,
.admin-card-icon svg,
.autorole-hero-icon svg,
.commands-state-icon svg {
  display: block;
}

/* ==========================================================================
   HORIZONTAL SCROLL HINT
   A row that scrolls sideways gives no clue on a touch screen: the content
   simply looks cut off. These shadows appear only on the side that still has
   something hidden, and fade out once that end is reached.
   ========================================================================== */

.scroll-hint {
  background-image:
    linear-gradient(
      to right,
      var(--scroll-hint-bg, var(--bg-surface)) 45%,
      transparent
    ),
    linear-gradient(
      to left,
      var(--scroll-hint-bg, var(--bg-surface)) 45%,
      transparent
    ),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.5), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.5), transparent);
  background-position:
    left center,
    right center,
    left center,
    right center;
  background-repeat: no-repeat;
  background-size:
    36px 100%,
    36px 100%,
    14px 100%,
    14px 100%;
  /* The first two scroll with the content, the shadows stay pinned: that is
     what makes them disappear at each end. */
  background-attachment: local, local, scroll, scroll;
}

/* On touch screens the scrollbar is the other half of the hint, so it stays
   visible instead of being hidden like on desktop. */
@media (hover: none) and (pointer: coarse) {
  .scroll-hint {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    padding-bottom: 6px;
  }

  .scroll-hint::-webkit-scrollbar {
    display: block;
    height: 3px;
  }

  .scroll-hint::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--border-strong);
  }

  .scroll-hint::-webkit-scrollbar-track {
    background: transparent;
  }
}


/* ==========================================================================
   SELECT
   The native control paints its dropdown with the operating system colours,
   which on this page arrives as a white sheet. These classes style a list we
   own; the real <select> stays hidden and keeps holding the value.
   ========================================================================== */

.kz-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.kz-select {
  position: relative;
  width: 100%;
}

.kz-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.kz-select-trigger:hover {
  border-color: var(--border-strong);
}

.kz-select-trigger:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.kz-select.is-disabled {
  opacity: 0.55;
}

.kz-select.is-disabled .kz-select-trigger {
  cursor: not-allowed;
}

.kz-select.is-disabled .kz-select-trigger:hover {
  border-color: var(--border-color);
}

.kz-select-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.kz-select.is-open .kz-select-trigger {
  border-color: var(--accent-primary);
}

.kz-select-value {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kz-select-value.is-placeholder {
  color: var(--text-muted);
}

.kz-select-chevron {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.kz-select.is-open .kz-select-chevron {
  transform: rotate(180deg);
}

/* The panel is moved to <body> while open and placed against the viewport,
   so a field inside a modal or a scrolling pane is not clipped by it. */
.kz-select-panel {
  position: fixed;
  /* The panel is a child of <body>, so it is stacked against the modal overlay
     rather than inside it. At 300 it landed *behind* an open modal (99999),
     which read as a second panel ghosted under the dialog and swallowed the
     click on the backdrop instead of picking an option. It has to outrank
     anything it can be opened from. */
  z-index: 100000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}

.kz-select-search {
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}

.kz-select-search:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.kz-select-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.kz-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.kz-select-option:hover,
.kz-select-option.is-active {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.kz-select-option.is-selected {
  color: var(--text-primary);
  font-weight: 650;
}

.kz-select-option span:not(.kz-select-check) {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kz-select-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.kz-select-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent-primary);
}

.kz-select-empty {
  padding: 14px 10px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

/* ==========================================================================
   DATE AND TIME PICKER
   Same reasoning as the select: the browser calendar cannot be themed.
   ========================================================================== */

.kz-date {
  position: relative;
  width: 100%;
}

.kz-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.kz-date-trigger:hover {
  border-color: var(--border-strong);
}

.kz-date.is-open .kz-date-trigger {
  border-color: var(--accent-primary);
}

.kz-date-value {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kz-date-value.is-placeholder {
  color: var(--text-muted);
}

.kz-date-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.kz-date.has-value .kz-date-icon {
  color: var(--accent-primary);
}

.kz-date-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 60;
  display: none;
  width: 268px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}

.kz-date.is-above .kz-date-panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.kz-date.is-open .kz-date-panel {
  display: block;
}

.kz-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.kz-date-head strong {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

.kz-date-nav {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.kz-date-nav:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.kz-date-weekdays,
.kz-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.kz-date-weekdays span {
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.kz-date-cell {
  display: grid;
  place-items: center;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.kz-date-cell:hover:not(.is-empty) {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.kz-date-cell.is-empty {
  cursor: default;
}

.kz-date-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.kz-date-cell.is-selected {
  background: var(--accent-primary);
  color: #fff;
  font-weight: 700;
}

/* Past days stay clickable: a poll can be backdated for bookkeeping, and
   blocking it outright would be more annoying than helpful. */
.kz-date-cell.is-past {
  opacity: 0.4;
}

.kz-date-time {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
}

.kz-date-time > label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 650;
}

.kz-date-time-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.kz-date-time-inputs input {
  width: 56px;
  padding: 7px 8px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

.kz-date-time-inputs input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.kz-date-time-inputs em {
  color: var(--text-muted);
  font-style: normal;
}

.kz-date-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
}

.kz-date-clear,
.kz-date-done {
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.kz-date-clear:hover {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.kz-date-done {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #fff;
}

/* A blanket img rule further up sets display, which beats the browser default
   for [hidden]. This puts the attribute back in charge everywhere. */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   CONFIRMATION DIALOG
   Replaces window.confirm, which the browser paints itself and can suppress
   after a few uses.
   ========================================================================== */

.kz-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  animation: kz-confirm-in 0.14s ease;
}

@keyframes kz-confirm-in {
  from {
    opacity: 0;
  }
}

.kz-confirm {
  width: 100%;
  max-width: 400px;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.kz-confirm h3 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
}

.kz-confirm p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.kz-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 11.5px;
  cursor: pointer;
}

.kz-confirm-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kz-confirm-box {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.kz-confirm-check input:checked + .kz-confirm-box {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
}

.kz-confirm-check input:checked + .kz-confirm-box::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.kz-confirm-check input:focus-visible + .kz-confirm-box {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.kz-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.kz-confirm-cancel,
.kz-confirm-ok {
  padding: 9px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.kz-confirm-cancel:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.kz-confirm-ok {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: #fff;
}

.kz-confirm-ok:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.kz-confirm-ok.is-danger {
  border-color: #ed4245;
  background: #ed4245;
}

.kz-confirm-ok.is-danger:hover {
  border-color: #c93b3e;
  background: #c93b3e;
}


/* --------------------------------------------------------------------------
   DISCORD MESSAGE MOCK
   Close enough to read the shape of the post without pretending to be a
   pixel copy of the client.
   -------------------------------------------------------------------------- */

.dc-message {
  display: flex;
  gap: 10px;
  padding: 0 16px 18px;
}

.dc-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
}

.dc-body {
  min-width: 0;
  flex: 1;
}

.dc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.dc-head strong {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 650;
}

.dc-tag {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--accent-primary);
  color: #fff;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.dc-time {
  color: var(--text-muted);
  font-size: 9.5px;
}

.dc-content {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc-embed {
  --dc-accent: var(--accent-primary);
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 5px;
  border-left: 4px solid var(--dc-accent);
  background: rgba(255, 255, 255, 0.035);
}

.dc-embed-inner {
  min-width: 0;
  flex: 1;
}

.dc-author {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 650;
}

.dc-title {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.dc-desc {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.dc-options {
  margin-top: 9px;
}

.dc-option {
  margin-bottom: 7px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  word-break: break-word;
}

.dc-option strong {
  color: var(--text-primary);
}

.dc-option code {
  display: block;
  margin: 2px 0;
  color: var(--dc-accent);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: -0.5px;
}

.dc-option--empty {
  color: var(--text-muted);
  font-style: italic;
}

.dc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 10px;
}

.dc-field strong {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
}

.dc-field span {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.dc-field--wide {
  flex-basis: 100%;
}

.dc-image {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 4px;
}

.dc-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  object-fit: cover;
}

.dc-footer {
  display: block;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}

.dc-components {
  margin-top: 7px;
}

.dc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.dc-button {
  padding: 6px 11px;
  border-radius: 5px;
  background: #4e5058;
  color: #fff;
  font-size: 11px;
  font-weight: 550;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-button--primary {
  background: var(--accent-primary);
}

.dc-button--success {
  background: #248046;
}

.dc-select {
  margin-top: 6px;
  padding: 8px 11px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-muted);
  font-size: 11px;
}



/* ==========================================================================
   EMBED PREVIEW MODAL
   ========================================================================== */

.kz-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.kz-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--bg-surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.kz-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-subtle);
}

.kz-preview-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kz-preview-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.kz-preview-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.kz-preview-close:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.kz-preview-body {
  padding: 16px 4px 18px 0;
  overflow-y: auto;
}

.kz-preview-empty {
  margin: 0 18px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}


/* ============================================================================
   CODE EDITOR
   A transparent textarea over a coloured copy of the same text. The two only
   line up while every metric below is identical in both, so the font, the
   size, the line height, the padding and the wrapping are set once and shared.
   ============================================================================ */

.code-editor {
  --code-font: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  --code-size: 12.5px;
  --code-line: 1.6;
  --code-pad: 12px;

  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  transition: border-color var(--transition-fast);
}

.code-editor:focus-within {
  border-color: var(--accent-primary);
}

/* A plain reply is a few lines and needs no line numbers. A script gets both
   the room and the gutter. */
.code-editor {
  min-height: 96px;
}

.code-editor.is-tall {
  min-height: 280px;
}

.code-editor.is-plain .code-gutter {
  display: none;
}

.code-editor.has-error {
  border-color: rgba(237, 66, 69, 0.5);
}

/* ----------------------------------------------------------------------------
   GUTTER
   ---------------------------------------------------------------------------- */

.code-gutter {
  flex-shrink: 0;
  overflow: hidden;
  padding: var(--code-pad) 8px var(--code-pad) 12px;
  border-right: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-muted);
  font-family: var(--code-font);
  font-size: var(--code-size);
  line-height: var(--code-line);
  text-align: right;
  user-select: none;
}

.code-gutter span {
  display: block;
  opacity: 0.5;
}

.code-gutter .is-error {
  border-radius: 3px;
  background: rgba(237, 66, 69, 0.22);
  color: #ed4245;
  opacity: 1;
}

/* ----------------------------------------------------------------------------
   THE TWO LAYERS
   ---------------------------------------------------------------------------- */

.code-surface {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* Both selectors carry an element name on purpose. A field style elsewhere
   like `.cmd-field textarea` would otherwise outrank a bare `.code-input` and
   change the padding or the font on one layer only, which slides the colours
   out from under the caret. */
.code-editor .code-highlight,
.code-editor textarea.code-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--code-pad);
  border: 0;
  border-radius: 0;
  font-family: var(--code-font);
  font-size: var(--code-size);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--code-line);
  tab-size: 2;
  text-align: left;
  white-space: pre;
  word-wrap: normal;
}

.code-editor .code-highlight {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: auto;
  background: none;
  color: #dbdee1;
  pointer-events: none;
  scrollbar-width: none;
}

.code-editor .code-highlight::-webkit-scrollbar {
  display: none;
}

.code-editor textarea.code-input {
  position: relative;
  display: block;
  height: 100%;
  overflow: auto;
  background: transparent;
  /* The text itself is invisible; the caret is not. */
  color: transparent;
  caret-color: var(--text-primary);
  resize: none;
  scrollbar-width: thin;
}

.code-editor textarea.code-input:focus {
  outline: none;
  border: 0;
}

.code-editor textarea.code-input::selection {
  background: rgba(88, 101, 242, 0.35);
}

/* ----------------------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------------------- */

.tok-comment {
  color: #6b7280;
  font-style: italic;
}

.tok-string {
  color: #6ee7a8;
}

/* The code inside a template literal reads as code, not as string. */
.tok-interp {
  color: #dbdee1;
}

.tok-number {
  color: #f0b132;
}

.tok-keyword {
  color: #c792ea;
  font-weight: 650;
}

.tok-builtin {
  color: #7b9dff;
}

.tok-context {
  color: #4fd6be;
}

/* ============================================================================
   FEATURE STATUS. W.I.P.
   ----------------------------------------------------------------------------
   One visual for every feature that exists but is not ready to be used. Applied
   by web/frontend/src/assets/js/components/featureStatus.js to any element
   carrying data-wip, so a feature is switched off by a data attribute rather
   than by disabled="" scattered across the markup.
   ============================================================================ */

.wip-region {
  position: relative;
}

.wip-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-bottom: 16px;
  padding: 14px 16px;

  border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-primary);
  border-radius: var(--radius-lg);

  background: linear-gradient(
      90deg,
      var(--accent-subtle),
      transparent 60%
    ),
    var(--bg-surface);
}

.wip-badge {
  flex: 0 0 auto;

  padding: 3px 8px;

  border-radius: var(--radius-full);

  background: var(--accent-subtle);
  color: var(--accent-primary);

  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wip-notice__body {
  min-width: 0;
}

.wip-notice__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.wip-notice__text {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
}

/* The content stays visible and readable, the point is to show the area, not
   hide it, but it is plainly not something you can operate. `inert` on the
   element itself is what actually blocks the interaction; this is only how it
   looks. */
.wip-dimmed {
  opacity: 0.42;
  filter: saturate(0.55);
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .wip-notice {
    transition: border-color var(--transition-fast);
  }
}