:root { color-scheme: light dark; font: 15px/1.45 system-ui, sans-serif; --bg: var(--tg-theme-bg-color,#f4f6f8); --card: var(--tg-theme-secondary-bg-color,#fff); --text: var(--tg-theme-text-color,#16202a); --muted: var(--tg-theme-hint-color,#71808f); --accent: var(--tg-theme-button-color,#2aabee); }
* { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); } main { max-width: 980px; margin: auto; padding: 28px 18px calc(32px + env(safe-area-inset-bottom)); } header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:24px; } h1 { margin:0; font-size:clamp(25px,6vw,38px); letter-spacing:-.04em; } p { margin:6px 0 0; color:var(--muted); } .eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.14em; } button { border:0; border-radius:12px; background:var(--accent); color:#fff; font:inherit; font-weight:650; padding:11px 15px; cursor:pointer; } button.quiet { background:transparent; color:var(--accent); padding:8px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; } .card { background:var(--card); border-radius:16px; padding:18px; cursor:pointer; box-shadow:0 1px 2px #0002; } .card:hover { outline:2px solid color-mix(in srgb,var(--accent),transparent 65%); } .card strong { display:block; font-size:17px; } .pill { color:var(--muted); font-size:12px; margin-top:7px; } .toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .table-wrap { overflow:auto; border-radius:14px; background:var(--card); box-shadow:0 1px 2px #0002; } table { border-collapse:collapse; min-width:100%; white-space:nowrap; } th,td { padding:12px 14px; text-align:left; border-bottom:1px solid color-mix(in srgb,var(--muted),transparent 80%); } th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .loading,.empty,.error { padding:22px; background:var(--card); border-radius:16px; color:var(--muted); } .error { color:#d94b54; }