@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================================
 * fut-theme.css — EA SPORTS FC "Ultimate Team" inspired theme
 *
 * Loaded by: peb_calculator.html, Purlin Calculation.html, Truss Calculation.html
 * Look:      dark navy/black surface • teal + neon-green accents • magenta pop •
 *            skewed parallelogram buttons • condensed UPPERCASE headings •
 *            glowing gradient edges.
 *
 * Strategy:  hijack each program's own CSS variables at :root, then add
 *            high-specificity overrides for the bits that use fixed colors.
 * ========================================================================== */

/* ============================================================
 * 1. Design tokens
 * ========================================================================== */
:root{
  color-scheme: dark !important;

  /* surfaces */
  --fut-bg-0: #04080F;          /* deepest backdrop */
  --fut-bg-1: #081421;          /* base panel */
  --fut-bg-2: #0C1E30;          /* raised panel */
  --fut-bg-3: #11293E;          /* hover / header */
  --fut-glass: rgba(10, 26, 42, 0.72);

  /* brand accents */
  --fut-teal:        #18E6C8;
  --fut-teal-bright: #54FFE6;
  --fut-teal-deep:   #0DBCA6;
  --fut-green:       #2BF58A;
  --fut-green-bright:#5BFFA6;
  --fut-pink:        #FF2E7E;
  --fut-purple:      #8B5CF6;
  --fut-gold:        #F5C84B;

  /* gradients */
  --fut-grad: linear-gradient(115deg, var(--fut-teal) 0%, var(--fut-green) 100%);
  --fut-grad-soft: linear-gradient(115deg, rgba(24,230,200,.18), rgba(43,245,138,.14));

  /* text */
  --fut-text:       #EAF7F5;
  --fut-text-2:     #A7C6CE;
  --fut-text-mute:  #6B8A95;
  --fut-text-faint: #46606B;

  /* lines / glows */
  --fut-line:        rgba(24, 230, 200, 0.16);
  --fut-line-strong: rgba(24, 230, 200, 0.34);
  --fut-glow-teal:   0 0 0 1px rgba(24,230,200,.30), 0 0 18px rgba(24,230,200,.22);
  --fut-glow-soft:   0 8px 26px rgba(0,0,0,.55), 0 0 0 0.5px rgba(24,230,200,.12);

  --fut-skew: -11deg;
  --cut: 0.62em;   /* parallelogram corner cut */

  --font-head: "Saira Condensed", "Saira", "Rajdhani", system-ui, sans-serif;
  --font-body: "Saira", "Inter", system-ui, "Segoe UI", "Sarabun", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ---- hijack PEB variables ---- */
  --bg: var(--fut-bg-0) !important;
  --ink: var(--fut-text) !important;
  --muted: var(--fut-text-mute) !important;
  --card: var(--fut-bg-1) !important;
  --line: var(--fut-line) !important;
  --accent: var(--fut-teal) !important;
  --ok: var(--fut-green) !important;
  --bad: var(--fut-pink) !important;
  --warn: var(--fut-gold) !important;
  --col-rafter: var(--fut-teal) !important;
  --col-col: var(--fut-green) !important;

  /* ---- hijack Purlin variables ---- */
  --panel: var(--fut-bg-1) !important;
  --panel-2: var(--fut-bg-2) !important;
  --accent-2: var(--fut-green) !important;
  --good: var(--fut-green) !important;
  --text: var(--fut-text) !important;
  --border: var(--fut-line) !important;

  /* ---- hijack Truss variables ---- */
  --panel2: var(--fut-bg-2) !important;
  --accent2: var(--fut-purple) !important;
  --mute: var(--fut-text-mute) !important;
}

/* ============================================================
 * 2. Document & body — dark pitch with diagonal energy lines
 * ========================================================================== */
html{ color-scheme: dark !important; }
html, body{
  font-family: var(--font-body) !important;
  font-size: 13.5px !important;
  color: var(--fut-text) !important;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(24,230,200,.10), transparent 60%),
    radial-gradient(900px 560px at 100% 110%, rgba(43,245,138,.08), transparent 55%),
    radial-gradient(700px 500px at 88% 0%, rgba(139,92,246,.07), transparent 60%),
    linear-gradient(180deg, var(--fut-bg-0) 0%, #05111C 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  letter-spacing: 0.01em !important;
}

/* faint diagonal "speed line" texture overlay on the main scroller */
.main::before, section.main::before, .mac-main::before{ content: none; }

