From 1440c9daf51ef9e13542115b2e270547f5350b05 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 27 Apr 2026 00:22:39 +0700
Subject: [PATCH] =?UTF-8?q?style(master):=20circular=20tokens=20for=20"Th?=
 =?UTF-8?q?=E1=BB=A9=20t=E1=BB=B1=20=C4=91=C3=A3=20x=E1=BB=95"=20history?=
 =?UTF-8?q?=20list=20too?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same pink/green-by-value treatment as the tracking grid: rounded-full,
3px ring (pink ≤49, green ≥50), cream fill, dark rose number. Bumped
size to w-8/9 + text-sm/base so two digits fit cleanly inside the ring.
---
 src/routes/master/+page.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/routes/master/+page.svelte b/src/routes/master/+page.svelte
index 507ed3b..532fd78 100644
--- a/src/routes/master/+page.svelte
+++ b/src/routes/master/+page.svelte
@@ -191,8 +191,15 @@
         </div>
         <div class="flex flex-wrap gap-1.5">
           {#each state.called as num, i (i)}
+            {@const isLow = num <= 49}
             <span
-              class="inline-flex items-center justify-center w-7 h-7 text-xs font-bold rounded-md bg-orange-100 dark:bg-orange-950/40 text-orange-700 dark:text-orange-300"
+              class="inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9
+                     text-sm sm:text-base font-bold tabular-nums rounded-full
+                     border-[3px] bg-amber-50 dark:bg-amber-100
+                     text-rose-700 dark:text-rose-800
+                     {isLow
+                       ? 'border-pink-500 dark:border-pink-400'
+                       : 'border-emerald-500 dark:border-emerald-400'}"
             >
               {num}
             </span>