Update static/style.css

static/style.css

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