:root{
  --background:#FFF7F6; --foreground:#2B1412;
  --card:#FFFFFF; --card-foreground:#2B1412;
  --popover:#FFFFFF; --popover-foreground:#2B1412;
  --primary:#C0261F; --primary-foreground:#FFFFFF;
  --secondary:#FCE9E7; --secondary-foreground:#8C1D18;
  --muted:#FBEEEC; --muted-foreground:#7A4A46;
  --accent:#FBE0DD; --accent-foreground:#8C1D18;
  --destructive:#7F1D1A; --destructive-foreground:#FFFFFF;
  --border:#F2CDC9; --input:#E7A9A3; --ring:#C0261F;
  --chart-1:#C0261F; --chart-2:#E8734A; --chart-3:#B4526B;
  --chart-4:#8C1D18; --chart-5:#D99A5B;
}
/* Beszel keeps a few dark surfaces of its own under .dark (the table head strip
   is one). The page itself is painted light here, so those are given the same
   red palette rather than left as dark-on-light islands. */
html, html.dark{ background-color:#FFF7F6 !important; }
:root{ --table-header:#FBEEEC; }
.dark{
  --background:#FFF7F6; --foreground:#2B1412;
  --card:#FFFFFF; --card-foreground:#2B1412;
  --popover:#FFFFFF; --popover-foreground:#2B1412;
  --primary:#C0261F; --primary-foreground:#FFFFFF;
  --secondary:#FCE9E7; --secondary-foreground:#8C1D18;
  --muted:#FBEEEC; --muted-foreground:#7A4A46;
  --accent:#FBE0DD; --accent-foreground:#8C1D18;
  --border:#F2CDC9; --input:#E7A9A3; --ring:#C0261F;
  --table-header:#FBEEEC;
}
/* A very soft warmth behind the page, so white cards sit on something rather
   than floating on flat paper. */
html body{
  background-image:
    radial-gradient(1100px 480px at 12% -8%, rgba(192,38,31,.07), transparent 60%),
    radial-gradient(900px 420px at 105% 6%, rgba(192,38,31,.05), transparent 60%);
  background-attachment:fixed;
}
html ::selection{background:rgba(192,38,31,.18)}
html ::-webkit-scrollbar-thumb{background:#E7BDB8;border-radius:8px}
html ::-webkit-scrollbar-thumb:hover{background:#C0261F}
html{scrollbar-color:#E7BDB8 transparent}

/* Beszel draws its wordmark as an inline svg with viewBox 0 0 285 75. Those
   paths are made invisible and ours is painted in the same box, so the layout
   and spacing around it stay exactly as they were. */
/* The house lockup, the same shape every Asaqefah sign-in screen uses: the
   group wordmark in ink, a hairline that fades at both ends, and the product
   word in the product colour. Beszel draws its own wordmark as an inline svg
   with viewBox 0 0 285 75; those paths are hidden and ours is painted in the
   same box, so the surrounding layout does not move. */
svg[viewBox="0 0 285 75"]{
  fill:transparent !important;
  width:214px !important; height:34px !important;
  background:url(/alert-lockup-inline.svg) center/contain no-repeat;
}
/* The sign-in screen gets the stacked variant, centred and much larger — it is
   the only thing on the page above the form. */
svg[viewBox="0 0 285 75"].mx-auto{
  width:190px !important; height:126px !important;
  background-image:url(/alert-lockup.svg);
  margin-bottom:0.75rem;
}
/* Beszel colours its own paths on hover of the surrounding .group, which beats
   a fill on the svg itself. The children are hidden outright instead. */
svg[viewBox="0 0 285 75"] *{
  opacity:0 !important; fill:transparent !important; stroke:none !important;
}

/* Dark mode still paints the page light here, so Beszel own dark table head
   left dark text on a dark strip. Pull the head back into the red palette. */
.dark thead, .dark thead tr, .dark thead th,
.dark [data-slot="table-header"]{
  background-color:#FBEEEC !important;
  color:#7A4A46 !important;
  border-color:#F2CDC9 !important;
}
/* The upstream credit line in the footer: a GitHub link and the version, in
   one div. Hidden here rather than patched into Beszel. */
div:has(> a[href*="github.com/henrygd/beszel"]){ display:none !important; }