:root{
  --bg-color:#0f172a;
  --text-color:#f8fafc;
  --accent-color:#38bdf8;
  --secondary-color:#1e293b;
  --pivot-color:#fb7185;
  --muted:#94a3b8;
  --card:rgba(12,22,46,.75);
  --card-border:rgba(255,255,255,.07);
  --shadow:0 8px 30px rgba(0,0,0,.25);
  --reader-panel-bg:#101b33;
  --reader-surface-bg:#121212;
  --reader-panel-border:#22345a;
  --reader-heading-color:#dbe7ff;
  --reader-copy-color:#f8fafc;
  --reader-copy-muted:#8ea6cf;
  --reader-highlight-bg:#6a4e4d;
  --reader-highlight-color:#fef7f6;
  --font-main:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Merriweather','Georgia',serif;
  --mono:'Fira Code','Roboto Mono','Courier New',monospace;
  --side-ch:5.5ch;
  --word-min:2rem;
}

body.light-mode{
  --bg-color:#f8fafc;
  --text-color:#0f172a;
  --accent-color:#2563eb;
  --secondary-color:#e2e8f0;
  --pivot-color:#ef4444;
  --muted:#475569;
  --card:rgba(255,255,255,.86);
  --card-border:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(15,23,42,.10);
  --reader-panel-bg:#ffffff;
  --reader-surface-bg:#ffffff;
  --reader-panel-border:rgba(15,23,42,.08);
  --reader-heading-color:#0f172a;
  --reader-copy-color:#334155;
  --reader-copy-muted:#64748b;
  --reader-highlight-bg:rgba(251,121,97,.18);
  --reader-highlight-color:#7c2d12;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

body{
  background:var(--bg-color);
  color:var(--text-color);
  font-family:var(--font-main);
  width:100%;
  min-height:100dvh;
  min-height:calc(var(--vh, 1vh) * 100);
  overflow-x:hidden;
  overflow-y:auto;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

#app{height:100%;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;padding:20px}
.hidden{display:none!important}

/* Setup */
#setup-screen{justify-content:center;align-items:center;text-align:center;min-height:100vh;padding:40px 20px}
.hero h1{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(to right,var(--accent-color),#818cf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--muted);margin-bottom:2rem}
.file-upload input{display:none}
.btn-primary{background:var(--accent-color);color:var(--bg-color);padding:16px 32px;border-radius:12px;font-weight:800;cursor:pointer;display:inline-block;transition:transform .2s}
.btn-primary:active{transform:scale(.97)}
.recent-hint{margin-top:2rem;font-size:.85rem;color:#64748b}
.auth-card{
  width:min(560px,92vw);
  margin:0 auto 14px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:12px;
  box-shadow:var(--shadow);
}
.auth-status{font-weight:700;color:var(--text-color);font-size:.92rem;margin-bottom:10px}
.auth-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn-secondary,.btn-ghost{
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
}
.btn-secondary{
  background:rgba(56,189,248,.12);
  color:var(--text-color);
}
.btn-ghost{
  background:transparent;
  color:var(--muted);
}
.plan-badge{
  margin-top:10px;
  font-size:.82rem;
  font-weight:800;
  color:#7dd3fc;
}

/* Reader layout */
#reader-screen{
  padding:0;
  height:100vh;
  min-height:100vh;
  height:100dvh;
  min-height:100dvh;
  height:calc(var(--vh, 1vh) * 100);
  min-height:calc(var(--vh, 1vh) * 100);
  display:grid;
  grid-template-rows:auto minmax(0, 1fr) auto auto auto;
  position:relative;
}

.top-bar{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,23,42,.80);
  backdrop-filter:blur(10px);
  z-index:20;
  transition:opacity .5s, transform .5s;
}

.progress-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
#book-title{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(520px,70vw)}
#read-percentage{font-size:.85rem;font-weight:900;color:var(--accent-color)}

.top-bar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.audio-select{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text-color);border-radius:10px;padding:8px 10px;font-weight:700;font-size:.85rem;appearance:none;max-width:44vw}
.audio-select option{background:#0f172a;color:#e2e8f0}
.light-mode .audio-select{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);color:#0f172a}
.light-mode .audio-select option{background:#f8fafc;color:#0f172a}

.icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.icon-btn.active{color:var(--accent-color)}
#toggle-tts:not(.active){opacity:.55}

.chapters-panel{
  position:absolute;
  top:90px;
  left:16px;
  right:16px;
  margin:0;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  z-index:40;
  max-height:min(45vh, 300px);
  overflow:auto;
}
.chapters-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  font-size:.9rem;
  color:#cbd5e1;
  margin-bottom:8px;
}
.light-mode .chapters-header{color:#0f172a}
#chapter-current-label{color:var(--muted);font-weight:700}
.locator-box{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:6px;
  margin-bottom:8px;
}
.locator-box input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-color);
  border-radius:9px;
  padding:8px 10px;
  font-size:.85rem;
  font-weight:700;
}
.light-mode .locator-box input{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.12);
  color:#0f172a;
}
.locator-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-color);
  border-radius:9px;
  padding:0 10px;
  font-weight:800;
  cursor:pointer;
}
.light-mode .locator-btn{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.12);
  color:#0f172a;
}
.locator-status{
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  min-height:16px;
  margin-bottom:8px;
}
.chapters-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:120px;
  overflow:auto;
}
.chapter-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text-color);
  border-radius:999px;
  padding:6px 10px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.light-mode .chapter-item{
  background:rgba(15,23,42,.06);
  border-color:rgba(15,23,42,.12);
  color:#0f172a;
}
.chapter-item.active{
  border-color:var(--accent-color);
  color:var(--accent-color);
}
.chapter-empty{
  color:var(--muted);
  font-size:.82rem;
}

