html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
.wrap { max-width: 560px; margin: 0 auto; padding: var(--space-24) var(--space-16) var(--space-48); }
.brand { display: flex; align-items: center; gap: var(--space-12); margin-block: var(--space-24); color: var(--brand); font: var(--text-heading-2); }
.stack { display: flex; flex-direction: column; gap: var(--space-16); }
.row { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); font: var(--text-secondary); }
.user { border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.user__head { display: flex; gap: var(--space-12); align-items: center; }
.ltr { direction: ltr; unicode-bidi: isolate; }
h2 { font: var(--text-heading-2); margin: var(--space-24) 0 var(--space-8); }
.wrap { max-width: 720px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-12); }
.app-card { display: flex; align-items: center; gap: var(--space-12); min-block-size: 72px; padding: var(--space-16); border: 1px solid var(--line);
  border-radius: var(--radius-card); background: var(--surface, var(--bg)); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.app-card:hover, .app-card:focus-visible { border-color: var(--brand); box-shadow: 0 1px 6px rgb(0 0 0 / .06); outline: none; }
.app-card__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.app-card__name { font-weight: 600; }
.app-card__desc { color: var(--muted); font: var(--text-secondary); }
.app-card__go { color: var(--muted); flex: none; }
.user__who { flex: 1; min-inline-size: 0; }