:root{
  --bg:#f7f9fc; --card:#ffffff; --ink:#222; --line:#e5e7eb; --thead:#f1f3f6; --brand:#0d6efd;
}

html,body{height:100%}
body{
  font-family:"Tahoma", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; background:var(--bg); color:var(--ink);
}

.theme-btn{
  position:fixed; inset-inline-start:14px; inset-block-start:14px; z-index:20;
}

.container{max-width:1000px; margin:28px auto 24px; padding:0 14px;}
h1{text-align:center; font-size:24px; color:#2c3e50; margin:6px 0 8px;}
.credit{text-align:center; font-size:14px; color:#666; margin-bottom:14px;}
.count{font-weight:700; text-align:center; margin:8px 0 12px;}

.tools{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; margin:6px 0 10px;}
.search-wrap{position:relative; flex:1; min-width:240px; max-width:560px;}
#searchBox{
  width:100%; padding:12px 40px 12px 12px;
  border:1px solid var(--line); border-radius:10px; font-size:16px; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
#searchBox:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(13,110,253,.12);}
.clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:none; border-radius:6px; background:transparent; cursor:pointer; color:#888; font-size:16px;
}
.btn{padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:14px;}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 10px 22px rgba(13,110,253,0.06), 0 3px 8px rgba(0,0,0,0.05);
  padding:12px;
}
.table-wrap{overflow-x:auto;}
table{
  width:100%; min-width:540px; border-collapse:collapse; background:var(--card);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

thead th{
  position:sticky; top:0; z-index:1;
  background:var(--thead); color:#333; font-weight:700; text-align:center;
  padding:14px 10px; border-bottom:2px solid var(--line);
}


td{
  padding:14px 10px; 
  text-align:center; vertical-align:middle; border-bottom:1px solid var(--line);
}
tbody tr:nth-child(even) td{background:rgba(0,0,0,.02);}
tbody tr:hover td{background:#eaf2fd; transition:background .2s;}
th.thin, td.thin{width:36px;}

.color-bar{display:inline-block; width:12px; height:12px; border-radius:3px; margin-left:6px; vertical-align:middle;}

mark.hl{background:#fff59d; padding:0 2px; border-radius:2px;}

.pagination{margin:16px 2px 2px; text-align:center;}
.pagination .page-btn{
  background:var(--brand); color:#fff; border:none;
  margin:0 5px; padding:12px 18px; font-size:16px; 
  border-radius:10px; cursor:pointer; transition:background .2s, transform .05s;
}
.pagination .page-btn:hover{background:#0b5ed7;}
.pagination .page-btn:active{transform:scale(.98);}
.pagination .page-btn:disabled{background:#c7cfdb; cursor:not-allowed;}
.pagination .page-btn.ghost{background:#fff; color:#333; border:1px solid var(--line);}
.pagination .dots{margin:0 6px; color:#888;}


.skeleton .sk-row{
  height:16px; margin:10px auto; max-width:680px; border-radius:8px;
  background:linear-gradient(90deg, #eef2f6, #f7f9fc, #eef2f6);
  background-size:200% 100%; animation:sk 1.2s infinite linear;
}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.no-results{
  text-align:center; font-size:18px; color:#888; padding:26px 8px;
}

.footer{text-align:center; color:#888; font-size:13px; margin:24px 0 30px;}

.dark{
  --bg:#0e1116; --card:#151a22; --ink:#e9eef6; --line:#273142; --thead:#1b2330; --brand:#6ea8fe;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:768px){
  th,td{font-size:14px; padding:12px 8px;}
  h1{font-size:20px;}
  .theme-btn{inset-inline-start:10px; inset-block-start:10px;}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  table {
    min-width: 100%;
    table-layout: auto;
  }
  th, td {
    font-size: 14px;
    padding: 10px 6px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  th, td {
    font-size: 12px;
    padding: 8px 4px;
  }
}

table thead th:nth-child(1),
table tbody td:nth-child(1){
  white-space: nowrap;     
  word-break: keep-all;   
  direction: ltr;         
  text-align: center;
}

@media (max-width: 768px){

  table{ table-layout: fixed; }

  thead th:nth-child(1), tbody td:nth-child(1){ width: 84px; }  
  thead th:nth-child(2), tbody td:nth-child(2){ width: auto; }

  th, td{ font-size: 14px; padding: 12px 8px; }
}

@media (max-width: 480px){
  thead th:nth-child(1), tbody td:nth-child(1){ width: 72px; }
  th, td{ font-size: 13px; padding: 10px 6px; }
}

table thead th:nth-child(2),
table tbody td:nth-child(2){
  white-space: normal;
  word-break: break-word;
}

.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}