/* SAMOG-Apps hub: same family look as SAMOG-Jeu (blue gradient, white tiles, gold accents) */
:root { --brand: #1b62c0; --gold: #e0a82e; --panel: #ffffff; --text: #14171c; --muted: #6b7380; color-scheme: light; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #2850aa; }
html, body { margin: 0; min-height: 100%; color: #fff; font: 16px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: linear-gradient(#1e78d7, #2850aa) fixed; min-height: 100dvh; }
#app { max-width: 760px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 26px) 16px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 24px); }

.top { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.top img { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
.top h1 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.top p { margin: 2px 0 0; opacity: .85; font-size: 15px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.tile { background: var(--panel); color: var(--text); border-radius: 24px; padding: 14px; text-decoration: none;
	display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: transform .12s; }
.tile:active { transform: scale(.97); }
.tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.tile img { width: 100%; aspect-ratio: 1; border-radius: 18px; display: block; margin-bottom: 4px; object-fit: cover; }
.tile .name { font-weight: 800; font-size: 17px; }
.tile .name em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #1d1405; background: var(--gold);
	border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }
.tile .desc { font-size: 13.5px; color: var(--muted); flex: 1; }
.tile .state { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tile .state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c3c8cf; }
.tile .state.up::before { background: #2fa84f; }
.tile .state.down { color: #b3261e; }
.tile .state.down::before { background: #d93a2f; }

footer { margin-top: 26px; text-align: center; font-size: 13.5px; opacity: .8; }
@media (display-mode: standalone) { footer { display: none; } }