diff --git a/data/polls.json b/data/polls.json
new file mode 100644
index 0000000..733c05c
--- /dev/null
+++ b/data/polls.json
@@ -0,0 +1,136 @@
+[
+  {
+    "id": "bxhv2E7Sup",
+    "title": "Test Poll",
+    "options": [
+      {
+        "id": "7qEfuFtS",
+        "date": "2026-06-12"
+      },
+      {
+        "id": "NipHQHym",
+        "date": "2026-06-13"
+      },
+      {
+        "id": "p4t7ivLy",
+        "date": "2026-06-14"
+      },
+      {
+        "id": "iZq9y2f9",
+        "date": "2026-06-19"
+      },
+      {
+        "id": "SyS6txWp",
+        "date": "2026-06-20"
+      },
+      {
+        "id": "aFtuErHk",
+        "date": "2026-06-21"
+      },
+      {
+        "id": "yYuedUrD",
+        "date": "2026-06-26"
+      },
+      {
+        "id": "xHhZWaXW",
+        "date": "2026-06-27"
+      },
+      {
+        "id": "wdMYuTKY",
+        "date": "2026-06-28"
+      }
+    ],
+    "votes": [
+      {
+        "name": "Marci",
+        "optionIds": [
+          "NipHQHym",
+          "SyS6txWp",
+          "p4t7ivLy",
+          "wdMYuTKY",
+          "xHhZWaXW",
+          "iZq9y2f9"
+        ],
+        "createdAt": "2026-06-10T15:46:48.9985146Z"
+      },
+      {
+        "name": "Adam",
+        "optionIds": [
+          "NipHQHym",
+          "7qEfuFtS",
+          "p4t7ivLy"
+        ],
+        "createdAt": "2026-06-10T15:47:30.9612535Z"
+      },
+      {
+        "name": "Chris",
+        "optionIds": [
+          "aFtuErHk",
+          "SyS6txWp"
+        ],
+        "createdAt": "2026-06-10T15:47:42.7677151Z"
+      }
+    ],
+    "closed": true,
+    "createdAt": "2026-06-10T15:46:02.8944618Z",
+    "adminToken": "nEj9ikeJdvc8ZDjuhAmUT6jW"
+  },
+  {
+    "id": "YGq5ASnJcr",
+    "title": "AAA",
+    "options": [
+      {
+        "id": "SgWMUth4",
+        "date": "2026-06-19"
+      },
+      {
+        "id": "3LFp3U9D",
+        "date": "2026-06-20"
+      },
+      {
+        "id": "ffzxazpM",
+        "date": "2026-06-21"
+      },
+      {
+        "id": "yxijW7HD",
+        "date": "2026-06-26"
+      },
+      {
+        "id": "9smnAg9z",
+        "date": "2026-06-27"
+      },
+      {
+        "id": "aXpdwy4p",
+        "date": "2026-06-28"
+      },
+      {
+        "id": "gvP6QHSk",
+        "date": "2026-07-03"
+      },
+      {
+        "id": "kAib4sFx",
+        "date": "2026-07-04"
+      },
+      {
+        "id": "Aq7EqRj3",
+        "date": "2026-07-05"
+      },
+      {
+        "id": "WwHEqiU2",
+        "date": "2026-07-10"
+      },
+      {
+        "id": "cNxQwc8e",
+        "date": "2026-07-11"
+      },
+      {
+        "id": "Qd7J3zNL",
+        "date": "2026-07-12"
+      }
+    ],
+    "votes": [],
+    "closed": false,
+    "createdAt": "2026-06-10T15:49:08.9935137Z",
+    "adminToken": "DpsWtkBFHPW4MTykAYycvBFU"
+  }
+]
\ No newline at end of file
diff --git a/static/calendar.js b/static/calendar.js
index b8d3eec..f895017 100644
--- a/static/calendar.js
+++ b/static/calendar.js
@@ -11,7 +11,7 @@
 const RING_SVG =
   '<svg class="ring" viewBox="0 0 100 100" aria-hidden="true">' +
   '<path d="M50 9 C77 7 93 22 92 48 C91 76 74 92 48 91 C21 90 8 74 9 49 C10 24 27 11 53 10" ' +
