:root{
  --bg:#0b0b0d; --bg2:#141417; --card:#17171b; --line:#26262c;
  --txt:#ececf0; --mut:#9a9aa6; --ouro:#e8b765; --ouro2:#c9963f; --ok:#4ade80; --erro:#f87171;
  --vermelho:#d62a3d; --vermelho2:#a81d2c;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.15; margin:0 0 .4em}

/* topbar */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; background:rgba(11,11,13,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.brand{font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; color:var(--ouro)}
.topnav{display:flex; gap:1.1rem; font-size:.9rem; align-items:center}
.topnav a{color:var(--mut)} .topnav a:hover{color:var(--txt)}
.topnav .sair{color:var(--ouro)}

.wrap{width:100%; max-width:1040px; margin:0 auto; padding:1.1rem; flex:1}

/* flash */
.flash{padding:.7rem 1rem; border-radius:12px; margin-bottom:1rem; font-size:.92rem; border:1px solid var(--line)}
.flash.ok{background:rgba(74,222,128,.08); border-color:rgba(74,222,128,.3); color:var(--ok)}
.flash.erro{background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.3); color:var(--erro)}

/* botões */
.btn-ouro{display:inline-block; background:linear-gradient(135deg,var(--ouro),var(--ouro2));
  color:#1a1305; font-weight:700; border:0; border-radius:12px; padding:.8rem 1.3rem;
  font-size:1rem; cursor:pointer; text-align:center; transition:filter .15s}
.btn-ouro:hover{filter:brightness(1.07)}
.btn-ouro.is-feita{background:transparent; color:var(--ok); border:1px solid rgba(74,222,128,.4)}
.btn-vermelho{background:linear-gradient(135deg,var(--vermelho),var(--vermelho2)); color:#fff;
  box-shadow:0 6px 18px -8px rgba(214,42,61,.6)}
.btn-vermelho:hover{filter:brightness(1.08)}
.btn-ghost{display:inline-block; border:1px solid var(--line); color:var(--txt);
  padding:.7rem 1.1rem; border-radius:12px; font-size:.95rem; margin:.3rem .4rem .3rem 0}
.btn-ghost:hover{border-color:var(--ouro)}
.btn-ghost.sair-link{color:var(--mut)}

/* auth */
.auth{min-height:70vh; display:flex; align-items:center; justify-content:center}
.auth-card{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.5rem}
.auth-logo{font-size:1.4rem; color:var(--ouro); text-align:center; margin-bottom:.2em}
.auth-sub{color:var(--mut); text-align:center; font-size:.92rem; margin:0 0 1.3rem}
.auth-card label,.login-form-inner label{display:block; font-size:.85rem; color:var(--mut); margin-bottom:.9rem}
.auth-card input,.login-form-inner input{width:100%; margin-top:.35rem; background:var(--bg2); border:1px solid var(--line);
  color:var(--txt); border-radius:10px; padding:.75rem .8rem; font-size:1rem}
.auth-card input:focus,.login-form-inner input:focus{outline:none; border-color:var(--ouro)}
.auth-card .btn-ouro,.login-form-inner .btn-ouro{width:100%; margin-top:.3rem}
.auth-link{display:block; text-align:center; color:var(--mut); font-size:.86rem; margin-top:1rem}
.auth-link:hover{color:var(--ouro)}

/* login split-screen (foto da Amanda + form) */
.login-split{flex:1; display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh}
.login-foto{position:relative; background:#0b0b0d center top/cover no-repeat}
/* a foto "apaga" no escuro (funde com o fundo do form) — sem linha divisória */
.login-foto::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,11,13,0) 50%, var(--bg) 100%),
             linear-gradient(0deg, rgba(11,11,13,.6), rgba(11,11,13,0) 40%)}
