@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg: #0B0B0A;
  --bg-alt: #141311;
  --bg-alt-2: #1B1917;
  --orange: #F15A24;
  --orange-deep: #C7420F;
  --orange-dim: #7A3216;
  --cream: #F3EFE6;
  --gray: #948F85;
  --gray-dim: #55524B;
  --line: #2A2823;

  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;

  --edge: 14px; /* corner cut size */
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

.wrap{
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 480px){
  .wrap{ padding: 0 18px; }
}

/* corner-cut panel, used instead of rounded cards */
.panel{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
  padding: 32px;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,11,10,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 76px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.brand img{ height: 44px; width:44px; }
.brand-text{
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.5px;
  line-height: 1.05;
}
.brand-text span{
  display:block;
  color: var(--orange);
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 3px;
}

nav.main-nav{
  display:flex;
  gap: 4px;
}
nav.main-nav a{
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray);
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
nav.main-nav a:hover{ color: var(--cream); }
nav.main-nav a.active{
  color: var(--cream);
  border-bottom-color: var(--orange);
}

.nav-toggle{
  display:none;
  background:none;
  border: 1px solid var(--line);
  width: 42px;
  height: 42px;
  color: var(--cream);
  font-size: 20px;
  cursor:pointer;
}

@media (max-width: 860px){
  nav.main-nav{
    display:none;
    position:absolute;
    top: 76px;
    left:0; right:0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 8px 28px 20px;
  }
  nav.main-nav.open{ display:flex; }
  nav.main-nav a{ padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 88px 0 96px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero .wrap{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
}
@media (max-width: 760px){
  .hero{ padding: 32px 0 48px; }
  .hero .wrap{
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }
  .hero-art{ order: -1; margin-bottom: 55px; }
  .hero .btn-row{ justify-content: center; }
  .hero p.lede{ margin-left:auto; margin-right:auto; }
  .hero-eyebrow{ margin: 0 0 8px; }
  .hero h1{ margin: 0 0 14px; }
  .hero p.lede{ margin-bottom: 24px; }
}
.hero-eyebrow{
  color: var(--orange);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 14px;
}
.hero h1{
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
  margin: 0 0 22px;
  letter-spacing: 0.5px;
}
.hero h1 em{
  font-style:normal;
  color: var(--orange);
}
.hero p.lede{
  color: var(--gray);
  font-size: 18px;
  max-width: 46ch;
  margin: 0 0 32px;
}
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 26px;
  border: 1px solid var(--orange);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn-solid{ background: var(--orange); color: #14100C; }
.btn-solid:hover{ background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-ghost{ color: var(--cream); }
.btn-ghost:hover{ background: rgba(241,90,36,0.1); }
.btn:active{ transform: translateY(1px); }

.hero-art{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 1200px;
  animation: heroShake 0.7s 2.02s ease-out both;
}
@media (max-width: 480px){
  .hero-art{ max-width: 190px; margin: 0 auto 55px; }
  .impact-flash{ inset: -10%; }
  .flash-white{ inset: -10%; }
  .crack-svg{ inset: -4%; width: 108%; height: 108%; }
  .orbit-text{ inset: -4%; width: 108%; height: 108%; left: -4%; top: -4%; }
}

/* ---- impact flash ---- */
.impact-flash{
  position:absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,240,1) 0%, rgba(241,90,36,0.85) 24%, rgba(241,90,36,0) 62%);
  opacity: 0;
  pointer-events:none;
  animation: flashPulse 0.55s 2.0s ease-out both;
}
.flash-white{
  position:absolute;
  inset: -34%;
  border-radius: 50%;
  background: #F3EFE6;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events:none;
  animation: whiteFlash 0.28s 2.0s ease-out both;
}
.shockwave{
  position:absolute;
  left:50%; top:50%;
  width: 70px; height:70px;
  margin-left:-35px; margin-top:-35px;
  border-radius:50%;
  border: 3px solid rgba(243,239,230,0.9);
  opacity:0;
  pointer-events:none;
  animation: shockwaveExpand 0.65s 1.98s ease-out both;
}

/* ---- crack lines + flying shards ---- */
.crack-svg{
  position:absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  overflow: visible;
  pointer-events:none;
}
.crack-lines{
  opacity: 0;
  animation: crackAppear 0.85s 2.0s ease-out both;
}
.crack-lines path{
  stroke: #F3EFE6;
  stroke-width: 4;
  fill:none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(241,90,36,0.85));
}
.shard{
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: shatterFly 0.7s ease-out both;
}

/* ---- fist stage (3D punch) ---- */
.fist-stage{
  position:relative;
  width: 100%;
  max-width: 420px;
  transform-style: preserve-3d;
  opacity: 1;
  transform: translateZ(0) scale(1) rotateX(0) rotateY(0);
  animation: punchIn 0.75s 2s cubic-bezier(.2,.9,.3,1.25) both;
}
.fist-stage img{
  width: 100%;
  display:block;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.55));
}

