/* Home: sign-in and app tiles */
.brand { text-align: center; font-size: 1.6rem; font-weight: 750; letter-spacing: .02em; margin-bottom: .5rem; }
.brand span { color: var(--gold); font-weight: 500; }
.hello { font-size: 1.5rem; margin: .5rem 0 1.25rem; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.4rem 1.3rem; border-radius: 14px; text-decoration: none; color: var(--fg);
  background: var(--card); border: 1px solid var(--border); transition: border-color .15s, transform .15s, background .15s; }
.tile:hover, .tile:focus-visible { border-color: var(--gold); background: #292726; transform: translateY(-2px); outline: none; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.tile .ico { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: 12px; color: var(--gold); background: var(--gold-soft); display: block; }
.tile .ico svg { width: 100%; height: 100%; display: block; }
.tile b { font-size: 1.15rem; margin-top: .4rem; }
.tile span { color: var(--muted); font-size: .9rem; }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .tile { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; }
  .tile .ico { width: 1.8rem; height: 1.8rem; flex: none; } .tile b { margin-top: 0; } .tile span { display: none; } }
.tile { position: relative; }
.tile .tile-badge { position: absolute; top: 1.1rem; right: 1.1rem; display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  color: var(--charcoal); background: var(--gold); }
.tile .tile-badge.mention { background: #e07a5f; color: #1b1a19; }
@media (max-width: 520px) { .tile .tile-badge { position: static; display: inline-block; margin-left: auto; } }