:root {
  --vextana-header-font: "Techna Sans", "Trebuchet MS", "Avenir Next", sans-serif;
  --vextana-body-font: "Exo 2", "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --vextana-theme-storage-key: "workspace.ui.theme";
  --vextana-shell-bg: #f4f7fb;
  --vextana-shell-radial: rgba(13, 110, 253, 0.12);
  --vextana-shell-card-bg: rgba(255, 255, 255, 0.94);
  --vextana-shell-card-border: rgba(18, 32, 56, 0.1);
  --vextana-shell-card-shadow: 0 28px 72px rgba(15, 23, 42, 0.14);
  --vextana-shell-accent: #0d6efd;
  --vextana-shell-accent-soft: rgba(13, 110, 253, 0.14);
  --vextana-shell-muted: rgba(15, 23, 42, 0.7);
  --vextana-shell-subtle: rgba(15, 23, 42, 0.56);
  --vextana-shell-hairline: rgba(15, 23, 42, 0.08);
}

@font-face {
  font-family: "Techna Sans";
  src: url("./fonts/techna-sans-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Exo 2";
  src: url("./fonts/exo2-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Exo 2";
  src: url("./fonts/exo2-italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Exo 2";
  src: url("./fonts/exo2-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Exo 2";
  src: url("./fonts/exo2-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: var(--vextana-body-font);
}

body {
  font-family: var(--vextana-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.vextana-heading-font {
  font-family: var(--vextana-header-font);
  letter-spacing: 0.01em;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --vextana-shell-bg: #000000;
  --vextana-shell-radial: rgba(43, 122, 255, 0.16);
  --vextana-shell-card-bg: rgba(7, 10, 16, 0.88);
  --vextana-shell-card-border: rgba(255, 255, 255, 0.12);
  --vextana-shell-card-shadow: 0 34px 84px rgba(0, 0, 0, 0.56);
  --vextana-shell-accent: #5b9dff;
  --vextana-shell-accent-soft: rgba(91, 157, 255, 0.22);
  --vextana-shell-muted: rgba(255, 255, 255, 0.82);
  --vextana-shell-subtle: rgba(255, 255, 255, 0.64);
  --vextana-shell-hairline: rgba(255, 255, 255, 0.12);
}

.vextana-theme-surface {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, var(--vextana-shell-radial), transparent 38%),
    linear-gradient(180deg, var(--vextana-shell-bg) 0%, color-mix(in srgb, var(--vextana-shell-bg) 86%, #0d6efd 14%) 100%);
  color: var(--bs-body-color);
}

.vextana-shell {
  min-height: 100vh;
}

.vextana-shell-panel {
  width: min(38rem, calc(100vw - 2rem));
  border-radius: 1.25rem;
  border: 1px solid var(--vextana-shell-card-border);
  background: var(--vextana-shell-card-bg);
  box-shadow: var(--vextana-shell-card-shadow);
  backdrop-filter: blur(18px);
}

.vextana-shell-panel.tone-warning {
  border-color: color-mix(in srgb, #ffc107 36%, var(--vextana-shell-card-border));
}

.vextana-shell-panel.tone-danger {
  border-color: color-mix(in srgb, #dc3545 30%, var(--vextana-shell-card-border));
}

.vextana-shell-panel.tone-info {
  border-color: color-mix(in srgb, var(--vextana-shell-accent) 28%, var(--vextana-shell-card-border));
}

.vextana-shell-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vextana-shell-subtle);
}

.vextana-shell-kicker::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vextana-shell-accent), color-mix(in srgb, var(--vextana-shell-accent) 35%, white));
  box-shadow: 0 0 0 0.24rem var(--vextana-shell-accent-soft);
}

.vextana-shell-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.02;
}

.vextana-shell-copy {
  margin: 0;
  color: var(--vextana-shell-muted);
  font-size: 1.03rem;
  line-height: 1.72;
}

.vextana-shell-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.vextana-theme-toggle {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--vextana-shell-hairline);
  background: color-mix(in srgb, var(--vextana-shell-card-bg) 88%, transparent);
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vextana-theme-toggle:hover,
.vextana-theme-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--vextana-shell-accent) 48%, var(--vextana-shell-hairline));
  background: color-mix(in srgb, var(--vextana-shell-accent-soft) 74%, var(--vextana-shell-card-bg));
}

.vextana-theme-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

.vextana-link {
  color: var(--vextana-shell-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.vextana-link:hover {
  color: color-mix(in srgb, var(--vextana-shell-accent) 86%, white);
}

.vextana-form-label {
  font-weight: 500;
}

.vextana-form-note {
  color: var(--vextana-shell-subtle);
}

.vextana-connection-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #6c757d;
  flex: 0 0 auto;
}

.vextana-connection-dot.is-online {
  background: #198754;
}

.vextana-connection-dot.is-reconnecting {
  background: #ffc107;
}

.vextana-connection-dot.is-idle {
  background: #6ea8fe;
}

.vextana-connection-dot.is-offline {
  background: #6c757d;
}

@media (max-width: 575.98px) {
  .vextana-shell-panel {
    width: min(100vw - 1rem, 38rem);
    border-radius: 1rem;
  }

  .vextana-shell-title {
    font-size: clamp(1.7rem, 9vw, 2.2rem);
  }
}