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

    :root {
      --bg:        #0d1117;
      --surface:   #161b22;
      --border:    #21262d;
      --text:      #c9d1d9;
      --muted:     #6e7681;
      --blue:      #58a6ff;
      --red:       #f85149;
      --green:     #3fb950;
      --yellow:    #d29922;
      --font-ui:   'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-ui);
      font-size: 14px;
      min-height: 100vh;
    }

    /* ── Header ── */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      height: 52px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .header-left { display: flex; align-items: center; gap: 12px; }
    .logo {
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 500;
      color: var(--blue);
      letter-spacing: -0.3px;
    }
    .status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 6px var(--green);
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.4; }
    }
    .header-right {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
    }

    /* ── Layout ── */
    main {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto;
      gap: 16px;
      padding: 20px 24px;
      max-width: 1400px;
      margin: 0 auto;
    }

    /* ── Cards ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 18px 20px;
    }
    .card-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 10px;
    }
    .card-value {
      font-family: var(--font-mono);
      font-size: 32px;
      font-weight: 500;
      color: var(--text);
      line-height: 1;
    }
    .card-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }
    .card-value.red    { color: var(--red); }
    .card-value.green  { color: var(--green); }
    .card-value.yellow { color: var(--yellow); }

    /* ── Span helpers ── */
    .span2 { grid-column: span 2; }
    .span3 { grid-column: span 3; }

    /* ── Chart wrappers ── */
    .chart-wrap {
      position: relative;
      height: 180px;
    }

    /* ── World map ── */
    #map-card { grid-column: span 3; }
    .map-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      border-radius: 4px;
      background: #0a0f14;
    }
    #world-svg {
      width: 100%;
      height: auto;
      display: block;
    }
    #world-svg path {
      fill: #1c2730;
      stroke: #2d3f4e;
      stroke-width: 0.4;
      transition: fill 0.3s;
    }
    #pings-layer circle {
      pointer-events: none;
    }

    /* ── Alerts table ── */
    #alerts-card { grid-column: span 3; }
    .alerts-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 260px;
      overflow-y: auto;
    }
    .alerts-list::-webkit-scrollbar { width: 4px; }
    .alerts-list::-webkit-scrollbar-track { background: transparent; }
    .alerts-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    .alert-row {
      display: grid;
      grid-template-columns: 140px 100px 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 4px;
      background: var(--bg);
      border-left: 3px solid transparent;
      font-family: var(--font-mono);
      font-size: 12px;
    }
    .alert-row.ddos            { border-color: var(--red); }
    .alert-row.scan            { border-color: var(--yellow); }
    .alert-row.suspicious_path { border-color: var(--blue); }

    .alert-time  { color: var(--muted); }
    .alert-type  { font-weight: 500; }
    .alert-type.ddos            { color: var(--red); }
    .alert-type.scan            { color: var(--yellow); }
    .alert-type.suspicious_path { color: var(--blue); }
    .alert-ip    { color: var(--text); }
    .alert-detail{ color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ── Top IPs ── */
    .ip-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ip-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ip-addr {
      font-family: var(--font-mono);
      font-size: 12px;
      width: 130px;
      flex-shrink: 0;
      color: var(--text);
    }
    .ip-bar-wrap {
      flex: 1;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
    }
    .ip-bar {
      height: 100%;
      background: var(--blue);
      border-radius: 3px;
      transition: width 0.4s ease;
    }
    .ip-count {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      width: 40px;
      text-align: right;
    }

    /* ── Status badges ── */
    .status-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .status-badge {
      text-align: center;
      padding: 10px;
      border-radius: 4px;
      background: var(--bg);
    }
    .status-badge .code {
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 500;
    }
    .status-badge .cnt {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
    }
    .s2xx .code { color: var(--green); }
    .s3xx .code { color: var(--blue); }
    .s4xx .code { color: var(--yellow); }
    .s5xx .code { color: var(--red); }

    /* ── Empty state ── */
    .empty {
      color: var(--muted);
      font-size: 13px;
      padding: 20px 0;
      text-align: center;
    }

    /* ── Login overlay ── */
    #login-overlay {
      position: fixed; inset: 0;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .login-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 36px 40px;
      width: 340px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .login-title {
      font-family: var(--font-mono);
      font-size: 16px;
      color: var(--blue);
      margin-bottom: 4px;
    }
    .login-box input {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 9px 12px;
      color: var(--text);
      font-family: var(--font-mono);
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
    }
    .login-box input:focus { border-color: var(--blue); }
    .login-box button {
      background: var(--blue);
      color: #0d1117;
      border: none;
      border-radius: 4px;
      padding: 10px;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .login-box button:hover { opacity: 0.85; }
    .login-error {
      color: var(--red);
      font-size: 12px;
      font-family: var(--font-mono);
      display: none;
    }