:root{
  --bg:#eef3f8;
  --surface:#ffffff;
  --surface-alt:#f7fafc;
  --text:#1a2433;
  --muted:#617186;
  --line:#d8e0ea;
  --brand:#0f5e9c;
  --brand-dark:#0d355f;
  --brand-soft:#dcecfb;
  --success:#198754;
  --success-soft:#e6f6ee;
  --warning:#b96c12;
  --warning-soft:#fff2de;
  --danger:#b63a3a;
  --shadow:0 18px 40px rgba(13,53,95,.08);
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(15,94,156,.14), transparent 26%),
    linear-gradient(180deg, #f7fbff 0%, var(--bg) 38%, #edf2f7 100%);
  color:var(--text);
  font-family:"Avenir Next","Segoe UI",sans-serif;
}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.top{
  background:linear-gradient(135deg,var(--brand-dark),#164d86 58%, #1c6db0 100%);
  color:#fff;
  padding:18px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  box-shadow:0 10px 28px rgba(13,53,95,.2);
}

.brand-block{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-block strong{
  font-size:1.1rem;
  letter-spacing:.02em;
}

.brand-block span{
  color:rgba(255,255,255,.76);
  font-size:.92rem;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.top-user{
  color:rgba(255,255,255,.82);
  font-size:.92rem;
  margin-right:6px;
}

.top-nav a{
  color:#fff;
  padding:9px 14px;
  border-radius:999px;
  transition:background .18s ease, color .18s ease;
}

.top-nav a:hover,
.top-nav a.is-active{
  background:rgba(255,255,255,.16);
  text-decoration:none;
}

.wrap{
  max-width:1280px;
  margin:28px auto 40px;
  padding:0 18px;
}

.hero{
  background:linear-gradient(135deg, rgba(13,53,95,.98), rgba(15,94,156,.93));
  color:#fff;
  border-radius:28px;
  padding:28px 30px;
  margin-bottom:22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  box-shadow:var(--shadow);
}

.hero h1{
  margin:8px 0 10px;
  font-size:clamp(1.8rem,3vw,2.7rem);
  line-height:1.05;
}

.hero p{
  margin:0;
  max-width:760px;
  color:rgba(255,255,255,.82);
  line-height:1.55;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.eyebrow{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#eaf5ff;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-bottom:22px;
}

.stat-card{
  background:var(--surface);
  border:1px solid rgba(13,53,95,.06);
  border-radius:22px;
  padding:18px 20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.stat-label{
  color:var(--muted);
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.stat-value{
  font-size:2rem;
  line-height:1;
}

.stat-meta{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.45;
}

.card{
  background:var(--surface);
  border:1px solid rgba(13,53,95,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:18px;
}

.dashboard-panel{
  padding:24px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
}

.manage-grid{
  align-items:start;
}

.manage-card{
  margin:0;
  background:var(--surface-alt);
  border:1px solid var(--line);
  box-shadow:none;
}

.manage-card h3{
  margin-top:0;
  margin-bottom:6px;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:16px;
}

.section-head h2{
  margin:8px 0 6px;
  font-size:1.45rem;
}

.section-head p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.section-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.inline-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:240px;
}

.inline-status-form{
  display:flex;
  align-items:center;
  gap:8px;
}

.event-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}

.event-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  background:var(--surface-alt);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.event-card--active{
  border-color:#7db7ea;
  box-shadow:0 0 0 3px rgba(15,94,156,.08);
}

.event-card__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.event-card__top h3{
  margin:0 0 6px;
}

.event-card__top p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.event-card__stats,
.progress-meta,
.overview-strip,
.action-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.event-card__stats span,
.overview-strip span{
  padding:8px 10px;
  border-radius:12px;
  background:#edf5fb;
  color:#31506f;
  font-size:.92rem;
}

.progress-meta{
  justify-content:space-between;
  color:var(--muted);
  font-size:.95rem;
}

.progress-meta strong{
  color:var(--text);
}

.progress-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:#dce6ef;
  overflow:hidden;
}

.progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), #49a7df);
}

.day-block{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  margin-top:16px;
  background:var(--surface-alt);
}

.day-block__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.day-block__header h3{
  margin:0 0 4px;
}

.day-block__header p{
  margin:0;
  color:var(--muted);
}

.assignment-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.assignment-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface-alt);
}

