:root {
  --primary-color: #6366f1;
  /* Indigo 500 */
  --primary-hover: #4f46e5;
  /* Indigo 600 */
  --bg-color: #f3f4f6;
  /* Gray 100 */
  --card-bg: #ffffff;
  --text-main: #111827;
  /* Gray 900 */
  --text-secondary: #6b7280;
  /* Gray 500 */
  --success-color: #10b981;
  /* Emerald 500 */
  --error-color: #ef4444;
  /* Red 500 */
  --border-radius: 20px;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --card-hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --font-family: 'Inter', 'Noto Sans TC', sans-serif;
  --header-bg: rgba(255, 255, 255, 0.8);
  --header-text: #1f2937;
  --transition-speed: 0.3s;
}

html {
  overflow-y: scroll;
}

body {
  font-family: var(--font-family);
  background: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Add subtle gradient background */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 20%);
  background-attachment: fixed;
}

/* Background decoration shape */
.bg-decoration {
  position: fixed;
  top: -20%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

body.no-scroll {
  overflow-y: hidden;
}

body.lock-scroll {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

header {
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--header-text);
  padding: 1.25rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  letter-spacing: -0.025em;
}

footer {
  /* Keep footer simple but aligned right as requested */
  padding: 1.5rem 2rem;
  text-align: right;
  /* Constraint: Bottom Right */
  font-size: 0.875rem;
  color: var(--text-secondary);
  background: transparent;
}

main {
  max-width: 1400px;
  /* Widen to accommodate single row status */
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.card {
  background: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: -0.025em;
  /* Flex header for "Last updated" alignment */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Push badge to right */
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* New Logic for Header Flex */
.card-header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.update-time-badge {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  background-color: transparent;
  /* Same as bg */
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  transition: background-color 0.2s;
  cursor: default;
}

.update-time-badge:hover {
  background-color: rgba(0, 0, 0, 0.05);
  /* Faint background on hover */
}

.card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Status Grid Refactor */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Reduce min-width slightly */
  gap: 1rem;
}

/* User Request: 802px - 1153px should be 3x2 grid */
@media (min-width: 802px) and (max-width: 1153px) {
  .status-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.status-item {
  background: rgba(243, 244, 246, 0.5);
  /* Pill shape */
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  /* Constraint: Vertical Center */
  justify-content: center;
  /* Center content */
  gap: 0.75rem;
  /* Space between dot and text */
  transition: all 0.2s;
  white-space: nowrap;
  /* Constraint: No wrapping */
  /* Ensure text doesn't overflow if screen is tiny, but pill shape usually implies space */
  flex-direction: row;
}

/* Response wrapping behavior: 2 lines and centered if needed */
/* The user asked for "if wrapping, 2 lines and centered".
   This usually means the text wraps to a second line inside the capsule?
   Or the capsules themselves wrap?
   "子卡片以兩行且置中的方式呈現" likely means the content INSIDE the card (dot and text)
   should stack if it's too narrow? But user previously said "dot and text on same line".
   Wait, user said: "如果有會換行的狀況就讓子卡片以兩行且置中的方式呈現".
   "If there is a wrapping situation, let the SUB-CARD be presented in two lines and centered".
   This contradicts "Clause 1: text cannot wrap".
   Re-reading Request 4: "If there is a situation where it breaks/wraps, let the sub-card be 2 lines and centered".
   This likely overrides the previous constraint ONLY for small screens/wrapping scenarios.
   I will implement a media query or flex-wrap behavior allow this.
   But "Clause 1" was strict. I will assume "Clause 1" applies to desktop/normal view.
   If it MUST wrap (mobile), then center and stack. */

@media (max-width: 480px) {
  .status-item {
    flex-direction: column;
    /* Stack dot and text */
    text-align: center;
    border-radius: 20px;
    /* Pillow shape on mobile if stacked? User asked for pill... Pill is hard with stack. Just keep rounded. */
    padding: 1rem;
    white-space: normal;
  }
}

/* Constraint: Text and dot on same line */
.status-item strong {
  font-weight: 500;
  color: var(--text-main);
}

.status-item i {
  font-size: 0.75rem;
  /* Smaller dot */
}

.status-item.online {
  background: rgba(209, 250, 229, 0.3);
  border-color: rgba(16, 185, 129, 0.2);
}

.status-item.online i {
  color: var(--success-color);
}

.status-item.offline {
  background: rgba(254, 226, 226, 0.3);
  border-color: rgba(239, 68, 68, 0.2);
}

.status-item.offline i {
  color: var(--error-color);
}

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


/* Stats Grid Refactor */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.stats-item {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Change from center to allow custom spacing */
  padding-top: 1.5rem;
  /* Ensure top space */
  gap: 0;
  /* Manual spacing via margins */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s;
  position: relative;
}

.stats-item:hover {
  transform: translateY(-2px);
}

.stats-label {
  font-size: 1rem;
  /* Increased from 0.875rem */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 600;
  /* Fixed height/position if needed, but flex stack works */
  margin-bottom: auto;
  /* Push content below to bottom... wait, user wants number pushed down */
}

/* Constraint: 2 lines format (Label then Number) */
.stats-item span {
  font-size: 1.75rem;
  /* Reduced from 2.25rem for harmony */
  font-weight: 800;
  color: var(--text-main);
  background: linear-gradient(135deg, var(--text-main) 0%, #4b5563 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;

  /* User Request: Push number down a bit. Distance from bottom ~= Label height */
  margin-top: 1.5rem;
  /* Push down */
  margin-bottom: 0.2rem;
  /* Small bottom space? */
}

/* Error state styling */
.stats-item .error-text {
  font-size: 1.25rem !important;
  /* Increased from 1rem */
  color: var(--error-color);
  -webkit-text-fill-color: var(--error-color);
  font-weight: 500;
}

/* Tools Layout */
.tools-container {
  display: flex;
  gap: 2rem;
}

.tools-container .card {
  flex: 1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
}

.button:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 8px -1px rgba(99, 102, 241, 0.4);
}

.back-button {
  margin-top: 1.5rem !important;
  /* Visual balance with bottom padding */
  margin-left: 0 !important;
  /* Reset inline style if needed, though js sets it */
}

/* Card Expansion Logic (Preserved) */
.card.expanded {
  z-index: 999;
  cursor: default;
  /* Reset hover effects when expanded */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.card.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

main.no-gap {
  gap: 0 !important;
}

.detail-content p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  main {
    padding: 1rem;
    gap: 1rem;
  }

  .tools-container {
    flex-direction: column;
    gap: 1rem;
  }

  .status-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  header {
    font-size: 1.2rem;
  }

  .status-grid {
    grid-template-columns: 1fr;
    /* Stack on very small screens? Or keeping 2 columns if fits */
    grid-template-columns: repeat(2, 1fr);
    /* Stick to grid */
  }

  .status-item {
    padding: 0.75rem;
    font-size: 0.9rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stats-item {
    padding: 1rem;
  }

  .stats-item span {
    font-size: 1.5rem;
  }

  footer {
    text-align: center;
    /* Center on mobile usually looks better, but constraint says Right? User: "Footer... maintain bottom right". Usually strict. But typically mobile footers are centered. I'll stick to right or center. User rule: "maintain in the lower right corner". I will force right even on mobile unless it looks broken. */
    text-align: right;
  }
}

/* Specific Constraint Check: 2x2 Layout for Tools */
/* The layout is handled by having two .tools-container divs. 
   Inside each container, flex-direction makes them side-by-side.
   On mobile, flex-direction: column makes them stack. 
   This preserves the 2x2 feel on desktop and stack on mobile. */