:root {
  --vl-teal-50: #eefafa;
  --vl-teal-100: #d5f3f1;
  --vl-teal-200: #abe7e3;
  --vl-teal-300: #75d5d0;
  --vl-teal-400: #3bc0ba;
  --vl-teal-500: #18aaa4;
  --vl-teal-600: #0b8d88;
  --vl-teal-700: #08716e;
  --vl-teal-800: #095a58;
  --vl-teal-900: #0b4b49;
  --vl-gold-50: #fbf8ef;
  --vl-gold-100: #f5ecd5;
  --vl-gold-200: #ead7aa;
  --vl-gold-300: #dcc079;
  --vl-gold-400: #c9a554;
  --vl-gold-500: #b38b3f;
  --vl-gold-600: #947033;
  --vl-silver-50: #f7fafb;
  --vl-silver-100: #edf3f4;
  --vl-silver-200: #dce6e8;
  --vl-silver-300: #c4d2d5;
  --vl-charcoal-700: #2d373a;
  --vl-charcoal-800: #1d2528;
  --vl-charcoal-900: #111719;

  --background: 190 23% 96%;
  --foreground: 192 19% 10%;
  --muted: 188 18% 91%;
  --muted-foreground: 193 9% 35%;
  --popover: 0 0% 100%;
  --popover-foreground: 192 19% 10%;
  --sidebar: 190 24% 94%;
  --card: 0 0% 100%;
  --card-foreground: 192 19% 10%;
  --border: 190 16% 84%;
  --border-darker: 190 13% 70%;
  --input: 0 0% 100%;
  --input-border: 190 16% 78%;
  --input-radio-border: 190 14% 62%;
  --contrast-full: 0 0% 100%;
  --primary: 177 86% 30%;
  --primary-foreground: 0 0% 100%;
  --primary-text: 192 19% 12%;
  --input-radio-text: 192 14% 18%;
  --secondary: 42 42% 91%;
  --secondary-foreground: 40 49% 31%;
  --accent: 181 29% 88%;
  --accent-light: 181 30% 82%;
  --accent-foreground: 185 52% 22%;
  --ring: 177 86% 30%;
  --header: 190 29% 95%;
  --chart-1: 177 72% 37%;
  --chart-2: 41 47% 53%;
  --chart-3: 190 13% 46%;
  --chart-4: 184 46% 59%;
  --chart-5: 200 19% 28%;
  --tooltip: 192 18% 14%;
  --tooltip-foreground: 190 25% 96%;

  --color-blue-50: var(--vl-teal-50);
  --color-blue-100: var(--vl-teal-100);
  --color-blue-200: var(--vl-teal-200);
  --color-blue-300: var(--vl-teal-300);
  --color-blue-400: var(--vl-teal-400);
  --color-blue-500: var(--vl-teal-500);
  --color-blue-600: var(--vl-teal-600);
  --color-blue-700: var(--vl-teal-700);
  --color-blue-800: var(--vl-teal-800);
  --color-blue-900: var(--vl-teal-900);
  --color-indigo-50: var(--vl-teal-50);
  --color-indigo-100: var(--vl-teal-100);
  --color-indigo-200: var(--vl-teal-200);
  --color-indigo-300: var(--vl-teal-300);
  --color-indigo-400: var(--vl-teal-400);
  --color-indigo-500: var(--vl-teal-500);
  --color-indigo-600: var(--vl-teal-600);
  --color-indigo-700: var(--vl-teal-700);
  --color-indigo-800: var(--vl-teal-800);
  --color-indigo-900: var(--vl-teal-900);
  --color-cyan-200: var(--vl-teal-200);
  --color-cyan-300: var(--vl-teal-300);
  --color-cyan-400: var(--vl-teal-400);
  --color-cyan-500: var(--vl-teal-500);
  --color-cyan-600: var(--vl-teal-600);
  --color-cyan-700: var(--vl-teal-700);
  --color-amber-50: var(--vl-gold-50);
  --color-amber-100: var(--vl-gold-100);
  --color-amber-200: var(--vl-gold-200);
  --color-amber-300: var(--vl-gold-300);
  --color-amber-400: var(--vl-gold-400);
  --color-amber-500: var(--vl-gold-500);
  --color-amber-600: var(--vl-gold-600);
  --color-sky-50: var(--vl-silver-50);
  --color-sky-100: var(--vl-silver-100);
  --color-sky-200: var(--vl-silver-200);
  --color-sky-300: var(--vl-teal-200);
  --color-sky-400: var(--vl-teal-300);
  --color-sky-500: var(--vl-teal-500);
  --color-sky-600: var(--vl-teal-600);
  --color-sky-700: var(--vl-teal-700);
  --color-slate-50: var(--vl-silver-50);
  --color-slate-100: var(--vl-silver-100);
  --color-slate-200: var(--vl-silver-200);
  --color-slate-300: var(--vl-silver-300);
  --color-slate-400: #87989c;
  --color-slate-500: #647579;
  --color-slate-600: #46565a;
  --color-slate-700: var(--vl-charcoal-700);
  --color-slate-800: var(--vl-charcoal-800);
  --color-slate-900: var(--vl-charcoal-900);
  --color-slate-950: #080c0d;
  --color-violet-50: var(--vl-gold-50);
  --color-violet-100: var(--vl-gold-100);
  --color-violet-200: var(--vl-gold-200);
  --color-violet-300: var(--vl-gold-300);
  --color-violet-400: var(--vl-gold-400);
  --color-violet-500: var(--vl-gold-500);
  --color-violet-600: var(--vl-gold-600);
  --color-violet-700: #775a2b;
  --color-violet-800: #5c4625;
  --color-violet-900: #46371f;
  --color-purple-50: var(--vl-gold-50);
  --color-purple-100: var(--vl-gold-100);
  --color-purple-200: var(--vl-gold-200);
  --color-purple-300: var(--vl-gold-300);
  --color-purple-400: var(--vl-gold-400);
  --color-purple-500: var(--vl-gold-500);
  --color-purple-600: var(--vl-gold-600);
  --color-purple-700: #775a2b;
  --color-purple-800: #5c4625;
  --color-purple-900: #46371f;
  --color-fuchsia-200: var(--vl-gold-200);
  --color-fuchsia-500: var(--vl-gold-500);
  --color-fuchsia-700: #775a2b;
}

