/* ---------- BASE ---------- */
:root{
  --red:#c81e2d;          /* vermelho ufscar */
  --red-soft:#f8d7da;
  --dark-0:#000000;          /* fundo absoluto (bordas) */
  --dark-1:#0b0b0b;          /* fundo gradiente */
  --dark-2:#141414;          /* netflix-like */
  --dark-3:#1f1f1f;          /* cartões */
  --text-light:#f5f5f5;
  --text-muted:#bdbdbd;
  --shadow-neon: 0 0 8px rgba(200,30,45,.25), 0 0 20px rgba(200,30,45,.1);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background .25s, color .25s;
}


.theme-light{
  color:#121212;
  background:#fafafa;
}

/* Centralização do conteúdo principal */
.center-wrap{
  min-height:calc(100vh - 72px);
  display:grid;
  place-items:center;
  padding:24px;
}

/* ---------- BOTÕES ---------- */
.btn{
  appearance:none;
  border:none;
  border-radius:12px;
  padding:.8rem 1.1rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{
  background:var(--red);
  color:#0a0a0a;
}
.btn-primary:hover{ box-shadow:var(--shadow-neon) }
.btn-secondary{
  background:var(--dark-3);
  color:var(--text-light);
  border:1px solid #2c2c2c;
}
.btn-ghost{
  background:transparent;
  color:var(--text-light);
  border:1px solid #2a2a2a;
}
.theme-light .btn-ghost{ color:#121212; border-color:#d9d9d9 }
.glow{ box-shadow:var(--shadow-neon) }

/* ---------- BRAND / TOPBAR ---------- */
.brand{
  display:flex; align-items:center; gap:.6rem; font-size:1.25rem; margin:0;
}
.brand-dot{
  width:.9rem; height:.9rem; border-radius:50%;
  background:var(--red);
  box-shadow:var(--shadow-neon);
  display:inline-block;
}
.topbar{
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; position:sticky; top:0; z-index:10;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.35), transparent);
  backdrop-filter:saturate(140%) blur(6px);
}
.breadcrumbs{ color:var(--text-muted); font-size:.9rem }
.crumb.active{ color:var(--red) }
.topbar-left{ display:flex; align-items:center; gap:14px }
.topbar-right{ display:flex; align-items:center; gap:8px }

/* ---------- CARDS / SHELF (Netflix style) ---------- */
.shelf{ width:min(1200px, 92vw); margin-inline:auto }
.section-title{ margin:12px 4px 8px; font-size:1.2rem }
.shelf-head{ display:flex; align-items:center; justify-content:space-between }
.shelf-controls .ctrl{
  width:40px; height:40px; border-radius:50%; border:1px solid #303030;
  background:rgba(0,0,0,.5); color:var(--text-light); cursor:pointer;
}
.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(180px, 22vw, 240px);
  gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  padding:12px 2px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.rail::-webkit-scrollbar{ height:10px }
.rail::-webkit-scrollbar-thumb{ background:#2b2b2b; border-radius:20px }
.poster{
  position:relative; scroll-snap-align:start;
  background:var(--dark-3);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, outline .2s;
  outline:1px solid #1e1e1e;
}
.poster:hover{
  transform:translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), var(--shadow-neon);
  outline-color:rgba(255,214,10,.35);
}
.poster img{
  display:block; width:100%; height:320px; object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.poster-info{
  position:absolute; inset:auto 0 0 0; padding:10px 12px;
  background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.poster-info h3{ margin:0 0 2px; font-size:1rem }
.poster-info p{ margin:0; color:var(--text-muted); font-size:.85rem }

/* ---------- LOGIN CARD ---------- */
.card{
  background: radial-gradient(800px 400px at -10% -10%, rgba(255,214,10,.15), transparent 40%),
              linear-gradient(180deg, #0f0f0f, #151515);
  border:1px solid #242424;
  border-radius:var(--radius);
  padding:26px;
  width:min(440px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), var(--shadow-neon);
}
.login-card .muted{ color:var(--text-muted); margin:.25rem 0 1rem }
.login-form{ display:grid; gap:12px }
.login-form label span{ display:block; font-size:.9rem; color:var(--text-muted); margin-bottom:6px }
.login-form input{
  width:100%; padding:.85rem 1rem; border-radius:12px; border:1px solid #2a2a2a;
  background:#0e0e0e; color:var(--text-light);
}
.login-form input:focus{ outline:2px solid rgba(255,214,10,.4); border-color:transparent }

/* ---------- MODAL ---------- */
.module-modal::backdrop{ background:rgba(0,0,0,.65)}
.modal-card{
  width:min(1100px, 92vw); border:none; padding:0; margin:0; background:transparent;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  background:transparent;
  padding:14px 18px; border:1px solid #2a2a2a; border-bottom:none;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.modal-body{
  background:transparent; border:1px solid #2a2a2a; border-top:none;
  padding:18px; border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
}
.modal-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.panel{
  background:transparent; border:1px solid #2a2a2a; border-radius:14px; padding:14px;
}
.panel h3{ margin:0 0 px }
textarea{
  width:100%; min-height:110px; resize:vertical;
  padding:.8rem; border-radius:10px; border:1px solid #2a2a2a;
  background:transparent;
}
.tasks{
  width:100%; border-collapse:collapse; overflow:hidden; border-radius:10px;
}
.tasks th, .tasks td{ padding:.7rem .8rem; border-bottom:1px solid #2a2a2a }
.tasks th{ text-align:left; color:var(--red) }

.modal-foot{ display:flex; justify-content:flex-end; padding:10px 2px }
.close{
  background:transparent; border:1px solid #2a2a2a;
  width:36px; height:36px; border-radius:10px; cursor:pointer;
}

/* ---------- LIGHT THEME TWEAKS ---------- */
.theme-light .card{ background:#ffffff; border-color:#eaeaea; box-shadow:0 20px 60px rgba(0,0,0,.08) }
.theme-light .poster{ background:#fff; outline-color:#ececec }
.theme-light .poster-info{ background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0)) }
.theme-light .panel{ background:#fff; border-color:#ececec }
.theme-light textarea{ background:#fff; color:#111; border-color:#e5e5e5 }
.theme-light .tasks td{ border-bottom-color:#eee }
.theme-light .topbar{ background:linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,.5), transparent) }
.theme-light .breadcrumbs{ color:#666 }
.muted{ color:var(--text-muted) }


.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}

.panel label.radio-option {
  display: flex !important;
  align-items: center;
  gap: 10px;
  text-align: left !important;
  justify-content: flex-start !important;
}

.panel label.radio-option input[type="radio"] {
  margin: 0;
}

.atividade-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: #f1f5f9;
  border-radius: 10px;
}

.atividade-titulo{
  font-weight: 600;
  font-size: 15px;
}

.btn-small{
  padding: 6px 14px;
  font-size: 14px;
}