:root,
.dark-mode,
.v-theme--dark,
body,
body.dark-mode {
  --genok-bg: #1a1a1d;
  --genok-surface: #242428;
  --genok-panel: #242428;
  --genok-panel-soft: #202024;
  --genok-elevated: #2d2d32;
  --genok-text: #f0ede6;
  --genok-muted: #9a958c;
  --genok-border: #3a3a40;
  --genok-accent: #facdd7;
  --genok-accent-hover: #f5b8c5;
  --genok-accent-text: #28282c;
  --genok-success: #a9d2af;
  --genok-success-bg: #243127;
  --background: var(--genok-bg) !important;
  --alt-background: var(--genok-panel-soft) !important;
  --surfacePrimary: var(--genok-panel) !important;
  --surfaceSecondary: var(--genok-elevated) !important;
  --surfaceTertiary: var(--genok-panel-soft) !important;
  --textPrimary: var(--genok-text) !important;
  --textSecondary: var(--genok-muted) !important;
  --textMuted: var(--genok-muted) !important;
  --borderPrimary: var(--genok-border) !important;
  --borderSecondary: var(--genok-border) !important;
  --iconBackground: color-mix(in srgb, var(--genok-accent) 12%, var(--genok-panel)) !important;
  --activeWhiteIcon: var(--genok-accent) !important;
  --primaryColor: var(--genok-accent) !important;
  --primaryColorHover: var(--genok-accent-hover) !important;
  --primaryColorText: var(--genok-accent-text) !important;
  --buttonPrimary: var(--genok-accent) !important;
  --buttonPrimaryHover: var(--genok-accent-hover) !important;
  --blue: var(--genok-accent) !important;
  --cyan: var(--genok-accent) !important;
  --info: var(--genok-accent) !important;
  --v-theme-background: 26, 26, 29 !important;
  --v-theme-surface: 36, 36, 40 !important;
  --v-theme-surface-variant: 32, 32, 36 !important;
  --v-theme-on-background: 240, 237, 230 !important;
  --v-theme-on-surface: 240, 237, 230 !important;
  --v-theme-on-surface-variant: 154, 149, 140 !important;
  --v-theme-primary: 250, 205, 215 !important;
  --v-theme-on-primary: 40, 40, 44 !important;
  --v-theme-secondary: 154, 149, 140 !important;
  --v-theme-info: 250, 205, 215 !important;
  --v-theme-success: 169, 210, 175 !important;
  --v-theme-warning: 232, 207, 142 !important;
  --v-theme-error: 232, 160, 154 !important;
  color-scheme: dark;
}

html,
body,
#app {
  min-width: 320px;
  min-height: 100%;
  background: var(--genok-bg) !important;
  color: var(--genok-text) !important;
  font-family: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

* {
  letter-spacing: 0 !important;
  scrollbar-color: color-mix(in srgb, var(--genok-accent) 36%, var(--genok-border)) var(--genok-panel-soft);
}

body *:not(svg):not(svg *) {
  color: var(--genok-text) !important;
  text-shadow: none !important;
}

body,
main,
nav,
aside,
header,
footer,
section,
article,
.dark-mode {
  background-color: var(--genok-bg) !important;
  color: var(--genok-text) !important;
}

a,
a:visited,
button,
label,
span,
p,
div,
td,
th,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--genok-text) !important;
}

small,
.text-muted,
.text-medium-emphasis,
.text-disabled,
[class*="muted"],
[class*="secondary"],
[class*="subtitle"],
[class*="meta"] {
  color: var(--genok-muted) !important;
}

input,
textarea,
select,
[role="searchbox"],
[type="search"],
.v-field,
.v-field__field,
.v-field__input,
.v-text-field,
.v-input,
.search-input {
  background: var(--genok-panel-soft) !important;
  color: var(--genok-text) !important;
  border: 1px solid var(--genok-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--genok-muted) !important;
  opacity: 1 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid color-mix(in srgb, var(--genok-accent) 42%, transparent) !important;
  outline-offset: 2px !important;
  border-color: color-mix(in srgb, var(--genok-accent) 48%, var(--genok-border)) !important;
}

button,
.button,
[role="button"],
.v-btn {
  border-radius: 999px !important;
  border-color: var(--genok-border) !important;
  background: var(--genok-panel-soft) !important;
  color: var(--genok-text) !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease !important;
}

button:hover,
.button:hover,
[role="button"]:hover,
.v-btn:hover {
  background: color-mix(in srgb, var(--genok-accent) 14%, var(--genok-panel)) !important;
  border-color: color-mix(in srgb, var(--genok-accent) 34%, var(--genok-border)) !important;
  transform: translateY(-1px);
}

button[type="submit"],
.button.primary,
.primary,
.v-btn--variant-elevated,
.v-btn.bg-primary,
.bg-primary,
[class*="primary"] {
  background: var(--genok-accent) !important;
  color: var(--genok-accent-text) !important;
  border-color: transparent !important;
  font-weight: 650 !important;
}

button[type="submit"] *,
.button.primary *,
.primary *,
.v-btn--variant-elevated *,
.v-btn.bg-primary *,
.bg-primary *,
[class*="primary"] * {
  color: var(--genok-accent-text) !important;
}