/* Reader core */
.reader-container{
  min-height:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  padding:clamp(10px,2.2vh,26px) 12px;
}

#word-display{
  font-size:clamp(var(--word-min),6vw,3.4rem);
  font-weight:700;
  display:flex;
  font-family:var(--mono);
  letter-spacing:-.02em;
  text-align:center;
  color:var(--reader-copy-color);

  max-width:100%;
  min-width:0;
  justify-content:center; /* ← AQUI */
  white-space:nowrap;
  overflow:visible;
}

.pivot{color:var(--pivot-color)}
.no-highlight .pivot{color:inherit}
.prefix{ text-align:right; flex:1 1 0; min-width:0; padding-right:.12ch; }
.pivot{ flex:0 0 auto; }
.suffix{ text-align:left; flex:1 1 0; min-width:0; padding-left:.12ch; }
.focus-lines{display:none}

/* Preview */
.preview-wrapper{padding:10px 16px 8px}
.mini-preview{
  background:var(--reader-panel-bg);
  border:1px solid var(--reader-panel-border);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:1100px;
  margin:0 auto;
}
.preview-header{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:.95rem;color:var(--reader-heading-color)}
.preview-header small{font-weight:700;color:var(--reader-copy-muted)}
.preview-text{
  font-size:1rem;
  line-height:1.6;
  color:var(--reader-copy-color);
  max-height:clamp(96px,18vh,170px);
  overflow:auto;
  text-align:justify;
  letter-spacing:.01em;
  font-family:var(--serif);
}
.preview-text .preview-highlight{background:var(--reader-highlight-bg);color:var(--reader-highlight-color);padding:0 4px;border-radius:4px}

/* Controls */
.controls-panel{
  background:var(--secondary-color);
  padding:16px 16px 14px;
  border-radius:26px 26px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:10;
  padding-bottom:max(14px, env(safe-area-inset-bottom,0px));
  transition:opacity .5s, transform .5s;
}

.reading-mode-switch{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.mode-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
}
.mode-btn.active{
  background:rgba(56,189,248,.18);
  color:var(--text-color);
  border-color:rgba(56,189,248,.45);
}
.light-mode .mode-btn{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.10);
  color:#334155;
}
.light-mode .mode-btn.active{
  background:rgba(14,165,233,.14);
  border-color:rgba(14,165,233,.34);
  color:#0f172a;
}

.speed-control{display:flex;align-items:center;justify-content:center;gap:18px}
.wpm-display{text-align:center;min-width:92px}
#wpm-value{font-size:2rem;font-weight:900;display:block;line-height:1}
.wpm-display small{color:var(--muted);font-weight:800;letter-spacing:.05em}

.speed-btn{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-color);
  width:44px;height:44px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.light-mode .speed-btn{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.10);color:#0f172a}

.playback-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
  max-width:520px;
  margin:0 auto;
}
.step-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text-color);
  width:56px;height:56px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.light-mode .step-btn{background:rgba(15,23,42,.06);border-color:rgba(15,23,42,.10);color:#0f172a}

.main-play-btn{
  background:var(--accent-color);
  color:var(--bg-color);
  border:none;
  width:74px;height:74px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(56,189,248,.30);
}

.timeline input{width:100%;accent-color:var(--accent-color)}

.natural-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.natural-nav-btn{
  border:none;
  background:var(--accent-color);
  color:var(--bg-color);
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
  min-width:148px;
}
.natural-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
  flex:1;
}
#natural-page-label{font-weight:900;font-size:1rem}
#natural-page-detail{color:var(--muted);font-size:.8rem}

