/* AEDO · leitor.css — estrutura e comportamento do leitor (herdados do módulo
   "Leitura em Voz Alta" do Ágora Inteligência). A identidade visual fica em vidro.css. */
  /* ═══════════ AEDO · tokens (sistema nervoso) ═══════════
     Paleta "Eos": a aurora de dedos róseos que os aedos cantavam.
     Rosa-aurora → coral → âmbar sobre porcelana fria (claro) ou tinta-noite (escuro).
     Tudo o que varia com paleta/tema vive aqui; os componentes só leem var(). */
  :root{
    --brand-font:'Lexend';
    --ui-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',system-ui,sans-serif;
    --app-font:var(--ui-font);
    --read-font:'Plus Jakarta Sans';

    --ink:#1B1D3A;--muted:#5E6280;--line:rgba(27,29,58,.09);
    --accent:#CF3361;--accent2:#F27B52;--ic-to:#F59A4C;--ic-sh:rgba(207,51,97,.30);
    --accent-fill:#CF3361;--on-accent:#fff;

    /* vidro — --vidro (0 transparente … 1 tingido) vem do ajuste "Vidro" */
    --vidro:.55;
    --glass-bg:rgba(255,255,255,calc(.26 + var(--vidro) * .56));
    --glass-strong:rgba(250,250,253,calc(.62 + var(--vidro) * .34));
    --glass-blur:24px;
    --rim:rgba(255,255,255,.70);--spec:rgba(255,255,255,.95);
    --glass-shadow:0 18px 44px -14px rgba(27,29,58,.26),0 3px 10px rgba(27,29,58,.07);
    --fill:rgba(27,29,58,.065);--fill-hi:rgba(27,29,58,.11);
    --group-bg:rgba(255,255,255,.66);
    --thumb:rgba(255,255,255,.96);--thumb-sh:0 3px 10px rgba(27,29,58,.14),0 1px 2px rgba(27,29,58,.08);

    --card-bg:rgba(255,255,255,.62);--card-brd:rgba(255,255,255,.85);--card-brd2:rgba(27,29,58,.06);
    --card-shadow:0 14px 38px -10px rgba(27,29,58,.18),0 3px 9px rgba(27,29,58,.06);
    --card-shadow-hi:0 30px 70px -16px rgba(27,29,58,.32),0 8px 18px rgba(27,29,58,.1);
    --wm:.05;
    --glow1:rgba(226,61,109,.13);--glow2:rgba(247,166,74,.12);--glow3:rgba(80,86,200,.07);
    --bg1:var(--glow1);
    --bgbase:linear-gradient(172deg,#F5F5FA,#EEEFF6);
    --radius:26px;

    --sheet-bg:rgba(255,255,255,.9);
    /* realce da fala: semântico, não herda a paleta */
    --mark:#fde68a;--mark-edge:rgba(217,119,6,.85);--word:#fbbf24;--mark-ink:#1B1D3A;
    --hl:rgba(253,224,71,.45);--hl-brd:rgba(217,119,6,.55);
    --skipwash:rgba(94,98,128,.13);
    --bm:#0ea5a3;
    --fs:15.5px;
    --dockw:92px;
    --theater-bg:#0B0D1C;--theater-ink:#EEEDF7;
    --pdfpaper:#fff;
  }
  html[data-theme="dark"]{
    --ink:#EEEDF7;--muted:#A0A3BE;--line:rgba(255,255,255,.10);
    --accent:#F0527F;--accent2:#F7926A;--ic-to:#FAB35A;--ic-sh:rgba(240,82,127,.40);--accent-fill:#C93360;
    --glass-bg:rgba(34,36,66,calc(.26 + var(--vidro) * .5));
    --glass-strong:rgba(24,26,50,calc(.6 + var(--vidro) * .34));
    --rim:rgba(255,255,255,.13);--spec:rgba(255,255,255,.26);
    --glass-shadow:0 18px 44px -12px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.35);
    --fill:rgba(255,255,255,.075);--fill-hi:rgba(255,255,255,.13);
    --group-bg:rgba(255,255,255,.055);
    --thumb:rgba(255,255,255,.17);--thumb-sh:0 3px 10px rgba(0,0,0,.4);
    --card-bg:rgba(36,38,68,.55);--card-brd:rgba(255,255,255,.1);--card-brd2:rgba(255,255,255,.06);
    --card-shadow:0 16px 40px rgba(0,0,0,.5),0 3px 9px rgba(0,0,0,.4);
    --card-shadow-hi:0 30px 70px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.45);
    --wm:.07;
    --glow1:rgba(240,82,127,.16);--glow2:rgba(250,179,90,.08);--glow3:rgba(96,90,230,.16);
    --bgbase:linear-gradient(172deg,#0E1126,#080A18);
    --sheet-bg:rgba(24,26,50,.9);
    --mark:#7a4c0a;--mark-edge:rgba(245,158,11,.8);--word:#b45309;--mark-ink:#f8fafc;
    --hl:rgba(250,204,21,.34);--hl-brd:rgba(250,204,21,.5);
    --skipwash:rgba(2,6,23,.42);
    --bm:#2dd4bf;
    --theater-bg:#05060f;
  }

  /* paletas alternativas — Eos é o padrão (sem atributo). Cada uma redefine acento,
     brilhos e, quando faz parte do caráter dela, a tinta e o fundo. O realce de
     leitura nunca muda: é semântico. */
  html[data-palette="lapis"]{--accent-fill:#2747C9;--accent:#2747C9;--accent2:#3B82F0;--ic-to:#63C3F2;--ic-sh:rgba(39,71,201,.30);
    --ink:#121A3A;--muted:#58627F;--glow1:rgba(39,71,201,.12);--glow2:rgba(99,195,242,.13);--glow3:rgba(59,130,240,.07);
    --bgbase:linear-gradient(172deg,#F3F6FC,#EBF0F9)}
  html[data-theme="dark"][data-palette="lapis"]{--accent-fill:#3150D6;--accent:#7C95FF;--accent2:#6FB1FF;--ic-to:#8EDBFF;--ic-sh:rgba(124,149,255,.38);
    --ink:#EAF0FF;--muted:#9DA8C6;--glow1:rgba(49,80,214,.22);--glow2:rgba(142,219,255,.07);--glow3:rgba(59,130,240,.12);
    --bgbase:linear-gradient(172deg,#0A1128,#060B1A)}

  html[data-palette="vinho"]{--accent-fill:#7B1E4E;--accent:#8E2A60;--accent2:#5A3A88;--ic-to:#1F8A99;--ic-sh:rgba(123,30,78,.28);
    --ink:#1E1630;--muted:#635A72;--glow1:rgba(123,30,78,.11);--glow2:rgba(31,138,153,.11);--glow3:rgba(90,58,136,.08);
    --bgbase:linear-gradient(172deg,#F6F3F6,#EFEBF2)}
  html[data-theme="dark"][data-palette="vinho"]{--accent-fill:#8E2A60;--accent:#E07AB0;--accent2:#A592E6;--ic-to:#4FC3CF;--ic-sh:rgba(224,122,176,.34);
    --ink:#F2ECF5;--muted:#A99FB4;--glow1:rgba(142,42,96,.24);--glow2:rgba(79,195,207,.08);--glow3:rgba(90,58,136,.18);
    --bgbase:linear-gradient(172deg,#140D1E,#0A0712)}

  html[data-palette="atena"]{--accent-fill:#4D6B2A;--accent:#4D6B2A;--accent2:#7E9A3E;--ic-to:#B8C26A;--ic-sh:rgba(77,107,42,.28);
    --ink:#1A2116;--muted:#5E6656;--glow1:rgba(126,154,62,.13);--glow2:rgba(184,194,106,.14);--glow3:rgba(77,107,42,.06);
    --bgbase:linear-gradient(172deg,#F4F5EF,#ECEEE5)}
  html[data-theme="dark"][data-palette="atena"]{--accent-fill:#4F6E2B;--accent:#A9C46A;--accent2:#C6D78A;--ic-to:#E0E3A8;--ic-sh:rgba(169,196,106,.32);
    --ink:#EEF1E6;--muted:#A3AA97;--glow1:rgba(79,110,43,.24);--glow2:rgba(224,227,168,.06);--glow3:rgba(126,154,62,.10);
    --bgbase:linear-gradient(172deg,#10140C,#080A06)}

  html[data-palette^="nanquim"]{--accent-fill:#141518;--accent:#141518;--accent2:#4A4D57;--ic-to:#8A8E99;--ic-sh:rgba(0,0,0,.22);
    --ink:#141518;--muted:#62656E;--line:rgba(0,0,0,.09);--fill:rgba(0,0,0,.055);--fill-hi:rgba(0,0,0,.10);
    --glow1:rgba(0,0,0,.035);--glow2:rgba(0,0,0,.025);--glow3:rgba(0,0,0,.02);
    --bgbase:linear-gradient(172deg,#F7F7F7,#EEEEEE);
    --mk1:#141518;--mk2:#3A3C44;--mk3:#6B6E78}
  html[data-theme="dark"][data-palette^="nanquim"]{--accent-fill:#F4F4F5;--on-accent:#141518;--accent:#F4F4F5;--accent2:#B9BBC2;--ic-to:#7D808A;--ic-sh:rgba(255,255,255,.12);
    --ink:#F4F4F5;--muted:#9C9EA6;--line:rgba(255,255,255,.10);--fill:rgba(255,255,255,.07);--fill-hi:rgba(255,255,255,.13);
    --glow1:rgba(255,255,255,.035);--glow2:rgba(255,255,255,.02);--glow3:rgba(255,255,255,.02);
    --bgbase:linear-gradient(172deg,#0C0C0D,#050506);
    --mk1:#F4F4F5;--mk2:#C9CBD1;--mk3:#9A9DA6;
    --glass-bg:rgba(40,40,44,calc(.26 + var(--vidro) * .5));--glass-strong:rgba(26,26,29,calc(.6 + var(--vidro) * .34));
    --card-bg:rgba(40,40,44,.55);--sheet-bg:rgba(23,23,26,.92);--theater-bg:#050506}

  /* Nanquim com toque: a base continua preto e branco; uma única cor ("pop")
     entra só onde há ação ou leitura — play, interruptores, progresso, tempo
     restante, ícone ativo e a coluna central da marca. É o "tint" do iOS. */
  html[data-palette="nanquim-ambar"]{--pop:#F5A524;--on-pop:#141518;--accent:#9A5A00;--accent2:#F5A524;--ic-to:#FFC861;--ic-sh:rgba(245,165,36,.35);
    --glow1:rgba(245,165,36,.07);--glow2:rgba(0,0,0,.02)}
  html[data-theme="dark"][data-palette="nanquim-ambar"]{--pop:#FFB23E;--on-pop:#141518;--accent:#FFB23E;--accent2:#FFC861;--ic-to:#FFD98C;--ic-sh:rgba(255,178,62,.3);
    --glow1:rgba(255,178,62,.07)}
  /* Nanquim azul — a identidade do Aedo ("Bloco branco"): nanquim, branco e o azul
     do realce. O botão de play é o próprio bloco do ícone: nanquim no claro,
     branco no escuro, com o play no azul do realce. O fundo escuro tem o mesmo
     brilho azul nascendo de baixo que o ícone. */
  html[data-palette="nanquim-tinta"]{--pop:#5B7CFF;--on-pop:#fff;--accent:#3A58E0;--accent2:#5B7CFF;--ic-to:#B4C3FF;--ic-sh:rgba(20,22,29,.28);
    --pop-bg1:#2A2E3C;--pop-bg2:#14161D;--pop-fg:#A9B9FF;--pop-rim:rgba(255,255,255,.06);--pop-glow:rgba(125,150,255,.55);
    --ink:#14161D;--muted:#5F636E;--mk1:#14161D;--accent-fill:#14161D;
    --glow1:rgba(91,124,255,.05);--glow2:rgba(180,195,255,.07);--glow3:rgba(91,124,255,.09);--bgbase:linear-gradient(180deg,#F6F7F9,#ECEEF2)}
  html[data-theme="dark"][data-palette="nanquim-tinta"]{--pop:#6F8BFF;--on-pop:#fff;--accent:#A9B9FF;--accent2:#7D96FF;--ic-to:#B4C3FF;--ic-sh:rgba(43,79,224,.4);
    --pop-bg1:#FFFFFF;--pop-bg2:#E9ECF4;--pop-fg:#4C6CF5;--pop-rim:rgba(255,255,255,.4);--pop-glow:rgba(91,124,255,.45);
    --ink:#F2F3F6;--mk1:#F2F3F6;--accent-fill:#F2F3F6;--on-accent:#14161D;
    --glow1:rgba(91,124,255,.06);--glow2:rgba(180,195,255,.03);--glow3:rgba(43,79,224,.26);--bgbase:linear-gradient(180deg,#171A23,#0B0C10)}
  html[data-palette="nanquim-aurora"]{--pop:#E2456B;--on-pop:#fff;--accent:#C9325A;--accent2:#E2456B;--ic-to:#F28AA2;--ic-sh:rgba(226,69,107,.32);
    --glow1:rgba(226,69,107,.06)}
  html[data-theme="dark"][data-palette="nanquim-aurora"]{--pop:#E2456B;--on-pop:#fff;--accent:#FF7A98;--accent2:#FF9AB1;--ic-to:#FFC0CE;--ic-sh:rgba(255,122,152,.32);
    --glow1:rgba(226,69,107,.09)}

  html[data-palette="egeu"]{--accent-fill:#0F7C99;--accent:#0F7C99;--accent2:#2FB3C9;--ic-to:#5CCFD8;--ic-sh:rgba(15,124,153,.30);
    --glow1:rgba(15,124,153,.12);--glow2:rgba(92,207,216,.12)}
  html[data-theme="dark"][data-palette="egeu"]{--accent-fill:#0E7591;--accent:#3DB8D2;--accent2:#6FD6E3;--ic-to:#9BE6EC;--ic-sh:rgba(61,184,210,.4);
    --glow1:rgba(61,184,210,.14);--glow2:rgba(155,230,236,.06)}

  :root{--mk-col:color-mix(in srgb,var(--mk1,var(--accent)) 18%,transparent)}
  @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  *{box-sizing:border-box}
  body{
    margin:0;min-height:100vh;color:var(--ink);
    font-family:var(--app-font);
    font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;
    background:
      radial-gradient(44rem 36rem at 4% 2%,var(--glow1),transparent 62%),
      radial-gradient(40rem 34rem at 104% 26%,var(--glow2),transparent 62%),
      radial-gradient(46rem 40rem at 50% 118%,var(--glow3),transparent 64%),
      var(--bgbase);
    background-attachment:fixed;
  }
  svg{display:block}
  button,select,input,textarea{font-family:inherit;color:inherit}
  button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
    outline:2px solid var(--accent2);outline-offset:2px}


  /* ═══════════ barra de comando ═══════════ */
  .bar{
    position:sticky;top:0;z-index:40;
    background:var(--card-bg);
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    border-bottom:1px solid var(--line);
  }
  .bar-in{
    max-width:1180px;margin:0 auto;
    padding:10px clamp(12px,2vw,26px);
    display:flex;align-items:center;gap:6px 9px;flex-wrap:wrap;
  }
  .bar-brand{display:flex;align-items:center;gap:9px;margin-right:auto}
  .bar-brand svg{width:26px;height:28px;flex:none;filter:drop-shadow(0 4px 10px var(--ic-sh))}
  .bar-brand b{
    font-family:var(--brand-font),var(--ui-font);font-weight:500;
    letter-spacing:.09em;text-transform:uppercase;font-size:12px;color:var(--muted);white-space:nowrap;
  }
  .grp{display:flex;align-items:center;gap:5px}
  .grp.tools{margin-left:auto}

  button.icon{
    cursor:pointer;border:1px solid var(--line);background:var(--card-bg);color:var(--ink);
    border-radius:12px;padding:9px;display:inline-flex;align-items:center;justify-content:center;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    transition:border-color .15s,color .15s,background .15s;
  }
  button.icon:hover{border-color:var(--accent2)}
  button.icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  button.icon svg.fill{fill:currentColor;stroke:none;opacity:1}
  button.icon.sm{padding:8px}
  button.icon.sm svg{width:14px;height:14px}
  button.icon.txt{font-size:12px;font-weight:700;min-width:34px;line-height:1}

  button.primary{
    cursor:pointer;border:0;border-radius:12px;padding:9px 15px;
    font-size:12px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--ic-to));
    box-shadow:0 8px 20px var(--ic-sh);
    transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
  }
  button.primary:hover{transform:translateY(-1px);box-shadow:var(--card-shadow-hi)}
  button.accent{
    cursor:pointer;border:0;border-radius:12px;
    width:40px;height:38px;display:inline-flex;align-items:center;justify-content:center;
    color:#fff;background:linear-gradient(135deg,var(--accent),var(--ic-to));
    box-shadow:0 8px 20px var(--ic-sh);
    transition:transform .18s cubic-bezier(.2,.8,.2,1);
  }
  button.accent:hover{transform:translateY(-1px)}
  button.accent svg{width:15px;height:15px;fill:currentColor;stroke:none}
  button[disabled]{opacity:.4;cursor:default;transform:none!important}

  /* alternância PDF ↔ texto */
  .seg{display:flex;gap:3px;background:var(--card-bg);border:1px solid var(--line);border-radius:12px;padding:3px;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}
  .seg button{
    cursor:pointer;border:0;background:none;color:var(--muted);
    border-radius:8px;padding:6px 11px;font-size:11.5px;font-weight:700;line-height:1;
    display:inline-flex;align-items:center;gap:5px;transition:background .18s,color .18s;
  }
  .seg button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .seg button[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--ic-to));color:#fff;box-shadow:0 4px 12px var(--ic-sh)}
  .seg button[disabled]{opacity:.38;cursor:default}

  .lbl{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  select.sel{
    cursor:pointer;border:1px solid var(--line);background:var(--card-bg);color:var(--ink);
    border-radius:8px;padding:7px 26px 7px 9px;font-size:12px;font-weight:600;max-width:9.6rem;
    appearance:none;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
    background-position:calc(100% - 15px) 53%,calc(100% - 10px) 53%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  }
  input[type=range]{-webkit-appearance:none;appearance:none;height:18px;width:82px;background:transparent;cursor:pointer}
  input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:var(--line)}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--ic-to));margin-top:-5px;box-shadow:0 2px 6px var(--ic-sh)}
  input[type=range]::-moz-range-track{height:4px;border-radius:8px;background:var(--line)}
  input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--accent)}
  button.num{
    font-size:11.5px;font-weight:700;color:var(--ink);min-width:46px;
    font-variant-numeric:tabular-nums;cursor:pointer;
    border:1px solid var(--line);background:var(--card-bg);border-radius:8px;padding:6px 4px;line-height:1;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  }
  button.num:hover{border-color:var(--accent2);color:var(--accent)}
  .ratepair{display:flex;align-items:center;gap:5px}
  .ratepair input[type=range]{width:70px}

  .rail{position:sticky;top:var(--railtop,0);z-index:39;height:2.5px;background:var(--line)}
  .rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease}

  /* ═══════════ conteúdo ═══════════ */
  .wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:10px clamp(12px,2vw,26px) 64px}
  /* A faixa de ritmo vive na barra, ocupando a folga da segunda fileira: é ali
     que o olho já está quando procura em que frase a leitura vai. */
  .strip{
    display:flex;align-items:center;gap:6px 16px;flex:1 1 16rem;min-width:0;flex-wrap:wrap;
    padding:2px 4px;
  }
  .strip span{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .strip #msg{flex:1;min-width:0}
  .strip #pos,.strip #eta{font-variant-numeric:tabular-nums;flex:none}
  .strip #eta{color:var(--accent);opacity:.9}
  html[data-info="off"] .strip{display:none}

  .lockup{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:clamp(14px,3vw,30px) 0 6px;text-align:center;
    animation:riseIn .6s .06s cubic-bezier(.22,1,.36,1) both;
  }
  .lk-txt{display:flex;flex-direction:column;align-items:center;gap:7px}
  .brand-nm{
    margin:0;font-family:var(--brand-font),sans-serif;font-weight:500;
    letter-spacing:.09em;text-transform:uppercase;font-size:clamp(15px,2.2vw,20px);line-height:1.2;
    background:linear-gradient(115deg,var(--accent),var(--accent2),#0a5ea0);
    background-size:220% 220%;animation:gradShift 14s ease infinite;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  }
  .subh2{
    font-family:var(--brand-font),sans-serif;
    font-size:clamp(9px,1vw,10.5px);color:var(--muted);font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  }
  .divider{width:30px;height:1.5px;border-radius:99px;margin:4px auto 0;background:linear-gradient(90deg,var(--accent),var(--accent2));opacity:.55}
  .docchip{
    display:inline-flex;align-items:center;gap:7px;margin-top:14px;max-width:100%;
    background:var(--card-bg);border:1px solid var(--line);border-radius:8px;padding:5px 11px;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    font-size:11.5px;font-weight:600;color:var(--muted);
  }
  .docchip i{width:6px;height:6px;border-radius:50%;background:var(--bm);flex:none}
  .docchip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ── modo texto ── */
  .sheet{
    position:relative;overflow:hidden;margin-top:22px;
    background:var(--sheet-bg);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    border:1px solid var(--card-brd);outline:1px solid var(--card-brd2);outline-offset:-1px;
    border-radius:var(--radius);box-shadow:var(--card-shadow);
    padding:clamp(24px,3.4vw,44px) clamp(16px,3vw,40px) clamp(28px,4vw,48px);
    display:grid;grid-template-columns:5.6rem minmax(0,1fr);column-gap:20px;row-gap:15px;align-items:baseline;
    max-width:54rem;margin-left:auto;margin-right:auto;
  }
  .sheet::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
  .sheet[hidden],.pdfview[hidden]{display:none!important}

  .marker{font-size:10.5px;font-weight:600;color:var(--muted);text-align:right;padding-top:.45em;white-space:nowrap;opacity:.8}
  .marker.m-art{color:var(--accent);opacity:1}
  .marker .chip{
    display:inline-block;border-radius:8px;padding:2px 7px;
    font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
    color:var(--muted);background:var(--line);
  }
  .par{
    grid-column:2;margin:0;font-size:var(--fs);line-height:1.68;
    text-align:justify;hyphens:none;max-width:40rem;
  }
  .par.inciso{padding-left:1.5rem}
  .par.quote{padding-left:1.5rem;border-left:2px solid var(--line);font-size:calc(var(--fs) * .94);color:var(--muted)}
  .par.table,.par.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(var(--fs) * .84);text-align:left}
  .par.header,.par.footer,.par.footnote{font-size:calc(var(--fs) * .84);color:var(--muted);text-align:left}
  .par.off{opacity:.4}
  .pgbreak{grid-column:1/-1;display:flex;align-items:center;gap:11px;margin:14px 0 2px}
  .pgbreak::after{content:"";flex:1;height:1px;background:var(--line)}
  .pgbreak b{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);opacity:.8}

  .s{cursor:pointer;border-radius:8px;transition:background .12s ease}
  .s:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .s.active{background:var(--mark);color:var(--mark-ink);box-shadow:0 1.5px 0 var(--mark-edge)}
  .s.active:hover{background:var(--mark)}
  .w.now{background:var(--word);border-radius:8px}
  .s.bm{box-shadow:inset 2.5px 0 0 var(--bm)}

  .helper{grid-column:1/-1;border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
  .helper h3{margin:0 0 10px;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
  .keys{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
  .keys li{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
  kbd{font-family:inherit;font-size:10.5px;font-weight:700;border:1px solid var(--line);
    border-radius:8px;padding:2px 6px;background:var(--card-bg);color:var(--ink)}
  .paste{grid-column:1/-1;margin-top:16px}
  .paste summary{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;width:fit-content}
  .paste textarea{
    width:100%;margin-top:10px;min-height:7rem;resize:vertical;font-size:13px;line-height:1.55;
    border:1px solid var(--line);border-radius:12px;padding:11px;background:var(--card-bg);color:var(--ink);
  }
  .note{
    grid-column:1/-1;border-radius:8px;padding:11px 13px;font-size:12px;line-height:1.6;
    color:var(--ink);background:color-mix(in srgb,var(--accent) 9%,transparent);
    border-left:2.5px solid var(--accent);
  }

  /* ── modo PDF ── */
  .pdfview{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:22px}
  .pdfpage{
    position:relative;border-radius:6px;overflow:hidden;background:#fff;
    box-shadow:var(--card-shadow);outline:1px solid var(--card-brd2);outline-offset:-1px;
    max-width:100%;
  }
  .pdfpage canvas{display:block;width:100%;height:auto}
  .pdfpage .ovl{position:absolute;inset:0;cursor:pointer}
  .pdfpage .fl{
    position:absolute;top:8px;right:10px;z-index:3;
    background:var(--card-bg);border:1px solid var(--line);border-radius:8px;padding:2px 8px;
    font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;
  }
  .pdfpage .ph{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
    background:repeating-linear-gradient(135deg,rgba(91,102,117,.05) 0 10px,transparent 10px 20px);
  }
  .hl{position:absolute;background:var(--hl);border-radius:3px;box-shadow:0 1.5px 0 var(--hl-brd);pointer-events:none;z-index:2}
  .hl.wordhl{background:var(--word);border-radius:4px;box-shadow:none;z-index:3}

  /* bloquinho que desliza sobre a palavra falada */
  .track{
    position:absolute;pointer-events:none;z-index:4;border-radius:5px;
    background:var(--track-bg);
    box-shadow:0 0 0 1.5px var(--track-brd),0 6px 14px -8px rgba(15,23,42,.55);
    opacity:0;
  }
  .track.on{opacity:1}
  .track.anim{
    transition:left .13s cubic-bezier(.22,1,.36,1),top .16s cubic-bezier(.22,1,.36,1),
               width .13s cubic-bezier(.22,1,.36,1),height .13s,opacity .18s;
  }
  html:not([data-theme="dark"]) .sheet .track{mix-blend-mode:multiply}
  html[data-theme="dark"] .sheet .track{mix-blend-mode:screen}
  html:not([data-pdfnight="on"]) .pdfpage .hl,
  html:not([data-pdfnight="on"]) .pdfpage .track{mix-blend-mode:multiply}
  html[data-pdfnight="on"] .pdfpage .hl,
  html[data-pdfnight="on"] .pdfpage .track{mix-blend-mode:screen}
  .skipbox{position:absolute;background:var(--skipwash);border-radius:6px;pointer-events:none;z-index:1}
  .skiptag{
    position:absolute;z-index:2;pointer-events:none;transform:translateY(-50%);
    background:var(--card-bg);border:1px solid var(--line);border-radius:8px;padding:1px 6px;
    font-size:8.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;
  }
  .bmflag{position:absolute;width:3px;border-radius:2px;background:var(--bm);pointer-events:none;z-index:2}
  .pdfempty{
    text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7;
    border:1px dashed var(--line);border-radius:var(--radius);padding:34px 20px;max-width:32rem;
  }

  /* ═══════════ painel ═══════════ */
  .scrim{position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.32);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  .scrim.open{opacity:1;pointer-events:auto}
  .panel{
    position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(27rem,100%);
    display:flex;flex-direction:column;
    -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
    border-left:1px solid var(--card-brd);box-shadow:var(--card-shadow-hi);
    transform:translateX(102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
    background:rgba(255,255,255,.9);
  }
  html[data-theme="dark"] .panel{background:rgba(18,24,37,.9)}
  .panel.open{transform:none}
  .panel-head{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);flex:none}
  .panel-head h2{margin:0;margin-right:auto;font-size:15px;font-weight:800;letter-spacing:-.01em}
  .panel-body{overflow-y:auto;padding:18px 18px 48px;display:flex;flex-direction:column;gap:26px}

  .sect > h3{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:-.01em}
  .sect > p.sub{margin:0 0 12px;font-size:11.5px;color:var(--muted);line-height:1.6}
  .rows{display:flex;flex-direction:column}
  .srow{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:13px;
    padding:11px 0;border-top:1px solid var(--line)}
  .srow:first-child{border-top:0}
  .srow .ic{color:var(--muted);display:flex;align-items:center;justify-content:center}
  .srow .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .srow .ic svg.ms{width:19px;height:19px;fill:currentColor;stroke:none}
  .srow[hidden]{display:none}
  .srow .ic b{font-size:12px;font-weight:700}
  .srow .tx b{display:block;font-size:12.5px;font-weight:600}
  .srow .tx small{display:block;font-size:10.5px;color:var(--muted);margin-top:1px}

  .sw{position:relative;width:42px;height:24px;border-radius:8px;flex:none;border:1px solid var(--line);
    background:var(--line);cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:6px;
    background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.35);transition:transform .2s cubic-bezier(.22,1,.36,1)}
  .sw[aria-checked="true"]{background:linear-gradient(135deg,var(--accent),var(--ic-to));border-color:transparent}
  .sw[aria-checked="true"]::after{transform:translateX(18px)}

  .palbar{display:flex;gap:8px}
  .palopt{
    flex:1;cursor:pointer;border:1.5px solid var(--line);border-radius:12px;padding:9px;
    background:transparent;color:var(--ink);display:flex;align-items:center;gap:8px;
    font-size:11.5px;font-weight:700;transition:border-color .15s,box-shadow .15s;
  }
  .palopt:hover{border-color:var(--accent2)}
  .palopt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .palsw{width:16px;height:16px;border-radius:8px;flex:none;box-shadow:0 1px 3px rgba(0,0,0,.2)}

  .fontgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fontopt{
    display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 11px;
    border:1.5px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);
    cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;
  }
  .fontopt:hover{border-color:var(--accent2)}
  .fontopt.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .fontopt .prev{font-size:19px;font-weight:700;line-height:1.05}
  .fontopt .nm{font-size:10px;font-weight:600;color:var(--muted)}

  .stats{
    border:1px solid var(--card-brd);outline:1px solid var(--card-brd2);outline-offset:-1px;
    border-radius:var(--radius);padding:15px 16px;position:relative;overflow:hidden;
    background:var(--card-bg);box-shadow:var(--card-shadow);
  }
  .stats::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
  .stats .big{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
  .stats .cap{font-size:11px;color:var(--muted);margin-top:5px}
  .bars{display:flex;align-items:flex-end;gap:5px;height:42px;margin-top:14px}
  .bars div{flex:1;min-width:0;border-radius:8px 8px 3px 3px;min-height:4px;background:var(--line)}
  .bars div.has{background:linear-gradient(180deg,var(--accent2),var(--accent))}
  .bars div.today{background:linear-gradient(180deg,var(--accent),var(--ic-to))}
  .barlab{display:flex;gap:5px;margin-top:5px}
  .barlab span{flex:1;text-align:center;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}

  .bmlist{display:flex;flex-direction:column;gap:6px}
  .bmitem{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;
    padding:8px 10px;background:var(--card-bg)}
  .bmitem .go{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;
    font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bmitem .go:hover{color:var(--accent)}
  .bmitem .del{background:none;border:0;cursor:pointer;color:var(--muted);padding:2px;line-height:0}
  .bmitem .del:hover{color:#ef4444}
  .bmitem .del svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .empty{font-size:11.5px;color:var(--muted)}
  .hlpick{display:flex;gap:5px}
  .hlbtn{
    width:22px;height:22px;padding:0;cursor:pointer;border-radius:8px;
    border:2px solid transparent;box-shadow:0 1px 3px rgba(15,23,42,.25);
    transition:transform .15s,border-color .15s;
  }
  .hlbtn:hover{transform:scale(1.08)}
  .hlbtn.sel{border-color:var(--ink)}
  .dockpick{display:flex;gap:5px}
  .dockbtn{
    width:28px;height:28px;padding:0;cursor:pointer;background:transparent;
    border:1.5px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;
    transition:border-color .15s,box-shadow .15s;
  }
  .dockbtn:hover{border-color:var(--accent2)}
  .dockbtn.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .dockmini{position:relative;width:16px;height:16px;border-radius:3px;background:var(--line);display:block}
  .dockmini::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
  .dockmini.d-top::after{left:0;right:0;top:0;height:4px}
  .dockmini.d-bottom::after{left:0;right:0;bottom:0;height:4px}
  .dockmini.d-left::after{top:0;bottom:0;left:0;width:4px}
  .dockmini.d-right::after{top:0;bottom:0;right:0;width:4px}
  .warn{
    border-radius:8px;padding:10px 12px;font-size:11.5px;line-height:1.6;
    background:color-mix(in srgb,#f59e0b 14%,transparent);
    border-left:2.5px solid #f59e0b;color:var(--ink);
  }

  .drop{
    position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--ink) 18%,transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .drop.on{display:flex}
  .drop b{
    background:var(--card-bg);border:1px solid var(--card-brd);border-radius:var(--radius);
    padding:20px 30px;font-size:15px;font-weight:700;color:var(--ink);box-shadow:var(--card-shadow-hi);
    -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  }


  /* ═══════════ recorte da área de leitura ═══════════ */
  .maskchip{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;cursor:pointer;
    background:var(--card-bg);border:1px solid var(--line);border-radius:8px;padding:4px 10px;
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);
    transition:border-color .15s;
  }
  .maskchip:hover{border-color:var(--accent2)}
  .maskchip[hidden]{display:none}
  .maskchip svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

  .cropframe{position:absolute;pointer-events:none;z-index:1;border:1.5px dashed var(--accent);border-radius:3px}
  .cropwash{position:absolute;pointer-events:none;z-index:1;background:var(--skipwash);opacity:.55}
  html[data-cropview="marcar"] .s.sout{opacity:.42}
  html[data-cropview="cortar"] .par.maskoff,
  html[data-cropview="cortar"] .marker.maskoff{display:none}
  html[data-cropview="cortar"] .s.sout{display:none}

  .cropview{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
  .cropview .lbl{padding-top:9px;flex:none}
  .viewseg{display:flex;gap:6px;flex:1;min-width:14rem}
  .viewseg button{
    flex:1;min-width:0;cursor:pointer;background:transparent;color:var(--ink);
    border:1.5px solid var(--line);border-radius:12px;padding:8px 9px;
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    font-size:11.5px;font-weight:700;text-align:left;
    transition:border-color .15s,box-shadow .15s;
  }
  .viewseg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .viewseg button small{font-weight:400;font-size:10px;color:var(--muted);line-height:1.35}
  .viewseg button:hover{border-color:var(--accent2)}
  .viewseg button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

  .cropmodal{
    position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
    padding:16px;background:rgba(15,23,42,.42);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .cropmodal[hidden]{display:none}
  .cropbox{
    width:min(46rem,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;
    background:var(--card-bg);border:1px solid var(--card-brd);outline:1px solid var(--card-brd2);outline-offset:-1px;
    border-radius:var(--radius);box-shadow:var(--card-shadow-hi);overflow:hidden;position:relative;
    -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
  }
  html:not([data-theme="dark"]) .cropbox{background:rgba(255,255,255,.94)}
  html[data-theme="dark"] .cropbox{background:rgba(18,24,37,.94)}
  .cropbox::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent)}
  .crophead{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
  .crophead h2{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin-right:auto}
  /* o X fica sempre no canto, mesmo quando o título quebra a linha no celular */
  .crophead{position:relative;padding-right:54px}
  .crophead #cropclose{position:absolute;right:10px;top:10px}
  .cropbody{padding:14px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
  .crophint{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0}
  .cropstage{
    position:relative;align-self:center;max-width:100%;flex:none;
    background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
    touch-action:none;cursor:crosshair;box-shadow:var(--card-shadow);
  }
  html[data-pdfnight="on"] .cropstage canvas{filter:invert(1) hue-rotate(180deg)}
  .cropstage canvas{display:block;width:100%;height:auto}
  .cropovl{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none}
  .cropdim{position:absolute;background:rgba(15,23,42,.45);pointer-events:none}
  .croprect{
    position:absolute;border:1.5px solid var(--accent);cursor:move;
    box-shadow:0 0 0 1px rgba(255,255,255,.65) inset;
  }
  .crophandle{
    position:absolute;width:12px;height:12px;background:var(--card-bg);
    border:1.5px solid var(--accent);border-radius:3px;
  }
  .crophandle.ch-nw{left:-7px;top:-7px;cursor:nwse-resize}
  .crophandle.ch-ne{right:-7px;top:-7px;cursor:nesw-resize}
  .crophandle.ch-sw{left:-7px;bottom:-7px;cursor:nesw-resize}
  .crophandle.ch-se{right:-7px;bottom:-7px;cursor:nwse-resize}
  .crophandle.ch-n{left:50%;top:-7px;margin-left:-6px;cursor:ns-resize}
  .crophandle.ch-s{left:50%;bottom:-7px;margin-left:-6px;cursor:ns-resize}
  .crophandle.ch-w{left:-7px;top:50%;margin-top:-6px;cursor:ew-resize}
  .crophandle.ch-e{right:-7px;top:50%;margin-top:-6px;cursor:ew-resize}
  /* no toque, alças maiores e mais visíveis (a área sensível é ainda maior, no JS) */
  @media (pointer:coarse){
    .crophandle{width:18px;height:18px;border-radius:50%;border-width:2px}
    .crophandle.ch-nw{left:-10px;top:-10px}.crophandle.ch-ne{right:-10px;top:-10px}
    .crophandle.ch-sw{left:-10px;bottom:-10px}.crophandle.ch-se{right:-10px;bottom:-10px}
    .crophandle.ch-n{top:-10px;margin-left:-9px}.crophandle.ch-s{bottom:-10px;margin-left:-9px}
    .crophandle.ch-w{left:-10px;margin-top:-9px}.crophandle.ch-e{right:-10px;margin-top:-9px}
  }
  .cropinfo{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .cropinfo b{color:var(--ink);font-weight:700}
  .croplib{display:flex;flex-direction:column;gap:6px}
  .croplib h4{margin:0;font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
  .maskitem{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:7px 9px;background:var(--card-bg)}
  .maskitem.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
  .maskitem .use{flex:1;min-width:0;background:none;border:0;padding:0;text-align:left;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink)}
  .maskitem .use small{display:block;font-weight:400;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
  .maskitem .use:hover{color:var(--accent)}
  .maskitem .del{background:none;border:0;cursor:pointer;color:var(--muted);padding:2px;line-height:0}
  .maskitem .del:hover{color:#ef4444}
  .maskitem .del svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
  .cropfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);flex:none}
  .cropfoot input{
    flex:1;min-width:9rem;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
    font-size:12px;background:var(--card-bg);color:var(--ink);
  }
  .cropfoot .spacer{flex:1}

  /* ═══════════ doca dos controles ═══════════ */
  html[data-dock="bottom"] .bar{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    border-bottom:0;border-top:1px solid var(--line);
    box-shadow:0 -8px 26px -18px rgba(15,23,42,.5);
  }
  html[data-dock="bottom"] body{padding-bottom:86px}

  html[data-dock="left"] .bar,html[data-dock="right"] .bar{
    position:fixed;top:0;bottom:0;width:var(--dockw);height:100%;
    border-bottom:0;
  }
  html[data-dock="left"] .bar{left:0;border-right:1px solid var(--line)}
  html[data-dock="right"] .bar{right:0;border-left:1px solid var(--line)}
  html[data-dock="left"] body{padding-left:var(--dockw)}
  html[data-dock="right"] body{padding-right:var(--dockw)}
  html[data-dock="left"] .bar-in,html[data-dock="right"] .bar-in{
    max-width:none;height:100%;overflow-y:auto;overflow-x:hidden;
    flex-direction:column;align-items:center;justify-content:flex-start;
    padding:12px 8px;gap:10px;flex-wrap:nowrap;
  }
  html[data-dock="left"] .bar-brand,html[data-dock="right"] .bar-brand{margin-right:0;width:auto}
  html[data-dock="left"] .bar-brand b,html[data-dock="right"] .bar-brand b{display:none}
  html[data-dock="left"] .grp,html[data-dock="right"] .grp{flex-direction:column}
  html[data-dock="left"] .grp.tools,html[data-dock="right"] .grp.tools{margin-left:0;margin-top:auto}
  html[data-dock="left"] .seg,html[data-dock="right"] .seg{flex-direction:column;width:100%}
  html[data-dock="left"] .seg button,html[data-dock="right"] .seg button{justify-content:center;padding:6px 4px;font-size:10px}
  html[data-dock="left"] .grp.voice,html[data-dock="right"] .grp.voice,
  html[data-dock="left"] .grp.rate,html[data-dock="right"] .grp.rate,
  html[data-dock="left"] .strip,html[data-dock="right"] .strip,
  html[data-dock="left"] #jump,html[data-dock="right"] #jump{display:none}
  html[data-dock="left"] #open,html[data-dock="right"] #open{padding:9px 8px;font-size:10.5px;width:100%}
  /* a trilha de progresso acompanha a doca */
  html[data-dock="bottom"] .rail,html[data-dock="left"] .rail,html[data-dock="right"] .rail{top:0}

  /* ═══════════ modo teatro ═══════════ */
  html[data-theater="on"] body{background:var(--theater-bg);color:var(--theater-ink)}
  html[data-theater="on"] .watermark,
  html[data-theater="on"] .lockup,
  html[data-theater="on"] .strip,
  html[data-theater="on"] .bar-brand,
  html[data-theater="on"] .seg,
  html[data-theater="on"] .grp.voice,
  html[data-theater="on"] .grp.rate,
  html[data-theater="on"] #jump,
  html[data-theater="on"] #open{display:none}
  html[data-theater="on"] .strip{flex:0 1 auto;justify-content:center}
  html[data-theater="on"] .strip #msg{display:none}
  html[data-theater="on"] .bar{background:rgba(12,17,24,.72);border-color:rgba(255,255,255,.08)}
  html[data-theater="on"] .bar-in{justify-content:center;padding:8px 12px}
  html[data-theater="on"] .grp.tools{margin-left:0}
  html[data-theater="on"] button.icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--theater-ink)}
  html[data-theater="on"] .wrap{max-width:none;padding-top:4px}
  html[data-theater="on"] .sheet{max-width:62rem}
  html[data-theater="on"] .pdfview{gap:14px;margin-top:10px}
  html[data-theater="on"] .rail{background:rgba(255,255,255,.12)}
  html[data-theater="on"][data-dock="left"] .grp.tools,
  html[data-theater="on"][data-dock="right"] .grp.tools{margin-top:auto}

  /* ═══════════ folha do PDF no escuro ═══════════ */
  .pdfpage{background:var(--pdfpaper)}
  html[data-pdfnight="on"] .pdfpage{background:#0e1116}
  html[data-pdfnight="on"] .pdfpage canvas{filter:invert(1) hue-rotate(180deg)}
  html[data-pdfnight="on"] .pdfpage .ph{color:#8b949e}

  /* ═══════════ modo livro: folhas lado a lado ═══════════ */
  html[data-book="on"] .lockup{display:none}
  html[data-book="on"] .wrap{padding-top:2px;padding-bottom:10px;max-width:none}
  .pdfview.book{
    flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;
    gap:clamp(8px,1.4vw,18px);position:relative;overflow:hidden;
    min-height:var(--bookh,70vh);margin-top:10px;
  }
  .pdfview.book .pdfpage{display:none;flex:none}
  .pdfview.book .pdfpage.spread{display:block}
  /* avançando, a folha nova entra pela direita; voltando, pela esquerda */
  .pdfview.book .pdfpage.spread{animation:folhaEntra .34s cubic-bezier(.22,1,.36,1) both}
  .pdfview.book.voltando .pdfpage.spread{animation-name:folhaEntraEsq}
  @keyframes folhaEntra{from{opacity:.35;transform:translateX(14px)}to{opacity:1;transform:none}}
  @keyframes folhaEntraEsq{from{opacity:.35;transform:translateX(-14px)}to{opacity:1;transform:none}}

  /* a lâmina de vidro que atravessa a área na virada */
  .turn{
    position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;
    /* sombra, brilho especular, sombra: sobre papel branco o vidro só se lê
       assim — um gradiente todo claro seria invisível na própria folha */
    background:linear-gradient(100deg,
      transparent 0%,rgba(15,23,42,.045) 26%,rgba(15,23,42,.10) 40%,
      rgba(255,255,255,.92) 49%,rgba(15,23,42,.06) 60%,
      rgba(15,23,42,.02) 72%,transparent 88%);
    -webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
    border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.28);
  }
  html[data-theme="dark"] .turn{
    background:linear-gradient(100deg,
      transparent 0%,rgba(180,214,255,.06) 30%,rgba(180,214,255,.30) 47%,
      rgba(180,214,255,.12) 58%,transparent 88%);
    border-left-color:rgba(180,214,255,.32);border-right-color:rgba(180,214,255,.16);
  }
  /* O nome agora é o SENTIDO DA VARREDURA, não o da navegação — era essa
     confusão que deixava a animação ao contrário. Num livro de verdade, ao
     AVANÇAR a folha da direita levanta e cruza para a esquerda; ao VOLTAR, a
     folha da esquerda cruza para a direita. */
  .turn.varre-esq{animation:lamina-esq .56s cubic-bezier(.36,0,.2,1)}
  .turn.varre-dir{animation:lamina-dir .56s cubic-bezier(.36,0,.2,1)}
  @keyframes lamina-esq{
    0%{opacity:0;transform:translateX(118%) skewX(7deg)}
    16%{opacity:1}
    84%{opacity:1}
    100%{opacity:0;transform:translateX(-118%) skewX(7deg)}
  }
  @keyframes lamina-dir{
    0%{opacity:0;transform:translateX(-118%) skewX(-7deg)}
    16%{opacity:1}
    84%{opacity:1}
    100%{opacity:0;transform:translateX(118%) skewX(-7deg)}
  }

  .booknav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:13;
    width:40px;height:56px;border-radius:12px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--card-brd);background:var(--card-bg);color:var(--ink);
    -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
    box-shadow:var(--card-shadow);opacity:.55;transition:opacity .18s,border-color .15s;
  }
  .booknav:hover{opacity:1;border-color:var(--accent2)}
  .booknav[hidden]{display:none}
  .booknav.prev{left:2px}
  .booknav.next{right:2px}
  .booknav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .bookpos{
    position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:13;
    font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
    background:var(--card-bg);border:1px solid var(--line);border-radius:8px;padding:2px 10px;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none;
  }
  .bookpos[hidden]{display:none}

  @media (max-width:860px){
    .sheet{grid-template-columns:minmax(0,1fr)}
    .marker{display:none}
    .par{grid-column:1;max-width:none;text-align:left}
    .bar-brand{width:100%;margin-right:0}
    .transport{margin-right:auto}
    select.sel{max-width:8rem}
    .grp.tools{flex-wrap:wrap;justify-content:flex-end}
  }
  /* chips e campo de texto dos perfis */
  .sect .chip{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--muted);
    font:inherit;font-size:11px;font-weight:700;padding:6px 11px;border-radius:8px;flex:none;
    transition:color .15s,border-color .15s,background .15s}
  .sect .chip:hover{color:var(--ink);border-color:var(--accent2)}
  .sect .chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--ic-to))}
  .sect .chip.on:hover{filter:brightness(1.06)}
  .sect .txtin{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;
    background:rgba(255,255,255,.4);color:var(--ink);font:inherit;font-size:12.5px;outline:none}
  html[data-theme="dark"] .sect .txtin{background:rgba(255,255,255,.05)}
  .sect .txtin:focus{border-color:var(--accent2)}
  .sect .txtin::placeholder{color:var(--muted);opacity:.75}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  }