/* ==========================================================================
   The Butchers — phpBB 3.3 child style (parent: prosilver)
   Loads prosilver first, then restyles it with the website's palette and components.
   Palette and component styles are copied from the website's stylesheet.css.
   NOTE: prosilver sizes everything in em from a 10px body, so body font-size is left alone.
   ========================================================================== */
/* prosilver's own CSS files, loaded one by one (same pattern as other phpBB child styles) */
@import url("../../prosilver/theme/normalize.css");
@import url("../../prosilver/theme/base.css");
@import url("../../prosilver/theme/utilities.css");
@import url("../../prosilver/theme/common.css");
@import url("../../prosilver/theme/links.css");
@import url("../../prosilver/theme/content.css");
@import url("../../prosilver/theme/buttons.css");
@import url("../../prosilver/theme/cp.css");
@import url("../../prosilver/theme/forms.css");
@import url("../../prosilver/theme/icons.css");
@import url("../../prosilver/theme/colours.css");
@import url("../../prosilver/theme/responsive.css");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Inter:wght@400;600&display=swap");

/* ---- Palette: identical to the website's :root ---- */
:root{
  --bg:#121214;
  --panel:#1c1c20;
  --line:#33343a;
  --steel:#c9ccd3;
  --text:#e4e5e8;
  --muted:#8b8e97;
//  --accent1:#a3191f;
//  --accent2:#d12a31;
//  --accent-hover:#6d1014;
    --gold: #b9892b;
    --gold2: #e0b050;
    --gold3: #6d5610;
    --blood: #a3191f;
    --blood2: #d12a31;
    --blood3: #6d1014;
    --accent1: var(--gold);
    --accent2: var(--gold2);
    --accent-hover: var(--gold3);

  /* shades the website uses inline */
  --panel2:#17171a;   /* table headers, checklist rows */
  --raise:#222227;    /* row/button hover */
  --input:#0c0c0e;    /* inputs, code */
  --quote:#141417;    /* blockquotes */
  --body:#b9bbc2;     /* post body text */
  --link:#e07a7f;     /* links inside posts */
}

