@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/archivo-black-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/archivo-black-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/dm-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/dm-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}/* área de membros · identidade v1c74o ------------------------------------ */
:root{
  --ink:#0d0c0b; --ink2:#161411; --panel:#191713; --line:#2a2621;
  --paper:#f2efe6; --muted:#a39c8d; --orange:#ff4d2e; --orange-d:#c8351a;
  --green:#25d366; --blue:#2357ff; --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:"DM Sans",-apple-system,system-ui,sans-serif; font-size:16px; line-height:1.55;
}
h1,h2,h3{font-family:"Archivo Black","Archivo",sans-serif; font-weight:400; letter-spacing:-.02em; line-height:1.02; margin:0}
h1{font-size:clamp(1.9rem,4.5vw,3.2rem)}
h2{font-size:clamp(1.25rem,2.4vw,1.7rem)}
h3{font-size:1.02rem; letter-spacing:0}
p{margin:.4rem 0}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
::selection{background:var(--orange); color:var(--ink)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}

.kicker{display:inline-block; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:var(--orange); font-weight:700; margin-bottom:.45rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.empty{color:var(--muted); font-size:.92rem; padding:1.1rem 0}

/* topbar ------------------------------------------------------------------ */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,2rem); background:rgba(13,12,11,.97);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:.55rem}
.brand:hover{text-decoration:none}
.brand-mark{font-family:"Archivo Black",sans-serif; font-size:1.05rem; color:var(--paper)}
.brand-sub{font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted)}
.mainnav{display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{
  font-size:.86rem; padding:.42rem .7rem; border-radius:99px; color:var(--muted); white-space:nowrap;
}
.mainnav a:hover{color:var(--paper); text-decoration:none; background:var(--ink2)}
.mainnav a.is-on{color:var(--ink); background:var(--paper); font-weight:600}
.topactions{display:flex; align-items:center; gap:.6rem; margin-left:auto}
.userchip{display:flex; align-items:center; gap:.5rem}
.usermenu{display:flex; flex-direction:column; line-height:1.15}
.usermenu a{font-size:.82rem; font-weight:600}
.linklike{background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:.74rem; padding:0; text-align:left}
.linklike:hover{color:var(--orange); text-decoration:underline}

/* avatares ---------------------------------------------------------------- */
.avatar{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--ink); font-weight:700; font-size:.95rem; flex:none;
}
.avatar.sm{width:28px; height:28px; font-size:.8rem}
.avatar.xs{width:22px; height:22px; font-size:.68rem; background:var(--paper); color:var(--ink)}

/* estrutura --------------------------------------------------------------- */
.wrap{max-width:1120px; margin:0 auto; padding:clamp(1.2rem,3vw,2.4rem) clamp(1rem,3vw,2rem) 4rem}
.block{margin:0 0 2.6rem}
.block.narrow{max-width:720px}
.block-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem}
.block-head.sub{margin-top:2.4rem}
.foot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.1rem clamp(1rem,3vw,2rem); border-top:1px solid var(--line);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
}
.backlink{display:inline-block; margin-bottom:1.1rem; color:var(--muted); font-size:.85rem}
.backlink:hover{color:var(--orange); text-decoration:none}

