feat: re-design

src/assets/main.css

@@ -29,13 +29,14 @@
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-soft) 100%);
-  color: #ffffff;
+  background-color: var(--c-accent);
+  color: var(--c-bg);
+  font-weight: 600;
   box-shadow: var(--shadow-sm);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: linear-gradient(135deg, var(--c-accent-strong) 0%, var(--c-accent) 100%);
+  background-color: var(--c-accent-strong);
 }
 
 .btn-secondary {
@@ -52,7 +53,7 @@
 .btn-danger {
   background-color: transparent;
   color: var(--c-danger);
-  border-color: rgba(248, 113, 113, 0.35);
+  border-color: rgba(193, 97, 74, 0.4);
 }
 
 .btn-danger:hover:not(:disabled) {
@@ -113,10 +114,41 @@
 
 .banner-error {
   background-color: var(--c-danger-bg);
-  border: 1px solid rgba(248, 113, 113, 0.4);
+  border: 1px solid rgba(193, 97, 74, 0.4);
   color: var(--c-danger);
 }
 
+.banner-success {
+  background-color: var(--c-success-bg);
+  border: 1px solid rgba(127, 174, 120, 0.4);
+  color: var(--c-success);
+}
+
+.mono-num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Rubber-stamp badge: the app's signature mark, used for sync status. */
+.stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.15rem 0.55rem;
+  border: 1.5px solid currentColor;
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px var(--c-bg) inset;
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+  transform: rotate(-3deg);
+  font-family: var(--font-stamp);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
 .page {
   min-height: 100vh;
   padding: 1rem 1rem calc(var(--nav-height) + var(--safe-bottom) + 1.5rem);