index.html

/* ----------------------------------------------------------
   AnyCoder AI – global dark‑mode theme (readable version)
   ---------------------------------------------------------- */
:root{
  --bg:            #0d1117;
  --bg-secondary:  #1e2228;   /* brighter than before            */
  --input-bg:      #f5f7fa;   /* light surface for inputs        */
  --input-text:    #0d1117;   /* dark text inside light inputs   */
  --border:        #30363d;
  --text:          #c9d1d9;
  --text-muted:    #8b949e;
  --accent:        #58a6ff;
  --accent-hover:  #79c0ff;
  --font-mono:     "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --radius:        8px;
  --transition:    .2s ease;
}

/* ----- reset ------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  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 }

main{
  max-width:900px;
  margin:0 auto;
  display:grid;
  gap:2rem;
}

section{
  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{ font-size:1.25rem;margin-bottom:1rem }
label{ display:block;margin-bottom:.5rem;font-weight:600 }

/* ----- form controls ----------------------------------------- */
select,
input[type="file"],
input[type="url"],
textarea{
  width:100%;
  padding:.75rem;
  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{
  resize:vertical;
  min-height:120px;
  font-family:var(--font-mono);
}

/* ----- tabs -------------------------------------------------- */
.tabs{ display:flex;gap:.5rem;margin-bottom:1rem }
.tabs button{
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.5rem 1rem;
  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(--border);
  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 }
button{
  padding:.75rem 1.5rem;
  border:none;
  border-radius:var(--radius);
  font-size:1rem;
  cursor:pointer;
  transition:background 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) }

pre{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:.9rem;
}

iframe{
  width:100%;
  height:400px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
}

.visually-hidden{
  position:absolute;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 }
}