svg,
svg *,
i,
.material-symbols,
.v-icon,
[class*="icon"] {
  color: var(--genok-text) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

[class*="blue"],
[class*="cyan"],
.bg-blue,
.bg-light-blue,
.bg-cyan,
.text-blue,
.text-light-blue,
.text-cyan,
.v-btn[style*="33, 150, 243"],
.v-btn[style*="25, 118, 210"],
[style*="blue"],
[style*="#2196"],
[style*="#03a9"],
[style*="rgb(33, 150, 243)"],
[style*="rgb(25, 118, 210)"],
[style*="#141D24"],
[style*="#283136"],
[style*="#20292F"],
[style*="#3A4147"] {
  color: var(--genok-text) !important;
  background-color: var(--genok-panel) !important;
  border-color: var(--genok-border) !important;
}

.material-symbols,
span[class*="folder"],
[class*="folder"] svg,
[class*="folder"] svg *,
[class*="folder"] i,
[class*="file"] svg,
[class*="file"] svg *,
[class*="file"] i {
  color: var(--genok-accent) !important;
  fill: var(--genok-accent) !important;
  stroke: var(--genok-accent) !important;
}

img[src*="folder"],
img[src*="file"] {
  filter: sepia(1) saturate(1.4) hue-rotate(290deg) brightness(1.1) !important;
}

header,
[class*="top"],
[class*="toolbar"],
[class*="search"],
[class*="breadcrumbs"],
[class*="listing"],
[class*="table"],
[class*="sidebar"],
[class*="drawer"],
[class*="card"],
[class*="panel"],
[class*="modal"],
[class*="dialog"],
[class*="menu"],
[class*="dropdown"],
[class*="popover"],
.v-application,
.v-main,
.v-navigation-drawer,
.v-app-bar,
.v-toolbar,
.v-card,
.v-sheet,
.v-table,
.v-table__wrapper,
.v-list,
.v-list-item,
.v-menu,
.v-overlay__content,
.v-data-table,
.v-data-table__wrapper {
  background-color: var(--genok-panel) !important;
  color: var(--genok-text) !important;
  border-color: var(--genok-border) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 8px 24px rgba(0, 0, 0, .22) !important;
}

aside,
nav[class*="sidebar"],
[class*="drawer"],
.v-navigation-drawer {
  background-color: var(--genok-surface) !important;
}

table,
thead,
tbody,
tr,
td,
th,
[role="row"],
[class*="row"],
[class*="item"],
.v-data-table tr,
.v-data-table td,
.v-data-table th,
.v-list-item-title,
.v-list-item-subtitle {
  color: var(--genok-text) !important;
  border-color: var(--genok-border) !important;
}

tr:hover,
[role="row"]:hover,
[class*="row"]:hover,
[class*="item"]:hover,
[class*="selected"],
.v-list-item--active,
.v-data-table__tr:hover,
.v-data-table tbody tr:hover {
  background-color: color-mix(in srgb, var(--genok-accent) 10%, var(--genok-panel)) !important;
  color: var(--genok-text) !important;
}

progress,
meter,
.v-progress-linear,
.v-progress-linear__background,
.v-progress-linear__determinate,
[class*="progress"] {
  accent-color: var(--genok-accent) !important;
  background-color: color-mix(in srgb, var(--genok-accent) 12%, var(--genok-panel-soft)) !important;
  color: var(--genok-accent) !important;
}

.v-progress-linear__determinate,
.v-slider-track__fill,
.v-switch__track,
.v-switch__thumb {
  background-color: var(--genok-accent) !important;
  color: var(--genok-accent-text) !important;
}

.v-divider {
  border-color: var(--genok-border) !important;
  opacity: 1 !important;
}

.v-overlay__scrim {
  background: #000 !important;
  opacity: .42 !important;
}

.v-chip {
  background: color-mix(in srgb, var(--genok-accent) 12%, var(--genok-panel-soft)) !important;
  color: var(--genok-text) !important;
  border: 1px solid color-mix(in srgb, var(--genok-accent) 22%, var(--genok-border)) !important;
}

.v-tooltip > .v-overlay__content {
  background: var(--genok-elevated) !important;
  color: var(--genok-text) !important;
  border: 1px solid var(--genok-border) !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--genok-panel-soft);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--genok-accent) 36%, var(--genok-border));
  border-radius: 999px;
  border: 2px solid var(--genok-panel-soft);
}

.genok-switcher {
  position: fixed;
  right: 14px;
  top: 10px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--genok-accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--genok-panel-soft) 88%, transparent);
  backdrop-filter: blur(10px);
  font: 650 13px/1.2 "Inter", "SF Pro Text", system-ui, sans-serif;
}

.genok-switcher a {
  color: var(--genok-text) !important;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 999px;
}

.genok-switcher a:hover {
  background: color-mix(in srgb, var(--genok-accent) 14%, transparent);
}

.genok-switcher img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  image-rendering: pixelated;
}

@media (max-width: 620px) {
  .genok-switcher {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    justify-content: center;
  }
}