/* =========================================================
   SHARDNET -- Forgejo Theme
   Dark glassmorphism matching Keycloak Shardnet theme
   ========================================================= */

:root {
  --is-dark-theme: true;

  /* ---- Primary: white accent instead of orange ---- */
  --color-primary:            #ffffff;
  --color-primary-contrast:   #000000;
  --color-primary-dark-1:     #e8e8e8;
  --color-primary-dark-2:     #d0d0d0;
  --color-primary-dark-3:     #b8b8b8;
  --color-primary-dark-4:     #a0a0a0;
  --color-primary-dark-5:     #888888;
  --color-primary-dark-6:     #707070;
  --color-primary-dark-7:     #585858;
  --color-primary-light-1:    #f0f0f0;
  --color-primary-light-2:    #e0e0e0;
  --color-primary-light-3:    #cccccc;
  --color-primary-light-4:    #b0b0b0;
  --color-primary-light-5:    #999999;
  --color-primary-light-6:    #808080;
  --color-primary-light-7:    #666666;
  --color-primary-alpha-10:   #ffffff19;
  --color-primary-alpha-20:   #ffffff33;
  --color-primary-alpha-30:   #ffffff4b;
  --color-primary-alpha-40:   #ffffff66;
  --color-primary-alpha-50:   #ffffff80;
  --color-primary-alpha-60:   #ffffff99;
  --color-primary-alpha-70:   #ffffffb3;
  --color-primary-alpha-80:   #ffffffcc;
  --color-primary-alpha-90:   #ffffffe6;
  --color-primary-hover:      #e0e0e0;
  --color-primary-active:     #cccccc;

  /* ---- Secondary ---- */
  --color-secondary:            rgba(255, 255, 255, 0.06);
  --color-secondary-dark-1:     rgba(255, 255, 255, 0.12);
  --color-secondary-dark-2:     rgba(255, 255, 255, 0.16);
  --color-secondary-dark-3:     rgba(255, 255, 255, 0.20);
  --color-secondary-dark-4:     rgba(255, 255, 255, 0.25);
  --color-secondary-dark-5:     rgba(255, 255, 255, 0.30);
  --color-secondary-dark-6:     rgba(255, 255, 255, 0.35);
  --color-secondary-dark-7:     rgba(255, 255, 255, 0.40);
  --color-secondary-dark-8:     rgba(255, 255, 255, 0.45);
  --color-secondary-dark-9:     rgba(255, 255, 255, 0.50);
  --color-secondary-dark-10:    rgba(255, 255, 255, 0.55);
  --color-secondary-dark-11:    rgba(255, 255, 255, 0.60);
  --color-secondary-dark-12:    rgba(255, 255, 255, 0.65);
  --color-secondary-dark-13:    rgba(255, 255, 255, 0.70);
  --color-secondary-light-1:    rgba(255, 255, 255, 0.05);
  --color-secondary-light-2:    rgba(255, 255, 255, 0.04);
  --color-secondary-light-3:    rgba(255, 255, 255, 0.03);
  --color-secondary-light-4:    rgba(255, 255, 255, 0.02);
  --color-secondary-alpha-10:   rgba(255, 255, 255, 0.03);
  --color-secondary-alpha-20:   rgba(255, 255, 255, 0.05);
  --color-secondary-alpha-30:   rgba(255, 255, 255, 0.07);
  --color-secondary-alpha-40:   rgba(255, 255, 255, 0.09);
  --color-secondary-alpha-50:   rgba(255, 255, 255, 0.11);
  --color-secondary-alpha-60:   rgba(255, 255, 255, 0.13);
  --color-secondary-alpha-70:   rgba(255, 255, 255, 0.15);
  --color-secondary-alpha-80:   rgba(255, 255, 255, 0.17);
  --color-secondary-alpha-90:   rgba(255, 255, 255, 0.19);
  --color-secondary-hover:      rgba(255, 255, 255, 0.08);
  --color-secondary-active:     rgba(255, 255, 255, 0.10);

  /* ---- Body / background ---- */
  --color-body:               #0a0a0a;
  --color-box-header:         rgba(255, 255, 255, 0.06);
  --color-box-body:           rgba(255, 255, 255, 0.03);
  --color-box-body-highlight: rgba(255, 255, 255, 0.06);

  /* ---- Text ---- */
  --color-text-dark:          #ffffff;
  --color-text:               rgba(255, 255, 255, 0.85);
  --color-text-light:         rgba(255, 255, 255, 0.60);
  --color-text-light-1:       rgba(255, 255, 255, 0.55);
  --color-text-light-2:       rgba(255, 255, 255, 0.40);
  --color-text-light-3:       rgba(255, 255, 255, 0.30);
  --color-text-focus:         #ffffff;

  /* ---- Footer ---- */
  --color-footer:             #050505;

  /* ---- Timeline ---- */
  --color-timeline:           rgba(255, 255, 255, 0.10);

  /* ---- Inputs ---- */
  --color-input-text:         #ffffff;
  --color-input-background:   rgba(255, 255, 255, 0.06);
  --color-input-toggle-background: rgba(255, 255, 255, 0.06);
  --color-input-border:       rgba(255, 255, 255, 0.12);
  --color-input-border-hover: rgba(255, 255, 255, 0.25);

  /* ---- Header / navbar ---- */
  --color-header-wrapper:              #060606;
  --color-header-wrapper-transparent:  #06060600;

  /* ---- Surfaces ---- */
  --color-light:              rgba(255, 255, 255, 0.04);
  --color-light-border:       rgba(255, 255, 255, 0.08);
  --color-hover:              rgba(255, 255, 255, 0.06);
  --color-active:             rgba(255, 255, 255, 0.08);
  --color-menu:               rgba(255, 255, 255, 0.04);
  --color-card:               rgba(255, 255, 255, 0.04);
  --fancy-card-bg:            rgba(255, 255, 255, 0.04);
  --fancy-card-border:        rgba(255, 255, 255, 0.08);

  /* ---- Markup / code ---- */
  --color-markup-table-row:   rgba(255, 255, 255, 0.03);
  --color-markup-code-block:  rgba(255, 255, 255, 0.04);
  --color-markup-code-inline: rgba(255, 255, 255, 0.06);
  --color-code-bg:            rgba(255, 255, 255, 0.04);

  /* ---- Buttons ---- */
  --color-button:             rgba(255, 255, 255, 0.06);

  /* ---- Misc ---- */
  --color-shadow:             rgba(0, 0, 0, 0.50);
  --color-secondary-bg:       rgba(255, 255, 255, 0.04);
  --color-expand-button:      rgba(255, 255, 255, 0.08);
  --color-placeholder-text:   rgba(255, 255, 255, 0.25);
  --color-editor-line-highlight: rgba(255, 255, 255, 0.06);
  --color-project-board-bg:   rgba(255, 255, 255, 0.03);
  --color-project-board-dark-label: rgba(255, 255, 255, 0.30);
  --color-caret:              #ffffff;

  /* ---- Reactions ---- */
  --color-reaction-bg:        rgba(255, 255, 255, 0.06);
  --color-reaction-active-bg: rgba(255, 255, 255, 0.12);
  --color-reaction-hover-bg:  rgba(255, 255, 255, 0.16);

  /* ---- Tooltip ---- */
  --color-tooltip-text:       #ffffff;
  --color-tooltip-bg:         #111111f0;

  /* ---- Navigation ---- */
  --color-nav-bg:             #060606;
  --color-nav-hover-bg:       rgba(255, 255, 255, 0.08);
  --color-nav-text:           rgba(255, 255, 255, 0.85);
  --color-secondary-nav-bg:   #0a0a0a;

  /* ---- Labels ---- */
  --color-label-text:         #ffffff;
  --color-label-bg:           rgba(255, 255, 255, 0.10);
  --color-label-hover-bg:     rgba(255, 255, 255, 0.14);
  --color-label-active-bg:    rgba(255, 255, 255, 0.18);
  --color-label-bg-alt:       rgba(255, 255, 255, 0.12);

  /* ---- Accent ---- */
  --color-accent:             #ffffff;
  --color-small-accent:       rgba(255, 255, 255, 0.60);
  --color-highlight-fg:       #ffffff;
  --color-highlight-bg:       rgba(255, 255, 255, 0.12);

  /* ---- Overlay ---- */
  --color-overlay-backdrop:   rgba(0, 0, 0, 0.75);

  /* ---- Diff ---- */
  --color-diff-removed-word-bg:   #78303080;
  --color-diff-added-word-bg:     #255c3980;
  --color-diff-removed-row-bg:    #43212180;
  --color-diff-moved-row-bg:      #82571880;
  --color-diff-added-row-bg:      #1b362580;
  --color-diff-removed-row-border: #78303060;
  --color-diff-moved-row-border:   #a67a1d60;
  --color-diff-added-row-border:   #255c3960;
  --color-diff-inactive:          rgba(255, 255, 255, 0.08);

  /* ---- Status colors (keep functional) ---- */
  --color-error-border:       #78303090;
  --color-error-bg:           #5f252580;
  --color-error-bg-active:    #78303080;
  --color-error-bg-hover:     #78303080;
  --color-error-text:         #fef2f2;
  --color-success-border:     #1f6e3c90;
  --color-success-bg:         #1d462c80;
  --color-success-text:       #aef0c2;
  --color-warning-border:     #a67a1d90;
  --color-warning-bg:         #64482180;
  --color-warning-text:       #fff388;
  --color-info-border:        #2e50b090;
  --color-info-bg:            #2a396b80;
  --color-info-text:          rgba(255, 255, 255, 0.80);

  /* ---- Checkerboard ---- */
  --checkerboard-color-1: #1a1a1a;
  --checkerboard-color-2: #0f0f0f;

  /* ---- Font ---- */
  --fonts-regular: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonts-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ---- Console ---- */
  --color-console-fg:           rgba(255, 255, 255, 0.90);
  --color-console-fg-subtle:    rgba(255, 255, 255, 0.50);
  --color-console-bg:           #0d0d0d;
  --color-console-border:       rgba(255, 255, 255, 0.10);
  --color-console-hover-bg:     rgba(255, 255, 255, 0.06);
  --color-console-active-bg:    rgba(255, 255, 255, 0.10);
  --color-console-menu-bg:      rgba(255, 255, 255, 0.06);
  --color-console-menu-border:  rgba(255, 255, 255, 0.12);

  accent-color: var(--color-accent);
  color-scheme: dark;
}