/* ---- orbiting team name + ring ---- */
.orbit-text{
  position:absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  left:-14%;
  top:-14%;
  opacity: 1;
  transform: scale(1);
  overflow: visible;
  animation: orbitReveal 0.7s 2.55s ease-out both;
}
.orbit-ring{
  stroke: var(--orange);
  stroke-width: 3;
}
.orbit-label{
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 1.3px;
}
.orbit-top textPath{ fill: var(--orange); }
.orbit-bottom textPath{ fill: var(--cream); }

@keyframes punchIn{
  0%   { opacity:0; transform: translateZ(-950px) scale(0.18) rotateX(24deg) rotateY(-18deg); filter: blur(7px); }
  55%  { opacity:1; transform: translateZ(60px) scale(1.09) rotateX(-5deg) rotateY(4deg); filter: blur(0); }
  75%  { transform: translateZ(-15px) scale(0.97) rotateX(2deg) rotateY(-1deg); }
  100% { opacity:1; transform: translateZ(0) scale(1) rotateX(0) rotateY(0); filter: blur(0); }
}

.hero-art{ transform-style: preserve-3d; }

@keyframes flashPulse{
  0%   { opacity: 0; transform: scale(0.6); }
  25%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes whiteFlash{
  0%   { opacity: 0; }
  20%  { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes shockwaveExpand{
  0%   { opacity: 0; transform: scale(0.3); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: scale(4.2); border-width: 1px; }
}

@keyframes crackAppear{
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes shatterFly{
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(1); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 140px), calc(var(--dy) * 140px)) rotate(50deg) scale(0.3); }
}

@keyframes orbitReveal{
  0%   { opacity: 0; transform: scale(0.82); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes heroShake{
  0%, 100% { transform: translate(0,0); }
  12% { transform: translate(-9px,4px); }
  26% { transform: translate(8px,-6px); }
  40% { transform: translate(-7px,3px); }
  55% { transform: translate(6px,-3px); }
  70% { transform: translate(-4px,2px); }
  85% { transform: translate(2px,-1px); }
}

@media (prefers-reduced-motion: reduce){
  .hero-art, .fist-stage, .orbit-text{ animation: none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .impact-flash, .flash-white, .shockwave, .crack-lines, .shard{ animation: none !important; opacity: 0 !important; }
}

/* ---------- Section scaffolding ---------- */
section{ padding: 84px 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.section-head .tag{
  color: var(--orange);
  font-weight: 700;
  font-size: 13.5px;
  margin: 0 0 8px;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  margin:0;
  letter-spacing: 0.3px;
}
.section-head p{
  color: var(--gray);
  max-width: 40ch;
  margin: 10px 0 0;
}

.page-hero{
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero .tag{ color: var(--orange); font-weight:700; font-size: 13.5px; margin:0 0 10px;}
.page-hero h1{
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 56px);
  margin: 0 0 16px;
  letter-spacing: 0.4px;
}
.page-hero p{ color: var(--gray); max-width: 60ch; font-size: 17px; }

/* ---------- Cards / grids ---------- */
.grid{
  display:grid;
  gap: 24px;
}
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 28px;
  clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
}
.card .num{
  font-family: var(--font-display);
  color: var(--orange-dim);
  font-size: 34px;
  line-height:1;
  margin-bottom: 14px;
}
.card h3{ margin: 0 0 10px; font-size: 19px; }
.card p{ margin:0; color: var(--gray); font-size: 15px; }

/* ---------- Philosophy / quote block ---------- */
.philosophy{
  background: var(--bg-alt);
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.philosophy blockquote{
  margin:0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.25;
  max-width: 22ch;
  color: var(--cream);
}
.philosophy blockquote span{ color: var(--orange); }
.philosophy cite{
  display:block;
  font-style:normal;
  color: var(--gray);
  font-size: 14px;
  margin-top: 18px;
}

/* ---------- Table (horarios) ---------- */
table.schedule{
  width:100%;
  border-collapse: collapse;
  font-size: 15px;
}
table.schedule th, table.schedule td{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
table.schedule th{
  font-family: var(--font-body);
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
}
table.schedule td.turma{ font-weight:600; }
table.schedule td.info{ color: var(--gray); }
.table-scroll{ overflow-x:auto; }

/* ---------- Belt progression ---------- */
.belt-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
}
.belt-row{
  display:grid;
  grid-template-columns: 56px 160px 1fr;
  gap: 20px;
  align-items:center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 480px){
  .belt-row{
    grid-template-columns: 32px 36px 1fr;
    gap: 12px;
  }
  .belt-row .num{ font-size: 17px; }
}
.belt-row .num{ font-family: var(--font-display); color: var(--orange-dim); font-size: 22px; }
.belt-swatch{
  height: 14px;
  border: 1px solid var(--line);
}
.belt-row .desc{ color: var(--gray); font-size: 14.5px; }
.belt-row .name{ font-weight:600; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }
.gallery-grid.portraits{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px){ .gallery-grid.portraits{ grid-template-columns: repeat(2,1fr); } }
.gallery-grid.landscapes{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px){ .gallery-grid.landscapes{ grid-template-columns: 1fr; } }
.gallery-item{
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  border: 3px solid var(--orange);
  clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
  padding: 6px;
  overflow: hidden;
}
.gallery-item.portrait{ aspect-ratio: 3/4; }
.gallery-item.landscape{ aspect-ratio: 16/9; }
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(calc(var(--edge) - 4px) 0, 100% 0, 100% calc(100% - calc(var(--edge) - 4px)), calc(100% - calc(var(--edge) - 4px)) 100%, 0 100%, 0 calc(var(--edge) - 4px));
}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 860px){ .contact-grid{ grid-template-columns: 1fr; } }
.info-row{
  display:flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.info-row .k{ color: var(--orange); font-weight:700; width: 110px; flex-shrink:0; font-size: 14px; }
.info-row .v{ color: var(--cream); font-size: 15px; }
.map-panel{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  min-height: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--gray-dim);
  font-size: 14px;
  text-align:center;
  padding: 24px;
}

form.contact-form{ display:flex; flex-direction:column; gap: 16px; }
form.contact-form label{ font-size: 13.5px; color: var(--gray); font-weight:600; margin-bottom:6px; display:block; }
form.contact-form input, form.contact-form textarea{
  width:100%;
  background: var(--bg-alt-2);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
}
form.contact-form input:focus, form.contact-form textarea:focus{
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}
form.contact-form textarea{ resize: vertical; min-height: 110px; }

.form-status{
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  min-height: 1.4em;
}
.form-status.success{ color: var(--orange); }
.form-status.error{ color: var(--cream); }
form.contact-form button[disabled]{ opacity: 0.6; cursor: not-allowed; }

.choice-field{ border:0; padding:0; margin:0; min-width:0; }
.choice-field legend{ font-size:13.5px; color:var(--gray); font-weight:600; margin-bottom:4px; }
.field-help{ color:var(--gray-dim); font-size:12.5px; margin:0 0 8px; }
.check-grid{ display:grid; gap:7px; max-height:180px; overflow:auto; padding:10px; background:var(--bg-alt-2); border:1px solid var(--line); }
.check-option{ display:flex; align-items:flex-start; gap:8px; color:var(--cream); font-size:14px; cursor:pointer; }
.check-option input{ width:auto !important; margin-top:3px; accent-color:var(--orange); }
.nucleos-dialog{ width:min(520px, calc(100% - 32px)); color:var(--cream); background:var(--bg-alt); border:1px solid var(--line); padding:24px; }
.nucleos-dialog::backdrop{ background:rgba(0,0,0,.72); }
.nucleos-dialog h3{ margin-top:0; }
.dialog-actions{ justify-content:flex-end; margin-top:18px; }

/* ---------- CTA strip ---------- */
.cta-strip{
  background: var(--orange);
  color: #14100C;
  padding: 52px 0;
}
.cta-strip .wrap{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-strip h2{
  font-family: var(--font-display);
  font-size: clamp(26px,3.4vw,38px);
  margin:0;
}
.cta-strip .btn{ border-color:#14100C; }
.cta-strip .btn-solid{ background:#14100C; color: var(--cream); }
.cta-strip .btn-solid:hover{ background:#000; }

/* ---------- Footer ---------- */
footer{ padding: 48px 0 40px; }
footer .wrap{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  gap: 24px;
  flex-wrap:wrap;
}
footer .f-brand{ display:flex; gap:12px; align-items:center; }
footer .f-brand img{ height:36px; width:36px; }
footer .f-brand span{ font-family: var(--font-display); font-size:15px; }
footer .f-links{ display:flex; gap: 28px; flex-wrap:wrap; }
footer .f-links a{ color: var(--gray); font-size: 14px; font-weight:600; }
footer .f-links a:hover{ color: var(--orange); }
footer .f-note{ color: var(--gray-dim); font-size: 12.5px; margin-top: 24px; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* ================= PAINEL (login + dashboards) ================= */

.login-wrap{
  min-height: calc(100vh - 76px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 24px;
}
.login-card{
  width: 100%;
  max-width: 400px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
  padding: 40px 32px;
}
.login-card h1{
  font-family: var(--font-display);
  font-size: 28px;
  margin: 0 0 8px;
}
.login-card p.sub{ color: var(--gray); font-size: 14.5px; margin: 0 0 28px; }
.login-card form{ display:flex; flex-direction:column; gap:16px; }
.login-card label{ font-size: 13.5px; color: var(--gray); font-weight:600; margin-bottom:6px; display:block; }
.login-card input{
  width:100%;
  background: var(--bg-alt-2);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
}
.login-card input:focus{ outline:2px solid var(--orange); outline-offset:1px; }
#showCadastro{
  background: var(--orange);
  border-color: var(--orange);
  color: #14100C;
}
#showCadastro:hover{
  background: var(--orange-deep);
  border-color: var(--orange-deep);
}
.login-error{
  color: var(--orange);
  font-size: 13.5px;
  font-weight:600;
  min-height: 1.4em;
  margin: 0;
}
.login-back{ display:block; text-align:center; margin-top:22px; color: var(--gray); font-size: 13.5px; }
.login-back:hover{ color: var(--orange); }

/* dashboard shell */
.panel-header{
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.panel-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.panel-header .role-tag{
  color: var(--orange);
  font-size: 12.5px;
  font-weight:700;
  letter-spacing:0.4px;
}
.panel-header h1{
  font-family: var(--font-display);
  font-size: 22px;
  margin: 2px 0 0;
}
.panel-user{ display:flex; align-items:center; gap:16px; }
.panel-user span{ color: var(--gray); font-size: 14px; }
.btn-small{
  font-size: 13px;
  padding: 9px 16px;
}

.panel-nav{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.panel-nav button{
  background:none;
  border: 1px solid var(--line);
  color: var(--gray);
  font-family: var(--font-body);
  font-weight:600;
  font-size: 13.5px;
  padding: 9px 16px;
  cursor:pointer;
}
.panel-nav button.active{ color: var(--cream); border-color: var(--orange); background: rgba(241,90,36,0.08); }

.panel-section{ display:none; padding: 40px 0; }
.panel-section.active{ display:block; }
.panel-section h2{
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 6px;
}
.panel-section p.hint{ color: var(--gray); font-size: 14px; margin: 0 0 28px; }

.panel-form{
  background: var(--bg-alt);
  border: 1px solid var(--line);
  clip-path: polygon(var(--edge) 0, 100% 0, 100% calc(100% - var(--edge)), calc(100% - var(--edge)) 100%, 0 100%, 0 var(--edge));
  padding: 24px;
  margin-bottom: 32px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items:end;
}
.panel-form .field{ display:flex; flex-direction:column; }
.panel-form label{ font-size: 12.5px; color: var(--gray); font-weight:600; margin-bottom:6px; }
.panel-form input, .panel-form select, .panel-form textarea{
  background: var(--bg-alt-2);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  width:100%;
}
.panel-form textarea{ min-height: 80px; resize:vertical; }
.panel-form .field.full{ grid-column: 1 / -1; }
.panel-form .form-actions{ grid-column: 1 / -1; display:flex; gap:12px; align-items:center; }
.panel-form .form-status{ margin:0; }

.panel-table-wrap{
  border: 1px solid var(--line);
  overflow-x:auto;
}
table.panel-table{ width:100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table.panel-table th, table.panel-table td{
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align:left;
  vertical-align: middle;
}
table.panel-table th{ color: var(--orange); font-weight:700; font-size:12.5px; }
table.panel-table td.muted{ color: var(--gray); }
.row-actions{ display:flex; gap:8px; }
.icon-btn{
  background:none;
  border: 1px solid var(--line);
  color: var(--gray);
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight:600;
  cursor:pointer;
  font-family: var(--font-body);
}
.icon-btn:hover{ color: var(--cream); border-color: var(--orange); }
.icon-btn.danger:hover{ color: var(--orange); }

.empty-state{
  padding: 40px 20px;
  text-align:center;
  color: var(--gray);
  font-size: 14.5px;
}

.badge{
  display:inline-block;
  font-size: 11.5px;
  font-weight:700;
  padding: 3px 9px;
  border: 1px solid var(--line);
  color: var(--gray);
}
.badge.admin{ color: var(--orange); border-color: var(--orange); }
.badge.professor{ color: var(--cream); border-color: var(--cream); }
.badge.aluno{ color: var(--gray); }

.thumb-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:12px; margin-top:20px; }
.thumb-item{ position:relative; aspect-ratio: 4/3; border: 1px solid var(--line); overflow:hidden; }
.thumb-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-item .icon-btn{ position:absolute; top:6px; right:6px; background: rgba(11,11,10,0.75); }

@media (max-width: 640px){
  .panel-form{ grid-template-columns: 1fr; }
  .panel-header .wrap{ flex-direction:column; align-items:flex-start; }
}

.nav-login{ color: var(--orange) !important; }