:root {
    --bg:         #0a0c0f;
    --surface:    #111318;
    --surface2:   #181c23;
    --border:     #1e2430;
    --border2:    #2a3040;
    --text:       #d4dbe8;
    --muted:      #5a6478;
    --accent:     #00e5a0;
    --accent-dim: #00e5a018;
    --online:     #00e5a0;
    --offline:    #ff4d6a;
    --timeout:    #f5a623;
    --checking:   #4d9fff;
    --online-bg:  #00e5a010;
    --offline-bg: #ff4d6a10;
    --timeout-bg: #f5a62310;
    --checking-bg:#4d9fff10;
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
  }

  body::after {
    content: '';
    position: fixed;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 340px;
    background: radial-gradient(ellipse, #00e5a016 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .wrapper {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 44px 48px 80px;
  }

  /* ── Header ── */
  header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
  }

  .brand { display: flex; flex-direction: column; gap: 6px; }
  .brand-check-all { display: none !important; } /* hidden on desktop, shown on mobile */
  .logo-row { display: flex; align-items: center; gap: 12px; }

  .logo-icon {
    width: 36px; height: 36px;
    background: var(--accent);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 20px #00e5a040;
  }
  .logo-icon svg { width: 18px; height: 18px; }

  h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; color: #fff; }

  .tagline {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ── Header right ── */
  .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

  .header-top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

  .stats-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

  .stat-chip {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: var(--surface);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
  }
  .stat-chip:hover { filter: brightness(1.2); }
  .stat-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .stat-chip.s-online  .dot { background: var(--online);  box-shadow: 0 0 5px var(--online); }
  .stat-chip.s-offline .dot { background: var(--offline); box-shadow: 0 0 5px var(--offline); }
  .stat-chip.s-timeout .dot { background: var(--timeout); box-shadow: 0 0 5px var(--timeout); }
  .stat-chip .count { color: #fff; font-weight: 700; }
  .stat-chip.active.s-online  { background: var(--online-bg);  border-color: var(--online);  color: var(--online); }
  .stat-chip.active.s-offline { background: var(--offline-bg); border-color: var(--offline); color: var(--offline); }
  .stat-chip.active.s-timeout { background: var(--timeout-bg); border-color: var(--timeout); color: var(--timeout); }
  .stat-chip.active .count { color: inherit; }
  .stat-chip.total-chip.active { background: var(--surface2); border-color: var(--text); color: var(--text); }

  /* ── Auth button / user display ── */
  .btn-auth {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-auth:hover { border-color: var(--accent); color: var(--accent); }
  .btn-auth svg { width: 14px; height: 14px; flex-shrink: 0; }

  .user-display {
    display: flex; align-items: center; gap: 8px;
  }

  .user-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .user-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .user-name {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--text);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sync-status {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    display: flex; align-items: center; gap: 4px;
  }
  .sync-status.syncing { color: var(--checking); }
  .sync-status.synced  { color: var(--online); }
  .sync-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

  /* ── Check all button ── */
  .btn-check-all {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 18px;
    background: var(--accent);
    color: #000;
    border: none; border-radius: 8px;
    font-family: 'Syne', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 0 18px #00e5a030;
    white-space: nowrap;
  }
  .btn-check-all:hover { background: #00ffb3; box-shadow: 0 0 28px #00e5a055; transform: translateY(-1px); }
  .btn-check-all:active { transform: translateY(0); }
  .btn-check-all svg { width: 14px; height: 14px; }
  .btn-check-all.running { background: var(--border2); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

  /* ── Toolbar ── */
  .toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
  }

  .add-form { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }

  .add-form input {
    padding: 9px 13px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .add-form input::placeholder { color: var(--muted); }
  .add-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
  .add-form .inp-name { width: 140px; }
  .add-form .inp-url  { flex: 1; min-width: 180px; }

  .btn-add {
    padding: 9px 16px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Syne', sans-serif;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
  }
  .btn-add:hover { border-color: var(--accent); color: var(--accent); }

  /* ── Notice ── */
  .notice {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 14px;
    background: #4d9fff08;
    border: 1px solid #4d9fff1a;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 12px; color: #6a8aaa; line-height: 1.5;
  }
  .notice svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: #4d9fff; }

  /* ── Category label ── */
  .category-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 28px 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .category-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* ── GRID ── */
  .sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
  }

  /* ── Site card ── */
  .site-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.3s, background 0.3s, transform 0.15s;
    animation: fadeUp 0.3s ease both;
    position: relative;
    overflow: hidden;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .site-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: var(--idle-color, var(--border));
    transition: background 0.4s;
    border-radius: 10px 0 0 10px;
  }

  .site-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .site-card.status-online  { --idle-color: var(--online);  background: linear-gradient(135deg, var(--online-bg), var(--surface)); }
  .site-card.status-offline { --idle-color: var(--offline); background: linear-gradient(135deg, var(--offline-bg), var(--surface)); }
  .site-card.status-timeout { --idle-color: var(--timeout); background: linear-gradient(135deg, var(--timeout-bg), var(--surface)); }
  .site-card.status-checking{ --idle-color: var(--checking); }

  .card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .site-name {
    font-size: 15px; font-weight: 700;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
  }

  .card-actions {
    display: flex; gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .site-card:hover .card-actions { opacity: 1; }

  .btn-icon-sm {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .btn-icon-sm svg { width: 10px; height: 10px; }
  .btn-icon-sm.edit:hover   { border-color: var(--accent);  color: var(--accent);  background: var(--accent-dim); }
  .btn-icon-sm.remove:hover { border-color: var(--offline); color: var(--offline); background: var(--offline-bg); }

  .site-region {
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  .site-url {
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  .badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    transition: all 0.4s;
    white-space: nowrap;
  }
  .badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .badge.online   { background: var(--online-bg);   color: var(--online);  border: 1px solid #00e5a025; }
  .badge.offline  { background: var(--offline-bg);  color: var(--offline); border: 1px solid #ff4d6a25; }
  .badge.timeout  { background: var(--timeout-bg);  color: var(--timeout); border: 1px solid #f5a62325; }
  .badge.checking { background: var(--checking-bg); color: var(--checking);border: 1px solid #4d9fff25; }
  .badge.idle     { background: transparent; color: var(--muted); border: 1px solid var(--border); animation: idle-wait 2s ease-in-out infinite; }
  .badge.online   .badge-dot { background: var(--online);  box-shadow: 0 0 4px var(--online); }
  .badge.offline  .badge-dot { background: var(--offline); box-shadow: 0 0 4px var(--offline); }
  .badge.timeout  .badge-dot { background: var(--timeout); box-shadow: 0 0 4px var(--timeout); }
  .badge.checking .badge-dot { background: var(--checking); animation: pulse 0.9s ease-in-out infinite; }
  .badge.idle     .badge-dot { background: var(--muted); animation: idle-dot 2s ease-in-out infinite; }

  @keyframes idle-wait {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }
  @keyframes idle-dot {
    0%,100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.4); opacity: 1; }
  }
  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.3; transform:scale(0.7); }
  }

  .btn-check {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }
  .btn-check svg { width: 12px; height: 12px; }
  .btn-check:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
  .btn-check:disabled { opacity: 0.25; cursor: not-allowed; }

  .spin { animation: spin 0.75s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  .card-rt {
    font-family: 'Space Mono', monospace;
    font-size: 11px; color: var(--muted); text-align: right;
  }
  .card-rt.fast   { color: var(--online); }
  .card-rt.medium { color: var(--timeout); }
  .card-rt.slow   { color: var(--offline); }

  .card-time {
    font-family: 'Space Mono', monospace;
    font-size: 9px; color: var(--muted); opacity: 0.5;
  }

  /* ── Loading overlay ── */
  #loadingOverlay {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 100;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px;
    transition: opacity 0.4s;
  }
  #loadingOverlay.hidden { opacity: 0; pointer-events: none; }
  .loading-logo {
    width: 48px; height: 48px;
    background: var(--accent);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 30px #00e5a050;
    animation: breathe 1.5s ease-in-out infinite;
  }
  .loading-logo svg { width: 24px; height: 24px; }
  @keyframes breathe {
    0%,100% { box-shadow: 0 0 20px #00e5a040; }
    50%      { box-shadow: 0 0 40px #00e5a090; }
  }
  .loading-text {
    font-family: 'Space Mono', monospace;
    font-size: 11px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em;
  }

  /* ── Modal base ── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }

  .modal {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 400px;
    transform: translateY(12px);
    transition: transform 0.25s;
    position: relative;
  }
  .modal-overlay.open .modal { transform: translateY(0); }

  .modal-title {
    font-size: 18px; font-weight: 800; color: #fff;
    margin-bottom: 6px;
  }
  .modal-sub {
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .modal-close {
    position: absolute; top: 16px; right: 16px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
  }
  .modal-close:hover { border-color: var(--offline); color: var(--offline); }
  .modal-close svg { width: 12px; height: 12px; }

  /* Auth modal specifics */
  .btn-google {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 11px 16px;
    background: #fff;
    border: none; border-radius: 8px;
    color: #1f1f1f;
    font-family: 'Syne', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 20px;
  }
  .btn-google:hover { background: #f0f0f0; transform: translateY(-1px); }
  .btn-google svg { width: 18px; height: 18px; flex-shrink: 0; }

  .modal-divider {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
  }
  .modal-divider::before, .modal-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border2);
  }
  .modal-divider span {
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.08em;
  }

  .form-group { margin-bottom: 12px; }
  .form-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .form-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: 7px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .form-input::placeholder { color: var(--muted); }
  .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

  .form-row { display: flex; gap: 8px; }
  .form-row .form-group { flex: 1; }

  .btn-primary {
    width: 100%;
    padding: 10px;
    background: var(--accent);
    border: none; border-radius: 8px;
    color: #000;
    font-family: 'Syne', sans-serif;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
  }
  .btn-primary:hover { background: #00ffb3; transform: translateY(-1px); }

  .modal-footer-link {
    text-align: center;
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 10px; color: var(--muted);
  }
  .modal-footer-link a {
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
  }
  .modal-footer-link a:hover { text-decoration: underline; }

  .auth-error {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: var(--offline);
    background: var(--offline-bg);
    border: 1px solid #ff4d6a25;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
    display: none;
  }
  .auth-error.show { display: block; }

  /* Edit modal specifics */
  #editModal .modal { max-width: 440px; }

  /* Config warning banner */
  .config-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    background: #f5a62310;
    border: 1px solid #f5a62330;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 12px; color: #c8861a; line-height: 1.5;
  }
  .config-banner svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
  .config-banner code {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    background: #f5a62318;
    padding: 1px 5px;
    border-radius: 3px;
  }

  /* Footer */
  footer {
    margin-top: 52px;
    text-align: center;
    font-family: 'Space Mono', monospace;
    font-size: 18px; color: var(--muted);
    opacity: 0.8; letter-spacing: 0.06em;
  }

  /* Ultrawide: 2560px+ */
  @media (min-width: 2560px) {
    .wrapper { padding: 56px 80px 100px; }
    h1 { font-size: 36px; }
    .tagline { font-size: 12px; }
    .sites-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
    .site-card { padding: 18px 20px; }
    .site-name { font-size: 17px; }
    .site-url, .site-region { font-size: 11px; }
    .badge { font-size: 11px; padding: 4px 11px; }
    .card-rt { font-size: 12px; }
    .btn-check { width: 30px; height: 30px; }
    .btn-check svg { width: 14px; height: 14px; }
    .category-label { font-size: 11px; margin: 32px 0 12px; }
    .stat-chip { font-size: 12px; padding: 6px 14px; }
    .btn-check-all { font-size: 15px; padding: 11px 22px; }
    .add-form input { font-size: 13px; padding: 10px 15px; }
    .notice { font-size: 13px; }
  }

  /* Super ultrawide: 3440px+ */
  @media (min-width: 3440px) {
    .wrapper { padding: 64px 120px 120px; }
    .sites-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  }

  @media (max-width: 600px) {
    .wrapper { padding: 20px 14px 60px; }
    .sites-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

    /* Toolbar: stack vertically */
    .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }

    /* Add form: full width, two rows */
    .add-form { flex-direction: column; }
    .add-form .inp-name { width: 100%; }
    .add-form .inp-url  { width: 100%; min-width: 0; }
    .btn-add  { width: 100%; justify-content: center; padding: 11px; }

    /* Check All secondary button: full width */

    /* Share modal: mobile layout */
    .modal { padding: 20px 16px; border-radius: 12px; }
    .modal-title { font-size: 16px; }
    #shareCodeDisplay { font-size: 18px !important; letter-spacing: 0.15em !important; padding: 10px 8px !important; }
    #btnCopyCode { height: 40px !important; width: 40px !important; padding: 0 !important; flex-shrink: 0; }
    .share-import-row { flex-direction: column; }
    .share-import-btn { width: 100%; justify-content: center; padding: 12px 16px; white-space: nowrap; font-size: 13px; }

    /* Header: stacked, 3 rows */
    header { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 20px; }
    h1 { font-size: 22px; }
    .tagline { display: none; }

    /* Row 1: logo left, Check All right */
    .brand { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .brand-check-all { display: flex; font-size: 12px; padding: 8px 14px; }
    .desktop-check-all { display: none; }

    /* Row 2: user info full width, sign out + share on same row below */
    .header-right { width: 100%; gap: 6px; align-items: stretch; }
    .header-top-row { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .header-top-row #authArea { width: 100%; flex: none; }
    .header-top-row #authArea > button { width: 100%; justify-content: center; }
    .header-top-row #authArea .user-display { width: 100%; }
    .header-top-row #authArea .user-display > div:not(.user-avatar) { flex: 1; min-width: 0; }
    .header-top-row #authArea .user-display > div .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
    .header-top-row > button.btn-auth { flex: 1; justify-content: center; font-size: 11px; padding: 8px 6px; }

    /* Row 3: stats evenly spaced */
    .stats-row { justify-content: stretch; gap: 5px; }
    .stat-chip { flex: 1; justify-content: center; font-size: 11px; padding: 6px 4px; }
    .btn-auth { font-size: 11px; }
  }

/* ── Cookie Banner ── */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
  box-shadow: 0 4px 24px #00000060;
  width: calc(100vw - 40px);
  max-width: 560px;
}
.cookie-banner a { color: var(--accent); text-decoration: none; }
.cookie-banner a:hover { text-decoration: underline; }
.cookie-banner button {
  flex-shrink: 0;
  padding: 6px 14px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.cookie-banner button:hover { background: #00ffb3; }

@media (max-width: 600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    bottom: 12px;
    padding: 14px 16px;
    font-size: 12px;
  }
  .cookie-banner button {
    width: 100%;
    padding: 10px;
    font-size: 12px;
  }
}

/* ── SEO Section ── */
.seo-section {
  border-top: 1px solid var(--border);
  margin-top: 60px;
  padding: 48px 0 64px;
  color: var(--muted);
}
.seo-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
  font-size: 16px;
  line-height: 1.75;
}
.seo-inner h2 {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}
.seo-inner h3 {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 36px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.seo-inner p { margin: 0 0 14px; }
.seo-inner dl { margin: 0; }
.seo-inner dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-top: 20px;
}
.seo-inner dd { margin: 6px 0 0 0; }