/* ============================================================
 * 3. Headings — condensed uppercase
 * ========================================================================== */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-head) !important;
  color: var(--fut-text) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
}
h1{ font-size: 23px !important; }
h2{ font-size: 19px !important; }
h3{ font-size: 15.5px !important; }
h4{ font-size: 13.5px !important; letter-spacing: 0.06em !important; }

.small, .muted, .sub, .mute{ color: var(--fut-text-mute) !important; }
.mono{ font-family: var(--font-mono) !important; }

/* semantic colors */
.ok  { color: var(--fut-green) !important; }
.bad { color: var(--fut-pink)  !important; }
.warn{ color: var(--fut-gold)  !important; }
.ten { color: var(--fut-pink)  !important; }
.com { color: var(--fut-green) !important; }

/* ============================================================
 * 4. Form controls
 * ========================================================================== */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="search"], input:not([type]), select, textarea,
.input, .select{
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--fut-text) !important;
  background: rgba(4, 12, 20, 0.85) !important;
  border: 1px solid var(--fut-line) !important;
  border-radius: 4px !important;
  padding: 5px 9px !important;
  min-height: 26px !important;
  line-height: 1.4 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
  transition: border-color .14s, box-shadow .14s, background .14s !important;
}
input::placeholder, textarea::placeholder{ color: var(--fut-text-faint) !important; }

input:focus, select:focus, textarea:focus,
.input:focus, .select:focus{
  border-color: var(--fut-teal) !important;
  background: rgba(6, 18, 28, 0.95) !important;
  box-shadow: 0 0 0 3px rgba(24,230,200,.18), 0 0 14px rgba(24,230,200,.20) !important;
}

/* dropdown options stay readable on dark */
select option{ background: #08141F !important; color: var(--fut-text) !important; }

/* checkbox / radio — neon */
input[type="checkbox"], input[type="radio"]{
  -webkit-appearance: none !important; appearance: none !important;
  width: 15px !important; height: 15px !important; min-height: 15px !important;
  border: 1px solid var(--fut-line-strong) !important;
  border-radius: 3px !important;
  background: rgba(4,12,20,.9) !important;
  cursor: pointer !important; position: relative !important;
  vertical-align: middle !important; padding: 0 !important;
  transition: .14s !important;
}
input[type="radio"]{ border-radius: 50% !important; }
input[type="checkbox"]:checked, input[type="radio"]:checked{
  background: var(--fut-grad) !important;
  border-color: var(--fut-teal) !important;
  box-shadow: 0 0 10px rgba(24,230,200,.45) !important;
}
input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border: solid #04121C; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after{
  content:""; position:absolute; inset:3.5px; background:#04121C; border-radius:50%;
}

/* range slider */
input[type="range"]{
  -webkit-appearance:none !important; appearance:none !important;
  height:4px !important; padding:0 !important; border:0 !important;
  background: linear-gradient(90deg, var(--fut-teal), var(--fut-green)) !important;
  border-radius:2px !important; box-shadow:none !important; min-height:4px !important;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none !important; width:16px !important; height:16px !important;
  border-radius:50% !important; background:#EAFFFB !important;
  border:2px solid var(--fut-teal) !important;
  box-shadow:0 0 10px rgba(24,230,200,.6) !important; cursor:pointer !important;
}

/* ============================================================
 * 5. Buttons — skewed parallelogram, neon
 * ========================================================================== */
button, .btn{
  position: relative !important;
  font-family: var(--font-head) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--fut-text) !important;
  padding: 7px 16px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  background: rgba(12, 30, 48, 0.92) !important;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%) !important;
  box-shadow: inset 0 0 0 1px var(--fut-line-strong) !important;
  transition: filter .14s, background .14s, transform .06s, box-shadow .14s !important;
}
button:hover, .btn:hover{
  background: rgba(17, 41, 62, 0.98) !important;
  box-shadow: inset 0 0 0 1px var(--fut-teal), 0 0 16px rgba(24,230,200,.18) !important;
  filter: brightness(1.05) !important;
}
button:active, .btn:active{ transform: translateY(1px) scale(0.99) !important; }
button:disabled, .btn:disabled{ opacity:.4 !important; cursor:default !important; filter:none !important; }

/* primary / accent buttons (filled gradient) */
button.btn-primary, .btn.btn-primary, button.primary, button[data-variant="primary"],
button#btn-unified-pdf, button#btn-pdf, button#btn-report,
button[onclick*="export"], button[onclick*="calculate"], button[onclick*="recalc"]{
  color: #04121C !important;
  background: var(--fut-grad) !important;
  box-shadow: 0 0 18px rgba(24,230,200,.30), inset 0 0 0 1px rgba(255,255,255,.18) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}
