diff --git a/assets/css/main.css b/assets/css/main.css
index e3b6812..cab64db 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -184,6 +184,18 @@ mark.hl { background: color-mix(in oklab, var(--roux) 22%, transparent); color:
 @keyframes roux-fade-out { from { opacity: 1; } to   { opacity: 0; } }
 @keyframes roux-fade-in  { from { opacity: 0; } to   { opacity: 1; } }
 
+/* ── search cancel button ── */
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 13px; height: 13px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%235b4f44' opacity='.45'/%3E%3Cpath stroke='%23f1ebe0' stroke-width='2.2' stroke-linecap='round' d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  opacity: 1;
+}
+
 /* ── scrollbar ── */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 0; }