Upload style.css with huggingface_hub

style.css

@@ -22,7 +22,7 @@ body {
 }
 
 .gradio-container {
-  max-width: 800px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 24px 20px 60px;
 }
@@ -46,12 +46,24 @@ header h1 {
   font-size: 12px;
 }
 
+/* ─── 2 colunas no desktop, 1 no mobile ─── */
+.panels {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 900px) {
+  .panels {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+}
+
 .panel {
   background: var(--panel);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 16px 20px;
-  margin-bottom: 16px;
   box-shadow: var(--shadow);
 }
 
@@ -61,6 +73,47 @@ header h1 {
   color: var(--text);
 }
 
+/* ─── config bar (2 selects lado a lado) ─── */
+.config-bar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.config-bar label {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin: 0;
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.config-bar select {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text);
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.config-bar select:hover { border-color: #d1d5db; }
+.config-bar select:focus { outline: none; border-color: var(--primary); }
+
 textarea {
   width: 100%;
   padding: 10px 12px;
@@ -134,22 +187,13 @@ button.primary:disabled {
   color: var(--muted);
 }
 
-.status.loading::before {
-  content: "⏳ ";
-}
-
-.status.done::before {
-  content: "✓ ";
-  color: #10b981;
-}
-
-.status.error {
-  color: #ef4444;
-}
+.status.loading::before { content: "⏳ "; }
+.status.done::before { content: "✓ "; color: #10b981; }
+.status.error { color: #ef4444; }
 .status.error::before { content: "✗ "; }
 
 .output {
-  min-height: 80px;
+  min-height: 120px;
   padding: 12px;
   background: #fafafa;
   border: 1px dashed var(--border);
@@ -179,10 +223,7 @@ button.primary:disabled {
   background: #fff7ed;
 }
 
-.ato-chip .text {
-  flex: 1;
-}
-
+.ato-chip .text { flex: 1; }
 .ato-chip .ato {
   font-weight: 600;
   font-size: 12px;
@@ -190,17 +231,13 @@ button.primary:disabled {
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
-
 .ato-chip .score {
   font-size: 11px;
   color: var(--muted);
   font-family: ui-monospace, "SF Mono", monospace;
 }
 
-details {
-  margin-top: 12px;
-}
-
+details { margin-top: 12px; }
 details summary {
   cursor: pointer;
   font-size: 12px;
@@ -225,7 +262,6 @@ footer {
   font-size: 12px;
   color: var(--muted);
 }
-
 footer a { color: var(--muted); }
 footer a:hover { color: var(--primary); }