button.btn-primary:hover, .btn.btn-primary:hover,
button#btn-unified-pdf:hover, button[onclick*="export"]:hover{
  filter: brightness(1.08) saturate(1.1) !important;
  box-shadow: 0 0 26px rgba(24,230,200,.5), inset 0 0 0 1px rgba(255,255,255,.25) !important;
}

/* secondary / ghost */
.btn-secondary{
  background: rgba(8, 20, 32, 0.92) !important;
  color: var(--fut-text-2) !important;
}
.btn-ghost{
  background: rgba(8, 20, 32, 0.6) !important;
  color: var(--fut-teal) !important;
  box-shadow: inset 0 0 0 1px var(--fut-line-strong) !important;
}
.btn-ghost:hover{ color: var(--fut-teal-bright) !important; }

/* small view buttons (PEB) keep rectangular-ish but neon */
.view-btn{
  font-family: var(--font-head) !important; font-size: 11px !important;
  letter-spacing: .05em !important; padding: 4px 11px !important;
  background: rgba(8,20,32,.85) !important; color: var(--fut-text-2) !important;
  clip-path: polygon(.45em 0, 100% 0, calc(100% - .45em) 100%, 0 100%) !important;
}
.view-btn.active{
  background: var(--fut-grad) !important; color:#04121C !important;
  box-shadow: 0 0 14px rgba(24,230,200,.4) !important;
}

/* ============================================================
 * 6. Tabs
 * ========================================================================== */
.tabs{ border-bottom: 1px solid var(--fut-line) !important; gap: 4px !important; }
.tab{
  font-family: var(--font-head) !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; font-size: 12.5px !important;
  color: var(--fut-text-mute) !important;
  background: transparent !important; border: 0 !important;
  padding: 8px 16px !important; position: relative !important; top: 0 !important;
  border-radius: 0 !important;
}
.tab:hover{ color: var(--fut-text) !important; }
.tab.active{
  color: var(--fut-teal-bright) !important;
  background: linear-gradient(180deg, rgba(24,230,200,.10), transparent) !important;
  border: 0 !important;
}
.tab.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--fut-grad);
  box-shadow: 0 0 10px rgba(24,230,200,.7);
}

/* ============================================================
 * 7. Panels, cards, sections — dark glass + neon edge
 * ========================================================================== */
.panel, .section, .card, .svg-container{
  background: var(--fut-glass) !important;
  border: 1px solid var(--fut-line) !important;
  border-radius: 8px !important;
  color: var(--fut-text) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: var(--fut-glow-soft) !important;
}
/* glowing top accent bar */
.panel{ position: relative !important; padding: 16px !important; overflow: visible !important; }
.panel::before, .card::before{
  content:""; position:absolute; left:14px; right:14px; top:-1px; height:2px;
  background: var(--fut-grad); opacity:.85;
  box-shadow: 0 0 12px rgba(24,230,200,.45);
  border-radius: 2px;
}
.card{ position: relative !important; }

.panel h3, .panel h4, .section-title{ color: var(--fut-text) !important; }
.section-title{
  font-family: var(--font-head) !important;
  color: var(--fut-teal) !important;
  font-weight: 800 !important; letter-spacing: .07em !important;
  text-transform: uppercase !important; font-size: 12px !important;
}

/* stat cards (Purlin .card.value, FUT-styled corner cut) */
.card .label{ color: var(--fut-text-mute) !important; font-family: var(--font-head) !important;
  text-transform: uppercase !important; letter-spacing: .05em !important; font-size: 10.5px !important; font-weight:600 !important; }
.card .value{ color: var(--fut-text) !important; font-family: var(--font-head) !important;
  font-weight: 800 !important; font-size: 21px !important; }
.card .unit{ color: var(--fut-text-mute) !important; font-weight:500 !important; }
.card.good{ border-left: 3px solid var(--fut-green) !important; }
.card.warn{ border-left: 3px solid var(--fut-gold)  !important; }
.card.bad { border-left: 3px solid var(--fut-pink)  !important; }
.card.good::before{ background: var(--fut-green) !important; }
.card.bad::before { background: var(--fut-pink)  !important; }
.card.warn::before{ background: var(--fut-gold)  !important; }