.natural-reader{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.natural-reader-shell{
  width:min(100%, 1100px);
  height:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
}
.natural-side-btn{
  width:48px;
  height:48px;
  border:none;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
  font-size:2rem;
  cursor:pointer;
}
.natural-stage{
  min-height:0;
  height:100%;
  position:relative;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,245,249,.94));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(2,6,23,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:18px;
}
.natural-epub-view,
.natural-pdf-canvas{
  width:100%;
  height:100%;
}
.natural-pdf-canvas{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 16px 40px rgba(15,23,42,.15);
}
.natural-epub-view iframe{
  background:#fffdf8;
}
.natural-empty{
  color:#334155;
  font-size:1rem;
  font-weight:700;
  text-align:center;
}
.natural-hit{
  position:absolute;
  border:none;
  background:transparent;
  color:transparent;
  padding:0;
  margin:0;
  z-index:2;
}
.natural-hit-top{
  top:0;
  left:0;
  right:0;
  height:19%;
}
.natural-hit-left{
  top:19%;
  left:0;
  bottom:0;
  width:34%;
}
.natural-hit-right{
  top:19%;
  right:0;
  bottom:0;
  width:34%;
}

/* Hint */
.keyboard-hint{text-align:center;font-size:.75rem;color:#64748b;padding:8px 10px;transition:opacity .5s}

/* Focus mode hides bars (but preview stays) */
.focus-mode .top-bar{opacity:0;transform:translateY(-16px);pointer-events:none}
.focus-mode .controls-panel{opacity:0;transform:translateY(16px);pointer-events:none}
.focus-mode .keyboard-hint{opacity:0}
.focus-mode .chapters-panel{opacity:0;pointer-events:none}
.focus-mode .preview-wrapper{opacity:1;transform:none;pointer-events:auto}

/* TTS mode */
#reader-screen.tts-mode #word-display{display:none}
#reader-screen.tts-mode .preview-wrapper{display:none}
#reader-screen.natural-mode .speed-control,
#reader-screen.natural-mode .playback-controls,
#reader-screen.natural-mode .timeline{display:none}
#reader-screen.natural-mode .keyboard-hint{display:none}
#reader-screen.natural-mode .reader-container{
  position:absolute;
  inset:0;
  padding:0;
  align-items:stretch;
  justify-content:stretch;
  z-index:1;
}
#reader-screen.natural-mode .natural-reader{
  width:100%;
  height:100%;
}
#reader-screen.natural-mode .natural-reader-shell{
  width:100%;
  height:100%;
  gap:0;
  grid-template-columns:minmax(0,1fr);
}
#reader-screen.natural-mode .natural-stage{
  height:100%;
  border-radius:0;
  padding:0;
  border:none;
  box-shadow:none;
  background:var(--reader-surface-bg);
}
#reader-screen.natural-mode .natural-epub-view,
#reader-screen.natural-mode .natural-pdf-canvas{
  width:100%;
  height:100%;
}
#reader-screen.natural-mode .natural-pdf-canvas{
  border-radius:0;
  box-shadow:none;
  object-position:center center;
}
#reader-screen.natural-mode .natural-side-btn{display:none}
#reader-screen.natural-mode .natural-empty{
  max-width:70%;
  margin:auto;
}
#reader-screen.natural-mode .natural-epub-view iframe{
  width:100% !important;
  height:100% !important;
}
#reader-screen.natural-mode .controls-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  max-width:none;
  margin:0;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  border-radius:0;
  background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.78) 30%,rgba(15,23,42,.96));
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .22s ease, transform .22s ease;
}
#reader-screen.natural-mode .controls-panel > *{
  pointer-events:auto;
}
#reader-screen.natural-mode .reading-mode-switch{
  max-width:720px;
  margin:0 auto;
}
#reader-screen.natural-mode .natural-controls{
  max-width:720px;
  margin:0 auto;
}
#reader-screen.natural-mode .top-bar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.72),rgba(15,23,42,0));
  z-index:3;
  opacity:0;
  transform:translateY(-14px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
#reader-screen.natural-mode .top-bar-actions{
  gap:4px;
}
#reader-screen.natural-mode .progress-info{
  padding:0 10px;
}
#reader-screen.natural-mode #book-title{
  max-width:min(720px,60vw);
}
#reader-screen.natural-mode .chapters-panel{z-index:4}
#reader-screen.natural-ui-visible .top-bar{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
#reader-screen.natural-ui-visible .controls-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:none;
}

