/* Estudos da Palavra — cinema escuro: destaque no topo, fileiras por tema, ficha do estudo sobreposta */
:root{
  --ink:#0e1120; --panel:#171b2c; --panel-2:#21263b; --line:#2e3450;
  --fg:#ece5d6; --muted:#9a9cb1; --gold:#d6a84c; --gold-ink:#1c1405; --ok:#6fbf8e; --bad:#e08080;
  --display:"Marcellus", Georgia, serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.loading{display:grid;place-items:center;min-height:60vh;color:var(--muted)}

/* Botões e formulários */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:10px 18px;font-weight:600;font-size:15px;white-space:nowrap}
.btn-gold{background:var(--gold);color:var(--gold-ink)} .btn-gold:hover{background:#e2b75c}
.btn-ghost{background:rgba(255,255,255,.09);color:var(--fg)} .btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-sm{padding:6px 12px;font-size:13.5px;font-weight:500}
.btn-danger{background:rgba(224,128,128,.15);color:var(--bad)}
.btn[disabled]{opacity:.6;cursor:wait}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);min-width:0}
input.i,select.i,textarea.i{background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--fg);font:inherit;font-size:15px;padding:9px 11px;width:100%;min-width:0}
textarea.i{resize:vertical;min-height:70px;line-height:1.5}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--gold);outline:none}
.err{color:var(--bad);font-size:13.5px;min-height:1em}
.okmsg{color:var(--ok);font-size:13.5px}
.chk-line{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg)}

/* Login */
.auth{min-height:100vh;display:grid;place-items:center;padding-block:32px;background:
  radial-gradient(120% 80% at 80% 0%,#3a2c63 0%,transparent 55%),radial-gradient(90% 70% at 0% 100%,#1d2b4a 0%,transparent 60%),var(--ink)}
.auth-box{width:100%;max-width:400px;background:rgba(23,27,44,.92);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.auth h1{font-family:var(--display);font-weight:400;font-size:32px;margin:0;line-height:1.1}
.auth h1 b{color:var(--gold);font-weight:400}
.auth p{margin:0;color:var(--muted);font-size:14px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);border-radius:8px;padding:3px;gap:3px}
.seg button{border:0;background:none;padding:8px;border-radius:6px;color:var(--muted);font-size:14px}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--fg)}
.linkbtn{background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;padding:0;align-self:flex-start}

/* Topo */
.top{position:sticky;top:0;z-index:5;background:rgba(14,17,32,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:10px;padding-block:10px;max-width:1280px;margin:0 auto;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:20px;white-space:nowrap;background:none;border:0;padding:0}
.logo b{color:var(--gold);font-weight:400}
.tabs{display:flex;gap:2px;flex-wrap:wrap}
.tab{background:none;border:0;padding:6px 10px;border-radius:6px;color:var(--muted);font-size:14px;text-decoration:none}
.tab[aria-current="page"]{color:var(--fg);background:var(--panel-2)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.search{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:0 10px;min-width:0;width:220px}
.search input{background:none;border:0;color:var(--fg);font:inherit;font-size:14px;padding:7px 0;width:100%;min-width:0;outline:none}
.me{width:34px;height:34px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.menu{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;min-width:220px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.menu small{color:var(--muted)}
.spacer{flex:1}
@media (max-width:700px){.spacer{display:none}.me{order:1;margin-left:auto}.tabs{order:2;flex:1 1 100%;margin-left:-10px}.search{order:3;width:100%;flex:1 1 100%}.logo{font-size:18px}}

/* Destaque */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:
  radial-gradient(120% 90% at 85% 10%,#3a2c63 0%,transparent 55%),radial-gradient(90% 80% at 10% 100%,#1d2b4a 0%,transparent 60%),var(--ink)}
.hero .wrap{position:relative;max-width:1280px;margin:0 auto;padding-block:clamp(32px,6vw,72px) 32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,7vw,74px);line-height:1;margin:10px 0 8px;text-wrap:balance}
.hero .sub{font-size:clamp(16px,2vw,19px);opacity:.88;margin:0 0 14px;max-width:46ch}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin-bottom:20px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-cover{width:clamp(180px,24vw,300px);aspect-ratio:136/148;border-radius:6px;overflow:hidden;box-shadow:0 22px 40px -10px rgba(0,0,0,.7);transform:perspective(900px) rotateY(-10deg)}
.hero-cover img{width:100%;height:100%;object-fit:cover;display:block}
.hero .bar{margin-top:16px;max-width:340px}
@media (max-width:700px){.hero .wrap{grid-template-columns:1fr}.hero-cover{width:46%;max-width:200px;grid-row:1;transform:none}}

/* Aviso */
.notice{max-width:1280px;margin:20px auto 0}
.notice>div{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0;padding:12px 16px;display:flex;gap:12px;align-items:flex-start}
.notice b{display:block}
.notice p{margin:2px 0 0;color:var(--muted);font-size:14px;white-space:pre-line}

/* Fileiras */
main{max-width:1280px;margin:0 auto;padding-bottom:56px}
.row{margin-top:28px}
.row h2{font-weight:600;font-size:18px;margin:0 0 8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.row h2 small{font-weight:400;font-size:13px;color:var(--muted)}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 16px 2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.card{flex:0 0 clamp(150px,20vw,200px);scroll-snap-align:start;background:none;border:0;padding:0;text-align:left;perspective:900px}
.poster{position:relative;aspect-ratio:136/148;max-width:100%;border-radius:3px 8px 8px 3px;overflow:hidden;transform-origin:left center;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
  box-shadow:0 10px 18px -6px rgba(0,0,0,.7),0 2px 4px rgba(0,0,0,.5)}
.card:hover .poster,.card:focus-visible .poster{transform:rotateY(-16deg) translateY(-3px);box-shadow:18px 18px 26px -8px rgba(0,0,0,.75)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.poster::before{content:"";position:absolute;inset:0 auto 0 0;width:11px;z-index:2;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.22) 35%,rgba(0,0,0,.25) 60%,rgba(0,0,0,0))}
.poster::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 38%)}
.poster .fb{position:absolute;inset:0;padding:14px 12px 12px 18px;display:flex;flex-direction:column;justify-content:flex-end}
.poster .fb .sig{font-family:var(--display);font-size:46px;line-height:1;margin-bottom:auto}
.poster .fb .pt{font-family:var(--display);font-size:18px;line-height:1.15}
.card .cap{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--muted);margin-top:7px}
.card .ct{font-size:13.5px;margin-top:6px;line-height:1.3}
.mini{height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-top:6px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--gold)}
.empty{color:var(--muted);font-size:14px;padding:16px 0;max-width:60ch}
.bar{height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold);transition:width .3s}
.bar-lbl{font-size:12.5px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}

