:root {
  --navy: #16324f;
  --blue: #2f6f8f;
  --light-blue: #eaf4f8;
  --paper: #f7f5ef;
  --card: #ffffff;
  --ink: #17212b;
  --muted: #63707c;
  --line: #d8dee4;
  --danger: #a73737;
  --shadow: 0 10px 30px rgba(22, 50, 79, 0.1);
  --radius: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(47,111,143,.10), transparent 35%),
    linear-gradient(180deg, #f9fbfc 0%, var(--paper) 100%);
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-header {
  background: var(--navy);
  color: white;
  padding: 24px clamp(18px, 4vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.app-header h1 { margin: 2px 0 4px; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.eyebrow, .section-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  font-weight: 800;
}
.subtitle { margin: 0; opacity: .8; }
.status-area { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  font-size: .85rem;
  font-weight: 700;
}
.badge.offline { background: #d6a53c; color: #1d1d1d; }
.badge.online { background: #2f8b62; }

.app-shell {
  width: min(1200px, calc(100% - 28px));
  margin: 24px auto 50px;
}

.card {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(216,222,228,.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.toolbar {
  padding: 18px;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr auto;
  gap: 16px;
  align-items: end;
}

.toolbar-group { display: grid; gap: 7px; }
.toolbar-group label, dialog label { font-weight: 750; font-size: .9rem; }
input[type="text"], input[type="number"], select {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  border-radius: 10px;
  padding: 11px 12px;
  color: var(--ink);
}
input[type="color"] {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  padding: 4px;
}

.toolbar-actions { display: flex; gap: 9px; flex-wrap: wrap; }

button {
  border: 0;
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 800;
  transition: transform .15s ease, filter .15s ease;
}
button:hover { transform: translateY(-1px); filter: brightness(1.03); }
button:active { transform: translateY(0); }

.primary { background: var(--blue); color: white; }
.secondary { background: #edf1f4; color: var(--ink); border: 1px solid var(--line); }
.danger { background: var(--danger); color: white; }
.danger-outline { color: var(--danger); background: white; border: 1px solid #d8aaaa; }
.icon-btn { background: transparent; font-size: 1.8rem; padding: 0 8px; }

.quick-tools { margin-top: 18px; padding: 18px; }
.timer-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.timer-display { font-size: clamp(2rem, 5vw, 4.3rem); font-weight: 900; letter-spacing: .04em; color: var(--navy); }
.timer-display.warning { color: var(--danger); animation: pulse 1s infinite; }
.timer-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timer-controls input { width: 80px; }
@keyframes pulse { 50% { opacity: .55; } }

.board-section { margin-top: 28px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 13px; }
.section-heading h2 { margin: 4px 0 0; }
.edit-hint { margin: 0; color: var(--danger); font-weight: 700; }

.sound-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.sound-card {
  position: relative;
  min-height: 150px;
  border-radius: 17px;
  color: white;
  overflow: hidden;
  box-shadow: 0 9px 20px rgba(26,43,58,.12);
  border: 2px solid transparent;
}
.sound-card.playing { border-color: #ffe08a; transform: translateY(-2px); }

.play-surface {
  width: 100%;
  min-height: 150px;
  border-radius: 15px;
  color: white;
  background: transparent;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}
.sound-icon { font-size: 2.35rem; display: block; margin-bottom: 8px; }
.sound-title { display: block; font-size: 1.02rem; line-height: 1.2; }
.sound-category {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-size: .7rem;
}

.card-actions {
  position: absolute;
  inset: auto 7px 7px 7px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.editing .card-actions { display: grid; }
.editing .play-surface { padding-bottom: 55px; }
.card-actions button { padding: 8px 4px; font-size: .76rem; background: rgba(255,255,255,.92); color: var(--ink); }
.card-actions button.delete { color: var(--danger); }

.empty-state {
  text-align: center;
  padding: 50px 20px;
  background: white;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
}

.data-tools {
  margin-top: 28px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.data-tools p { margin: 4px 0 0; color: var(--muted); }

dialog {
  width: min(540px, calc(100% - 28px));
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}
dialog::backdrop { background: rgba(11,26,40,.66); }
dialog form { padding: 22px; display: grid; gap: 15px; }
.dialog-header { display: flex; justify-content: space-between; align-items: start; }
.dialog-header h2 { margin: 3px 0 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 9px; }
.field-note { margin: -8px 0 0; color: var(--muted); font-size: .82rem; }
.record-box { background: var(--light-blue); padding: 15px; border-radius: 12px; }
.record-box p { margin-top: 0; }
.record-box audio { width: 100%; margin-top: 12px; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: var(--navy);
  color: white;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: .2s ease;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translateY(0); }
.hidden { display: none !important; }

@media (max-width: 940px) {
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar-actions { grid-column: 1 / -1; }
  .sound-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar-actions { grid-column: auto; }
  .timer-panel, .data-tools { align-items: flex-start; flex-direction: column; }
  .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 430px) {
  .sound-grid { grid-template-columns: 1fr; }
  .play-surface, .sound-card { min-height: 125px; }
}

:fullscreen .app-header { display: none; }
:fullscreen .app-shell { width: min(1400px, calc(100% - 28px)); margin-top: 15px; }
:fullscreen .data-tools { display: none; }


.nav-tabs {
  padding: 8px;
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
}
.tab-btn {
  white-space: nowrap;
  background: transparent;
  color: var(--muted);
}
.tab-btn.active {
  background: var(--navy);
  color: white;
}
.app-view { display: none; }
.active-view { display: block; }

.compact-check {
  align-self: center;
  padding-bottom: 8px;
  font-size: .86rem;
}

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr);
  gap: 18px;
}
.lesson-builder, .live-cue-panel, .tool-card, .template-panel { padding: 20px; }
.cue-list { display: grid; gap: 10px; }
.cue-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.cue-row.active { border-color: var(--blue); background: var(--light-blue); }
.cue-row-icon { font-size: 1.7rem; text-align: center; }
.cue-row h3 { margin: 0 0 3px; font-size: 1rem; }
.cue-row p { margin: 0; color: var(--muted); font-size: .85rem; }
.cue-row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.cue-row-actions button { padding: 7px 9px; }

.live-cue-panel { align-self: start; position: sticky; top: 14px; }
.cue-progress { color: var(--muted); margin: 6px 0 12px; font-weight: 700; }
.current-cue-card {
  min-height: 260px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--navy), var(--blue));
  color: white;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 22px;
}
.current-cue-card .big-icon { font-size: 3rem; }
.current-cue-card h2 { margin: 12px 0 8px; }
.current-cue-card p { margin: 0; opacity: .85; }
.cue-live-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.full-width { width: 100%; margin-top: 10px; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}
.tool-card textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  resize: vertical;
}
.picker-result {
  min-height: 80px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--light-blue);
  border-radius: 12px;
  margin: 12px 0;
  padding: 14px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--navy);
}
.score-row {
  display: grid;
  grid-template-columns: 1fr 70px 46px 46px;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.score-row strong {
  font-size: 2rem;
  text-align: center;
  color: var(--navy);
}
.traffic-light {
  width: 150px;
  margin: 18px auto;
  padding: 16px;
  border-radius: 28px;
  background: #222;
  display: grid;
  gap: 12px;
}
.light {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: auto;
  opacity: .22;
  border: 4px solid rgba(255,255,255,.2);
}
.light.active { opacity: 1; box-shadow: 0 0 25px currentColor; }
.light.red { background: #db3b3b; color: #db3b3b; }
.light.amber { background: #e7a52b; color: #e7a52b; }
.light.green { background: #35a264; color: #35a264; }
.traffic-message {
  text-align: center;
  border-radius: 10px;
  padding: 12px;
  font-weight: 900;
}
.traffic-message.good { background: #dff4e8; color: #23623f; }
.traffic-message.warn { background: #fff1cc; color: #835c00; }
.traffic-message.stop { background: #f8dddd; color: #8d2626; }

.template-panel { display: grid; gap: 18px; }
.template-panel p { color: var(--muted); }
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.template-card {
  min-height: 120px;
  background: white;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
}
.template-card span { font-size: 2rem; }

@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .live-cue-panel { position: static; }
  .template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .tools-grid { grid-template-columns: 1fr; }
  .cue-live-actions { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .template-grid { grid-template-columns: 1fr; }
  .score-row { grid-template-columns: 1fr 60px 42px 42px; }
}

.version-label {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #d6a53c;
  color: #17212b;
  font-size: .72rem;
  vertical-align: middle;
}


.attendance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.attendance-grid div {
  background: var(--light-blue);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.attendance-grid span { display: block; color: var(--muted); font-size: .8rem; }
.attendance-grid strong { display: block; font-size: 2rem; color: var(--navy); }

.preset-list { display: grid; gap: 9px; margin: 14px 0; }
.preset-btn {
  background: white;
  border: 1px solid var(--line);
  text-align: left;
}

.boards-panel { padding: 20px; }
.boards-panel p { color: var(--muted); }
.board-save-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 18px 0;
}
.saved-boards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.saved-board-card {
  border: 1px solid var(--line);
  background: white;
  border-radius: 14px;
  padding: 15px;
}
.saved-board-card h3 { margin: 0 0 6px; }
.saved-board-card p { margin: 0 0 12px; font-size: .85rem; }
.saved-board-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.presentation-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  overflow: auto;
}
.presentation-header {
  background: var(--navy);
  color: white;
  padding: 18px clamp(16px,4vw,40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.presentation-header h2 { margin: 4px 0 0; }
.presentation-body {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 18px;
  padding: 20px;
}
.presentation-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.presentation-sound {
  min-height: 180px;
  border: 0;
  border-radius: 18px;
  color: white;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20px;
  box-shadow: var(--shadow);
}
.presentation-sound span { display: block; font-size: 3rem; margin-bottom: 8px; }
.presentation-side {
  background: white;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 18px;
}
.presentation-timer {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--navy);
  text-align: center;
  margin: 12px 0;
}
.presentation-cue-label { margin-top: 25px; }
.presentation-cue {
  min-height: 100px;
  background: var(--light-blue);
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
  font-weight: 800;
}

@media (max-width: 900px) {
  .saved-boards-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .presentation-body { grid-template-columns: 1fr; }
  .presentation-side { position: static; }
}
@media (max-width: 600px) {
  .board-save-row { grid-template-columns: 1fr; }
  .saved-boards-grid, .presentation-grid { grid-template-columns: 1fr; }
}


.dashboard-hero {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, #ffffff, #eaf4f8);
}
.dashboard-hero h2 { margin: 5px 0; font-size: 2rem; }
.dashboard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dashboard-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.dashboard-card { padding: 18px; }
.dashboard-card h3 { margin: 8px 0 4px; font-size: 1.45rem; color: var(--navy); }
.dashboard-card p { margin: 0; color: var(--muted); }
.recent-panel, .sessions-panel { margin-top: 18px; padding: 20px; }

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.profile-panel { padding: 20px; }
.profile-list { display: grid; gap: 10px; }
.profile-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: white;
}
.profile-item.active { border-color: var(--blue); background: var(--light-blue); }
.profile-item h3 { margin: 0 0 5px; }
.profile-item p { margin: 0 0 10px; color: var(--muted); font-size: .86rem; }
.profile-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.session-list { display: grid; gap: 10px; }
.session-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: white;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.session-item h3 { margin: 0 0 4px; }
.session-item p { margin: 0; color: var(--muted); font-size: .85rem; }

.licence-panel {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
}
.licence-panel h2 { margin: 5px 0; }
.licence-panel p { margin: 0; color: var(--muted); }
.licence-form { display: flex; gap: 9px; }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-layout { grid-template-columns: 1fr; }
  .licence-panel { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .session-item { grid-template-columns: 1fr; }
  .licence-form { flex-direction: column; }
}


.reports-layout {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr);
  gap: 18px;
}
.report-panel, .report-summary-panel { padding: 20px; }
.report-panel > p { color: var(--muted); }
.report-actions { margin: 15px 0; }
.attendance-register { display: grid; gap: 8px; }
.attendance-row {
  display: grid;
  grid-template-columns: 42px 1fr 105px 105px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 10px;
  background: white;
}
.attendance-row .number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--light-blue);
  font-weight: 800;
}
.attendance-choice {
  border: 1px solid var(--line);
  background: #fff;
}
.attendance-choice.selected.present { background: #dff4e8; color: #23623f; border-color: #73b98f; }
.attendance-choice.selected.absent { background: #f8dddd; color: #8d2626; border-color: #cf8888; }

.report-summary-panel { align-self: start; position: sticky; top: 14px; }
.report-summary-panel label { display: grid; gap: 6px; margin-top: 14px; font-weight: 700; }
.report-summary-panel textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}
.report-stat-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: 15px 0;
}
.report-stat-grid div {
  background: var(--light-blue);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.report-stat-grid span { display:block; color:var(--muted); font-size:.75rem; }
.report-stat-grid strong { display:block; color:var(--navy); font-size:1.7rem; }

.session-report-panel { margin-top: 18px; }
.printable-report {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  background: white;
}
.print-report-header {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px;
  margin-bottom: 15px;
}
.print-report-header img { width: 72px; height: 72px; object-fit: contain; }
.print-report-header h2 { margin: 0 0 4px; }
.print-report-header p { margin: 0; color: var(--muted); }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { border: 1px solid #bbb; padding: 8px; text-align: left; }
.report-table th { background: #eef2f5; }

.branding-panel {
  padding: 20px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 22px;
  margin-bottom: 18px;
}
.branding-panel p { color: var(--muted); }
.branding-form { display:grid; gap:12px; }
.branding-form label { display:grid; gap:6px; font-weight:700; }
.brand-logo-preview {
  width: 120px;
  height: 120px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items:center;
  overflow:hidden;
}
.brand-logo-preview img { width:100%; height:100%; object-fit:contain; }

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11,26,40,.78);
  display: grid;
  place-items: center;
  padding: 20px;
}
.onboarding-card {
  width: min(560px,100%);
  background: white;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.onboarding-card h2 { margin:5px 0 8px; }
.onboarding-card > p { color:var(--muted); }
.onboarding-steps { display:grid; gap:12px; margin:20px 0; }
.onboarding-steps label { display:grid; gap:6px; font-weight:700; }

@media (max-width: 900px) {
  .reports-layout, .branding-panel { grid-template-columns:1fr; }
  .report-summary-panel { position:static; }
}
@media (max-width: 650px) {
  .attendance-row { grid-template-columns: 38px 1fr; }
  .attendance-row .attendance-choice { grid-column:auto; }
}

@media print {
  body * { visibility: hidden !important; }
  #printableSessionReport, #printableSessionReport *,
  .attendance-register.print-target, .attendance-register.print-target * {
    visibility: visible !important;
  }
  #printableSessionReport, .attendance-register.print-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 0;
  }
  .nav-tabs, .app-header { display:none !important; }
}


.pack-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.pack-header h2 { margin: 5px 0; }
.pack-header p { color: var(--muted); }
.pack-selector { display: flex; gap: 8px; flex-wrap: wrap; }
.pack-chip { background: white; border: 1px solid var(--line); }
.pack-chip.active { background: var(--navy); color: white; }
.pack-chip.disabled { opacity: .45; cursor: not-allowed; }

.phonics-layout {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(290px,.65fr);
  gap: 18px;
  margin-top: 18px;
}
.phonics-panel, .phonics-focus-panel, .phonics-activities-panel { padding: 20px; }
.phonics-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 16px;
}
.phonics-toolbar h2 { margin: 5px 0 0; }
.phonics-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 10px;
}
.phonics-tile {
  min-height: 112px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  place-items: center;
  text-align: center;
}
.phonics-tile.active {
  background: var(--light-blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(47,111,143,.12);
}
.phonics-tile .tile-symbol { font-size: 1.85rem; font-weight: 900; color: var(--navy); }
.phonics-tile .tile-ipa { font-size: .78rem; color: var(--muted); }
.phonics-tile .tile-word { font-size: .82rem; color: var(--muted); }
.phonics-tile .recorded-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #2f855a; margin: 4px auto 0;
}

.phonics-focus-panel { align-self: start; position: sticky; top: 14px; }
.phonics-focus-card {
  min-height: 270px;
  border-radius: 18px;
  background: linear-gradient(145deg,var(--navy),var(--blue));
  color: white;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 22px;
}
.focus-symbol { font-size: 4rem; font-weight: 900; }
.focus-ipa { font-size: 1.4rem; opacity: .82; }
.phonics-focus-card h2 { margin: 10px 0 4px; font-size: 2rem; }
.phonics-focus-card p { margin: 0; opacity: .82; }
.phonics-focus-actions { display: grid; gap: 8px; margin-top: 12px; }

.phonics-activities-panel { margin-top: 18px; }
.activity-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.activity-tab { background: white; border: 1px solid var(--line); }
.activity-tab.active { background: var(--navy); color: white; }
.phonics-activity-box {
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 22px;
}
.activity-question { width: min(720px,100%); text-align: center; }
.activity-question h3 { font-size: 1.7rem; margin: 0 0 18px; }
.activity-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.activity-option {
  min-height: 90px;
  background: var(--light-blue);
  border: 1px solid #bdd5df;
  font-size: 1.15rem;
}
.activity-option.correct { background:#dff4e8; border-color:#73b98f; color:#23623f; }
.activity-option.wrong { background:#f8dddd; border-color:#cf8888; color:#8d2626; }
.blend-display {
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--navy);
  margin: 12px 0 20px;
}

@media (max-width: 1000px) {
  .phonics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .phonics-layout { grid-template-columns:1fr; }
  .phonics-focus-panel { position:static; }
}
@media (max-width: 650px) {
  .pack-header, .phonics-toolbar { align-items:flex-start; flex-direction:column; }
  .phonics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .activity-options { grid-template-columns:1fr; }
}


.learning-pack-content { margin-top: 18px; }
.general-pack-layout {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(290px,.65fr);
  gap: 18px;
}
.general-pack-panel, .general-focus-panel, .general-activities-panel { padding: 20px; }
.general-pack-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 11px;
}
.general-pack-card {
  min-height: 135px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 15px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}
.general-pack-card.active {
  background: var(--light-blue);
  border-color: var(--blue);
}
.general-pack-card .general-card-emoji {
  display: block;
  font-size: 2.5rem;
  margin-bottom: 7px;
}
.general-pack-card strong { display:block; color:var(--navy); }
.general-pack-card small { color:var(--muted); display:block; margin-top:4px; }

.general-focus-panel { align-self:start; position:sticky; top:14px; }
.general-focus-card {
  min-height: 270px;
  border-radius: 18px;
  background: linear-gradient(145deg,var(--navy),var(--blue));
  color: white;
  display:grid;
  place-content:center;
  text-align:center;
  padding:22px;
}
.general-focus-emoji { font-size:5rem; }
.general-focus-card h2 { margin:10px 0 5px; font-size:2rem; }
.general-focus-card p { margin:0; opacity:.84; }
.general-activities-panel { margin-top:18px; }

@media (max-width: 1000px) {
  .general-pack-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .general-pack-layout { grid-template-columns:1fr; }
  .general-focus-panel { position:static; }
}
@media (max-width: 650px) {
  .general-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.general-pack-card .recorded-badges {
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:6px;
}
.general-pack-card .recorded-badge {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2f855a;
}


.platform-voice-list { display:grid; gap:10px; }
.platform-voice-row {
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:white;
}
.platform-voice-row strong { color:var(--navy); }
.platform-voice-row span { color:var(--muted); font-size:.82rem; }
.voice-recorded-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#dff4e8;
  color:#23623f;
  font-size:.75rem;
  font-weight:800;
}
.pack-selector { max-width:720px; justify-content:flex-end; }
@media (max-width:700px) {
  .platform-voice-row { grid-template-columns:1fr; }
}


.voice-studio-layout, .noise-controller-layout {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);
  gap:18px;
}
.voice-studio-panel, .voice-summary-panel, .noise-stage-panel, .noise-settings-panel { padding:20px; }
.voice-studio-panel > p, .voice-generation-box p { color:var(--muted); }
.voice-studio-panel label, .noise-settings-panel label {
  display:grid;
  gap:7px;
  margin-top:14px;
  font-weight:750;
}
.voice-script-box {
  background:var(--light-blue);
  border:1px solid #c7dce5;
  border-radius:14px;
  padding:16px;
  margin:18px 0;
}
.voice-script-box p { margin:8px 0 0; line-height:1.55; }
.consent-row { grid-template-columns:auto 1fr !important; align-items:start; }
.voice-record-box { margin-top:16px; }
.voice-generation-box {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.voice-generation-box h3 { margin:0 0 6px; }
.voice-progress {
  height:12px;
  border-radius:999px;
  background:#e5e9ed;
  overflow:hidden;
  margin-top:14px;
}
.voice-progress-bar {
  width:0%;
  height:100%;
  background:var(--blue);
  transition:width .25s ease;
}
.voice-summary-panel { align-self:start; position:sticky; top:14px; }
.voice-stat-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}
.voice-stat-grid div {
  background:var(--light-blue);
  border-radius:12px;
  padding:13px;
  text-align:center;
}
.voice-stat-grid span { display:block; color:var(--muted); font-size:.78rem; }
.voice-stat-grid strong { display:block; color:var(--navy); font-size:1.8rem; }

.noise-stage-panel { min-width:0; }
.privacy-notice {
  background:#e8f5ee;
  color:#276346;
  border:1px solid #b7ddc8;
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:14px;
  font-size:.86rem;
}
.balloon-stage {
  position:relative;
  height:min(68vh,650px);
  min-height:480px;
  overflow:hidden;
  border-radius:20px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.9) 0 4%, transparent 5%),
    radial-gradient(circle at 75% 28%, rgba(255,255,255,.8) 0 5%, transparent 6%),
    linear-gradient(#8fd3ff 0%, #dff4ff 68%, #9ed27b 69%, #6fa950 100%);
  border:1px solid #9dc8df;
}
.noise-sky-label {
  position:absolute;
  top:16px;
  left:16px;
  right:16px;
  z-index:5;
  display:flex;
  justify-content:space-between;
  background:rgba(255,255,255,.88);
  border-radius:12px;
  padding:10px 14px;
}
.pop-zone {
  position:absolute;
  top:74px;
  left:0;
  right:0;
  height:5px;
  border-top:3px dashed rgba(171,42,42,.7);
  text-align:center;
  color:#a73737;
  font-weight:900;
  font-size:.75rem;
  letter-spacing:.12em;
}
.noise-balloon {
  position:absolute;
  bottom:44px;
  font-size:4.8rem;
  transform:translateY(0) rotate(0deg);
  transition:transform .2s linear, opacity .15s ease;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.15));
}
.noise-balloon span { display:block; }
.noise-balloon::after {
  content:"";
  position:absolute;
  width:2px;
  height:90px;
  background:rgba(50,50,50,.45);
  left:50%;
  top:72%;
}
.balloon-one { left:10%; }
.balloon-two { left:32%; font-size:4.2rem; }
.balloon-three { left:57%; font-size:5.1rem; }
.balloon-four { left:79%; font-size:4.5rem; }
.noise-balloon.shaking span { animation:balloonShake .12s infinite alternate; }
.noise-balloon.popped { opacity:0; transform:translateY(-420px) scale(1.8) !important; }
@keyframes balloonShake {
  from { transform:rotate(-6deg) translateX(-4px); }
  to { transform:rotate(6deg) translateX(4px); }
}
.noise-pop-flash {
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  font-size:clamp(5rem,16vw,11rem);
  font-weight:1000;
  color:#c72e2e;
  text-shadow:0 6px 0 white,0 0 40px rgba(255,255,255,.9);
  background:rgba(255,255,255,.36);
  animation:popFlash .55s ease;
}
@keyframes popFlash {
  0% { transform:scale(.2); opacity:0; }
  45% { transform:scale(1.2); opacity:1; }
  100% { transform:scale(1); opacity:.9; }
}
.stage-ground {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(30,84,35,.85);
  color:white;
  text-align:center;
  padding:10px;
  font-weight:800;
}
.noise-meter-track {
  margin-top:12px;
  height:18px;
  background:#e5e9ed;
  border-radius:999px;
  overflow:hidden;
}
.noise-meter-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#36a865 0 50%,#e4a72d 65%,#c83d3d 100%);
  transition:width .12s linear;
}
.noise-settings-panel { align-self:start; position:sticky; top:14px; }
.calibration-readout {
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  background:var(--light-blue);
  border-radius:10px;
  padding:10px;
}

#noiseControllerView.noise-fullscreen-mode {
  position:fixed;
  inset:0;
  z-index:150;
  background:var(--paper);
  overflow:auto;
  padding:12px;
}
#noiseControllerView.noise-fullscreen-mode .noise-settings-panel,
#noiseControllerView.noise-fullscreen-mode .app-header,
#noiseControllerView.noise-fullscreen-mode .nav-tabs { display:none; }
#noiseControllerView.noise-fullscreen-mode .noise-controller-layout { grid-template-columns:1fr; }
#noiseControllerView.noise-fullscreen-mode .balloon-stage { height:calc(100vh - 150px); }

@media (max-width:950px) {
  .voice-studio-layout, .noise-controller-layout { grid-template-columns:1fr; }
  .voice-summary-panel, .noise-settings-panel { position:static; }
}