/* BootGhost client theme for FOSSBilling. Loaded after huraga.css.
 * Colours and type come from the corporate site (site/corporate/corp.css):
 * light = Bone (bone background, ink text, cobalt), dark = Ink (ink background, bone text, azure). */
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root, [data-bs-theme="light"] {
  --bg-bone: #eeede8; --bg-ink: #141414; --bg-cobalt: #0c388d; --bg-azure: #4d7cff; --bg-signal: #d94f37;
  --bs-font-sans-serif: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: "Geist Mono", ui-monospace, Menlo, monospace;
  --bs-body-bg: #eeede8; --bs-body-bg-rgb: 238, 237, 232;
  --bs-body-color: #141414; --bs-body-color-rgb: 20, 20, 20;
  --bs-emphasis-color: #141414; --bs-emphasis-color-rgb: 20, 20, 20;
  --bs-secondary-color: #4a4945; --bs-secondary-color-rgb: 74, 73, 69;
  --bs-tertiary-color: #8c8b86;
  --bs-secondary-bg: #e3e2dc; --bs-secondary-bg-rgb: 227, 226, 220;
  --bs-tertiary-bg: #e3e2dc; --bs-tertiary-bg-rgb: 227, 226, 220;
  --bs-border-color: #b4b3ad; --bs-border-color-translucent: rgba(20, 20, 20, .14);
  --bs-primary: #0c388d; --bs-primary-rgb: 12, 56, 141;
  --bs-primary-text-emphasis: #0c388d; --bs-primary-bg-subtle: #dfe5f3; --bs-primary-border-subtle: #9fb2dc;
  --bs-link-color: #0c388d; --bs-link-color-rgb: 12, 56, 141;
  --bs-link-hover-color: #082a6b; --bs-link-hover-color-rgb: 8, 42, 107;
  --bs-focus-ring-color: rgba(217, 79, 55, .45);
  --bs-border-radius: 4px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 6px;
  --bg-surface: #f6f5f1;
  --bg-on-accent: #eeede8;
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #141414; --bs-body-bg-rgb: 20, 20, 20;
  --bs-body-color: #eeede8; --bs-body-color-rgb: 238, 237, 232;
  --bs-emphasis-color: #eeede8; --bs-emphasis-color-rgb: 238, 237, 232;
  --bs-secondary-color: #b4b3ad; --bs-secondary-color-rgb: 180, 179, 173;
  --bs-tertiary-color: #8c8b86;
  --bs-secondary-bg: #1d1d1c; --bs-secondary-bg-rgb: 29, 29, 28;
  --bs-tertiary-bg: #1d1d1c; --bs-tertiary-bg-rgb: 29, 29, 28;
  --bs-border-color: #34342f; --bs-border-color-translucent: rgba(238, 237, 232, .12);
  --bs-primary: #4d7cff; --bs-primary-rgb: 77, 124, 255;
  --bs-primary-text-emphasis: #8fa9ff; --bs-primary-bg-subtle: #16233f; --bs-primary-border-subtle: #2c4a96;
  --bs-link-color: #4d7cff; --bs-link-color-rgb: 77, 124, 255;
  --bs-link-hover-color: #7c9dff; --bs-link-hover-color-rgb: 124, 157, 255;
  --bg-surface: #1b1b1a;
  --bg-on-accent: #141414;
  color-scheme: dark;
}

body { font-family: var(--bs-font-sans-serif); background-color: var(--bs-body-bg); color: var(--bs-body-color); font-feature-settings: "ss01"; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.01em; }
code, kbd, pre, samp, .font-monospace, .table td.text-end { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; }

/* Surfaces: receipt-like cards on bone, flat lines instead of shadows. */
.card { --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: transparent; box-shadow: none; }
.card-header { border-bottom-color: var(--bs-border-color); }
.navbar, .offcanvas, .sidebar, .bg-body-tertiary { --bs-bg-opacity: 1; background-color: var(--bs-body-bg) !important; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--bs-border-color); }
.dropdown-menu { --bs-dropdown-bg: var(--bg-surface); --bs-dropdown-border-color: var(--bs-border-color); }
.form-control, .form-select { background-color: var(--bg-surface); border-color: var(--bs-border-color); }

/* Buttons: cobalt (Bone) or azure (Ink), never Bootstrap blue. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--bg-on-accent);
  --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); --bs-btn-hover-color: var(--bg-on-accent);
  --bs-btn-active-bg: var(--bs-link-hover-color); --bs-btn-active-border-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--bg-on-accent);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bg-on-accent);
  --bs-btn-focus-shadow-rgb: 217, 79, 55;
}
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bg-on-accent);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: var(--bg-on-accent);
}
.btn-dark { --bs-btn-bg: var(--bs-body-color); --bs-btn-border-color: var(--bs-body-color); --bs-btn-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--bg-on-accent); }
.btn:focus-visible, .form-control:focus, .form-select:focus { outline: 2px solid var(--bg-signal); outline-offset: 2px; box-shadow: none; border-color: var(--bs-border-color); }

/* Active navigation: cobalt text with a signal underline, like the corporate header. */
.nav-link { color: var(--bs-body-color); }
.nav-link:hover { color: var(--bs-primary); }
.nav-link.active, .nav-pills .nav-link.active { color: var(--bs-primary); background: transparent; box-shadow: inset 0 -2px 0 var(--bg-signal); }
.badge.bg-primary, .text-bg-primary { background-color: var(--bs-primary) !important; color: var(--bg-on-accent) !important; }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-active-color: var(--bg-on-accent); }

/* Invoice status badges keep their meaning with brand-compatible tones. */
.badge.bg-success, .text-bg-success { background-color: #1f7a4d !important; }
.badge.bg-warning, .text-bg-warning { background-color: #e3a53b !important; color: #141414 !important; }
.badge.bg-danger, .text-bg-danger { background-color: var(--bg-signal) !important; }

/* ===================== App shell (signed-in customers) ===================== */
::selection { background: var(--bs-primary); color: var(--bg-on-accent); }
html { scrollbar-color: var(--bs-border-color) transparent; }

.bg-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.bg-main { min-width: 0; padding: 2.5rem clamp(1.25rem, 4vw, 4rem) 1.75rem; display: flex; flex-direction: column; }
.bg-main > #wrapper { flex: 1; max-width: 1480px; width: 100%; margin: 0 auto; }
.bg-main > #footer { max-width: 1480px; width: 100%; margin: 3.5rem auto 0; }
.bg-label, .bg-stat-label, .bg-table th, .bg-facts dt { font-family: var(--bs-font-monospace); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.bg-mono, .bg-money, .bg-stat-value, .bg-order-id { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; }
.bg-muted { color: var(--bs-secondary-color); }

/* Sidebar */
.bg-side { border-right: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
@media (min-width: 768px) { .bg-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
.bg-side-inner { display: flex; flex-direction: column; gap: 1.25rem; min-height: 100%; padding: 1.5rem 1rem 1rem; }
.bg-side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; }
.bg-brand { display: inline-flex; line-height: 0; }
.bg-logo { height: 26px; width: auto; }
.bg-logo-dark { filter: invert(1); } /* the logo art is black */
[data-bs-theme="light"] .bg-logo-dark, [data-bs-theme="dark"] .bg-logo-light { display: none; }

.bg-account { border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bg-surface); padding: .875rem; display: grid; gap: .875rem; }
.bg-account-id { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.bg-avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bs-body-color); color: var(--bs-body-bg); font: 700 .75rem/1 var(--bs-font-monospace); }
.bg-account-mail { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-account-bal { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; padding-top: .875rem; border-top: 1px solid var(--bs-border-color); }
.bg-money { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1.15; margin-top: .125rem; }

.bg-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bg-nav-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 6px; color: var(--bs-body-color); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background-color .15s cubic-bezier(.23, 1, .32, 1), color .15s; }
.bg-nav-link .icon { width: 1.125rem; height: 1.125rem; flex: none; opacity: .8; }
.bg-nav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.bg-nav-link.is-active { background: var(--bs-primary); color: var(--bg-on-accent); }
.bg-nav-link.is-active .icon { opacity: 1; }
.bg-nav-link:focus-visible, .bg-order:focus-visible, .bg-more:focus-visible, .bg-menu-btn:focus-visible { outline: 2px solid var(--bg-signal); outline-offset: 2px; }
.bg-badge { margin-left: auto; min-width: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--bg-signal); color: #fff; font: 700 .6875rem/1.25rem var(--bs-font-monospace); text-align: center; }
.bg-nav-link.is-active .bg-badge { background: var(--bg-on-accent); color: var(--bs-primary); }

.bg-order { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem .75rem; border: 1px dashed var(--bs-primary); border-radius: 6px; color: var(--bs-primary); font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; }
.bg-order .icon { width: 1rem; height: 1rem; }
.bg-order:hover, .bg-order.is-active { background: var(--bs-primary); border-style: solid; color: var(--bg-on-accent); }

.bg-side-foot { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--bs-border-color); display: grid; gap: 2px; }
.bg-side-foot .bg-nav-link { font-weight: 500; font-size: .875rem; color: var(--bs-secondary-color); }

/* Menu button of the top bar (phone) */
.bg-menu-btn { display: grid; gap: 4px; padding: .6rem .5rem; border: 1px solid var(--bs-border-color); border-radius: 6px; background: transparent; }
.bg-menu-btn span { display: block; width: 18px; height: 2px; background: var(--bs-body-color); }

@media (max-width: 767.98px) {
  .bg-shell { grid-template-columns: 1fr; }
  .bg-side.offcanvas-md { --bs-offcanvas-width: min(300px, 86vw); }
}

/* ===================== Dashboard ===================== */
.bg-dash { display: grid; gap: 1.5rem; font-size: 1.0625rem; }
.bg-dash-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; text-wrap: balance; }

.bg-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; border: 1px solid var(--bg-signal); border-radius: 8px; background: color-mix(in srgb, var(--bg-signal) 7%, var(--bs-body-bg)); }
.bg-notice strong { display: block; font-size: .9375rem; }
.bg-notice span { font-size: .875rem; color: var(--bs-secondary-color); }
.bg-notice-quiet { border-color: var(--bs-border-color); background: var(--bg-surface); }

.bg-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bg-surface); overflow: hidden; }
.bg-stat { display: flex; align-items: center; gap: 1.125rem; padding: 1.5rem 1.75rem; }
.bg-stat + .bg-stat { border-left: 1px solid var(--bs-border-color); }
.bg-stat-label { display: block; }
.bg-stat-value { display: block; font-size: 2rem; font-weight: 600; line-height: 1.15; margin-top: .125rem; }
.bg-stat-value.is-warn { color: var(--bg-signal); }

.bg-panel { border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bg-surface); min-width: 0; }
.bg-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); }
.bg-panel-head h2 { font-size: 1.1875rem; font-weight: 700; margin: 0; }
.bg-more { font-size: .875rem; font-weight: 600; color: var(--bs-primary); text-decoration: none; white-space: nowrap; }
.bg-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.bg-pad { padding: 1.25rem 1.5rem; margin: 0; }

.bg-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.bg-table th { padding: .875rem 1.5rem .5rem; text-align: left; font-weight: 500; }
.bg-table td { padding: 1rem 1.5rem; border-top: 1px solid var(--bs-border-color); vertical-align: middle; }
.bg-table tbody tr:hover td { background: var(--bs-tertiary-bg); }
.bg-order-id { color: var(--bs-secondary-color); margin-right: .25rem; }

