/* ============================================================
   pax.moe Gitea Theme — exact style match
   /var/lib/gitea/custom/public/assets/css/custom.css
   ============================================================ */

@font-face {
  font-family: 'Terminess';
  src: url('../fonts/TerminessNerdPropo.ttf') format('truetype');
}

:root {
  --green:        #00ff00;
  --glass:        rgba(0, 255, 0, 0.06);
  --border:       rgba(0, 255, 0, 1);
  --border-dim:   rgba(0, 255, 0, 0.25);
  --shadow:       0 0 22px #00ff00;
  --inset:        inset 0 0 15px #001100;
  --bg:           #000000;
  --mono:         'Terminess';
}

/* ── Base ────────────────────────────────────────────────── */

html, body {
  background: var(--bg) !important;
  color: var(--green) !important;
  font-family: var(--mono) !important;
  accent-color: var(--green) !important;
}

/* ── Override every green in theme-auto.css ───────────────
   Gitea ships with an olive-leaning palette (#87ab63 family
   for primary, #91a313 for olive, #21ba45 for badges, etc).
   Replace every green-family value with neon green shades
   so the heatmap, bars, badges, success messages, and any
   --color-primary/green/olive-driven UI render on-theme. */

:root {
  /* primary ramp (was #87ab63 olive) */
  --color-primary:          #00ff00 !important;
  --color-primary-contrast: #000000 !important;
  --color-primary-dark-1:   #33ff33 !important;
  --color-primary-dark-2:   #66ff66 !important;
  --color-primary-dark-3:   #80ff80 !important;
  --color-primary-dark-4:   #99ff99 !important;
  --color-primary-dark-5:   #b3ffb3 !important;
  --color-primary-dark-6:   #ccffcc !important;
  --color-primary-dark-7:   #e6ffe6 !important;
  --color-primary-light-1:  #00e600 !important;
  --color-primary-light-2:  #00cc00 !important;
  --color-primary-light-3:  #00b300 !important;
  --color-primary-light-4:  #009900 !important;
  --color-primary-light-5:  #006600 !important;
  --color-primary-light-6:  #004000 !important;
  --color-primary-light-7:  #002000 !important;
  --color-primary-alpha-10: rgba(0,255,0,0.10) !important;
  --color-primary-alpha-20: rgba(0,255,0,0.20) !important;
  --color-primary-alpha-30: rgba(0,255,0,0.30) !important;
  --color-primary-alpha-40: rgba(0,255,0,0.40) !important;
  --color-primary-alpha-50: rgba(0,255,0,0.50) !important;
  --color-primary-alpha-60: rgba(0,255,0,0.60) !important;
  --color-primary-alpha-70: rgba(0,255,0,0.70) !important;
  --color-primary-alpha-80: rgba(0,255,0,0.80) !important;
  --color-primary-alpha-90: rgba(0,255,0,0.90) !important;

  /* generic green palette (was #87ab63 / #93b373 / #7a9e55 / #6c8c4c) */
  --color-green:        #00ff00 !important;
  --color-green-light:  #33ff33 !important;
  --color-green-dark-1: #00e600 !important;
  --color-green-dark-2: #00cc00 !important;

  /* olive — Gitea uses for accent text (was #91a313 yellow-olive) */
  --color-olive:        #66ff66 !important;
  --color-olive-dark-1: #00e600 !important;
  --color-olive-dark-2: #00cc00 !important;

  /* success messages (was #458a57 / #284034 / #6cc664) */
  --color-success-border: #00ff00 !important;
  --color-success-bg:     rgba(0,255,0,0.08) !important;
  --color-success-text:   #66ff66 !important;

  /* green badges (was #21ba45 emerald) */
  --color-green-badge:          #00ff00 !important;
  --color-green-badge-bg:       rgba(0,255,0,0.10) !important;
  --color-green-badge-hover-bg: rgba(0,255,0,0.30) !important;

  /* diff added-word highlight (was #3c653c muted forest) */
  --color-diff-added-word-bg: rgba(0,255,0,0.20) !important;
}

