/* ═══════════ v28 · STUDIUM EDIÇÃO — a identidade editorial ═══════════

   Só aparência, por cima de todas as camadas anteriores. Nenhuma regra aqui
   muda o que um botão faz, para onde uma tela leva ou o que fica visível.

   A ideia: o Studium deixa de parecer um painel e passa a parecer uma
   publicação. Papel quente e tinta; a serifa conduz a leitura, a letra de
   interface fica pequena e discreta; fios finos no lugar de caixas; um só
   acento, o índigo profundo da marca, usado com parcimônia.

   "A interface deve desaparecer para o conteúdo aparecer."               */

/* ── 1. papel e tinta ────────────────────────────────────────────────── */

html[data-tema="claro"],:root{
 --bg:#f4f0e7;            /* papel */
 --s1:#faf7f1;            /* folha levantada */
 --s2:#efeadf;
 --s3:#e6e0d3;
 --s4:#d8d0c0;
 --ln:rgba(40,33,22,.10);
 --ln2:rgba(40,33,22,.17);
 --ln3:rgba(40,33,22,.30);
 --tx:#1c1a16;            /* tinta */
 --t2:#5d574d;
 --t3:#8f877a;
 --ac:#3d3aa6;            /* índigo profundo, o único acento */
 --acT:#34318f;
 --acS:rgba(61,58,166,.075);
 --vd:#2f6b4f; --vdS:rgba(47,107,79,.09);
 --vm:#9b3b22;
 --sh1:0 1px 1px rgba(40,33,22,.04);
 --sh2:0 1px 2px rgba(40,33,22,.05),0 10px 30px rgba(40,33,22,.07);
 --sh3:0 30px 80px rgba(40,33,22,.16),0 2px 10px rgba(40,33,22,.06);
 --shCapa:0 1px 1px rgba(40,33,22,.08),0 3px 6px rgba(40,33,22,.06),0 14px 28px rgba(40,33,22,.10);
 --fd:'Newsreader',Georgia,'Times New Roman',serif;
 --ft:'Newsreader',Georgia,serif;
 --fs:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
 --ezE:cubic-bezier(.2,.8,.2,1);
}
html[data-tema="escuro"]{
 --bg:#100f0d; --s1:#181714; --s2:#1f1e1a; --s3:#292722; --s4:#35322c;
 --ln:rgba(236,228,212,.085); --ln2:rgba(236,228,212,.15); --ln3:rgba(236,228,212,.26);
 --tx:#ece7dc; --t2:#a8a092; --t3:#776f63;
 --ac:#a9a7f4; --acT:#b7b5f7; --acS:rgba(169,167,244,.10);
 --vd:#86c6a2; --vdS:rgba(134,198,162,.11); --vm:#e08e70;
 --sh1:0 1px 1px rgba(0,0,0,.4);
 --sh2:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.4);
 --sh3:0 30px 80px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.45);
 --shCapa:0 1px 1px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.35),0 16px 32px rgba(0,0,0,.4);
}
html,body{background:var(--bg)}
body{font:400 15px/1.62 var(--fs);color:var(--tx);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
 font-feature-settings:"kern","liga","calt"}

/* ── 2. tipografia ───────────────────────────────────────────────────── */

h1,.hero h1,.library-header h1,.dsp{font-family:var(--fd);font-weight:400;letter-spacing:-.032em;
 line-height:1.04;font-variant-numeric:oldstyle-nums;text-wrap:balance}
.hero h1,.library-header h1,h1{font-size:54px}
h2{font-family:var(--fd);font-weight:450;font-size:26px;letter-spacing:-.025em;line-height:1.18}
h3{font-size:15.5px;font-weight:600;letter-spacing:-.012em}
/* sobretítulo: a linha de data de um jornal — versalete fino com um fio antes */
.eyebrow,.hero .dt{display:flex;align-items:center;gap:12px;font:600 10.5px/1.3 var(--fs);letter-spacing:.2em;
 text-transform:uppercase;color:var(--t3)}
.hero .eyebrow::before,.library-header .eyebrow::before{content:"";width:22px;height:1px;background:var(--ln3);flex:none}
/* o subtítulo é o "olho" da matéria: serifa, itálico, cor de grafite */
.hero .sub{font-family:var(--fd);font-style:italic;font-size:20px;line-height:1.5;color:var(--t2);
 letter-spacing:-.008em;margin-top:18px;max-width:40ch}
.mut{color:var(--t2)}
.mut2{color:var(--t3)}
a{text-underline-offset:.2em}

/* ── 3. o grão da página ─────────────────────────────────────────────── */