/* botões ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font:inherit; font-weight:700; font-size:.9rem; padding:.72rem 1.2rem; min-height:44px;
  border-radius:99px; border:1px solid var(--line); background:transparent; color:var(--paper);
  cursor:pointer; transition:transform .15s ease, background .2s, border-color .2s, color .2s;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--orange); border-color:var(--orange); color:var(--ink)}
.btn.primary:hover{background:#ff6748}
.btn.green{background:var(--green); border-color:var(--green); color:var(--ink)}
.btn.ghost{background:var(--ink2)}
.btn.ghost:hover{border-color:var(--paper)}
.btn.danger{border-color:#5c2016; color:#ff8668}
.btn.danger:hover{background:#2a100a}
.btn.sm{min-height:36px; padding:.42rem .85rem; font-size:.8rem}
.wide-btn{width:100%; margin-top:.7rem}

/* flash ------------------------------------------------------------------- */
.flash{border-radius:12px; padding:.8rem 1rem; margin:0 0 1.2rem; font-size:.9rem; border:1px solid}
.flash.ok{border-color:rgba(37,211,102,.4); background:rgba(37,211,102,.08); color:#9ff0c0}
.flash.ok strong{color:#d6ffe6}
.flash.err{border-color:rgba(255,77,46,.45); background:rgba(255,77,46,.08); color:#ffb4a2}

/* formas ------------------------------------------------------------------ */
label{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
input,select,textarea{
  width:100%; margin-top:.35rem; padding:.68rem .8rem; font:inherit; font-size:.95rem;
  color:var(--paper); background:var(--ink); border:1px solid var(--line); border-radius:10px;
}
input:focus,select:focus,textarea:focus{border-color:var(--orange); outline:none}
input:disabled{opacity:.55}
textarea{resize:vertical; line-height:1.5}
.stack{display:grid; gap:1rem}
.stack .btn{justify-self:start}
.row-form{display:flex; gap:.7rem; flex-wrap:wrap; align-items:flex-end}
.row-form label{flex:1; min-width:160px}
.row-form input,.row-form select{margin-top:.3rem}
.row-form .btn{margin-bottom:1px}

/* painéis ----------------------------------------------------------------- */
.panel{
  background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.3rem; margin-bottom:1.4rem;
}
.panel > .kicker{margin-bottom:.8rem}

/* auth -------------------------------------------------------------------- */
.auth{max-width:420px; margin:8vh auto 0}
.auth-card{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem}
.auth-card h1{margin-bottom:.2rem}
.auth-card .stack{margin-top:1.3rem}
.auth .muted.small{margin-top:1rem}
.auth a{color:var(--orange)}

/* home -------------------------------------------------------------------- */
.hero{margin-bottom:2.2rem}
.hero h1{max-width:16ch; margin:.2rem 0 .6rem}
.hero-card{
  display:flex; align-items:center; justify-content:space-between; gap:1.1rem; flex-wrap:wrap;
  background:var(--ink2); border:1px solid var(--line); border-left:4px solid var(--orange);
  border-radius:var(--radius); padding:1.2rem 1.3rem; margin-top:1.4rem;
}
.hero-card strong{display:block; font-size:1.15rem; margin-top:.15rem}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:2.6rem}
.kpi{background:var(--ink2); padding:1.15rem 1.3rem}
.kpi strong{display:block; font-family:"Archivo Black",sans-serif; font-size:1.9rem; line-height:1}
.kpi span{font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}

/* cards de curso ----------------------------------------------------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1.1rem}
.course-card{position:relative; display:flex}
.cc-link{
  flex:1; display:flex; background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color .2s, transform .2s;
}
.cc-link:hover{border-color:var(--muted); text-decoration:none; transform:translateY(-2px)}
.cc-bar{width:6px; flex:none; background:var(--orange)}
.cc-bar.wide{width:8px; border-radius:99px}
.cc-bar.inline{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.5rem; vertical-align:middle}
.c-blue{background:var(--blue)}
.c-green{background:var(--green)}
.c-paper{background:var(--paper)}
.c-orange{background:var(--orange)}
.cc-body{padding:1.15rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.cc-body h3{font-size:1.08rem}
.cc-body p{color:var(--muted); font-size:.86rem; margin:0; flex:1}
.cc-foot{margin-top:.4rem}
.fav-form{position:absolute; top:.6rem; right:.6rem}
.fav{background:none; border:0; color:var(--muted); font-size:1.25rem; cursor:pointer; padding:.3rem}
.fav.is-fav{color:var(--orange)}
.progress{height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:.5rem}
.progress span{display:block; height:100%; background:var(--orange); border-radius:99px}
.progress.slim{height:4px; margin:.8rem 0}

/* página do curso ---------------------------------------------------------- */
.course-hero{
  display:flex; gap:1.2rem; align-items:stretch; background:var(--ink2); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.4rem 1.5rem; margin-bottom:2.2rem;
}
.ch-body{flex:1}
.ch-body h1{margin-bottom:.4rem}
.ch-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.1rem}
.ch-progress{display:flex; flex-direction:column; align-items:flex-end; justify-content:center; min-width:90px}
.ch-progress strong{font-family:"Archivo Black",sans-serif; font-size:2rem; line-height:1}
.module{margin-bottom:1.6rem}
.module h3{color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:.6rem}
.lesson-list{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.lesson-list li + li{border-top:1px solid var(--line)}
.lesson-list a{display:flex; align-items:center; gap:.8rem; padding:.85rem 1.1rem; background:var(--ink2)}
.lesson-list a:hover{background:var(--panel); text-decoration:none}
.ll-check{color:var(--muted)}
.lesson-list li.is-done .ll-check{color:var(--green)}
.lesson-list li.is-done .ll-title{color:var(--muted)}
.ll-title{flex:1; font-weight:600; font-size:.95rem}
.tag{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  border:1px solid var(--line); padding:.14rem .5rem; border-radius:99px;
}

/* aula -------------------------------------------------------------------- */
.lesson-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2rem; align-items:start}
.lesson-main h1{margin-bottom:1.2rem}
.lesson-content{font-size:1.02rem}
.lesson-content p{margin:0 0 1rem}
.video{margin:0 0 1.6rem; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#000}
.video video{width:100%; display:block}
.video-embed{position:relative; padding-top:56.25%}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.support{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem; margin:1.6rem 0}
.support pre{white-space:pre-wrap; margin:.4rem 0 0; font-size:.88rem; color:var(--paper)}
.lesson-actions{display:flex; gap:.7rem; flex-wrap:wrap; margin:1.6rem 0}
.note{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem}
.note textarea{margin-bottom:.7rem}
.playlist{position:sticky; top:76px; background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem}
.playlist h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:.4rem}
.playlist ol{list-style:none; margin:0; padding:0}
.playlist li a{display:flex; gap:.6rem; align-items:baseline; padding:.5rem .2rem; font-size:.86rem; color:var(--muted)}
.playlist li a:hover{color:var(--paper); text-decoration:none}
.playlist li.is-open a{color:var(--paper); font-weight:700}
.playlist li.is-done a{color:var(--green)}
.pl-num{font-size:.7rem; opacity:.7}
.pl-title{flex:1}
.pl-check{color:var(--green)}

/* materiais --------------------------------------------------------------- */
.stack-cards{display:grid; gap:.9rem}
.material{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.2rem}
.material summary{cursor:pointer; display:flex; flex-direction:column; gap:.1rem}
.material summary strong{font-size:1rem}
.material pre{white-space:pre-wrap; font-size:.88rem; margin:1rem 0 .9rem; border-top:1px solid var(--line); padding-top:1rem}
.material .btn{margin-top:.2rem}

/* comunidade -------------------------------------------------------------- */
.channels{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.4rem}
.channel-pill{
  display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .9rem;
  border:1px solid var(--line); border-radius:99px; background:var(--ink2); font-size:.86rem;
}
.channel-pill:hover{border-color:var(--muted); text-decoration:none}
.channel-pill.is-on{background:var(--paper); color:var(--ink); border-color:var(--paper); font-weight:700}
.channel-pill.is-on .muted{color:#5c5648}
.composer{display:flex; gap:.7rem; align-items:flex-end; margin-bottom:1.6rem}
.composer textarea{flex:1}
.feed{display:grid; gap:1rem}
.post{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.2rem}
.post header{display:flex; gap:.7rem; align-items:center; margin-bottom:.6rem}
.post header span.muted{display:block}
.post > p{white-space:pre-wrap; margin:.3rem 0 .9rem}
.comments{border-top:1px solid var(--line); padding-top:.8rem; display:grid; gap:.7rem}
.comment{display:flex; gap:.6rem; align-items:flex-start}
.comment strong{font-size:.84rem}
.comment p{margin:.1rem 0 0; font-size:.9rem}
.comment-form{display:flex; gap:.6rem}
.comment-form .btn{flex:none}
.community-cta{
  display:block; background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.7rem;
}
.community-cta:hover{border-color:var(--muted); text-decoration:none}
.community-cta h2{margin-bottom:.3rem}

/* admin ------------------------------------------------------------------- */
.admin-nav{display:flex; gap:.3rem; flex-wrap:wrap}
.admin-nav a{font-size:.8rem; padding:.4rem .75rem; border-radius:99px; color:var(--muted); border:1px solid transparent}
.admin-nav a:hover{color:var(--paper); text-decoration:none}
.admin-nav a.is-on{color:var(--ink); background:var(--paper); font-weight:600}
.table-wrap{border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{
  text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
  padding:.8rem 1.1rem; border-bottom:1px solid var(--line); background:var(--ink2);
}
.table td{padding:.8rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table td strong{display:block}
.row-actions{display:flex; gap:.45rem; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.table .row-actions{justify-content:flex-start}
.badge{font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding:.2rem .55rem; border-radius:99px; border:1px solid var(--line)}
.badge.on{color:#9ff0c0; border-color:rgba(37,211,102,.5)}
.badge.off{color:var(--muted)}
.module.admin{background:var(--ink2); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem}
.module-head{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:.7rem}
.inline-form{display:flex; gap:.5rem; align-items:center; flex:1; min-width:220px}
.inline-form input{margin-top:0}
.lesson-list.admin{border:0; border-radius:0}
.lesson-list.admin li{display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.15rem 0}
.lesson-list.admin a{background:none; padding:.5rem .2rem; flex:1}
.invite-list{display:grid; gap:.5rem; margin-top:.9rem}
.invite{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem}
.invite.used{opacity:.55}
.invite code{color:var(--orange); font-size:.95rem}

/* mobile ------------------------------------------------------------------ */
@media (max-width:860px){
  .lesson-layout{grid-template-columns:1fr}
  .playlist{position:static; order:2}
  .course-hero{flex-direction:column}
  .ch-progress{flex-direction:row; align-items:baseline; gap:.5rem}
}
@media (max-width:640px){
  .topbar{gap:.7rem}
  .mainnav{order:3; width:100%; flex:none; flex-wrap:wrap; overflow:visible}
  .mainnav a{padding:.45rem .65rem}
  .topactions{margin-left:auto}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi{padding:.95rem .8rem}
  .kpi strong{font-size:1.5rem}
  .kpi span{font-size:.58rem; letter-spacing:.05em}
  .hero-card{flex-direction:column; align-items:flex-start}
  .hero-card .btn{width:100%}
  .composer{flex-direction:column; align-items:stretch}
  .row-form{flex-direction:column; align-items:stretch}
  .row-form .btn{width:100%}
  .block-head{align-items:flex-start}
  input,select,textarea{font-size:16px}
  .lesson-actions .btn{flex:1}
}
/* toque ------------------------------------------------------------------ */
@media (pointer:coarse){
  .btn.sm{min-height:42px; padding:.5rem .95rem}
  .fav{width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.35rem}
  .mainnav a{min-height:40px; display:inline-flex; align-items:center}
  .linklike{padding:.4rem 0; font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}