/* Dashma - Main Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family, 'Courier New', Courier, monospace);
  background-color: var(--bg-color, #212121);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--text-color, #ffffff);
  line-height: 1.6;
  padding: 20px;
}

/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Header */
.header {
  margin-bottom: 36px;
}

.header.align-left { text-align: left; }
.header.align-center { text-align: center; }
.header.align-right { text-align: right; }

.header.hidden { display: none; }

/* Header content - logo positioning */
.header-content {
  display: block; /* Default to block so text-align from .header works */
}

/* When logo classes are applied, switch to flex */
.header-content[class*="logo-"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo positions */
.header-content.logo-above {
  flex-direction: column;
}

.header-content.logo-below {
  flex-direction: column;
}

.header-content.logo-inline {
  display: inline-flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}

/* Logo alignment - for above/below positions */
.header-content.logo-align-left {
  align-items: flex-start;
}

.header-content.logo-align-center {
  align-items: center;
}

.header-content.logo-align-right {
  align-items: flex-end;
}

/* Inline mode: keep vertical centering regardless of alignment */
.header-content.logo-inline.logo-align-left,
.header-content.logo-inline.logo-align-right {
  align-items: center;
}

.site-logo {
  max-height: 60px;
  max-width: 200px;
  margin-bottom: 15px;
  object-fit: contain;
}

/* Logo sizes */
.site-logo.size-small {
  max-height: 40px;
  max-width: 120px;
}

.site-logo.size-medium {
  max-height: 60px;
  max-width: 200px;
}

.site-logo.size-large {
  max-height: 100px;
  max-width: 300px;
}

/* Remove logo margin when inline */
.header-content.logo-inline .site-logo {
  margin-bottom: 0;
}

/* Remove title margin when inline for proper vertical centering */
.header-content.logo-inline .site-title {
  margin-bottom: 0;
}

/* Title wrapper for better positioning */
.title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center content vertically when inline */
}

.site-title {
  font-family: var(--title-font, 'Courier New', Courier, monospace);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-color, #ffffff);
  margin-bottom: 10px;
}

/* Title sizes */
.site-title.size-small {
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.2em;
}

.site-title.size-medium {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0.25em;
}

.site-title.size-large {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.3em;
}

.site-title.size-xlarge {
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: 0.35em;
}

/* Title link */
.site-title-link {
  text-decoration: none;
  color: inherit;
}

