: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);
  --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);
}

*{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}

/* 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;
}

.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}

/* 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;

  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(--card);
  border:1px solid var(--card-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:#cbd5e1}
.light-mode .preview-header{color:#0f172a}
.preview-header small{font-weight:700;color:var(--muted)}
.preview-text{
  font-size:1rem;
  line-height:1.6;
  color:var(--text-color);
  max-height:clamp(96px,18vh,170px);
  overflow:auto;
  text-align:justify;
  letter-spacing:.01em;
  font-family:var(--serif);
}
.preview-text .preview-highlight{background:linear-gradient(120deg,rgba(251,121,97,.28),rgba(251,180,120,.32));color:#fff;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;
}

.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)}

/* 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 .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}

.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:420px;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:flex;justify-content:space-between;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)}
.radio-group{display:flex;gap:10px}
.radio-option{display:flex;align-items:center;gap:6px;font-size:.95rem;color:#e2e8f0}
.light-mode .radio-option{color:#0f172a}

/* 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);
}

/* 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;
  }
  .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;
  }

  .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}
}