Refactor App styles and enhance header with metadata. Adjusted layout properties for better spacing and added a new section for empty downloads state.

web/src/App.css

@@ -3,8 +3,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 3rem 1.5rem;
-  gap: 2rem;
+  justify-content: center;
+  padding: 2.5rem 1.5rem 3rem;
+  gap: 2.5rem;
   background: radial-gradient(circle at top, #27272a 0, #09090b 45%, #020617 100%);
 }
 
@@ -23,6 +24,16 @@
   color: #e4e4e7;
 }
 
+.app-header-meta {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 0.8rem;
+  color: #a1a1aa;
+}
+
 .app-main {
   width: 100%;
   display: flex;
@@ -113,7 +124,7 @@
 .downloads-section {
   width: 100%;
   max-width: 620px;
-  margin-top: 2rem;
+  margin-top: 0;
   padding: 1.25rem 1.5rem;
   border-radius: 1rem;
   border: 1px solid rgba(63, 63, 70, 0.9);
@@ -126,6 +137,12 @@
   margin-bottom: 0.5rem;
 }
 
+.downloads-empty {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: #a1a1aa;
+}
+
 .downloads-list {
   list-style: none;
   padding: 0;

web/src/App.tsx

@@ -235,6 +235,10 @@ function App() {
       <header className="app-header">
         <h1>Ephemeral Downloader</h1>
         <p>Proxy de download efêmero com streaming direto da origem para você.</p>
+        <div className="app-header-meta">
+          <span>Use a rota e peering da sua VPS a seu favor.</span>
+          <span>Ideal para ROMs, ISOs e arquivos grandes.</span>
+        </div>
       </header>
 
       <main className="app-main">
@@ -263,9 +267,17 @@ function App() {
           </button>
         </form>
 
-        {downloads.length > 0 && (
-          <section className="downloads-section" aria-label="Progresso dos downloads">
-            <h2 className="downloads-title">Downloads recentes</h2>
+        <section className="downloads-section" aria-label="Progresso dos downloads">
+          <h2 className="downloads-title">Downloads recentes</h2>
+
+          {downloads.length === 0 ? (
+            <p className="downloads-empty">
+              Nenhum download ativo ainda. Cole um ou mais links diretos ao lado e clique em
+              &nbsp;
+              <strong>Iniciar download</strong>
+              &nbsp;para começar.
+            </p>
+          ) : (
             <ul className="downloads-list">
               {downloads.map((item) => (
                 <li key={item.id} className="download-item">
@@ -325,8 +337,8 @@ function App() {
                 </li>
               ))}
             </ul>
-          </section>
-        )}
+          )}
+        </section>
       </main>
     </div>
   );