-  'fill="none" stroke="#FFD43B" stroke-width="7.5" stroke-linecap="round" opacity="0.95"/></svg>';
+  'fill="none" stroke="currentColor" stroke-width="7.5" stroke-linecap="round" opacity="0.95"/></svg>';
 
 const DOW = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 
diff --git a/static/fonts/IosevkaEtoile.woff2 b/static/fonts/IosevkaEtoile.woff2
new file mode 100644
index 0000000..071db8f
Binary files /dev/null and b/static/fonts/IosevkaEtoile.woff2 differ
diff --git a/static/fonts/IosevkaSlab.woff2 b/static/fonts/IosevkaSlab.woff2
new file mode 100644
index 0000000..36f203b
Binary files /dev/null and b/static/fonts/IosevkaSlab.woff2 differ
diff --git a/static/index.html b/static/index.html
index 96e012c..33048a4 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>mediator — new poll</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&display=swap" rel="stylesheet">
+  <link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
@@ -35,7 +35,7 @@
       </div>
 
       <div class="card">
-        <strong style="font-size:14px;">Offered dates</strong>
+        <span class="panel-header">Offered dates</span>
         <div id="picked-list" class="picked-list">
           <p class="empty">Nothing circled yet — tap dates on the calendar above.</p>
         </div>
@@ -53,7 +53,7 @@
       <p class="sub">Send the share link to your friends. Keep the admin link to yourself — it's the only way to close or delete the poll.</p>
 
       <div class="card">
-        <strong style="font-size:14px;">Share with friends</strong>
+        <span class="panel-header">Share with friends</span>
         <div class="share-link">
           <input type="text" id="share-url" readonly>
           <button class="btn btn-ghost" data-copy="share-url">Copy</button>
@@ -61,7 +61,7 @@
       </div>
 
       <div class="card">
-        <strong style="font-size:14px;">Admin link (just for you)</strong>
+        <span class="panel-header">Admin link (just for you)</span>
         <div class="share-link">
           <input type="text" id="admin-url" readonly>
           <button class="btn btn-ghost" data-copy="admin-url">Copy</button>
diff --git a/static/poll.html b/static/poll.html
index bdc0e4f..601fd49 100644
--- a/static/poll.html
+++ b/static/poll.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>mediator — poll</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&display=swap" rel="stylesheet">
+  <link rel="preload" href="/static/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="/static/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
@@ -45,13 +45,13 @@
       </div>
 
       <div class="card">
-        <strong style="font-size:14px;">Answers so far <span class="hint" id="answer-count"></span></strong>
+        <span class="panel-header">Answers so far <span class="hint" id="answer-count"></span></span>
         <div id="results"></div>
       </div>
 
       <div class="card" id="admin-card" hidden>
-        <strong style="font-size:14px;">Organizer tools</strong>
-        <p class="note" style="margin:6px 0 12px;">Polls can't be edited after creation — only closed (stops new answers) or deleted for good.</p>
+        <span class="panel-header">Organizer tools</span>
+        <p class="note">Polls can't be edited after creation — only closed (stops new answers) or deleted for good.</p>
         <div class="actions">
           <button class="btn btn-ghost" id="close-btn">Close poll</button>
           <button class="btn btn-danger" id="delete-btn">Delete poll</button>