/* ---- Base ---- */
html{background:var(--bg)!important}
body{background:radial-gradient(1200px 500px at 50% -100px,#2a2a30,var(--bg)) no-repeat,var(--bg)!important;
  min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px;background:transparent!important;border:0!important;border-radius:0;box-shadow:none}
h1,h2{font-family:Cinzel,serif;font-weight:400;color:var(--steel)}
h2{padding-bottom:6px;border-bottom:2px solid var(--accent1)}
h3{color:var(--steel);border-bottom-color:var(--line)}
h4,h5{color:var(--steel)}
hr{border-color:var(--line)}
a{color:var(--steel)}
a:hover{color:var(--accent2);text-decoration:none}
a.forumtitle,a.topictitle,a.lastsubject{color:var(--text)}
a.forumtitle:hover,a.topictitle:hover,a.lastsubject:hover{color:var(--accent2)}
.copyright,.copyright a{color:var(--muted);font-size:.85rem}

/* ---- Site banner + nav (injected by the extension) ----
   Banner sits small on the left; the nav links stretch to fill the space to its right. */
.bt-site{display:flex;align-items:center;gap:24px;padding:18px 0 22px}
.bt-banner{flex:0 0 auto;padding:0;text-align:left}
.bt-banner img{display:block;max-width:100%;max-height:100px;height:auto;filter:drop-shadow(0 8px 12px #000a)}
.bt-nav{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:10px;margin:0}
.bt-nav a{flex:1 1 auto;padding:6px 18px;border:1px solid var(--line);border-radius:4px;text-align:center;
  background:linear-gradient(#26262b,#19191c);color:var(--steel);font:1.25rem Cinzel,serif;text-decoration:none;transition:.15s}
.bt-nav a:hover,.bt-nav a:focus-visible,.bt-nav a[aria-current]{
  border-color:var(--accent2);background:linear-gradient(var(--accent1),var(--accent-hover));color:#fff}
.bt-nav a:focus-visible{outline:none}
@media(max-width:700px){
  .bt-site{flex-direction:column;align-items:stretch;gap:14px}
  .bt-banner{text-align:center}
  .bt-nav a{flex:1 1 40%}
}

/* ---- Forum header bar ----
   The extension's banner + nav render INSIDE prosilver's .headerbar (that is where the event sits),
   so the bar itself is a plain transparent wrapper. Prosilver's logo/title block is hidden; search stays. */
.headerbar{background:transparent!important;background-image:none!important;border:0;border-radius:0;
  box-shadow:none;padding:0;margin-bottom:6px;color:var(--text)}
.headerbar .site-description,.headerbar #site-description{display:none}
.search-header{background:var(--input);border:1px solid var(--line);box-shadow:none}
.search-box .inputbox,.search-box .inputbox:hover,.search-box .inputbox:focus{background:transparent;border:0;color:var(--text);box-shadow:none;outline:none}
.search-box .button-search,.search-box .button-search-end{background:var(--panel2)!important;border-color:var(--line);color:var(--steel)}

/* ---- Navbar / breadcrumbs ---- */
.navbar{background:var(--panel)!important;border:1px solid var(--line);border-radius:4px}
.navbar ul.linklist,.navbar .linklist>li,.breadcrumbs .crumb a,ul.linklist a{color:var(--steel)}
.navbar a:hover,.breadcrumbs .crumb a:hover{color:var(--accent2)}
ul.navlinks{border-color:var(--line)}

/* ---- Forum / topic lists (same box + table treatment as the website) ---- */
.forabg,.forumbg{background:var(--panel)!important;background-image:none!important;padding:0;
  border:1px solid var(--line);border-top:3px solid var(--accent1);border-radius:4px}
ul.topiclist li.header{background:var(--panel2)}
ul.topiclist li.header dt,ul.topiclist li.header dd,ul.topiclist li.header a,
.forabg li.header dt a,.forumbg li.header dt a,.forabg li.header dd,.forumbg li.header dd{
  color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
ul.forums,ul.topiclist.forums{background:var(--panel)!important;background-image:none!important}
li.row{background:var(--panel);border-top-color:var(--line);border-bottom-color:var(--line)}
li.row:hover,li.row:hover dd,ul.topiclist dl:hover{background:var(--raise)}
li.row strong,li.row dd{color:var(--text)}
ul.topiclist dd{border-left-color:var(--line)}
li.row dd.lastpost,li.row dd.lastpost span{color:var(--muted)}

/* ---- Posts (mirrors the website's .post card) ---- */
.bg1,.bg2{background:var(--panel)!important}
.bg3{background:var(--panel2)!important}
.post{border:1px solid var(--line);border-left:4px solid var(--accent1);border-radius:4px;background:var(--panel)}
.postbody,.postbody .content,.content,.post .content{color:var(--body)}
.postbody h3,.postbody h3 a{color:var(--text)}
.postbody h3 a:hover{color:var(--accent2)}
.postbody .author{color:var(--muted)}
.postbody .content a,.postlink{color:var(--link)}
.postbody .content a:hover,.postlink:hover{color:#fff}
.postprofile,.postprofile dd,.postprofile dt{color:var(--muted)}
.postprofile{border-left-color:var(--line)}
.post .postbody h3{border-bottom:0}
.sig{border-top-color:var(--line);color:var(--muted)}
.back2top,.back2top a{color:var(--muted)}
.post:target .content,.post.focus .content{color:var(--text)}
.content img,.postbody img{max-width:100%;height:auto;border-radius:3px}

/* ---- Panels, quotes, code ---- */
.panel{background:var(--panel);color:var(--text);border:1px solid var(--line);border-top:3px solid var(--accent1);border-radius:4px}
.panel h3,.panel h2{color:var(--steel)}
blockquote,.content blockquote blockquote{background:var(--quote);border:0;border-left:3px solid var(--steel);border-radius:3px;color:var(--body)}
blockquote cite,.uncited{color:var(--muted);font-style:normal}
.codebox{background:var(--input);border:1px solid var(--line);border-radius:3px}
.codebox p{color:var(--muted);border-bottom-color:var(--line)}
.codebox code{color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace}
.attachbox,.attach-image{background:var(--panel);border-color:var(--line)}

/* ---- Forms & buttons (website .btn / input styles) ---- */
fieldset,fieldset dl,dl dt label{color:var(--muted)}
fieldset{border-color:var(--line)}
.inputbox,input.inputbox,textarea.inputbox,select,.fakebox{background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:4px}
.inputbox:hover,select:hover{border-color:var(--line)}
.inputbox:focus,select:focus,textarea:focus{border-color:var(--line);outline:2px solid var(--accent2);outline-offset:1px;box-shadow:none}
.button,a.button1,input.button1,input.button2{
  background:linear-gradient(var(--accent1),var(--accent-hover))!important;
  border:1px solid var(--accent2);border-radius:4px;color:#fff;text-shadow:none;box-shadow:none;font-family:Inter,sans-serif;font-weight:600}
.button:hover,a.button1:hover,input.button1:hover,input.button2:hover{filter:brightness(1.15);color:#fff;border-color:var(--accent2)}
.button .icon{color:#fff}
.button-secondary,input.button-secondary{background:var(--panel)!important;border:1px solid var(--line);color:var(--steel)}

/* ---- Pagination, dropdowns, tabs ---- */
.pagination li a{background:var(--panel);border-color:var(--line);color:var(--steel)}
.pagination li a:hover,.pagination li.active span{background:linear-gradient(var(--accent1),var(--accent-hover));border-color:var(--accent2);color:#fff}
.pagination li.ellipsis span{background:transparent;color:var(--muted)}
.dropdown-contents{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:0 4px 12px rgba(0,0,0,.6)}
.dropdown li,.dropdown li.separator{border-color:var(--line)}
.dropdown-contents a,.dropdown-extended ul li a{color:var(--steel)}
.dropdown-contents a:hover,.dropdown li:hover{background:var(--raise);color:#fff}
.dropdown .pointer{border-color:var(--line) transparent}
.dropdown .pointer-inner{border-color:var(--panel) transparent}
.tabs .tab>a,.minitabs .tab>a{background:linear-gradient(#26262b,#19191c);border-color:var(--line);color:var(--steel)}
.tabs .activetab>a,.minitabs .activetab>a,.tabs .tab>a:hover{background:linear-gradient(var(--accent1),var(--accent-hover));color:#fff;border-color:var(--accent2)}
#cp-menu .cp-main,#cp-menu .panel{background:var(--panel)}
.cp-menu a{color:var(--steel)}

/* ---- Tables (UCP / MCP / memberlist) ---- */
table.table1 thead th{background:var(--panel2);color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;border-bottom-color:var(--line)}
table.table1 tbody tr{background:var(--panel);border-color:var(--line)}
table.table1 tbody tr:hover,table.table1 tbody tr.hover{background:var(--raise)}
table.table1 td,table.table1 tbody th{color:var(--text);border-color:var(--line)}

/* ---- Notices, polls, misc ---- */
.rules{background:var(--panel);color:var(--text);border-color:var(--line)}
.rules a,.polls{color:var(--steel)}
.error,.warning{color:#f0a0a4}
.pm-unread,.row-unread{color:var(--text)}
.jumpbox,.stat-block{color:var(--muted)}
.copyright{padding-top:10px;border-top:1px solid var(--line);text-align:center}

/* ==========================================================================
   Text contrast
   prosilver hard-codes dark text (#000, #333, #536482 ...) on many elements, so inheriting from
   body is not enough. These rules set readable colors on the elements that carry text, using
   !important so they win over prosilver's more specific selectors. Colored usernames (inline
   styles on <a>/<span>), links, error text and icons are left alone.
   ========================================================================== */
.wrap p:not(.error):not(.warning),
.wrap dd,.wrap dt,.wrap li,.wrap td,.wrap th,.wrap label,.wrap legend,.wrap fieldset,
.wrap strong:not(.username-coloured),.wrap b,.wrap em,.wrap i.text,
.wrap .content,.wrap .postbody,.wrap .panel,.wrap .rules,.wrap .stat-block,.wrap .row{
  color:var(--text)!important}

.wrap h1,.wrap h2,.wrap h3,.wrap h4,.wrap h5{color:var(--steel)!important}
.wrap .postbody .content,.wrap .post .content{color:var(--body)!important}

/* Secondary text: muted instead of full brightness (placed after the rule above so it wins) */
.wrap th,
.wrap ul.topiclist li.header dt,.wrap ul.topiclist li.header dd,
.wrap li.row dd.lastpost,
.wrap .postprofile,.wrap .postprofile dd,.wrap .postprofile dt,
.wrap .postbody .author,.wrap .sig,
.wrap .copyright,.wrap .copyright p,.wrap .jumpbox,.wrap p.jumpbox-return{
  color:var(--muted)!important}

/* Form controls */
.wrap input[type=text],.wrap input[type=password],.wrap input[type=email],.wrap input[type=search],
.wrap input[type=number],.wrap input[type=url],.wrap textarea,.wrap select,.wrap select option,
.wrap .inputbox,.wrap .fakebox{
  background-color:var(--input);color:var(--text)!important}
.wrap ::placeholder{color:var(--muted);opacity:1}
::selection{background:var(--accent1);color:#fff}

/* ==========================================================================
   Buttons: remove prosilver's white text-shadow / glow (visible on hover and focus)
   ========================================================================== */
.wrap .button,.wrap .button:hover,.wrap .button:focus,.wrap .button:active,
.wrap .button *,.wrap .button:hover *,.wrap .button:focus *,
.wrap a.button1,.wrap a.button1:hover,.wrap a.button1:focus,
.wrap input.button1,.wrap input.button1:hover,.wrap input.button1:focus,
.wrap input.button2,.wrap input.button2:hover,.wrap input.button2:focus,
.wrap .button-secondary,.wrap .button-secondary:hover,.wrap .button-secondary:focus,
.wrap .button-search,.wrap .button-search:hover,.wrap .button-search-end,.wrap .button-search-end:hover,
.wrap .pagination li a,.wrap .pagination li a:hover{
  text-shadow:none!important}
.wrap .button:hover,.wrap .button:focus,.wrap .button:active,
.wrap a.button1:hover,.wrap input.button1:hover,.wrap input.button2:hover{
  box-shadow:none!important;color:#fff!important}
.wrap .button:hover .icon,.wrap .button:focus .icon{color:#fff!important}
.wrap .button-secondary:hover,.wrap .button-secondary:focus{color:#fff!important;border-color:var(--accent2)}

/* ==========================================================================
   Icons
   1) Forum / topic status icons: prosilver uses blue/yellow GIF backgrounds that cannot be recolored
      with CSS, so they are replaced with Font Awesome glyphs (phpBB already loads Font Awesome).
      Read = muted gray, unread/new = red, locked = muted lock, sticky/announce/global = steel.
   2) Inline Font Awesome icons (.icon-blue, .icon-black ...) are remapped to the site palette.
   ========================================================================== */

/* -- 1) status icons -- */
.wrap li.row dl.row-item{background-image:none!important;position:relative}
.wrap li.row dl.row-item::before{
  content:"\f0e5";                                  /* default: comment-o */
  position:absolute;left:12px;top:50%;margin-top:-11px;width:24px;text-align:center;
  font:normal normal normal 22px/1 FontAwesome;-webkit-font-smoothing:antialiased;
  color:var(--muted)}

/* Forums */
.wrap li.row dl.forum_read::before{content:"\f0e6"}                                   /* comments-o */
.wrap li.row dl.forum_unread::before{content:"\f086";color:var(--accent2)}             /* comments */
.wrap li.row dl.forum_read_locked::before{content:"\f023"}                            /* lock */
.wrap li.row dl.forum_unread_locked::before{content:"\f023";color:var(--accent2)}
.wrap li.row dl.forum_read_subforum::before{content:"\f114"}                          /* folder-o */
.wrap li.row dl.forum_unread_subforum::before{content:"\f07b";color:var(--accent2)}    /* folder */
.wrap li.row dl.forum_link::before{content:"\f0c1"}                                   /* link */

/* Topics */
.wrap li.row dl.topic_read::before{content:"\f0e5"}                                   /* comment-o */
.wrap li.row dl.topic_unread::before{content:"\f075";color:var(--accent2)}             /* comment */
.wrap li.row dl.topic_read_hot::before{content:"\f06d"}                               /* fire */
.wrap li.row dl.topic_unread_hot::before{content:"\f06d";color:var(--accent2)}
.wrap li.row dl.topic_read_locked::before,.wrap li.row dl.topic_read_mine_locked::before{content:"\f023"}
.wrap li.row dl.topic_unread_locked::before,.wrap li.row dl.topic_unread_mine_locked::before{content:"\f023";color:var(--accent2)}
.wrap li.row dl.topic_moved::before{content:"\f064"}                                  /* share */
.wrap li.row dl.topic_deleted::before{content:"\f1f8"}                                /* trash */
.wrap li.row dl.topic_unapproved::before,.wrap li.row dl.post_unapproved::before{content:"\f071";color:#e0b050}  /* warning */

/* Sticky / announcement / global topics */
.wrap li.row dl.sticky_read::before,.wrap li.row dl.sticky_read_locked::before,.wrap li.row dl.sticky_read_mine::before{content:"\f08d";color:var(--steel)}   /* thumb-tack */
.wrap li.row dl.sticky_unread::before,.wrap li.row dl.sticky_unread_locked::before,.wrap li.row dl.sticky_unread_mine::before{content:"\f08d";color:var(--accent2)}
.wrap li.row dl.announce_read::before,.wrap li.row dl.announce_read_locked::before,.wrap li.row dl.announce_read_mine::before{content:"\f0a1";color:var(--steel)} /* bullhorn */
.wrap li.row dl.announce_unread::before,.wrap li.row dl.announce_unread_locked::before,.wrap li.row dl.announce_unread_mine::before{content:"\f0a1";color:var(--accent2)}
.wrap li.row dl.global_read::before,.wrap li.row dl.global_read_locked::before{content:"\f0ac";color:var(--steel)}   /* globe */
.wrap li.row dl.global_unread::before,.wrap li.row dl.global_unread_locked::before{content:"\f0ac";color:var(--accent2)}

/* Private messages */
.wrap li.row dl.pm_read::before{content:"\f003"}                                      /* envelope-o */
.wrap li.row dl.pm_unread::before{content:"\f0e0";color:var(--accent2)}                /* envelope */

/* -- 2) inline icons -- */
.wrap .icon.icon-blue,.wrap a:hover .icon.icon-blue{color:var(--accent2)!important}
.wrap .icon.icon-red,.wrap a:hover .icon.icon-red{color:var(--accent2)!important}
.wrap .icon.icon-black,.wrap a:hover .icon.icon-black{color:var(--steel)!important}
.wrap .icon.icon-gray,.wrap .icon.icon-lightgray,.wrap a:hover .icon.icon-gray{color:var(--muted)!important}
.wrap .icon.icon-green,.wrap a:hover .icon.icon-green{color:#7fc291!important}
.wrap .icon.icon-orange,.wrap a:hover .icon.icon-orange{color:#e0b050!important}
.wrap .icon.icon-white{color:#fff!important}
.wrap .button .icon{color:#fff!important}      /* icons inside the red buttons stay white */

/* ==========================================================================
   Vertically center forum / topic titles in their rows (desktop only)
   prosilver floats the title and the stat columns and pads each column by 999px so the column
   borders reach the bottom of the row. Here each row becomes a flex row instead: the title cell
   centers its content, the stat cells stretch to full height (so the column dividers still span
   the row) and center their text. Under 700px prosilver's own mobile layout is left untouched.
   ========================================================================== */
@media (min-width:701px){
  .wrap ul.topiclist li.row dl.row-item,
  .wrap ul.topiclist li.header dl.row-item{display:flex;align-items:stretch}
  .wrap ul.topiclist li.row dl.row-item{min-height:48px}   /* keeps rows from collapsing now that the 999px column padding is gone */

  .wrap ul.topiclist li dl.row-item dt{
    display:flex;align-items:center;float:none!important;flex:1 1 auto;
    width:auto!important;min-width:0;margin-right:0!important}
  .wrap ul.topiclist li dl.row-item dt .list-inner{flex:1 1 auto;min-width:0;margin-right:0!important}

  .wrap ul.topiclist li dl.row-item dd{
    display:flex;flex-direction:column;justify-content:center;float:none!important;flex:0 0 auto;
    margin-bottom:0!important;padding-top:4px!important;padding-bottom:4px!important}
}

/* ==========================================================================
   Dropdowns, notifications, User/Private-message control panel
   prosilver paints these with light backgrounds and blue links. Backgrounds, borders and link
   colors are forced to the dark palette (!important: prosilver's selectors are more specific).
   ========================================================================== */

/* -- Dropdowns: Quick links, user menu, notifications, jumpbox, "Display" selects -- */
.wrap .dropdown-contents,
.wrap .dropdown-extended .dropdown-contents,
.wrap .dropdown-extended .header,
.wrap .dropdown-extended .footer,
.wrap .dropdown-select{
  background:var(--panel)!important;background-image:none!important;
  border-color:var(--line)!important;color:var(--text)!important}
.wrap .dropdown-contents li,
.wrap .dropdown-extended ul li,
.wrap .dropdown-extended .notification_list li{
  background:transparent!important;border-color:var(--line)!important;color:var(--text)!important}
.wrap .dropdown-extended ul li.bg2,
.wrap .dropdown-extended ul li:hover{background:var(--raise)!important}      /* unread / hovered notification */
.wrap .dropdown-contents li.separator,.wrap .dropdown-contents hr{border-color:var(--line)!important}
.wrap .dropdown-contents a,
.wrap .dropdown-extended a,
.wrap .dropdown-contents li a{color:var(--steel)!important}
.wrap .dropdown-contents a:hover,
.wrap .dropdown-contents li:hover > a,
.wrap .dropdown-extended a:hover{background:var(--raise)!important;color:#fff!important}
.wrap .dropdown-extended .header,.wrap .dropdown-extended .footer a{color:var(--muted)!important}
.wrap .dropdown .pointer{border-color:var(--line) transparent!important}
.wrap .dropdown .pointer-inner{border-color:var(--panel) transparent!important}
.wrap .dropdown-contents .username-coloured,.wrap .dropdown-contents .username{background:transparent}

/* -- UCP / PM / MCP side navigation -- */
.wrap #cp-menu,.wrap #navigation,.wrap #navigation ul{background:transparent!important}
.wrap #navigation a,.wrap .cp-menu a{
  background:var(--panel2)!important;background-image:none!important;
  border-color:var(--line)!important;color:var(--steel)!important}
.wrap #navigation a:hover,.wrap .cp-menu a:hover{background:var(--raise)!important;color:#fff!important}
.wrap #navigation li.active-subsection a,.wrap #active-subsection a,.wrap #navigation .active-tab a{
  background:linear-gradient(var(--accent1),var(--accent-hover))!important;border-color:var(--accent2)!important;color:#fff!important}
.wrap .cp-menu h3,.wrap #navigation h3{color:var(--steel)!important}

/* -- Panels and sub-sections used all over UCP / PM / posting -- */
.wrap .panel,.wrap .cp-main .panel,.wrap .ucp-main .panel,.wrap .panel-container .panel,
.wrap .panel .inner,.wrap .cp-main .inner,.wrap .postform .panel,
.wrap fieldset.fields1,.wrap fieldset.fields2,.wrap .sub-panel{
  background:var(--panel)!important;background-image:none!important;
  border-color:var(--line)!important;color:var(--text)!important}
.wrap .cp-main .panel .content,.wrap .panel .content{background:transparent!important;color:var(--body)!important}
.wrap .rowbg,.wrap .row-selected{background:var(--raise)!important}
.wrap .pm,.wrap .pmlist,.wrap .pm-panel,.wrap .attach-panel,.wrap .postbox{
  background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important}
.wrap dl.details dt,.wrap dl.details dd{color:var(--text)!important}

/* -- Tabs on posting/UCP pages ("Options", "Attach files", etc.) -- */
.wrap .tabs-container{background:transparent!important}
.wrap .tabs .tab>a,.wrap .minitabs .tab>a{background:var(--panel2)!important;border-color:var(--line)!important;color:var(--steel)!important}
.wrap .tabs .activetab>a,.wrap .minitabs .activetab>a{background:var(--accent1)!important;border-color:var(--accent2)!important;color:#fff!important}