/* particles-js canvas injected by custom.js */
#particles-js {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Everything sits above the particle layer */
#gitea-header,
.page-content,
.full.height,
.ui.container,
.repository,
footer,
#footer {
  position: relative;
  z-index: 1;
}

/* ── Typography ──────────────────────────────────────────── */

* {
  font-family: var(--mono) !important;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
.ui.header, .header {
  color: var(--green) !important;
  text-shadow: 0 0 15px var(--green) !important;
  font-family: var(--mono) !important;
}

a, a:visited {
  color: var(--green) !important;
  text-decoration: none;
  transition: text-shadow 0.2s;
}
a:hover {
  text-shadow: var(--shadow);
  animation: pulseGlow 2s infinite;
}

.markup.markdown a {
  text-decoration: underline;
}

p, span, div, td, th, li, label, small {
  color: var(--green) !important;
  font-family: var(--mono) !important;
}

*::selection,
::selection {
  background: var(--green) !important;
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important;
}
*::-moz-selection,
::-moz-selection {
  background: var(--green) !important;
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important;
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 10px var(--green); }
  50%       { text-shadow: 0 0 30px var(--green); }
}

/* ── Navigation / Header ─────────────────────────────────── */

#gitea-header,
.ui.top.menu,
nav.ui.top.menu {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--green) !important;
  box-shadow: 0 0 12px rgba(0,255,0,0.15) !important;
}

.ui.top.menu .item,
#gitea-header .ui.menu .item {
  color: var(--green) !important;
  font-family: var(--mono) !important;
  opacity: 0.7;
  transition: 0.2s;
}

.ui.top.menu .item:hover,
#gitea-header .ui.menu .item:hover {
  background: var(--glass) !important;
  opacity: 1;
  text-shadow: var(--shadow);
}

.ui.top.menu .active.item,
#gitea-header .ui.menu .active.item {
  background: var(--glass) !important;
  color: var(--green) !important;
  opacity: 1;
  border-bottom: 2px solid var(--green) !important;
}

/* ── Sidebar / Vertical menus ────────────────────────────── */

.ui.secondary.menu,
.ui.vertical.menu,
.ui.tabular.menu {
  background: transparent !important;
  border-color: var(--border-dim) !important;
}

.ui.menu .item {
  color: var(--green) !important;
  font-family: var(--mono) !important;
  opacity: 0.7;
}
.ui.menu .item:hover {
  background: var(--glass) !important;
  opacity: 1;
}
.ui.menu .active.item {
  background: var(--glass) !important;
  color: var(--green) !important;
  opacity: 1;
  border-left: 2px solid var(--green) !important;
}

/* ── Buttons — neo-button style ──────────────────────────── */

.ui.button,
.ui.buttons .button,
.ui.basic.button {
  background: transparent !important;
  color: var(--green) !important;
  border: 2px solid var(--green) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  box-shadow: var(--inset) !important;
  transition: 0.25s !important;
}

.ui.button:hover,
.ui.buttons .button:hover {
  box-shadow: 0 0 18px var(--green), inset 0 0 22px rgba(0,255,0,0.25) !important;
  transform: translateY(-1px);
  background: var(--glass) !important;
}

.ui.primary.button {
  background: var(--glass) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 10px var(--green), var(--inset) !important;
}

.ui.red.button, .ui.negative.button {
  background: transparent !important;
  color: #ff4444 !important;
  border-color: #ff4444 !important;
  box-shadow: inset 0 0 15px #110000 !important;
}

/* ── Inputs / Forms ──────────────────────────────────────── */

input, textarea, select,
.ui.input input,
.ui.form input,
.ui.form textarea,
.ui.form select {
  background: var(--bg) !important;
  color: var(--green) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  caret-color: var(--green);
}

input::placeholder, textarea::placeholder {
  color: rgba(0, 255, 0, 0.3) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 8px rgba(0,255,0,0.3) !important;
}