.tts-status{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.55);
  color:#e2e8f0;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
  letter-spacing:.02em;
  text-align:center;
  min-width:220px;
  z-index:50;
}
.light-mode .tts-status{background:rgba(0,0,0,.08);color:#0f172a}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-content{background:var(--secondary-color);padding:28px;border-radius:20px;max-width:520px;width:100%;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.50)}
.light-mode .modal-content{background:#fff}
.modal-content h3{margin-bottom:12px;color:var(--accent-color)}
.modal-content p{font-size:.95rem;line-height:1.6;color:#cbd5e1;margin-bottom:18px}
.light-mode .modal-content p{color:#334155}
.close-modal{position:absolute;top:14px;right:14px;background:none;border:none;color:#64748b;cursor:pointer}

.setting-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,240px);gap:12px;align-items:center;margin-bottom:14px;padding:10px 0;border-top:1px solid rgba(51,65,85,.70)}
.light-mode .setting-item{border-top-color:rgba(15,23,42,.10)}
.modal-content .audio-select{
  width:100%;
  max-width:none;
}
.radio-group{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.radio-option{display:flex;align-items:center;gap:6px;font-size:.95rem;color:#e2e8f0}
.light-mode .radio-option{color:#0f172a}
.reader-setting-stack{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.reader-setting-stack input[type="range"]{
  width:100%;
  accent-color:var(--accent-color);
}
.reader-setting-stack small{
  color:var(--muted);
  font-weight:700;
}

/* Switch */
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#334155;transition:.25s;border-radius:24px}
.light-mode .slider{background:rgba(15,23,42,.18)}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.25s;border-radius:50%}
input:checked + .slider{background:var(--accent-color)}
input:checked + .slider:before{transform:translateX(20px)}

/* Loader */
#loader{position:fixed;inset:0;background:rgba(15,23,42,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1100}
.spinner{width:40px;height:40px;border:4px solid var(--secondary-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}
@keyframes spin{to{transform:rotate(360deg)}}





/* 1) Evita overflow horizontal do 100vw e libera scroll vertical quando precisar */
html, body {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;

  /* mantém seu safe-area */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-top: env(safe-area-inset-top, 0px);
}
.light-reader #reader-screen{
  background:#f8fafc;
}
.light-reader #reader-screen .top-bar{
  background:rgba(248,250,252,.92);
}
.light-reader #reader-screen .controls-panel{
  background:#e2e8f0;
}
.light-reader #reader-screen.natural-mode .top-bar{
  background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(248,250,252,.74),rgba(248,250,252,0));
}
.light-reader #reader-screen.natural-mode .controls-panel{
  background:linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.82) 30%,rgba(248,250,252,.96));
}
.light-reader #reader-screen.natural-mode .natural-stage{
  background:#ffffff;
}

/* 2) Grid com faixa central “encolhível” (sem isso, estoura em telas baixas) */
#reader-screen {
  min-height: 100dvh;
  height: auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

/* 3) Permite que a área do leitor e preview consigam encolher e rolar quando necessário */
.reader-container {
  min-height: 0;
}

.preview-text {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* 4) Evita estouro do word-display em telas bem estreitas */
#word-display {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.prefix,
.suffix {
  min-width: clamp(2.5ch, 6vw, 5.5ch);
}

/* 5) Top bar e controls mais “touch friendly” e sem estouro */
.top-bar-actions {
  min-width: 0;
}

.audio-select {
  max-width: min(520px, 60vw);
}

