/*
Theme Name: SSS Downloader
Theme URI: https://example.com/sssdownloader
Author: Rafael & Charlie
Author URI: https://example.com
Description: Tema WordPress inspirado no layout do SSSInstagram para baixar conteúdos (UI apenas). Conecte a um backend/APIs próprias para realizar os downloads conforme os termos de uso das plataformas.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sssdownloader
Tags: landing-page, minimal, gradient, responsive
*/

/* Reset básico */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;line-height:1.6;background:#0e0f13;color:#1d2635}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#0e0f13;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:20}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff}
.logo .pill{background:#6a4cff;color:#fff;padding:6px 10px;border-radius:999px;font-weight:700}
.lang{display:flex;gap:10px}
.lang a{color:#cbd5e1;text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.lang a.active,.lang a:hover{background:#1d2230;color:#fff}

/* Hero gradient */
.hero{background:linear-gradient(90deg,#b413ff 0%,#3a53ff 50%,#00c0ff 100%);padding:56px 16px}
.container{max-width:1100px;margin:0 auto}
.hero h1{color:#fff;font-weight:800;font-size:40px;text-align:center;margin-bottom:22px}

/* Tabs */
.tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.tab{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);color:#fff;border-radius:12px;border:1px solid rgba(255,255,255,.18);cursor:pointer;font-weight:600}
.tab.active,.tab:hover{background:#fff;color:#111}

/* Search bar */
.search-wrap{display:flex;gap:10px;max-width:920px;margin:0 auto}
.search-wrap input{flex:1;padding:16px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.08);outline:none}
.btn{padding:14px 18px;border:none;border-radius:10px;font-weight:700;cursor:pointer}
.btn-paste{background:#eef2ff;color:#111;border:1px solid #c7d2fe}
.btn-primary{background:#ff2c6b;color:#fff}

/* Section content */
.section{background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;margin-top:-16px;padding:28px 16px}
.section h2{font-size:30px;margin-bottom:14px;color:#111}
.section p{color:#475569}

/* Results list */
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:18px}
.card{background:#0f1220;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;color:#cbd5e1}
.card h3{color:#fff;margin:8px 0 4px 0;font-size:16px}
.card a{display:inline-block;margin-top:8px;text-decoration:none;border:1px solid rgba(255,255,255,.2);padding:8px 10px;border-radius:8px;color:#fff}
.footer{color:#94a3b8;text-align:center;padding:30px 12px}
.notice{font-size:12px;color:#94a3b8;margin-top:8px;text-align:center}
@media (max-width:640px){.hero h1{font-size:30px}}


.card {
  background: #0f0f13;
  padding: 16px;
  border-radius: 12px;
  margin: 15px auto;
  color: #fff;
  max-width: 520px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.btn-download {
  background: linear-gradient(90deg,#E1306C,#F56040);
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  display: inline-block;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-download:hover {
  filter: brightness(1.1);
}