/* Shared palette. See docs/dark-mode-design-rules.md before adding surfaces. */
:root {
  --bb-bg: #141414;
  --bb-surface: #1c1c1c;
  --bb-raised: #252525;
  --bb-hover: #303030;
  --bb-border: #3c3c3c;
  --bb-text: #e6e6e6;
  --bb-text-secondary: #cccccc;
  --bb-text-muted: #ababab;
  --bb-focus: #bdbdbd;
}
html.dark, body.dark { color-scheme: dark; }
:is(html.dark, body.dark) body,
:is(html.dark, body.dark) :is(.beebee-theme-wrapper, #body-content, #body-content-swup-wrap, .coolbar),
body.dark {
  background-color: var(--bb-bg) !important;
  color: var(--bb-text);
  --beebeework-site-bg: var(--bb-bg);
}
:is(html.dark, body.dark) :is(.aixzd-page, .aixzd-content-panel) { color: var(--bb-text) !important; }
:is(html.dark, body.dark) :is(.bg-white, .bg-neutral-950, .bg-neutral-900) { background-color: var(--bb-surface) !important; }
:is(html.dark, body.dark) :is(.bg-neutral-100, .bg-neutral-200, .bg-neutral-800) { background-color: var(--bb-raised) !important; }
:is(html.dark, body.dark) :is(.text-black, .text-neutral-900, .text-neutral-800, .text-neutral-700, .text-white) { color: var(--bb-text) !important; }
:is(html.dark, body.dark) :is(.text-neutral-400, .text-neutral-500, .text-neutral-600) { color: var(--bb-text-muted) !important; }
:is(html.dark, body.dark) :is(.aixzd-author-card, .aixzd-feature-card, .aixzd-article-card, .ainew-event-card, .aixzd-quicklook) {
  background-color: var(--bb-surface) !important;
  color: var(--bb-text);
  border-color: var(--bb-border);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
:is(html.dark, body.dark) .aixzd-author-card:hover { background: var(--bb-raised) !important; }
:is(html.dark, body.dark) :is(.aixzd-quicklook h4, .ql-caption strong, .ql-fit, .ql-steps button.active) { color: var(--bb-text); }
:is(html.dark, body.dark) :is(.ql-eyebrow, .ql-type, .ql-caption p, .ql-time, .ql-foot, .ql-foot a, .ql-steps button) { color: var(--bb-text-muted); }
:is(html.dark, body.dark) :is(.ql-player, .ql-player button, .ql-steps button) { border-color: var(--bb-border); }
:is(html.dark, body.dark) .ql-player button { color: var(--bb-text-secondary); }
:is(html.dark, body.dark) .ql-steps button.active { border-color: var(--bb-focus); }
:is(html.dark, body.dark) .ql-media-error { background: var(--bb-raised); color: var(--bb-text-muted); }
/* Submission forms previously had no dark counterpart. */
:is(html.dark, body.dark) :is(.ai3d-work-submit-card, .ai3d-work-submit-login) { background: var(--bb-surface); border-color: var(--bb-border); color: var(--bb-text); box-shadow: none; }
:is(html.dark, body.dark) :is(.ai3d-work-submit-card-head span, .ai3d-work-submit-field > span:not(.ai3d-work-submit-select)) { color: var(--bb-text); }
:is(html.dark, body.dark) :is(.ai3d-work-submit-card-head small, .ai3d-work-submit-field small, .ai3d-work-submit-drop p) { color: var(--bb-text-muted); }
:is(html.dark, body.dark) :is(.ai3d-work-submit-field > input, .ai3d-work-submit-field > textarea, .ai3d-work-submit-field > select, .ai3d-work-submit-select select, .ai3d-work-submit-drop) { background: var(--bb-raised); color: var(--bb-text); border-color: var(--bb-border); }
:is(html.dark, body.dark) .ai3d-work-submit-select::after { border-color: var(--bb-text-muted); }
:is(html.dark, body.dark) :is(input, textarea)::placeholder { color: var(--bb-text-muted); opacity: 1; }
/* Interactive focus uses existing surface/text states, never an extra outer frame. */
/* Independent editorial pages inherit the same palette. */
html.dark .podcast-body { --pc-bg:var(--bb-bg); --pc-card:var(--bb-surface); --pc-ink:var(--bb-text); --pc-muted:var(--bb-text-muted); --pc-line:var(--bb-border); }
html.dark .monthly-body { --paper:var(--bb-bg); --ink:var(--bb-text); --muted:var(--bb-text-muted); --line:var(--bb-border); --accent:var(--bb-text-secondary); }
html.dark :is(.monthly-cover, .monthly-card-cover, .monthly-method, .monthly-report-card, .monthly-image-placeholder) { background:var(--bb-surface); color:var(--bb-text); border-color:var(--bb-border); }
html.dark :is(.monthly-story-body>p, .monthly-group-title, .monthly-story aside b, .monthly-cover-sub) { color:var(--bb-text-secondary); }
html.dark :is(.monthly-cover .monthly-eyebrow, .monthly-cover-meta, .monthly-art-caption, .monthly-group-title span, .monthly-image-placeholder small, .monthly-image-placeholder>span) { color:var(--bb-text-muted); }
html.dark .monthly-story-kicker span { background:var(--bb-raised); color:var(--bb-text-secondary); }
html.dark .monthly-body .monthly-button { background:var(--bb-raised); color:var(--bb-text); border-color:var(--bb-border); }
html.dark :is(.monthly-orbit, .monthly-story aside) { border-color:var(--bb-border); }
html.dark :is(.monthly-big-number, .monthly-story-number) { color:var(--bb-text-secondary); }
html.dark :is(.podcast-card-image, .podcast-feature-cover) { background:var(--bb-raised); }
html.dark .podcast-card-image>span { background:var(--bb-surface); color:var(--bb-text); }
:is(html.dark, body.dark) :is(.aixzd-compact-card, .low-muted-btn, .header_bg, #mobile-search-overlay) { background-color:var(--bb-surface) !important; color:var(--bb-text); border-color:var(--bb-border); }
:is(html.dark, body.dark) :is(.aixzd-compact-card:hover, .low-muted-btn:hover) { background-color:var(--bb-hover) !important; }
:is(html.dark, body.dark) :is(.aixzd-homeboard, .ainew-tl2-right, .ainew-tl2-more-btn, .ainew-hf3-col, .ainew-monthly-side-card) { background:var(--bb-surface) !important; color:var(--bb-text); border-color:var(--bb-border); }
:is(html.dark, body.dark) :is(.aixzd-homeboard-desc, .ainew-tl2-desc, .ainew-hf3-empty) { color:var(--bb-text-muted) !important; }
:is(html.dark, body.dark) :is(.ainew-event-card-text, .ainew-event-text-poster, .ainew-monthly-issue-number) { background:var(--bb-raised) !important; color:var(--bb-text); }
:is(html.dark, body.dark) .ainew-event-poster-label { color:var(--bb-text-muted); }
html.dark body .aixzd-card > .low-muted-btn.aixzd-compact-card,
body.dark .aixzd-card > .low-muted-btn.aixzd-compact-card { background:var(--bb-surface) !important; color:var(--bb-text); }
html.dark body .aixzd-card > .low-muted-btn.aixzd-compact-card:hover,
body.dark .aixzd-card > .low-muted-btn.aixzd-compact-card:hover { background:var(--bb-hover) !important; }
html.dark body :is(.aixzd-section-tab, .aixzd-section-tab.is-active) { background:var(--bb-raised) !important; color:var(--bb-text) !important; border-color:var(--bb-border); }

html.dark body .aixzd-author-filters a { background:var(--bb-surface) !important; color:var(--bb-text-secondary) !important; border-color:var(--bb-border) !important; }
html.dark body .aixzd-author-filters a[aria-current="page"] { background:var(--bb-hover) !important; color:var(--bb-text) !important; }
html.dark body .aixzd-author-modes { background:var(--bb-surface); border-color:var(--bb-border); }
html.dark body .aixzd-author-mode-thumb { background:var(--bb-hover); }
html.dark body .aixzd-author-filters .aixzd-author-modes a { background:transparent !important; }
html.dark :is(.ainew-event-group-title, .ainew-event-col-title, .ainew-hscroll-btn) { color:var(--bb-text-secondary); }
html.dark .ainew-hscroll-btn { background:var(--bb-raised); border-color:var(--bb-border); }

/* Match light mode's surface ownership: wrappers stay transparent.
 * Compact card backgrounds belong to the existing rounded inner button. */
:is(html.dark, body.dark) :is(.aixzd-homeboard-panel, .aixzd-homeboard-head, .aixzd-card) {
  background: transparent !important;
  box-shadow: none;
}
:is(html.dark, body.dark) [data-aixzd-nav-view="compact"] .aixzd-feature-card {
  background: transparent !important;
  box-shadow: none;
}
:is(html.dark, body.dark) :is(.aixzd-article-title, .aixzd-author-title, .aixzd-author-name) {
  color: var(--bb-text) !important;
}
:is(html.dark, body.dark) :is(.aixzd-article-link:hover .aixzd-article-title, .aixzd-article-link:focus-visible .aixzd-article-title) {
  color: var(--bb-text) !important;
}

:is(html.dark, body.dark) :is(.aixzd-article-meta, .aixzd-author-meta, .aixzd-article-desc, .aixzd-author-desc) {
  color: var(--bb-text-muted);
}

/* Category tabs: outlined by default, soft white with dark ink when selected. */
:is(html.dark, body.dark) :is(.aixzd-filter, .aixzd-filter-btn, .aixzd-section-tab, .border-accent-btn, .border-accent-btn-active),
html.dark body .aixzd-author-filters > a {
  background: transparent !important;
  background-image: none !important;
  color: var(--bb-text-secondary) !important;
  border: 1px solid #575757 !important;
  box-shadow: none !important;
}
:is(html.dark, body.dark) :is(.aixzd-filter:hover, .aixzd-filter-btn:hover, .aixzd-section-tab:hover, .border-accent-btn:hover, .border-accent-btn-active:hover),
html.dark body .aixzd-author-filters > a:hover {
  background: transparent !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-text-muted) !important;
}
html.dark body :is(.aixzd-filter.is-active, .aixzd-filter-btn.active, .aixzd-filter-btn.is-active, .aixzd-section-tab.is-active, .border-accent-btn-active),
body.dark :is(.aixzd-filter.is-active, .aixzd-filter-btn.active, .aixzd-filter-btn.is-active, .aixzd-section-tab.is-active, .border-accent-btn-active),
html.dark body .aixzd-author-filters > a[aria-current="page"],
body.dark .aixzd-author-filters > a[aria-current="page"] {
  background: var(--bb-text) !important;
  color: var(--bb-bg) !important;
  border-color: var(--bb-text) !important;
}
:is(html.dark, body.dark) .aixzd-feature-cover { background: var(--bb-raised); }
:is(html.dark, body.dark) .aixzd-feature-badge { background: rgb(37 37 37 / 90%); color: var(--bb-text); }

/* Product image icons use neutral dark backing; action buttons have separate rules. */
:root { --bb-icon-bg: #202020; --bb-icon-ink: #e6e6e6; }
html.dark, body.dark { --bb-icon-bg: var(--bb-bg); --bb-icon-ink: var(--bb-text); }
body :is(.aixzd-compact-card-heading > .size-8, .aixzd-card > .low-muted-btn > .size-8, .aixzd-preview-logo),
body .aixzd-home-shell .aixzd-homeboards .aixzd-homeboard-icon,
body .aixzd-homeboards .aixzd-homeboard-icon {
  background-color: var(--bb-icon-bg) !important;
  color: var(--bb-icon-ink) !important;
}
html.dark body .aixzd-home-shell .aixzd-homeboards .aixzd-homeboard-icon,
html.dark body .aixzd-homeboards .aixzd-homeboard-icon,
body.dark .aixzd-home-shell .aixzd-homeboards .aixzd-homeboard-icon,
body.dark .aixzd-homeboards .aixzd-homeboard-icon {
  background-color: var(--bb-icon-bg) !important;
}
:is(html.dark, body.dark) .aixzd-compact-card-heading > .size-8 > i {
  color: var(--bb-icon-ink) !important;
}

/* AI news: invert text and controls without replacing poster images. */
:is(html.dark, body.dark) :is(.ainew-hf3-title, .ainew-hf3-col-name, .ainew-event-row-head, .ainew-rss-icon) {
  color: var(--bb-text) !important;
}
:is(html.dark, body.dark) :is(.ainew-hf3-col-more, .ainew-hf3-hint, .ainew-hf3-num, .ainew-hf3-heat) {
  color: var(--bb-text-muted) !important;
}
:is(html.dark, body.dark) :is(.ainew-hf3-item, .ainew-hf3-col-head, .ainew-hf3-empty) {
  border-color: var(--bb-border);
}
:is(html.dark, body.dark) .ainew-hf3-item:hover { background: var(--bb-hover); }
:is(html.dark, body.dark) .ainew-hf3-col-more:hover { color: var(--bb-text) !important; }
:is(html.dark, body.dark) .ainew-rss-btn--primary {
  background: var(--bb-text);
  color: var(--bb-bg);
  border-color: var(--bb-text);
}
:is(html.dark, body.dark) .ainew-rss-btn--primary:hover {
  background: var(--bb-text-secondary);
  color: var(--bb-bg);
  border-color: var(--bb-text-secondary);
}
.ainew-event-row-icon { display: inline-flex; align-items: center; }
.ainew-event-row-icon svg { width: 16px; height: 16px; }
/* Restore the original prompt layout/type; lift the old grey background slightly. */
:root { --bb-prompt-bg:#f4f4f4; }
:is(html.dark,body.dark) { --bb-prompt-bg:color-mix(in srgb, var(--bb-hover) 60%, var(--bb-border)); }
body .ai3d-work-prompt-box .ai3d-work-prompt-text { background-color:var(--bb-prompt-bg)!important; }
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-prompt-text { color:var(--bb-text-secondary); }
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-prompt-head { border-color:var(--bb-border); }
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-prompt-copy-btn {color:var(--bb-text-secondary);box-shadow:inset 0 0 0 1px var(--bb-border);}
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-prompt-copy-btn:hover {background:var(--bb-hover);color:var(--bb-text);}
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-same-btn {background:var(--bb-text);color:var(--bb-bg)!important;}
:is(html.dark,body.dark) .ai3d-work-prompt-box .ai3d-work-same-btn:hover {background:var(--bb-text-secondary);}
@media(max-width:767px) {
 body .ai3d-work-prompt-box .ai3d-work-prompt-head {flex-wrap:wrap;gap:8px;}
 body .ai3d-work-prompt-box .ai3d-work-prompt-actions {flex-basis:100%;}
 body .ai3d-work-prompt-box :is(.ai3d-work-prompt-copy-btn,.ai3d-work-same-btn) {min-height:36px;}
}
/* Keep the lightbox controls over the main image, before the desktop thumb rail. */
@media (min-width:900px) {
  .fancybox__container:has(.aixzd-fancybox-thumbrail, .fancybox__thumbs:not(.is-masked)) .fancybox__toolbar {
    position:absolute;
    top:0;
    left:22px;
    right:calc(var(--aixzd-fancybox-thumbs-width, 300px) + var(--aixzd-fancybox-gap, 18px) + 18px);
    width:auto;
    max-width:none;
  }
}
/* Left navigation tooltips only; icon buttons retain their original theme styles. */
:root { --bb-sidebar-hover-bg:var(--bb-raised); --bb-sidebar-hover-ink:var(--bb-text); }
body .aixzd-sidebar-floating-tip,
body :is(.aixzd-context-sidebar,.aixzd-home-nav-sidebar) :is(.aixzd-sidebar-nav-tip,.more-tip) {
  background:var(--bb-sidebar-hover-bg)!important;
  color:var(--bb-sidebar-hover-ink)!important;
  background-image:none!important;
  box-shadow:0 2px 4px rgb(0 0 0 / 10%)!important;
  filter:none!important;
  backdrop-filter:none!important;
}

/* Open-source cards identify their origin in place of a price. */
.source-item-card .aixzd-source-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  max-width: 100%;
  color: #525252;
  font-size: 12px;
  line-height: 1.5;
}
.source-item-card .aixzd-source-origin > i {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dark .source-item-card .aixzd-source-origin {
  color: var(--bb-text-secondary);
}

/* Only the targeted card action is highlighted in dark mode. */
:is(html.dark, body.dark) .aixzd-nav-actions :is(a, button) {
  background: var(--bb-raised) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
:is(html.dark, body.dark) .aixzd-nav-actions[data-aixzd-active="qr"] > button[data-aixzd-mobile-url],
:is(html.dark, body.dark) .aixzd-nav-actions[data-aixzd-active="detail"] > .aixzd-nav-detail,
:is(html.dark, body.dark) .aixzd-nav-actions[data-aixzd-active="direct"] > .aixzd-nav-direct,
:is(html.dark, body.dark) .aixzd-nav-actions:not([data-aixzd-active]) > :is(a, button):hover,
:is(html.dark, body.dark) .aixzd-nav-actions > :is(a, button):focus-visible,
:is(html.dark, body.dark) :is(.aixzd-card, .aixzd-homeboard-item):hover .aixzd-nav-actions:not([data-aixzd-active]):not(:has(:hover, :focus-visible)) > .aixzd-nav-direct {
  background: var(--bb-text) !important;
  color: var(--bb-bg) !important;
  border-color: var(--bb-text) !important;
}
/* Neutral charcoal overlay: no slate/blue tint. */
.aixzd-preview-dialog::backdrop {
  background: rgb(20 20 20 / 60%);
}
.aixzd-preview-dialog { box-shadow: 0 28px 80px rgb(0 0 0 / 22%); }

/* Modal expand control: bare icon, no circular surface in either theme. */
.aixzd-preview-dialog .aixzd-preview-expand,
.aixzd-preview-dialog .aixzd-preview-expand:hover {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
.aixzd-preview-dialog::backdrop { background: rgb(20 20 20 / 80%); }

/* Shared dark website button for modal and canonical product detail. */
:is(html.dark, body.dark) .aixzd-preview-dialog .aixzd-preview-header > :is(.aixzd-preview-official, .aixzd-preview-edit),
:is(html.dark, body.dark) .aixzd-preview-dialog .aixzd-preview-header > :is(.aixzd-preview-official, .aixzd-preview-edit):hover,
:is(html.dark, body.dark) .aixzd-product-detail .aixzd-preview-header > .aixzd-preview-official,
:is(html.dark, body.dark) .aixzd-product-detail .aixzd-preview-header > .aixzd-preview-official:hover {
  background: var(--bb-text);
  color: var(--bb-bg);
  border-color: var(--bb-text);
}

/* Logo bookmark hint: invert the panel, pointer and shortcut badge together. */
:is(html.dark, body.dark) [aria-labelledby="hs-dropdown-collquick"] > .dropdown-pop {
  background: var(--bb-text) !important;
  color: var(--bb-bg) !important;
  border-color: var(--bb-text) !important;
}
:is(html.dark, body.dark) [aria-labelledby="hs-dropdown-collquick"] > .dropdown-pop :is(p, span, strong, a) { color: inherit !important; }
:is(html.dark, body.dark) [aria-labelledby="hs-dropdown-collquick"] > .rotate-45 {
  background: var(--bb-text) !important;
  border-color: var(--bb-text) !important;
}
:is(html.dark, body.dark) [aria-labelledby="hs-dropdown-collquick"] :is(kbd, code) {
  background: var(--bb-bg) !important;
  color: var(--bb-text) !important;
  border-color: var(--bb-border) !important;
}
/* Work modal sidebar and its sticky comment footer share one dark surface. */
:is(html.dark, body.dark) .work-single-overlay :is(#contain-right, .pre-contain-right, .comments-box-bottom) {
  background-color: var(--bb-surface) !important;
  border-color: var(--bb-border) !important;
}
/* Toastify's padded outer wrapper must not form a dark frame. */
:is(html.dark, body.dark) .toastify {
  background: transparent !important;
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
}
:is(html.dark, body.dark) .toastify .toastify-inner {
  background: var(--bb-text) !important;
  color: var(--bb-bg) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dark body [aria-labelledby="hs-dropdown-collquick"] > .dropdown-pop,
body.dark [aria-labelledby="hs-dropdown-collquick"] > .dropdown-pop {
  color: var(--bb-bg) !important;
}
:is(html.dark, body.dark) .work-single-overlay .post-main-content-wrapper {
  background-color: var(--bb-surface) !important;
}

/* Scoped inline surface variables avoid changing global cascade layer order. */
html.dark, body.dark { --bb-logo-hint-ink: var(--bb-bg); --bb-work-modal-bg: var(--bb-surface); }

/* Article previous/next links are frameless; interaction uses a darker surface. */
html.dark body .single-prevnext > a,
body.dark .single-prevnext > a {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html.dark body .single-prevnext > a:hover,
html.dark body .single-prevnext > a:active,
body.dark .single-prevnext > a:hover,
body.dark .single-prevnext > a:active {
  background: var(--bb-bg) !important;
}

/* Dark text/search/select fields are frameless, including native focus rings.
 * Exclude checkbox/radio/range and action inputs: their shape conveys state. */
html.dark body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]), textarea, select, .muted-input, [role="combobox"]),
body.dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]), textarea, select, .muted-input, [role="combobox"]) {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
}
html.dark body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]), textarea, select, [role="combobox"]):focus,
body.dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]), textarea, select, [role="combobox"]):focus {
  background-color: var(--bb-hover) !important;
  color: var(--bb-text) !important;
  caret-color: var(--bb-text);
  color-scheme: dark;
}

/* Expand is a bare icon even after dialog autofocus or keyboard focus. */
html.dark body .aixzd-preview-dialog .aixzd-preview-expand,
body.dark .aixzd-preview-dialog .aixzd-preview-expand {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
html.dark body .aixzd-preview-dialog .aixzd-preview-expand:focus-visible svg,
body.dark .aixzd-preview-dialog .aixzd-preview-expand:focus-visible svg {
  stroke-width: 2.4;
}

/* Author/gallery segmented control: only the surrounding group has a frame. */
html.dark body .aixzd-author-filters .aixzd-author-modes a:not([aria-current="page"]),
body.dark .aixzd-author-filters .aixzd-author-modes a:not([aria-current="page"]) {
  border: 0 !important;
  box-shadow: none !important;
}
/* Dark pointer/keyboard focus must not add a white/grey outline or ring.
 * Do not change borders: existing component/group frames remain intact. */
html.dark body :is(a, button, input, textarea, select, summary, [tabindex], [role="button"], [role="tab"]):is(:focus, :focus-visible, :active),
body.dark :is(a, button, input, textarea, select, summary, [tabindex], [role="button"], [role="tab"]):is(:focus, :focus-visible, :active) {
  outline: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}