/* ============================================================
   OFICINA DE DESENHO TIO FELIPE — Design System
   Paleta original preservada. Mobile-first, responsivo de
   celular a TV. Tema: atelie de desenho infantil.
   ============================================================ */
:root {
  /* Paleta ORIGINAL do sistema (verde-oliva + acentos). */
  --primary-color: #7a8f2e;      /* oliva (botoes) — tom legivel com texto branco */
  --primary-light: #95aa37;      /* oliva claro (brand) */
  --primary-dark: #5f7220;       /* oliva escuro (hover/titulos) */
  --primary-grad: linear-gradient(135deg, #95aa37, #7a8f2e);
  --forest: #1a5c33;             /* verde-floresta (profundidade) */
  --forest-2: #2d7d46;
  --sidebar-grad: linear-gradient(170deg, #8a9e35, #5f7220);
  --success-color: #2d7d46;
  --danger-color: #d92d20;
  --warning-color: #ff9800;
  --info-color: #0284c7;
  --admin-button-color: #0891b2; /* ciano (acao admin) */
  --admin-button-hover: #0e7490;
  --accent-yellow: #ffd93d;
  --accent-pink: #ff8fb1;
  --text-dark: #1b1b1b;
  --text-light: #ffffff;
  --text-gray: #6b7280;
  --bg-light: #f6f7ef;
  --bg-white: #ffffff;
  --border-light: #e5e7eb;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --radius: 8px;

  /* Derivados */
  --paper: #f7f8f1;
  --ink: #1f2410;
  --primary-soft: #eef2dc;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-soft: 0 6px 22px rgba(45, 125, 70, 0.08);
  --shadow-lift: 0 16px 40px rgba(26, 92, 51, 0.16);
  --ring: 0 0 0 4px rgba(149, 170, 55, 0.28);
  --sidebar-w: 264px;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(107, 109, 184, 0.08), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(77, 182, 172, 0.08), transparent 38%);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .brand-name { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Boot ---------- */
.boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 16px; background: var(--paper); z-index: 60;
}
.boot-mark svg { animation: bob 1.4s ease-in-out infinite; filter: drop-shadow(var(--shadow-soft)); }
.boot-text { font-family: var(--font-display); color: var(--primary-color); font-size: 1.05rem; }
@keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  background:
    radial-gradient(1100px 600px at 100% -10%, rgba(149, 170, 55, 0.30), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(45, 125, 70, 0.20), transparent 55%),
    linear-gradient(160deg, #ffffff, var(--paper));
}
.login-card {
  width: min(410px, 100%); background: var(--bg-white); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift); padding: clamp(26px, 5vw, 40px) clamp(22px, 5vw, 36px) clamp(22px, 4vw, 30px);
  border: 1px solid rgba(45, 125, 70, 0.08); text-align: center;
  animation: rise .5s cubic-bezier(.16,1,.3,1) both;
}
.login-logo-full { display: block; width: min(300px, 78%); height: auto; margin: 4px auto 6px; }
.login-card .sub { color: var(--text-gray); margin: 0 0 22px; font-weight: 700; font-size: .92rem; }
.login-card form { text-align: left; }
.login-card .field { margin-bottom: 16px; }
.login-card .field > label { color: var(--forest); }
.login-card .field input { display: block; width: 100%; min-height: 50px; }
.login-card .btn.block { margin-top: 4px; min-height: 50px; }
.login-msg { background: #fde7e7; color: var(--danger-color); border-radius: 12px; padding: 11px 14px; font-weight: 700; font-size: .9rem; margin-bottom: 16px; text-align: left; }
.login-foot { margin: 16px 0 0; font-size: .82rem; color: var(--text-gray); font-weight: 600; }

/* ============================================================
   CAMPOS DE FORMULARIO (globais)
   ============================================================ */
.field { margin-bottom: 15px; }
.field > label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--primary-dark); }
.input, input[type="text"], input[type="password"], input[type="number"], input[type="email"],
input[type="date"], select, textarea {
  width: 100%; padding: 13px 15px; font: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--border-light); border-radius: 14px;
  transition: border-color .15s, box-shadow .15s; min-height: 48px;
}
textarea { min-height: 96px; resize: vertical; }
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-light); box-shadow: var(--ring);
}

