:root{
  --bg:#eef2fb;
  --panel:#ffffff;
  --text:#17233c;
  --muted:#6f7a90;
  --line:#dfe5f1;
  --primary:#5d3ebc;
  --primary-2:#6d50cb;
  --primary-3:#7d66d6;
  --accent:#0ea5a4;
  --success:#33a35c;
  --warn:#f4b400;
  --danger:#c43e5e;
  --shadow:0 14px 40px rgba(32,42,92,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(93,62,188,.15), transparent 24%),
    linear-gradient(180deg,#f6f8fc 0%,#edf1f8 100%);
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.top-strip{height:22px;background:#333}
.topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(24, 23, 121, 0.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(93,62,188,.12);
  box-shadow:0 2px 20px rgba(26,33,61,.06);
}
.topbar-inner{
  max-width:1280px; margin:0 auto; min-height:78px;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:16px; align-items:center; padding:0 18px;
}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo-wrap{
  width:58px; height:54px; border-radius:0 0 16px 0;
  background:linear-gradient(180deg,#324b86,#07235f);
  display:grid; place-items:center;
}
.brand-logo-wrap img{width:34px; height:34px; object-fit:contain}
.brand-text h1{margin:0; font-size:1.5rem; line-height:1; font-weight:800; letter-spacing:-.03em}
.brand-text p{margin:4px 0 0; color:var(--muted); font-size:.92rem}
.user-pill{
  display:flex; align-items:center; gap:12px;
  border-left:1px solid var(--line); padding-left:18px;
}
.avatar{
  width:44px; height:44px; border-radius:999px;
  border:3px solid #d6d6d6; display:grid; place-items:center;
  font-size:1.35rem; color:#888; background:#f0f0f0;
}
.user-meta{display:flex; flex-direction:column; gap:2px}
.user-meta small{color:var(--muted)}
.user-actions{display:flex; gap:8px; flex-wrap:wrap}
.top-link{
  padding:9px 12px; border-radius:12px; background:#f4f6fb;
  border:1px solid #e4e9f4; font-weight:700; color:#4f5871;
}
.top-link.primary{
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  border-color:transparent; color:#fff;
}

.floating-nav{max-width:1280px; margin:0 auto; position:relative}
.nav-bubble{
  position:absolute; left:50%; top:0; transform:translateX(-50%) translateY(-50%);
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  border-radius:999px; padding:10px 14px; display:flex; gap:10px;
  box-shadow:0 12px 30px rgba(93,62,188,.35);
}
.nav-bubble a, .nav-bubble button{
  width:44px; height:44px; border-radius:999px; border:none;
  color:#fff; background:rgba(255,255,255,.1);
  display:grid; place-items:center; font-size:1.15rem;
}
.nav-bubble a.active{background:rgba(255,255,255,.24)}

.page{max-width:1280px; margin:0 auto; padding:42px 18px 28px}
.loading-screen{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(circle at center, rgba(98,66,191,.32), transparent 22%),
    linear-gradient(180deg,#10204d 0%,#0a1638 100%);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;
  transition:opacity .35s ease, visibility .35s ease;
}
.loading-screen.hidden{opacity:0; visibility:hidden}
.loading-screen .brand-logo{width:140px; filter:drop-shadow(0 0 16px rgba(121,176,255,.45))}
.loader-line{width:220px; height:4px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden}
.loader-line span{
  display:block; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,#96d2ff,#fff,transparent);
  animation:slide 1.4s linear infinite;
}
.loading-screen p{letter-spacing:.3em; margin:0; color:#dce8ff; font-size:.9rem}
@keyframes slide{from{transform:translateX(-130%)}to{transform:translateX(260%)}}

.hero-grid{display:grid; grid-template-columns:1.35fr .95fr; gap:18px}
.hero-card{
  background:linear-gradient(135deg,rgba(10,31,84,.96),rgba(18,50,117,.93));
  border-radius:28px; padding:34px; color:#fff; box-shadow:var(--shadow);
  min-height:300px; position:relative; overflow:hidden;
}
.hero-card::after{
  content:""; position:absolute; right:-120px; bottom:-120px; width:320px; height:320px;
  border-radius:999px; background:radial-gradient(circle, rgba(121,182,255,.18), transparent 60%);
}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:999px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.15); color:#d7e8ff; font-size:.88rem;
}
.hero-card h2{margin:18px 0 10px; font-size:3rem; line-height:1.02; letter-spacing:-.04em}
.hero-card p{max-width:650px; font-size:1.05rem; color:#d7e3fb; line-height:1.65}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}

.btn{
  border:none; border-radius:16px; padding:14px 18px;
  font-weight:700; transition:.18s transform ease,.18s opacity ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg,#20c4c2,#099e9c); color:#fff}
.btn-soft{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.16)}
.btn-outline{background:#fff; color:var(--primary); border:1px solid rgba(93,62,188,.18)}
.btn-danger{background:linear-gradient(180deg,#d04d62,#ba304d); color:#fff}

.side-panel{display:grid; gap:14px}
.panel,.card,.info-card,.subject-card,.sidebar-card,.content-card,.metric,.auth-card{
  background:var(--panel); border-radius:24px; box-shadow:var(--shadow);
  border:1px solid rgba(93,62,188,.08);
}
.panel,.info-card,.sidebar-card,.content-card,.metric,.auth-card{padding:18px}
.panel-title,.section-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.panel-title h3,.section-title h3{margin:0; font-size:1.2rem; letter-spacing:-.02em}
.panel-title p,.section-title p{margin:6px 0 0; color:var(--muted)}

.series-tabs{display:flex; gap:10px; flex-wrap:wrap}
.tab{
  border:none; border-radius:14px; padding:10px 14px; font-weight:700;
  background:#f2f5fb; color:#4a5571; box-shadow:inset 0 0 0 1px #e2e8f4;
}
.tab.active{background:linear-gradient(180deg,#0eabb0,#1090b2); color:#fff}

.subject-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.subject-card{padding:16px; transition:transform .18s ease}
.subject-card:hover{transform:translateY(-3px)}
.subject-card .icon{
  width:48px; height:48px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(93,62,188,.14),rgba(14,171,176,.12));
  color:var(--primary); font-size:1.4rem; margin-bottom:14px;
}
.subject-card h4{margin:0 0 6px; font-size:1.04rem}
.subject-card p{margin:0; color:var(--muted); font-size:.92rem; line-height:1.45}
.subject-card small{display:inline-block; margin-top:10px; color:#6856aa; font-weight:700}

.section{margin-top:22px}
.feature-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.video-preview{border-radius:22px; overflow:hidden; background:#0d1c47; aspect-ratio:16/9}
.video-preview iframe{border:0; width:100%; height:100%}

.news-list{display:grid; gap:12px}
.news-item{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding:16px; background:#f6f7fc; border-radius:18px; border:1px solid #ebeff7;
}
.news-date{
  width:56px; min-width:56px; height:56px; border-radius:18px;
  display:grid; place-items:center; text-align:center; background:#fff;
  color:var(--primary); box-shadow:inset 0 0 0 1px #e4e9f6;
}
.news-item h4{margin:0 0 6px}
.news-item p{margin:0; color:var(--muted); line-height:1.55}

.link-list{display:grid; gap:10px}
.link-list a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px; background:#f5f7fc; color:#3f4a63; font-weight:700;
}
.link-list a.active{background:linear-gradient(180deg,#ede8ff,#e7f7f8); color:var(--primary)}

.materia-layout{display:grid; grid-template-columns:320px 1fr; gap:20px}
.sidebar-card{position:sticky; top:104px; height:fit-content}
.content-card h2{margin:0 0 8px; font-size:2rem}
.lead{margin:0 0 20px; color:var(--muted); line-height:1.7}

.study-grid,.video-grid,.form-grid,.metric-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.study-box{
  padding:16px; background:#f6f8fc; border:1px solid #e9eef7; border-radius:18px;
}
.study-box h4{margin:0 0 8px}
.study-box p,.study-box li{color:#56627e; line-height:1.6}
.study-box ul{margin:0; padding-left:18px}

.video-card{
  background:#fff; border:1px solid #e8edf8; border-radius:20px; overflow:hidden;
  box-shadow:0 6px 20px rgba(42,52,85,.06);
}
.video-card .thumb{aspect-ratio:16/9; background:#091841}
.video-card .thumb iframe{width:100%; height:100%; border:0}
.video-card .body{padding:14px 14px 16px}
.video-card h4{margin:0 0 8px}
.video-card p{margin:0 0 10px; color:var(--muted)}
.video-card .meta{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap}
.kbd{
  padding:6px 10px; background:#f2f5fb; color:#556179; border-radius:999px; font-size:.85rem; font-weight:700;
}

.form-card{max-width:820px; margin:0 auto; padding:22px}
.field{display:grid; gap:8px}
.field label{font-weight:700; color:#37445f}
.field input,.field select,.field textarea{
  padding:14px 15px; border:1px solid #dbe3f1; border-radius:16px; background:#fdfdff; outline:none;
}
.field textarea{min-height:120px; resize:vertical}
.stars{display:flex; gap:8px; flex-wrap:wrap}
.star-btn{
  width:44px; height:44px; border-radius:14px; border:1px solid #dce3f2;
  background:#fff; font-size:1.2rem;
}
.star-btn.active{background:linear-gradient(180deg,#f7b801,#e5a000); color:#fff; border-color:transparent}

.notice{
  padding:14px 16px; border-radius:16px; margin:14px 0;
  background:#ecf8ff; color:#18506a; border:1px solid #c5ebff;
}
.notice.warn{background:#fff6df; color:#7a5a00; border-color:#fde39b}
.notice.success{background:#eaf9ef; color:#166433; border-color:#b9e9c9}

.admin-shell{display:grid; grid-template-columns:280px 1fr; min-height:calc(100vh - 100px); gap:20px}
.admin-side{padding:18px; position:sticky; top:102px; height:fit-content}
.metric-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.metric strong{display:block; font-size:2rem; margin-top:8px}
.table-wrap{overflow:auto; border-radius:20px; border:1px solid #e7edf7}
table{width:100%; border-collapse:collapse; background:#fff}
th,td{padding:14px; text-align:left; border-bottom:1px solid #edf1f8; vertical-align:top}
th{background:#f7f9fd; color:#53607c}
.empty-state{
  padding:26px; border-radius:20px; text-align:center; color:var(--muted);
  background:#f7f9fd; border:1px dashed #d9e2f0;
}

.footer{max-width:1280px; margin:0 auto; padding:24px 18px 34px; color:#71809a}
.footer-box{
  background:rgba(255,255,255,.7); backdrop-filter:blur(12px);
  border:1px solid rgba(93,62,188,.08); box-shadow:var(--shadow);
  border-radius:24px; padding:20px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.footer-left{display:flex; align-items:center; gap:14px}
.footer-left img{width:40px; height:40px; object-fit:contain}
.small{font-size:.9rem; color:var(--muted)}

.auth-shell{
  max-width:1180px; margin:0 auto; padding:42px 18px 28px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:stretch;
}
.auth-hero{
  border-radius:28px; padding:34px; color:#fff;
  background:linear-gradient(135deg,rgba(10,31,84,.98),rgba(18,50,117,.94));
  box-shadow:var(--shadow); display:flex; flex-direction:column; justify-content:space-between; min-height:560px;
}
.auth-hero-logo{width:160px; filter:drop-shadow(0 0 14px rgba(121,176,255,.45))}
.auth-hero h2{font-size:2.7rem; line-height:1.05; margin:18px 0 12px}
.auth-hero p{color:#d9e5ff; line-height:1.75}
.auth-card h3{margin:0 0 8px; font-size:1.8rem}
.auth-card p{margin:0 0 18px; color:var(--muted); line-height:1.6}
.auth-card .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.auth-switch{
  display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap;
}
.auth-help{
  padding:12px 14px; background:#f7f9fd; border:1px solid #e7edf7; border-radius:16px; color:#51607c;
}

@media (max-width:1050px){
  .hero-grid,.feature-grid,.materia-layout,.admin-shell,.auth-shell{grid-template-columns:1fr}
  .sidebar-card,.admin-side{position:static}
  .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .topbar-inner{grid-template-columns:1fr auto}
  .brand-text h1{font-size:1.25rem}
  .brand-text p{font-size:.8rem}
  .nav-bubble{position:fixed; bottom:14px; top:auto; transform:translateX(-50%); padding:8px 10px; z-index:80}
  .page{padding-top:20px}
  .hero-card h2,.auth-hero h2{font-size:2.2rem}
  .subject-grid,.study-grid,.video-grid,.form-grid,.metric-grid,.auth-card .field-row{grid-template-columns:1fr}
  .user-meta{display:none}
  .footer-box{flex-direction:column; align-items:flex-start}
}
body.login-body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #0a1a3a, #0f2a5c);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  display: flex;
  width: 800px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.login-left {
  background: #0f2a5c;
  color: white;
  padding: 40px;
  width: 40%;
}

.logo {
  width: 80px;
  margin-bottom: 20px;
}

.login-box {
  padding: 40px;
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.login-box input {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.login-box button {
  padding: 12px;
  border: none;
  background: #00a884;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}

.login-box button:hover {
  background: #008f72;
}
/* ===== ADMIN UI MODERNA ===== */

body{
  background:#0b1220;
  font-family: 'Segoe UI', sans-serif;
}

.container{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}

/* SIDEBAR */
.sidebar{
  background:linear-gradient(180deg,#0f172a,#020617);
  padding:25px;
  color:#fff;
  box-shadow:0 0 30px rgba(0,0,0,.5);
}

.sidebar h3{
  margin-bottom:20px;
  font-size:20px;
}

.sidebar button{
  width:100%;
  padding:14px;
  margin-bottom:10px;
  border:none;
  border-radius:12px;
  background:#1e293b;
  color:#fff;
  cursor:pointer;
  transition:.2s;
}

.sidebar button:hover{
  background:#6c5ce7;
  transform:translateX(5px);
}

/* MAIN */
.main{
  padding:30px;
}

/* CARDS */
.card{
  background:#111827;
  border-radius:18px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* METRICS */
.metric{
  background:linear-gradient(135deg,#6c5ce7,#00cec9);
  padding:25px;
  border-radius:16px;
  color:#fff;
  text-align:center;
  font-weight:bold;
}

.metric strong{
  font-size:28px;
}

/* INPUTS */
input, select, textarea{
  background:#020617;
  border:1px solid #1e293b;
  color:#fff;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
}

input:focus, select:focus, textarea:focus{
  border:1px solid #6c5ce7;
  outline:none;
}

/* BOTÃO */
#btnSalvar{
  background:linear-gradient(135deg,#6c5ce7,#00cec9);
  border:none;
  padding:14px;
  border-radius:12px;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  transition:.2s;
}

#btnSalvar:hover{
  transform:scale(1.05);
}

/* VIDEO CARD */
.video-card{
  background:#020617;
  border:1px solid #1e293b;
  border-radius:16px;
  padding:15px;
  margin-bottom:15px;
  transition:.2s;
}

.video-card:hover{
  transform:scale(1.02);
  border-color:#6c5ce7;
}

.video-card iframe{
  width:100%;
  height:200px;
  border-radius:12px;
}

/* USERS */
.user-card{
  background:#020617;
  border:1px solid #1e293b;
  border-radius:12px;
  padding:15px;
  margin-bottom:10px;
  cursor:pointer;
}

.user-card:hover{
  background:#364d72;
}

/* TOAST */
.toast{
  position:fixed;
  bottom:20px;
  right:20px;
  background:#6c5ce7;
  color:#fff;
  padding:14px 20px;
  border-radius:10px;
  font-weight:bold;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
select{
  appearance:none;
  background:#ececec;
  border:1px solid #dbe4f0;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  width:100%;
}

select:focus{
  outline:none;
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,0.2);
}
.admin-card{
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(255, 255, 255, 0.08);
  transition:0.2s;
}

.admin-card:hover{
  transform:translateY(-3px);
}
button{
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  border:none;
  color:white;
  padding:12px 16px;
  border-radius:12px;
  font-weight:bold;
  cursor:pointer;
  transition:0.2s;
}

button:hover{
  transform:scale(1.05);
}
/* ===== FIX SELECT BRANCO ===== */

select{
  background:#1e293b !important;
  color:#ffffff !important;
  border:1px solid #334155;
}

select option{
  background:#1e293b;
  color:#ffffff;
}

/* dropdown aberto (alguns navegadores) */
select:focus{
  background:#1e293b;
  color:#ffffff;
}

/* hover visual */
select option:hover{
  background:#514caa;
}
/* ===== PADRÃO ADMIN DARK ===== */

body[data-page="admin"]{
  background:#0f172a;
  color:#e2e8f0;
}

input, textarea{
  background:#1e293b;
  color:#fff;
  border:1px solid #334155;
}

input::placeholder, textarea::placeholder{
  color:#94a3b8;
}
/* ===== CARD LATERAL (LOGO) ===== */

.admin-side{
  background:linear-gradient(180deg,#1e1b4b,#0f172a);
  border-radius:20px;
  padding:20px;
  color:white;
}

.admin-side h3{
  font-size:22px;
  font-weight:bold;
  margin-bottom:10px;
}

.admin-side p{
  color:#c7d2fe;
}

/* BOTÕES LATERAIS */
.admin-side a{
  display:block;
  background:rgba(255,255,255,0.05);
  padding:12px;
  border-radius:12px;
  margin-bottom:10px;
  color:white;
  text-decoration:none;
  transition:0.2s;
}

.admin-side a:hover{
  background:linear-gradient(135deg,#6366f1,#7c3aed);
}
/* ===== CARD LATERAL (LOGO) ===== */

.admin-side{
  background:linear-gradient(180deg,#1e1b4b,#0f172a);
  border-radius:20px;
  padding:20px;
  color:white;
}

.admin-side h3{
  font-size:22px;
  font-weight:bold;
  margin-bottom:10px;
}

.admin-side p{
  color:#c7d2fe;
}

/* BOTÕES LATERAIS */
.admin-side a{
  display:block;
  background:rgba(255,255,255,0.05);
  padding:12px;
  border-radius:12px;
  margin-bottom:10px;
  color:white;
  text-decoration:none;
  transition:0.2s;
}

.admin-side a:hover{
  background:linear-gradient(135deg,#6366f1,#7c3aed);
}
button{
  background:linear-gradient(135deg,#6366f1,#7c3aed);
  color:white;
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:bold;
  cursor:pointer;
}

button:hover{
  transform:scale(1.05);
}
/* =========================
   🔥 DARK MODE ADMIN TOTAL
========================= */

/* FUNDO GERAL */
body {
  background: #0f172a !important;
  color: #e2e8f0;
  font-family: 'Inter', sans-serif;
}

/* INPUTS E TEXTAREAS */
input, textarea, select {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s ease;
  outline: none;
}

/* TEXTO DIGITADO E FOCO */
input:focus, textarea:focus {
  border-color: #3b82f6 !important; /* Azul vibrante */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  background: #1e293b !important;
}

/* CARDS E CONTAINERS */
.card, .panel, .container-fluid {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 16px;
  color: #f1f5f9;
}

/* TABELAS */
table {
  background: transparent !important;
  border-collapse: collapse;
}

th {
  background: #334155 !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

td {
  border-bottom: 1px solid #334155 !important;
  color: #cbd5e1;
}

tr:hover {
  background: rgba(51, 65, 85, 0.5) !important;
}

/* BOTÕES */
button, .btn-primary {
  background: #3b82f6 !important;
  border: none !important;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
  color: white !important;
  cursor: pointer;
  transition: filter 0.2s;
}

button:hover {
  filter: brightness(1.2);
}

/* SIDEBAR / MENU */
.sidebar, .nav-menu {
  background: #0f172a !important;
  border-right: 1px solid #1e293b;
}

.nav-link {
  color: #94a3b8 !important;
}

.nav-link.active, .nav-link:hover {
  background: #1e293b !important;
  color: #3b82f6 !important;
}

/* SCROLLBAR CUSTOMIZADA (OPCIONAL) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}
/* =========================
   🌙 DARK MODE LOGIN
========================= */

/* Fundo da página de login */
.login-body, .auth-shell {
  background-color: #0f172a !important; /* Azul marinho muito escuro */
  color: #e2e8f0 !important;
}

/* Container principal de Login */
.auth-card, .login-box, .panel {
  background: #1e293b !important; /* Azul ardósia escuro */
  border: 1px solid #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Escrita Clara (Títulos e Textos) */
.auth-card h3, .auth-card h4, .login-box h2, .section-title h3, label {
  color: #ffffff !important;
}

.auth-card p, .section-title p, .auth-help {
  color: #94a3b8 !important; /* Cinza claro para descrições */
}

/* Inputs no Dark Mode */
input, select, textarea {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

input::placeholder {
  color: #64748b !important;
}

/* Botões */
.btn-primary, .login-box button {
  background: #6c5ce7 !important;
  border: none !important;
  color: #fff !important;
}

.btn-outline {
  border: 1px solid #6c5ce7 !important;
  color: #a29bfe !important;
  background: transparent !important;
}
/* CONTAINER DA LOGO */
.auth-hero-logo, .logo {
  background: rgba(255, 255, 255, 0.05); /* Fundo branco quase transparente */
  padding: 20px;
  border-radius: 24px;
  backdrop-filter: blur(5px); /* Efeito de vidro para destacar a logo */
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
  margin: 0 auto 20px auto;
  max-width: 200px;
}

/* Ajuste específico para a coluna da esquerda no login-admin */
.login-left {
  background: #1e293b !important;
  color: #fff !important;
  padding: 40px;
  border-radius: 16px 0 0 16px;
}
/* =========================
   🌙 DARK LOGIN & LOGO FIX
========================= */

/* Fundo da tela de login (Geral) */
.auth-shell, .login-body {
  background-color: #0f172a !important; /* Fundo bem escuro */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* O Container do Login (Login Box) */
.auth-card, .login-box {
  background: #1e293b !important; /* Um tom acima do fundo */
  border: 1px solid #334155;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  color: #f8fafc !important; /* Texto principal claro */
}

/* CONTAINER DA LOGO (Cor mais fraca/suave para destaque) */
.auth-hero-logo, .logo-container {
  background: rgba(255, 255, 255, 0.03); /* Branco quase invisível */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
  padding: 25px;
  border-radius: 24px;
  backdrop-filter: blur(10px); /* Efeito de vidro fosco */
  display: inline-block;
  margin-bottom: 20px;
}

/* Escrita Clara (Títulos e Labels) */
h1, h2, h3, h4, label {
  color: #ffffff !important;
  font-weight: 700;
}

p, .auth-help {
  color: #94a3b8 !important; /* Cinza claro para não cansar a vista */
}

/* Inputs (Dark mode total) */
input, select {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
  padding: 14px !important;
}

input:focus {
  border-color: #6366f1 !important; /* Cor de destaque (Indigo) */
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
/* Estilo das Estrelas */
.stars {
  display: flex;
  gap: 5px;
  font-size: 30px; /* Tamanho das estrelas */
  cursor: pointer;
}

.star {
  color: #334155; /* Cor da estrela vazia (cinza escuro) */
  transition: color 0.2s;
}

/* Cor quando a estrela for selecionada ou houver hover */
.star.active, .star:hover, .star:hover ~ .star {
  color: #fbbf24 !important; /* Amarelo/Dourado vivo */
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}
/* CONTAINER DA LOGO - DESTAQUE ELEGANTE */
.auth-hero-logo, .logo-container {
  /* Cor "Slate 800" - um cinza azulado que combina com o fundo */
  background: #1e293b !important; 
  
  /* Uma borda levemente mais clara para dar o contorno */
  border: 1px solid #334155 !important; 
  
  padding: 25px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 25px;
  
  /* Sombra suave para dar elevação */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Garante que a imagem da logo ocupe bem o espaço */
.logo, .auth-hero-logo {
  max-width: 150px;
  height: auto;
  display: block;
}
.star.active {
  color: #fbbf24 !important; /* Amarelo Amber vibrante */
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.5); /* Brilho externo */
}

/* =========================
   🌑 DARK MODE TOTAL (CARDS)
========================= */

/* Fundo da página */
body, .page {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* CARDS ESCUROS */
.card, .info-card, .sidebar-card, .content-card, .form-card {
    background: #1e293b !important; /* Cor dos cards */
    border: 1px solid #334155 !important;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    color: #f1f5f9 !important;
}

/* Títulos e Textos dentro dos cards */
.card h2, .card h3, .card h4, .section-title h3 {
    color: #ffffff !important;
}

.card p, .card small {
    color: #94a3b8 !important;
}

/* =========================
   ⭐ ESTRELAS (CORREÇÃO)
========================= */
.stars {
    display: flex;
    gap: 8px;
    cursor: pointer;
    font-size: 32px;
}

.star {
    color: #334155; /* Estrela apagada */
    transition: all 0.2s ease;
}

/* Quando a estrela ganha a classe 'active' via JS ela fica amarela */
.star.active {
    color: #fbbf24 !important; /* Amarelo ouro */
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

/* Efeito de passar o mouse */
.star:hover {
    transform: scale(1.2);
    color: #fcd34d;
}
/* =========================
   📦 CARDS DE ESTUDO & CONTEÚDO
========================= */

/* O Container principal que envolve os cards */
.study-grid, .news-list {
    background: transparent !important;
}

/* Estilo de cada Card (Estudo, Matéria, Notícia) */
.card, .info-card, .study-card, .news-item {
    background: #1e293b !important; /* Azul ardósia escuro */
    border: 1px solid #334155 !important; /* Borda sutil para definir o card */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: transform 0.2s, border-color 0.2s;
}

/* Efeito ao passar o mouse nos cards */
.card:hover, .study-card:hover {
    border-color: #4f46e5 !important; /* Realce em roxo/azul ao focar */
    transform: translateY(-2px);
}

/* TEXTOS DENTRO DOS CARDS */
/* Títulos principais */
.card h1, .card h2, .card h3, .study-card h4, .news-item h4 {
    color: #f8fafc !important; /* Branco azulado bem claro */
    margin-top: 0;
}

/* Parágrafos e descrições */
.card p, .study-card p, .news-item p, .lead {
    color: #cbd5e1 !important; /* Cinza claro legível (não some no fundo) */
    line-height: 1.6;
}

/* Badges e etiquetas (ex: "9º Ano", "Geografia") */
.badge {
    background: #334155 !important;
    color: #818cf8 !important; /* Roxo claro para destaque */
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
}

/* Ícones ou datas nos cards (ex: news-date) */
.news-date, .study-icon {
    background: #0f172a !important; /* Fundo mais escuro que o card */
    color: #fbbf24 !important; /* Amarelo para ícones */
    border: 1px solid #334155;
}
/* ===== HEADER (TOPO) ===== */

.topbar{
  background:#ffffff !important;
}

.topbar h1,
.topbar strong{
  color:#0f172a !important;
}

.topbar p{
  color:#475569 !important;
}

/* TEXTO DO USUÁRIO */
.topbar .user-info{
  color:#0f172a !important;
}
/* ===== CARDS MATÉRIAS ===== */

.subject-card,
.card-materia,
.materia-card{
  background:linear-gradient(135deg,#e0edff,#dbeafe) !important;
  border:1px solid #c7d2fe;
  border-radius:16px;
  transition:0.2s;
}

/* HOVER */
.subject-card:hover,
.card-materia:hover,
.materia-card:hover{
  background:linear-gradient(135deg,#c7d2fe,#bfdbfe) !important;
  transform:translateY(-3px);
}
/* ===== CARDS MATÉRIAS ===== */

.subject-card,
.card-materia,
.materia-card{
  background:linear-gradient(135deg,#003277,#002453) !important;
  border:1px solid #c7d2fe;
  border-radius:16px;
  transition:0.2s;
}

/* HOVER */
.subject-card:hover,
.card-materia:hover,
.materia-card:hover{
  background:linear-gradient(135deg,#2852f8,#03428f) !important;
  transform:translateY(-3px);
}
/* =========================
   📱 MOBILE RESPONSIVO
========================= */

@media (max-width: 768px){

  /* GERAL */
  body{
    padding:10px;
  }

  /* HEADER */
  .topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .topbar h1{
    font-size:18px;
  }

  /* USER INFO */
  .user-info{
    font-size:13px;
  }

  /* GRID PRINCIPAL */
  .admin-grid{
    grid-template-columns:1fr !important;
  }

  /* SIDEBAR */
  .admin-side{
    width:100%;
    padding:15px;
  }

  /* MENU LATERAL */
  .admin-side a{
    text-align:center;
    font-size:14px;
  }

  /* CARDS */
  .admin-card{
    padding:15px;
  }

  /* MÉTRICAS */
  .metric-grid{
    grid-template-columns:1fr !important;
  }

  .metric{
    text-align:center;
  }

  /* FORM */
  form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .admin-form-grid{
    grid-template-columns:1fr !important;
  }

  input, textarea, select{
    width:100%;
    font-size:14px;
  }

  /* BOTÕES */
  button{
    width:100%;
    font-size:15px;
  }

  /* TABELA (scroll lateral) */
  .table-wrap{
    overflow-x:auto;
  }

  table{
    min-width:600px;
  }

  /* CARDS DAS MATÉRIAS */
  .subject-card,
  .materia-card{
    width:100%;
  }

}
/* ===== LOGO CONTAINER ===== */

.topbar img,
.logo{
  background:#ffffff;
  padding:8px;
  border-radius:12px;
}
.topbar img,
.logo{
  box-shadow:0 4px 15px rgba(0,0,0,0.25);
}
/* ===== LOGO DESTACADA ===== */

.topbar img,
.logo{
  background:#ffffff;
  padding:8px;
  border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,0.25);
  filter:brightness(1.1) contrast(1.1);
}
.topbar{
  background:linear-gradient(90deg,#0f172a,#1e293b);
}
#cadastro-box{
  animation:fadeIn 0.3s ease;
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.loading-screen {
  position:fixed; inset:0; z-index:9999;
  background: #2d2a5c; /* Mesma cor de fundo do seu Dark Mode */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:22px;
  transition:opacity .35s ease, visibility .35s ease;
}
/* botão flutuante estilo mobile (PC e celular) */
.fab-config{
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 48px;
  height: 48px;

  border-radius: 50%;
  border: none;

  background: var(--card);
  color: var(--text);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  transition: 0.3s;

  z-index: 999;
}

.fab-config:hover{
  background: var(--primary);
  transform: rotate(90deg) scale(1.1);
}
/* MOSTRAR EM TODOS OS DISPOSITIVOS */
.floating-nav{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

/* estilo bolha */
.nav-bubble{
  display: flex;
  gap: 10px;
  background: var(--card);
  padding: 10px 14px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* links */
.nav-bubble a,
.nav-bubble button{
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: 0.3s;
}

/* hover */
.nav-bubble a:hover,
.nav-bubble button:hover{
  background: var(--primary);
  color: #fff;
}

/* ativo */
.nav-bubble .active{
  background: var(--primary);
  color: #fff;
}
.config-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1000;
}

.hidden{
  display: none;
}
/* FUNDO SEM TRANSPARÊNCIA */
.config-modal{
  position: fixed;
  inset: 0;
  background: #0a0f1f; /* azul marinho sólido */

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 1000;
}

/* CARD BONITO */
.config-box{
  background: #16213a;
  border: 1px solid #2c3f66;
  border-radius: 16px;
  padding: 25px;
  width: 320px;

  color: #e2e8f0;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.config-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden{
  display: none;
}

.config-box{
  background: #0f172a;
  padding: 20px;
  border-radius: 12px;
  width: 320px;
  color: white;
}

.cfg-avatar{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
}
/* ===== CHAT ===== */

.chat-container{
  display: flex;
  height: 100vh;
  background: #0b1a2b;
}

/* SIDEBAR */
.chat-sidebar{
  width: 260px;
  background: #0f2238;
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.chat-sidebar h3{
  margin-bottom: 10px;
}

#chat-contatos{
  flex: 1;
  overflow-y: auto;
}

.contact{
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  background: #132b46;
}

.contact:hover{
  background: #1c3d66;
}

/* ADD */
.add-contact{
  display: flex;
  gap: 5px;
}

.add-contact input{
  flex: 1;
}

/* MAIN */
.chat-main{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.chat-header{
  padding: 15px;
  background: #10263f;
  border-bottom: 1px solid #1e3a5f;
}

/* MESSAGES */
.chat-messages{
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

/* BALÕES */
.msg{
  max-width: 60%;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #1c3d66;
}

.msg.me{
  background: #3b82f6;
  margin-left: auto;
}

/* INPUT */
.chat-input{
  display: flex;
  padding: 10px;
  background: #10263f;
  gap: 10px;
}

.chat-input input{
  flex: 1;
}
/* ===== RESPONSIVO ===== */

@media (max-width: 900px){

  .chat-container{
    flex-direction: column;
  }

  .chat-sidebar{
    width: 100%;
    height: 200px;
  }

  .chat-main{
    height: calc(100vh - 200px);
  }

}

@media (max-width: 500px){

  .chat-sidebar{
    height: 160px;
    padding: 10px;
  }

  .chat-header{
    font-size: 14px;
  }

  .msg{
    max-width: 80%;
    font-size: 14px;
  }

}
/* ===== CHAT APP ===== */

.chat-app{
  display: flex;
  height: 100vh;
  background: #0b1a2b;
  color: white;
}

/* SIDEBAR */
.chat-sidebar{
  width: 280px;
  background: #0f2238;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1e3a5f;
}

.chat-logo-box{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border-bottom: 1px solid #1e3a5f;
}

.chat-logo-box img{
  width: 40px;
  border-radius: 10px;
}

.chat-search{
  display: flex;
  padding: 10px;
  gap: 5px;
}

.chat-search input{
  flex: 1;
}

.chat-contatos{
  flex: 1;
  overflow-y: auto;
}

.contact{
  padding: 12px;
  border-radius: 10px;
  margin: 6px;
  background: #132b46;
  cursor: pointer;
  transition: 0.2s;
}

.contact:hover{
  background: #1c3d66;
}

/* CHAT AREA */
.chat-area{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* TOP */
.chat-top{
  padding: 15px;
  background: #10263f;
  border-bottom: 1px solid #1e3a5f;
}

/* MESSAGES */
.chat-messages{
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* BALÕES */
.msg{
  max-width: 60%;
  padding: 10px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #1c3d66;
}

.msg.me{
  margin-left: auto;
  background: #3b82f6;
}

/* INPUT */
.chat-send{
  display: flex;
  padding: 10px;
  gap: 10px;
  background: #10263f;
}

.chat-send input{
  flex: 1;
}

.chat-send button{
  background: #3b82f6;
  border: none;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
}

/* FILE BUTTON */
.file-btn{
  background: #1c3d66;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}

.file-btn:hover{
  background: #3b82f6;
}

/* RESPONSIVO */
@media (max-width: 900px){

  .chat-app{
    flex-direction: column;
  }

  .chat-sidebar{
    width: 100%;
    height: 180px;
  }

}
/* ===== ESTRUTURA ===== */

.chat-wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #0b1a2b;
  color: white;
}

/* TOPO */
.chat-topbar{
  height: 60px;
  background: #0f2238;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #1e3a5f;
}

.logo-container{
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-container img{
  width: 40px;
  border-radius: 8px;
}

/* CORPO */
.chat-body{
  flex: 1;
  display: flex;
}

/* ESQUERDA */
.chat-left{
  width: 280px;
  background: #10263f;
  padding: 15px;
  border-right: 1px solid #1e3a5f;
}

.contatos-list{
  margin-top: 10px;
  overflow-y: auto;
}

.contact{
  padding: 10px;
  border-radius: 10px;
  background: #132b46;
  margin-bottom: 8px;
  cursor: pointer;
}

.contact:hover{
  background: #1c3d66;
}

/* DIREITA */
.chat-right{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* HEADER CHAT */
.chat-header{
  padding: 15px;
  background: #10263f;
  border-bottom: 1px solid #1e3a5f;
}

/* MENSAGENS */
.chat-messages{
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

/* BALÕES */
.msg{
  max-width: 60%;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #1c3d66;
}

.msg.me{
  margin-left: auto;
  background: #3b82f6;
}

/* AÇÕES */
.chat-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: #0f2238;
}

.chat-actions input{
  padding: 8px;
  border-radius: 8px;
  border: none;
}

.chat-actions button{
  padding: 8px 12px;
  border-radius: 8px;
  background: #3b82f6;
  border: none;
  cursor: pointer;
}

.file-btn{
  background: #1c3d66;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

/* BOTÃO HOME */
.btn-back{
  background: #1c3d66;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
}

/* RESPONSIVO */
@media (max-width: 800px){

  .chat-body{
    flex-direction: column;
  }

  .chat-left{
    width: 100%;
    height: 150px;
  }

}
.chat-btn{
  padding: 8px 12px;
  background: #1c3d66;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
}
/* =========================
🚨 MANUTENÇÃO CHAT
========================= */

#manutencao-overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: linear-gradient(135deg, #2b0000, #8b0000);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* FUNDO ANIMADO */
#manutencao-overlay::before{
  content:"";
  position:absolute;
  width:200%;
  height:200%;
  background: radial-gradient(circle, rgba(255,0,0,0.2) 0%, transparent 60%);
  animation: bgMove 8s linear infinite;
}

@keyframes bgMove{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-25%, -25%); }
  100%{ transform: translate(0,0); }
}

/* CARD */
.manutencao-card{
  position: relative;
  z-index:1;
  background: rgba(0,0,0,0.6);
  padding:40px;
  border-radius:20px;
  text-align:center;
  color:white;
  max-width:400px;
  width:90%;
  backdrop-filter: blur(10px);
  animation: fadeIn 1s ease;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}

/* ÍCONE */
.manutencao-card .icon{
  font-size:60px;
  margin-bottom:20px;
  animation: pulse 1.5s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.2);}
  100%{transform:scale(1);}
}

/* BOTÃO */
.btn-voltar{
  display:inline-block;
  margin-top:20px;
  padding:12px 20px;
  background:#ff3b3b;
  color:white;
  text-decoration:none;
  border-radius:10px;
  transition:0.3s;
}

.btn-voltar:hover{
  background:#ff0000;
  transform:scale(1.05);
}
.admin-container{
  display:grid;
  grid-template-columns: 220px 1fr;
  height:100vh;
  background:#0b1e33;
}

/* SIDEBAR */
.admin-sidebar{
  background:#081624;
  padding:20px;
}

.admin-sidebar h2{
  color:white;
  margin-bottom:20px;
}

.admin-sidebar a{
  display:block;
  padding:10px;
  color:#ccc;
  text-decoration:none;
  border-radius:8px;
  margin-bottom:5px;
}

.admin-sidebar a:hover{
  background:#1c3d66;
  color:white;
}

/* CONTEÚDO */
.admin-content{
  padding:20px;
  overflow:auto;
}

/* CARDS */
.dashboard{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:15px;
}

.card{
  background:#122b46;
  padding:20px;
  border-radius:15px;
  color:white;
}

.card h3{
  font-size:14px;
  color:#aaa;
}

.card strong{
  font-size:22px;
}

/* TABELA */
.table{
  width:100%;
  margin-top:20px;
  border-collapse: collapse;
}

.table th,
.table td{
  padding:10px;
  border-bottom:1px solid #1c3d66;
  color:white;
}