Update static/style.css (#11)

- Update static/style.css (3c1a4dcc0c77accf7ed5fa2c9786e6aef2709607)

static/style.css

@@ -1,41 +1,112 @@
-body {
-    font-family: 'Poppins', sans-serif;
-    background: linear-gradient(135deg, #8ec5ff, #d3b8ff, #ffb3d9);
-    color: #222;
-    margin: 0;
-    padding: 0;
+/* style.css — Feminine, ethereal UI for GenBuddy */
+
+:root{
+  --accent-1: #8ec5ff;   /* ice blue */
+  --accent-2: #d3b8ff;   /* soft lilac */
+  --accent-3: #ffb3d9;   /* pastel pink */
+  --bg-start: #f6f9ff;
+  --bg-end: #fff6fb;
+  --card-bg: rgba(255,255,255,0.70);
+  --glass-blur: 8px;
+  --radius-lg: 16px;
+  --shadow-soft: 0 10px 30px rgba(12,18,35,0.08);
+}
+
+html,body{
+  height:100%;
+  margin:0;
+  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+  background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  text-align:center;
+  margin: 6px 0 18px 0;
+  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
+  -webkit-background-clip:text;
+  background-clip:text;
+  color: transparent;
+  letter-spacing: 0.2px;
+}
+
+.app-accent {
+  position: fixed;
+  right: 30px;
+  top: 20px;
+  width: 220px;
+  height: 220px;
+  pointer-events: none;
+  background: radial-gradient(circle at 20% 20%, rgba(142,197,255,0.18), transparent 15%),
+              radial-gradient(circle at 80% 80%, rgba(211,184,255,0.14), transparent 15%);
+  filter: blur(28px);
+  border-radius: 50%;
+  z-index: 0;
 }
 
+/* container override for Gradio */
 .gradio-container {
-    backdrop-filter: blur(12px);
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 20px;
-    padding: 25px;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+  max-width: 1200px !important;
+  margin: 20px auto !important;
+  padding: 22px !important;
+  border-radius: var(--radius-lg);
+  background: var(--card-bg);
+  box-shadow: var(--shadow-soft);
+  border: 1px solid rgba(255,255,255,0.6);
+  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
 }
 
-h1, h2, h3, h4 {
-    color: #fff;
+/* Columns and rows */
+.gr-row { gap: 14px; }
+
+/* Input styles */
+input[type="text"], textarea, .gr-input input, .gr-input textarea {
+  border-radius: 12px !important;
+  padding: 10px !important;
+  border: 1px solid rgba(10,18,36,0.06) !important;
+  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.88)) !important;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
 }
 
+/* Buttons */
 button, .gr-button {
-    background: linear-gradient(45deg, #ffb3d9, #d3b8ff);
-    border: none;
-    color: #fff;
-    padding: 10px 20px;
-    border-radius: 12px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
+  border-radius: 12px !important;
+  padding: 10px 14px !important;
+  border: none !important;
+  font-weight: 700;
+  cursor: pointer;
+  color: #06203a;
+  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
+  box-shadow: 0 8px 30px rgba(142,197,255,0.10);
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+button:hover, .gr-button:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(142,197,255,0.12); }
+
+/* Status boxes & outputs */
+.gr-textbox, .gr-file {
+  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,255,0.96));
+  border-radius: 12px;
+  padding: 8px;
 }
 
-button:hover, .gr-button:hover {
-    transform: scale(1.05);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+/* Small meta text */
+.gr-label {
+  color: rgba(7,18,34,0.8);
+  font-weight: 600;
 }
 
-.gr-textbox textarea {
-    border-radius: 12px;
-    padding: 10px;
-    border: 1px solid #ccc;
+/* Template box */
+.gr-textbox textarea[readonly] {
+  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88));
 }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .gradio-container { padding: 14px; }
+}
+
+/* subtle accents */
+.gr-markdown h3 { color: #1b2b47; }