/* ============================================================
   BOTOES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; min-height: 42px; border: none; border-radius: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  background: var(--primary-grad); color: #fff; transition: transform .12s, box-shadow .15s, filter .15s;
  box-shadow: 0 6px 16px rgba(122, 143, 46, 0.32);
}
.btn:hover { filter: brightness(.94); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.block { width: 100%; }
.btn.ghost { background: var(--primary-soft); color: var(--primary-dark); box-shadow: none; }
.btn.ghost:hover { background: #e2e5f8; }
.btn.success { background: var(--success-color); box-shadow: 0 6px 16px rgba(46,125,50,.28); }
.btn.danger { background: var(--danger-color); box-shadow: 0 6px 16px rgba(198,40,40,.28); }
.btn.warning { background: var(--warning-color); box-shadow: 0 6px 16px rgba(245,124,0,.28); }
.btn.admin { background: var(--admin-button-color); box-shadow: 0 6px 16px rgba(77,182,172,.3); }
.btn.admin:hover { background: var(--admin-button-hover); }
.btn.sm { padding: 7px 12px; min-height: 36px; font-size: .84rem; border-radius: 10px; }
.btn.icon { padding: 10px; min-width: 44px; min-height: 44px; }

/* ============================================================
   LAYOUT (shell app)
   ============================================================ */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }

