/* /app: install VERTEX on this device */
.ap-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-bottom: 28px; }
.ap-hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin: 6px 0 10px; }
.ap-icon { width: 160px; height: 160px; border-radius: 36px; box-shadow: 0 24px 60px -18px #000c; }
.ap-status { margin-top: 18px; }
.ap-done { color: var(--teal-text, var(--teal)); font-weight: 600; }
.ap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ap-card { padding: 20px 22px; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--carbon-2); }
.ap-card.is-mine { border-color: var(--teal); }
.ap-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.ap-card ol, .ap-card ul { padding-left: 1.2em; line-height: 1.6; margin: 0; }
.ap-card li + li { margin-top: 6px; }
.ap-small { font-size: 14px; color: var(--muted-dark); margin: 10px 0 0; }
@media (max-width: 860px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-hero { grid-template-columns: minmax(0, 1fr); }
  .ap-icon { width: 96px; height: 96px; border-radius: 22px; order: -1; }
}