Update static/style.css

static/style.css

@@ -1,86 +1,114 @@
-/* ----------------------------------------------------------
-   AnyCoder AI – global dark‑mode theme (readable version)
+/* static/style.css  –  FULL FILE
+   ----------------------------------------------------------
+   Dark‑mode GitHub‑inspired design for AnyCoder AI
    ---------------------------------------------------------- */
-:root{
+
+:root {
+  /* --------  color system  -------- */
   --bg:            #0d1117;
-  --bg-secondary:  #1e2228;   /* brighter than before            */
-  --input-bg:      #f5f7fa;   /* light surface for inputs        */
-  --input-text:    #0d1117;   /* dark text inside light inputs   */
+  --bg‑secondary:  #161b22;
   --border:        #30363d;
+  --surface:       #21262d;
   --text:          #c9d1d9;
-  --text-muted:    #8b949e;
+  --text‑muted:    #8b949e;
   --accent:        #58a6ff;
-  --accent-hover:  #79c0ff;
-  --font-mono:     "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
-  --radius:        8px;
-  --transition:    .2s ease;
+  --accent‑hover:  #79c0ff;
+  --danger:        #f85149;
+  --success:       #56d364;
+
+  /* --------  misc  -------- */
+  --radius:    8px;
+  --transition: .2s ease;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
 }
 
-/* ----- reset ------------------------------------------------- */
-*{box-sizing:border-box;margin:0;padding:0}
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
 body{
-  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-  background:var(--bg);
-  color:var(--text);
+  margin:0;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
+  background: var(--bg);
+  color: var(--text);
   line-height:1.6;
-  padding:1rem;
 }
 
-/* ----- layout containers ------------------------------------- */
-header{ text-align:center;margin-bottom:2rem }
-header h1{ font-size:2.5rem;margin-bottom:.5rem }
-header p { color:var(--text-muted);font-size:1.1rem }
+/* ----------------------------------  LAYOUT  */
+header{
+  text-align:center;
+  padding:2rem 1rem 1rem;
+}
+header h1{
+  font-size:2rem;
+  margin:0 0 .25rem;
+}
+header p{
+  color:var(--text‑muted);
+  margin:0;
+}
 
 main{
-  max-width:900px;
-  margin:0 auto;
-  display:grid;
+  max-width:960px;
+  margin:0 auto 4rem;
+  padding:0 1rem;
+  display:flex;
+  flex-direction:column;
   gap:2rem;
 }
 
+/* ----------------------------------  SECTIONS  */
 section{
-  background:var(--bg-secondary);
+  background:var(--bg‑secondary);
   border:1px solid var(--border);
   border-radius:var(--radius);
   padding:1.5rem;
-  box-shadow:0 4px 12px rgba(0,0,0,.25);
+}
+h2{
+  margin-top:0;
+  font-size:1.25rem;
 }
 
-h2{ font-size:1.25rem;margin-bottom:1rem }
-label{ display:block;margin-bottom:.5rem;font-weight:600 }
+/* ----------------------------------  INPUTS  */
+label{ font-weight:600; margin:.5rem 0; display:block; }
 
-/* ----- form controls ----------------------------------------- */
 select,
 input[type="file"],
 input[type="url"],
 textarea{
   width:100%;
   padding:.75rem;
+  font-size:1rem;
+  color:var(--text);
+  background:var(--surface);
   border:1px solid var(--border);
   border-radius:var(--radius);
-  background:var(--input-bg);
-  color:var(--input-text);
-  font-size:1rem;
   transition:border-color var(--transition);
 }
 select:focus,
 input:focus,
-textarea:focus{ outline:none;border-color:var(--accent) }
-
+textarea:focus{
+  outline:none;
+  border-color:var(--accent);
+}
 textarea{
   resize:vertical;
-  min-height:120px;
-  font-family:var(--font-mono);
+  min-height:140px;
+  font-family:var(--mono);
 }
 
-/* ----- tabs -------------------------------------------------- */
-.tabs{ display:flex;gap:.5rem;margin-bottom:1rem }
+/* ----------------------------------  TABS  */
+.tabs{
+  display:flex;
+  gap:.5rem;
+  margin-bottom:1rem;
+}
 .tabs button{
+  padding:.4rem 1rem;
   background:transparent;
   border:1px solid var(--border);
   border-radius:var(--radius);
-  padding:.5rem 1rem;
-  color:var(--text-muted);
+  color:var(--text‑muted);
   cursor:pointer;
   transition:background var(--transition),color var(--transition);
 }
@@ -90,53 +118,69 @@ textarea{
   border-color:var(--accent);
 }
 .tabs button:hover:not([aria-selected="true"]){
-  background:var(--border);
+  background:var(--surface);
   color:var(--text);
 }
 
-/* ----- misc -------------------------------------------------- */
-.search-toggle{ display:flex;align-items:center;gap:.5rem;margin-top:1rem }
-
-.actions{ display:flex;gap:1rem;justify-content:flex-end }
+/* ----------------------------------  ACTION BUTTONS  */
+.actions{
+  display:flex;
+  gap:.75rem;
+  justify-content:flex-end;
+  flex-wrap:wrap;
+}
 button{
-  padding:.75rem 1.5rem;
   border:none;
   border-radius:var(--radius);
-  font-size:1rem;
   cursor:pointer;
-  transition:background var(--transition);
+  font-size:1rem;
+  padding:.7rem 1.5rem;
+  transition:background var(--transition),opacity var(--transition);
 }
-#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) }
+#clear{
+  background:var(--border);
+  color:var(--text);
+}
+#clear:hover{ background:var(--surface); }
+#generate{
+  background:var(--accent);
+  color:var(--bg);
+}
+#generate:hover{ background:var(--accent‑hover); }
+#generate:disabled{ opacity:.6; cursor:progress; }
 
+/* ----------------------------------  OUTPUT PANELS  */
 pre{
-  background:var(--bg);
+  background:var(--surface);
   border:1px solid var(--border);
   border-radius:var(--radius);
   padding:1rem;
   overflow-x:auto;
-  font-family:var(--font-mono);
+  font-family:var(--mono);
   font-size:.9rem;
+  margin:0;
 }
-
 iframe{
   width:100%;
-  height:400px;
+  height:420px;
   border:1px solid var(--border);
   border-radius:var(--radius);
   background:#fff;
 }
 
+/* visually hidden utility */
 .visually-hidden{
-  position:absolute;width:1px;height:1px;overflow:hidden;
-  clip:rect(0 0 0 0);white-space:nowrap;
+  position:absolute !important;
+  width:1px;height:1px;
+  overflow:hidden;
+  clip:rect(0 0 0 0);
+  white-space:nowrap;
 }
 
-/* ----- mobile tweaks ---------------------------------------- */
-@media(max-width:600px){
-  body{ padding:.5rem }
-  header h1{ font-size:2rem }
-  .actions{ flex-direction:column }
+/* ----------------------------------  RESPONSIVE  */
+@media (max-width:640px){
+  header{padding-top:1.5rem;}
+  header h1{font-size:1.6rem;}
+  section{padding:1.2rem;}
+  .actions{flex-direction:column;}
 }