.wrap{max-width:740px;padding:0 32px}
.wrapW{max-width:1200px;padding:0 40px}
.hero{padding:88px 0 38px;border-bottom:1px solid var(--ln);margin-bottom:8px}
.library-header{padding:88px 0 34px;margin:0 0 30px;border-bottom:1px solid var(--ln);align-items:flex-end}
.library-header h1{margin-top:16px}
/* Ajustes abre direto nos cartões: ganha o mesmo título das outras telas */
#v-ajustes .wrap{padding-top:88px!important}
#v-ajustes .wrap::before{content:"Ajustes";display:block;font:400 54px/1.04 var(--fd);letter-spacing:-.032em;
 color:var(--tx);padding-bottom:38px;margin-bottom:8px}
#v-ajustes .wrap>.card:first-child{border-top:1px solid var(--ln)}

/* troca de tela: um fade curto, que não atrasa ninguém */
@keyframes v28-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vw.on{animation:v28-entra .32s var(--ezE) both}

/* ── 4. a lateral: um sumário, não um painel ─────────────────────────── */

#side{width:256px;background:var(--bg);border-right:1px solid var(--ln);padding:34px 22px 28px}
#side .brand{padding:0 10px 40px;gap:12px}
#side .brand b{font-family:var(--fd);font-size:26px;font-weight:450;letter-spacing:-.03em;font-style:italic}
#side .glyph{width:28px;height:28px;border-radius:8px;box-shadow:none}
#side .sec{font-size:9.5px;letter-spacing:.22em;color:var(--t3);padding:0 10px 12px}
#side a{gap:12px;padding:8px 10px;margin:1px 0;min-height:38px;border-radius:9px;font-size:14px;font-weight:450;
 color:var(--t2);background:none;transition:color .18s var(--ezE),background .18s var(--ezE)}
#side a svg{width:16px;height:16px;stroke-width:1.5;opacity:.55;transition:opacity .18s}
#side a:hover{background:color-mix(in srgb,var(--tx) 4%,transparent);color:var(--tx)}
#side a:hover svg{opacity:.85}
#side a.on{background:none;color:var(--tx);font-weight:600}
#side a.on svg{opacity:1;color:var(--ac)}
#side a.on::before{content:"";position:absolute;left:-22px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--ac)}
#side .cnt{background:none;color:var(--t3);font:500 12px/1 var(--fd);font-style:italic;padding:0;min-width:0}
#side a.on .cnt{background:none;color:var(--ac)}

/* ── 5. barra de cima e navegação de baixo (celular) ─────────────────── */

#top.scr{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(22px) saturate(1.5);
 -webkit-backdrop-filter:blur(22px) saturate(1.5);border-bottom:1px solid var(--ln)}
.ttl{font-family:var(--fd);font-size:19px;font-weight:450;letter-spacing:-.02em}
.icb{color:var(--t2)}
.icb svg{stroke-width:1.5}

#nav{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(24px) saturate(1.6);
 -webkit-backdrop-filter:blur(24px) saturate(1.6);border-top:1px solid var(--ln)}
#nav button{font-size:10px;font-weight:500;letter-spacing:.02em;color:var(--t3);transition:color .18s}
#nav button svg{width:22px;height:22px;stroke-width:1.45}
#nav button.on{color:var(--tx);font-weight:600}
#nav button.on::before{background:none}
#nav button.on svg{color:var(--ac)}

/* ── 6. controles: pílulas de tinta, fios, sublinhados ───────────────── */

.btn{height:42px;padding:0 22px;border-radius:999px;font:500 14px/1 var(--fs);letter-spacing:-.003em;
 background:var(--tx);color:var(--bg);box-shadow:none;border:1px solid var(--tx);
 transition:transform .14s var(--ezE),background .18s,color .18s,border-color .18s,opacity .18s}
.btn:hover{box-shadow:none;background:color-mix(in srgb,var(--tx) 86%,var(--bg))}
.btn:active{transform:scale(.975)}
.btn.gh{background:transparent;color:var(--tx);border:1px solid var(--ln2)}
.btn.gh:hover{background:color-mix(in srgb,var(--tx) 4%,transparent);border-color:var(--ln3)}
.btn.sm{height:36px;padding:0 17px;font-size:13px;border-radius:999px}
.btn.danger,.btn .danger{color:var(--vm)}
.text-button{font:500 13.5px/1.4 var(--fs);color:var(--t2);text-decoration:underline;text-decoration-color:var(--ln3);
 text-underline-offset:.28em;transition:color .18s,text-decoration-color .18s}
.text-button:hover{color:var(--tx);text-decoration-color:currentColor}

