:root {
  color-scheme: dark;
  --bg: #0b0b0c;
  --bg-elev: #121214;
  --bg-soft: #18181b;
  --bg-hover: #202024;
  --border: #2b2b31;
  --text: #f3f3f4;
  --muted: #a1a1aa;
  --accent: #ffffff;
  --accent-text: #000000;
  --danger: #ff5c5c;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body,
input,
textarea,
select,
button {
  color: var(--text) !important;
}

a,
a:visited {
  color: var(--text) !important;
}

a:hover {
  color: #ffffff !important;
  opacity: 0.9;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
label,
th,
.title,
.subtitle {
  color: var(--text) !important;
}

small,
.help,
.hint,
.muted,
.has-text-grey,
.has-text-grey-dark,
.description,
.meta,
label + span {
  color: var(--muted) !important;
}

hr {
  border-color: var(--border) !important;
}

img {
  filter: grayscale(100%);
}

.wrap,
.container,
.header,
.content,
.login,
.form,
.card,
.box,
.panel,
.message,
.notice,
.flash,
table,
thead,
tbody,
tr,
td,
th {
  background: transparent !important;
  color: var(--text) !important;
}

input,
textarea,
select,
.select select,
.input,
.textarea {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

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

button,
.button,
input[type="submit"],
input[type="button"],
.tag,
.pagination-link,
.pagination-next,
.pagination-previous {
  background: var(--bg-soft) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.pagination-link:hover,
.pagination-next:hover,
.pagination-previous:hover,
.tag:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

.button.is-primary,
.button.is-link,
.button.is-info,
.button.is-success,
.button.is-warning,
.button.is-danger,
.is-primary,
.is-link,
.is-info,
.is-success,
.is-warning,
.is-danger,
.pagination-link.is-current,
.pagination-link[aria-current="page"] {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}

.button.is-danger,
.is-danger {
  color: #000000 !important;
}

#app,
#app .navbar,
#app .nav,
#app .sidebar,
#app .menu,
#app .section,
#app .modal-card,
#app .dropdown-content,
#app .pagination,
#app .tabs ul,
#app .table-wrapper,
#app .table,
#app .box,
#app .card,
#app .message,
#app .input,
#app .textarea,
#app .select select,
#app .taginput,
#app .tag,
#app .ql-toolbar,
#app .ql-container,
#app .navbar-brand,
#app .navbar-menu,
#app .menu-list a,
#app .list,
#app .login,
#app .footer {
  background: transparent !important;
  color: var(--text) !important;
}

#app .sidebar,
#app .card,
#app .box,
#app .message,
#app .dropdown-content,
#app .table,
#app .input,
#app .textarea,
#app .select select,
#app .ql-toolbar,
#app .ql-container,
#app .tabs li a,
#app .pagination-link,
#app .pagination-next,
#app .pagination-previous,
#app .tag,
#app .menu-list a,
#app .navbar,
#app .modal-card {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

#app .table td,
#app .table th,
#app .table thead th,
#app .table tbody tr,
#app .table tr {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

#app .table tbody tr:hover,
#app .menu-list a:hover,
#app .tabs li a:hover,
#app .dropdown-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

#app .menu-list a.is-active,
#app .tabs li.is-active a,
#app .navbar-item.is-active {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border-color: var(--accent) !important;
}

#app .tag,
.tag {
  border-radius: 999px !important;
}

#app .ql-editor,
#app .ql-toolbar button,
#app .ql-picker,
#app .ql-stroke,
#app .ql-fill,
#app .icon,
#app svg,
svg,
i {
  color: var(--text) !important;
  stroke: currentColor;
}

#app .logo img,
.logo img {
  filter: grayscale(100%) invert(1) contrast(1.1);
}

#app .message.is-danger,
#app .notification.is-danger,
.notification.is-danger,
.message.is-danger {
  background: rgba(255, 92, 92, 0.12) !important;
  border-color: rgba(255, 92, 92, 0.35) !important;
  color: #ffd4d4 !important;
}

::selection {
  background: #ffffff;
  color: #000000;
}