.sidebar {
  background: var(--sidebar-grad);
  color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  padding-top: max(18px, env(safe-area-inset-top));
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand-logo { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 6px 16px rgba(0,0,0,.22); overflow: hidden; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.brand:hover .brand-logo { transform: rotate(-5deg) scale(1.06); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { font-size: 1.12rem; color: #fff; line-height: 1.05; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 700; font-size: .68rem; opacity: .82; letter-spacing: .04em; text-transform: uppercase; }

.nav-group-label { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 12px 12px 6px; font-weight: 800; }
.navlink {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 13px;
  color: #f2f5e4; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; overflow: hidden;
  transition: background .2s ease, color .2s ease, transform .18s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
  animation: navIn .5s cubic-bezier(.16,1,.3,1) both;
}
.navlink svg { flex: none; opacity: .92; transition: transform .22s cubic-bezier(.16,1,.3,1); z-index: 1; }
.navlink span { z-index: 1; }
.navlink::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 4px; height: 58%; border-radius: 4px; background: #fff; opacity: 0;
  transition: transform .24s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.navlink:hover { background: rgba(255,255,255,.15); transform: translateX(4px); }
.navlink:hover svg { transform: scale(1.14) rotate(-3deg); }
.navlink:hover::before { opacity: .55; transform: translateY(-50%) scaleY(1); }
.navlink:active { transform: translateX(3px) scale(.985); }
.navlink.active {
  background: #fff; color: var(--primary-dark);
  box-shadow: 0 10px 24px rgba(47,48,102,.22); transform: none;
}
.navlink.active svg { opacity: 1; color: var(--primary-color); transform: scale(1.06); }
.navlink.active::before { opacity: 1; background: var(--primary-color); transform: translateY(-50%) scaleY(1); }
#navLinks .navlink:nth-child(1){animation-delay:.03s}
#navLinks .navlink:nth-child(2){animation-delay:.07s}
#navLinks .navlink:nth-child(3){animation-delay:.11s}
#navLinks .navlink:nth-child(4){animation-delay:.15s}
#navLinks .navlink:nth-child(5){animation-delay:.19s}
#navLinks .navlink:nth-child(6){animation-delay:.23s}
#navLinks .navlink:nth-child(7){animation-delay:.27s}
#navLinks .navlink:nth-child(8){animation-delay:.31s}
#navLinks .navlink:nth-child(9){animation-delay:.35s}
#navLinks .navlink:nth-child(10){animation-delay:.39s}
#navLinks .navlink:nth-child(11){animation-delay:.43s}
@keyframes navIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .navlink { animation: none; } }
.sidebar-foot { margin-top: auto; padding-top: 12px; font-size: .72rem; opacity: .7; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 14px clamp(16px, 3vw, 32px); background: rgba(250,247,242,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(46,48,102,.08); padding-top: max(14px, env(safe-area-inset-top));
}
.topbar h2 { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--primary-dark); margin: 0; flex: 1; min-width: 0; }
.menu-btn { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid rgba(46,48,102,.1);
  padding: 8px 13px; border-radius: 999px; font-weight: 800; color: var(--primary-dark); box-shadow: var(--shadow-soft); white-space: nowrap;
}
.chip.points { background: var(--warning-color); color: #fff; border-color: transparent; }
.chip.streak { background: #fff3e0; color: var(--warning-color); border-color: #ffe0b2; }

.content { padding: clamp(14px, 2.4vw, 26px); padding-bottom: 48px; max-width: 1240px; width: 100%; margin: 0 auto; }
.view { animation: rise .38s cubic-bezier(.16,1,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ---------- Bottom nav (mobile) ---------- */
.bottomnav { display: none; }

/* ============================================================
   CARTOES / GRIDS
   ============================================================ */
.card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid rgba(46,48,102,.05); padding: 15px; }
.grid { display: grid; gap: clamp(10px, 1.5vw, 16px); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid.gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid.rewards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.hero {
  background: var(--primary-grad);
  color: #fff; border-radius: var(--radius-xl); padding: clamp(18px, 3vw, 26px); position: relative; overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.hero h1 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin: 0 0 6px; }
.hero p { margin: 0; font-weight: 600; opacity: .92; max-width: 60ch; font-size: .95rem; }
.hero::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.12); }

.stat { background: #fff; border-radius: var(--radius-lg); padding: 15px 16px; box-shadow: var(--shadow-soft); }
.stat .n { font-family: var(--font-display); font-size: clamp(1.35rem, 3vw, 1.7rem); color: var(--primary-color); line-height: 1.1; }
.stat .l { color: var(--text-gray); font-weight: 700; font-size: .8rem; margin-top: 2px; }

/* Aula card */
.aula-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.aula-thumb { aspect-ratio: 16/10; background: var(--primary-soft); display: grid; place-items: center; overflow: hidden; }
.aula-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aula-thumb .ph { font-family: var(--font-display); font-size: 2.4rem; color: var(--primary-light); }
.aula-body { padding: 15px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.aula-body h3 { font-size: 1.08rem; color: var(--primary-dark); margin: 0; }
.aula-body p { margin: 0; color: var(--text-gray); font-size: .9rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aula-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-weight: 800; font-size: .76rem; }
.badge.ok { background: #e8f5e9; color: var(--success-color); }
.badge.on { background: #fff3e0; color: var(--warning-color); }
.badge.draft { background: #eceff1; color: #607d8b; }
.badge.arch { background: #fbe9e7; color: #8d6e63; }
.badge.info { background: #e1f5fe; color: var(--info-color); }
.badge.rar-comum { background: #eceff1; color: #546e7a; }
.badge.rar-raro { background: #e3f2fd; color: #1976d2; }
.badge.rar-epico { background: #f3e5f5; color: #8e24aa; }
.badge.rar-lendario { background: #fff8e1; color: #f9a825; }

/* Progress */
.progress { height: 10px; background: var(--primary-soft); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--success-color)); border-radius: 999px; transition: width .5s cubic-bezier(.16,1,.3,1); }

/* ============================================================
   TABELAS (com fallback para cartoes no mobile)
   ============================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: #fff; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data th, table.data td { padding: 13px 14px; text-align: left; border-bottom: 1px solid #f0f0f4; font-size: .92rem; }
table.data th { background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; position: sticky; top: 0; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: #fafaff; }
.rank-pos { font-family: var(--font-display); font-weight: 700; color: var(--primary-color); }
.rank-1 { color: #f9a825; } .rank-2 { color: #90a4ae; } .rank-3 { color: #a1887f; }

/* ============================================================
   CANVAS DE DESENHO
   ============================================================ */
.draw-stage { display: grid; grid-template-columns: 1fr; gap: 16px; }
.canvas-holder { background: linear-gradient(180deg,#ffffff,#fbfcf7); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 14px; }
.canvas-stack {
  position: relative; margin: 0 auto;
  width: min(100%, calc((100dvh - 340px) * 4 / 3));
  aspect-ratio: 4 / 3; max-height: calc(100dvh - 340px); min-height: 300px;
  border-radius: 14px; border: 2px solid #eef0e6; background: #fff;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.02), 0 2px 10px rgba(0,0,0,.05);
  touch-action: none;
}
.canvas-stack .ref-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; z-index: 1; }
#drawCanvas { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; touch-action: none; display: block; z-index: 2; cursor: crosshair; }
.ref-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; background: var(--primary-soft); border-radius: 12px; font-weight: 800; font-size: .82rem; color: var(--primary-dark); }
.ref-controls input[type="range"] { flex: 1; }

/* ---- barra de ferramentas premium (estilo Paint) ---- */
.toolbar { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--border-light); border-radius: 14px; box-shadow: var(--shadow-soft); }
.tool-group { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--bg-light); border-radius: 12px; }
.tool-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 40px; padding: 0 11px; border: 2px solid transparent; border-radius: 10px; background: #fff; font-weight: 800; font-size: .92rem; color: var(--text-dark); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .12s cubic-bezier(.16,1,.3,1), border-color .15s, background .15s; }
.tool-btn:hover { transform: translateY(-2px); }
.tool-btn:active { transform: translateY(0) scale(.97); }
.tool-btn.active { border-color: var(--primary-color); background: var(--primary-soft); color: var(--primary-dark); }
.tool-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.tool-swatches { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); cursor: pointer; transition: transform .12s cubic-bezier(.16,1,.3,1); }
.swatch:hover { transform: scale(1.15); }
.swatch.active { box-shadow: 0 0 0 3px var(--primary-color); transform: scale(1.15); }
.swatch.custom { position: relative; overflow: hidden; background: conic-gradient(from .25turn, #f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.swatch.custom input { position: absolute; inset: -4px; opacity: 0; cursor: pointer; }
.size-dots { display: flex; align-items: center; gap: 6px; }
.size-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; border: 2px solid transparent; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .12s, border-color .15s; }
.size-dot:hover { transform: translateY(-1px); }
.size-dot i { display: block; border-radius: 50%; background: var(--text-dark); }
.size-dot.active { border-color: var(--primary-color); background: var(--primary-soft); }
.pen-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--success-color); background: #e8f5e9; padding: 6px 10px; border-radius: 999px; }

/* ============================================================
   CHAT IA — TIO FELIPE
   ============================================================ */
.chat { display: flex; flex-direction: column; height: min(70dvh, 640px); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--primary-grad); color: #fff; }
.chat-head .av { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.chat-head b { font-family: var(--font-display); }
.chat-head span { font-size: .78rem; opacity: .9; display: block; font-weight: 700; }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; background: linear-gradient(180deg, #fbfaff, #fff); }
.msg { max-width: 82%; padding: 12px 15px; border-radius: 18px; font-weight: 600; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: pop .25s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: none } }
.msg.user { align-self: flex-end; background: var(--primary-color); color: #fff; border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--primary-soft); color: var(--ink); border-bottom-left-radius: 6px; }
.msg.bot img { border-radius: 12px; margin-top: 8px; max-height: 220px; }
.msg .typing { display: inline-flex; gap: 4px; }
.msg .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary-light); animation: blink 1.2s infinite; }
.msg .typing i:nth-child(2){ animation-delay: .2s } .msg .typing i:nth-child(3){ animation-delay: .4s }
@keyframes blink { 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
.chat-form { display: flex; gap: 10px; padding: 12px; border-top: 1px solid #f0f0f4; background: #fff; }
.chat-form input { flex: 1; }
.chat-suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 12px 12px; }
.chip-suggest { background: var(--primary-soft); color: var(--primary-dark); border: none; padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: .84rem; }
.chip-suggest:hover { background: #e2e5f8; }

/* ============================================================
   MODAIS
   ============================================================ */
.overlay { position: fixed; inset: 0; background: rgba(35,35,58,.55); backdrop-filter: blur(3px); z-index: 50; display: grid; place-items: center; padding: 18px; padding-top: max(18px, env(safe-area-inset-top)); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal { width: min(560px, 100%); max-height: 90dvh; overflow-y: auto; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); animation: rise .3s cubic-bezier(.16,1,.3,1) both; }
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #f0f0f4; position: sticky; top: 0; background: #fff; z-index: 1; }
.modal-head h3 { margin: 0; color: var(--primary-dark); font-size: 1.2rem; }
.modal-body { padding: 22px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid #f0f0f4; position: sticky; bottom: 0; background: #fff; }
.x-btn { background: #f0f0f4; border: none; width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; color: var(--text-gray); }
.x-btn:hover { background: #e6e6ee; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 55; display: grid; place-items: center; padding: 20px; }
.lightbox img { max-width: 92vw; max-height: 88dvh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100% - 24px)); }
.toast { padding: 14px 18px; border-radius: 14px; color: #fff; font-weight: 700; box-shadow: var(--shadow-lift); animation: rise .3s ease both; }
.toast.ok { background: var(--success-color); }
.toast.err { background: var(--danger-color); }
.toast.info { background: var(--info-color); }

/* ---------- Utilidades ---------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
.section-title h3 { margin: 0; color: var(--primary-dark); font-size: 1.25rem; }
.muted { color: var(--text-gray); font-weight: 600; }
.empty { text-align: center; padding: 48px 20px; color: var(--text-gray); }
.empty svg { opacity: .4; margin-bottom: 10px; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--primary-soft); border-top-color: var(--primary-color); border-radius: 50%; animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg) } }
.stack { display: flex; flex-direction: column; gap: 14px; }
.pill-help { background: #e1f5fe; color: var(--info-color); border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: .85rem; }

/* Reward card */
.reward { text-align: center; padding: 16px 12px; position: relative; }
.reward .fig { width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--primary-soft); display: grid; place-items: center; overflow: hidden; margin-bottom: 10px; }
.reward .fig img { width: 100%; height: 100%; object-fit: cover; }
.reward.locked .fig { filter: grayscale(1) opacity(.5); }
.reward.locked .fig::after { content: "🔒"; position: absolute; font-size: 1.8rem; }
.reward h4 { margin: 0 0 4px; font-size: .95rem; color: var(--primary-dark); }

/* ============================================================
   RESPONSIVIDADE — breakpoints
   ============================================================ */

/* Tablet retrato / iPad / Galaxy Tab: sidebar vira gaveta */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 45; width: min(280px, 82vw); height: 100dvh;
    transform: translateX(-102%); transition: transform .28s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 44; opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(46,48,102,.12); background: #fff; color: var(--primary-dark); }
  .content { padding-bottom: 40px; }
}

/* Celular: navegacao apenas pelo menu hamburger (sem barra inferior) */
@media (max-width: 640px) {
  .two-col { grid-template-columns: 1fr; }
  .grid.cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .grid.gallery, .grid.rewards { grid-template-columns: repeat(auto-fill, minmax(46vw, 1fr)); }
  .chat { height: min(66dvh, 560px); }
  .msg { max-width: 88%; }

  .bottomnav { display: none !important; }
  .content { padding-bottom: 40px; }
  .modal { border-radius: 20px 20px 0 0; align-self: flex-end; margin-top: auto; }
  .overlay { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; }

  /* Tabelas viram cartoes empilhados (legivel no celular) */
  .table-wrap { overflow: visible; box-shadow: none; background: transparent; }
  table.data { min-width: 0; display: block; }
  table.data thead { display: none; }
  table.data tbody { display: block; }
  table.data tr { display: block; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 12px 14px; margin-bottom: 12px; }
  table.data tr:hover td { background: transparent; }
  table.data td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f2f2f5; font-size: .95rem; text-align: right; }
  table.data td:last-child { border-bottom: none; }
  table.data td::before { content: attr(data-label); font-weight: 800; color: var(--text-gray); text-align: left; flex: 0 0 auto; }
  table.data td.cell-actions { display: block; text-align: left; padding-top: 10px; }
  table.data td.cell-actions::before { display: block; margin-bottom: 8px; }
  table.data td.cell-actions .btn { flex: 1; min-width: 88px; }
}

/* Telas muito pequenas (ex.: iPhone SE) */
@media (max-width: 360px) {
  .topbar h2 { font-size: 1.05rem; }
  .chip { padding: 7px 10px; font-size: .82rem; }
}

/* TVs / monitores grandes: escala e centraliza */
@media (min-width: 1600px) {
  :root { --sidebar-w: 300px; }
  .content { max-width: 1600px; }
  html { font-size: 17.5px; }
}
@media (min-width: 2200px) {
  html { font-size: 19px; }
  .content { max-width: 1900px; }
}

/* Preferencia por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Foco visivel (acessibilidade) */
:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; border-radius: 6px; }

/* ---------- Seletor de temas (gerador) ---------- */
.tema-toggle {
  margin-top: 8px; background: var(--primary-soft); color: var(--primary-dark); border: none;
  padding: 9px 14px; border-radius: 12px; font-weight: 800; font-size: .86rem; width: 100%; text-align: left;
}
.tema-toggle:hover { filter: brightness(.97); }
.tema-chips {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto;
  padding: 12px; border: 1px solid var(--border-light); border-radius: 14px; background: #fff;
}
.tema-chips .chip-suggest { font-size: .82rem; }

/* ===== Painel: graficos ===== */
.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.chart-card{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.chart-card svg{width:100%;height:auto;display:block}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ch-head h3{font-size:1rem}
.ch-head span{font-size:.72rem;color:var(--text-gray);font-weight:700}
.ch-flex{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ch-flex svg{width:150px;flex:0 0 auto}
.ch-legend{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:700;color:#4a4d38}
.ch-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.ch-legend b{color:#2b3410;margin-left:4px}
.hbars{display:flex;flex-direction:column;gap:8px}
.hbar-row{display:flex;align-items:center;gap:10px}
.hb-n{flex:0 0 92px;font-size:.78rem;font-weight:800;color:#3f4229;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-track{flex:1;height:12px;background:#eef0e2;border-radius:99px;overflow:hidden}
.hb-fill{height:100%;border-radius:99px;transition:width .5s ease}
.hb-v{flex:0 0 auto;font-size:.78rem;font-weight:800;color:#5a5d44;min-width:44px;text-align:right}
.stat.warn .n{color:var(--warning)}
/* ===== Aulas por categoria ===== */
.cat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px}
.cat-chip{border:1.5px solid var(--border-light);background:var(--bg-white);border-radius:999px;padding:6px 14px;font-weight:800;font-size:.82rem;color:#4a4d38;cursor:pointer;transition:all .18s}
.cat-chip:hover{border-color:var(--primary-light);color:var(--primary-dark)}
.cat-chip.on{background:var(--primary-grad);border-color:transparent;color:#fff;box-shadow:0 3px 8px rgba(122,143,46,.35)}
.cat-chip .ct{opacity:.85;font-weight:700;margin-left:5px;font-size:.74rem}
.cat-sec{margin:14px 0 6px;display:flex;align-items:center;gap:10px}
.cat-sec h4{font-size:1.02rem;color:#2b3410}
.cat-sec .line{flex:1;height:2px;background:linear-gradient(90deg,#dfe3c8,transparent)}
.cat-sec .badge-n{background:var(--primary-soft);color:var(--primary-dark);font-weight:800;font-size:.74rem;border-radius:99px;padding:3px 10px}

/* ===== Estúdio: blocos da toolbar + estabilizador ===== */
.toolbar{align-items:flex-start}
.tool-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-block.grow{flex:1 1 220px}
.tool-cap{font-size:.64rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-gray);padding-left:2px}
.seg{display:inline-flex;background:var(--bg-light);border:1.5px solid var(--border-light);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 13px;border-radius:999px;font-weight:800;font-size:.78rem;color:#5a5d44;cursor:pointer;transition:all .18s}
.seg button:hover{color:var(--primary-dark)}
.seg button.on{background:var(--primary-grad);color:#fff;box-shadow:0 2px 6px rgba(122,143,46,.4)}
.tool-swatches{max-width:340px}

/* ===== ENTERPRISE POLISH ===== */
/* entrada suave das telas */
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view{animation:viewIn .34s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){.view{animation:none}}

/* elevação refinada e hover dos cards */
.card{border:1px solid rgba(95,114,32,.10);box-shadow:0 1px 2px rgba(43,52,16,.05),0 4px 14px rgba(43,52,16,.06);transition:box-shadow .22s,transform .22s}
.grid.cards .card:hover,.grid.gallery .card:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(43,52,16,.08),0 14px 30px rgba(43,52,16,.12)}

/* hero premium com textura sutil */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 42%),
  radial-gradient(circle at 8% 92%, rgba(26,92,51,.20), transparent 46%);}
.hero>*{position:relative;z-index:1}

/* botões: foco acessível + clique tátil */
.btn{transition:transform .15s,box-shadow .2s,background .2s,filter .2s}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.tool-btn:focus-visible,.cat-chip:focus-visible,.seg button:focus-visible{outline:3px solid rgba(122,143,46,.45);outline-offset:2px}

/* inputs refinados */
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:var(--primary-light);box-shadow:0 0 0 4px rgba(122,143,46,.14)}

/* scrollbar sutil */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c9cfad;border-radius:99px;border:2.5px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#aeb68d;border:2.5px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* toolbar do estúdio em vidro */
.toolbar{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(95,114,32,.12);box-shadow:0 6px 22px rgba(43,52,16,.09)}

/* tabelas mais legíveis */
table tbody tr{transition:background .15s}
table tbody tr:hover{background:var(--primary-soft)}

/* badges refinados */
.badge{letter-spacing:.2px}
.tool-group{flex-wrap:wrap}
@media (max-width:640px){ .tool-block.grow{flex-basis:100%} .tool-swatches{max-width:none} }

/* ===================== SIDEBAR ENTERPRISE v2 ===================== */
.sidebar{
  background:
    radial-gradient(circle at 85% -4%, rgba(149,170,55,.30), transparent 42%),
    radial-gradient(circle at -10% 104%, rgba(26,92,51,.35), transparent 46%),
    linear-gradient(178deg,#1f2d10 0%,#182309 56%,#121b06 100%);
  gap:0; padding:16px 12px;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.05), 8px 0 28px rgba(16,24,5,.25);
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)}

.brand{border-bottom:1px solid rgba(255,255,255,.09);padding:6px 8px 16px;margin-bottom:8px;position:relative}
.brand::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:1px;background:linear-gradient(90deg,rgba(149,170,55,.65),transparent)}
.brand-logo{box-shadow:0 8px 20px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.10)}
.brand-name{font-size:1.14rem}
.brand-name small{opacity:.65;letter-spacing:.1em}

.nav-sec{margin:10px 0 2px;display:flex;flex-direction:column;gap:2px}
.nav-sec-label{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,236,196,.45);margin:8px 12px 6px;user-select:none}

.navlink{padding:9px 10px;border-radius:12px;color:#dbe4c4;font-size:.92rem;gap:11px}
.icon-chip{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:all .22s cubic-bezier(.16,1,.3,1)}
.icon-chip svg{width:17px;height:17px;opacity:.95}
.navlink:hover{background:rgba(255,255,255,.07);transform:translateX(3px);color:#fff}
.navlink:hover .icon-chip{background:rgba(149,170,55,.32);box-shadow:inset 0 0 0 1px rgba(149,170,55,.5)}
.navlink::before{left:2px;width:3.5px;background:#e4f28a}
.navlink.active{
  background:linear-gradient(120deg,rgba(149,170,55,.95),rgba(111,132,41,.92));
  color:#fff;box-shadow:0 6px 18px rgba(20,30,6,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transform:none;
}
.navlink.active::before{opacity:1;transform:translateY(-50%) scaleY(1)}
.navlink.active .icon-chip{background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.navlink.active span:last-child{text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* user card no rodapé */
.user-card{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.user-ava{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#95aa37,#2d7d46);color:#fff;font-weight:800;font-family:var(--font-display);font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.25)}
.user-info{min-width:0;line-height:1.15}
.user-info b{display:block;color:#f2f5e4;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info span{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(226,236,196,.55)}
.user-out{margin-left:auto;flex:none;width:34px;height:34px;border:none;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.08);color:#e8eed2;transition:all .2s}
.user-out svg{width:16px;height:16px}
.user-out:hover{background:var(--danger);color:#fff;transform:translateY(-1px);box-shadow:0 5px 12px rgba(198,40,40,.4)}
.sidebar-foot{margin-top:10px;padding-top:0;text-align:center;font-size:.66rem;color:rgba(226,236,196,.4)}

/* topbar em vidro */
.topbar{background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(95,114,32,.12);box-shadow:0 4px 18px rgba(43,52,16,.05)}
.topbar h2{position:relative;padding-left:14px}
.topbar h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:66%;border-radius:4px;background:var(--primary-grad)}

/* ===== Zoom & Pan do estúdio ===== */
.canvas-zoom{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.canvas-zoom canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.zoom-hud{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:2px;
  background:rgba(24,32,10,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:999px;padding:4px;box-shadow:0 6px 18px rgba(16,24,5,.3), inset 0 0 0 1px rgba(255,255,255,.12)}
.zoom-hud button{width:32px;height:32px;border:none;border-radius:999px;background:transparent;color:#eef3d8;
  font-size:1.05rem;font-weight:800;cursor:pointer;display:grid;place-items:center;transition:background .18s,transform .15s}
.zoom-hud button:hover{background:rgba(255,255,255,.14)}
.zoom-hud button:active{transform:scale(.92)}
.zoom-hud span{min-width:48px;text-align:center;font-size:.76rem;font-weight:800;color:#eef3d8;letter-spacing:.02em;user-select:none}
.canvas-stack.zoomed{border-color:var(--primary-light);box-shadow:inset 0 0 0 1px rgba(122,143,46,.25), 0 2px 14px rgba(122,143,46,.18)}
@media (max-width:640px){ .zoom-hud{top:8px;right:8px} .zoom-hud button{width:30px;height:30px} }

/* ===== Galeria (Meus desenhos + Turma) ===== */
.gal-tabs{align-self:flex-start;margin-bottom:4px}
.gal-card{padding:8px;display:flex;flex-direction:column;gap:8px}
.gal-fig{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--primary-soft);cursor:zoom-in}
.gal-fig img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gal-card:hover .gal-fig img{transform:scale(1.04)}
.gal-body{display:flex;flex-direction:column;gap:6px;padding:0 2px 2px}
.gal-body>b{font-size:.92rem;line-height:1.2}
.gal-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gal-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.gal-acts .btn.sm{padding:6px 10px;font-size:.78rem}

.chip-suggest.sug.on{background:var(--primary-grad);color:#fff;border-color:transparent;box-shadow:0 3px 8px rgba(122,143,46,.35)}

/* ============================================================
   HARMONIZAÇÃO GLOBAL — simetria de campos, botões e ações
   (camada final: padroniza tudo que ficou desproporcional)
   ============================================================ */

/* 1) Campos: mesma altura, mesmo raio, mesmo respiro em qualquer contexto */
.input, input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="date"], input[type="tel"], input[type="search"],
input:not([type]), select, textarea {
  width: 100%; min-height: 46px; padding: 12px 14px;
  border-radius: 12px; box-sizing: border-box;
}
textarea { min-height: 90px; line-height: 1.5; }
select { min-height: 46px; }

/* espaçamento vertical dos campos = igual ao gap horizontal do grid (simetria) */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field > label { font-size: .86rem; margin-bottom: 6px; }

/* grids de formulário: mesmo gap em linha e coluna; empilha no mobile */
.two-col, .three-col { display: grid; gap: 14px; align-items: start; }
.two-col { grid-template-columns: 1fr 1fr; }
.three-col { grid-template-columns: repeat(3, 1fr); }
.two-col > .field, .three-col > .field { margin-bottom: 0; }
@media (max-width: 560px){ .two-col, .three-col { grid-template-columns: 1fr; } }

/* 2) Modais: corpo com respiro uniforme, rodapé com botões alinhados */
.modal-body { padding: 20px 22px; }
.modal-body > .field + .field,
.modal-body > .two-col + .field,
.modal-body > .field + .two-col,
.modal-body > .two-col + .two-col { margin-top: 0; }
.modal-foot .btn { min-width: 120px; }

/* 3) Botões: uma linha de ação tem TODOS os botões da mesma altura.
   Dentro de .row/.gal-acts/.cell-actions, o .sm sobe para a altura padrão. */
.row .btn, .cell-actions .btn { min-height: 42px; }
.row .btn.sm, .cell-actions .btn.sm { min-height: 40px; padding: 8px 14px; font-size: .85rem; }
.btn { line-height: 1; }

/* 4) Galeria: grade de ações uniforme — botões iguais, ícones proporcionais */
.gal-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.gal-acts .btn { min-height: 40px; padding: 8px 10px; font-size: .82rem; width: 100%; border-radius: 10px; }
.gal-acts .btn[data-wa] { grid-column: 1 / -1; }  /* WhatsApp ocupa a linha toda (ação principal) */
@media (max-width: 380px){ .gal-acts { grid-template-columns: 1fr; } .gal-acts .btn[data-wa]{ grid-column: auto; } }

/* 5) Cards da galeria com a mesma proporção (imagem quadrada + corpo alinhado) */
.gal-card { display: flex; flex-direction: column; height: 100%; }
.gal-card .gal-body { flex: 1; display: flex; flex-direction: column; }
.gal-card .gal-acts { margin-top: auto; }

/* 6) Barra de ações do topo de tela (Novo aluno / Nova aula) alinhada */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-title .btn { flex: none; }

/* 7) grids de listagem (cards) com colunas parelhas e responsivas */
.grid.gallery { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* 8) inputs "auto" (filtros/checkbox) não estouram a linha */
select[style*="width:auto"], select[style*="width: auto"] { min-width: 150px; width: auto; }
label.row input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: none; }

/* 9) tabelas: ações da linha com botões parelhos */
.cell-actions .row { gap: 6px; flex-wrap: wrap; }
.cell-actions .btn.sm { min-width: 40px; }

/* ===== Pontuação: pódio + ranking ===== */
.podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.podio-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 16px; background: #fff; border: 1px solid rgba(95,114,32,.12); box-shadow: 0 4px 14px rgba(43,52,16,.07); position: relative; }
.podio-card.p1 { background: linear-gradient(180deg,#fffbe6,#fff); border-color: #f0d878; transform: translateY(-6px); }
.podio-card.p2 { background: linear-gradient(180deg,#f4f6fb,#fff); }
.podio-card.p3 { background: linear-gradient(180deg,#fdf0e6,#fff); }
.podio-medal { font-size: 1.7rem; }
.podio-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-family: var(--font-display); background: linear-gradient(135deg,#95aa37,#2d7d46); box-shadow: 0 3px 8px rgba(0,0,0,.15); }
.podio-card b { font-size: .9rem; text-align: center; line-height: 1.15; }
.podio-pts { font-weight: 800; color: var(--primary-dark); font-size: .82rem; }
@media (max-width: 560px){ .podio-card.p1 { transform: none; } .podio-medal { font-size: 1.4rem; } }

.rank-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-light); font-weight: 800; color: var(--text-gray); font-size: .85rem; }
.rank-badge.top { background: var(--primary-grad); color: #fff; box-shadow: 0 3px 8px rgba(122,143,46,.35); }
.pt-row td { vertical-align: middle; }