.login-foto-tag{position:absolute; left:1.6rem; bottom:1.5rem; z-index:1; display:flex; flex-direction:column; gap:.15rem}
.lf-marca{font-family:'Playfair Display',serif; font-weight:700; color:var(--ouro); font-size:1.2rem}
.lf-aco{color:#e8d9b5; font-size:.82rem; letter-spacing:.04em}
.login-form{display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; background:var(--bg)}
.login-form-inner{width:100%; max-width:360px}
.login-form-inner .auth-logo{font-size:1.5rem; color:var(--ouro); margin-bottom:.15em}
.login-form-inner .auth-sub{color:var(--mut); font-size:.92rem; margin:0 0 1.4rem}

/* home */
.hero-home h1{font-size:1.8rem; margin-bottom:.1em}
.hero-home p{color:var(--mut); margin:0 0 1.4rem}
.grid-cursos{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem}
.card-curso{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .15s,border-color .15s; display:block}
.card-curso:hover{transform:translateY(-3px); border-color:var(--ouro2)}
.card-curso .capa{height:140px; background:#1d1d22 center/cover no-repeat;
  display:flex; align-items:center; justify-content:center}
.capa-ph{font-family:'Playfair Display',serif; font-size:2.6rem; color:var(--ouro)}
.card-body{padding:1rem}
.card-body h3{font-size:1.1rem; margin-bottom:.3em}
.card-body p{color:var(--mut); font-size:.88rem; margin:0 0 .7rem; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-body .ir{color:var(--ouro); font-weight:600; font-size:.9rem}

.vazio{background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  padding:2rem 1.4rem; text-align:center; color:var(--mut)}
.vazio h2{font-size:1.2rem; color:var(--txt)}

/* curso */
.voltar{display:inline-block; color:var(--mut); font-size:.9rem; margin-bottom:1rem}
.voltar:hover{color:var(--ouro)}
.curso-head{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; margin-bottom:1.4rem}
.curso-head h1{font-size:1.6rem}
.curso-head p{color:var(--mut); margin:.2rem 0 1rem}
.progresso{margin:.6rem 0 1.1rem}
.barra{height:8px; background:var(--bg2); border-radius:99px; overflow:hidden}
.barra span{display:block; height:100%; background:linear-gradient(90deg,var(--ouro),var(--ouro2))}
.progresso small{color:var(--mut); display:block; margin-top:.4rem; font-size:.82rem}

.modulo{margin-bottom:1.5rem}
.modulo h2{font-size:1.15rem; color:var(--ouro); margin-bottom:.6rem}
.aulas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.aula-item{display:flex; align-items:center; gap:.8rem; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; transition:border-color .15s}
.aula-item:hover{border-color:var(--ouro2)}
.aula-item .check{width:26px; height:26px; flex:0 0 26px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:.8rem; background:var(--bg2); color:var(--mut)}
.aula-item.feita .check{background:rgba(74,222,128,.15); color:var(--ok)}
.aula-nome{flex:1}
.aula-item .dur{color:var(--mut); font-size:.8rem}

/* aula */
.aula-layout{display:grid; grid-template-columns:1fr 300px; gap:1.4rem; align-items:start}
.player{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius); overflow:hidden}
.player iframe,.player video{position:absolute; inset:0; width:100%; height:100%; border:0}
.player-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut)}
.aula-titulo{font-size:1.5rem; margin-top:1.1rem}
.aula-desc{color:var(--mut); white-space:pre-wrap; margin-bottom:1rem}
.material{display:inline-block; color:var(--ouro); border:1px solid var(--line); padding:.5rem .9rem;
  border-radius:10px; font-size:.9rem; margin-bottom:1rem}
.aula-acoes{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:1rem 0}
.nav-aulas{display:flex; gap:1rem; font-size:.92rem}
.nav-aulas a{color:var(--mut)} .nav-aulas a:hover{color:var(--ouro)} .nav-aulas .prox{color:var(--ouro)}
.transcricao{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.4rem 1rem; margin-top:1rem}
.transcricao summary{cursor:pointer; color:var(--ouro); padding:.6rem 0; font-weight:600}
.transcricao div{color:var(--mut); white-space:pre-wrap; font-size:.9rem; padding-bottom:.8rem}

.aula-side{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.aula-side h3{font-size:1rem; color:var(--ouro)}
.side-aulas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.side-aulas a{display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; border-radius:9px;
  font-size:.9rem; color:var(--mut)}
.side-aulas a:hover{background:var(--bg2); color:var(--txt)}
.side-aulas a.atual{background:var(--bg2); color:var(--txt); border-left:3px solid var(--ouro)}
.side-aulas a.feita .check{color:var(--ok)}
.side-aulas .check{width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; font-size:.72rem}

/* perfil */
.perfil-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.4rem; margin:1rem 0}
.perfil-card .linha{display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--line)}
.perfil-card .linha:last-child{border-bottom:0}
.perfil-card .linha span{color:var(--mut)}

