.student-app .guided-primary,
.student-app .guided-secondary,
.student-app .choice-grid button {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

@media (hover: hover) {
  .student-app .guided-primary:hover,
  .student-app .choice-grid button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
  }

  .student-app .guided-secondary:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 73, 189, 0.42);
  }
}

.student-app .guided-primary:active,
.student-app .guided-secondary:active,
.student-app .choice-grid button:active {
  transform: translateY(1px) scale(0.99);
}

@media (prefers-reduced-motion: no-preference) {
  .student-app > .app-hero {
    animation: essuf-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .student-app .student-compass article {
    animation: essuf-enter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .student-app .student-compass article:nth-child(1) { animation-delay: 80ms; }
  .student-app .student-compass article:nth-child(2) { animation-delay: 140ms; }
  .student-app .student-compass article:nth-child(3) { animation-delay: 200ms; }
  .student-app .student-compass article:nth-child(4) { animation-delay: 260ms; }

  .student-app .student-compass article:first-child {
    position: relative;
    overflow: hidden;
  }

  .student-app .student-compass article:first-child::after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--blue);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    animation: essuf-progress 900ms 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .student-app .student-focus-grid {
    animation: essuf-enter 560ms 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .student-app .guided-screen,
  .student-app .qcm-card {
    animation: essuf-stage 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .student-app .guided-dots span.is-done {
    animation: essuf-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .student-app .feedback {
    animation: essuf-feedback 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .student-app .guided-primary {
    animation: essuf-ready 560ms 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes essuf-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes essuf-stage {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes essuf-progress {
    to { transform: scaleX(1); }
  }

  @keyframes essuf-pop {
    from { transform: scale(0.72); }
    to { transform: scale(1); }
  }

  @keyframes essuf-feedback {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes essuf-ready {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion:reduce){.student-app *,.student-app *::before,.student-app *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.student-ccf-card.is-planned{padding:0}.student-ccf-card.is-planned summary{display:flex;align-items:center;justify-content:space-between;padding:12px}.student-ccf-card.is-planned summary span{padding:5px 10px;border-radius:50%;background:#e9f0ff}.student-ccf-card.is-planned p{margin:0;padding:0 12px 10px}

@media (max-width:560px){.student-app{gap:12px}.student-hero{gap:7px 8px;padding-bottom:9px}.student-hero .micro{display:none}.student-hero h1{font-size:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.student-hero p{margin-top:2px;font-size:12px}.student-hero .score-card{min-width:76px;padding:7px 10px}.student-hero .score-card strong{font-size:23px}.student-hero .sync-status{min-height:0;padding:7px 9px;font-size:12px}.student-compass article{min-height:82px}}