/* ── Segments / Cards ────────────────────────────────────── */

.ui.segment,
.ui.segments,
.ui.card,
.ui.cards .card {
  background: var(--glass) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
  box-shadow: var(--inset) !important;
  backdrop-filter: blur(6px);
  transition: 0.25s;
}



/* ── Tables ──────────────────────────────────────────────── */

.ui.table {
  background: transparent !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
}

.ui.table thead th {
  background: var(--glass) !important;
  color: var(--green) !important;
  border-color: var(--border-dim) !important;
  text-shadow: 0 0 8px var(--green);
}

.ui.table td {
  border-color: var(--border-dim) !important;
  color: var(--green) !important;
}

.ui.table tr:hover td {
  background: var(--glass) !important;
}

/* ── Code / Diff ─────────────────────────────────────────── */

pre, .code-view, .file-code,
.non-diff-file-content,
.ui.attached.segment,
.ui.attached.table.segment {
  background: var(--bg) !important;
  color: var(--green) !important;
  font-family: var(--mono) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
}

td.lines-code,
td.lines-num {
  background: var(--bg) !important;
  border: none !important;
}

.file-header {
  background: var(--bg) !important;
  border: 1px solid var(--border-dim) !important;
}

/* Inline code (markdown etc) — but not fenced code blocks */
:not(pre) > code {
  background: var(--glass) !important;
  color: var(--green) !important;
  font-family: var(--mono) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
}

/* Fenced code blocks in markdown — no extra bg/border on inner code */
pre.code-block > code,
.markup code.chroma {
  background: transparent !important;
  border: none !important;
}

/* Code view inner elements — no extra borders/backgrounds */
.code-view code,
td.lines-code code,
code.code-inner {
  background: transparent !important;
  border: none !important;
}

