@import url("https://static.wolf-cloud.com/fonts/fonts.css");

:root {
  /* Core palette */
  --wc-bg: #070b14;
  --wc-bg-elevated: rgba(10, 16, 28, 0.78);
  --wc-bg-elevated-hover: rgba(12, 19, 34, 0.86);
  --wc-surface-soft: rgba(255, 255, 255, 0.03);

  --wc-text: #f3f7fb;
  --wc-text-soft: rgba(243, 247, 251, 0.78);
  --wc-text-muted: rgba(243, 247, 251, 0.58);

  --wc-border: rgba(148, 163, 184, 0.14);
  --wc-border-strong: rgba(148, 163, 184, 0.22);

  --wc-brand: #8fd3ff;
  --wc-brand-strong: #4fb7f3;
  --wc-brand-soft: rgba(143, 211, 255, 0.14);

  /* Component tokens */
  --wc-card-bg: var(--wc-bg-elevated);
  --wc-card-bg-hover: var(--wc-bg-elevated-hover);
  --wc-card-border: var(--wc-border);
  --wc-card-radius: 18px;

  --wc-search-bg: rgba(255, 255, 255, 0.04);
  --wc-search-bg-hover: rgba(255, 255, 255, 0.06);
  --wc-search-border: rgba(148, 163, 184, 0.16);

  --wc-bookmark-bg: rgba(255, 255, 255, 0.035);
  --wc-bookmark-bg-hover: rgba(255, 255, 255, 0.055);
  --wc-bookmark-border: rgba(148, 163, 184, 0.14);

  --wc-vignette-mid: 0.08;
  --wc-vignette-edge: 0.22;
  --wc-vignette-top: 0.06;

  --wc-logo-size: 72px;

  --wc-shadow-none: none;
  --wc-blur: blur(14px);
  --wc-transition: 160ms ease;

  --wc-bookmark-icon-filter: brightness(0.96) saturate(0.92) contrast(1.04);

  /* Grid */
  --wc-grid-size: 53px;
  --wc-grid-line: rgba(143, 211, 255, 0.04);
  --wc-grid-line-strong: rgba(143, 211, 255, 0.12);
}

html,
body {
  background: transparent !important;
}

body {
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif !important;
  color: var(--wc-text) !important;
  letter-spacing: -0.01em;
}

code,
pre,
kbd,
samp,
.mono,
[class*="mono"] {
  font-family: "IBM Plex Mono", monospace !important;
}

#app,
#__next,
.app,
.layout,
.container,
main,
.content {
  background: transparent !important;
}

/* Base background glow */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -9999 !important;
  pointer-events: none !important;

  background:
    radial-gradient(1000px 520px at 12% 10%, rgba(79, 183, 243, 0.14), transparent 62%),
    radial-gradient(720px 520px at 88% 14%, rgba(143, 211, 255, 0.10), transparent 58%),
    radial-gradient(960px 640px at 50% 100%, rgba(59, 130, 246, 0.08), transparent 62%),
    linear-gradient(180deg, #0a1020 0%, #070b14 52%, #05070d 100%) !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Grid + vignette overlay */
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -9998 !important;
  pointer-events: none !important;

  background:
    /* grid horizontal */
    linear-gradient(
      to bottom,
      transparent calc(var(--wc-grid-size) - 1px),
      var(--wc-grid-line) calc(var(--wc-grid-size) - 1px),
      var(--wc-grid-line) var(--wc-grid-size)
    ),
    /* grid vertical */
    linear-gradient(
      to right,
      transparent calc(var(--wc-grid-size) - 1px),
      var(--wc-grid-line) calc(var(--wc-grid-size) - 1px),
      var(--wc-grid-line) var(--wc-grid-size)
    ),
    /* stronger center glow on grid */
    radial-gradient(
      ellipse at center,
      rgba(143, 211, 255, 0.05) 0%,
      rgba(143, 211, 255, 0.02) 30%,
      rgba(0, 0, 0, 0) 70%
    ),
    /* vignette */
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, var(--wc-vignette-mid)) 62%,
      rgba(0, 0, 0, var(--wc-vignette-edge)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--wc-vignette-top)) 0%,
      rgba(0, 0, 0, 0) 34%
    ) !important;

  background-size:
    var(--wc-grid-size) var(--wc-grid-size),
    var(--wc-grid-size) var(--wc-grid-size),
    cover,
    cover,
    cover !important;

  background-position:
    center center,
    center center,
    center center,
    center center,
    center center !important;
}