/* 6) Controles não podem “empurrar” além da tela */
.controls-panel {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

@media (max-height: 780px) {
    
  /* Top bar: 3 linhas (fechar+título / ações / percentual) */
  .top-bar{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "close title spacer"
      "actions actions actions"
      "percent percent percent";
    align-items:center;
    justify-content:stretch;
    gap:6px 10px;
    padding:8px 10px;
  }

  .top-bar::after{
    content:"";
    grid-area:spacer;
  }

  #close-reader{
    grid-area:close;
    justify-self:start;
  }

  .progress-info{display:contents}

  #book-title{
    grid-area:title;
    justify-self:center;
    max-width:100%;
    font-size:.78rem;
    line-height:1.1;
  }

  #read-percentage{
    grid-area:percent;
    justify-self:center;
    font-size:.85rem;
  }

  .top-bar-actions{
    grid-area:actions;
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:nowrap;
  }

  .audio-select{
    width:min(170px, 45vw);
    max-width:min(170px, 45vw);
    font-size:.75rem;
    padding:6px 8px;
  }

  .top-bar-actions .icon-btn{
    padding:6px;
  }

  .reader-container{
    justify-content:flex-start;   /* empurra o conteúdo pro lado esquerdo */
    padding-left: 16px;           /* dá uma folga da borda */
    padding-right: 12px;
  }
  .preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    font-size: .50rem;
    color: #cbd5e1;
}
  .mini-preview {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 9px 9px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 340px;
    margin: 1px; 
  }

   .preview-text{
    max-height: 70px;      /* limita a caixa */
    line-height: 1.35;     /* compacta as linhas */
    font-size: .7rem;      /* texto um pouco menor */
    /*overflow: hidden;      /* esconde o excesso */
  }

  .controls-panel {
    max-width: 1100px;
    margin: 1px;
    width: 358px;
  }
  .setting-item{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .reader-setting-stack{
    align-items:stretch;
  }
  .radio-group{
    justify-content:flex-start;
  }
  .reading-mode-switch{
    grid-template-columns:1fr;
  }
  .natural-controls{
    flex-direction:column;
  }
  .natural-nav-btn{
    width:100%;
    min-width:0;
  }
  #reader-screen.natural-mode .controls-panel{
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  }
  #reader-screen.natural-mode .reading-mode-switch{
    gap:6px;
  }
  #reader-screen.natural-mode .mode-btn{
    padding:8px 10px;
    font-size:.92rem;
  }
  #reader-screen.natural-mode .natural-stage{
    background:#fff;
  }
  #reader-screen.natural-mode .reader-container{
    padding:0 !important;
    justify-content:stretch !important;
  }
  .controls-panel {
    background: var(--secondary-color);
    border-radius: 26px 26px 0 0;
    flex-direction: column;
    z-index: 10;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
    transition: opacity .5s, transform .5s;
}
  #word-display{
    justify-content:flex-start;   /* alinha o “miolo” do word-display à esquerda */
    text-align:left;
  }

 
}

/* Landscape compact (ex: 740x360) */
@media (max-height: 420px) and (orientation: landscape) {
  #reader-screen{
    grid-template-columns: 1fr min(360px, 48vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top top"
      "reader preview"
      "reader controls";
  }

  .top-bar{grid-area:top}
  .reader-container{grid-area:reader}
  .preview-wrapper{grid-area:preview}
  .controls-panel{grid-area:controls}

  .keyboard-hint{display:none}

  /* Top bar: compact single row */
  .top-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 10px;
  }

  .top-bar::after{content:none}

  .progress-info{
    display:flex;
    flex:1;
    min-width:0;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  #book-title{
    max-width: min(420px, 46vw);
    font-size:.75rem;
  }

  #read-percentage{
    font-size:.8rem;
  }

  .top-bar-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
  }

  .audio-select{
    width:min(150px, 22vw);
    max-width:min(150px, 22vw);
    font-size:.72rem;
    padding:6px 8px;
  }

  .top-bar-actions .icon-btn{
    padding:6px;
  }

  .preview-wrapper{
    padding:8px 10px 6px;
    min-height:0;
  }

  .preview-text{
    max-height: 36vh;
  }

  .natural-reader-shell{
    grid-template-columns:minmax(0,1fr);
  }
  .natural-side-btn{
    display:none;
  }
  #reader-screen.natural-mode{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    grid-template-areas:"reader";
    overflow:hidden;
  }
  #reader-screen.natural-mode .reader-container{
    grid-area:reader;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    z-index:1;
  }
  #reader-screen.natural-mode .preview-wrapper{
    display:none !important;
  }
  #reader-screen.natural-mode .natural-reader,
  #reader-screen.natural-mode .natural-reader-shell,
  #reader-screen.natural-mode .natural-stage{
    width:100%;
    height:100%;
    min-height:100%;
  }
  #reader-screen.natural-mode .natural-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--reader-surface-bg);
  }
  #reader-screen.natural-mode .top-bar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:4;
    padding:8px 10px calc(6px + env(safe-area-inset-top,0px));
    background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(2,6,23,.74),rgba(2,6,23,0));
  }
  #reader-screen.natural-mode .controls-panel{
    display:none;
  }
  .light-reader #reader-screen.natural-mode .natural-stage{
    background:#f8fafc;
  }
  .light-reader #reader-screen.natural-mode .top-bar{
    background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(248,250,252,.74),rgba(248,250,252,0));
  }

  .controls-panel{
    padding:10px 10px 8px;
    border-radius:16px;
    margin:0 10px 10px;
    width:auto;
    max-width:none;
  }

  .main-play-btn{width:64px;height:64px}
  .step-btn{width:48px;height:48px}
  #wpm-value{font-size:1.7rem}
}