/* ============================================================
   BACKGROUND -- granular dark gradient (matching Keycloak)
   ============================================================ */

body {
  background:
    radial-gradient(ellipse 120% 80% at 20% 10%, #1a1a1a 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 80% 20%, #141414 0%, transparent 50%),
    radial-gradient(ellipse 80% 90% at 50% 80%, #111111 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 10% 60%, #181818 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 90% 70%, #0f0f0f 0%, transparent 50%),
    linear-gradient(145deg, #0a0a0a 0%, #121212 25%, #0d0d0d 50%, #151515 75%, #0a0a0a 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--fonts-regular) !important;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above noise */
body > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   GLASSMORPHISM -- cards, segments, panels
   ============================================================ */

.ui.segment,
.ui.segments .segment,
.ui.attached.segment,
.ui.attached.header,
.repository .repo-header,
.ui.card,
.ui.cards > .card,
.ui.menu:not(.secondary):not(.pointing):not(.tabular),
#navbar,
.page-footer {
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.ui.segment,
.ui.segments,
.ui.segments .segment {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.ui.attached.segment {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.attached.header {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */

#navbar {
  background: rgba(6, 6, 6, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}

#navbar .item {
  color: rgba(255, 255, 255, 0.75) !important;
}

#navbar .item:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

#navbar .item.active {
  color: #ffffff !important;
}

/* ============================================================
   BUTTONS -- white primary (black text), glass secondary
   ============================================================ */

.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: #e0e0e0 !important;
  color: #000000 !important;
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background-color: #cccccc !important;
  transform: scale(0.99);
}

/* Basic/secondary buttons */
.ui.basic.button,
.ui.button {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ui.basic.button:hover,
.ui.button:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

/* Restore primary override after generic button rules */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Negative / danger buttons */
.ui.red.button,
.ui.negative.button,
.ui.basic.red.button {
  background-color: #b91c1c !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}

.ui.red.button:hover,
.ui.negative.button:hover,
.ui.basic.red.button:hover {
  background-color: #a71919 !important;
}

/* Green button */
.ui.green.button,
.ui.positive.button {
  background-color: #15803d !important;
  color: #ffffff !important;
  border-color: #15803d !important;
}

/* ============================================================
   INPUTS -- glassmorphism
   ============================================================ */

.ui.input input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.form select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
.ui.search .prompt {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ui.input input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
textarea:focus,
input:focus {
  border-color: rgba(255, 255, 255, 0.30) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

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

/* ============================================================
   DROPDOWN / MENU
   ============================================================ */

.ui.dropdown .menu,
.ui.dropdown .menu .item,
.tippy-box[data-theme~="menu"],
.tippy-box .tippy-content .item {
  background: rgba(15, 15, 15, 0.95) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.dropdown .menu {
  backdrop-filter: blur(24px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .active.item {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   TABLES
   ============================================================ */

.ui.table {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.ui.table thead th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.ui.table tr:hover td {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ============================================================
   REPOSITORY FILE LIST / CODE VIEW
   ============================================================ */

.repo-file-table .repo-file-cell {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Code blocks */
.CodeMirror,
.highlight,
code,
pre {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Line numbers */
.lines-num span,
.lines-code .code-inner {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   REPO HEADER
   ============================================================ */

.repository .repo-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   TABS
   ============================================================ */

.ui.secondary.pointing.menu {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.ui.secondary.pointing.menu .active.item {
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.ui.secondary.pointing.menu .item {
  color: rgba(255, 255, 255, 0.60) !important;
}

.ui.secondary.pointing.menu .item:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   LABELS / BADGES
   ============================================================ */

.ui.label {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.ui.primary.label,
.ui.primary.labels .label {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.page-footer {
  background: rgba(5, 5, 5, 0.80) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
  color: rgba(255, 255, 255, 0.80);
}

a:hover {
  color: #ffffff;
}

/* ============================================================
   EXPLORE PAGE (landing page)
   ============================================================ */

.explore.repositories .ui.repository.list .item {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ============================================================
   MODAL / POPUP
   ============================================================ */

.ui.modal,
.ui.modal > .header,
.ui.modal > .content,
.ui.modal > .actions {
  background: rgba(15, 15, 15, 0.95) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
}

.ui.modal {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
}

.ui.modal > .header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.ui.modal > .actions {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.20);
}

/* ============================================================
   SELECTION
   ============================================================ */

::selection {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* ============================================================
   MISC OVERRIDES
   ============================================================ */

/* Dividers */
.ui.divider {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Message / alert */
.ui.message {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
}

/* Popup */
.ui.popup {
  background: rgba(15, 15, 15, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.ui.popup::before {
  background: rgba(15, 15, 15, 0.95) !important;
}

/* Issue/PR list */
.flex-item {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Comment timeline */
.timeline-item .comment .content {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.timeline-item .comment .content .header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Prevent double background on dark items */
.markup code,
.markup pre {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Red notification badge -- keep visible */
.ui.red.label.notification_count {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

/* Pagination */
.ui.pagination.menu .item {
  color: rgba(255, 255, 255, 0.70) !important;
}

.ui.pagination.menu .active.item {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Empty states */
.empty-placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}

/* Dark mode emoji fix from original theme */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label=copyright],
.emoji[aria-label=registered],
.emoji[aria-label="trade mark"],
.emoji[aria-label=multiply],
.emoji[aria-label=plus],
.emoji[aria-label=minus],
.emoji[aria-label=divide],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}

/* Light/dark mode image toggle */
.markup [src$="#gh-light-mode-only"],
.markup [src$="#light-mode-only"],
.markup [href$="#gh-light-mode-only"],
.markup [href$="#light-mode-only"] {
  display: none;
}
.markup [src$="#gh-dark-mode-only"],
.markup [src$="#dark-mode-only"],
.markup [href$="#gh-dark-mode-only"],
.markup [href$="#dark-mode-only"] {
  display: unset;
}