/* =====================================================================
   WORKSPACE · COMUNIDADE · ADMIN
   Herda os tokens de app.css (--ink, --panel, --gold, --plat-grad ...)
   ===================================================================== */

/* ---------- avatar genérico ---------- */
.uav{display:inline-grid; place-items:center; border-radius:50%; flex:none;
  background:var(--plat-grad); background-size:cover; background-position:center;
  color:#000; font-family:'Space Grotesk'; font-weight:700; line-height:1; overflow:hidden}
.uav.ring{box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--gold-dim)}

/* ---------- botões utilitários ---------- */
.btn-sm{background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:600; transition:all .15s}
.btn-sm:hover{border-color:var(--gold-dim); color:var(--gold-bright)}
.btn-sm.solid{background:var(--plat-grad); color:#000; border-color:transparent}
.btn-sm.solid:hover{box-shadow:0 8px 22px -10px rgba(255,255,255,.5)}
.btn-sm.danger{color:var(--muted)}
.btn-sm.danger:hover{color:var(--red); border-color:rgba(255,69,58,.45)}
.btn-sm:disabled{opacity:.45; cursor:not-allowed}

.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.07); color:var(--muted); border:1px solid var(--line)}
.chip.gold{background:var(--plat-grad); color:#000; border-color:transparent}
.chip.green{background:rgba(48,209,88,.14); color:var(--green); border-color:rgba(48,209,88,.3)}
.chip.red{background:rgba(255,69,58,.14); color:var(--red); border-color:rgba(255,69,58,.3)}

.loading{display:flex; align-items:center; justify-content:center; gap:10px; padding:60px 20px; color:var(--faint); font-size:13.5px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- banner de migração ---------- */
.migrate-banner{display:none; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; margin-bottom:20px}
.migrate-banner p{flex:1; min-width:240px; font-size:13.5px; color:var(--muted)}
.migrate-banner b{color:var(--txt)}

/* =====================================================================
   WORKSPACE — catálogo estilo streaming
   ===================================================================== */
.ws-hero{position:relative; border-radius:20px; overflow:hidden; margin-bottom:34px;
  min-height:340px; display:flex; align-items:flex-end; border:1px solid var(--line);
  background:linear-gradient(120deg,var(--panel2),var(--panel))}
.ws-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55; transform:scale(1.02)}
.ws-hero .veil{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.8) 38%,rgba(0,0,0,.25) 75%,rgba(0,0,0,.55) 100%)}
.ws-hero .inner{position:relative; z-index:2; padding:38px 40px; max-width:620px}
.ws-hero .eyebrow{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:10px}
.ws-hero h2{font-size:36px; line-height:1.08; letter-spacing:-.025em; margin-bottom:10px}
.ws-hero p{color:var(--muted); font-size:14px; margin-bottom:20px; max-width:520px}
.ws-hero .meta{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.ws-hero .cta{display:flex; gap:10px; flex-wrap:wrap}
.btn-play{display:inline-flex; align-items:center; gap:9px; background:var(--plat-grad); color:#000;
  font-weight:700; font-size:14px; padding:13px 24px; border-radius:11px; transition:transform .12s, box-shadow .2s;
  box-shadow:0 12px 30px -12px rgba(255,255,255,.5)}
.btn-play:hover{transform:translateY(-1px); box-shadow:0 16px 36px -12px rgba(255,255,255,.6)}
.btn-outline{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.08);
  color:var(--txt); border:1px solid rgba(255,255,255,.18); font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:11px; backdrop-filter:blur(8px); transition:all .15s}
.btn-outline:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32)}

.ws-row{margin-bottom:34px}
.ws-row-head{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.ws-row-head h3{font-size:17px; font-weight:600; letter-spacing:-.01em}
.ws-row-head .cnt{font-size:11.5px; color:var(--faint); font-weight:600}
.ws-track{display:grid; grid-auto-flow:column; grid-auto-columns:264px; gap:16px;
  overflow-x:auto; overflow-y:hidden; padding:6px 4px 16px; scroll-snap-type:x proximity; scrollbar-width:thin}
.ws-track::-webkit-scrollbar{height:7px}
.ws-track::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.ws-track::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}