/* Kill ALL background highlights on Chroma tokens */
.chroma span,
.chroma code {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Chroma Syntax Colors — high contrast on black ────────
   Distinct, readable token colors that complement the
   green-on-black theme. Standard across .py, .css, .html,
   .js, .ts, .go, .rs, .json, .yaml, .sh, .sql, etc.
   ──────────────────────────────────────────────────────── */

/* Force black background everywhere chroma renders, regardless of
   diff/source/markdown context — and override Gitea's
   default theme-auto.css token backgrounds */
.chroma,
.chroma > code,
.chroma pre,
pre.chroma,
.code-view .chroma,
td.chroma {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
}

/* Keywords (def, class, if, for, return, import, while) — cyan */
.chroma .k,
.chroma .kd, .chroma .kr,
.chroma .kp, .chroma .kn { color: #00e5ff !important; font-weight: bold; }

/* Constants (True, False, None, null, undefined) — vivid teal */
.chroma .kc { color: #00ffcc !important; font-weight: bold; }

/* Type keywords (int, str, void, bool) — mint */
.chroma .kt { color: #5fffb0 !important; }

/* Generic identifiers (variables, references) — pale green */
.chroma .n, .chroma .nx { color: #c0ffc0 !important; }

/* Namespaces / module names — pale cyan */
.chroma .nn { color: #aaeaff !important; }

/* Function defs / calls — gold */
.chroma .nf, .chroma .fm { color: #ffd700 !important; font-weight: bold; }

/* Builtins (print, len, int, len) — amber */
.chroma .nb, .chroma .bp { color: #ffaa00 !important; }

/* Class names — bright orange */
.chroma .nc { color: #ffa040 !important; font-weight: bold; }

/* Exceptions — coral */
.chroma .ne { color: #ff7050 !important; font-weight: bold; }

/* Decorators (@app.route, @staticmethod) — magenta */
.chroma .nd { color: #ff79c6 !important; }

/* HTML/XML/JSX tags — sky cyan */
.chroma .nt { color: #00d4ff !important; }

/* HTML attributes / CSS properties — pale gold */
.chroma .na { color: #ffd166 !important; }

/* Labels (CSS selectors, goto labels) — yellow-green */
.chroma .nl { color: #aaff44 !important; }

/* Strings — warm yellow */
.chroma .s, .chroma .s1, .chroma .s2,
.chroma .sb, .chroma .sc, .chroma .sx,
.chroma .sh, .chroma .ss { color: #ffeb3b !important; }

/* Docstrings — same warm yellow as strings, italic to distinguish */
.chroma .sd { color: #ffeb3b !important; font-style: italic; }

/* String prefixes (b, f, r, u in Python) — gold */
.chroma .sa { color: #ffd700 !important; }

/* Escape sequences (\n, \t) — coral */
.chroma .se { color: #ff8c69 !important; font-weight: bold; }

/* String interpolation ({x} in f-strings) — coral */
.chroma .si { color: #ff8c69 !important; }

/* Regex literals — pink */
.chroma .sr { color: #ff79c6 !important; }

/* String delimiters (the quote chars themselves) — gold */
.chroma .dl { color: #ffd700 !important; }

/* Comments — dim sage green, italic */
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm { color: #6a9955 !important; font-style: italic; }

/* Preprocessor directives (#include, #define) — amber */
.chroma .cp { color: #ffaa00 !important; }
.chroma .cpf { color: #ffeb3b !important; }

/* Special comments (TODO, FIXME) — bold sage */
.chroma .cs { color: #9bc97f !important; font-weight: bold; font-style: italic; }

/* Numbers — bright sky cyan */
.chroma .m, .chroma .mi, .chroma .mf, .chroma .mh,
.chroma .mo, .chroma .il, .chroma .mb { color: #82eaff !important; }

/* Arithmetic / assignment operators (+, -, =, *) — orange */
.chroma .o { color: #ff9c40 !important; }

/* Word operators (and, or, not, in, is) — pink, bold */
.chroma .ow { color: #ff79c6 !important; font-weight: bold; }

/* Punctuation (parens, brackets, commas) — dim green */
.chroma .p { color: #80c080 !important; }

/* Variables — pale sky-green */
.chroma .nv, .chroma .vi, .chroma .vm,
.chroma .vc, .chroma .vg { color: #a5ffa5 !important; }

/* Constant names (UPPERCASE_LIKE_THIS, true) — mint */
.chroma .no, .chroma .ni { color: #5fffb0 !important; }

/* Errors — vivid red */
.chroma .err { color: #ff5050 !important; background: transparent !important; }

/* ── Neutral prose text in commit/PR diffs only ───────────
   Diff lines with no chroma tokens (e.g. .md prose) render
   as soft white-grey instead of inheriting body green, so
   markdown commits are readable. Chroma tokens still win
   because their .chroma .X rules apply directly to spans;
   this only fills in non-tokenized characters via cascade.
   Source-view (.code-view) and rendered markdown
   (.markup.markdown) intentionally NOT touched.
   ──────────────────────────────────────────────────────── */

.diff-file-body td.lines-code,
.diff-file-body td.lines-code code,
.code-diff td.lines-code,
.code-diff td.lines-code code {
  color: #c9d1d9 !important;
}

/* ── Python docstrings in diffs — grey block ──────────────
   custom.js tags every td that's inside a triple-quoted
   block with .is-docstring. Override every chroma token
   color so the whole block reads as a unified grey chunk
   (chroma's per-line lexer mis-tokenizes docstring prose
   as code, so we have to nuke ALL token colors here).
   ──────────────────────────────────────────────────────── */

.diff-file-body td.lines-code.is-docstring,
.diff-file-body td.lines-code.is-docstring code,
.diff-file-body td.lines-code.is-docstring code *,
.code-diff td.lines-code.is-docstring,
.code-diff td.lines-code.is-docstring code,
.code-diff td.lines-code.is-docstring code * {
  color: #8b949e !important;
  font-style: italic;
}


/* ── Generic / diff output (markdown rendered diffs etc.) ── */

.chroma .gd { color: #ff5588 !important; background: transparent !important; }
.chroma .gi { color: #66ff66 !important; background: transparent !important; }
.chroma .go { color: #888888 !important; }
.chroma .gp { color: #00ffcc !important; }
.chroma .gr, .chroma .gt { color: #ff5050 !important; }
.chroma .gh { color: #00d4ff !important; font-weight: bold; }
.chroma .gu { color: #00ffcc !important; font-weight: bold; }
.chroma .ge { font-style: italic; color: #ffeb3b !important; }
.chroma .gs { font-weight: bold; color: #ffd700 !important; }
.chroma .w  { color: rgba(0,255,0,0.15) !important; }

/* Diff — override Gitea's CSS variables */
:root {
  --color-diff-removed-row-bg: rgba(255, 0, 0, 0.06) !important;
  --color-diff-removed-row-border: rgba(255, 0, 0, 0.15) !important;
  --color-diff-added-row-bg: rgba(0, 255, 0, 0.06) !important;
  --color-diff-added-row-border: rgba(0, 255, 0, 0.15) !important;
  --color-diff-inactive: var(--bg) !important;
  --color-box-body-highlight: var(--bg) !important;
}

/* Diff rows — black base, subtle tint for add/del */
.add-code td,
.del-code td,
.same-code td,
.tag-code td,
.tag-code .blob-excerpt {
  background: var(--bg) !important;
}

.code-diff-unified .add-code td {
  background: rgba(0, 255, 0, 0.06) !important;
}

.code-diff-unified .del-code td {
  background: rgba(255, 0, 0, 0.06) !important;
}

/* Diff line numbers */
.lines-num-old,
.lines-num-new,
td.lines-num {
  background: var(--bg) !important;
  color: rgba(0,255,0,0.4) !important;
  border-right: 1px solid var(--border-dim) !important;
}

/* Diff file header + container */
.diff-file-header {
  background: var(--bg) !important;
  border: 1px solid var(--border-dim) !important;
}

.diff-file-body,
.diff-file-box,
.diff-detail-box,
.diff-file-body .ui.segment {
  background: var(--bg) !important;
}

/* Hunk headers */
.blob-hunk {
  background: var(--bg) !important;
  color: rgba(0,255,0,0.5) !important;
}

/* Lines type marker (+/-) */
.lines-type-marker {
  color: rgba(0,255,0,0.5) !important;
  background: var(--bg) !important;
}

.del-code .lines-type-marker {
  color: rgba(255,0,0,0.5) !important;
}

/* Expand buttons */
.code-expander-button {
  background: var(--bg) !important;
  color: var(--green) !important;
}

.line-num {
  background: var(--bg) !important;
  color: rgba(0,255,0,0.4) !important;
  border-right: 1px solid var(--border-dim) !important;
}

/* ── Repository summary bar (Commits / Branch / Tags / Size)
   The .ui.segment.sub-menu wrapper isn't matched by the
   global .ui.menu hover rule, so Semantic UI's default
   grey hover bleeds through. Override with translucent
   green and a soft inset glow. */

.repository-summary .item,
.repository-menu .item {
  transition: background 0.15s, box-shadow 0.15s;
}

.repository-summary .item:hover,
.repository-summary .item:focus,
.repository-summary .item.active,
.repository-menu .item:hover,
.repository-menu .item:focus,
.repository-menu .item.active {
  background: rgba(0, 255, 0, 0.14) !important;
  color: var(--green) !important;
  box-shadow: inset 0 0 12px rgba(0, 255, 0, 0.18) !important;
}

/* ── Activity tab — author commit chart ──────────────────
   The chart is a Vue component that reads barColor/textColor
   via getComputedStyle() of two hidden ref divs. The render
   logic picks `textAltColor` for tall bars (text drawn INSIDE
   the bar) and `textColor` for short bars (text floats above
   on page background), so:
     .activity-bar-graph     color → textColor    (page bg)
     .activity-bar-graph-alt color → textAltColor (inside bar) */

.activity-bar-graph {
  background-color: #00ff00 !important;
  color: var(--green) !important;
}

.activity-bar-graph-alt {
  color: #000000 !important;
}

/* Stats bars (Active PRs / Active Issues progress bar) */
.stats-table .table-cell.background.light.grey {
  background-color: rgba(0, 255, 0, 0.15) !important;
}
.stats-table .table-cell.background.green {
  background-color: var(--green) !important;
}

/* Activity page <strong> counts (1 author, 299 commits, 82 files) —
   keep them on-theme green so they stop reading as out-of-palette pink */
.activity-header ~ * strong,
#repo-activity strong,
.repository.view.activity strong {
  color: var(--green) !important;
  font-weight: bold;
}
.activity-header ~ * strong.text.green,
#repo-activity strong.text.green,
.repository.view.activity strong.text.green {
  color: #66ff66 !important;
}
.activity-header ~ * strong.text.red,
#repo-activity strong.text.red,
.repository.view.activity strong.text.red {
  color: #ff5050 !important;
}

/* ── Labels / Badges ─────────────────────────────────────── */

.ui.label {
  background: var(--glass) !important;
  color: var(--green) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
}

/* ── Dropdowns ───────────────────────────────────────────── */

.ui.dropdown .menu {
  background: var(--bg) !important;
  border: 1px solid var(--green) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow) !important;
}

.ui.dropdown .menu .item {
  color: var(--green) !important;
  font-family: var(--mono) !important;
  opacity: 0.7;
}

.ui.dropdown .menu .item:hover {
  background: var(--glass) !important;
  opacity: 1;
}

/* ── Modals ──────────────────────────────────────────────── */

.ui.modal {
  background: var(--bg) !important;
  border: 2px solid var(--green) !important;
  border-radius: 0 !important;
  box-shadow: var(--shadow) !important;
}

.ui.modal .header {
  background: var(--glass) !important;
  color: var(--green) !important;
  border-bottom: 1px solid var(--green) !important;
  text-shadow: 0 0 10px var(--green);
}

.ui.dimmer {
  background: rgba(0, 5, 0, 0.88) !important;
}

/* ── Messages / Alerts ───────────────────────────────────── */

.ui.message {
  background: var(--glass) !important;
  border: 1px solid var(--border-dim) !important;
  border-radius: 0 !important;
  color: var(--green) !important;
  box-shadow: var(--inset) !important;
}

.ui.positive.message, .ui.success.message {
  border-color: var(--green) !important;
  box-shadow: 0 0 10px rgba(0,255,0,0.2), var(--inset) !important;
}

.ui.negative.message, .ui.error.message {
  background: rgba(20,0,0,0.5) !important;
  border-color: #ff4444 !important;
  color: #ff4444 !important;
}

/* ── Footer ──────────────────────────────────────────────── */

footer, #footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border-dim) !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */

/* Firefox + standard */
html { scrollbar-color: var(--green) var(--bg); scrollbar-width: thin; }
* { scrollbar-color: var(--green) var(--bg); scrollbar-width: thin; }

/* WebKit / Blink */
::-webkit-scrollbar { width: 5px; height: 5px; background: var(--bg); }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green); }
::-webkit-scrollbar-thumb:hover { background: var(--green); box-shadow: 0 0 8px var(--green); }
::-webkit-scrollbar-corner { background: var(--bg); }

/* ── Folder icons in repo file list ──────────────────────
   Gitea's default CSS paints octicon-file-directory-fill
   with --color-secondary; force pure green (both color
   for currentColor-based paths and fill for hard-coded). */

svg.octicon-file-directory,
svg.octicon-file-directory-fill,
svg.octicon-file-directory-open-fill,
svg.octicon-file-submodule {
  color: var(--green) !important;
  fill: var(--green) !important;
}

/* ── Misc ────────────────────────────────────────────────── */

.divider, .ui.divider { border-color: var(--border-dim) !important; }
hr { border-color: var(--border-dim) !important; }

#navbar,
.header-wrapper, .ui {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}