@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;600;700&family=Crimson+Text:wght@400;600;700&display=swap");

:root {
  --blood: #8b0000;
  --blood-light: #a02020;
  --bone: #d4c5a9;
  --bone-bright: #efe3c8;
  --text: #c4b49a;
  --text-dim: #7d6b57;
  --portal-border: rgba(42, 26, 26, 0.92);
  --border: rgba(94, 36, 36, 0.75);
  --card-bg: rgba(12, 10, 9, 0.88);
  --card-bg-strong: rgba(18, 12, 11, 0.94);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html,
body {
  background:
    radial-gradient(circle at 18% 20%, rgba(139, 0, 0, 0.14), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(139, 0, 0, 0.1), transparent 24%),
    radial-gradient(circle at 50% 52%, #0b0908 0%, #050403 72%) !important;
  color: var(--text) !important;
  font-family: "Crimson Text", serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cpath d='M110 10 L132 88 L210 88 L148 132 L170 210 L110 166 L50 210 L72 132 L10 88 L88 88 Z' fill='none' stroke='%238b0000' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

#page_wrapper,
#inner_wrapper,
#inner_wrapper > div,
.container {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

h1,
h2,
h3,
h4,
[class*="heading"],
[class*="title"] {
  color: var(--bone) !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.08em;
}

h1 {
  font-family: "Cinzel Decorative", serif !important;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(139, 0, 0, 0.35);
}

p,
span,
div,
small {
  color: var(--text);
}

a {
  color: var(--bone) !important;
}

a:hover {
  color: #f0dfbf !important;
}

#information-widgets {
  margin-top: 2rem !important;
  border-bottom: 1px solid rgba(139, 0, 0, 0.45) !important;
  box-shadow: inset 0 -14px 24px rgba(139, 0, 0, 0.05);
}

#information-widgets::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.85), transparent);
}

#information-widgets .widget-container,
#information-widgets-right .widget-container,
main article,
main section > div,
main a[class],
main div[class*="service"],
main div[class*="bookmark"],
main div[class*="group"] > div {
  background: linear-gradient(180deg, rgba(18, 14, 12, 0.96), rgba(10, 9, 8, 0.94)) !important;
  border: 1px solid var(--portal-border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(8px);
}

#information-widgets .widget-container,
#information-widgets-right .widget-container {
  border-radius: 16px !important;
}

main article,
main section > div,
main a[class] {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(212, 197, 169, 0.04) !important;
}

main article::before,
main section > div::before,
main a[class]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(139, 0, 0, 0.75), transparent);
  opacity: 0.8;
}

main article::after,
main section > div::after,
main a[class]::after {
  content: "◆";
  position: absolute;
  right: 1rem;
  top: 0.55rem;
  color: rgba(139, 0, 0, 0.55);
  font-size: 0.72rem;
}

main a[class]:hover,
main article:hover,
#information-widgets .widget-container:hover,
#information-widgets-right .widget-container:hover {
  border-color: rgba(160, 32, 32, 0.95) !important;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.5),
    0 0 26px rgba(139, 0, 0, 0.18),
    inset 0 0 0 1px rgba(212, 197, 169, 0.05) !important;
  transform: translateY(-2px);
}

input,
textarea,
select {
  background: rgba(14, 11, 10, 0.92) !important;
  color: var(--bone) !important;
  border: 1px solid var(--border) !important;
}

input::placeholder {
  color: var(--text-dim) !important;
}

dialog,
[role="dialog"] dialog {
  background: linear-gradient(180deg, rgba(18, 14, 12, 0.98), rgba(10, 9, 8, 0.96)) !important;
  border: 1px solid rgba(139, 0, 0, 0.35) !important;
}

img {
  filter: drop-shadow(0 0 10px rgba(139, 0, 0, 0.12));
}

#footer {
  color: var(--text-dim) !important;
}

#footer a {
  color: var(--text-dim) !important;
}

[class*="status"] [class*="bg-"],
[class*="dot"] {
  box-shadow: 0 0 12px rgba(139, 0, 0, 0.3);
}

main h2,
main h3,
main [class*="groupName"],
main [class*="group-name"] {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem !important;
  color: var(--bone-bright) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

main h2::before,
main h3::before,
main [class*="groupName"]::before,
main [class*="group-name"]::before {
  content: "◆";
  color: rgba(139, 0, 0, 0.8);
  font-size: 0.7em;
}

main [class*="text-theme-800"],
main [class*="dark:text-theme-200"],
main [class*="text-theme-700"],
main [class*="dark:text-theme-300"] {
  color: var(--text) !important;
}

main [class*="group"] > div,
main article,
main a[class] {
  background-color: var(--card-bg) !important;
}

main [class*="bg-theme-50"],
main [class*="bg-theme-100"],
main [class*="bg-theme-200"],
main [class*="dark:bg-theme-700"],
main [class*="dark:bg-theme-800"],
main [class*="dark:bg-theme-900"],
main [class*="dark:bg-white/10"],
main [class*="bg-white/50"] {
  background-color: rgba(16, 13, 12, 0.88) !important;
}

main [class*="resource-usage"],
main [class*="rounded-full"] {
  border-color: rgba(139, 0, 0, 0.3) !important;
}

main [class*="bg-theme-800/70"],
main [class*="dark:bg-theme-200/50"],
main [class*="resource-usage"] > div,
main [class*="rounded-full"][style*="width:"] {
  background-image: linear-gradient(90deg, rgba(139, 0, 0, 0.65), rgba(160, 32, 32, 0.35)) !important;
}

form.information-widget-search input,
form.information-widget-search button {
  border-color: rgba(139, 0, 0, 0.35) !important;
  background: linear-gradient(180deg, rgba(20, 14, 13, 0.96), rgba(12, 10, 9, 0.92)) !important;
}

form.information-widget-search button {
  color: var(--bone-bright) !important;
}

@media (max-width: 900px) {
  html,
  body {
    background:
      radial-gradient(circle at 20% 12%, rgba(139, 0, 0, 0.16), transparent 24%),
      radial-gradient(circle at 80% 10%, rgba(139, 0, 0, 0.08), transparent 18%),
      linear-gradient(180deg, #0b0908 0%, #050403 100%) !important;
  }

  #inner_wrapper {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  h1 {
    font-size: 1.85rem !important;
    letter-spacing: 0.14em !important;
    text-align: center;
  }

  h2,
  h3,
  h4,
  [class*="heading"],
  [class*="title"] {
    letter-spacing: 0.05em !important;
  }

  #information-widgets {
    gap: 0.75rem !important;
  }

  #information-widgets .widget-container,
  #information-widgets-right .widget-container,
  main article,
  main section > div,
  main a[class] {
    border-radius: 14px !important;
  }

  main a[class]:hover,
  main article:hover,
  #information-widgets .widget-container:hover,
  #information-widgets-right .widget-container:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  body::before {
    opacity: 0.025;
    background-size: 160px 160px;
  }

  h1 {
    font-size: 1.55rem !important;
    letter-spacing: 0.12em !important;
  }

  #footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    text-align: center;
  }
}