/* Shared tile system */
.service-card,
.bookmark-card,
.widget,
.widget-card,
.info-widget {
  position: relative !important;
  background: var(--wc-card-bg) !important;
  border: 1px solid var(--wc-card-border) !important;
  border-radius: var(--wc-card-radius) !important;
  box-shadow: var(--wc-shadow-none) !important;
  transform: none !important;
  background-image: none !important;
  backdrop-filter: var(--wc-blur) !important;
  -webkit-backdrop-filter: var(--wc-blur) !important;
  overflow: hidden !important;
  transition:
    background var(--wc-transition),
    border-color var(--wc-transition),
    opacity var(--wc-transition) !important;
}

.service-card:hover,
.bookmark-card:hover,
.widget:hover,
.widget-card:hover,
.info-widget:hover {
  background: var(--wc-card-bg-hover) !important;
  border-color: var(--wc-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
  background-image: none !important;
}

:where(.service-card, .bookmark-card, .widget, .widget-card, .info-widget)
  :where([class*="bg-gradient"], [class*="from-"], [class*="via-"], [class*="to-"]) {
  background-image: none !important;
}

:where(.service-card, .bookmark-card, .widget, .widget-card, .info-widget)
  :where([class*="shadow"], [class*="ring"], [class*="outline"]) {
  box-shadow: none !important;
  outline: none !important;
}

/* Buttons */
button,
.button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: inherit !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Icons */
.service-icon,
.icon {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(148, 163, 184, 0.10) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}

/* Logo area */
.information-widget-logo {
  display: flex !important;
  align-items: center !important;
  padding-right: 12px !important;
  height: auto !important;
}

.information-widget-logo img {
  height: var(--wc-logo-size) !important;
  width: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.information-widget-logo svg {
  height: var(--wc-logo-size) !important;
  width: auto !important;
}

/* Search */
.information-widget-search {
  background: transparent !important;
}

.information-widget-search input,
.information-widget-search input[type="search"],
#information-widgets-right .information-widget-search input {
  background: var(--wc-search-bg) !important;
  border: 1px solid var(--wc-search-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--wc-text) !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.information-widget-search input::placeholder {
  color: var(--wc-text-muted) !important;
}

.information-widget-search input:hover {
  background: var(--wc-search-bg-hover) !important;
}

.information-widget-search input:focus,
.information-widget-search input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(143, 211, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.information-widget-search button,
.information-widget-search [role="button"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--wc-text-soft) !important;
}

.information-widget-search [role="listbox"],
.information-widget-search ul {
  background: rgba(7, 11, 20, 0.92) !important;
  border: 1px solid var(--wc-border) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.information-widget-search li {
  background: transparent !important;
  color: var(--wc-text-soft) !important;
}

.information-widget-search li:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}

/* Bookmarks */
#bookmarks {
  background: transparent !important;
}

#bookmarks a {
  background: var(--wc-bookmark-bg) !important;
  border: 1px solid var(--wc-bookmark-border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition:
    background var(--wc-transition),
    border-color var(--wc-transition) !important;
}

#bookmarks a:hover {
  background: var(--wc-bookmark-bg-hover) !important;
  border-color: var(--wc-border-strong) !important;
}

#bookmarks img,
#bookmarks svg {
  filter: var(--wc-bookmark-icon-filter) !important;
  opacity: 0.96 !important;
}

#bookmarks,
#bookmarks * {
  color: var(--wc-text-soft) !important;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--wc-text) !important;
  font-family: "IBM Plex Sans", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

p,
span,
label,
small,
li,
a {
  color: inherit !important;
}

/* Thin brand line on cards */
.service-card::before,
.bookmark-card::before,
.widget::before,
.widget-card::before,
.info-widget::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(143, 211, 255, 0.24) 50%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}