/* Title hover effects */
.title-hover-glow:hover .site-title,
.site-title.title-hover-glow:hover {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.title-hover-fade:hover .site-title,
.site-title.title-hover-fade:hover {
  opacity: 0.7;
}

.title-hover-scale:hover .site-title,
.site-title.title-hover-scale:hover {
  transform: scale(1.05);
}

.title-hover-underline:hover .site-title,
.site-title.title-hover-underline:hover {
  text-decoration: underline;
}

.title-hover-hacked .site-title,
.site-title.title-hover-hacked {
  transition: all 0.2s ease;
}

.title-hover-glitch:hover .site-title,
.site-title.title-hover-glitch:hover {
  animation: glitch 0.3s ease;
}

.title-hover-neon:hover .site-title,
.site-title.title-hover-neon:hover {
  animation: neon-pulse 0.5s ease-in-out;
  text-shadow: 0 0 5px var(--text-color, #ffffff),
               0 0 10px var(--text-color, #ffffff),
               0 0 20px var(--accent-color, #888888);
}

.title-hover-blur:hover .site-title,
.site-title.title-hover-blur:hover {
  animation: blur-in 0.3s ease forwards;
}

/* Search */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding-top: 15vh;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.search-overlay.active {
  display: flex;
  opacity: 1;
}

.search-container {
  width: 90%;
  max-width: 600px;
}

.search-input {
  width: 100%;
  padding: 20px 25px;
  font-size: 1.5rem;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--text-color, #ffffff);
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.search-results {
  margin-top: 20px;
  max-height: 50vh;
  overflow-y: auto;
}

.search-result-item {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-result-item:hover,
.search-result-item.selected {
  background: rgba(255, 255, 255, 0.15);
}

.search-result-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.search-result-name {
  font-size: 1.1rem;
}

.search-result-category {
  font-size: 0.85rem;
  color: var(--accent-color, #888888);
  margin-left: auto;
}

.search-hint {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.9rem;
  margin-top: 20px;
}

/* Categories Grid - Using flexbox columns for fixed column assignment */
.categories-grid {
  display: flex;
  gap: 30px;
}

/* Category columns - each column is a flex container for vertical stacking */
.category-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0; /* Prevent flex items from overflowing */
}

.categories-grid.cols-1 .category-column { flex: 0 0 100%; }
.categories-grid.cols-2 .category-column { flex: 0 0 calc(50% - 15px); }
.categories-grid.cols-3 .category-column { flex: 0 0 calc(33.333% - 20px); }
.categories-grid.cols-4 .category-column { flex: 0 0 calc(25% - 22.5px); }
.categories-grid.cols-5 .category-column { flex: 0 0 calc(20% - 24px); }
.categories-grid.cols-6 .category-column { flex: 0 0 calc(16.666% - 25px); }

@media (max-width: 1200px) {
  .categories-grid.cols-5,
  .categories-grid.cols-6 {
    flex-wrap: wrap;
  }
  .categories-grid.cols-5 .category-column,
  .categories-grid.cols-6 .category-column { flex: 0 0 calc(33.333% - 20px); }
}

@media (max-width: 900px) {
  .categories-grid.cols-3,
  .categories-grid.cols-4,
  .categories-grid.cols-5,
  .categories-grid.cols-6 {
    flex-wrap: wrap;
  }
  .categories-grid.cols-3 .category-column,
  .categories-grid.cols-4 .category-column,
  .categories-grid.cols-5 .category-column,
  .categories-grid.cols-6 .category-column { flex: 0 0 calc(50% - 15px); }
}

@media (max-width: 600px) {
  .categories-grid {
    flex-direction: column;
  }
  .categories-grid .category-column {
    flex: 0 0 100% !important;
  }
}

/* Category */
.category {
  background: var(--category-bg-color, rgba(255, 255, 255, 0.03));
  border-radius: 12px;
  padding: 20px;
  transition: background 0.2s ease;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;
  transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease, border-bottom 0.3s ease;
}

.category-title {
  font-family: var(--title-font, 'Courier New', Courier, monospace);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--category-title-color, var(--text-color, #ffffff));
  transition: all 0.2s ease;
}

.category-toggle {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  color: var(--accent-color, #888888);
}

.category.collapsed .category-toggle {
  transform: rotate(-90deg);
}

.category.collapsed .category-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.category-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.category.collapsed .category-links {
  max-height: 0;
  opacity: 0;
}

/* Links - Card Mode */
.link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--link-card-bg-color, rgba(255, 255, 255, 0.05));
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-color, #ffffff);
  transition: all 0.2s ease;
}

.link-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.link-name {
  font-size: 0.95rem;
  flex-grow: 1;
}

.link-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
  justify-content: flex-end;
}

.link-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: var(--tag-bg-color, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  color: var(--accent-color, #888888);
}

/* Links - Text Mode */
.link-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--text-color, #ffffff);
  transition: all 0.2s ease;
}

.link-text .link-icon {
  width: 16px;
  height: 16px;
}

/* Hover Effects */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.hover-fade:hover {
  opacity: 0.7;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-underline:hover {
  text-decoration: underline;
}

.hover-slide:hover {
  transform: translateX(5px);
}

.hover-border:hover {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hacked/Matrix text effect - handled by JS, just ensure smooth transition */
.hover-hacked {
  transition: all 0.2s ease;
}

.hover-hacked:hover {
  color: rgba(255, 255, 255, 1);
}

/* Typewriter effect */
.hover-typewriter:hover .link-name {
  animation: typewriter-blink 0.5s step-end infinite;
}

@keyframes typewriter-blink {
  0%, 100% { border-right: 2px solid transparent; }
  50% { border-right: 2px solid var(--text-color, #ffffff); }
}

/* Glitch effect */
.hover-glitch:hover {
  animation: glitch 0.3s ease;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Neon pulse effect */
.hover-neon:hover {
  animation: neon-pulse 0.5s ease-in-out;
  text-shadow: 0 0 5px var(--text-color, #ffffff),
               0 0 10px var(--text-color, #ffffff),
               0 0 20px var(--accent-color, #888888);
}

@keyframes neon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Blur in effect */
.hover-blur:hover {
  animation: blur-in 0.3s ease forwards;
}

@keyframes blur-in {
  0% { filter: blur(4px); opacity: 0.5; }
  100% { filter: blur(0); opacity: 1; }
}

/* Category Hover Effects */
.cat-hover-fade:hover .category-title {
  opacity: 0.7;
}

.cat-hover-glow:hover .category-title {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.cat-hover-scale:hover .category-title {
  transform: scale(1.05);
}

.cat-hover-color:hover .category-title {
  color: var(--accent-color, #888888);
}

.cat-hover-underline:hover .category-title {
  text-decoration: underline;
}

.cat-hover-slide:hover .category-title {
  transform: translateX(5px);
}

.cat-hover-hacked .category-title {
  transition: all 0.2s ease;
}

.cat-hover-glitch:hover .category-title {
  animation: glitch 0.3s ease;
}

.cat-hover-neon:hover .category-title {
  animation: neon-pulse 0.5s ease-in-out;
  text-shadow: 0 0 5px var(--text-color, #ffffff),
               0 0 10px var(--text-color, #ffffff),
               0 0 20px var(--accent-color, #888888);
}

.cat-hover-blur:hover .category-title {
  animation: blur-in 0.3s ease forwards;
}

/* Category Heading Sizes */
.category-title.size-small {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.category-title.size-medium {
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}

.category-title.size-large {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
}

/* Nesting Animations */
.nest-slide .category-links {
  transform: translateY(-10px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.nest-slide .category:not(.collapsed) .category-links {
  transform: translateY(0);
}

.nest-fade .category-links {
  transition: max-height 0.3s ease, opacity 0.4s ease;
}

.nest-zoom .category-links {
  transform: scale(0.95);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.nest-zoom .category:not(.collapsed) .category-links {
  transform: scale(1);
}

.nest-blur .category.collapsed .category-links {
  filter: blur(5px);
}

.nest-blur .category-links {
  transition: max-height 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

/* Flip animation */
.nest-flip .category-links {
  transform: rotateX(-90deg);
  transform-origin: top center;
  transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

.nest-flip .category:not(.collapsed) .category-links {
  transform: rotateX(0);
}

/* Bounce animation */
.nest-bounce .category-links {
  transform: translateY(-20px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.nest-bounce .category:not(.collapsed) .category-links {
  transform: translateY(0);
}

/* Rotate animation */
.nest-rotate .category-links {
  transform: rotate(-5deg) scale(0.95);
  transform-origin: top left;
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.4s ease;
}

.nest-rotate .category:not(.collapsed) .category-links {
  transform: rotate(0) scale(1);
}

/* Swing animation */
.nest-swing .category-links {
  transform: perspective(400px) rotateY(-15deg);
  transform-origin: left center;
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.5s ease;
}

.nest-swing .category:not(.collapsed) .category-links {
  transform: perspective(400px) rotateY(0);
}

/* Keyboard navigation indicator */
.keyboard-nav .link-card:focus,
.keyboard-nav .link-text:focus,
.keyboard-nav .category-header:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Compact mode - no category backgrounds */
.compact-mode .category {
  background: transparent;
  padding: 0;
  margin-bottom: 15px;
}

.compact-mode .category-header {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.compact-mode .category.collapsed .category-header {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.compact-mode .category-links {
  gap: 4px;
}

.compact-mode .link-card {
  padding: 8px 10px;
  background: transparent;
  border-radius: 4px;
}

.compact-mode .link-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.compact-mode .link-text {
  padding: 4px 0;
}

.compact-mode .categories-grid {
  gap: 10px;
}

.compact-mode .category-column {
  gap: 10px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }
  
  .container {
    padding: 10px;
  }
  
  .site-title {
    letter-spacing: 0.15em;
  }
  
  .category {
    padding: 15px;
  }
  
  .link-card {
    padding: 10px 12px;
  }
  
  .search-input {
    font-size: 1.2rem;
    padding: 15px 20px;
  }
}

/* Touch friendly */
@media (hover: none) and (pointer: coarse) {
  .link-card,
  .link-text,
  .category-header {
    min-height: 44px;
  }
}

/* Mobile Search Button */
.mobile-search-btn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-color, #ffffff);
  cursor: pointer;
  z-index: 100;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mobile-search-btn:hover,
.mobile-search-btn:focus {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.mobile-search-btn:active {
  transform: scale(0.95);
}

/* Show on touch devices */
@media (hover: none) and (pointer: coarse) {
  .mobile-search-btn {
    display: flex;
  }
}

/* Also show on small screens regardless of touch capability */
@media (max-width: 768px) {
  .mobile-search-btn {
    display: flex;
  }
}

/* Footer */
.site-footer {
  margin-top: 40px;
  padding: 20px;
  color: var(--text-color, #ffffff);
  opacity: 0.7;
  transition: all 0.2s ease;
}

.site-footer.align-left { text-align: left; }
.site-footer.align-center { text-align: center; }
.site-footer.align-right { text-align: right; }

.site-footer.size-small .footer-text { font-size: 0.75rem; }
.site-footer.size-medium .footer-text { font-size: 0.9rem; }
.site-footer.size-large .footer-text { font-size: 1.1rem; }

/* Footer hover effects */
.footer-hover-glow:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.footer-hover-fade:hover {
  opacity: 0.5;
}

.footer-hover-scale:hover {
  transform: scale(1.05);
}

.footer-hover-neon:hover {
  animation: neon-pulse 0.5s ease-in-out;
  text-shadow: 0 0 5px var(--text-color, #ffffff),
               0 0 10px var(--text-color, #ffffff),
               0 0 20px var(--accent-color, #888888);
}

.footer-hover-blur:hover {
  animation: blur-in 0.3s ease forwards;
}

/* Request Link */
.request-link-container {
  text-align: center;
  padding: 15px 20px;
  margin-top: 10px;
}

.request-link {
  color: var(--accent-color, #888888);
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.request-link:hover {
  opacity: 1;
  color: var(--text-color, #ffffff);
  text-decoration: underline;
}

/* Status Indicator - Monitoring icon */
.status-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: bold;
}

.status-bubble::before {
  content: '?';
  color: #a1a1aa;
}

.status-bubble.online::before {
  content: '✓';
  color: #4ade80;
  text-shadow: 0 0 6px #4ade80;
}

.status-bubble.offline::before {
  content: '✗';
  color: #f87171;
  text-shadow: 0 0 6px #f87171;
}

.status-bubble.unknown::before {
  content: '?';
  color: #a1a1aa;
}

/* Widget Containers */
.widgets-container {
  margin-bottom: 30px;
}

.widgets-container.position-below {
  margin-top: 30px;
  margin-bottom: 0;
}

.widgets-container:empty {
  display: none;
}

/* Widget Base Styles */
.widget {
  background: var(--category-bg-color, rgba(255,255,255,0.03));
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.widget-title {
  font-family: var(--title-font, 'Courier New', Courier, monospace);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--category-title-color, var(--text-color, #ffffff));
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Server Monitor Widget */
.server-monitor-widget .server-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Server Monitor Display Modes */
.server-monitor-widget.display-grid .server-list {
  display: grid;
  gap: 10px;
}

.server-monitor-widget.display-grid.cols-2 .server-list { grid-template-columns: repeat(2, 1fr); }
.server-monitor-widget.display-grid.cols-3 .server-list { grid-template-columns: repeat(3, 1fr); }
.server-monitor-widget.display-grid.cols-4 .server-list { grid-template-columns: repeat(4, 1fr); }
.server-monitor-widget.display-grid.cols-auto .server-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.server-monitor-widget.display-compact .server-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.server-monitor-widget.display-compact .server-item {
  flex: 0 0 auto;
}

/* Server Item Base */
.server-item {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: var(--link-card-bg-color, rgba(255,255,255,0.05));
  border-radius: 8px;
  gap: 12px;
  transition: all 0.2s ease;
}

.server-item .server-name {
  flex-grow: 1;
  font-size: 0.95rem;
}

.server-item .server-latency {
  color: var(--accent-color);
  font-size: 0.85rem;
}

.server-item .last-checked {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}

/* Server Item Styles */
.server-monitor-widget.item-text .server-item {
  background: transparent;
  padding: 8px 0;
  border-radius: 0;
}

.server-monitor-widget.item-minimal .server-item {
  background: transparent;
  padding: 6px 10px;
}

.server-monitor-widget.item-minimal .server-latency,
.server-monitor-widget.item-minimal .last-checked {
  display: none;
}

/* Server Text Sizes */
.server-monitor-widget.text-small .server-name { font-size: 0.85rem; }
.server-monitor-widget.text-medium .server-name { font-size: 0.95rem; }
.server-monitor-widget.text-large .server-name { font-size: 1.1rem; }

.server-monitor-widget.text-small .server-latency,
.server-monitor-widget.text-small .last-checked { font-size: 0.75rem; }
.server-monitor-widget.text-medium .server-latency,
.server-monitor-widget.text-medium .last-checked { font-size: 0.85rem; }
.server-monitor-widget.text-large .server-latency,
.server-monitor-widget.text-large .last-checked { font-size: 0.95rem; }

/* Server Item Hover Effects */
.server-monitor-widget.hover-glow .server-item:hover {
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.server-monitor-widget.hover-scale .server-item:hover {
  transform: scale(1.02);
}

.server-monitor-widget.hover-fade .server-item:hover {
  opacity: 0.7;
}

.server-monitor-widget.hover-slide .server-item:hover {
  transform: translateX(5px);
}

/* Server Item Border Radius */
.server-monitor-widget.radius-none .server-item { border-radius: 0; }
.server-monitor-widget.radius-small .server-item { border-radius: 4px; }
.server-monitor-widget.radius-medium .server-item { border-radius: 8px; }
.server-monitor-widget.radius-large .server-item { border-radius: 12px; }
.server-monitor-widget.radius-pill .server-item { border-radius: 24px; }

/* Server Monitor Container Styles */
.server-monitor-widget.container-transparent {
  background: transparent;
  padding: 0;
}

.server-monitor-widget.container-bordered {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.server-monitor-widget.container-transparent .widget-title,
.server-monitor-widget.container-bordered .widget-title {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Grid responsive */
@media (max-width: 768px) {
  .server-monitor-widget.display-grid.cols-4 .server-list { grid-template-columns: repeat(2, 1fr); }
  .server-monitor-widget.display-grid.cols-3 .server-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .server-monitor-widget.display-grid .server-list { grid-template-columns: 1fr; }
  .server-monitor-widget.display-compact .server-list { flex-direction: column; }
}

/* Clock Widget */
.clock-widget {
  text-align: center;
  padding: 30px 20px;
}

.clock-widget .time {
  font-size: 3rem;
  font-weight: 300;
  font-family: var(--font-family);
  letter-spacing: 0.1em;
}

.clock-widget .date {
  color: var(--clock-date-color, var(--accent-color));
  font-size: 1rem;
  margin-top: 10px;
}

/* Clock Widget - Custom text color */
.clock-widget .time {
  color: var(--clock-text-color, inherit);
}

/* Clock Widget - Size Presets */
.clock-widget.size-small .time { font-size: 1.5rem; }
.clock-widget.size-small .date { font-size: 0.75rem; }
.clock-widget.size-medium .time { font-size: 3rem; }
.clock-widget.size-medium .date { font-size: 1rem; }
.clock-widget.size-large .time { font-size: 4.5rem; }
.clock-widget.size-large .date { font-size: 1.25rem; }
.clock-widget.size-xlarge .time { font-size: 6rem; }
.clock-widget.size-xlarge .date { font-size: 1.5rem; }

/* Clock Widget - Font Families */
.clock-widget.font-system .time { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.clock-widget.font-monospace .time { font-family: 'Courier New', Consolas, 'Liberation Mono', monospace; }
.clock-widget.font-serif .time { font-family: Georgia, 'Times New Roman', Times, serif; }
.clock-widget.font-elegant .time { font-family: 'Playfair Display', Didot, Georgia, serif; }
.clock-widget.font-theme .time { font-family: var(--font-family); }

/* Clock Widget - Font Weights */
.clock-widget.weight-light .time { font-weight: 200; }
.clock-widget.weight-normal .time { font-weight: 400; }
.clock-widget.weight-bold .time { font-weight: 700; }

/* Clock Widget - Text Shadows */
.clock-widget.shadow-subtle .time { text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.clock-widget.shadow-glow .time { text-shadow: 0 0 20px currentColor; }
.clock-widget.shadow-strong .time { text-shadow: 0 4px 8px rgba(0,0,0,0.5); }
.clock-widget.shadow-neon .time {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
}

/* Clock Widget - Text Gradients */
.clock-widget.gradient-sunset .time {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clock-widget.gradient-ocean .time {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clock-widget.gradient-fire .time {
  background: linear-gradient(135deg, #f12711, #f5af19);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clock-widget.gradient-purple .time {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.clock-widget.gradient-mint .time {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Clock Widget - Hover Effects */
.clock-widget.hover-glow { transition: box-shadow 0.3s ease; }
.clock-widget.hover-glow:hover { box-shadow: 0 0 30px rgba(255,255,255,0.2); }

.clock-widget.hover-scale { transition: transform 0.3s ease; }
.clock-widget.hover-scale:hover { transform: scale(1.02); }

.clock-widget.hover-fade { transition: opacity 0.3s ease; }
.clock-widget.hover-fade:hover { opacity: 0.8; }

.clock-widget.hover-pulse:hover .time { animation: clock-pulse 1s infinite; }

/* Clock Widget - Animations */
@keyframes clock-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes clock-slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes clock-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.clock-widget.anim-fade-in { animation: clock-fade-in 0.5s ease-out; }
.clock-widget.anim-slide-up { animation: clock-slide-up 0.5s ease-out; }
.clock-widget.anim-pulse .time { animation: clock-pulse 2s infinite; }
.clock-widget.anim-breathe { animation: clock-breathe 4s infinite ease-in-out; }

/* Clock Widget - Text Alignment */
.clock-widget.text-left { text-align: left; }
.clock-widget.text-center { text-align: center; }
.clock-widget.text-right { text-align: right; }

/* Clock Widget - Border Radius */
.clock-widget.radius-none { border-radius: 0; }
.clock-widget.radius-small { border-radius: 4px; }
.clock-widget.radius-medium { border-radius: 12px; }
.clock-widget.radius-large { border-radius: 20px; }
.clock-widget.radius-pill { border-radius: 50px; }

/* Widget - Container Styles (shared) */
.widget.container-card {
  background: var(--category-bg-color, rgba(255,255,255,0.03));
}
.widget.container-transparent {
  background: transparent;
  padding: 20px 0;
}
.widget.container-bordered {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
}
.widget.container-glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Weather Widget */
.weather-widget {
  text-align: center;
  padding: 20px;
}

.weather-widget .temperature {
  font-size: 2.5rem;
  font-weight: 300;
}

.weather-widget .condition {
  color: var(--accent-color);
  margin-top: 5px;
}

.weather-widget .location {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 10px;
}

.weather-widget .weather-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 5px;
}

/* Iframe Widget */
.iframe-widget iframe {
  width: 100%;
  border: none;
  border-radius: 8px;
}

/* Custom HTML Widget */
.custom-html-widget {
  /* Scoped styles from widget config will be applied */
}

/* Widget responsive */
@media (max-width: 600px) {
  .widget {
    padding: 15px;
  }

  .clock-widget .time {
    font-size: 2rem;
  }

  .weather-widget .temperature {
    font-size: 2rem;
  }

  /* Clock size presets responsive */
  .clock-widget.size-xlarge .time { font-size: 3rem; }
  .clock-widget.size-large .time { font-size: 2.5rem; }
}

/* ===== Widget Placement System ===== */

/* Widget Container - Flexbox layout for side-by-side widgets */
.widgets-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

/* Widget Widths */
.widget.width-full { width: 100%; flex: 0 0 100%; }
.widget.width-half { width: calc(50% - 10px); flex: 0 0 calc(50% - 10px); }
.widget.width-third { width: calc(33.333% - 14px); flex: 0 0 calc(33.333% - 14px); }
.widget.width-quarter { width: calc(25% - 15px); flex: 0 0 calc(25% - 15px); }
.widget.width-auto { width: auto; flex: 0 0 auto; }

/* Widget Alignment within container */
.widget.widget-align-left { margin-right: auto; }
.widget.widget-align-center { margin-left: auto; margin-right: auto; }
.widget.widget-align-right { margin-left: auto; }

/* For full-width widgets, alignment controls content inside */
.widget.width-full.widget-align-left { text-align: left; justify-content: flex-start; }
.widget.width-full.widget-align-center { text-align: center; justify-content: center; }
.widget.width-full.widget-align-right { text-align: right; justify-content: flex-end; }

/* Server monitor widget content alignment */
.server-monitor-widget.widget-align-center .server-list {
  align-items: center;
}
.server-monitor-widget.widget-align-center .server-item {
  justify-content: center;
}
.server-monitor-widget.widget-align-left .server-list {
  align-items: flex-start;
}
.server-monitor-widget.widget-align-right .server-list {
  align-items: flex-end;
}

/* Position Container - Header */
.widgets-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.widgets-header .widget {
  margin-bottom: 0;
  background: transparent;
}

/* Offset body when header widgets present */
body.has-header-widgets {
  padding-top: 80px;
}

/* Position Container - Footer */
.widgets-footer {
  margin-top: 40px;
  padding: 20px 0;
}

/* Position Container - Left Sidebar */
.widgets-sidebar-left {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  max-width: 25vw;
  padding: 20px;
  z-index: 50;
  flex-direction: column;
}

.widgets-sidebar-left .widget {
  width: 100%;
  margin-bottom: 15px;
}

/* Position Container - Right Sidebar */
.widgets-sidebar-right {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  max-width: 25vw;
  padding: 20px;
  z-index: 50;
  flex-direction: column;
}

.widgets-sidebar-right .widget {
  width: 100%;
  margin-bottom: 15px;
}

/* Offset main content when sidebars present */
body.has-left-sidebar .container {
  margin-left: 240px;
}

body.has-right-sidebar .container {
  margin-right: 240px;
}

/* Widget width responsive */
@media (max-width: 900px) {
  .widget.width-quarter { width: calc(50% - 10px); flex: 0 0 calc(50% - 10px); }
  .widget.width-third { width: calc(50% - 10px); flex: 0 0 calc(50% - 10px); }

  /* Hide sidebars on medium screens */
  .widgets-sidebar-left,
  .widgets-sidebar-right {
    display: none;
  }

  body.has-left-sidebar .container,
  body.has-right-sidebar .container {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 600px) {
  .widget.width-half,
  .widget.width-third,
  .widget.width-quarter {
    width: 100%;
    flex: 0 0 100%;
  }

  .widgets-header {
    position: relative;
    padding: 10px;
  }

  body.has-header-widgets {
    padding-top: 20px;
  }
}