Update static/style.css

static/style.css

@@ -1,81 +1,58 @@
-/* ========== Variables & Reset ========== */
-:root {
-  --bg: #0d1117;
-  --bg-secondary: #161b22;
-  --border: #30363d;
-  --text: #c9d1d9;
-  --text-muted: #8b949e;
-  --accent: #58a6ff;
-  --accent-hover: #79c0ff;
-  --danger: #f85149;
-  --success: #56d364;
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-  --radius: 0.5rem;
-  --transition: 0.2s ease;
-}
+/* ----------------------------------------------------------
+   AnyCoder AI — unified dark‑mode design system
+   ---------------------------------------------------------- */
 
+:root {
+  --bg:            #0d1117;
+  --bg-secondary:  #161b22;
+  --border:        #30363d;
+  --text:          #c9d1d9;
+  --text-muted:    #8b949e;
+  --accent:        #58a6ff;
+  --accent-hover:  #79c0ff;
+  --danger:        #f85149;
+  --success:       #56d364;
+  --radius:        8px;
+  --transition:    0.2s ease;
+  --font-mono:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+/* ============= 1. Global reset & typography ============= */
 *,
 *::before,
-*::after {
-  box-sizing: border-box;
+*::after { box-sizing: border-box; }
+
+html, body {
   margin: 0;
   padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--bg);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  background: var(--bg);
   color: var(--text);
   line-height: 1.6;
-  min-height: 100vh;
-  padding: 1rem;
+  -webkit-font-smoothing: antialiased;
 }
 
-/* ========== Layout ========== */
-header {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-header h1 {
-  font-size: 2.5rem;
-  margin-bottom: 0.25rem;
-}
-header p {
-  color: var(--text-muted);
-  font-size: 1.1rem;
-}
+h1, h2 { font-weight: 600; }
 
+/* ============= 2. Layout blocks ============= */
 main {
   max-width: 900px;
   margin: 0 auto;
   display: grid;
   gap: 2rem;
+  padding: 1rem;
 }
 
 section {
-  background-color: var(--bg-secondary);
+  background: var(--bg-secondary);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.5rem;
 }
 
-h2 {
-  font-size: 1.25rem;
-  margin-bottom: 1rem;
-}
-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
-}
+/* ============= 3. Forms & controls ============= */
+label { font-weight: 600; }
 
-/* ========== Form Elements ========== */
 select,
 input[type="file"],
 input[type="url"],
@@ -92,85 +69,58 @@ textarea {
 
 select:focus,
 input:focus,
-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-}
+textarea:focus { outline: none; border-color: var(--accent); }
 
 textarea {
-  font-family: var(--font-mono);
   resize: vertical;
   min-height: 120px;
+  font-family: var(--font-mono);
 }
 
-/* ========== Tabs ========== */
-.tabs {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  overflow-x: auto;
-}
+/* ============= 4. Tabs ============= */
+.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+
 .tabs button {
-  flex: none;
   background: transparent;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 0.5rem 1rem;
   color: var(--text-muted);
   cursor: pointer;
-  transition: background-color var(--transition), color var(--transition);
+  transition: background var(--transition), color var(--transition);
 }
+
 .tabs button[aria-selected="true"] {
   background: var(--accent);
   color: var(--bg);
   border-color: var(--accent);
 }
+
 .tabs button:hover:not([aria-selected="true"]) {
   background: var(--border);
   color: var(--text);
 }
 
-/* ========== Actions ========== */
-.search-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-.actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-}
+/* ============= 5. Action buttons ============= */
+.actions { display: flex; gap: 1rem; justify-content: flex-end; }
+
 button {
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: var(--radius);
   font-size: 1rem;
   cursor: pointer;
-  transition: background-color var(--transition), transform var(--transition);
-}
-button:hover {
-  transform: translateY(-2px);
-}
-#clear {
-  background: var(--border);
-  color: var(--text);
-}
-#clear:hover {
-  background: var(--text-muted);
-}
-#generate {
-  background: var(--accent);
-  color: var(--bg);
-}
-#generate:hover {
-  background: var(--accent-hover);
+  transition: background var(--transition);
 }
 
-/* ========== Outputs ========== */
-pre, code {
+#clear { background: var(--border); color: var(--text); }
+#clear:hover { background: var(--text-muted); }
+
+#generate { background: var(--accent); color: var(--bg); }
+#generate:hover { background: var(--accent-hover); }
+
+/* ============= 6. Output areas ============= */
+pre {
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
@@ -188,25 +138,22 @@ iframe {
   background: #fff;
 }
 
-/* ========== Utility ========== */
+/* ============= 7. Accessibility helpers ============= */
 .visually-hidden {
-  position: absolute;
+  position: absolute !important;
   width: 1px;
   height: 1px;
+  padding: 0;
+  margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
+  border: 0;
 }
 
-/* ========== Responsive ========== */
+/* ============= 8. Responsive tweaks ============= */
 @media (max-width: 600px) {
-  body {
-    padding: 0.5rem;
-  }
-  header h1 {
-    font-size: 2rem;
-  }
-  .actions {
-    justify-content: center;
-  }
+  main  { padding: 0.5rem; }
+  h1    { font-size: 2rem; }
+  .actions { flex-direction: column; }
 }