/* OpenClaw Nezha theme: direct Bing background + real glass UI */
:root {
  --oc-teal: #14b8a6;
  --oc-teal-dark: #0f766e;
  --oc-glass: rgba(255,255,255,.22);
  --oc-glass-strong: rgba(255,255,255,.34);
  --oc-glass-dark: rgba(15,23,26,.48);
  --oc-line: rgba(255,255,255,.58);
  --oc-line-dark: rgba(255,255,255,.20);
}

/* Direct Bing URL; no local image and no overlay */
/* No wallpaper: use the dashboard's plain background. */
html {
  min-height: 100%;
  background:
    radial-gradient(900px 560px at 8% 8%, rgba(45, 212, 191, .30), transparent 68%),
    radial-gradient(820px 600px at 94% 14%, rgba(59, 130, 246, .26), transparent 70%),
    radial-gradient(760px 620px at 52% 108%, rgba(139, 92, 246, .20), transparent 72%),
    linear-gradient(135deg, #eef8f7 0%, #edf3ff 48%, #f5efff 100%) !important;
  background-attachment: fixed !important;
}
html.dark {
  background:
    radial-gradient(900px 560px at 8% 8%, rgba(20, 184, 166, .22), transparent 68%),
    radial-gradient(820px 600px at 94% 14%, rgba(37, 99, 235, .24), transparent 70%),
    radial-gradient(760px 620px at 52% 108%, rgba(124, 58, 237, .20), transparent 72%),
    linear-gradient(135deg, #071b1d 0%, #0d1730 50%, #17102a 100%) !important;
  background-attachment: fixed !important;
}
body, #root, #root > div, #root > div > div, main, header, nav,
[data-radix-scroll-area-viewport] {
  background: transparent !important;
  background-color: transparent !important;
}
body { min-height: 100vh; }
#root { min-height: 100vh; }

/* Cards and panels: glass, not opaque white */
.server-card,
[class*="bg-card"],
[class*="bg-popover"],
[class*="bg-background"],
[class*="bg-muted"],
[class*="border-border"] {
  background-color: var(--oc-glass) !important;
  background-image: none !important;
  border-color: var(--oc-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 26px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.26) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
html.dark .server-card,
html.dark [class*="bg-card"], html.dark [class*="bg-popover"],
html.dark [class*="bg-background"], html.dark [class*="bg-muted"],
html.dark [class*="border-border"] {
  background-color: var(--oc-glass-dark) !important;
  border-color: var(--oc-line-dark) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Buttons and controls: same glass language */
button, input, select, textarea, [role="button"],
[class*="bg-secondary"], [class*="bg-accent"] {
  background-color: rgba(255,255,255,.24) !important;
  border-color: rgba(255,255,255,.48) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
button:hover, [role="button"]:hover {
  background-color: rgba(20,184,166,.24) !important;
  border-color: rgba(20,184,166,.70) !important;
}
html.dark button, html.dark input, html.dark select, html.dark textarea,
html.dark [role="button"], html.dark [class*="bg-secondary"], html.dark [class*="bg-accent"] {
  background-color: rgba(15,23,26,.40) !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* Detail page readability: darker translucent panels and explicit text contrast */
.server-card p, .server-card span, .server-card h1, .server-card h2,
.server-card h3, .server-card h4, .server-card label,
[class*="bg-card"] p, [class*="bg-card"] span, [class*="bg-card"] h1,
[class*="bg-card"] h2, [class*="bg-card"] h3, [class*="bg-card"] h4,
[class*="bg-card"] label { text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.text-muted-foreground, [class*="text-muted"] { color: rgba(15,23,42,.72) !important; }
html.dark .text-muted-foreground, html.dark [class*="text-muted"] { color: rgba(226,232,240,.74) !important; }
.text-primary, .text-teal-500, .text-green-500 { color: var(--oc-teal-dark) !important; }
html.dark .text-primary, html.dark .text-teal-500, html.dark .text-green-500 { color: #5eead4 !important; }
.bg-primary, .bg-teal-500 { background-color: var(--oc-teal) !important; }
.border-primary { border-color: var(--oc-teal) !important; }
.server-footer { opacity: .72; }
@media (max-width: 640px) {
  html { background-attachment: scroll !important; }
  .server-card, [class*="bg-card"] { border-radius: 14px !important; }
}




/* ============================================================
   Phase 1 visual polish: restrained dashboard hierarchy
   ============================================================ */
:root {
  --oc-glass: rgba(255,255,255,.26);
  --oc-glass-dark: rgba(15,23,26,.54);
}
.server-card,
[class*="bg-card"], [class*="bg-popover"], [class*="bg-background"],
[class*="bg-muted"], [class*="border-border"] {
  border-radius: 14px !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.24) !important;
}
html.dark .server-card,
html.dark [class*="bg-card"], html.dark [class*="bg-popover"],
html.dark [class*="bg-background"], html.dark [class*="bg-muted"],
html.dark [class*="border-border"] {
  box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.server-card:hover, [class*="bg-card"]:hover {
  border-color: rgba(20,184,166,.52) !important;
  transform: translateY(-1px);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
button, input, select, textarea, [role="button"] { min-height: 36px; }
button:hover, [role="button"]:hover { transform: translateY(-1px); }
.text-muted-foreground, [class*="text-muted"] { letter-spacing: .01em; }
.server-footer { opacity: .62; }
@media (max-width: 640px) {
  .server-card, [class*="bg-card"] { border-radius: 12px !important; }
  button, input, select, textarea, [role="button"] { min-height: 40px; }
}