.assignment-item--done{
  border-color:#b6e1ca;
  background:linear-gradient(180deg,#f6fcf8 0%, #eef9f1 100%);
}

.assignment-item--pending{
  border-color:#ecd2ad;
  background:linear-gradient(180deg,#fffdfa 0%, #fff6ea 100%);
}

.assignment-copy h3{
  margin:0 0 6px;
}

.assignment-copy p{
  margin:0 0 6px;
  color:var(--muted);
}

.assignment-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap;
}

.pill-success{
  background:var(--success-soft);
  color:var(--success);
}

.pill-warning{
  background:var(--warning-soft);
  color:var(--warning);
}

.pill-muted{
  background:#e8edf3;
  color:#596579;
}

.dashboard-table,
table{
  width:100%;
  border-collapse:collapse;
}

.dashboard-table th,
.dashboard-table td,
table th,
table td{
  padding:12px 10px;
  border:1px solid var(--line);
  vertical-align:top;
}

.dashboard-table th,
table th{
  background:#eff5fb;
  color:#28415e;
  font-size:.86rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.cell-note{
  color:var(--muted);
  font-size:.88rem;
  margin-top:4px;
}

.wide{
  overflow:auto;
}

.empty-state,
.empty-inline{
  border:1px dashed #bfd1e1;
  border-radius:18px;
  background:#f8fbfe;
  padding:22px;
  text-align:center;
}

.empty-state h2,
.empty-state h3{
  margin-top:0;
}

.empty-state p,
.empty-inline{
  color:var(--muted);
}

.overview-strip{
  margin-bottom:14px;
}

.report-links-cell{
  display:grid;
  gap:6px;
}

.btn,
button{
  border:0;
  border-radius:12px;
  padding:11px 15px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}

.btn:hover,
button:hover{
  text-decoration:none;
  transform:translateY(-1px);
}

.btn.secondary{
  background:#4d647e;
}

.btn.ghost{
  background:#e9f1f8;
  color:#1d4d7d;
}

input,
select,
textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #c9d6e4;
  border-radius:12px;
  background:#fff;
  color:var(--text);
  font:inherit;
}

textarea{
  resize:vertical;
}

label{
  display:block;
  margin-bottom:6px;
  color:#35506e;
  font-size:.92rem;
  font-weight:700;
}

.assignment-grid{
  align-items:end;
}

.assignment-grid__button{
  display:flex;
  flex-direction:column;
}

.password-inline-form{
  margin:0;
}

.password-inline-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:10px;
  align-items:center;
}

.flash{
  background:#e8f6eb;
  border:1px solid #b8dfc2;
  color:#175335;
  padding:12px 14px;
  border-radius:14px;
  margin-bottom:16px;
}

.flash-error{
  background:#fff0f0;
  border-color:#efc2c2;
  color:#8d1f1f;
}

.muted{
  color:var(--muted);
}

.rowbox{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
  background:var(--surface-alt);
}

.rowbox__tools,
.submit-bar,
.form-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.matrix-table{
  min-width:980px;
}

.matrix-input{
  min-width:84px;
  text-align:center;
}

.matrix-output{
  background:#edf5fb;
  font-weight:700;
}

.matrix-total-row th,
.matrix-total-row td{
  background:#edf5fb;
}

.matrix-validation{
  min-width:110px;
}

.attention-summary-grid{
  margin-top:14px;
}

.rowbox__tools{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}

.form-section{
  margin-bottom:18px;
}

.submit-bar{
  border-top:1px solid var(--line);
  padding-top:18px;
}

.login{
  max-width:460px;
  margin:72px auto;
}

.login h2{
  margin-top:0;
}

.small{
  font-size:.85rem;
}

@media (max-width: 920px){
  .hero,
  .section-head,
  .day-block__header,
  .assignment-item,
  .top{
    flex-direction:column;
    align-items:flex-start;
  }

  .assignment-actions{
    width:100%;
    justify-content:flex-start;
  }

  .inline-filter{
    width:100%;
    min-width:0;
  }

  .password-inline-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .wrap{
    padding:0 14px;
  }

  .card,
  .dashboard-panel{
    padding:18px;
  }

  .top{
    padding:16px;
  }

  .top-nav{
    width:100%;
  }

  .top-nav a{
    padding:8px 11px;
  }
}