:root{
  --navy:#053C5E;
  --teal:#01B1B1;
  --paper:#F4F1F9;
  --purple:#63489B;
  --purple-light:#9A7BC2;
  --ink:#183042;
  --muted:#6B7C87;
  --white:#FFFFFF;
  --border:#DEE7EB;
  --danger:#B54747;
  --shadow:0 12px 34px rgba(5,60,94,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#F7FAFB;color:var(--ink)}
a{color:var(--navy);text-decoration:none}
button,.button{border:0;border-radius:10px;padding:11px 16px;background:var(--navy);color:white;font-weight:700;cursor:pointer;display:inline-block}
button:hover,.button:hover{opacity:.92}
button.secondary,.button.secondary{background:#E8F0F3;color:var(--navy)}
button.danger,.danger{background:var(--danger)}
button.small{padding:7px 10px;font-size:.82rem}
.button.full,button.full{width:100%;text-align:center}

.layout{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.sidebar{background:var(--navy);color:white;padding:28px 20px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,var(--teal),var(--purple-light));display:grid;place-items:center;font-size:1.25rem;font-weight:900;color:white}
.brand strong,.brand span{display:block}
.brand strong{font-size:1.15rem}
.brand span{font-size:.84rem;opacity:.76}
.sidebar nav{margin-top:38px;display:grid;gap:8px}
.sidebar nav a{color:#D9EDF4;padding:12px 14px;border-radius:10px}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.14);color:white}
.logout{margin-top:auto;color:#D9EDF4;padding:12px 14px}

.content{padding:28px 34px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.topbar h1{margin:0;font-size:1.9rem}
.topbar p{margin:5px 0 0;color:var(--muted)}
.user{background:white;border:1px solid var(--border);padding:9px 13px;border-radius:999px;font-weight:700}

.flash{padding:12px 14px;background:#E5F5F3;border-radius:10px;margin-bottom:18px}
.flash.error{background:#FDE8E8;color:#8C3030}

.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:22px}
.metric,.panel{background:white;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.metric{padding:20px}
.metric span,.metric small{display:block;color:var(--muted)}
.metric strong{display:block;font-size:1.72rem;margin:12px 0 4px;color:var(--navy)}

.panel{padding:22px;margin-bottom:22px}
.panel h2{margin:0 0 6px}
.panel p{margin:0;color:var(--muted)}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}

.columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);gap:20px;align-items:start}
.class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.class-card{border:1px solid var(--border);border-radius:14px;padding:16px;display:grid;gap:9px}
.class-card h3{margin:0}
.class-card p{margin:4px 0 0}
.class-card>strong{font-size:1.3rem;color:var(--navy)}
.progress{height:9px;background:#E9F0F3;border-radius:999px;overflow:hidden}
.progress.large{height:13px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--purple-light))}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;border-bottom:1px solid var(--border);padding:13px 10px;vertical-align:middle}
th{font-size:.8rem;text-transform:uppercase;color:var(--muted)}
td small{display:block;color:var(--muted);margin-top:4px}

.status{display:inline-block;padding:6px 9px;border-radius:999px;font-size:.8rem;font-weight:800}
.status.ativa,.status.pago{background:#DFF5EF;color:#15725F}
.status.pausa,.status.pendente{background:#FFF3D6;color:#896316}
.status.inativa{background:#EDF0F2;color:#5F6C73}

label{display:grid;gap:7px;font-weight:700;font-size:.9rem;margin-bottom:14px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #CAD7DC;border-radius:10px;background:white;color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(1,177,177,.16);border-color:var(--teal)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.delete-form{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}
.actions{display:flex;gap:7px;flex-wrap:wrap}
.actions form{margin:0}
.inline-form{display:flex;gap:8px;align-items:center}
.inline-form input{min-width:165px}
.empty{text-align:center;padding:30px;color:var(--muted)}

.goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.goal-card{border:1px solid var(--border);border-radius:14px;padding:18px}
.goal-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.goal-top h3{margin:0}
.goal-top strong{color:var(--navy);font-size:1.3rem}
.goal-card small{display:block;color:var(--muted);margin-top:10px}

.auth-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#0A587E);padding:24px}
.auth-card{width:min(450px,94vw);background:white;border-radius:22px;padding:34px;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.install-card{width:min(590px,94vw)}
.auth-card h1{margin:28px 0 7px}
.auth-card h2{font-size:1rem;margin:24px 0 12px;color:var(--purple)}
.auth-card>p{color:var(--muted);margin-top:0}

@media(max-width:1150px){
  .cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .columns{grid-template-columns:1fr}
  .class-grid{grid-template-columns:1fr}
  .goal-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .layout{display:block}
  .sidebar{height:auto;position:static;padding:18px}
  .sidebar nav{margin-top:18px;grid-template-columns:repeat(3,minmax(130px,1fr));overflow:auto}
  .logout{display:block;margin-top:10px}
  .content{padding:20px 14px}
  .topbar{align-items:flex-start}
  .user{display:none}
  .cards{grid-template-columns:1fr}
  .panel{padding:16px}
  .form-row{grid-template-columns:1fr}
}

.instructions{border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:18px;background:#FAFCFD}
.instructions h3{margin-top:0}
.instructions ol{padding-left:20px;line-height:1.65}
.upload-box{border:2px dashed #BFD1D8;border-radius:14px;padding:20px}
.import-report{background:#EAF7F5;border:1px solid #BFE6DE;border-radius:14px;padding:18px;margin-bottom:18px}
.import-report h3{margin-top:0}
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:15px 0}
.report-grid div{background:white;border-radius:12px;padding:14px;text-align:center}
.report-grid strong,.report-grid span{display:block}
.report-grid strong{font-size:1.6rem;color:var(--navy)}
.report-grid span{color:var(--muted);margin-top:4px}
.simple-list{padding-left:20px;line-height:1.75}


.attendance-filter{display:grid;grid-template-columns:minmax(280px,2fr) minmax(180px,1fr) auto;gap:14px;align-items:end}
.attendance-filter label{margin-bottom:0}
.attendance-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.attendance-heading h2{margin-bottom:5px}
.attendance-summary{text-align:right}
.attendance-summary strong,.attendance-summary span{display:block}
.attendance-summary strong{font-size:1.8rem;color:var(--navy)}
.attendance-summary span{color:var(--muted);margin-top:4px}
.attendance-progress{margin-bottom:18px}
.attendance-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.attendance-table select{min-width:180px}
.weekly-usage{display:inline-block;background:#EAF7F5;color:#176B5E;border-radius:999px;padding:6px 10px;font-weight:800}
.weekly-usage.over{background:#FFF0DD;color:#975A16}
.save-bar{display:flex;justify-content:flex-end;margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}

@media(max-width:800px){
  .attendance-filter{grid-template-columns:1fr}
  .attendance-heading{align-items:flex-start}
  .attendance-summary{min-width:110px}
}