:root{
  --bg:#0b1020; --panel:#111731; --panel-2:#0d1330; --text:#e9eefc; --muted:#a6b0cf;
  --accent:#5b8dff; --accent-2:#7ad0ff; --danger:#ff6b6b; --ok:#12d375; --warn:#ffb84d;
  --border:#1c2449; --chip:#1a2145; --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px; --radius-2:10px; --ring:0 0 0 3px rgba(91,141,255,.25);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f7fb; --panel:#fff; --panel-2:#f8f9ff; --text:#0d1428; --muted:#5b6475; --border:#e2e7ff; --chip:#eef2ff; --shadow:0 10px 24px rgba(2,6,23,.06); }
}
*{box-sizing:border-box} html,body{margin:0;height:100%} body{font-family:var(--font); background:linear-gradient(180deg,var(--bg),#060a18 50%,var(--bg)); color:var(--text)}
a{color:inherit; text-decoration:none} .container{max-width:1200px;margin:auto;padding:24px}

/* Top nav */
.topnav-wrap{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px)}
.topnav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 90%, transparent), color-mix(in oklab, var(--panel-2) 86%, transparent)); border-bottom:1px solid var(--border); box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{ width:36px; height:36px; border-radius:10px; display:block; box-shadow: var(--shadow); object-fit:contain }
.site-title{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:10px;flex-wrap:wrap} .menu a{padding:8px 12px;border-radius:10px;border:1px solid transparent} .menu a:hover{background:color-mix(in oklab, var(--panel), #fff 4%)} .menu a.active{border-color:var(--border)}
.menu-toggle{display:none; background:transparent; color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px}
@media (max-width: 640px){
  .topnav{align-items:flex-start}
  .menu-toggle{display:block}
  .menu{display:none; flex-direction:column; width:100%; padding-top:8px}
  .menu.open{display:flex}
  .menu a{padding:10px 12px}
}

/* Header & buttons */
.hdr{display:flex;gap:16px;align-items:center;justify-content:space-between;margin:16px 0}
.hdr-actions{display:flex;gap:10px;align-items:center}
.btn{background:var(--accent);color:#fff;padding:10px 14px;border:none;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)} .btn.small{padding:8px 10px;border-radius:8px;font-size:13px}
.muted{color:var(--muted)}

/* Filters */
.filters{position:sticky; top:72px; z-index:20; backdrop-filter: blur(6px); background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 86%, transparent), color-mix(in oklab, var(--panel-2) 86%, transparent)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px}
.filters-grid{display:grid;grid-template-columns: repeat(12,1fr);gap:10px;align-items:end}
.f{display:flex;flex-direction:column;gap:6px} .f label{font-size:12px;color:var(--muted)}
.input, select{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;outline:none}
.checkbox{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .chips{display:flex;gap:6px;flex-wrap:wrap} .chip{font-size:12px;padding:6px 10px;background:var(--chip);border:1px solid var(--border);color:var(--text);border-radius:999px}

/* Table */
.panel{margin-top:16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.meta{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;background:linear-gradient(180deg,var(--panel), color-mix(in oklab, var(--panel), #000 10%));text-align:left;font-size:12px;color:var(--muted);font-weight:700;border-bottom:1px solid var(--border);padding:12px}
tbody td{padding:14px 12px;border-bottom:1px solid var(--border)} tbody tr:hover{background:color-mix(in oklab, var(--panel), #fff 4%)}
.country{display:flex;align-items:center;gap:10px}.flag{font-size:20px}.host{font-weight:600}.proto{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:4px 8px;background:var(--chip);border:1px solid var(--border);border-radius:999px}
.pill{font-size:11px;padding:4px 8px;border-radius:999px;font-weight:700}.pill.ok{background:color-mix(in oklab, var(--ok), #fff 0%);color:#052b1a}.pill.warn{background:color-mix(in oklab, var(--warn), #fff 0%);color:#3b2a06}.pill.danger{background:color-mix(in oklab, var(--danger), #fff 0%);color:#3b0b0b}
.th-sort{cursor:pointer;user-select:none}.th-sort .arrow{opacity:.55;margin-left:6px}.th-sort[aria-sort="ascending"] .arrow{transform:rotate(180deg)}
.empty{padding:24px;text-align:center;color:var(--muted)}

/* Pager */
.pager{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid var(--border);background:linear-gradient(180deg,var(--panel), color-mix(in oklab, var(--panel), #000 6%));border-radius:0 0 var(--radius) var(--radius)}

/* Article */
.article{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.article h1{margin:.2em 0} .article p{color:var(--muted);line-height:1.6}

/* Cards on phones */
.cards{display:none}
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:12px}
.card .row1{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card .country{display:flex; align-items:center; gap:8px}
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.kv{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
.kv .pill{display:inline-block}

/* Responsive */
@media (max-width: 860px){ .filters-grid{grid-template-columns: repeat(6,1fr)} .hide-sm{display:none} }
@media (max-width: 560px){
  .table-wrap{display:none}
  .cards{display:grid; gap:10px}
  thead th{position:static}
  .filters{position:static}
  .filters-grid{grid-template-columns: 1fr }
  .logo-img{width:32px;height:32px}
}

/* ===== Mobile sticky filter dock & sheet ===== */
.filter-dock{display:none}
.sheet-backdrop{display:none}
.filter-sheet{display:none}

@media (max-width: 560px){
  body{padding-bottom: calc(64px + env(safe-area-inset-bottom))}
  .filter-dock{
    position: fixed; left:0; right:0; bottom:0; z-index: 60;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background: linear-gradient(180deg, var(--panel), color-mix(in oklab, var(--panel), #000 6%));
    border-top:1px solid var(--border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .dock-btn{
    display:inline-flex; align-items:center; gap:8px;
    background: var(--accent); color: #fff; border:none; border-radius: 999px;
    padding: 10px 14px; font-weight:700; box-shadow:var(--shadow);
  }
  .dock-btn .dot{
    display:inline-block; width:8px; height:8px; border-radius:999px; background:#fff; opacity:.9;
  }
  .sheet-backdrop{
    position: fixed; inset:0; z-index: 70; background: rgba(0,0,0,.4);
  }
  .filter-sheet{
    position: fixed; left:0; right:0; bottom:0; z-index: 80;
    display:block;
  }
  .sheet{
    background: var(--panel); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0;
    box-shadow: 0 -30px 40px rgba(0,0,0,.35);
    transform: translateY(100%); transition: transform .25s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet.open{ transform: translateY(0) }
  .sheet-head{display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom:1px solid var(--border)}
  .sheet-body{ padding: 12px 16px }
  .sheet-body .filters{ position: static; background: transparent; border: none; box-shadow: none; padding:0 }
  .sheet-body .filters-grid{ grid-template-columns: 1fr }
  .filters.is-in-sheet{ display:block }
  .sheet-backdrop[hidden]{ display:none }
  .filter-sheet[hidden]{ display:none }
}

/* === Fix: keep 'Options' tags stable in a single row with horizontal scroll on overflow === */
td.options { white-space: nowrap; }
td.options .chips {
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap;
  max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
td.options .chips::-webkit-scrollbar { height: 6px; }
td.options .chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
td.options .tag { white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none; }