:root {
  --navy: #0b3d5c;
  --gold: #f2c94c;
  --ink: #12263a;
  --mist: #f4f7fa;
  --card: #ffffff;
  --danger: #b42318;
  --ok: #067647;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--navy) 0%, #134e75 180px, var(--mist) 180px);
  color: var(--ink);
  min-height: 100vh;
}
header.appbar {
  color: #fff;
  padding: 16px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
header h1 { margin: 0; font-size: 1.25rem; }
header .sub { opacity: .9; font-size: .9rem; margin-top: 4px; }
main { padding: 0 14px 40px; max-width: 720px; margin: 0 auto; }
.card {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(18, 38, 58, .08);
}
.lesson.sub { border-left: 4px solid var(--gold); }
.lesson.cancel { border-left: 4px solid var(--danger); opacity: .9; }
.badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
}
.badge.cancel { background: var(--danger); color: #fff; }
label { display: block; font-size: .85rem; margin: 10px 0 4px; }
input, select, button, textarea {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d0d7de;
}
button {
  background: var(--navy);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
}
button.secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
button:disabled { opacity: .6; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 120px; }
.error { color: var(--danger); margin-top: 8px; }
.ok { color: var(--ok); margin-top: 8px; }
.muted { color: #5b6b7c; font-size: .9rem; }
.hidden { display: none !important; }
.period { font-weight: 700; }
.install-hint {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: .92rem;
}