diff --git a/static/style.css b/static/style.css
index 018be32..6321a15 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,160 +1,253 @@
-:root {
-  --paper: #f4f5f1;
-  --card: #ffffff;
-  --ink: #222633;
-  --muted: #6a7080;
-  --line: #e2e4dd;
-  --marker: #ffd43b;
-  --marker-soft: #fff3c4;
-  --blue: #2f4bc7;
-  --blue-dark: #24389b;
-  --green: #15805b;
-  --green-soft: #e2f3ec;
-  --red: #b3362c;
-  --radius: 14px;
-  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
-  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+/* === Fonts === */
+@font-face {
+  font-family: "Iosevka Etoile";
+  src: url("/static/fonts/IosevkaEtoile.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "Iosevka Slab";
+  src: url("/static/fonts/IosevkaSlab.woff2") format("woff2");
+  font-display: swap;
 }
 
-* { box-sizing: border-box; }
+/* === Theme === */
+:root {
+  --bg: #2e2e2e;
+  --bg-panel: #434343;
+  --bg-panel-hover: #585858;
+  --text: #e6e6e6;
+  --text-muted: #cfcfcf;
+  --primary: #87458a;
+  --primary-hover: #d64d95;
+  --secondary: #c48401;
+  --link: #01b6c4;
+  --link-hover: #d6d24d;
+  --danger: #c40141;
+  --danger-hover: #d03467;
+
+  --border: 1px solid var(--secondary);
+  --border-dashed: 1px dashed var(--secondary);
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+
+  --font-xs: 0.75rem;
+  --font-sm: 0.85rem;
+
+  color-scheme: dark;
+}
+
+/* === Base === */
+* { box-sizing: border-box; margin: 0; padding: 0; }
 
 html, body { margin: 0; padding: 0; }
 
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font-family: var(--font-body);
-  font-size: 16px;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  font: 1rem "Iosevka Etoile", monospace;
   line-height: 1.5;
 }
 
+a { color: var(--link); text-decoration: none; }
+a:hover { color: var(--link-hover); }
+
 .wrap {
   max-width: 680px;
   margin: 0 auto;
-  padding: 28px 18px 80px;
+  padding: var(--space-4) var(--space-4) 5rem;
 }
 
+/* === Header === */
 header.site {
   display: flex;
   align-items: baseline;
-  gap: 10px;
-  margin-bottom: 26px;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
+  border-bottom: var(--border-dashed);
+  margin-bottom: var(--space-5);
 }
 
 .logo {
-  font-family: var(--font-display);
-  font-weight: 800;
-  font-size: 20px;
-  letter-spacing: -0.02em;
-  text-decoration: none;
-  color: var(--ink);
+  font-family: "Iosevka Slab", monospace;
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: var(--text);
 }
+.logo:hover { color: var(--primary-hover); }
 
 .logo .dot {
   display: inline-block;
-  width: 12px; height: 12px;
-  border-radius: 50%;
-  background: var(--marker);
-  border: 2px solid var(--ink);
-  margin-right: 7px;
-  transform: translateY(1px);
+  width: 0.7em;
+  height: 0.7em;
+  background: var(--primary);
+  border: 1px solid var(--secondary);
+  margin-right: 0.4em;
 }
 
-.tagline { color: var(--muted); font-size: 14px; }
+.tagline {
+  color: var(--text-muted);
+  font-size: var(--font-sm);
+}
 
+/* === Typography === */
 h1 {
-  font-family: var(--font-display);
-  font-weight: 800;
-  letter-spacing: -0.025em;
-  font-size: clamp(28px, 5vw, 38px);
-  line-height: 1.12;
-  margin: 0 0 8px;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.3;
+  border-bottom: var(--border-dashed);
+  padding-bottom: var(--space-1);
+  margin: 1.25rem 0 var(--space-2);
 }
 
-.sub { color: var(--muted); margin: 0 0 24px; max-width: 48ch; }
+.sub { color: var(--text-muted); margin: 0 0 var(--space-5); max-width: 60ch; }
 
+.hint { font-weight: normal; color: var(--text-muted); font-size: var(--font-sm); }
+
+.note { font-size: var(--font-sm); color: var(--text-muted); }
+
+/* === Panels (cards) === */
 .card {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 20px;
-  margin-bottom: 18px;
+  border: var(--border);
+  background: var(--bg);
+  padding: var(--space-4);
+  margin-bottom: var(--space-4);
 }
 
+.panel-header {
+  display: block;
+  font-size: var(--font-xs);
+  font-weight: normal;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  border-bottom: var(--border-dashed);
+  padding-bottom: var(--space-1);
+  margin-bottom: var(--space-3);
+}
+
+/* === Form controls === */
 label.field {
   display: block;
-  font-weight: 600;
-  font-size: 14px;
-  margin-bottom: 14px;
+  font-size: var(--font-sm);
+  margin-bottom: var(--space-4);
 }
 
-label.field span { display: block; margin-bottom: 5px; }
+label.field span { display: block; margin-bottom: var(--space-1); }
 
 input[type="text"], textarea, input[type="time"] {
   width: 100%;
+  background: var(--bg-panel);
+  border: var(--border);
+  color: var(--text);
   font: inherit;
-  color: var(--ink);
-  background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: 9px;
-  padding: 9px 12px;
+  padding: 0.3rem var(--space-2);
+  outline: none;
 }
 
-input:focus-visible, textarea:focus-visible, button:focus-visible, .day:focus-visible {
-  outline: 3px solid var(--blue);
-  outline-offset: 2px;
+input[type="text"]:focus, textarea:focus, input[type="time"]:focus {
+  border-color: var(--primary-hover);
 }
 
-textarea { resize: vertical; min-height: 64px; }
+.day:focus-visible {
+  outline: 1px dashed var(--primary-hover);
+  outline-offset: 1px;
+}
 
-.hint { font-weight: 400; color: var(--muted); }
+textarea { resize: vertical; min-height: 4rem; }
 
-/* ---------- Calendar ---------- */
+/* === Buttons ===
+   Reference style: text wrapped in amber brackets, no background. */
+.btn {
+  background: none;
+  border: none;
+  color: var(--text);
+  font: inherit;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: none;
+  display: inline-block;
+  white-space: nowrap;
+}
+.btn::before { content: "["; color: var(--secondary); }
+.btn::after { content: "]"; color: var(--secondary); }
+.btn:hover { color: var(--primary-hover); }
 
+.btn-primary { color: var(--link); }
+.btn-primary:hover { color: var(--link-hover); }
+.btn-primary:disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+.btn-danger { color: var(--danger); }
+.btn-danger:hover { color: var(--danger-hover); }
+.btn-danger:disabled { color: var(--text-muted); cursor: not-allowed; }
+
+.btn:disabled { color: var(--text-muted); cursor: not-allowed; }
+
+.actions {
+  display: flex;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  align-items: center;
+  margin: var(--space-4) 0;
+}
+
+.error { color: var(--danger-hover); font-size: var(--font-sm); margin-top: var(--space-2); min-height: 1.2em; }
+.ok { color: var(--link); font-size: var(--font-sm); margin-top: var(--space-2); }
+
+/* === Calendar === */
 .cal { user-select: none; }
 
 .cal-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 10px;
+  border-bottom: var(--border-dashed);
+  padding-bottom: var(--space-1);
+  margin-bottom: var(--space-2);
 }
 
 .cal-title {
-  font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: -0.01em;
+  font-size: var(--font-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
 }
 
-.cal-nav { display: flex; gap: 6px; }
+.cal-nav { display: flex; gap: var(--space-2); }
 
 .cal-nav button {
-  width: 36px; height: 36px;
-  border-radius: 9px;
-  border: 1px solid var(--line);
-  background: var(--card);
-  font-size: 16px;
+  background: none;
+  border: none;
+  color: var(--text);
+  font: inherit;
   cursor: pointer;
-  color: var(--ink);
+  padding: 0 var(--space-1);
 }
-
-.cal-nav button:hover { border-color: var(--ink); }
+.cal-nav button::before { content: "["; color: var(--secondary); }
+.cal-nav button::after { content: "]"; color: var(--secondary); }
+.cal-nav button:hover { color: var(--primary-hover); }
 
 .cal-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  gap: 4px;
+  gap: 2px;
 }
 
 .dow {
   text-align: center;
-  font-size: 11px;
-  font-weight: 700;
+  font-size: var(--font-xs);
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  color: var(--muted);
-  padding: 6px 0 8px;
+  color: var(--text-muted);
+  padding: var(--space-1) 0 var(--space-2);
 }
 
 .day {
@@ -162,11 +255,10 @@ textarea { resize: vertical; min-height: 64px; }
   aspect-ratio: 1 / 1.05;
   border: none;
   background: transparent;
-  border-radius: 10px;
   font: inherit;
   font-variant-numeric: tabular-nums;
-  font-size: 15px;
-  color: var(--ink);
+  font-size: 0.95rem;
+  color: var(--text);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -177,21 +269,22 @@ textarea { resize: vertical; min-height: 64px; }
 .day.blank { visibility: hidden; }
 
 .day.clickable { cursor: pointer; }
-.day.clickable:hover { background: var(--paper); }
+.day.clickable:hover { background: var(--bg-panel-hover); }
 
-.day.past { color: #b9bdc6; }
+.day.past { color: #777; }
 
 .day.today .num { text-decoration: underline; text-underline-offset: 3px; }
 
-/* Offered (poll page): soft marker swipe behind the number */
-.day.offered { background: var(--marker-soft); }
-.day.offered:hover { background: #ffeaa3; }
+/* Offered (poll page): amber wash behind the number */
+.day.offered { background: var(--bg-panel); box-shadow: inset 0 0 0 1px var(--secondary); }
+.day.offered:hover { background: var(--bg-panel-hover); }
 
 /* The signature: a hand-drawn highlighter circle around picked dates */
 .day .ring {
   position: absolute;
   inset: 4%;
   pointer-events: none;
+  color: var(--primary-hover);
   opacity: 0;
   transform: scale(0.7) rotate(-8deg);
   transition: opacity 0.12s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -207,146 +300,126 @@ textarea { resize: vertical; min-height: 64px; }
 
 .day .badge {
   position: absolute;
-  bottom: 4px;
+  bottom: 3px;
   left: 50%;
   transform: translateX(-50%);
-  font-size: 10px;
-  font-weight: 700;
+  font-size: 0.6rem;
   line-height: 1;
-  color: var(--green);
+  color: var(--link);
 }
 
 .day .timechip {
   position: absolute;
-  top: 3px;
-  right: 4px;
-  font-size: 9px;
-  font-weight: 700;
-  color: var(--blue);
+  top: 2px;
+  right: 3px;
+  font-size: 0.55rem;
+  line-height: 1;
+  color: var(--secondary);
 }
 
-/* ---------- Picked dates list (create page) ---------- */
-
-.picked-list { margin-top: 4px; }
+/* === Picked dates list (create page) === */
+.picked-list { margin-top: var(--space-1); }
 
 .picked-row {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 9px 0;
-  border-top: 1px dashed var(--line);
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  border-top: var(--border-dashed);
 }
+.picked-row:first-child { border-top: none; }
 
-.picked-row .d { flex: 1; font-weight: 600; font-size: 14px; }
+.picked-row .d { flex: 1; font-size: var(--font-sm); }
 
-.picked-row input[type="time"] { width: 110px; padding: 6px 8px; }
+.picked-row input[type="time"] { width: 7rem; padding: 0.15rem var(--space-2); font-size: var(--font-sm); }
 
 .picked-row .rm {
-  border: none;
   background: none;
-  color: var(--red);
-  font-size: 13px;
+  border: none;
+  color: var(--danger);
+  font: inherit;
+  font-size: var(--font-xs);
+  text-transform: uppercase;
   cursor: pointer;
-  padding: 4px;
+  padding: 0;
 }
+.picked-row .rm::before { content: "["; color: var(--secondary); }
+.picked-row .rm::after { content: "]"; color: var(--secondary); }
+.picked-row .rm:hover { color: var(--danger-hover); }
 
 .empty {
-  color: var(--muted);
-  font-size: 14px;
+  color: var(--text-muted);
+  font-size: var(--font-sm);
   text-align: center;
-  padding: 14px 0 6px;
+  padding: var(--space-3) 0 var(--space-1);
 }
 
-/* ---------- Buttons ---------- */
-
-.btn {
-  display: inline-block;
-  font: inherit;
-  font-weight: 700;
-  border-radius: 11px;
-  padding: 12px 22px;
-  cursor: pointer;
-  border: 1px solid transparent;
-}
-
-.btn-primary { background: var(--blue); color: #fff; }
-.btn-primary:hover { background: var(--blue-dark); }
-.btn-primary:disabled { background: #aab3d6; cursor: not-allowed; }
-
-.btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
-.btn-ghost:hover { border-color: var(--ink); }
-
-.btn-danger { background: var(--card); border-color: var(--red); color: var(--red); }
-.btn-danger:hover { background: #fbeae8; }
-
-.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-
-.error { color: var(--red); font-size: 14px; margin-top: 10px; min-height: 1.2em; }
-.ok { color: var(--green); font-size: 14px; margin-top: 10px; }
-
-/* ---------- Share box ---------- */
-
+/* === Share box === */
 .share-link {
   display: flex;
-  gap: 8px;
-  margin: 8px 0 4px;
+  gap: var(--space-2);
+  align-items: center;
+  margin: var(--space-2) 0 var(--space-1);
 }
 
 .share-link input {
   flex: 1;
-  font-size: 14px;
-  background: var(--paper);
+  font-family: "Iosevka Slab", monospace;
+  font-size: var(--font-sm);
 }
 
-.note { font-size: 13px; color: var(--muted); }
-
-/* ---------- Results ---------- */
-
+/* === Results === */
 .result-row {
   display: flex;
   align-items: baseline;
-  gap: 12px;
-  padding: 11px 0;
-  border-top: 1px dashed var(--line);
+  gap: var(--space-3);
+  padding: var(--space-2) 0;
+  border-top: var(--border-dashed);
 }
+.result-row:first-of-type { border-top: none; }
 
-.result-row .when { width: 165px; flex-shrink: 0; font-weight: 600; font-size: 14px; }
-.result-row .when .t { color: var(--blue); margin-left: 6px; }
+.result-row .when { width: 12rem; flex-shrink: 0; font-size: var(--font-sm); }
+.result-row .when .t { color: var(--secondary); margin-left: var(--space-2); }
 
-.result-row .who { flex: 1; font-size: 14px; color: var(--muted); }
+.result-row .who { flex: 1; font-size: var(--font-sm); color: var(--text-muted); }
 
 .result-row .count {
-  font-family: var(--font-display);
-  font-weight: 800;
-  font-size: 17px;
+  font-size: 1.05rem;
   font-variant-numeric: tabular-nums;
 }
 
-.result-row.best .when, .result-row.best .count { color: var(--green); }
+.result-row.best .when, .result-row.best .count { color: var(--link); }
+.result-row.best:hover .when, .result-row.best:hover .count { color: var(--link); }
 
 .best-tag {
   display: inline-block;
-  background: var(--green-soft);
-  color: var(--green);
-  font-size: 11px;
-  font-weight: 700;
-  border-radius: 99px;
-  padding: 2px 9px;
-  margin-left: 6px;
+  border: var(--border-dashed);
+  color: var(--link);
+  font-size: var(--font-xs);
+  padding: 0 var(--space-1);
+  margin-left: var(--space-2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .closed-banner {
-  background: var(--ink);
-  color: var(--paper);
-  border-radius: var(--radius);
-  padding: 13px 18px;
-  font-weight: 600;
-  font-size: 14px;
-  margin-bottom: 18px;
+  background: var(--bg-panel);
+  color: var(--secondary);
+  border: var(--border);
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: var(--space-4) 0;
 }
 
+/* === Scrollbars === */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #111; }
+::-webkit-scrollbar-thumb { background: var(--primary); }
+::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
+
+/* === Responsive === */
 @media (max-width: 480px) {
   .result-row { flex-wrap: wrap; }
   .result-row .when { width: auto; }