/* metric chip (PEB) */
.metric{
  background: rgba(8,20,32,.85) !important;
  border: 1px solid var(--fut-line) !important;
  border-radius: 6px !important; padding: 8px 13px !important;
}
.metric .v{ color: var(--fut-teal) !important; font-family: var(--font-head) !important; font-weight:800 !important; }
.metric .l{ color: var(--fut-text-mute) !important; }

/* note / callout */
.note{
  background: linear-gradient(180deg, rgba(245,200,75,.10), rgba(245,200,75,.04)) !important;
  border-left: 3px solid var(--fut-gold) !important;
  color: var(--fut-text-2) !important; border-radius: 6px !important;
}

/* ============================================================
 * 8. Tables
 * ========================================================================== */
table, .tbl, table.r{
  background: rgba(6, 16, 26, 0.6) !important;
  border: 1px solid var(--fut-line) !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  border-radius: 8px !important; overflow: hidden !important;
  font-size: 12px !important;
}
th, td, .tbl th, .tbl td, table.r th, table.r td{
  border: 0 !important;
  border-bottom: 1px solid rgba(24,230,200,.08) !important;
  padding: 7px 10px !important; color: var(--fut-text) !important;
  text-align: left !important; vertical-align: middle !important;
}
tr:last-child td{ border-bottom: 0 !important; }
th, .tbl th, table.r th{
  background: linear-gradient(180deg, var(--fut-bg-3), var(--fut-bg-2)) !important;
  color: var(--fut-teal) !important;
  font-family: var(--font-head) !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .05em !important;
  font-size: 11px !important;
}
tbody tr:hover td, .tbl tr:hover td, table.r tr:hover td{
  background: rgba(24,230,200,.07) !important;
}
.num, td.num, th.num, td.r, th.r, td.c, th.c{
  font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums !important;
}

/* ============================================================
 * 9. Status pills / badges — angled neon
 * ========================================================================== */
.status, .badge{
  font-family: var(--font-head) !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  font-size: 10.5px !important; padding: 3px 12px !important;
  border-radius: 0 !important;
  clip-path: polygon(.5em 0, 100% 0, calc(100% - .5em) 100%, 0 100%) !important;
}
.status.pass, .badge.ok{ background: rgba(43,245,138,.18) !important; color: var(--fut-green) !important;
  box-shadow: inset 0 0 0 1px rgba(43,245,138,.5) !important; }
.status.fail, .badge.no{ background: rgba(255,46,126,.18) !important; color: var(--fut-pink) !important;
  box-shadow: inset 0 0 0 1px rgba(255,46,126,.5) !important; }

.chip{
  background: rgba(8,20,32,.85) !important; color: var(--fut-text-2) !important;
  border: 1px solid var(--fut-line) !important; border-radius: 999px !important;
  font-family: var(--font-head) !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; font-size: 10.5px !important; font-weight:600 !important;
}

/* formula box */
.formula{
  background: rgba(4,12,20,.85) !important; color: var(--fut-text) !important;
  border-left: 3px solid var(--fut-teal) !important; border-radius: 6px !important;
  font-family: var(--font-mono) !important;
}
.formula-title{ color: var(--fut-teal) !important; font-family: var(--font-head) !important;
  text-transform: uppercase !important; letter-spacing:.05em !important; font-weight:700 !important; }

/* ============================================================
 * 10. Program-specific chrome
 * ========================================================================== */
/* ---- PEB header ---- */
body > header{
  background: linear-gradient(120deg, var(--fut-bg-1), var(--fut-bg-2)) !important;
  color: var(--fut-text) !important;
  border-bottom: 1px solid var(--fut-line-strong) !important;
  box-shadow: 0 0 24px rgba(24,230,200,.10) !important;
}
body > header h1{ font-family: var(--font-head) !important; color: var(--fut-text) !important;
  text-transform: uppercase !important; letter-spacing:.05em !important; }
body > header .sub{ color: var(--fut-text-mute) !important; }