/* abas de coleção: como as seções de uma revista — texto, e um fio sob a ativa */
.collection-tabs{gap:6px 26px;padding-bottom:0;border-bottom:1px solid var(--ln);margin-bottom:26px}
.chip{height:40px;padding:0;border:0;border-radius:0;background:none;color:var(--t3);font:500 13.5px/1 var(--fs);
 letter-spacing:-.003em;box-shadow:inset 0 0 0 transparent;transition:color .18s,box-shadow .2s var(--ezE)}
.chip:hover{background:none;color:var(--tx);border:0}
.chip.on{background:none;color:var(--tx);font-weight:600;box-shadow:inset 0 -1.5px 0 var(--tx);border:0}
/* dentro de grupos pequenos (grade/lista, favoritos) as abas ficam lado a lado sem fio de base */
.ordem-modo-v24{gap:18px}
.ordem-modo-v24 .chip{height:32px;padding:0;font-size:13px}

/* campos: sublinhado de caderno, sem caixa */
input[type=text],input[type=number],input[type=search],input[type=time],input[type=date],input[type=email],input[type=url],select,
.library-filters select,.path-filters select,.path-filters input,.field input,.field select{
 background-color:transparent;border:0;border-bottom:1px solid var(--ln2);border-radius:0;box-shadow:none;
 padding-left:0;color:var(--tx);font-size:15px;transition:border-color .18s}
select,.library-filters select,.path-filters select,.field select{height:44px;padding:0 26px 0 0;background-position:right 2px center}
input[type=text],input[type=number],input[type=search],input[type=time],input[type=date],.path-filters input,.field input{height:44px}
input:focus,select:focus,.library-filters select:focus,.path-filters input:focus{border-color:var(--tx);box-shadow:none;outline:none}
textarea{background:var(--s1);border:1px solid var(--ln2);border-radius:14px;box-shadow:none}
textarea:focus{border-color:var(--ln3);box-shadow:0 0 0 3px var(--acS)}
label.fl,.field .fl,.library-filters label,.path-filters label{font:600 10px/1.3 var(--fs);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.library-filters,.path-filters{gap:18px 28px}
/* a busca principal da página: uma pílula leve */
.srch{height:48px;border-radius:999px;padding:0 20px;background:var(--s1);border:1px solid var(--ln);box-shadow:none;margin-bottom:26px}
.srch:focus-within{border-color:var(--ln3);box-shadow:0 0 0 4px var(--acS)}
.srch input,.srch input:focus{border:0;height:100%;font-size:15px}
.direction-button{height:40px;border:1px solid var(--ln2);border-radius:999px;background:none;padding:0 18px}

.sw{background:var(--s4)}
.sw.on{background:var(--ac)}

/* ── 7. superfícies: fios em vez de caixas ───────────────────────────── */

.card{background:transparent;border:0;border-top:1px solid var(--ln);border-radius:0;box-shadow:none;padding:30px 0;margin:0}
.card+.card{margin-top:0}
.card .eyebrow{margin-bottom:12px}
.card h3{font-family:var(--fd);font-size:21px;font-weight:450;letter-spacing:-.02em;line-height:1.3}
.tile{background:var(--s1);border:1px solid var(--ln);border-radius:16px;box-shadow:none}
.exp{background:transparent;border:0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);border-radius:0;margin:26px 0}
.exp+.exp{border-top:0;margin-top:-26px}
.exp>summary{padding:18px 0;font:500 14px/1.4 var(--fs);color:var(--t2)}
.exp>summary:hover{color:var(--tx)}
.exp .in{padding:0 0 22px;font-size:14.5px}
.empty{padding:84px 24px}
.empty b{font-family:var(--fd);font-size:24px;font-weight:400;font-style:italic;color:var(--t2);letter-spacing:-.015em}

.scrim{background:rgba(28,24,18,.34);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}
html[data-tema="escuro"] .scrim{background:rgba(0,0,0,.55)}
.sheet{background:var(--s1);border:1px solid var(--ln);box-shadow:var(--sh3);border-radius:28px 28px 0 0}
.sheet .grab{background:var(--ln3);width:40px;height:4px;border-radius:4px}
.sheet .sh b{font-family:var(--fd);font-size:24px;font-weight:450;letter-spacing:-.025em}
.sheet .sc{padding:0 28px 32px}
.sheet .sh{padding:10px 28px 16px}
@media(min-width:860px){.sheet{width:600px;border-radius:28px}.sheet .sh{padding-top:26px}}
.toast{background:var(--tx);color:var(--bg);border-radius:999px;padding:12px 20px;font:500 13.5px/1.35 var(--fs);box-shadow:var(--sh3)}

