* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        /* ========== Global Styles ========== */
        :root {
          color-scheme: dark light;

          /* Backgrounds */
          --bg: #0d1117;
          --surface: #161b22;
          --border: #21262d;

          /* Text */
          --text: #c9d1d9;
          --text-strong: #e6edf3;
          --text-secondary: #8b949e;
          --text-muted: #6e7681;

          /* Status */
          --green: #39d353;
          --yellow: #d29922;
          --red: #f85149;

          /* UI */
          --tooltip-bg: #30363d;
          --tooltip-border: #484f58;
        }

        @media (prefers-color-scheme: light) {
          :root:not([data-theme="dark"]) {
            color-scheme: light;

            --bg: #ffffff;
            --surface: #f6f8fa;
            --border: #d0d7de;

            --text: #24292f;
            --text-strong: #1f2328;
            --text-secondary: #57606a;
            --text-muted: #656d76;

            --green: #1a7f37;
            --yellow: #9a6700;
            --red: #cf222e;

            --tooltip-bg: #ffffff;
            --tooltip-border: #d0d7de;
          }
        }

        :root[data-theme="dark"] {
          color-scheme: dark;

          --bg: #0d1117;
          --surface: #161b22;
          --border: #21262d;

          --text: #c9d1d9;
          --text-strong: #e6edf3;
          --text-secondary: #8b949e;
          --text-muted: #6e7681;

          --green: #39d353;
          --yellow: #d29922;
          --red: #f85149;

          --tooltip-bg: #30363d;
          --tooltip-border: #484f58;
        }

        :root[data-theme="light"] {
          color-scheme: light;

          --bg: #ffffff;
          --surface: #f6f8fa;
          --border: #d0d7de;

          --text: #24292f;
          --text-strong: #1f2328;
          --text-secondary: #57606a;
          --text-muted: #656d76;

          --green: #1a7f37;
          --yellow: #9a6700;
          --red: #cf222e;

          --tooltip-bg: #ffffff;
          --tooltip-border: #d0d7de;
        }

        /* ========== Base ========== */
        body {
          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          background: var(--bg);
          color: var(--text);
          font-size: 14px;
          transition: background-color .2s ease, color .2s ease;
        }

        h1 {
          margin-bottom: 16px;
          font-size: 22px;
          color: var(--text-strong);
        }

        p {
          margin-bottom: 28px;
          color: var(--text-secondary);
          font-size: 13px;
        }

        footer {
          padding: 14px;
          font-size: 11px;
          color: var(--text-muted);
          text-align: center;
        }


        /* ========= Layout ========== */
        .main-content {
          text-align: center;
          padding: 32px 20px 20px;
          width: 100%;
          max-width: 1200px;
          margin: 0 auto;
        }

        .status-section,
        .history-section {
          width: 100%;
          max-width: 900px;
          padding: 12px 16px;
          margin: 0 auto;
          text-align: left;
          border-top: 1px solid var(--border);
        }

        .hero-image {
          width: clamp(280px, 60vw, 1060px);
          max-width: 90vw;
          height: auto;
          border-radius: 4px;
          margin-bottom: 16px;
        }

        /* ========= Status ========== */


        .status-services {
          display: flex;
          flex-wrap: wrap;
          gap: 6px 16px;
          width: 100%;
        }

        .service-item {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          white-space: nowrap;
          flex-shrink: 0;
        }

        .service-text {
          display: inline;
          align-items: baseline;
          gap: 4px;
        }

        .status-label {
          color: var(--text);
        }

        .heartbeat-age {
          color: var(--text-muted);
          font-size: 10px;
        }

        .status-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .status-dot.up {
          background: var(--green);
        }

        .status-dot.degraded {
          background: var(--yellow);
        }

        .status-dot.down {
          background: var(--red);
        }

        .status-header {
          font-size: 10px;
          color: var(--text-muted);
          margin-top: 6px;
        }

        /*========= History ========== */
        .history-header {
          margin-bottom: 12px;
        }

        .history-title-group {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
        }

        .history-title {
          font-weight: 600;
          font-size: 12px;
          color: var(--text-strong);
        }

        .history-subtitle {
          display: flex;
          align-items: center;
          gap: 6px;
          margin-top: 3px;
          font-size: 10px;
          color: var(--text-muted);
        }

        .refresh-button {
          background: none;
          border: none;
          color: inherit;
          font: inherit;
          font-size: 13px;
          line-height: 1;
          padding: 0px;
          cursor: pointer;
          transition: color .15s ease, transform .15s ease;
        }

        .refresh-button:hover {
          color: var(--text-strong);
        }

        .refresh-button:active {
          transform: rotate(90deg);
        }

        .tiles-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20px 28px;
        }

        .service-tile {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .service-info {
          display: flex;
          flex-direction: column;
          gap: 1px;
        }

        .history-label {
          font-size: 11px;
          font-weight: 600;
          color: var(--text-strong);
        }

        .service-uptime {
          font-size: 10px;
          color: var(--text-muted);
        }

        .service-grid {
          display: grid;
          grid-auto-flow: column;
          gap: 1px;
        }

        .week-column {
          display: flex;
          flex-direction: column;
          gap: 1px;
        }

        .grid-cell {
          width: 6px;
          height: 6px;
          border-radius: 1px;
          background: var(--border);
          cursor: pointer;
          position: relative;
        }

        .grid-cell:hover {
          transform: scale(1.8);
          z-index: 20;
        }

        .grid-cell.up {
          background: var(--green);
        }

        .grid-cell.degraded {
          background: var(--yellow);
        }

        .grid-cell.down {
          background: var(--red);
        }

        .grid-cell[data-tooltip]:hover::after {
          content: attr(data-tooltip);
          position: absolute;
          bottom: 100%;
          left: 50%;
          transform: translateX(-50%);
          background: var(--tooltip-bg);
          color: var(--text-strong);
          border: 1px solid var(--tooltip-border);
          padding: 3px 6px;
          border-radius: 3px;
          font-size: 9px;
          white-space: nowrap;
          margin-bottom: 4px;
          z-index: 100;
          pointer-events: none;
        }

        .legend {
          display: flex;
          gap: 12px;
          font-size: 10px;
          color: var(--text-muted);
          margin-top: 14px;
        }

        .legend-item {
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .legend-dot {
          width: 6px;
          height: 6px;
          border-radius: 1px;
        }

        .legend-dot.up {
          background: var(--green);
        }

        .legend-dot.degraded {
          background: var(--yellow);
        }

        .legend-dot.down {
          background: var(--red);
        }

        .section-error {
          font-size: 11px;
          color: var(--red);
        }

        .page-header {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .theme-picker {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
        }

        .theme-toggle {
          background: none;
          border: none;
          color: var(--text-muted);
          font-family: inherit;
          font-size: 11px;
          cursor: pointer;
          padding: 4px;
        }

        .theme-toggle:hover {
          color: var(--text-strong);
        }

        .theme-menu {
          display: none;
          position: absolute;
          right: 0;
          top: 100%;
          margin-top: 6px;

          min-width: 90px;

          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: 4px;

          padding: 4px;
          z-index: 20;
        }

        .theme-menu.open {
          display: flex;
          flex-direction: column;
        }

        .theme-menu button {
          background: none;
          border: none;
          color: var(--text);
          text-align: left;
          font-family: inherit;
          font-size: 11px;
          padding: 5px 8px;
          cursor: pointer;
        }

        .theme-menu button:hover {
          background: var(--border);
          color: var(--text-strong);
        }

        /* ========= Responsive Styles ========== */
        @media (max-width: 500px) {
          h1 {
            margin-bottom: 0;
          }

          .page-header {
            flex-direction: row;
          }

          .theme-picker {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            margin: 0;
          }

          .theme-menu {
            left: auto;
            right: 0;
            transform: none;
          }
        }