/* Ficha do estudo */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(5,6,12,.75);display:flex;justify-content:center;overflow-y:auto;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sheet-in{background:var(--panel);width:100%;max-width:840px;min-height:100%;position:relative}
@media (min-width:880px){.sheet{padding-block:40px}.sheet-in{min-height:0;border-radius:12px;overflow:hidden;align-self:flex-start}}
.close{position:absolute;top:12px;right:max(12px,env(safe-area-inset-right,0px));z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.5);display:grid;place-items:center}
.s-head{position:relative;padding-block:52px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.s-head h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,44px);line-height:1.05;margin:8px 0;text-wrap:balance}
.s-head p{margin:0 0 14px;max-width:60ch}
.s-cover{width:170px;aspect-ratio:136/148;border-radius:6px;overflow:hidden;box-shadow:0 16px 30px -10px rgba(0,0,0,.7)}
.s-cover img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:600px){.s-head{grid-template-columns:1fr}.s-cover{width:130px;grid-row:1}}
.s-body{padding-block:8px 40px}
.s-body h3{font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:22px 0 8px}
.aula{border-top:1px solid var(--line)}
.aula:last-child{border-bottom:1px solid var(--line)}
.a-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0}
.a-n{font-family:var(--display);font-size:22px;color:var(--muted);text-align:center}
.a-t{background:none;border:0;padding:0;text-align:left;min-width:0}
.a-t b{display:block;font-weight:600;font-size:15px}
.a-t span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.chk{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:none;display:grid;place-items:center;flex:none}
.chk[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:#0b1d12}
.aula.done .a-n{color:var(--ok)}
.a-body{padding:0 0 18px 46px;min-width:0}
.a-body p{margin:0 0 10px;max-width:62ch}
.verse{border-left:2px solid var(--gold);padding:4px 0 4px 14px;margin:0 0 12px}
.verse cite{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--gold);margin-bottom:2px}
.verse q{font-family:var(--display);font-size:17px}
.verse .obs{font-size:14px;color:var(--muted);margin-top:4px}
.note{background:var(--panel-2);border-radius:8px;padding:12px 14px;margin:0 0 10px;font-size:14px;white-space:pre-line}
.note b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:4px}
.note.live b{color:var(--gold)}
.mynote{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.mynote .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mynote .st{font-size:12.5px;color:var(--muted)}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:4px;background:var(--panel-2);color:var(--muted)}
.tag.ok{color:var(--ok)} .tag.off{color:var(--bad)}
@media (max-width:600px){.a-body{padding-left:0}}

/* Páginas internas (avisos, líder) */
.page{max-width:1080px;margin:0 auto;padding-block:24px 56px}
.page h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,38px);margin:0 0 4px}
.page .lead{color:var(--muted);margin:0 0 18px}
.subtabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line);overflow-x:auto}
.subtabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;color:var(--muted);white-space:nowrap}
.subtabs button[aria-pressed="true"]{color:var(--fg);border-bottom-color:var(--gold)}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.stack{display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.list-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.list-row .th{width:56px;aspect-ratio:136/148;border-radius:4px;overflow:hidden;background:var(--panel-2)}
.list-row .th img{width:100%;height:100%;object-fit:cover;display:block}
.list-row b{display:block}
.list-row small{color:var(--muted)}
.ed-aula{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--ink)}
.ed-aula .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ed-aula .hd b{font-family:var(--display);font-size:20px;margin-right:auto}
.ed-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.3fr) auto;gap:8px;align-items:start}
@media (max-width:700px){.ed-texto{grid-template-columns:1fr}}
.cover-ed{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cover-ed .th{width:110px;aspect-ratio:136/148;border-radius:6px;overflow:hidden;background:var(--panel-2);display:grid;place-items:center;color:var(--muted);font-size:12px}
.cover-ed .th img{width:100%;height:100%;object-fit:cover}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
table.t th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
table.t tr:last-child td{border-bottom:0}
table.t tr.click{cursor:pointer} table.t tr.click:hover td{background:rgba(255,255,255,.03)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi small{color:var(--muted);font-size:12.5px}
.kpi div{font-size:26px;font-family:var(--display);font-variant-numeric:tabular-nums}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.aviso-item{padding:14px 0;border-bottom:1px solid var(--line)}
.aviso-item b{font-size:16px}
.aviso-item p{margin:4px 0 0;white-space:pre-line}
.aviso-item small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--ink);padding:9px 16px;border-radius:8px;font-size:14px;font-weight:500;z-index:40;max-width:calc(100% - 32px)}
.setup{max-width:620px;margin:10vh auto;padding:24px}
.setup code{background:var(--panel-2);padding:2px 6px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
