From 8a1e79e46605291234314bd1a02dcab7a8c9bdc1 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Mon, 21 Sep 2026 16:06:48 +0800
Subject: feat(ui): replace id form with clickable model library cards

---
 public/styles.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

(limited to 'public/styles.css')

diff --git a/public/styles.css b/public/styles.css
index a925e58..d6cfbb1 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -229,6 +229,61 @@ button:focus-visible {
   display: none !important;
 }
 
+.model-library {
+  display: grid;
+  gap: 9px;
+  margin: 0 0 22px;
+  padding: 14px 0 20px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+
+.library-title {
+  color: var(--muted);
+  font-family: "Fira Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.model-card {
+  display: grid;
+  gap: 5px;
+  padding: 11px 13px;
+  border: 1px solid var(--line-bright);
+  border-radius: 0;
+  background: var(--panel-raised);
+  color: var(--ivory);
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.model-card:hover {
+  border-color: var(--gold-soft);
+  background: rgba(200, 168, 92, 0.08);
+}
+
+.model-card:focus-visible {
+  outline: 2px solid var(--gold-soft);
+  outline-offset: 2px;
+}
+
+.model-card.is-active {
+  border-color: var(--gold-soft);
+  background: rgba(200, 168, 92, 0.1);
+}
+
+.model-name {
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.model-desc {
+  color: var(--muted);
+  font-size: 0.68rem;
+}
+
 .run-controls {
   display: grid;
   gap: 14px;
-- 
cgit v1.2.3