.bg-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.bg-pill::before { content: ""; width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; opacity: .85; }
.bg-pill-active { background: color-mix(in srgb, #1f7a4d 14%, transparent); color: #1a6a43; }
.bg-pill-pending_setup, .bg-pill-failed_setup { background: color-mix(in srgb, #e3a53b 22%, transparent); color: #7a5208; }
.bg-pill-suspended, .bg-pill-canceled, .bg-pill-failed_renew { background: color-mix(in srgb, #d94f37 14%, transparent); color: #a8341f; }
[data-bs-theme="dark"] .bg-pill-active { color: #6fd3a0; }
[data-bs-theme="dark"] .bg-pill-pending_setup, [data-bs-theme="dark"] .bg-pill-failed_setup { color: #f0c46e; }
[data-bs-theme="dark"] .bg-pill-suspended, [data-bs-theme="dark"] .bg-pill-canceled, [data-bs-theme="dark"] .bg-pill-failed_renew { color: #ff8a73; }

.bg-empty { position: relative; display: flex; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; padding: 1.75rem 1.5rem 1.75rem; overflow: hidden; }
.bg-empty img { image-rendering: pixelated; }
.bg-empty p { flex: 1 1 18rem; margin: 0; color: var(--bs-secondary-color); }
.bg-empty p strong { color: var(--bs-body-color); }

.bg-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.bg-feed { list-style: none; margin: 0; padding: .25rem 0; }
.bg-feed li { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; padding: .875rem 1.5rem; }
.bg-feed li + li { border-top: 1px solid var(--bs-border-color); }
.bg-feed a { font-weight: 600; color: var(--bs-body-color); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-feed a:hover { color: var(--bs-primary); }
.bg-feed .bg-muted { grid-column: 2; font-size: .8125rem; }
.bg-feed-dot { width: .5rem; height: .5rem; border-radius: 50%; margin-top: .45rem; background: var(--bs-secondary-color); }
.bg-feed-on_hold { background: var(--bg-signal); }
.bg-feed-open { background: #e3a53b; }

.bg-facts { margin: 0; padding: .25rem 0; }
.bg-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem 1.5rem; }
.bg-facts div + div { border-top: 1px solid var(--bs-border-color); }
.bg-facts dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Footer coins */
#footer { color: var(--bs-secondary-color); padding-top: 1rem; border-top: 1px solid var(--bs-border-color); }
.bg-coins { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.bg-coin { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .5rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: .75rem; font-weight: 600; }
.bg-coin-ico { width: .875rem; height: .875rem; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.bg-ico-ln { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 0 2 9h5l-1 7 8-10H9z'/%3E%3C/svg%3E"); }
.bg-ico-btc { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.9 3.5v1.1c1.5.2 2.4.9 2.4 2.1 0 .8-.4 1.4-1.1 1.7.9.3 1.5 1 1.5 2 0 1.4-1 2.3-2.8 2.4v1.1H7.7v-1.1H7v1.1H5.8v-1.1H4.5V11h.8c.3 0 .5-.2.5-.5V5.5c0-.3-.2-.5-.5-.5h-.8V3.9h1.3V2.8H7v1.1h.7V2.8h1.2zM7 5.1v2.3h1.2c.9 0 1.5-.4 1.5-1.2 0-.7-.6-1.1-1.5-1.1zm0 3.4v2.6h1.5c1 0 1.6-.5 1.6-1.3s-.6-1.3-1.6-1.3z'/%3E%3C/svg%3E"); }
.bg-ico-xmr { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 0 0-7.6 10.5H3V4l5 5 5-5v6.5h2.6A8 8 0 0 0 8 0zM6.8 10.3 4.5 8v4H1.1A8 8 0 0 0 14.9 12h-3.4V8l-2.3 2.3L8 11.5z'/%3E%3C/svg%3E"); }

@media (max-width: 991.98px) {
  .bg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-stat:nth-child(3) { border-left: 0; }
  .bg-stat:nth-child(n + 3) { border-top: 1px solid var(--bs-border-color); }
  .bg-split { grid-template-columns: 1fr; }
}
@media (max-width: 359.98px) {
  .bg-stats { grid-template-columns: 1fr; }
  .bg-stat + .bg-stat { border-left: 0; border-top: 1px solid var(--bs-border-color); }
}
@media (max-width: 575.98px) {
  .bg-notice { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .bg-nav-link, .bg-order { transition: none; } }

/* Breadcrumbs: quiet, no default underline. */
.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-tertiary-color); --bs-breadcrumb-item-active-color: var(--bs-secondary-color); font-size: .875rem; }
.breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; }
.breadcrumb a:hover { color: var(--bs-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Welcome panel: the corporate cobalt panel with Bootsy. Cobalt in both modes. */
.bg-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2rem; padding: 2.25rem 2.5rem 2rem; border-radius: 10px; background: #0c388d; color: #eeede8; overflow: hidden; }
.bg-hero-title { font-size: clamp(2.125rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin: 0 0 .75rem; color: #eeede8; text-wrap: balance; }
.bg-hero-line { font-size: 1.1875rem; line-height: 1.5; max-width: 52ch; margin: 0 0 1.5rem; color: #c3d2f2; }
.bg-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bg-hero-btn { display: inline-flex; align-items: center; padding: .75rem 1.25rem; border: 1px solid #eeede8; border-radius: 6px; background: #eeede8; color: #141414; font-weight: 700; text-decoration: none; transition: transform .2s cubic-bezier(.23, 1, .32, 1), background-color .15s; }
.bg-hero-btn:hover { color: #141414; background: #fff; transform: translateY(-1px); }
.bg-hero-btn-line { background: transparent; color: #eeede8; }
.bg-hero-btn-line:hover { background: rgba(238, 237, 232, .12); color: #eeede8; }
.bg-hero-btn:focus-visible { outline: 2px solid #d94f37; outline-offset: 3px; }
.bg-hero-art { width: 184px; height: auto; margin: -1rem 0 -2rem; align-self: end; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28)); transform-origin: 60% 90%; animation: bg-wave-in .9s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes bg-wave-in { from { transform: translateY(14px) rotate(-4deg); } to { transform: none; } }

.bg-empty-peek { order: -1; align-self: flex-end; width: 150px; height: auto; margin-bottom: -1.75rem; pointer-events: none; }
.bg-empty p { font-size: 1.0625rem; }

@media (max-width: 767.98px) {
  .bg-hero { grid-template-columns: 1fr; padding: 1.5rem 1.25rem 1.75rem; }
  .bg-hero-art { position: absolute; top: .75rem; right: .5rem; width: 84px; margin: 0; }
  .bg-hero-title { padding-right: 84px; }
  .bg-hero-line { font-size: 1.0625rem; }
  .bg-hero-actions { flex-direction: column; align-items: stretch; }
  .bg-hero-btn { justify-content: center; }
  .bg-empty-peek { width: 120px; margin-bottom: 0; align-self: flex-start; }
}
@media (max-width: 575.98px) {
  .bg-stat { gap: .75rem; padding: 1rem; }
  .bg-stat-value { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: reduce) { .bg-hero-art { animation: none; } .bg-hero-btn { transition: none; } }

/* Server details (BootGhost provisioner) */
.bg-server { margin-bottom: 1.5rem; }
.bg-server-wait { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; }
.bg-server-wait strong { display: block; }
.bg-dot-pulse { width: .75rem; height: .75rem; border-radius: 50%; background: var(--bs-primary); flex: none; animation: bg-pulse 1.4s ease-in-out infinite; }
@keyframes bg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.bg-copy-btn { margin-left: .5rem; padding: .125rem .5rem; border: 1px solid var(--bs-border-color); border-radius: 4px; background: transparent; color: var(--bs-body-color); font: 600 .75rem var(--bs-font-sans-serif); vertical-align: middle; }
.bg-copy-btn:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.bg-copy-btn:focus-visible { outline: 2px solid var(--bg-signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bg-dot-pulse { animation: none; } }
img.hide-theme-light { filter: invert(1); } /* the guest header logo in dark mode: the logo art is black */

/* ===================== The corporate look (November 10, 2026) =====================
 * The customer area follows the corporate site (site/corporate/corp.css): flat ruled sections in place of boxes,
 * heavy tight headings, tables with a 2px head rule, comic-book buttons, and the account slip as a receipt.
 * This part comes last, so it wins over the rules above. */
:root, [data-bs-theme="light"] { --bg-edge: #141414; --bg-paper: #fbfaf6; }
[data-bs-theme="dark"] { --bg-edge: #eeede8; } /* a black shadow does not show on the dark page: the outline and the shadow are bone */

h1, h2, .h1, .h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }

/* Marker buttons: a thick outline like a marker line, with corners that are a little uneven, and an emboss.
   The emboss is a stack of 1px steps, so its corners are cut at 45 degrees like a solid block.
   A press pushes the button into its emboss. --d is the depth. The corporate site has the same buttons. */
:is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn) {
  --d: 5px; --e: var(--bg-edge);
  --emboss: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e);
  border: 3px solid var(--e) !important; border-radius: 4px 8px 5px 9px / 8px 4px 9px 5px !important; font-weight: 800;
  box-shadow: var(--emboss);
  transition: translate .12s cubic-bezier(.23, 1, .32, 1), box-shadow .12s cubic-bezier(.23, 1, .32, 1), background-color .15s, color .15s;
}
:is(.btn-sm, .bg-copy-btn, .bg-menu-btn, .bg-order) { --d: 4px; --emboss: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e); }
@media (hover: hover) {
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn):hover { translate: -1px -1px; box-shadow: var(--emboss), calc(var(--d) + 1px) calc(var(--d) + 1px) 0 var(--e); transform: none; }
}
:is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn):active { translate: var(--d) var(--d); box-shadow: 0 0 0 var(--e); transform: none; }
.btn:not(.btn-link, .btn-close):focus-visible { box-shadow: var(--emboss); }
.btn:disabled, .btn.disabled { translate: none; box-shadow: none; }
/* One fill for each kind of action: cobalt for the main action, the page colour for the others, signal for danger. */
.btn-primary, .btn-success, .btn-dark, .btn-info {
  --bs-btn-bg: var(--bs-primary); --bs-btn-color: var(--bg-on-accent);
  --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-color: var(--bg-on-accent);
  --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-color: var(--bg-on-accent);
  --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-color: var(--bg-on-accent);
}
.btn-secondary, .btn-light, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .bg-copy-btn {
  --bs-btn-bg: var(--bs-body-bg); --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--bs-body-bg); --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-body-bg); --bs-btn-active-color: var(--bs-body-color);
  background-color: var(--bs-body-bg); color: var(--bs-body-color);
}
.btn-danger, .btn-outline-danger {
  --bs-btn-bg: var(--bg-signal); --bs-btn-color: #141414; --bs-btn-hover-bg: var(--bg-signal); --bs-btn-hover-color: #141414;
  --bs-btn-active-bg: var(--bg-signal); --bs-btn-active-color: #141414; background-color: var(--bg-signal); color: #141414;
}
.bg-copy-btn:hover { color: var(--bs-body-color); }

/* Sections: a 2px rule on top and hairlines inside, with no box. */
.card {
  --bs-card-bg: transparent; --bs-card-cap-bg: transparent; --bs-card-border-width: 0; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0;
  --bs-card-spacer-x: 0; --bs-card-cap-padding-x: 0; --bs-card-cap-padding-y: 1.1rem;
  border-top: 2px solid var(--bs-body-color); border-radius: 0;
}
.card-header { border-bottom: 1px solid var(--bs-border-color); }
.card-header :is(h1, h2, h3, h4, h5, h6), .card-title { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-bottom: .25rem; }
.card-header p, .card-subtitle { color: var(--bs-secondary-color); margin-bottom: 0; }
.card-footer { background: transparent; border-top: 1px solid var(--bs-border-color); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-radius: 0; --bs-list-group-border-color: var(--bs-border-color); --bs-list-group-item-padding-x: 0; }
.list-group-item { border-inline: 0; }
.accordion {
  --bs-accordion-bg: transparent; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-padding-x: 0; --bs-accordion-body-padding-x: 0; --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: none;
}
.accordion-item { border-inline: 0; }
.accordion-button { font-weight: 700; }
.alert { --bs-alert-border-radius: 0; border-width: 1.5px; }
.dropdown-menu { --bs-dropdown-border-radius: 0; border: 2px solid var(--bg-edge); box-shadow: 4px 4px 0 var(--bg-edge); }
.modal-content { border: 2px solid var(--bg-edge); border-radius: 0; box-shadow: 8px 8px 0 var(--bg-edge); }

/* Tables: no boxes. A quiet head with a 2px rule, then hairlines, like the plan table of the corporate site. */
.table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--bs-tertiary-bg); margin-bottom: 0; }
.table > :not(caption) > * > * { border-width: 0 0 1px; padding: .95rem 1rem .95rem 0; background-color: transparent; box-shadow: none; vertical-align: middle; }
.table > :not(caption) > * > :last-child { padding-right: 6px; } /* room for a button shadow */
.table > thead > tr > * { font-size: .82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bs-secondary-color); border-bottom: 2px solid var(--bs-body-color); }
.table > tbody > tr:hover > * { background-color: var(--bs-tertiary-bg); }

/* Tabs: text with a signal underline on the current tab, like the corporate header. */
.nav-tabs { --bs-nav-tabs-border-width: 0; gap: .25rem 1.6rem; border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-link { padding: .6rem 0; border: 0; border-radius: 0; background: none; font-weight: 600; color: var(--bs-body-color); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: none; color: var(--bs-body-color); box-shadow: inset 0 -3px 0 var(--bg-signal); }
.card-header-tabs { margin: 0; }
.card-header:has(.nav-tabs) { border-bottom: 0; padding-bottom: 0; }

/* Chips and forms */
.badge { --bs-badge-border-radius: 0; font: 600 .72rem/1 var(--bs-font-monospace); padding: .32em .5em; vertical-align: .12em; }
.badge.bg-info, .text-bg-info, .badge.bg-secondary, .text-bg-secondary, .badge.bg-dark, .text-bg-dark { background-color: var(--bs-body-color) !important; color: var(--bs-body-bg) !important; }
.form-control, .form-select, .input-group-text { border: 1.5px solid var(--bs-body-color); border-radius: 4px; background-color: var(--bg-surface); }
.form-control:focus, .form-select:focus { border-color: var(--bs-body-color); }
.form-label { font-weight: 600; font-size: .9rem; color: var(--bs-secondary-color); }
.form-check-input { border: 1.5px solid var(--bs-body-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-body-color); }
.form-text, .form-hint { color: var(--bs-secondary-color); }

/* Sidebar: square links, the order button as a comic button, the account slip as a receipt. */
.bg-nav-link { border-radius: 0; }
.bg-order, .bg-order:hover, .bg-order.is-active { background: var(--bs-primary); color: var(--bg-on-accent); margin-right: 4px; }
.bg-slip { filter: drop-shadow(0 8px 8px rgb(20 20 20 / .16)); }
.bg-account {
  --bg-edge: #141414; --bs-body-bg: #fbfaf6; --bs-body-color: #141414; --bs-secondary-color: #4a4945; --bs-border-color: #b4b3ad;
  border: 0; border-radius: 0; padding: 1rem .9rem 1.6rem; background: var(--bg-paper); color: #141414; font-family: var(--bs-font-monospace);
  --t: 7px; /* the torn bottom edge */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--t)), 90% 100%, 80% calc(100% - var(--t)), 70% 100%, 60% calc(100% - var(--t)), 50% 100%, 40% calc(100% - var(--t)), 30% 100%, 20% calc(100% - var(--t)), 10% 100%, 0 calc(100% - var(--t)));
}
.bg-account-mail { font-weight: 500; font-size: .78rem; }
.bg-account-bal { border-top: 1px dashed #b4b3ad; padding-right: 5px; }
.bg-avatar { border-radius: 0; background: #141414; color: #fbfaf6; }
.bg-account .btn-primary { --bs-btn-bg: #0c388d; --bs-btn-hover-bg: #0c388d; --bs-btn-active-bg: #0c388d; --bs-btn-color: #eeede8; --bs-btn-hover-color: #eeede8; }

/* Dashboard: the welcome band, then ruled figures and ruled sections. */
.bg-hero { border-radius: 0; }
.bg-hero-title { font-size: clamp(2.4rem, 4.6vw, 3.8rem); letter-spacing: -.04em; line-height: .96; }
.bg-hero-btn, .bg-hero-btn:hover { --e: #141414; background: #eeede8; color: #141414; }
.bg-hero-btn-line, .bg-hero-btn-line:hover { background: #0c388d; color: #eeede8; }
.bg-notice { border-radius: 0; border-width: 1.5px; }
.bg-stats { border: 0; border-top: 2px solid var(--bs-body-color); border-bottom: 1px solid var(--bs-border-color); border-radius: 0; background: transparent; }
.bg-stat:first-child { padding-left: 0; }
.bg-panel { border: 0; border-top: 2px solid var(--bs-body-color); border-radius: 0; background: transparent; }
.bg-panel-head { padding: 1.1rem 0 .9rem; }
.bg-panel-head h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.bg-pad, .bg-empty { padding-inline: 0; }
.bg-table th, .bg-table td { padding-left: 0; }
.bg-table th:last-child, .bg-table td:last-child { padding-right: 6px; }
.bg-table thead th { border-bottom: 2px solid var(--bs-body-color); padding-bottom: .6rem; }
.bg-facts div, .bg-feed li { padding-inline: 0; }
.bg-split { gap: 1.25rem 3rem; }
@media (max-width: 991.98px) { .bg-stat:nth-child(3) { padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .btn, .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn { transition: none; } }
.card-header { background: transparent !important; padding-inline: 0 !important; } /* huraga gives the header a grey band and side padding */
.bg-account .btn { font-family: var(--bs-font-sans-serif); }
/* Between 992 and 1200 px the 4 figures do not fit in one row beside the sidebar: 2 rows of 2. */
@media (max-width: 1199.98px) {
  .bg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .bg-stat:nth-child(n + 3) { border-top: 1px solid var(--bs-border-color); }
}

/* The 4 dashboard characters: the outlined ghost of the logo as a plain ghost, a reaper, a zombie and an astronaut.
   Smooth vector art, not pixel art (owner, November 10, 2026). In dark mode a bone edge keeps the black outline visible. */
.bg-stat-ghost { flex: none; width: auto; height: 60px; margin-left: 2px; } /* 2px: room for the bone edge of the dark mode */
[data-bs-theme="dark"] .bg-stat-ghost { filter: drop-shadow(2px 0 0 #eeede8) drop-shadow(-2px 0 0 #eeede8) drop-shadow(0 2px 0 #eeede8) drop-shadow(0 -2px 0 #eeede8); }
@media (max-width: 575.98px) { .bg-stat-ghost { height: 44px; } }

/* Wide screens: the content stays beside the sidebar. It was in the centre of the free space, far from the menu. */
.bg-main > #wrapper, .bg-main > #footer { margin-inline: 0; }

/* ===================== Dark mode = the black edition of the site (owner, November 12, 2026) =====================
 * The owner: "the dark theme of the fossbilling side of things should match the black theme we have now" (site/black/).
 * Pure black page, pure white ink, 2 greys (#a8a8a8 quiet text, #383838 lines), the font Jost, lower-case headings, white pill buttons.
 * The rules below were the Terminal theme (blue, mono and pixel type, carets). Their colours now have the black-edition values,
 * and the part "Dark mode: the black edition, last rules" at the end of this file sets the font, the headings and the buttons.
 * Earlier text:
 * The corporate site has 2 themes: Corporate (light) and Terminal (dark). The dark mode of the customer area is the
 * Terminal theme: black page, mono type, pixel headings in lower case, terminal blue, prompt buttons with a caret.
 * It is not the light design with the colours turned round. Values come from site/corporate/corp.css. */
@font-face { font-family: "Geist Pixel"; src: url(fonts/geist-pixel-square.woff2) format("woff2"); font-display: swap; }
[data-bs-theme="dark"] {
  --bg-term: #fff; --bg-line2: #383838; --bg-edge: #383838;
  --bs-body-bg: #000; --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: #fff; --bs-body-color-rgb: 255, 255, 255; --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #a8a8a8; --bs-secondary-color-rgb: 168, 168, 168; --bs-tertiary-color: #a8a8a8;
  --bs-secondary-bg: #0d0d0d; --bs-secondary-bg-rgb: 13, 13, 13; --bs-tertiary-bg: #0d0d0d; --bs-tertiary-bg-rgb: 13, 13, 13;
  --bs-border-color: #383838; --bs-border-color-translucent: rgba(255, 255, 255, .12);
  --bs-primary: #fff; --bs-primary-rgb: 255, 255, 255; --bs-primary-text-emphasis: #fff; --bs-primary-bg-subtle: #1a1a1a; --bs-primary-border-subtle: #fff;
  --bs-link-color: #fff; --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
  --bg-surface: #000; --bg-on-accent: #000;
  --bs-font-sans-serif: "Geist Mono", ui-monospace, Menlo, monospace;
  --px-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v1H0zM1 1h2v1H1zM2 2h2v1H2zM3 3h2v1H3zM2 4h2v1H2zM1 5h2v1H1zM0 6h2v1H0z'/%3E%3C/svg%3E");
}
[data-bs-theme="dark"] body { font-size: .95rem; letter-spacing: -.01em; }
[data-bs-theme="dark"] ::selection { background: var(--bs-body-color); color: var(--bs-body-bg); }
[data-bs-theme="dark"] :focus-visible { outline-color: var(--bg-term) !important; }
[data-bs-theme="dark"] :is(h1, h2, .h1, .h2, .bg-hero-title, .bg-dash-title, .bg-panel-head h2, .card-title, .bg-stat-value, .bg-money),
[data-bs-theme="dark"] .card-header :is(h1, h2, h3, h4, h5, h6) { font-family: "Geist Pixel", var(--bs-font-monospace); font-weight: 400; letter-spacing: -.02em; text-transform: lowercase; }
[data-bs-theme="dark"] .bg-stat-value, [data-bs-theme="dark"] .bg-money { text-transform: none; }

/* Prompt buttons: an outline with a pixel caret. The main action is a terminal-blue block. No emboss in this theme. */
[data-bs-theme="dark"] :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn) {
  border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 0 0 1px var(--bg-line2); background: transparent; color: var(--bg-term);
  font: 500 .9rem/1.2 var(--bs-font-monospace); letter-spacing: .02em; text-transform: lowercase; translate: none; gap: .6em;
}
[data-bs-theme="dark"] :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn)::before { content: ""; flex: none; display: inline-block; width: .45em; height: .63em; margin-right: .6em; background: currentColor; -webkit-mask: var(--px-caret) center / contain no-repeat; mask: var(--px-caret) center / contain no-repeat; }
[data-bs-theme="dark"] :is(.bg-order, .bg-hero-btn)::before { margin-right: 0; }
[data-bs-theme="dark"] .bg-order .icon { display: none; }
[data-bs-theme="dark"] :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn):hover { translate: none; box-shadow: inset 0 0 0 1px var(--bg-term); background: color-mix(in srgb, var(--bg-term) 10%, transparent); color: var(--bg-term); }
[data-bs-theme="dark"] :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn):active { translate: none; scale: .97; box-shadow: inset 0 0 0 1px var(--bg-term); }
[data-bs-theme="dark"] .btn:not(.btn-link, .btn-close):focus-visible { box-shadow: inset 0 0 0 1px var(--bg-term); }
[data-bs-theme="dark"] :is(.btn-primary, .btn-success, .btn-dark, .btn-info, .bg-order, .bg-hero-btn:not(.bg-hero-btn-line)), [data-bs-theme="dark"] .bg-account .btn-primary { background: var(--bg-term); color: #000; box-shadow: none; }
[data-bs-theme="dark"] :is(.btn-primary, .btn-success, .btn-dark, .btn-info, .bg-order, .bg-hero-btn:not(.bg-hero-btn-line)):hover, [data-bs-theme="dark"] .bg-account .btn-primary:hover { background: var(--bs-body-color); color: #000; box-shadow: none; }
[data-bs-theme="dark"] :is(.btn-danger, .btn-outline-danger) { color: #fff; background: transparent; }

/* Sidebar */
[data-bs-theme="dark"] .bg-nav-link { font-weight: 400; text-transform: lowercase; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .bg-nav-link:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-nav-link.is-active { background: color-mix(in srgb, var(--bg-term) 9%, transparent); color: var(--bg-term); }
[data-bs-theme="dark"] .bg-nav-link.is-active .bg-badge { background: var(--bg-signal); color: #fff; }
[data-bs-theme="dark"] .bg-slip { filter: none; }
[data-bs-theme="dark"] .bg-account {
  --bs-body-bg: #000; --bs-body-color: #fff; --bs-secondary-color: #a8a8a8; --bs-border-color: #383838;
  clip-path: none; padding: .9rem; border: 1px solid var(--bg-line2); background: #000; color: #fff;
}
[data-bs-theme="dark"] .bg-account-bal { border-top: 1px solid #383838; padding-right: 0; }
[data-bs-theme="dark"] .bg-avatar { background: var(--bg-term); color: #000; }
[data-bs-theme="dark"] .bg-order, [data-bs-theme="dark"] .bg-order:hover, [data-bs-theme="dark"] .bg-order.is-active { margin-right: 0; }

/* The welcome panel is a console window: a black sheet on the dotted page, with a cursor after the greeting. */
[data-bs-theme="dark"] .bg-hero {
  border: 1px solid var(--bg-line2); color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='2' height='2' fill='%23191917'/%3E%3C/svg%3E") 0 0 / 16px 16px, #000;
}
[data-bs-theme="dark"] .bg-hero-title { color: #fff; line-height: 1; }
[data-bs-theme="dark"] .bg-hero-title::after { content: ""; display: inline-block; width: .42em; height: .62em; margin-left: .12em; background: var(--bg-term); animation: bg-blink 1.1s steps(1) infinite; }
@keyframes bg-blink { 50% { opacity: 0; } }
[data-bs-theme="dark"] .bg-hero-line { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .bg-hero-art { filter: none; }

/* Lists, tables and small parts */
[data-bs-theme="dark"] .bg-label, [data-bs-theme="dark"] .bg-stat-label, [data-bs-theme="dark"] .bg-table th, [data-bs-theme="dark"] .bg-facts dt { letter-spacing: .14em; color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-stat-value { color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-stat-value.is-warn { color: var(--bg-signal); }
[data-bs-theme="dark"] .bg-money { color: var(--bg-term); }
[data-bs-theme="dark"] .bg-more { text-transform: lowercase; }
[data-bs-theme="dark"] .bg-pill { border-radius: 0; }
[data-bs-theme="dark"] .bg-pill::before { border-radius: 0; }
[data-bs-theme="dark"] .bg-coin, [data-bs-theme="dark"] .bg-badge, [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { border-radius: 0; }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .input-group-text { border: 1px solid var(--bg-line2); background-color: #000; }
[data-bs-theme="dark"] .form-label { font-weight: 400; }
[data-bs-theme="dark"] .nav-tabs .nav-link { text-transform: lowercase; font-weight: 400; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .nav-tabs .nav-link.active, [data-bs-theme="dark"] .nav-tabs .nav-item.show .nav-link { color: var(--bg-term); box-shadow: inset 0 -2px 0 var(--bg-term); }
[data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .modal-content { border: 1px solid var(--bg-line2); box-shadow: none; }
[data-bs-theme="dark"] .badge.bg-info, [data-bs-theme="dark"] .text-bg-info, [data-bs-theme="dark"] .badge.bg-secondary, [data-bs-theme="dark"] .text-bg-secondary, [data-bs-theme="dark"] .badge.bg-dark, [data-bs-theme="dark"] .text-bg-dark { background-color: transparent !important; color: var(--bs-body-color) !important; box-shadow: inset 0 0 0 1px var(--bg-line2); }
@media (prefers-reduced-motion: reduce) { [data-bs-theme="dark"] .bg-hero-title::after { animation: none; } }

/* ===================== Guests: the layout of the corporate site (November 11, 2026) =====================
 * The owner: "the colors and fonts are right but the layout is not". Guests get the structure of site/corporate:
 * one page width (.bg-wrap is .wrap), the sticky header with the wordmark, a page section in 2 columns (the title
 * on the left, the ruled content on the right), and the footer with a 2px rule. Values come from site/corporate/corp.css.
 * Templates: partial_site_header, partial_site_footer, layout_default (guest part), layout_public, partial_order_page. */
.bg-wrap { width: min(1240px, 100% - clamp(2.5rem, 8vw, 6rem)); margin-inline: auto; }
.bg-site { display: flex; flex-direction: column; min-height: 100vh; border-top: 4px solid var(--bg-signal); font-size: 1.0625rem; line-height: 1.6; }
.bg-skip { position: absolute; left: clamp(1rem, 3vw, 2rem); top: -100px; z-index: 100; padding: .7em 1.1em; border-radius: 4px; background: var(--bs-primary); color: var(--bg-on-accent); font-weight: 700; text-decoration: none; }
.bg-skip:focus { top: .8rem; color: var(--bg-on-accent); }
#main:focus { outline: none; }

/* Header: the wordmark, text links with a signal underline on the current page, and one cobalt button. */
.bg-top { position: sticky; top: 0; z-index: 40; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
.bg-top .bg-wrap { display: flex; align-items: center; gap: 2rem; min-height: 68px; }
.bg-top .bg-logo { height: 32px; }
.bg-topnav, .bg-toplinks { display: flex; align-items: center; gap: 1.6rem; }
.bg-topnav { margin-left: auto; }
.bg-toplinks a { position: relative; padding-block: .4rem; color: var(--bs-body-color); font-weight: 500; text-decoration: none; }
.bg-toplinks a[aria-current="page"]::after, .bg-toplinks a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--bg-signal); }
.bg-toplinks a:not([aria-current]):hover::after { background: var(--bs-tertiary-color); }
.bg-toplinks a:focus-visible, .bg-foot a:focus-visible { outline: 2px solid var(--bg-signal); outline-offset: 3px; }
.bg-topnav .btn { --bs-btn-padding-x: 1.1em; --bs-btn-padding-y: .7em; --bs-btn-font-size: 1rem; line-height: 1; margin-right: 4px; white-space: nowrap; }
.bg-menu-toggle { display: none; }
@media (min-width: 901px) { .bg-toplinks.collapse { display: flex !important; height: auto !important; } }
@media (max-width: 900px) {
  .bg-top .bg-wrap { gap: 1rem; }
  .bg-topnav { gap: .75rem; }
  .bg-menu-toggle { display: inline-flex; }
  .bg-toplinks { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1.25rem, 4vw, 3rem) 1rem; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); }
  .bg-toplinks a { padding-block: .8rem; border-bottom: 1px solid var(--bs-border-color); }
  .bg-toplinks a:last-child { border-bottom: 0; }
  .bg-toplinks a::after { display: none; }
  .bg-toplinks a[aria-current="page"] { color: var(--bs-primary); }
}
@media (max-width: 520px) {
  .bg-top .bg-logo { height: 26px; }
  .bg-topnav .btn { --bs-btn-padding-x: .85em; --bs-btn-padding-y: .65em; }
}

/* Page: the corporate page head and section. The title is on the left, the content starts with a 2px rule on the right. */
.bg-page { flex: 1; padding-block: clamp(3rem, 7vw, 6rem) clamp(4.5rem, 9vw, 8rem); }
.bg-site .breadcrumb { display: none !important; } /* a guest page is 1 level below the home page: the header is the navigation */
.bg-site .content-block > .row > .col-md-12 > .card { border-top: 0; margin-bottom: 0 !important; }
.bg-site .content-block > .row > .col-md-12 > .card > .card-header { border-bottom: 0; padding: 0 0 clamp(2rem, 4vw, 3rem) !important; }
.bg-site .card-header h1, .bg-auth .card-body > h5 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 800; line-height: .94; letter-spacing: -.04em; margin: 0 !important; text-wrap: balance; }
.bg-site .card-header h1 ~ :is(span, p), .bg-about > p { display: block; max-width: 36em; margin: 1rem 0 0; font-size: 1rem; color: var(--bs-secondary-color); }
.bg-site .card-header h1 + :is(span, p), .bg-about > p:first-child { margin-top: 1.4rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.45; }
.bg-site .card-header .currency_selector { width: auto; margin: 1.5rem 0 0 !important; }
.bg-site .content-block > .row > .col-md-12 > .card > .card-header + * { border-top: 2px solid var(--bs-body-color); }
.bg-site .content-block > .row > .col-md-12 > .card > .card-footer { padding-inline: 0; color: var(--bs-secondary-color); }
@media (min-width: 992px) {
  .bg-page:not(.bg-page-menu) .content-block > .row > .col-md-12 > .card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .bg-page:not(.bg-page-menu) .content-block > .row > .col-md-12 > .card > .card-header { grid-column: 1; grid-row: 1 / span 6; position: sticky; top: calc(68px + 2rem); padding-bottom: 0 !important; }
  .bg-page:not(.bg-page-menu) .content-block > .row > .col-md-12 > .card > :not(.card-header) { grid-column: 2; min-width: 0; }
}
@media (min-width: 768px) { .bg-page-menu { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 3rem; align-items: start; } }

/* The ruled list of the corporate site (the guest home page). */
.bg-ruled { list-style: none; margin: 0; padding: 0; }
.bg-ruled li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: .5rem 2rem; align-items: center; padding: 1.2rem 6px 1.2rem 0; border-bottom: 1px solid var(--bs-border-color); }
.bg-ruled strong { font-weight: 700; }
.bg-ruled span { color: var(--bs-secondary-color); }
.bg-ruled-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 575.98px) { .bg-ruled li { grid-template-columns: minmax(0, 1fr); padding-bottom: 1.5rem; } .bg-ruled li > .btn { justify-self: start; } }

/* Sections that open and close: a chevron on the right, like the questions of the corporate support page. */
.accordion-button::after, .accordion-button:not(.collapsed)::after { flex: none; width: .75rem; height: .75rem; margin: -.35rem .3rem 0 auto; background: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
/* The chevron follows the panel, not the button class: the stock cart step has an "open" button with a closed panel. */
.accordion-item:has(> .accordion-collapse.show) .accordion-button::after { transform: translateY(.35rem) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .accordion-button::after { transition: none; } }

/* The order page: the steps are a ruled list, like the questions of the corporate support page.
   .bg-order-page is in partial_order_page.html.twig. Signed-in customers get the same steps in the app shell. */
.bg-order-page .card { border: 0; margin: 0 !important; }
.bg-order-page .card-body { padding: 0 !important; overflow: visible !important; }
.bg-order-page .accordion { --bs-accordion-btn-padding-y: 1.2rem; --bs-accordion-body-padding-y: .25rem; }
.bg-order-page .accordion-item:first-of-type { border-top: 0; }
.bg-order-page .accordion-button { font-size: 1.1rem; }
.bg-order-page .accordion-body { padding-bottom: 2rem; }
.bg-order-page #order .accordion-body { max-width: 44rem; } /* the form fields; the product list and the cart use the full width */
.bg-order-page #products h4 { margin: 1.75rem 0 .25rem !important; font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; }
.bg-order-page #products .list-group { margin-top: .75rem; }
.bg-order-page #products .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; font-weight: 500; }
.bg-order-page #products .list-group-item:hover { color: var(--bs-primary); }
.bg-order-page .well > :is(h3, h4, p, hr) { display: none; } /* the product name and the description are in the page title */
.bg-order-page .well > .row { display: block; margin: 0; }
.bg-order-page .well > .row > * { width: 100%; max-width: none; padding: 0; }
.bg-order-page .well > .row > :first-child > span, .bg-order-page fieldset > .form-label { display: block; margin: 1.4rem 0 .4rem; font-weight: 600; font-size: .9rem; color: var(--bs-secondary-color); }
.bg-order-page .well > .row:first-of-type > :first-child > span { margin-top: .5rem; }
.bg-order-page fieldset > .form-text { margin-bottom: .6rem !important; max-width: 62ch; }
.bg-order-page fieldset > .form-text > p { margin: 0; }
.bg-order-page form > .mt-2 { margin-top: 1.75rem !important; }
.bg-site .bg-order-page > .card-body { border-top-width: 2px; }

/* Account pages (login, signup, password reset): the same section. The stock heading is the page title on the left,
   the form is on the right below a 2px rule. The logo above the form is off, because the header has it. */
.bg-auth .bg-page > .container, .bg-auth .bg-page > div > .row, .bg-auth .bg-page > div > .row > [class*="col-"] { display: block; width: auto; max-width: none; height: auto !important; margin: 0; padding: 0; }
.bg-auth .bg-page > div > .row > [class*="col-"] > .d-flex:first-child { display: none !important; }
.bg-auth .card { border-top: 0; }
.bg-auth .card-body { padding: 0; }
.bg-auth .card-body > h5 { text-align: left !important; margin-bottom: clamp(2rem, 4vw, 3rem) !important; }
.bg-auth .card-body > form > *, .bg-auth .card-body > :not(h5, form) { max-width: 30rem; } /* the rule has the width of the column, the fields are narrower */
.bg-auth .card-body > form { border-top: 2px solid var(--bs-body-color); padding-top: 1.5rem; }
.bg-auth .card-body > :not(h5, form) { padding-right: 5px; } /* room for the emboss of the last button */
@media (min-width: 992px) {
  .bg-auth .card-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .bg-auth .card-body > h5 { grid-column: 1; grid-row: 1 / span 6; margin-bottom: 0 !important; }
  .bg-auth .card-body > :not(h5) { grid-column: 2; width: 100%; }
}

/* Footer: a 2px rule, the wordmark with one sentence, 3 lists. The last row has the signature, the language and the mode. */
.bg-foot { border-top: 2px solid var(--bs-body-color); padding-block: 3rem 2rem; font-size: .95rem; }
.bg-foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2rem; }
.bg-foot h3 { margin: 0 0 .8rem; font-size: .85rem; font-weight: 600; letter-spacing: 0; color: var(--bs-secondary-color); }
.bg-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bg-foot a { color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
.bg-foot a:hover { text-decoration: underline; text-underline-offset: .22em; }
.bg-foot-about { max-width: 26em; color: var(--bs-secondary-color); }
.bg-foot-about .bg-brand { margin-bottom: .9rem; }
.bg-foot-about .bg-logo { height: 28px; }
.bg-foot-about p { margin: 0; }
.bg-foot-about .bg-coins { justify-content: flex-start; margin-top: 1rem; color: var(--bs-body-color); }
.bg-foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bs-border-color); font-size: .875rem; color: var(--bs-secondary-color); }
.bg-foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.bg-foot-tools .form-select { width: auto; min-width: 10rem; }
.bg-mode { display: inline-flex; align-items: center; gap: .4rem; }
.bg-mode .icon { width: 1rem; height: 1rem; }
@media (max-width: 960px) {
  .bg-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-foot-about, .bg-foot-grid > div:last-child { grid-column: 1 / -1; }
}

/* Dark mode: the Terminal header and footer of the corporate site. */
[data-bs-theme="dark"] .bg-site { border-top-color: var(--bg-term); font-size: inherit; }
[data-bs-theme="dark"] .bg-top { background-color: color-mix(in srgb, var(--bs-body-bg) 82%, transparent); backdrop-filter: blur(6px); }
[data-bs-theme="dark"] .bg-toplinks a { text-transform: lowercase; color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .bg-toplinks a:hover { color: var(--bs-body-color); }
[data-bs-theme="dark"] .bg-toplinks a::after { display: none; }
[data-bs-theme="dark"] .bg-toplinks a[aria-current="page"] { color: var(--bg-term); }
[data-bs-theme="dark"] .bg-toplinks a[aria-current="page"]::before { content: ""; display: inline-block; width: .45em; height: .63em; margin-right: .55em; background: currentColor; -webkit-mask: var(--px-caret) center / contain no-repeat; mask: var(--px-caret) center / contain no-repeat; }
[data-bs-theme="dark"] .bg-topnav .btn { margin-right: 0; }
[data-bs-theme="dark"] .bg-auth .card-body > h5 { font-family: "Geist Pixel", var(--bs-font-monospace); font-weight: 400; letter-spacing: -.02em; text-transform: lowercase; }
[data-bs-theme="dark"] .bg-foot, [data-bs-theme="dark"] .bg-auth .card-body > form, [data-bs-theme="dark"] .bg-site .content-block > .row > .col-md-12 > .card > .card-header + * { border-top-color: var(--bg-line2); }
[data-bs-theme="dark"] .bg-foot a, [data-bs-theme="dark"] .bg-foot h3 { text-transform: lowercase; }
@media (min-width: 901px) { [data-bs-theme="dark"] .bg-toplinks { gap: 2.2rem; } }
@media (max-width: 900px) { [data-bs-theme="dark"] .bg-toplinks { background: var(--bs-body-bg); } }

/* ===================== The console: signed-in customers (November 11, 2026) =====================
 * The owner: "do admin and client dashboard to look like firebase with our color". A signed-in customer gets the
 * layout and the parts of a cloud console, in the BootGhost colours and fonts:
 *   a dark cobalt sidebar with the menu in groups and the balance at its end, a top bar with the account menu,
 *   a cobalt band on the dashboard with the 4 figures on its lower edge, cards with a soft shadow, and pill buttons.
 * Part 1 is the structure, for light and dark mode. Part 2 is the look of light mode. Part 3 is the look of dark mode.
 * Guests keep the corporate look (.bg-site). Templates: partial_shell_sidebar, layout_default. */

/* ---- Part 1: structure ---- */
.bg-shell { --bg-pad: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 768px) { .bg-shell { grid-template-columns: 256px minmax(0, 1fr); } }
.bg-main { padding: 0; }
.bg-main > #wrapper { padding: 1.5rem var(--bg-pad) 0; }
.bg-main > #footer { width: auto; max-width: none; margin: 3rem var(--bg-pad) 1.5rem; }

.bg-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: 0 var(--bg-pad); background: var(--bs-body-bg); }
.bg-topbar-crumbs { min-width: 0; }
.bg-topbar-crumbs .breadcrumb { margin: 0; flex-wrap: nowrap; white-space: nowrap; }
.bg-topbar-crumbs .breadcrumb-item.active { color: var(--bs-body-color); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.bg-topbar-tools { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.bg-icon-btn, .bg-avatar-btn, .bg-nav-gear { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bs-secondary-color); transition: background-color .15s, color .15s; }
.bg-icon-btn .icon, .bg-nav-gear .icon { width: 1.25rem; height: 1.25rem; }
:is(.bg-icon-btn, .bg-avatar-btn):hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
:is(.bg-icon-btn, .bg-avatar-btn, .bg-nav-gear):focus-visible { outline: 2px solid var(--bg-signal); outline-offset: 2px; }
.bg-avatar-btn .bg-avatar { border-radius: 50%; }
.bg-account-menu { min-width: 15rem; padding: .5rem; }
.bg-menu-id { display: grid; gap: .1rem; padding: .5rem .75rem .75rem; margin-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color); }
.bg-menu-id span { font-size: .8125rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; }
.bg-account-menu .dropdown-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; }
.bg-account-menu .dropdown-item .icon { width: 1rem; height: 1rem; }

.bg-side-inner { gap: .5rem; }
.bg-side-nav { display: grid; gap: 2px; }
.bg-nav-home { display: flex; align-items: center; gap: .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--bs-border-color); }
.bg-nav-home .bg-nav-link { flex: 1; }
.bg-nav-gear { width: 2.25rem; height: 2.25rem; }
.bg-nav-gear:hover, .bg-nav-gear.is-active { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.bg-nav-group { margin: 1rem 0 .25rem; padding: 0 .75rem; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); }
.bg-side .bg-account { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .bg-icon-btn, .bg-avatar-btn, .bg-nav-gear { transition: none; } }

/* ---- Part 2: the look, light mode ---- */
[data-bs-theme="light"] .bg-shell {
  --c-rail: #0a1f4d; --c-rail-fg: #d9dfee; --c-rail-sub: #a3b3d8; --c-rail-line: rgb(238 237 232 / .14); --c-rail-hover: rgb(238 237 232 / .08); --c-rail-on: rgb(77 124 255 / .28);
  --c-card: #fcfbf8; --c-line: #dddcd5; --c-line-2: #b4b3ad; --c-r: 12px;
  --c-shadow: 0 1px 2px rgb(20 20 20 / .1), 0 2px 8px rgb(20 20 20 / .06);
  --c-shadow-2: 0 2px 6px rgb(20 20 20 / .12), 0 12px 28px rgb(20 20 20 / .12);
  --bg-surface: var(--c-card); --bs-border-color: var(--c-line); --bs-secondary-bg: #e4e3dd; --bs-tertiary-bg: #f1f0eb;
  /* The font of the Linear reference, as in dark mode (owner, November 12, 2026: "Update light theme too"). Guests keep Schibsted Grotesk. */
  --bs-font-sans-serif: "Inter Variable", "Inter", system-ui, sans-serif;
  font-family: var(--bs-font-sans-serif); font-feature-settings: "cv01", "ss03"; letter-spacing: -.01em;

  :focus-visible { outline-color: var(--bs-primary); }
  h1, h2, .h1, .h2 { font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }

  /* Sidebar: the rail. The white wordmark, pill links, the current page in a blue tint. */
  .bg-side { --bs-offcanvas-bg: var(--c-rail); --bs-border-color: var(--c-rail-line); --bs-secondary-color: var(--c-rail-sub); --bs-body-color: #fff; --bs-tertiary-bg: var(--c-rail-hover);
    background-color: var(--c-rail) !important; /* Bootstrap makes .offcanvas-md transparent with !important */
    border-right: 0; color: var(--c-rail-fg); scrollbar-color: rgb(238 237 232 / .25) transparent; }
  .bg-side-inner { padding: 1rem .75rem; }
  .bg-side-top { padding: .375rem .75rem 1rem; }
  .bg-side .bg-logo-light { display: none; }
  .bg-side .bg-logo-dark { display: block; }
  .bg-side .btn-close { filter: invert(1); }
  .bg-side :focus-visible { outline-color: #fff; }
  .bg-nav-link { padding: .5rem .75rem; border-radius: 999px; color: var(--c-rail-fg); font-weight: 500; font-size: .9rem; }
  .bg-nav-link:hover { background: var(--c-rail-hover); color: #fff; }
  .bg-nav-link.is-active { background: var(--c-rail-on); color: #fff; font-weight: 600; }
  .bg-nav-link.is-active .icon { color: #b9cbff; }
  .bg-badge, .bg-nav-link.is-active .bg-badge { background: #c2402a; color: #fff; font-family: var(--bs-font-sans-serif); }
  .bg-side .bg-account { clip-path: none; padding: .875rem; border: 1px solid var(--c-rail-line); border-radius: var(--c-r); background: var(--c-rail-hover); color: var(--c-rail-fg); font-family: var(--bs-font-sans-serif); }
  .bg-side .bg-label { font-family: var(--bs-font-sans-serif); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-rail-sub); }
  .bg-side .bg-money { font-family: var(--bs-font-sans-serif); font-variant-numeric: normal; font-size: 1.25rem; font-weight: 700; color: #fff; }
  .bg-side .bg-account .btn-primary, .bg-side .bg-account .btn-primary:hover { background-color: #eeede8; color: #0c388d; }

  /* Top bar */
  .bg-avatar { background: var(--bs-primary); color: #eeede8; font-family: var(--bs-font-sans-serif); }
  .bg-menu-btn { display: grid; gap: 4px; width: 2.5rem; height: 2.5rem; place-content: center; padding: 0; background: none; }

  /* Buttons: pills. Cobalt for the main action, an outline for the others, a red tint for a dangerous action. No emboss. */
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn, .bg-menu-btn) { --d: 0px; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none; font-weight: 600; translate: none; transition: background-color .15s, color .15s, box-shadow .15s, scale .1s; }
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn):hover { translate: none; box-shadow: var(--c-shadow); }
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn, .bg-menu-btn):active { translate: none; scale: .98; box-shadow: none; }
  .btn:not(.btn-link, .btn-close):focus-visible { box-shadow: none; outline: 2px solid var(--bs-primary); outline-offset: 2px; }
  .btn:not(.btn-sm, .btn-link, .btn-close) { --bs-btn-padding-x: 1.25rem; }
  .btn-sm { --bs-btn-padding-x: .875rem; }
  :is(.btn-primary, .btn-success, .btn-dark, .btn-info):hover { background-color: #0a2f77; }
  .btn:is(.btn-secondary, .btn-light, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark), .bg-copy-btn.bg-copy-btn { background-color: transparent; color: var(--bs-primary); border-color: var(--c-line-2) !important; }
  .btn:is(.btn-secondary, .btn-light, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark):hover, .bg-copy-btn.bg-copy-btn:hover { background-color: color-mix(in srgb, var(--bs-primary) 7%, transparent); color: var(--bs-primary); box-shadow: none; }
  :is(.btn-danger, .btn-outline-danger), :is(.btn-danger, .btn-outline-danger):hover { background-color: color-mix(in srgb, var(--bg-signal) 13%, var(--c-card)); color: #a8341f; }
  .btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

  /* Cards: a white sheet with round corners and a soft shadow. A card in a card is flat. */
  .card { --bs-card-bg: var(--c-card); --bs-card-spacer-x: 1.25rem; --bs-card-spacer-y: 1.25rem; --bs-card-cap-padding-x: 1.25rem; --bs-card-cap-padding-y: 1rem; --bs-card-border-radius: var(--c-r); --bs-card-inner-border-radius: var(--c-r);
    border: 0; border-radius: var(--c-r); background: var(--c-card); box-shadow: var(--c-shadow); }
  .card .card { box-shadow: none; background: transparent; }
  .card-header { padding-inline: 1.25rem !important; border-bottom: 1px solid var(--c-line); }
  .card-header :is(h1, h2, h3, h4, h5, h6), .card-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
  .card-footer { border-top: 1px solid var(--c-line); }
  .list-group { --bs-list-group-item-padding-x: 1.25rem; }
  .card-body .list-group { --bs-list-group-item-padding-x: 0; }
  .alert { --bs-alert-border-radius: var(--c-r); border-width: 1px; }
  .dropdown-menu { --bs-dropdown-border-radius: var(--c-r); --bs-dropdown-bg: var(--c-card); border: 0; border-radius: var(--c-r); box-shadow: var(--c-shadow-2); }
  .dropdown-item { border-radius: 8px; }
  .modal-content { border: 0; border-radius: 16px; background: var(--c-card); box-shadow: var(--c-shadow-2); }
  .badge { --bs-badge-border-radius: 999px; border-radius: 999px; font: 600 .72rem/1 var(--bs-font-sans-serif); padding: .4em .7em; }

  /* Tables: a quiet head row and thin lines. */
  .table > :not(caption) > * > * { padding: .8rem .75rem; }
  .table > thead > tr > * { font-size: .75rem; font-weight: 600; border-bottom: 1px solid var(--c-line); }
  .card > .table > :not(caption) > * > :first-child, .card > .table-responsive > .table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
  .card > .table > :not(caption) > * > :last-child, .card > .table-responsive > .table > :not(caption) > * > :last-child { padding-right: 1.25rem; }

  /* Tabs and forms: cobalt shows the current tab and the field in use. */
  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--bs-primary); box-shadow: inset 0 -3px 0 var(--bs-primary); }
  .form-control, .form-select, .input-group-text { border: 1px solid var(--c-line-2); border-radius: 8px; background-color: var(--c-card); }
  .form-control:focus, .form-select:focus { outline: 0; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgb(12 56 141 / .18); }
  .form-check-input { border: 1px solid var(--c-line-2); }
  .form-check-input:checked { border-color: var(--bs-primary); }

  /* The order steps are in a card: the list needs the card padding. */
  .bg-order-page > .card-body { padding: 0 1.25rem .5rem !important; }
  .bg-order-page .accordion-item:last-of-type { border-bottom: 0; }

  /* Dashboard: the cobalt band has the width of the main area. The 4 figures are cards on its lower edge. */
  .bg-dash { gap: 1.25rem; font-size: 1rem; }
  .bg-hero { margin-inline: calc(-1 * var(--bg-pad)); padding: 1rem var(--bg-pad) 2.25rem; border-radius: 0; }
  .bg-hero-title { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-bottom: .5rem; }
  .bg-hero-line { font-size: 1.0625rem; margin-bottom: 1.25rem; }
  .bg-hero-btn { padding: .625rem 1.25rem; }
  .bg-hero-btn, .bg-hero-btn:hover { background: #eeede8; color: #0c388d; }
  .bg-hero-btn.bg-hero-btn-line, .bg-hero-btn.bg-hero-btn-line:hover { background: transparent; color: #eeede8; border-color: rgb(238 237 232 / .55) !important; }
  .bg-hero-btn.bg-hero-btn-line:hover { background: rgb(238 237 232 / .1); box-shadow: none; }
  .bg-hero-btn:focus-visible { outline: 2px solid #eeede8; outline-offset: 2px; }
  .bg-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; border: 0; border-radius: 0; background: none; overflow: visible; }
  .bg-stat, .bg-stat:first-child { padding: 1.125rem 1.25rem; border: 0 !important; border-radius: var(--c-r); background: var(--c-card); box-shadow: var(--c-shadow); }
  .bg-stat-label { font-family: var(--bs-font-sans-serif); font-size: .8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .bg-stat-value { font-family: var(--bs-font-sans-serif); font-variant-numeric: normal; font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
  .bg-stat-ghost { height: 52px; }
  .bg-panel { border: 0; border-radius: var(--c-r); background: var(--c-card); box-shadow: var(--c-shadow); overflow: hidden; }
  .bg-panel-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-line); }
  .bg-panel-head h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
  .bg-table th, .bg-table td { padding-inline: 1.25rem; }
  .bg-table th { font-family: var(--bs-font-sans-serif); font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
  .bg-table thead th { border-bottom: 1px solid var(--c-line); }
  .bg-facts div, .bg-feed li, .bg-pad, .bg-empty { padding-inline: 1.25rem; }
  .bg-facts dt { font-family: var(--bs-font-sans-serif); font-size: .875rem; letter-spacing: 0; text-transform: none; }
  .bg-notice { border-width: 1px; border-radius: var(--c-r); background: var(--c-card); }
  .bg-split { gap: 1.25rem; }
  @media (min-width: 768px) {
    .bg-hero:has(+ .bg-stats) { padding-bottom: 5.25rem; }
    .bg-hero + .bg-stats { position: relative; margin-top: -4.25rem; }
    .bg-hero:has(+ .bg-stats) .bg-hero-art { width: 150px; margin: -1rem 0 -2.25rem; } /* Bootsy stands on the cards */
  }
  @media (max-width: 1199.98px) { .bg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 359.98px) { .bg-stats { grid-template-columns: minmax(0, 1fr); } }
}
/* On the dashboard, the top bar is a part of the cobalt band. */
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar { background: #0c388d; --bs-secondary-color: #c9d6f4; --bs-body-color: #fff; --bs-secondary-bg: rgb(238 237 232 / .14); }
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar :is(.bg-menu-btn span) { background: #eeede8; }
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar .bg-logo-light { display: none; }
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar .bg-logo-dark { display: block; }
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar .bg-avatar { background: #eeede8; color: #0c388d; }
[data-bs-theme="light"] .dashboard .bg-shell .bg-topbar :focus-visible { outline-color: #fff; }
[data-bs-theme="light"] .dashboard .bg-shell .bg-main > #wrapper { padding-top: 0; }

@font-face { font-family: "Inter Variable"; src: url(fonts/inter-variable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
/* ---- Part 3: the look, dark mode = the black edition of the site (owner, November 12, 2026) ----
 * The owner: "the black theme dashboard should match black theme actually". Until that day this part was a console in the
 * style of Linear with the black-edition colours: small type, hairline cards with round corners, characters in colour.
 * Now a signed-in customer in dark mode gets the parts of site/black/black.css:
 *   a pure black page with white ink, Jost only, heavy lower-case headings, white pill buttons that invert,
 *   the ink drawing of the ghost, and one white rack plate with 2 ears for the 4 figures of the dashboard.
 * No colour. A state is a fill that inverts, or a dashed line for a server that does not run.
 * A section has no box: a 1px line (#383838) divides its rows. Light mode (Part 2) does not change.
 * Each rule starts with [data-bs-theme="dark"] .bg-shell. The art is a copy from site/black/img (assets/img/black-*.webp). */
[data-bs-theme="light"] .bg-art-dark, [data-bs-theme="dark"] .bg-art-light { display: none; }
[data-bs-theme="dark"] .bg-shell {
  --d-bg: #000; --d-fg: #fff; --d-sub: #a8a8a8; --d-line: #383838; --d-font: "Jost", Futura, "Century Gothic", sans-serif;
  --bs-body-bg: var(--d-bg); --bs-body-color: var(--d-fg); --bs-emphasis-color: var(--d-fg); --bs-secondary-color: var(--d-sub); --bs-tertiary-color: var(--d-sub);
  --bs-secondary-bg: #141414; --bs-tertiary-bg: #141414; --bs-border-color: var(--d-line); --bs-primary: #fff; --bs-link-color: #fff; --bs-link-hover-color: #fff;
  --bg-surface: var(--d-bg); --bg-on-accent: var(--d-bg); --bg-edge: #fff; --bg-line2: var(--d-line);
  --bs-font-sans-serif: var(--d-font);
  background: var(--d-bg); color: var(--d-fg); font-family: var(--d-font); font-size: 1rem; line-height: 1.5; letter-spacing: 0;

  :is(h1, h2, .h1, .h2, .bg-hero-title, .bg-dash-title, .bg-panel-head h2, .card-title), .card-header :is(h1, h2, h3, h4, h5, h6) { font-family: var(--d-font); font-weight: 800; letter-spacing: -.04em; line-height: .95; text-transform: lowercase; color: #fff; }
  :is(.bg-nav-link, .bg-nav-gear, .bg-icon-btn, .bg-brand, .bg-hero-btn, .dropdown-item, .breadcrumb a) { text-decoration: none; }

  /* Sidebar: the links of the site header, in a column. The current page is a white pill, like a selected port label. */
  .bg-side { --bs-offcanvas-bg: #000; background-color: #000 !important; border-right: 1px solid var(--d-line); }
  .bg-side-inner { padding: 1rem .875rem; gap: .25rem; }
  .bg-side-top { padding: .25rem .7rem 1rem; }
  .bg-nav-home { border-bottom-color: var(--d-line); }
  .bg-nav-link { gap: .7rem; padding: .4rem .8rem .46rem; border-radius: 99px; color: #fff; font-size: 1.05rem; font-weight: 500; text-transform: none; }
  .bg-nav-link .icon { width: 1.15rem; height: 1.15rem; opacity: 1; }
  .bg-nav-link:hover { background: none; color: #fff; }
  .bg-nav-link:hover > span:not(.bg-badge) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
  .bg-nav-link.is-active { background: #fff; color: #000; font-weight: 700; }
  .bg-nav-link.is-active:hover > span { text-decoration: none; }
  .bg-badge { min-width: 1.4rem; border-radius: 99px; background: #fff; color: #000; font: 700 .8rem/1.4rem var(--d-font); }
  .bg-nav-link.is-active .bg-badge { background: #000; color: #fff; }
  .bg-nav-group { margin: 1.1rem 0 .3rem; padding: 0 .8rem; font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--d-sub); }
  .bg-nav-gear { width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; }
  .bg-nav-gear .icon { width: 1.15rem; height: 1.15rem; }
  .bg-nav-gear:hover, .bg-nav-gear.is-active { background: #fff; color: #000; }
  .bg-side .bg-account { padding: 1rem .7rem .25rem; border: 0; border-top: 1px solid var(--d-line); border-radius: 0; background: none; color: #fff; font-family: var(--d-font); }
  .bg-side .bg-account-bal { padding: 0; border: 0; }
  .bg-side .bg-label { font: 500 .9rem/1.3 var(--d-font); letter-spacing: 0; text-transform: none; color: var(--d-sub); }
  .bg-side .bg-money { font-family: var(--d-font); font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; text-transform: none; color: #fff; }

  /* Top bar: black with a line. Round buttons that invert. */
  .bg-topbar { min-height: 60px; border-bottom: 1px solid var(--d-line); }
  .bg-topbar-crumbs .breadcrumb { font-size: .95rem; }
  .bg-topbar-crumbs .breadcrumb a { color: var(--d-sub); }
  .bg-topbar-crumbs .breadcrumb a:hover { color: #fff; text-decoration: underline; }
  :is(.bg-icon-btn, .bg-avatar-btn) { width: 2.25rem; height: 2.25rem; border-radius: 50%; color: #fff; }
  .bg-icon-btn:hover { background: #fff; color: #000; }
  .bg-icon-btn .icon { width: 1.15rem; height: 1.15rem; }
  .bg-avatar, .bg-avatar-btn .bg-avatar { width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; background: #fff; color: #000; font: 800 .8rem/1 var(--d-font); }
  .bg-menu-id strong { font-weight: 700; }

  /* Buttons: a white pill with black ink. It inverts under the pointer. The second action is a line pill. */
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn, .bg-menu-btn) { border: 2px solid #fff !important; border-radius: 99px !important; box-shadow: none; background: #fff; color: #000;
    font: 700 1rem/1.15 var(--d-font); letter-spacing: 0; text-transform: lowercase; text-decoration: none; gap: .5rem; padding: .55em 1.2em .62em; translate: none; scale: none; transition: background-color .15s, color .15s; }
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn, .bg-menu-btn)::before { content: none; }
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn):is(:hover, :focus-visible) { box-shadow: none; background: #000; color: #fff; }
  :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-copy-btn):active { scale: .98; box-shadow: none; }
  .btn:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger, .btn-secondary, .btn-light, .btn-default, .btn-danger, .btn-ghost-secondary), .bg-hero-btn.bg-hero-btn-line, .bg-copy-btn.bg-copy-btn { background: #000; color: #fff; }
  .btn:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger, .btn-secondary, .btn-light, .btn-default, .btn-danger, .btn-ghost-secondary):is(:hover, :focus-visible), .bg-hero-btn.bg-hero-btn-line:hover, .bg-copy-btn.bg-copy-btn:hover { background: #fff; color: #000; }
  .btn:is(.btn-danger, .btn-outline-danger) { border-style: dashed !important; } /* an action that deletes or stops */
  .btn.btn-sm, .bg-copy-btn.bg-copy-btn { padding: .36em .95em .44em; font-size: .9rem; }
  .bg-hero-btn { font-size: 1.05rem; padding: .7em 1.35em .78em; }
  .bg-menu-btn.bg-menu-btn { display: grid; gap: 4px; place-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-color: transparent !important; background: none; color: #fff; }
  .btn:disabled, .btn.disabled { opacity: .5; }
  /* The 2 payment buttons of the invoice page keep their comic-book shape (the part "Payment methods on the invoice page"). */
  .invoice-gateway label.btn.btn { border: 3px solid #000 !important; border-radius: 12px !important; }
  :is(h1, h2, h3, h4, h5).fw-light { font-weight: 800 !important; } /* the stock invoice number is thin */

  /* Cards on the other pages: black, with a 1px line and the 3px corner of the plates. A card in a card is flat. */
  .card { --bs-card-bg: #000; --bs-card-spacer-x: 1.25rem; --bs-card-spacer-y: 1.25rem; --bs-card-cap-padding-x: 1.25rem; --bs-card-cap-padding-y: 1rem; --bs-card-border-radius: 3px; --bs-card-inner-border-radius: 3px;
    border: 1px solid var(--d-line); border-radius: 3px; background: #000; box-shadow: none; }
  .card .card { border: 0; background: transparent; }
  .card-header { padding-inline: 1.25rem !important; border-bottom: 1px solid var(--d-line); }
  .card-header :is(h1, h2, h3, h4, h5, h6), .card-title { font-size: 1.5rem; line-height: 1.05; }
  .card-header p, .card-subtitle { font-size: .95rem; color: var(--d-sub); }
  .card-footer { border-top: 1px solid var(--d-line); }
  .list-group { --bs-list-group-item-padding-x: 1.25rem; --bs-list-group-border-color: var(--d-line); }
  .card-body .list-group { --bs-list-group-item-padding-x: 0; }
  .accordion { --bs-accordion-border-color: var(--d-line); }
  .accordion-button { font-size: 1.05rem; font-weight: 700; }
  .alert { --bs-alert-border-radius: 3px; border: 1px solid #fff; }
  .dropdown-menu { --bs-dropdown-bg: #000; --bs-dropdown-border-radius: 3px; padding: .4rem; border: 1px solid #fff; border-radius: 3px; box-shadow: none; font-size: 1rem; }
  .dropdown-item { border-radius: 99px; text-transform: none; color: #fff; }
  .dropdown-item:is(:hover, :focus) { background: #fff; color: #000; }
  .modal-content { border: 1px solid #fff; border-radius: 3px; background: #000; box-shadow: none; }
  .badge { --bs-badge-border-radius: 99px; padding: .32em .7em .38em; font: 700 .8rem/1 var(--d-font); }
  /* The status of a server: it runs = a white fill. It waits = a white line. It does not run = a dashed line. */
  .bg-pill { gap: 0; padding: .14em .72em .2em; border: 1.5px solid #fff; border-radius: 99px; background: none; color: #fff; font-size: .9rem; font-weight: 700; text-transform: lowercase; white-space: nowrap; }
  .bg-pill::before { content: none; }
  .bg-pill.bg-pill-active { background: #fff; color: #000; }
  .bg-pill:is(.bg-pill-suspended, .bg-pill-canceled, .bg-pill-failed_renew, .bg-pill-failed_setup) { border-style: dashed; }
  .bg-coin { border-color: var(--d-line); border-radius: 99px; }

  /* Tables: a quiet head row and 1px lines. */
  .table { --bs-table-hover-bg: #141414; --bs-table-border-color: var(--d-line); font-size: 1rem; }
  .table > :not(caption) > * > * { padding: .8rem .75rem; }
  .table > thead > tr > * { font-size: .9rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--d-sub); border-bottom: 1px solid var(--d-line); }
  .table > tbody > tr:hover > * { background-color: #141414; }
  .card > .table > :not(caption) > * > :first-child, .card > .table-responsive > .table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
  .card > .table > :not(caption) > * > :last-child, .card > .table-responsive > .table > :not(caption) > * > :last-child { padding-right: 1.25rem; }

  /* Tabs: the links of the site header. Forms: black fields with a white line and the 3px corner. */
  .nav-tabs { border-bottom-color: var(--d-line); }
  .nav-tabs .nav-link { font-size: 1.05rem; font-weight: 500; text-transform: none; color: #fff; }
  .nav-tabs .nav-link:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }
  .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff !important; font-weight: 700; box-shadow: inset 0 -2px 0 #fff; text-decoration: none; } /* a stock rule sets this colour with !important */
  .form-control, .form-select, .input-group-text { border: 1.5px solid #fff; border-radius: 3px; background-color: #000; color: #fff; font-size: 1rem; }
  .form-control:focus, .form-select:focus { outline: 2px solid #fff; outline-offset: 2px; border-color: #fff; box-shadow: none; }
  .form-label { font-size: 1rem; font-weight: 600; color: #fff; }
  .form-check-input { border: 1.5px solid #fff; background-color: #000; }
  /* The stock tick and dot are white. On the white fill they are black. */
  .form-check-input:checked { background-color: #fff; border-color: #fff; }
  .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
  .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e"); }
  .form-text, .form-hint { font-size: .9rem; }

  .bg-order-page > .card-body { padding: 0 1.25rem .5rem !important; }
  .bg-order-page .accordion-item:last-of-type { border-bottom: 0; }
  .bg-about > p:first-child { font-size: 1.2rem; }

  /* Dashboard: the greeting as the page title with the ink drawing, then the plate with the 4 figures, then the lists. */
  .bg-dash { gap: 2.75rem; font-size: 1rem; }
  .bg-hero { margin: 0; padding: 1.25rem 0 0; align-items: center; border: 0; border-radius: 0; background: none; color: #fff; overflow: visible; }
  .bg-hero::before { content: none; }
  .bg-hero-title { font-size: clamp(2.6rem, 4.8vw, 4.5rem); line-height: .88; letter-spacing: -.045em; margin-bottom: 1.4rem; color: #fff; }
  .bg-hero-title::after { content: none; }
  .bg-hero-line { max-width: 27em; margin-bottom: 1.7rem; font-size: 1.2rem; line-height: 1.4; color: #fff; }
  .bg-hero-art { width: clamp(11rem, 19vw, 16.5rem); height: auto; margin: -1rem 1.5rem -1.5rem 0; align-self: center; filter: drop-shadow(0 0 2.2rem rgb(255 255 255 / .17)); animation: none; }
  /* The plate: a white rack faceplate with 2 ears and 4 screws (.plate of black.css). Black ink on white. */
  .bg-stats { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 1.5rem; border: 0; border-radius: 3px; overflow: hidden; color: #000; color-scheme: light;
    background: #fff url(img/black-wear-scratch.webp) right 2.2rem top .3rem / 4.6rem auto no-repeat, url(img/black-wear-edge.webp) left 38% bottom .2rem / 7rem auto no-repeat, url(img/black-wear-corner-b.webp) right 1.7rem bottom .25rem / 4rem auto no-repeat; background-color: #fff; }
  .bg-stats::before, .bg-stats::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5rem; background: radial-gradient(circle at 50% 1.15rem, #000 0 .21rem, transparent .25rem), radial-gradient(circle at 50% calc(100% - 1.15rem), #000 0 .21rem, transparent .25rem); }
  .bg-stats::before { left: 0; border-right: 1.5px solid #000; }
  .bg-stats::after { right: 0; border-left: 1.5px solid #000; }
  .bg-stat, .bg-stat:first-child { display: block; padding: 1.1rem 1.4rem 1.25rem; border: 0 !important; border-radius: 0; background: none; }
  .bg-stat + .bg-stat { border-left: 1.5px solid #000 !important; }
  .bg-stat-ghost { display: none; } /* the characters in colour are not a part of the black edition */
  .bg-stat-label { font: 700 1.05rem/1.2 var(--d-font); letter-spacing: 0; text-transform: lowercase; color: #000; }
  .bg-stat-value { display: inline-block; margin-top: .4rem; font-family: var(--d-font); font-size: 2.6rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; color: #000; }
  .bg-stat-value.is-warn { margin-left: -.14em; padding: 0 .3em .05em; border-radius: 99px; background: #000; color: #fff; } /* a figure that needs an action inverts */
  /* Lists: a heavy lower-case heading, a line, rows with lines. No box. */
  .bg-panel { border: 0; border-radius: 0; background: none; overflow: visible; }
  .bg-panel-head { align-items: baseline; padding: 0 0 .9rem; border-bottom: 1px solid var(--d-line); }
  .bg-panel-head h2 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  .bg-more { font-size: 1rem; font-weight: 500; text-transform: none; color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
  .bg-more:hover { color: #fff; text-decoration-thickness: 3px; }
  .bg-more > span { display: none; } /* the arrow */
  .bg-table { font-size: 1rem; }
  .bg-table th, .bg-table td { padding: .85rem 1rem .85rem 0; }
  .bg-table :is(th, td):last-child { padding-right: 0; }
  .bg-table th { font: 500 .9rem/1.3 var(--d-font); letter-spacing: 0; text-transform: none; color: var(--d-sub); }
  .bg-table thead th { border-bottom: 1px solid var(--d-line); }
  .bg-table td { border-top-color: var(--d-line); }
  .bg-table tbody tr:first-child td { border-top: 0; }
  .bg-order-id { font-family: var(--d-font); color: var(--d-sub); }
  .bg-facts div, .bg-feed li, .bg-pad, .bg-empty { padding-inline: 0; }
  .bg-facts div { padding-block: .8rem; }
  .bg-facts dt { font: 400 1rem/1.5 var(--d-font); letter-spacing: 0; text-transform: none; color: var(--d-sub); }
  .bg-facts dd, .bg-facts dd .bg-mono { font-family: var(--d-font); font-weight: 700; }
  .bg-notice { border: 1px solid #fff; border-radius: 3px; background: #000; }
  .bg-split { gap: 2.75rem 3rem; }
  .bg-empty p { font-size: 1rem; color: var(--d-sub); }
  #footer { border-top-color: var(--d-line); font-size: .9rem; }
  @media (max-width: 1199.98px) {
    .bg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bg-stat:nth-child(3) { border-left: 0 !important; }
    .bg-stat:nth-child(n + 3) { border-top: 1.5px solid #000 !important; }
  }
  @media (max-width: 479.98px) {
    .bg-stats { grid-template-columns: minmax(0, 1fr); }
    .bg-stat + .bg-stat { border-left: 0 !important; border-top: 1.5px solid #000 !important; }
  }
  @media (max-width: 767.98px) { .bg-hero { padding: .5rem 0 0; } .bg-hero-art { display: none; } .bg-hero-title { padding-right: 0; } .bg-stat-value { font-size: 2.1rem; } } /* a phone has no room for the drawing beside the text */
}

/* ===================== No names (owner, November 11, 2026) =====================
 * The sign-up forms do not show the name fields. partial_alias.html.twig gives each new account an alias. */
/* Sign-up asks for an email and a password only. The ID number (custom_1, for .es domains) is in the profile. */
form[action*="client/create"] :is(.mb-3, .form-floating):has(> [name="first_name"], > [name="last_name"], > [name="custom_1"]) { display: none !important; }

/* A phone shows the server table in one line for each row. The table scrolls sideways. */
@media (max-width: 767.98px) { .bg-table th, .bg-table td { white-space: nowrap; } }

/* ===================== No avatars (owner, November 11, 2026) =====================
 * FOSSBilling draws a picture from each email address (the Twig function avatar(), class .db-avatar). It has no setting
 * to turn the pictures off. This rule hides them, and the row of the profile page that tells about the picture.
 * The initials in the top bar are not a picture of this kind: they are the button of the account menu. */
.db-avatar, #profile-update > .row:has(.db-avatar) { display: none !important; }

/* ===================== Dark mode: the black edition, last rules (owner, November 12, 2026) =====================
   These rules come last, so they win over the older dark rules with the same selector weight. */
@font-face { font-family: "Jost"; src: url(fonts/jost.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
[data-bs-theme="dark"], [data-bs-theme="dark"] .bg-shell {
  --bs-font-sans-serif: "Jost", Futura, "Century Gothic", sans-serif; --bs-font-monospace: "Jost", Futura, "Century Gothic", sans-serif; --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-link-color: #fff; --bs-link-color-rgb: 255, 255, 255; --bs-link-hover-color: #fff; --bs-link-hover-color-rgb: 255, 255, 255;
  font-family: var(--bs-font-sans-serif); font-feature-settings: normal; letter-spacing: 0;
}
[data-bs-theme="dark"] body, [data-bs-theme="dark"] .bg-shell { background: #000; color: #fff; font-family: "Jost", Futura, "Century Gothic", sans-serif; }
[data-bs-theme="dark"] .bg-shell { font-size: 1rem; }
[data-bs-theme="dark"] :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .card-title, .modal-title, .navbar-brand, legend) { font-family: "Jost", Futura, "Century Gothic", sans-serif !important; font-weight: 800; text-transform: lowercase; letter-spacing: -.035em; color: #fff; }
[data-bs-theme="dark"] :is(code, kbd, pre, samp, .font-monospace, .num, .bg-mono) { font-family: ui-monospace, monospace; }
[data-bs-theme="dark"] a:not(.btn, .nav-link, .dropdown-item, .list-group-item) { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
[data-bs-theme="dark"] a:not(.btn, .nav-link, .dropdown-item, .list-group-item):hover { text-decoration-thickness: 3px; }
[data-bs-theme="dark"] ::selection { background: #fff; color: #000; }
[data-bs-theme="dark"] :focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }
/* Buttons: a white pill with black ink. A state change is a fill that inverts. No caret, no colour. */
[data-bs-theme="dark"] :is(.btn:not(.btn-link, .btn-close), .bg-hero-btn, .bg-order, .bg-copy-btn, .bg-menu-btn)::before { content: none; }
[data-bs-theme="dark"] .btn:not(.btn-link, .btn-close, .btn-check + .btn), [data-bs-theme="dark"] :is(.bg-hero-btn, .bg-order) {
  font-family: "Jost", Futura, "Century Gothic", sans-serif; font-weight: 700; text-transform: lowercase; letter-spacing: 0;
  background: #fff; color: #000; border: 2px solid #fff; border-radius: 99px; box-shadow: none; transition: background-color .15s, color .15s;
}
[data-bs-theme="dark"] .btn:not(.btn-link, .btn-close, .btn-check + .btn):is(:hover, :focus-visible, :active), [data-bs-theme="dark"] :is(.bg-hero-btn, .bg-order):hover { background: #000; color: #fff; border-color: #fff; }
[data-bs-theme="dark"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger, .btn-secondary, .btn-light, .btn-ghost-secondary, .bg-hero-btn-line):not(.btn-check + .btn) { background: #000; color: #fff; border: 2px solid #fff; }
[data-bs-theme="dark"] :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-danger, .btn-secondary, .btn-light, .btn-ghost-secondary, .bg-hero-btn-line):not(.btn-check + .btn):is(:hover, :focus-visible, :active) { background: #fff; color: #000; }
[data-bs-theme="dark"] :is(.form-control, .form-select) { background-color: #000; color: #fff; border: 1px solid #a8a8a8; border-radius: 3px; }
[data-bs-theme="dark"] :is(.form-control, .form-select):focus { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
[data-bs-theme="dark"] .form-control::placeholder { color: #a8a8a8; }
[data-bs-theme="dark"] :is(.card, .modal-content, .dropdown-menu, .list-group-item, .alert) { background: #000; color: #fff; border: 1px solid #383838; border-radius: 3px; box-shadow: none; }
[data-bs-theme="dark"] :is(.badge, .text-bg-primary, .text-bg-success, .text-bg-warning, .text-bg-danger, .text-bg-info, .text-bg-secondary) { background: #fff !important; color: #000 !important; border-radius: 99px; font-weight: 700; text-transform: lowercase; }
[data-bs-theme="dark"] :is(.text-muted, .text-secondary, .form-text, small) { color: #a8a8a8 !important; }
[data-bs-theme="dark"] :is(.table, .table > :not(caption) > * > *) { --bs-table-bg: #000; --bs-table-color: #fff; border-color: #383838; }

/* ---------- Payment methods on the invoice page (owner, November 11 and 12, 2026) ----------
   FOSSBilling shows each method as an icon of 50px. Here each method is a button with words, in a comic-book style
   (owner, November 12, 2026): a thick ink outline, a hard offset shadow, and a press when the customer clicks.
   Crypto is the normal way to pay. The card is a red button with the label "I do not care about my privacy".
   The red is the one colour of the dark theme. The label text comes from the name of the gateway: "Card" is the card gateway.
   The dark themes use .btn::before for other things, so some values here are !important. */
.invoice-gateway { padding: 0 6px 6px 0 !important; border: 0 !important; background: none !important; }
.invoice-gateway label.btn {
  --ink: #141414; --fill: #fcfbf8; --on: #141414;
  display: inline-flex !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  width: auto !important; height: auto !important; min-height: 68px; padding: .75rem 1.2rem !important; text-align: left; text-transform: none !important;
  background: var(--fill) !important; color: var(--on) !important;
  border: 3px solid var(--ink) !important; border-radius: 12px !important; box-shadow: 5px 5px 0 var(--ink) !important;
  transition: transform .12s cubic-bezier(.2, .9, .3, 1.3), box-shadow .12s !important;
}
.invoice-gateway label.btn::before { content: attr(data-bs-title) !important; display: block !important; position: static !important; width: auto !important; height: auto !important; margin: 0 !important; background: none !important; border: 0 !important; transform: none !important; opacity: 1 !important; -webkit-mask: none !important; mask: none !important; color: inherit !important; font-family: inherit !important; font-weight: 800; font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em; }
.invoice-gateway label.btn::after { content: "No card. No name."; font-size: .875rem; font-weight: 500; line-height: 1.3; }
.invoice-gateway label.btn:hover { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: 7px 7px 0 var(--ink) !important; }
.invoice-gateway label.btn:active, .invoice-gateway .btn-check:checked + label.btn { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink) !important; }
.invoice-gateway .btn-check:focus-visible + label.btn { outline: 3px solid var(--ink); outline-offset: 4px; }
.invoice-gateway label.btn[data-bs-title="Card"] { --fill: #d6391f; --on: #fff; background-image: radial-gradient(rgb(255 255 255 / .16) 1.1px, transparent 1.4px) !important; background-size: 7px 7px !important; }
.invoice-gateway label.btn[data-bs-title="Card"]::before { content: "I do not care about my privacy" !important; }
.invoice-gateway label.btn[data-bs-title="Card"]::after { content: "Pay by card. Stripe gets your card and your email."; }
[data-bs-theme="dark"] .invoice-gateway label.btn { --ink: #fff; --fill: #fff; --on: #000; border-color: #000 !important; box-shadow: 0 0 0 2px #fff, 6px 6px 0 2px #fff !important; font-family: "Jost", Futura, sans-serif; }
[data-bs-theme="dark"] .invoice-gateway label.btn:hover { box-shadow: 0 0 0 2px #fff, 8px 8px 0 2px #fff !important; }
[data-bs-theme="dark"] .invoice-gateway label.btn:active, [data-bs-theme="dark"] .invoice-gateway .btn-check:checked + label.btn { box-shadow: 0 0 0 2px #fff, 3px 3px 0 2px #fff !important; }
[data-bs-theme="dark"] .invoice-gateway label.btn[data-bs-title="Card"] { --fill: #d6391f; --on: #fff; }
@media (prefers-reduced-motion: reduce) { .invoice-gateway label.btn { transition: none !important; } .invoice-gateway label.btn:hover { transform: none; } }