.rowb{padding:17px 0;border-color:var(--ln)}
.pill{border-radius:999px;background:transparent;border:1px solid var(--ln2);color:var(--t2)}

/* ── 8. Hoje: um sumário do dia ──────────────────────────────────────── */

#v-hoje .hero{border-bottom:0;padding-bottom:22px}
#v-hoje .hero h1{font-size:60px}
.daily-line{margin-top:34px;height:1px;background:var(--ln2)}
.daily-line i{height:1px;background:var(--tx)}
.today-list{border-top:0}
.today-step{gap:28px;padding-block:36px;border-bottom:1px solid var(--ln);align-items:flex-start}
.step-number{min-width:0;width:auto;height:auto;border:0;border-radius:0;background:none!important;
 font:italic 400 34px/1 var(--fd);color:var(--t3);font-variant-numeric:oldstyle-nums;margin-top:0;min-width:26px}
.complete .step-number,.today-step.complete .step-number{color:var(--vd);border:0}
.step-body h3{font-family:var(--fd);font-weight:450;font-size:27px;line-height:1.2;letter-spacing:-.024em}
.step-body>p{font-family:var(--fd);font-size:17px;line-height:1.55;color:var(--t2);margin-top:8px}
.step-progress{font:600 10.5px/1.4 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-top:14px}
.reading-switch{background:transparent;border:1px solid var(--ln);border-radius:16px;padding:16px 18px;box-shadow:none;margin-top:22px}
.reading-switch b{font-size:13.5px;font-weight:600}
.reading-switch input:checked{background:var(--ac);border-color:var(--ac)}
.session-actions{gap:12px;margin-top:24px}
.quiet-actions{padding-top:34px;gap:14px}
.today-footer{border-top:0;padding-top:10px;margin-top:22px}
.marco-v24{border-left:1px solid var(--ac);background:none;border-radius:0;padding:4px 0 4px 18px;
 font-family:var(--fd);font-style:italic;font-size:16px;color:var(--t2)}

/* ── 9. Biblioteca: capas em estante ─────────────────────────────────── */