.dark {
  --background: 195 18% 7%;
  --foreground: 190 20% 96%;
  --muted: 192 14% 14%;
  --muted-foreground: 190 11% 66%;
  --popover: 195 18% 9%;
  --popover-foreground: 190 20% 96%;
  --sidebar: 195 22% 6%;
  --card: 195 16% 10%;
  --card-foreground: 190 20% 97%;
  --border: 190 13% 19%;
  --border-darker: 190 10% 34%;
  --input: 193 15% 12%;
  --input-border: 190 12% 24%;
  --input-radio-border: 190 11% 40%;
  --contrast-full: 195 22% 5%;
  --primary: 177 67% 48%;
  --primary-foreground: 195 24% 7%;
  --primary-text: 190 20% 94%;
  --input-radio-text: 190 16% 88%;
  --secondary: 41 27% 18%;
  --secondary-foreground: 42 55% 72%;
  --accent: 181 29% 16%;
  --accent-light: 181 31% 22%;
  --accent-foreground: 177 56% 74%;
  --ring: 177 67% 48%;
  --header: 195 20% 8%;
  --chart-1: 177 67% 48%;
  --chart-2: 42 49% 62%;
  --chart-3: 190 15% 58%;
  --chart-4: 184 48% 67%;
  --chart-5: 199 22% 76%;
  --tooltip: 190 18% 91%;
  --tooltip-foreground: 195 20% 9%;
}

html {
  accent-color: var(--vl-teal-600);
}

body {
  background-image: linear-gradient(180deg, hsl(var(--header)) 0, hsl(var(--background)) 160px);
  background-attachment: fixed;
}

header {
  border-bottom: 2px solid var(--vl-gold-400);
  box-shadow: 0 8px 24px rgb(17 23 25 / 18%);
}

header > div.absolute.inset-0:first-child {
  background: linear-gradient(105deg, var(--vl-charcoal-900) 0%, var(--vl-teal-800) 56%, var(--vl-teal-500) 100%) !important;
}

.dark header > div.absolute.inset-0:first-child {
  background: linear-gradient(105deg, #090d0e 0%, var(--vl-charcoal-800) 48%, var(--vl-teal-800) 100%) !important;
}

::selection {
  color: #fff;
  background: var(--vl-teal-600);
}

:focus-visible {
  outline-color: var(--vl-teal-500);
}

thead tr {
  background-color: color-mix(in srgb, var(--vl-silver-100) 78%, hsl(var(--card)));
}

.dark thead tr {
  background-color: color-mix(in srgb, var(--vl-teal-900) 24%, hsl(var(--card)));
}

tbody tr {
  transition: background-color 140ms ease;
}

tbody tr:hover {
  background-color: color-mix(in srgb, var(--vl-teal-50) 66%, transparent);
}

.dark tbody tr:hover {
  background-color: color-mix(in srgb, var(--vl-teal-900) 24%, transparent);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--vl-teal-500);
}

::-webkit-scrollbar-thumb {
  background-color: var(--vl-silver-300);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--vl-teal-400);
}

.dark ::-webkit-scrollbar-thumb {
  background-color: var(--vl-charcoal-700);
}

.vlta-nav {
  width: 100%;
  justify-content: flex-start;
  gap: 0.75rem;
}