.course-card{scroll-snap-align:start; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; cursor:pointer; text-align:left; padding:0; color:inherit;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), border-color .2s, box-shadow .2s; display:flex; flex-direction:column}
.course-card:hover{transform:translateY(-5px); border-color:var(--gold-dim);
  box-shadow:0 22px 46px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05)}
.course-card .thumb{position:relative; aspect-ratio:16/9; background:linear-gradient(140deg,#1a1a1f,#0b0b0d);
  background-size:cover; background-position:center; display:grid; place-items:center}
.course-card .thumb .ph{color:var(--faint); font-size:30px; opacity:.4}
.course-card .thumb .badges{position:absolute; top:9px; left:9px; display:flex; gap:6px; flex-wrap:wrap}
.course-card .thumb .dur{position:absolute; bottom:9px; right:9px; background:rgba(0,0,0,.75);
  padding:3px 8px; border-radius:6px; font-size:10.5px; font-weight:600; color:var(--txt); backdrop-filter:blur(4px)}
.course-card .body{padding:13px 14px 15px; flex:1; display:flex; flex-direction:column; gap:6px}
.course-card h4{font-size:14.5px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
.course-card .sub{font-size:12px; color:var(--muted); line-height:1.45; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.course-card .foot{margin-top:auto; padding-top:9px; display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--faint); font-weight:600}

.pbar{height:4px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden; flex:1}
.pbar i{display:block; height:100%; background:var(--plat-grad); border-radius:99px; transition:width .4s}
.pbar.thin{height:3px}

/* ---------- detalhe do curso ---------- */
.back-link{display:inline-flex; align-items:center; gap:7px; background:transparent; color:var(--muted);
  font-size:13px; font-weight:600; padding:7px 0; margin-bottom:14px; transition:color .15s}
.back-link:hover{color:var(--gold-bright)}

.course-head{display:grid; grid-template-columns:300px 1fr; gap:26px; margin-bottom:30px; align-items:start}
.course-head .cover{aspect-ratio:16/10; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(140deg,#1a1a1f,#0b0b0d); background-size:cover; background-position:center; display:grid; place-items:center}
.course-head .cover .ph{color:var(--faint); font-size:34px; opacity:.4}
.course-head h2{font-size:29px; letter-spacing:-.02em; margin-bottom:8px}
.course-head .desc{color:var(--muted); font-size:14px; line-height:1.6; margin:12px 0 18px; white-space:pre-wrap}
.course-progress{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:16px}
.course-progress .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; font-size:12.5px}
.course-progress .top b{font-family:'Space Grotesk'; font-size:16px}

.mod-block{background:var(--panel); border:1px solid var(--line); border-radius:14px; margin-bottom:12px; overflow:hidden}
.mod-head{display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; user-select:none; transition:background .15s}
.mod-head:hover{background:var(--panel2)}
.mod-head .idx{width:26px; height:26px; border-radius:7px; background:var(--panel2); border:1px solid var(--line);
  display:grid; place-items:center; font-size:11.5px; font-weight:700; font-family:'Space Grotesk'; color:var(--muted); flex:none}
.mod-head .t{flex:1; min-width:0}
.mod-head .t h4{font-size:14.5px; font-weight:600}
.mod-head .t p{font-size:12px; color:var(--faint); margin-top:2px}
.mod-head .cnt{font-size:11.5px; color:var(--faint); font-weight:600; white-space:nowrap}
.mod-head .caret{color:var(--faint); transition:transform .2s}
.mod-block.open .mod-head .caret{transform:rotate(90deg)}
.mod-lessons{display:none; border-top:1px solid var(--line)}
.mod-block.open .mod-lessons{display:block}

.lesson-row{display:flex; align-items:center; gap:13px; padding:12px 18px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04); transition:background .15s; width:100%; text-align:left; background:transparent; color:inherit}
.lesson-row:last-child{border-bottom:none}
.lesson-row:hover{background:var(--panel2)}
.lesson-row.current{background:rgba(255,255,255,.06)}
.lesson-row .st{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
  display:grid; place-items:center; flex:none; color:var(--faint); font-size:11px; transition:all .2s}
.lesson-row .st.done{background:var(--green); border-color:var(--green); color:#04140a}
.lesson-row .st.part{border-color:var(--gold); color:var(--gold)}
.lesson-row .t{flex:1; min-width:0}
.lesson-row .t h5{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lesson-row .t .m{font-size:11px; color:var(--faint); margin-top:2px; display:flex; gap:8px; align-items:center}
.lesson-row .go{color:var(--faint); font-size:13px}
.lesson-row:hover .go{color:var(--gold-bright)}

/* ---------- player ---------- */
.player-wrap{display:grid; grid-template-columns:1fr 330px; gap:24px; align-items:start}
.player-main{min-width:0}
.video-shell{position:relative; background:#000; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; aspect-ratio:16/9; display:grid; place-items:center}
.video-shell video{width:100%; height:100%; display:block; background:#000}
.video-shell .novideo{color:var(--faint); font-size:13.5px; text-align:center; padding:24px}
.watch-strip{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line);
  border-top:none; border-radius:0 0 14px 14px; padding:11px 16px; margin-top:-1px; font-size:12px; color:var(--muted)}
.watch-strip .pbar{max-width:230px}
.watch-strip .done-tag{margin-left:auto}

.lesson-info{margin-top:22px}
.lesson-info h2{font-size:24px; letter-spacing:-.02em; margin-bottom:6px}
.lesson-info .crumb{font-size:11.5px; color:var(--gold); font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px}
.lesson-info .desc{color:var(--muted); font-size:14px; line-height:1.65; margin-top:12px; white-space:pre-wrap}
.lesson-nav{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}

.player-side{background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  position:sticky; top:80px; max-height:calc(100vh - 110px); display:flex; flex-direction:column}
.player-side .ph{padding:14px 16px; border-bottom:1px solid var(--line)}
.player-side .ph h4{font-size:13.5px; font-weight:600}
.player-side .ph .m{font-size:11.5px; color:var(--faint); margin-top:3px}
.player-side .list{overflow-y:auto; flex:1}
.player-side .list .lesson-row{padding:10px 14px}

/* ---------- comentários ---------- */
.comments{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.comments h3{font-size:17px; font-weight:600; margin-bottom:18px; display:flex; align-items:center; gap:9px}
.comments h3 .n{font-size:12px; color:var(--faint); font-weight:600}
.cbox{display:flex; gap:12px; margin-bottom:24px}
.cbox .grow{flex:1}
.cbox textarea, .creply textarea{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--txt);
  border-radius:11px; padding:12px 14px; font-family:'Inter'; font-size:13.5px; resize:vertical; min-height:78px; line-height:1.55}
.cbox textarea:focus, .creply textarea:focus{outline:none; border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.cbox .acts{display:flex; justify-content:flex-end; gap:8px; margin-top:9px}

.comment{display:flex; gap:12px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.comment:last-child{border-bottom:none}
.comment .cmain{flex:1; min-width:0}
.comment .chead{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:5px}
.comment .chead b{font-size:13.5px; font-weight:600}
.comment .chead .tm{font-size:11.5px; color:var(--faint)}
.comment .cbody{font-size:13.5px; line-height:1.6; color:var(--txt); white-space:pre-wrap; word-break:break-word}
.comment .cacts{display:flex; gap:14px; margin-top:9px; align-items:center}
.comment .cacts button{background:transparent; color:var(--faint); font-size:11.5px; font-weight:600; padding:0; transition:color .15s}
.comment .cacts button:hover{color:var(--gold-bright)}
.comment .cacts button.liked{color:var(--gold-bright)}
.comment .cacts button.del:hover{color:var(--red)}
.comment.pinned{background:rgba(255,255,255,.03); border-radius:12px; padding:16px 14px; border-bottom:none; margin-bottom:10px}
.creplies{margin-top:14px; padding-left:16px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:2px}
.creply{margin-top:12px}
.creply .acts{display:flex; gap:8px; justify-content:flex-end; margin-top:8px}

/* =====================================================================
   COMUNIDADE — estilo Discord
   ===================================================================== */
.chat{display:grid; grid-template-columns:238px minmax(0,1fr); gap:0; height:calc(100vh - 250px); min-height:480px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.chat-side{background:#08080a; border-right:1px solid var(--line); display:flex; flex-direction:column}
.chat-side .sh{padding:16px 16px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between}
.chat-side .sh h3{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.chan-list{flex:1; overflow-y:auto; padding:10px 8px}
.chan{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:transparent;
  color:var(--muted); padding:8px 10px; border-radius:8px; font-size:13.5px; font-weight:500; transition:all .13s; margin-bottom:2px}
.chan:hover{background:rgba(255,255,255,.05); color:var(--txt)}
.chan.active{background:rgba(255,255,255,.09); color:var(--gold-bright); font-weight:600}
.chan .hash{color:var(--faint); font-weight:700; font-size:15px; line-height:1}
.chan.active .hash{color:var(--gold)}
.chan .x{margin-left:auto; opacity:0; color:var(--faint); font-size:15px; line-height:1}
.chan:hover .x{opacity:1}
.chan .x:hover{color:var(--red)}
.chat-side .sf{padding:10px; border-top:1px solid var(--line)}

.chat-main{display:flex; flex-direction:column; min-width:0}
.chat-head{display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--line); flex:none}
.chat-head .hash{color:var(--faint); font-size:19px; font-weight:700; line-height:1}
.chat-head h3{font-size:15px; font-weight:600}
.chat-head .d{font-size:12px; color:var(--faint); padding-left:12px; margin-left:2px; border-left:1px solid var(--line)}
.chat-head .live{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:11px; color:var(--faint); font-weight:600}
.chat-head .live i{width:6px;height:6px;border-radius:50%;background:var(--green);display:block; box-shadow:0 0 8px var(--green)}
.chat-head .live.off i{background:var(--faint); box-shadow:none}

.msg-scroll{flex:1; overflow-y:auto; padding:16px 20px 8px; display:flex; flex-direction:column}
.msg-scroll::-webkit-scrollbar{width:8px}
.msg-scroll::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.daysep{display:flex; align-items:center; gap:12px; margin:16px 0 10px; color:var(--faint); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.daysep::before,.daysep::after{content:''; flex:1; height:1px; background:var(--line)}

.msg{display:flex; gap:12px; padding:5px 8px; border-radius:8px; margin:0 -8px; position:relative}
.msg:hover{background:rgba(255,255,255,.03)}
.msg.grouped{padding-top:1px; padding-bottom:1px}
.msg .slot{width:36px; flex:none; display:grid; place-items:center}
.msg.grouped .slot .ts{font-size:10px; color:var(--faint); opacity:0}
.msg.grouped:hover .slot .ts{opacity:1}
.msg .mmain{flex:1; min-width:0}
.msg .mhead{display:flex; align-items:baseline; gap:9px; margin-bottom:2px; flex-wrap:wrap}
.msg .mhead b{font-size:14px; font-weight:600}
.msg .mhead .tm{font-size:10.5px; color:var(--faint)}
.msg .chat-body{font-size:14px; line-height:1.5; color:#dcdce2; white-space:pre-wrap; word-break:break-word}
.msg .mdel{position:absolute; top:2px; right:6px; opacity:0; background:var(--panel2); border:1px solid var(--line);
  color:var(--muted); width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:13px; transition:all .15s}
.msg:hover .mdel{opacity:1}
.msg .mdel:hover{color:var(--red); border-color:rgba(255,69,58,.45)}

.chat-compose{flex:none; padding:12px 20px 18px}
.chat-compose .box{display:flex; gap:10px; align-items:flex-end; background:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:9px 10px 9px 14px; transition:border-color .15s}
.chat-compose .box:focus-within{border-color:var(--gold-dim)}
.chat-compose textarea{flex:1; background:transparent; border:none; color:var(--txt); font-family:'Inter';
  font-size:14px; resize:none; max-height:150px; line-height:1.5; padding:5px 0}
.chat-compose textarea:focus{outline:none}
.send-btn{width:34px; height:34px; border-radius:9px; background:var(--plat-grad); color:#000;
  display:grid; place-items:center; flex:none; transition:transform .12s}
.send-btn:hover{transform:scale(1.06)}
.send-btn:disabled{opacity:.3; transform:none; cursor:not-allowed}
.chat-compose .hint{font-size:10.5px; color:var(--faint); margin-top:7px; padding-left:4px}

/* =====================================================================
   ADMIN
   ===================================================================== */
.adm-tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:24px}
.adm-tabs button{background:transparent; color:var(--muted); padding:11px 16px; font-size:13.5px;
  font-weight:600; border-radius:9px 9px 0 0; position:relative; transition:all .15s}
.adm-tabs button:hover{color:var(--txt)}
.adm-tabs button.active{color:var(--gold-bright)}
.adm-tabs button.active::after{content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--gold); border-radius:2px}

.adm-panel{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:20px}
.adm-panel > h3{font-size:15.5px; font-weight:600; margin-bottom:4px}
.adm-panel > .sub{font-size:12.5px; color:var(--faint); margin-bottom:18px}

.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; align-items:end}
.form-grid.wide{grid-template-columns:1fr}
.fld{display:flex; flex-direction:column; gap:7px}
.fld.span2{grid-column:span 2}
.fld label{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.fld input,.fld select,.fld textarea{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--txt);
  padding:11px 13px; border-radius:10px; font-size:13.5px; font-family:'Inter'; transition:border-color .15s}
.fld textarea{resize:vertical; min-height:80px; line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.fld .help{font-size:11px; color:var(--faint); line-height:1.4}
.fld.check{flex-direction:row; align-items:center; gap:9px}
.fld.check input{width:auto; accent-color:#fff}
.fld.check label{text-transform:none; letter-spacing:0; font-size:13px; color:var(--txt); font-weight:500}

.adm-table{width:100%; border-collapse:collapse; font-size:13px}
.adm-table th{text-align:left; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); font-weight:700; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
.adm-table td{padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle}
.adm-table tr:last-child td{border-bottom:none}
.adm-table tr:hover td{background:rgba(255,255,255,.02)}
.adm-table .who{display:flex; align-items:center; gap:10px}
.adm-table .who b{font-weight:600}
.adm-table .em{display:block; font-size:11.5px; color:var(--faint); font-weight:400}
.adm-table .acts{display:flex; gap:7px; justify-content:flex-end}

.tree-course{border:1px solid var(--line); border-radius:14px; margin-bottom:14px; overflow:hidden; background:var(--panel)}
.tree-course > .th{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--panel2)}
.tree-course > .th .cv{width:64px; aspect-ratio:16/10; border-radius:7px; background:#111; background-size:cover; background-position:center; flex:none; border:1px solid var(--line)}
.tree-course > .th .t{flex:1; min-width:0}
.tree-course > .th .t h4{font-size:14.5px; font-weight:600}
.tree-course > .th .t .m{font-size:11.5px; color:var(--faint); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tree-body{padding:6px 16px 16px}
.tree-mod{border-left:2px solid var(--line); padding-left:14px; margin:14px 0 0}
.tree-mod > .mh{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.tree-mod > .mh h5{font-size:13px; font-weight:600; flex:1}
.tree-lesson{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  background:var(--ink); border:1px solid var(--line); margin-bottom:6px; font-size:12.5px}
.tree-lesson .t{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tree-lesson .num{color:var(--faint); font-weight:700; font-size:11px; width:20px; flex:none}

.upl{border:1px dashed var(--line); border-radius:11px; padding:16px; text-align:center; transition:all .15s; cursor:pointer}
.upl:hover{border-color:var(--gold-dim); background:rgba(255,255,255,.02)}
.upl .ic{font-size:22px; color:var(--faint); margin-bottom:6px}
.upl .t{font-size:13px; font-weight:600}
.upl .s{font-size:11.5px; color:var(--faint); margin-top:3px}
.upl.has{border-style:solid; border-color:var(--green-dim)}
.upl-bar{height:5px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; margin-top:11px; display:none}
.upl-bar.on{display:block}
.upl-bar i{display:block; height:100%; width:0; background:var(--plat-grad); border-radius:99px; transition:width .2s}

.stat-mini{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
.stat-mini .s{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:14px 16px}
.stat-mini .s .l{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700}
.stat-mini .s .v{font-family:'Space Grotesk'; font-size:23px; font-weight:600; margin-top:5px}

/* modal genérico grande */
.modal-card.lg{max-width:640px}
.modal-card.xl{max-width:820px}

.empty-soft{text-align:center; padding:46px 20px; color:var(--faint)}
.empty-soft .ei{font-size:30px; opacity:.35; margin-bottom:10px}
.empty-soft p{font-size:13.5px; color:var(--muted)}
.empty-soft .es{font-size:12px; margin-top:5px}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .player-wrap{grid-template-columns:1fr}
  .player-side{position:static; max-height:420px}
  .course-head{grid-template-columns:220px 1fr}
}
@media (max-width:760px){
  .ws-hero{min-height:270px}
  .ws-hero .inner{padding:26px 22px}
  .ws-hero h2{font-size:26px}
  .ws-track{grid-auto-columns:212px}
  .course-head{grid-template-columns:1fr}
  .course-head .cover{max-width:300px}
  /* minmax(0,…): com `1fr` puro a coluna não encolhe abaixo do conteúdo
     e o chat inteiro estourava a tela no celular. */
  .chat{grid-template-columns:minmax(0,1fr); height:auto}
  .chat-side,.chat-main{min-width:0}
  .chat-side .sh{min-width:0}
  .chat-side .sh h3{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .chat-head{min-width:0; flex-wrap:wrap; row-gap:4px}
  .chat-head h3{min-width:0}
  .chat-head .d{padding-left:0; margin-left:0; border-left:none; flex-basis:100%; font-size:11.5px}
  .chat-head .live{margin-left:auto}
  .msg .mmain{min-width:0}
  .chat-compose .box{min-width:0}
  .chat-side{border-right:none; border-bottom:1px solid var(--line)}
  .chan-list{display:flex; overflow-x:auto; padding:10px}
  .chan{white-space:nowrap; margin-bottom:0; margin-right:4px}
  .chan .x{display:none}
  .msg-scroll{height:52vh; min-height:340px}
  .adm-table{font-size:12px}
  .fld.span2{grid-column:span 1}
}

/* aviso de limite de tamanho no upload de vídeo */
.size-warn{margin-top:10px; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-left:2px solid var(--gold); border-radius:9px; padding:11px 13px;
  font-size:11.5px; line-height:1.55; color:var(--muted)}
.size-warn b{color:var(--txt)}
.upl.too-big{border-style:solid; border-color:rgba(255,69,58,.5); background:rgba(255,69,58,.05)}
.upl.too-big .t b{color:var(--red)}

/* =====================================================================
   PORTÃO — troca de senha provisória e segundo fator
   ===================================================================== */
#gate{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  padding:24px; overflow-y:auto;
  background:radial-gradient(900px 600px at 50% 15%, rgba(255,255,255,.07), transparent 60%), var(--ink)}
.gate-card{width:100%; max-width:400px; margin:auto;
  background:linear-gradient(165deg, rgba(54,54,62,.26), rgba(16,16,20,.34));
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:38px 32px;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.22)}
.gate-card h1{font-family:'Space Grotesk'; font-size:22px; font-weight:600; letter-spacing:-.01em; margin-bottom:7px}
.gate-card .sub{color:var(--muted); font-size:13.5px; line-height:1.55; margin-bottom:24px}
.gate-card .field input{width:100%}
.gate-err{color:var(--red); font-size:13px; margin-top:13px; text-align:center; min-height:17px; font-weight:500; line-height:1.45}
.gate-ok{color:var(--green); font-size:12.5px; margin-top:2px; text-align:center; min-height:16px; font-weight:500}
.gate-foot{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); text-align:center;
  color:var(--faint); font-size:11.5px; line-height:1.5}
.gate-links{display:flex; gap:10px; justify-content:center; align-items:center; margin-top:16px; flex-wrap:wrap}
.gate-links .sep{color:var(--faint)}
.gate-links .linkish:disabled{opacity:.45; cursor:default}

.code-input{text-align:center; font-size:30px !important; letter-spacing:.34em; padding:15px 10px !important;
  font-family:'JetBrains Mono',monospace !important; text-indent:.34em}
.qr-wrap{background:#fff; border-radius:14px; padding:14px; display:grid; place-items:center; margin-bottom:16px}
.qr-wrap svg{width:100%; height:auto; max-width:190px; display:block}
.secret-box{background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:12px 14px; margin-bottom:18px}
.secret-box .sl{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--faint); font-weight:700}
.secret-box .sv{font-size:13px; color:var(--txt); margin-top:6px; word-break:break-all; letter-spacing:.04em}

/* bloco de 2FA nas configurações */
.mfa-box{background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:14px 15px}
.mfa-box.on{border-color:rgba(48,209,88,.3)}
.mfa-row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--txt); flex-wrap:wrap}
.mfa-help{font-size:12px; color:var(--muted); line-height:1.55; margin-top:10px}
.mfa-actions{display:flex; gap:8px; margin-top:13px; flex-wrap:wrap}
.mfa-actions .btn-sm{flex:1; min-width:132px; text-align:center}

/* resultado do cadastro de aluno */
.inv-msg{margin-top:14px; border-radius:10px; padding:12px 14px; font-size:13px; line-height:1.55}
.inv-msg.ok{background:rgba(48,209,88,.1); border:1px solid rgba(48,209,88,.3); color:var(--txt)}
.inv-msg.erro{background:rgba(255,69,58,.09); border:1px solid rgba(255,69,58,.32); color:var(--txt)}
.inv-msg.alerta{background:rgba(255,255,255,.05); border:1px solid var(--gold-dim); color:var(--txt)}
.inv-msg .cred{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:10px;
  background:#000; border:1px solid var(--line); border-radius:9px; padding:11px 13px}
.inv-msg .cred b{font-size:16px; color:#fff; letter-spacing:.05em}
.adm-alt{margin-top:16px; border-top:1px solid var(--line); padding-top:14px}
.adm-alt summary{cursor:pointer; font-size:12.5px; color:var(--muted); font-weight:600; list-style:none}
.adm-alt summary::-webkit-details-marker{display:none}
.adm-alt summary::before{content:'+ '; color:var(--gold)}
.adm-alt[open] summary::before{content:'– '}
.adm-alt p{font-size:12.5px; color:var(--faint); line-height:1.55; margin:10px 0 11px}

/* =====================================================================
   Nome editável do setup de Day Trade
   Era um <span>; virou <input> e herdou o fundo branco padrão do navegador.
   Aqui ele volta a parecer um rótulo, e só revela que é campo no hover.
   ===================================================================== */
/* O nome ocupa a linha inteira e os botões descem para a linha de baixo.
   Dividindo a mesma linha sobravam 83px para o nome — qualquer coisa além de
   "Abertura 9h" era cortada, o que derrota o propósito de poder renomear. */
.setup-head input.sname{
  flex:1 0 100%; min-width:0; width:100%;
  background:transparent; border:1px solid transparent; border-radius:6px;
  /* Caixa alta com espaçamento largo cortava nomes curtos como "Abertura 9h".
     Caixa normal cabe bem mais no card estreito e continua legível. */
  font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.01em; text-transform:none; color:var(--gold-bright);
  padding:4px 6px; margin-left:-6px; text-overflow:ellipsis;
  transition:background .15s, border-color .15s;
}
.setup-head input.sname::placeholder{color:var(--gold-dim); opacity:1}
.setup-head input.sname:hover{background:rgba(255,255,255,.06); border-color:var(--line)}
.setup-head input.sname:focus{
  outline:none; background:rgba(0,0,0,.5); border-color:var(--gold-dim);
  box-shadow:0 0 0 3px rgba(255,255,255,.07);
}
/* os botões nunca encolhem nem escapam do card */
.setup-head{gap:4px 6px; flex-wrap:wrap; align-items:center}
.setup-actions{flex:0 0 auto; margin-left:auto}


/* =====================================================================
   Autopreenchimento do Chrome
   O Chrome pinta o campo de azul claro e ignora `background`. O jeito de
   contornar é a sombra interna, que ele respeita.
   ===================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--txt) !important;
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset !important;
  box-shadow:0 0 0 1000px var(--ink) inset !important;
  caret-color:var(--txt);
  transition:background-color 9999s ease-in-out 0s;
}
.login-card input:-webkit-autofill,
.gate-card input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #0d0d10 inset !important;
  box-shadow:0 0 0 1000px #0d0d10 inset !important;
}

/* aviso de erro: vermelho e com "!" no lugar do tique */
.toast.erro{border-color:rgba(255,69,58,.5); background:linear-gradient(180deg,rgba(255,69,58,.1),var(--panel2))}
.toast.erro .ck{color:var(--red); font-size:15px}
@media (max-width:560px){
  .toast{left:14px; right:14px; transform:translateY(90px); max-width:none; width:auto}
  .toast.show{transform:translateY(0)}
}