/* rodapé */
.rodape{border-top:1px solid var(--line); color:var(--mut); font-size:.82rem;
  display:flex; justify-content:space-between; padding:1rem 1.2rem; max-width:1040px; margin:0 auto; width:100%}
.rodape .aco{color:var(--ouro2)}

/* ───────── admin ───────── */
.admin-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap}
.admin-head h1{font-size:1.6rem; margin:0}
.admin-sub{color:var(--mut); font-size:.9rem; margin:.2rem 0 0}
.mut{color:var(--mut)} .pad{padding:.4rem 0 .2rem}
.link-ouro{color:var(--ouro); font-weight:600} .link-ouro:hover{filter:brightness(1.1)}

.tab{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tab th,.tab td{text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top}
.tab th{color:var(--mut); font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.tab tr:last-child td{border-bottom:0}
.tab .acoes{white-space:nowrap; text-align:right}

.badge{display:inline-block; font-size:.74rem; font-weight:600; padding:.2rem .5rem; border-radius:99px; border:1px solid var(--line)}
.badge.ok{background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.3); color:var(--ok)}
.badge.off{background:var(--bg2); color:var(--mut)}

.form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; max-width:680px}
.form-card label{display:block; font-size:.85rem; color:var(--mut); margin-bottom:1rem}
.form-card input,.form-card textarea,.form-card select{width:100%; margin-top:.35rem; background:var(--bg2);
  border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:.7rem .8rem; font-size:1rem; font-family:inherit}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{outline:none; border-color:var(--ouro)}
.form-card textarea{resize:vertical}
.form-row{display:flex; gap:1rem} .form-row>label{flex:1}
.check-inline{display:flex; align-items:center; gap:.5rem; color:var(--txt); font-size:.95rem}
.check-inline input{width:auto; margin:0}
.hint{display:block; color:var(--mut); font-size:.78rem; margin-top:.35rem; line-height:1.4}
.hint code{background:var(--bg2); padding:.05rem .3rem; border-radius:5px}
.form-acoes{display:flex; gap:.8rem; align-items:center; margin-top:.4rem}

.btn-perigo{background:transparent; color:var(--erro); border:1px solid rgba(248,113,113,.4);
  border-radius:12px; padding:.6rem 1.1rem; font-size:.9rem; cursor:pointer}
.btn-perigo:hover{background:rgba(248,113,113,.1)}
.btn-perigo-min{background:transparent; color:var(--mut); border:1px solid var(--line);
  border-radius:8px; padding:.35rem .55rem; font-size:.85rem; cursor:pointer}
.btn-perigo-min:hover{color:var(--erro); border-color:rgba(248,113,113,.4)}
.form-excluir{margin-top:1.2rem}

.adm-modulo{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem}
.adm-modulo-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; flex-wrap:wrap}
.adm-modulo-head h2{font-size:1.1rem; color:var(--ouro); margin:0}
.adm-modulo-head .acoes{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
.adm-aulas{list-style:none; margin:.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; counter-reset:a}
.adm-aulas li{display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem}
.adm-aula-nome{flex:1; color:var(--txt)} .adm-aula-nome:hover{color:var(--ouro)}
.adm-aula-tags{display:flex; gap:.35rem; flex-wrap:wrap}
.novo-modulo{margin-top:.5rem}

/* mobile */
@media (max-width:760px){
  .aula-layout{grid-template-columns:1fr}
  .aula-side{order:2}
  .topnav{gap:.8rem; font-size:.85rem}
  .brand{font-size:.95rem}
  .hero-home h1{font-size:1.5rem}
  .form-row{flex-direction:column; gap:0}
  .tab thead{display:none}
  .tab td{display:block; border-bottom:0; padding:.3rem 1rem}
  .tab tr{display:block; border-bottom:1px solid var(--line); padding:.6rem 0}
  .tab .acoes{text-align:left}
  .login-split{grid-template-columns:1fr; grid-template-rows:auto auto; min-height:100vh}
  .login-foto{height:48vh; min-height:250px; border:0}
  /* no celular a foto funde pra BAIXO, escurecendo até o preto do form */
  .login-foto::after{background:linear-gradient(180deg, rgba(11,11,13,0) 34%, var(--bg) 100%)}
  .login-form{align-items:flex-start; padding:1.4rem 1.3rem 2.4rem}
  .login-form-inner .auth-logo{font-size:1.4rem}
}