:root {
  --te-black: #0a0a0a;
  --te-dark: #1a1a1a;
  --te-grey: #2a2a2a;
  --te-light-grey: #d4d4d4;
  --te-white: #e5e5e5;
  --te-orange: #ff6b35;
  --te-orange-hover: #ff8555;
}

/* Main background */
body {
  background-color: var(--te-black) !important;
  color: var(--te-white) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Cards / Service containers */
.service-group,
.bookmark-group,
.widget {
  background-color: var(--te-dark) !important;
  border-radius: 12px !important;
  border: 1px solid var(--te-grey) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Service items */
.service {
  background-color: var(--te-grey) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
}

.service:hover {
  background-color: #3a3a3a !important;
  border-color: var(--te-orange) !important;
  transform: translateY(-2px);
}

/* Headings */
h1, h2, h3, h4 {
  color: var(--te-white) !important;
  font-weight: 600 !important;
}

/* Links */
a {
  color: var(--te-light-grey) !important;
}

a:hover {
  color: var(--te-orange) !important;
}

/* Status indicators */
.status-up {
  color: var(--te-orange) !important;
}

.status-down {
  color: #ff4444 !important;
}

/* Icons */
.service-icon {
  color: var(--te-orange) !important;
}

/* Buttons / Pill-style tags */
.tag,
.pill,
.badge {
  background-color: var(--te-orange) !important;
  color: var(--te-black) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

/* Search bar */
.search-container input {
  background-color: var(--te-dark) !important;
  border: 1px solid var(--te-grey) !important;
  border-radius: 25px !important;
  color: var(--te-white) !important;
  padding: 10px 20px !important;
}

.search-container input:focus {
  border-color: var(--te-orange) !important;
  outline: none !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--te-black);
}

::-webkit-scrollbar-thumb {
  background: var(--te-grey);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--te-orange);
}

/* Widget styling */
.info-widget {
  background-color: var(--te-dark) !important;
  border-radius: 12px !important;
  border: 1px solid var(--te-grey) !important;
}

/* Weather widget */
.weather-widget .temperature {
  color: var(--te-orange) !important;
  font-weight: 700 !important;
}