.hub-hero { display: flex; gap: 20px; align-items: center; padding: 18px 0 8px; }
.hub-hero img { border-radius: 15px; box-shadow: var(--shadow); }
.hub-hero p { color: var(--subtle); margin-top: 6px; max-width: 64ch; font-size: 15px; }
.hub-h { margin-top: 32px; }
.hub-sub { margin: 4px 0 14px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.app { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; transition: box-shadow .15s, border-color .15s; }
a.app:hover, .app:focus-within { box-shadow: var(--shadow); border-color: var(--input-border); }
.app .top { display: flex; gap: 12px; align-items: center; }
.app .top img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.app .top b { display: block; font-size: 15px; letter-spacing: .02em; }
.app .top span { color: var(--subtle); font-size: 12px; }
.app p { color: var(--subtle); flex: 1; }
.app .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.app details { font-size: 13px; color: var(--subtle); }
.app details summary { cursor: pointer; color: var(--accent); }
.app details div { white-space: pre-wrap; margin-top: 6px; }