:root {
  --bg: #101318;
  --panel: #151a21;
  --panel-2: #1c232c;
  --line: #2a323d;
  --text: #e8ebef;
  --muted: #9aa4b0;
  --red: #d32f2f;
  --red-hi: #e2513f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display: flex; flex-direction: column; height: 100dvh;
  overscroll-behavior: none;
}
[hidden] { display: none !important; }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .3px; }
.brand span { font-size: 15px; }
.file-name { color: var(--muted); font-size: 12.5px; max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tbtn {
  height: 34px; min-width: 34px; padding: 0 9px; border-radius: 9px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  font-size: 16px; cursor: pointer; line-height: 1;
}
.tbtn:hover { border-color: #3a4550; }
.tbtn.primary { background: var(--red); border-color: var(--red); font-size: 13px; font-weight: 700; }
.tbtn.primary:hover { background: var(--red-hi); }
.tbtn.wa { color: #25d366; display: inline-flex; align-items: center; justify-content: center; }
.tbtn.wa:hover { border-color: #25d366; background: rgba(37,211,102,.12); }
.tbtn.gm { color: #ea4335; display: inline-flex; align-items: center; justify-content: center; }
.tbtn.gm:hover { border-color: #ea4335; background: rgba(234,67,53,.12); }

/* toast (mensagem curta) */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #23303a; color: #fff; border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 10px; font-size: 13px; max-width: 90vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 20; text-align: center;
}
.zoom, .page { color: var(--muted); font-size: 12.5px; min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* Viewer */
.viewer {
  flex: 1; overflow: auto; padding: 16px 10px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.page-wrap {
  background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
  max-width: 100%; position: relative;
}
.page-wrap canvas { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.page-num {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6);
  color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px;
}

/* Drop / welcome */
.drop {
  flex: 1; display: grid; place-items: center; padding: 20px;
}
.drop.dragover .drop-card { border-color: var(--red); background: var(--panel-2); }
.drop-card {
  text-align: center; max-width: 380px; width: 100%;
  border: 2px dashed var(--line); border-radius: 18px; padding: 34px 24px;
  background: var(--panel); transition: border-color .15s, background .15s;
}
.drop-card h1 { margin: 14px 0 6px; font-size: 22px; }
.drop-card p { margin: 8px 0; color: var(--muted); font-size: 13.5px; }
.open-btn {
  margin-top: 14px; height: 46px; padding: 0 26px; border: 0; border-radius: 12px;
  background: var(--red); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.open-btn:hover { background: var(--red-hi); }
.hint { font-size: 12px !important; }
.link { color: var(--red-hi); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }
.err { color: #ff8a80 !important; font-weight: 600; }