/* The "More" screen: the app's sections as glass tiles (design B, 16.09.2026).
   Two columns at phone width, three from 420 px. Each tile is the house material - panel, rim, sheen - so the screen
   reads as part of the app and not as a settings list. */
.mo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
@media (min-width:420px) { .mo-grid { grid-template-columns:repeat(3, 1fr); } }
.mo-tile {
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:3px; align-items:flex-start;
  min-height:104px; padding:14px 13px 13px; border-radius:20px; text-align:left; color:var(--ink);
  background:var(--panel); -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  border:1px solid var(--rim); box-shadow:var(--depth), var(--inner);
  animation:moIn .42s cubic-bezier(.22,.8,.3,1) both; animation-delay:var(--d, 0ms);
}
.mo-tile::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--sheen);
  mix-blend-mode:screen; opacity:var(--sheen-o); pointer-events:none; }
.mo-tile:active { transform:scale(.97); transition:transform .12s; }
.mo-ic { width:38px; height:38px; border-radius:19px; display:grid; place-items:center; margin-bottom:6px;
  background:linear-gradient(160deg, rgba(248,218,85,.20), rgba(255,255,255,.05)); color:var(--gold); }
.mo-ic svg.i { width:20px; height:20px; }
.mo-tile b { font-size:14px; line-height:1.2; }
.mo-tile small { color:var(--dim); font-size:11px; line-height:1.25; }
@keyframes moIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.mo-grid.still .mo-tile { animation:none; }
@media (prefers-reduced-motion:reduce) { .mo-tile { animation:none; } }