/* ——— THEMING ——— */
/* 1) Padrão: LIGHT */
:root{
  --bg:#fafafa; --surface:#ffffff; --text:#0f172a;
  --muted:#6b7280; --muted-2:#9ca3af;
  --accent:#2563eb; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.06);
  --radius:14px;
}

/* 2) Forçar DARK quando houver a classe .dark no <html> */
:root.dark{
  --bg:#0b1220; --surface:#0f172a; --text:#e5e7eb;
  --muted:#94a3b8; --muted-2:#7c8696;
  --accent:#4f83ff; --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* 3) Preferência do SO *apenas quando nenhuma classe foi definida* */
@media (prefers-color-scheme: dark){
  :root:not(.light):not(.dark){
    --bg:#0b1220; --surface:#0f172a; --text:#e5e7eb;
    --muted:#94a3b8; --muted-2:#7c8696;
    --accent:#4f83ff; --border:#1f2a44; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}

/* 4) Forçar LIGHT quando houver a classe .light (fica por último para ganhar do @media) */
:root.light{
  --bg:#fafafa; --surface:#ffffff; --text:#0f172a;
  --muted:#6b7280; --muted-2:#9ca3af;
  --accent:#2563eb; --border:#e5e7eb; --shadow:0 10px 30px rgba(2,6,23,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 Inter, system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar minimal com toggle */
.topbar{position:sticky; top:0; z-index:10; background:transparent}
.topbar .container{max-width:880px; margin:0 auto; padding:16px; display:flex; align-items:center; justify-content:space-between}
.brand-mini{font-weight:600; opacity:.8}
.toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer}
.toggle .lbl{display:none}

/* Hero central */
.container{max-width:880px; margin:0 auto; padding:0 16px}
.hero{display:grid; place-items:center; padding:12px 0}
.stack{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
.title{font-size:2.2rem; margin:0;color:var(--accent)}
.subtitle{font-size:1.05rem; margin:0; color:var(--muted)}

/* CTA principal */
.fileBig{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:12px; cursor:pointer; border:1px solid transparent;
  background:var(--accent); color:#fff; font-weight:600; box-shadow:var(--shadow);
  transition:transform .2s ease, filter .2s ease;
}
.fileBig:hover{ transform:translateY(-1px) scale(1.01); filter:brightness(.98) }
.fileBig:active{ transform:none; filter:brightness(.95) }
.fileBig input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer }

/* Botões secundários */
.btn{ cursor:pointer; user-select:none; font-weight:500; border-radius:10px; padding:10px 14px; border:1px solid var(--border); background:var(--surface); color:var(--text) }
.btn:hover{ background:rgba(37,99,235,.06) }
.btn.ghost{ background:transparent }
.btn.outline{ background:transparent }

/* Painel de informações */
.info{ width:min(680px, 96vw); border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:14px }
.muted{color:var(--muted)} .small{font-size:.94rem}
.desc{max-width:560px}

/* Prévia e navegação */
.preview{ 
	opacity: 0; visibility:hidden; transition:opacity .7s ease;
	width:min(720px, 96vw); height:auto; border-radius:12px; 
	border:1px solid var(--border); background:#fff
}
.preview.show{ opacity:1; visibility:visible }
.nav{ display:flex; gap:10px; align-items:center; justify-content:center }
.nav[hidden]{ display:none !important }
input#page{ width:70px; text-align:center; border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:transparent; color:var(--text) }
input#page:focus{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25) }

/* Footer */
.footer{ padding:40px 0 }
.footer .container{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap }

/* Drop global */
#drop{ position:fixed; inset:0; z-index:1; background:transparent; pointer-events:auto }
body.dragging::before{
  content:""; position:fixed; inset:12px; border:2px dashed var(--border); border-radius:16px; pointer-events:none;
}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:#111827; color:#f9fafb; padding:10px 14px; border-radius:10px; font-weight:600;
  box-shadow:0 8px 18px rgba(0,0,0,.18); opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }