:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #555555;
  --table-bg: #ffffff;
  --header-bg: #fafafa;
  --row-alt-bg: #fbfbfb;
  --border: #e6e6e6;
  --code-bg: #f3f4f6;
  --tick: #1f8a3d;
  --cross: #b00020;
  --input-bg: #ffffff;
  --input-border: #dcdcdc;
  --link: inherit;
}
.dark {
  /* exact dark variables from SPA */
  --bg: #1f2225;
  --text: #e6eef6;
  --muted: #9aa9b3;
  --table-bg: #161819;
  --header-bg: #1a1c1e;
  --row-alt-bg: #121416;
  --border: #2a2d30;
  --code-bg: #14171a;
  --tick: #6fe08a;
  --cross: #ff8b8b;
  --input-bg: #161819;
  --input-border: #2a2d30;
  --link: inherit;
}
/* Basic page scaffolding to match SPA look */
html,body{background:var(--bg);color:var(--text);}
.container{max-width:1200px;margin:2rem auto;padding:0 1rem}
body{font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;margin:0}
.page-inner{max-width:1200px;margin:2rem auto;padding:0 1rem}
.site-header h1{margin:0 0 0.5rem}
.subtitle{color:var(--muted)}
a{color:var(--link)}
table{background:var(--table-bg);width:100%}
th,td{border:1px solid var(--border)}
main{display:block;width:100%}
section{margin:1rem 0}
ul{margin:0.5rem 0 1rem 1.25rem}
.privacy-panel{background:var(--table-bg);border:1px solid var(--border)}
/* Floating theme toggle (the button inserted by the JS uses these vars) */
.dark-toggle{position:fixed;right:12px;top:12px;z-index:9999;padding:0.4rem 0.6rem;border-radius:8px;border:1px solid var(--border);background:var(--header-bg);color:var(--text);cursor:pointer}

/* Additional SPA-like styles copied from src/styles.css to match homepage */
:root{--row-alt-bg: #fbfbfb}
.dark{--row-alt-bg: #121416}

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

.theme-toggle{background:transparent;border:1px solid var(--input-border);color:var(--text);padding:0.35rem 0.6rem;border-radius:6px;cursor:pointer;font-size:0.9rem}
.theme-toggle:focus{outline:2px solid rgba(0,0,0,0.12)}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-header h1{margin:0}
.header-actions{display:flex;align-items:center;gap:0.5rem}
.donate-btn{display:inline-block;background:linear-gradient(180deg,#ffefc6,#ffd27a);color:#111;padding:0.4rem 0.7rem;border-radius:8px;border:1px solid rgba(0,0,0,0.08);text-decoration:none;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,0.6) inset}
.donate-btn:hover{filter:brightness(0.98)}
.dark .donate-btn{background:linear-gradient(180deg,#6b5638,#4f3f2b);color:var(--text);border-color:rgba(255,255,255,0.06);box-shadow:none}

/* Table styling similar to SPA */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:6px}
table{width:100%;border-collapse:collapse;min-width:700px}
th,td{padding:0.5rem 0.75rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
thead th{position:sticky;top:0;background:var(--header-bg);z-index:2;font-weight:600}
tr:nth-child(even) td{background:var(--row-alt-bg)}
code{background:var(--code-bg);padding:0.1rem 0.35rem;border-radius:4px}
.tick{color:var(--tick);font-weight:700}
.cross{color:var(--cross);font-weight:700}

.controls{display:flex;gap:1rem;align-items:center;margin:1rem 0}
.controls input[type="search"]{flex:1;padding:0.5rem 0.75rem;border:1px solid var(--input-border);border-radius:6px;background:var(--input-bg);color:var(--text)}
.count{color:var(--muted);font-size:0.95rem}
.th.sortable{cursor:pointer;user-select:none}

.clickable-row{cursor:pointer}
.row-link{color:var(--link);text-decoration:none;display:block}

/* Responsive: transform table into vertical cards on small screens */
@media (max-width:768px){
  .controls{flex-direction:column;align-items:stretch}
  table{min-width:100%;border:0}
  thead{display:none}
  tbody tr{display:block;margin:0 0 12px 0;border:1px solid var(--border);border-radius:8px;padding:0.5rem;background:var(--table-bg)}
  tbody td{display:flex;justify-content:space-between;padding:0.5rem 0;border:none}
  tbody td + td{border-top:1px solid rgba(0,0,0,0.04)}
  tbody td:before{content:attr(data-label);font-weight:600;color:var(--text);margin-right:0.5rem;flex:0 0 55%}
  tbody td span{flex:1;text-align:right;color:var(--text)}
  .table-wrap{border:none}
}

/* Footer & privacy panel */
.site-footer{max-width:1200px;margin:2rem auto;padding:1rem;padding-top:0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--muted)}
.privacy-link{color:var(--link);text-decoration:underline;cursor:pointer}
.privacy-panel{margin-top:0.75rem;padding:1rem;border:1px solid var(--border);border-radius:8px;background:var(--table-bg);color:var(--text)}
.privacy-panel h3{margin-top:0}