/* ======================================================= */
/* UI.CSS - WEDGE HUB (Download Center)                    */
/* ======================================================= */

/* ======================================================= */
/* UI.CSS - WEDGE HUB (Download Center)                    */
/* ======================================================= */

/* --- ADICIONE ESTE BLOCO NO TOPO --- */
*, *::before, *::after {
  box-sizing: border-box;
}
/* ----------------------------------- */

:root {
  /* ... o resto do seu código continua aqui ... */
  --bg: #050505;
  --surface: #111111;
  --border: #222222;
  --primary: #ffffff;
  --text: #cccccc;
  --text-dim: #666666;
  --accent-green: #10b981; /* Para status online */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
button { cursor: pointer; border: none; font-family: inherit; }

/* LAYOUT */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.header { height: 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }

.brand { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.2rem; }
.brand img { width: 32px; height: 32px; border-radius: 6px; }

/* HERO SECTION */
.hero { padding: 4rem 0 2rem; text-align: center; }
.hero h1 { font-family: var(--font-display); font-size: 2.5rem; color: #fff; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.hero p { color: var(--text-dim); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* APPS GRID */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding-bottom: 4rem;
}

/* APP CARD */
.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.app-card:hover { border-color: #444; transform: translateY(-2px); }

/* Header do Card */
.app-header { display: flex; gap: 1rem; margin-bottom: 1rem; }
.app-icon {
  width: 64px; height: 64px;
  background: #000;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.app-info h3 { margin: 0; color: #fff; font-family: var(--font-display); font-size: 1.1rem; }
.app-info span { font-size: 0.8rem; color: var(--text-dim); }

.app-desc { font-size: 0.9rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 1.5rem; flex-grow: 1; }

/* Actions (Botões) */
.app-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: auto; }

.btn-download {
  background: #fff; color: #000;
  padding: 0.6rem; border-radius: 8px;
  font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  transition: opacity 0.2s;
}
.btn-download:hover { opacity: 0.9; }
.btn-download svg { width: 16px; height: 16px; }

/* STATUS: LOCKED / SOON */
.app-card.locked { opacity: 0.6; border-style: dashed; }
.app-card.locked .app-icon { filter: grayscale(100%); }
.app-card.locked:hover { transform: none; border-color: var(--border); }

.badge-soon {
  position: absolute; top: 1rem; right: 1rem;
  background: #222; color: #888;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  border: 1px solid #333;
}

/* User Actions */
.user-menu { display: flex; gap: 1rem; align-items: center; }
.btn-outline { border: 1px solid var(--border); color: #fff; padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.85rem; font-weight: 600; }
.btn-outline:hover { background: #222; }

/* Status Dot */
.status-dot { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--accent-green); }
.status-wrapper { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-dim); background: rgba(255,255,255,0.05); padding: 0.3rem 0.8rem; border-radius: 99px; }

/* Loading State */
body.loading { opacity: 0; }
body { transition: opacity 0.5s; }

/* Botões do Header */
.user-menu-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Garante que o botão Criar Conta tenha destaque */
.btn-highlight {
  background-color: #ffffff;
  color: #000000 !important;
  border: 1px solid #ffffff;
}

.btn-highlight:hover {
  background-color: #e5e5e5;
  border-color: #e5e5e5;
}

/* Botões de Download lado a lado */
.app-actions {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Força 2 colunas iguais */
  gap: 0.75rem;
  margin-top: auto;
}

.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #222;
  color: #fff;
  border: 1px solid #333;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s;
}

.btn-download:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.btn-download svg {
  width: 18px;
  height: 18px;
}

.btn-logout {
  background: transparent;
  color: #666;
  border-color: transparent;
}
.btn-logout:hover {
  color: #fff;
}

/* Mobile fix para header */
@media (max-width: 600px) {
  .mobile-hide { display: none; }
  .user-menu-group { gap: 0.5rem; }
  .btn-outline { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
}

/* ======================================================= */
/* ÁREA DE LOGIN E CORREÇÃO GERAL DE BOTÕES                */
/* Substitua o bloco final do ui.css por este              */
/* ======================================================= */

/* --- 1. CONFIGURAÇÃO GERAL DA PÁGINA DE LOGIN --- */
.flex-col-page {
  display: flex; flex-direction: column; min-height: 100vh;
}
.login-page-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.login-container {
  width: 100%; max-width: 400px; position: relative;
}
.login-card {
  background: #111; 
  border: 1px solid #222;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* --- 2. ABAS (TABS) --- */
.tabs {
  display: flex; border-bottom: 1px solid #222; margin-bottom: 1.5rem;
}
.tab-button {
  flex: 1; background: transparent; border: none;
  padding: 1rem; color: #666; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; transition: 0.3s;
  font-family: var(--font-body);
}
.tab-button:hover { color: #fff; }
.tab-button.active { color: #fff; border-bottom-color: #fff; }

/* --- 3. INPUTS (FORMULÁRIOS) --- */
.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: 0.85rem; color: #ccc; margin-bottom: 0.5rem;
}
input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  background-color: #050505;
  border: 1px solid #333;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  font-family: inherit;
}
input:focus { border-color: #888; background-color: #000; }

/* --- 4. BOTÕES DO LOGIN (Específicos para não quebrar o header) --- */
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; /* Botão do login deve ser total */
  background-color: #ffffff;
  color: #000000;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px;
  border: none;
  border-radius: 8px;
  margin-top: 1rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.2s;
}
.btn-primary:hover { background-color: #e0e0e0; transform: translateY(-1px); }

/* --- 5. CORREÇÃO DOS BOTÕES DO HEADER (INDEX) --- */
/* Força o estilo correto caso algo tenha sido sobrescrito */
.btn-outline {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important; /* IMPORTANTE: Não deixa ficar 100% */
  margin: 0 !important;
  border: 1px solid #333;
  background: transparent;
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 99px !important; /* Formato Pílula */
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
}
.btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}

/* Botão "Criar Conta" (Destaque Branco) */
.btn-highlight {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  font-weight: 700 !important;
}
.btn-highlight:hover {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #000 !important;
}

/* --- 6. UTILITIES E EXTRAS --- */
.form-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: #666; }
.form-link button { background: none; border: none; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 600; padding: 0 5px; }

.form-message { text-align: center; font-size: 0.85rem; margin-top: 1rem; min-height: 20px; }
.form-message.error { color: #ff4d4d; }
.form-message.success { color: #00cc66; }

.password-checklist { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.checklist-item { font-size: 0.75rem; color: #444; display: flex; align-items: center; gap: 6px; }
.checklist-item.valid { color: #00cc66; }
.checklist-item svg { width: 12px; height: 12px; stroke-width: 3; }

.hidden { display: none !important; }
.terms-label { display: flex; gap: 10px; font-size: 0.8rem; color: #888; align-items: flex-start; }
.terms-label a { color: #fff; text-decoration: underline; }

/* Animações */
.anim-fade-up { animation: fadeUp 0.5s ease-out; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Modal Overlay (Email Verification) */
.card-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85); z-index: 999;
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.card-overlay.is-active { display: flex; }
.modal-content {
  background: #111; border: 1px solid #333; padding: 2rem;
  border-radius: 16px; max-width: 350px; text-align: center;
}
.modal-content h3 { color: #fff; margin-top: 0; }

/* Ajuste do botão dentro do modal para não usar o btn-outline do header */
.modal-content .btn-outline {
  width: 100% !important;
  border-radius: 8px !important;
  margin-top: 1rem !important;
}

/* Mobile */
@media (max-width: 600px) {
  .login-card { border: none; background: transparent; padding: 0; box-shadow: none; }
}

/* ======================================================= */
/* ADICIONAR NO FINAL DO SEU UI.CSS (PARA A PÁGINA DE CONTA) */
/* ======================================================= */

/* Título e Cabeçalho da Seção */
.section-header { margin-bottom: 3rem; }
.section-kicker { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 0.5rem; }
.section-title { font-family: var(--font-display); font-size: 2.5rem; color: #fff; margin: 0 0 0.5rem 0; line-height: 1.1; }
.section-subtitle { color: var(--text-dim); font-size: 1.1rem; }
.text-grad { background: linear-gradient(to right, #fff, #666); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Grid Principal da Conta */
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
  gap: 1.5rem;
  padding-bottom: 4rem;
}
@media (max-width: 768px) {
  .account-grid { grid-template-columns: 1fr; } /* Uma coluna no mobile */
}

/* Card de Conta (Herda estilo do app-card mas simplificado) */
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex; 
  flex-direction: column;
  height: 100%; /* Para alinhar alturas */
}
.account-card h2 { margin-top: 0; color: #fff; font-size: 1.2rem; font-family: var(--font-display); }

/* Listas dentro dos cards */
.account-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; flex-grow: 1; }
.meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.meta-row:last-child { border-bottom: none; }

.meta-label { color: #fff; font-weight: 600; font-size: 0.95rem; }
.meta-value { color: var(--text-dim); font-size: 0.85rem; text-align: right; }

/* Status Text Colors */
.status-active { color: #10b981; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; }
.status-inactive { color: #ef4444; font-weight: bold; text-transform: uppercase; font-size: 0.8rem; }

/* Formulários na Conta */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.account-form label { display: block; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; }
.account-form input { width: 100%; background: #0a0a0a; border: 1px solid #333; color: #fff; padding: 10px; border-radius: 6px; }
.account-form input:disabled { background: #151515; color: #555; border-color: transparent; cursor: default; }

.divider { height: 1px; background: #222; margin: 2rem 0; width: 100%; }
.loading-text { font-style: italic; color: #444; font-size: 0.9rem; }

/* AUMENTANDO O ICONE */
.app-icon {
  width: 96px;       /* Era 64px */
  height: 96px;      /* Era 64px */
  background: #000;
  border-radius: 16px; /* Aumentei um pouco o radius para combinar */
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0; /* Garante que não amasse */
}

/* AUMENTANDO O TÍTULO */
.app-info h3 { 
  margin: 0 0 0.5rem 0; /* Ajuste na margem */
  color: #fff; 
  font-family: var(--font-display); 
  font-size: 1.5rem;   /* Era 1.1rem - Ficou bem maior */
  font-weight: 800;
  line-height: 1.1;
}

.app-info span { 
  font-size: 0.9rem; /* Aumentei levemente o texto da versão também */
  color: var(--text-dim); 
}

/* Ajuste no Header do Card para alinhar com o ícone maior */
.app-header { 
  display: flex; 
  gap: 1.2rem; 
  margin-bottom: 1.5rem; 
  align-items: center; /* Centraliza verticalmente texto e ícone */
}

/* Atualização visual do botão desativado */
.locked-btn {
  background: #1a1a1a;
  color: #555;
  border-color: #222;
  cursor: not-allowed;
}
.locked-btn:hover {
  background: #1a1a1a;
  color: #555;
  border-color: #222;
}

/* ======================================================= */
/* LANDING PAGE DOWNLOADS (Cards & Grid)                   */
/* Cole isso no final do seu ui.css                        */
/* ======================================================= */

/* Container da Landing Page */
.lp-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 4rem 1.5rem;
}

/* Hero Section da LP */
.lp-logo {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  margin-bottom: 2rem;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.08);
  border: 1px solid #333;
  background: #111;
  object-fit: cover;
}

.lp-title {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem 0;
  line-height: 1.1;
  background: linear-gradient(180deg, #fff 0%, #aaa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 165, 0, 0.1); color: #ffaa00;
  border: 1px solid rgba(255, 165, 0, 0.25);
  padding: 0.5rem 1rem; border-radius: 99px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 2rem;
}

.lp-desc {
  font-size: 1.1rem; color: var(--text-dim);
  max-width: 600px; margin: 0 auto 3rem; line-height: 1.6;
}

/* Grid de Cards */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  text-align: left;
}

/* O Card de Download */
.dl-card {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 20px;
  padding: 2rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 200px; position: relative; overflow: hidden;
}

/* Hover Efeito */
.dl-card:hover:not(.disabled) {
  background: #161616; border-color: #555;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.dl-card:hover:not(.disabled) .dl-icon { color: #fff; transform: scale(1.1); }

/* Elementos do Card */
.dl-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.dl-icon { width: 48px; height: 48px; color: #888; transition: 0.3s; }

.status-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
  background: #1a1a1a; padding: 6px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 8px; color: #666;
  border: 1px solid #222;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #444; }

.dl-footer h3 { font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin: 0 0 0.5rem 0; }
.dl-meta { font-size: 0.9rem; color: #555; display: flex; gap: 8px; font-weight: 500; }

/* Estados Lógicos */
/* ONLINE */
.dl-card.online .status-dot { background: #00ff66; box-shadow: 0 0 8px rgba(0,255,102,0.6); }
.dl-card.online .status-pill { color: #00ff66; border-color: rgba(0,255,102,0.2); background: rgba(0,255,102,0.05); }

/* DISABLED / OFFLINE */
.dl-card.disabled { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
.dl-card.disabled .status-pill { color: #444; }

/* LOADING */
.dl-card.loading { pointer-events: none; }
.dl-card.loading .dl-icon, .dl-card.loading h3 { opacity: 0.3; animation: pulse 1.5s infinite; }

@keyframes pulse { 0% { opacity: 0.3; } 50% { opacity: 0.6; } 100% { opacity: 0.3; } }

/* Mobile */
@media (max-width: 768px) {
  .lp-title { font-size: 2.5rem; }
  .dl-grid { grid-template-columns: 1fr; }
}

/* ======================================================= */
/* MODAIS DE DOWNLOAD (SmartScreen & Gatekeeper)           */
/* Cole no final do ui.css                                 */
/* ======================================================= */

.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}

.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal-box {
  background: #111; border: 1px solid #333;
  width: 90%; max-width: 500px;
  border-radius: 16px; padding: 2rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  transform: scale(0.95); transition: transform 0.3s ease;
  position: relative;
}

.modal-overlay.active .modal-box { transform: scale(1); }

.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: none; color: #666; font-size: 1.5rem;
  cursor: pointer; line-height: 1;
}
.modal-close:hover { color: #fff; }

.modal-title { color: #fff; font-family: var(--font-display); font-size: 1.25rem; margin-top: 0; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }

.smartscreen-alert {
  background: #0078D7; color: #fff; padding: 1rem; border-radius: 8px;
  font-size: 0.9rem; margin-bottom: 1rem; text-align: left;
}

.terminal-box {
  background: #000; border: 1px solid #333; border-radius: 6px;
  padding: 1rem; margin-top: 1rem; text-align: left;
}
.terminal-header { display: flex; gap: 6px; margin-bottom: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }

.code-block {
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #4caf50;
  word-break: break-all; user-select: text; cursor: text; display: block;
}

.copy-hint { font-size: 0.75rem; color: #666; margin-top: 5px; display: block; text-align: right; }