.vlta-nav-icon {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  color: var(--vl-teal-700);
  border: 1px solid var(--vl-teal-300);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.vlta-loading {
  padding: 2rem;
  color: hsl(var(--muted-foreground));
}

.vlta-page {
  min-height: 100%;
  padding: 1.5rem;
  color: hsl(var(--foreground));
}

.vlta-page.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.vlta-header,
.vlta-toolbar,
.vlta-dialog-head,
.vlta-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vlta-header h1,
.vlta-toolbar h2,
.vlta-dialog h2 {
  margin: 0;
  letter-spacing: 0;
  font-weight: 700;
}

.vlta-header h1 { font-size: 1.5rem; }
.vlta-toolbar h2,
.vlta-dialog h2 { font-size: 1.05rem; }

.vlta-header p,
.vlta-toolbar p,
.vlta-dialog p {
  margin: 0.25rem 0 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.vlta-tabs {
  display: flex;
  gap: 0;
  margin-top: 1.25rem;
  border-bottom: 1px solid hsl(var(--border));
}

.vlta-tabs button {
  min-width: 8rem;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
}

.vlta-tabs button[aria-selected="true"] {
  border-color: var(--vl-teal-600);
  color: hsl(var(--foreground));
}

.vlta-panel { padding-top: 1.25rem; }
.vlta-toolbar { margin-bottom: 1rem; }

.vlta-button {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 650;
}

.vlta-button.primary {
  border-color: var(--vl-teal-700);
  background: var(--vl-teal-700);
  color: #fff;
}

.vlta-button.secondary {
  border-color: hsl(var(--border-darker));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
}

.vlta-button:disabled { opacity: 0.55; }

.vlta-table-wrap {
  overflow: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  background: hsl(var(--card));
}

.vlta-table-wrap table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.vlta-table-wrap th,
.vlta-table-wrap td {
  padding: 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  vertical-align: middle;
}

.vlta-table-wrap th {
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.vlta-table-wrap td strong,
.vlta-table-wrap td span { display: block; }
.vlta-table-wrap td > span:not(.vlta-badge) { margin-top: 0.15rem; color: hsl(var(--muted-foreground)); font-size: 0.78rem; }
.vlta-table-wrap tr:last-child td { border-bottom: 0; }
.vlta-empty { padding: 2rem !important; text-align: center !important; color: hsl(var(--muted-foreground)); }

.vlta-count {
  color: hsl(var(--muted-foreground));
  font-size: 0.85rem;
  font-weight: 650;
}

.vlta-player {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr) 2.25rem;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--vl-teal-300);
  border-left: 3px solid var(--vl-teal-600);
  border-radius: 6px;
  background: hsl(var(--card));
}

.vlta-player[hidden] { display: none; }
.vlta-player strong,
.vlta-player span { display: block; }
.vlta-player span { margin-top: 0.2rem; color: hsl(var(--muted-foreground)); font-size: 0.78rem; }
.vlta-player audio { width: 100%; height: 2.5rem; }
.vlta-player > button { width: 2.25rem; height: 2.25rem; font-size: 1.4rem; }

.vlta-badge {
  display: inline-block !important;
  width: fit-content;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.vlta-badge.is-active { background: #dcfce7; color: #166534; }
.vlta-badge.is-inactive { background: #f1f5f9; color: #475569; }
.dark .vlta-badge.is-active { background: #143824; color: #86efac; }
.dark .vlta-badge.is-inactive { background: #253034; color: #cbd5e1; }

.vlta-actions { white-space: nowrap; }
.vlta-actions button { color: var(--vl-teal-700); font-weight: 650; }
.vlta-actions button + button { margin-left: 0.75rem; }
.vlta-actions button.danger { color: #b42318; }

.vlta-notice {
  display: none;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
}

.vlta-notice.is-success { display: block; border: 1px solid #86efac; background: #f0fdf4; color: #166534; }
.vlta-notice.is-error { display: block; border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; }

.vlta-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgb(8 15 17 / 58%);
}

.vlta-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  box-shadow: 0 24px 64px rgb(0 0 0 / 28%);
}

.vlta-dialog-head > button {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
}

.vlta-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.vlta-form-grid label:not(.vlta-check) {
  display: grid;
  gap: 0.4rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8rem;
  font-weight: 650;
}

.vlta-form-grid input,
.vlta-form-grid select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 0.7rem;
  border: 1px solid hsl(var(--input-border));
  border-radius: 6px;
  background: hsl(var(--input));
  color: hsl(var(--foreground));
  font-size: 0.9rem;
}

.vlta-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  align-self: end;
  font-size: 0.875rem;
  font-weight: 650;
}

.vlta-check input { width: 1rem; height: 1rem; }
.vlta-dialog-actions { justify-content: flex-end; margin-top: 1.5rem; }

@media (max-width: 720px) {
  .vlta-page { padding: 1rem; }
  .vlta-header,
  .vlta-toolbar { align-items: flex-start; }
  .vlta-form-grid { grid-template-columns: 1fr; }
  .vlta-tabs button { min-width: 0; flex: 1; }
  .vlta-player { grid-template-columns: 1fr 2.25rem; }
  .vlta-player audio { grid-column: 1 / -1; grid-row: 2; }
}