
:root{
  --blue:#1d4ed8;
  --blue-50:#eff6ff;
  --blue-100:#dbeafe;
  --blue-200:#bfdbfe;
  --amber:#fbbf24;
  --amber-50:#fffbeb;
  --orange-50:#fff7ed;
  --orange-200:#fed7aa;
  --orange-300:#fdba74;
  --slate-50:#f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --rose-50:#fff1f2;
  --rose-200:#fecdd3;
  --emerald-50:#ecfdf5;
  --emerald-200:#a7f3d0;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--slate-900);
  background:linear-gradient(135deg,#eff6ff 0%, #ffffff 45%, #fffbeb 100%);
}
.container{max-width:1280px;margin:0 auto;padding:16px 16px 48px}
.card{
  background:white;
  border:1px solid var(--slate-200);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.header-card{border-color:var(--orange-300);background:rgba(255,255,255,.92)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1.4fr .9fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.section{padding:24px}
h1{font-size:2.2rem;line-height:1.1;margin:.5rem 0}
h2,h3,h4{margin:0}
p{margin:0}
.badges,.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{
  border-radius:999px;
  padding:6px 10px;
  font-size:.8rem;
  font-weight:700;
  border:1px solid transparent;
}
.badge-blue{background:var(--blue);color:#fff}
.badge-amber{background:var(--amber);color:var(--slate-900)}
.badge-outline{border-color:var(--slate-200);background:white;color:var(--slate-700)}
.muted{color:var(--slate-600)}
.small{font-size:.9rem}
.xsmall{font-size:.78rem}
.label{font-size:.72rem;text-transform:uppercase;color:var(--slate-500);letter-spacing:.06em}
.button,input,textarea,select{font:inherit}
.button{
  border:none;
  border-radius:16px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.button-primary{background:var(--blue);color:white}
.button-secondary{background:white;border:1px solid var(--slate-200);color:var(--slate-900)}
.button:disabled{opacity:.5;cursor:not-allowed}
.input, .textarea{
  width:100%;
  border:1px solid var(--orange-300);
  border-radius:14px;
  padding:10px 12px;
  background:var(--orange-50);
}
.textarea{min-height:120px;resize:vertical}
.notearea{background:var(--rose-50);border-color:var(--rose-200)}
.top-metrics .card{padding:16px}
.progress-wrap{
  width:100%;
  height:12px;
  border-radius:999px;
  background:var(--slate-200);
  overflow:hidden;
}
.progress-bar{height:100%;background:var(--blue)}
.tabs{display:flex;gap:8px;background:#dbeafe;padding:6px;border-radius:16px}
.tab-btn{
  flex:1;
  border:none;
  background:transparent;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.tab-btn.active{background:white;box-shadow:var(--shadow)}
.tab-content{display:none;margin-top:24px}
.tab-content.active{display:block}
.student-card{
  border:1px solid var(--slate-200);
  border-radius:18px;
  padding:12px;
  cursor:pointer;
  background:white;
}
.student-card.active{border-color:var(--blue);background:var(--blue-50)}
.student-list{display:grid;gap:8px}
.accordion-item{
  margin-bottom:16px;
  overflow:hidden;
  border:1px solid var(--orange-300);
}
.accordion-trigger{
  width:100%;
  text-align:left;
  border:none;
  background:white;
  padding:20px 24px;
  cursor:pointer;
}
.accordion-body{display:none;padding:0 24px 24px}
.accordion-item.open .accordion-body{display:block}
.week-head{display:flex;justify-content:space-between;gap:16px}
.week-summary{min-width:220px;padding:12px;border:1px solid var(--orange-300);border-radius:18px;background:var(--amber-50)}
.highlight{background:var(--blue-50);border-color:#dbeafe}
.session-card{padding:16px}
.session-card.done{background:var(--amber-50);border-color:var(--orange-300)}
.session-row{display:flex;gap:12px;align-items:flex-start}
.checkbox{margin-top:4px;transform:scale(1.15)}
.info-box{padding:16px;border-radius:18px;background:var(--amber-50);border:1px solid var(--orange-300)}
.blue-box{padding:16px;border-radius:18px;background:var(--blue-50);border:1px solid var(--blue-200)}
.green-box{padding:16px;border-radius:18px;background:var(--emerald-50);border:1px solid var(--emerald-200)}
.white-box{padding:14px;border-radius:18px;background:white;border:1px solid var(--slate-100)}
.separator{height:1px;background:var(--slate-200);margin:14px 0}
.hidden{display:none !important}
.header-actions{display:flex;align-items:center;gap:10px}
.install-layout{display:flex;gap:16px;align-items:center;justify-content:space-between}
.install-actions{display:flex;flex-direction:column;gap:8px;min-width:220px}
.stopwatch-time{font-size:2rem;font-weight:800;letter-spacing:.04em}
.lap-list{max-height:180px;overflow:auto;display:grid;gap:8px}
.lap-item{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--slate-100);border-radius:14px;padding:10px 12px;background:white}
.print-sheet{display:none}

@media (max-width: 1024px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .week-head,.install-layout{flex-direction:column}
  .header-actions{flex-direction:column;align-items:stretch}
  .install-actions{min-width:unset;width:100%}
}

@media print{
  body{background:white !important}
  .screen-only{display:none !important}
  .print-sheet{display:block !important}
  .print-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .print-card{
    break-inside:avoid;
    border:1px solid #cbd5e1;
    border-radius:12px;
    padding:10px;
    background:white;
    box-shadow:none;
  }
  .container{max-width:100%;padding:0}
}