.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:48px 30px;padding:10px 0 72px}
.bk .tt{font-size:16px;font-weight:450;line-height:1.28;margin-top:16px}
.bk .au{font:500 10.5px/1.45 var(--fs);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-top:6px}
.book-domain{font-size:9.5px;letter-spacing:.14em;margin-top:6px}
.bkc.v7-cover{border-radius:3px 7px 7px 3px;border:0;box-shadow:var(--shCapa);transition:transform .45s var(--ezE),box-shadow .45s var(--ezE)}
.bk:hover .bkc.v7-cover{transform:translateY(-6px) rotate(-.35deg);box-shadow:0 2px 3px rgba(40,33,22,.08),0 22px 44px rgba(40,33,22,.18)}
.cover-generated{background:linear-gradient(170deg,color-mix(in srgb,var(--domain) 11%,#fdfbf6) 0%,#fdfbf6 64%)}
html[data-tema="escuro"] .cover-generated{background:linear-gradient(170deg,color-mix(in srgb,var(--domain) 18%,#1d1c19) 0%,#1b1a17 64%)}
.library-count{border-bottom:0;margin:34px 0 22px;font:600 10.5px/1 var(--fs);letter-spacing:.18em;color:var(--t3)}
.library-actions .btn{height:38px}

/* ── 10. listas: linhas de índice ────────────────────────────────────── */

.model-row,.order-row{padding:19px 2px;border-bottom:1px solid var(--ln)}
.model-row b,.order-row b{font-family:var(--fd);font-size:19px;font-weight:450;letter-spacing:-.018em;line-height:1.3}
.model-row small,.order-row small{font-size:12px;color:var(--t3);margin-top:4px}
.model-row:hover,.order-row:hover{background:none}
.model-row:hover b,.order-row:hover b{color:var(--acT)}
.model-row>span:last-child,.order-row>span:last-child{color:var(--t3);transition:transform .2s var(--ezE)}
.model-row:hover>span:last-child,.order-row:hover>span:last-child{transform:translateX(3px);color:var(--tx)}
.order-row>span:first-child{font:italic 400 18px/1 var(--fd);color:var(--t3)}
.record-card{background:transparent;border:0;border-bottom:1px solid var(--ln);border-radius:0;padding:20px 0;margin:0}

/* Como usar: o índice de perguntas */
.faq-item summary{font-size:20px;padding:22px 0}

/* Idiomas: os passos do dia */
.language-steps{margin-top:0}
.language-step{align-items:flex-start!important}
.language-step{background:transparent!important;border:0!important;border-bottom:1px solid var(--ln)!important;border-radius:0!important;
 box-shadow:none!important;padding:22px 2px!important;margin:0!important}
.language-step b{font-size:20px}
.language-step>span:first-child{border:0!important;background:none!important;font:italic 400 26px/1 var(--fd)!important;color:var(--t3)!important;width:auto!important;min-width:26px}
.language-step[disabled]{opacity:.5}

/* ── 11. Meu progresso: números de manchete ──────────────────────────── */

.kpi{gap:0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);margin:10px 0 30px}
.kpi .k{background:transparent;border:0;border-radius:0;box-shadow:none;padding:26px 22px 24px 0}
.kpi .k+.k{border-left:1px solid var(--ln);padding-left:22px}
.kpi .k b{font-family:var(--fd);font-size:52px;font-weight:350;letter-spacing:-.04em;line-height:1}
.kpi .k span{font:600 9.5px/1.45 var(--fs);letter-spacing:.16em;margin-top:12px;color:var(--t3)}

/* ── 12. a ficha da obra ─────────────────────────────────────────────── */

.work-sheet .work-heading h2{font-size:30px;font-weight:400}
.work-sheet .work-heading .mut{font-family:var(--fd);font-style:italic;font-size:17px}
.classic-note{border-left:1px solid var(--ac);font-size:17px;line-height:1.7}
.file-actions{border-top:1px solid var(--ln)}

/* ── 13. telas estreitas ─────────────────────────────────────────────── */

@media(max-width:959px){
 .wrap,.wrapW{padding:0 22px}
 .hero{padding:34px 0 26px}
 #v-ajustes .wrap{padding-top:34px!important}
 #v-ajustes .wrap::before{font-size:40px;padding-bottom:26px}
 .library-header{padding:34px 0 24px;margin-bottom:22px}
 .hero h1,h1,.library-header h1{font-size:40px}
 #v-hoje .hero h1{font-size:42px}
 .hero .sub{font-size:18px}
 .card{padding:24px 0;border-radius:0}
 .grid{gap:34px 18px}
 .bk .tt{font-size:14.5px}
 .today-step{gap:18px;padding-block:28px}
 .step-number{font-size:28px;min-width:20px}
 .step-body h3{font-size:22px}
 .step-body>p{font-size:16px}
 .kpi .k{padding:20px 12px 18px 0}
 .kpi .k+.k{padding-left:12px}
 .kpi .k b{font-size:38px}
 .collection-tabs{gap:4px 20px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .collection-tabs::-webkit-scrollbar{display:none}
 .collection-tabs .chip{flex:none}
 .sheet .sc,.sheet .sh{padding-left:22px;padding-right:22px}
}
@media(max-width:420px){
 .hero h1,h1,.library-header h1{font-size:36px}
 #v-hoje .hero h1{font-size:38px}
 .kpi .k b{font-size:32px}
}

/* ── 14. busca no documento (EPUB e PDF) ─────────────────────────────── */

.busca-status-v28{font:600 10.5px/1.4 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin:6px 0 4px}
.busca-item-v28{display:flex;flex-direction:column;gap:6px;cursor:pointer;border-bottom:1px solid var(--ln);transition:background .16s}
.busca-item-v28:hover .tx{color:var(--tx)}
.busca-item-v28 .pg{font:italic 400 14px/1 var(--fd);color:var(--acT)}
.busca-item-v28 .tx{font-family:var(--fd);font-size:15.5px;line-height:1.55;color:var(--t2)}
.busca-item-v28 mark,#bres mark{background:var(--acS);color:var(--tx);border-radius:3px;padding:0 1px;box-shadow:inset 0 -1.5px 0 var(--ac)}
.busca-marca-v28{position:absolute;z-index:6;pointer-events:none;border-radius:3px;
 background:color-mix(in srgb,var(--pgac,#4c4fd8) 22%,transparent);mix-blend-mode:multiply;
 box-shadow:0 0 0 2px color-mix(in srgb,var(--pgac,#4c4fd8) 35%,transparent);animation:v28-realce .5s var(--ezE) both;transition:opacity .8s}
#lr[data-pg="cinza"] .busca-marca-v28,#lr[data-pg="preto"] .busca-marca-v28{mix-blend-mode:screen}
.busca-marca-v28.sai{opacity:0}
@keyframes v28-realce{0%{transform:scale(1.25);opacity:0}100%{transform:none;opacity:1}}

@media (prefers-reduced-motion:reduce){
 .vw.on{animation:none}
 .busca-marca-v28{animation:none}
 .bk:hover .bkc.v7-cover{transform:none}
}