/* ---- sidebars ---- */
aside, .sidebar{
  background: linear-gradient(180deg, var(--fut-bg-1), var(--fut-bg-0)) !important;
  border-right: 1px solid var(--fut-line) !important;
  color: var(--fut-text) !important;
}
aside h3{
  font-family: var(--font-head) !important; color: var(--fut-teal) !important;
  text-transform: uppercase !important; letter-spacing:.08em !important;
  font-weight: 800 !important; font-size: 11px !important;
}
.sidebar h1{
  font-family: var(--font-head) !important; font-weight: 900 !important;
  text-transform: uppercase !important;
  background: var(--fut-grad) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.sidebar .sub{ color: var(--fut-text-mute) !important; }
.field label{ color: var(--fut-text-2) !important; }

/* ---- Truss (Tailwind) ---- */
header.sticky, header[class*="sticky"]{
  background: linear-gradient(120deg, var(--fut-bg-1), var(--fut-bg-2)) !important;
  border-bottom: 1px solid var(--fut-line-strong) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
}
.gridbg{
  background-image:
    linear-gradient(rgba(24,230,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,230,200,.05) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
  background-color: rgba(4,12,20,.4) !important;
}
.w-10.h-10{ background: var(--fut-grad) !important; box-shadow: 0 0 16px rgba(24,230,200,.45) !important; }

/* Tailwind color-utility remaps */
[class*="text-slate-"]{ color: var(--fut-text-mute) !important; }
[class*="text-slate-100"], [class*="text-slate-200"], [class*="text-white"]{ color: var(--fut-text) !important; }
[class*="text-cyan-"]{ color: var(--fut-teal) !important; }
[class*="text-violet-"], [class*="text-purple-"]{ color: var(--fut-purple) !important; }
[class*="text-emerald-"], [class*="text-green-"]{ color: var(--fut-green) !important; }
[class*="text-rose-"], [class*="text-red-"], [class*="text-pink-"]{ color: var(--fut-pink) !important; }
[class*="text-amber-"], [class*="text-yellow-"]{ color: var(--fut-gold) !important; }
[class*="bg-slate-"]{ background-color: var(--fut-bg-1) !important; }
[class*="bg-gradient-"]{ background-image: var(--fut-grad-soft) !important; }
[class*="border-slate-"], [class*="border-cyan-"]{ border-color: var(--fut-line) !important; }
.font-semibold, .font-bold, .font-extrabold{ color: var(--fut-text) !important; }

/* ============================================================
 * 11. Loading overlay, details, scrollbars, misc
 * ========================================================================== */
.loading{ background: rgba(2,8,14,.82) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.spinner{ border-color: rgba(24,230,200,.15) !important; border-top-color: var(--fut-teal) !important; }

details > summary{ color: var(--fut-teal) !important; font-weight: 600 !important; }
details > summary::before{ color: var(--fut-teal) !important; }

svg{ background: transparent !important; }
code, pre{
  font-family: var(--font-mono) !important; color: var(--fut-text) !important;
  background: rgba(4,12,20,.8) !important; border-radius: 4px !important; padding: 1px 5px !important;
}
pre{ padding: 10px 12px !important; border:1px solid var(--fut-line) !important; }

::selection{ background: rgba(24,230,200,.30) !important; color: #04121C !important; }

*::-webkit-scrollbar{ width: 11px !important; height: 11px !important; }
*::-webkit-scrollbar-track{ background: transparent !important; }
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--fut-teal-deep), #0a6f63) !important;
  background-clip: padding-box !important; border: 2.5px solid transparent !important;
  border-radius: 11px !important; min-height: 30px !important;
}
*::-webkit-scrollbar-thumb:hover{ background: var(--fut-teal) !important; background-clip: padding-box !important; }
*::-webkit-scrollbar-corner{ background: transparent !important; }

/* ============================================================
 * 12. Truss UX refinements
 * ========================================================================== */
.label,
.card .label,
.metric .l,
.section-title{
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
}

.label,
.card .label{
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

.chip{
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 11.5px !important;
}

#inputValidationBanner{
  background: rgba(127,29,29,.28) !important;
  border-color: rgba(251,113,133,.55) !important;
  color: #fecdd3 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(251,113,133,.12) !important;
}

.input.input-error,
.select.input-error{
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 3px rgba(251,113,133,.18), 0 0 16px rgba(251,113,133,.16) !important;
}

@media (max-width: 640px){
  .app-header-inner{
    padding-top: 8px !important;
    padding-bottom: 7px !important;
  }

  .header-actions{
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    padding-bottom: 5px !important;
    scrollbar-width: thin !important;
  }

  .header-actions > *{
    flex: 0 0 auto !important;
  }

  .header-actions .btn,
  .header-actions details > summary{
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  .header-actions details > summary::before{
    display: none !important;
  }

  .header-actions label{
    min-height: 38px !important;
    white-space: nowrap !important;
  }

  #scth-fab{
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
  }

  #scth-fab > div:first-child{
    top: 48px !important;
    right: 0 !important;
    bottom: auto !important;
    width: min(272px, calc(100vw - 20px)) !important;
  }

  #scth-fab > div:last-child{
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  #scth-fab > div:last-child span:last-child{
    display: none !important;
  }
}