:root { color-scheme: dark; --bg: #0f1a2e; --card: #16233d; --line: #263757; --fg: #eef2f8; --mut: #9aa8c0; --acc: #f5c518; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.top { display: flex; align-items: center; gap: 12px; padding: 18px 18px 8px; max-width: 760px; margin: 0 auto; }
.logo { width: 44px; height: 44px; border-radius: 11px; }
h1 { font-size: 24px; margin: 0; flex: 1; letter-spacing: .2px; }
h1 span { color: var(--acc); }
.account { color: var(--mut); text-decoration: none; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
main { max-width: 760px; margin: 0 auto; padding: 14px 16px 24px; }
.tools { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .tools { grid-template-columns: 1fr 1fr; } }
.tool { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: inherit; text-decoration: none; min-height: 100px; }
.tool:active { transform: scale(.99); }
.tool:focus-visible, .tool:hover { border-color: #8b949e; }
.tool img { width: 72px; height: 72px; border-radius: 16px; flex: none; }
.txt { display: flex; flex-direction: column; gap: 4px; }
.txt b { font-size: 20px; }
.txt small { color: var(--mut); font-size: 14px; }
.tag { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.tag.ok { color: #7ee2a8; border-color: #2c6b47; }
.foot { color: var(--mut); font-size: 13px; text-align: center; margin-top: 18px; }
.linkbtn { background: none; border: 0; color: var(--mut); text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }

/* Band and Admin: smaller, de-emphasised tiles below a divider (only for band admins / the app admin) */
.manage { margin-top: 20px; }
.manage[hidden], .tool[hidden] { display: none !important; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 0 2px 10px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.tools.mini { gap: 8px; }
@media (min-width: 420px) { .tools.mini { grid-template-columns: 1fr 1fr; } }
.tools.mini .tool { min-height: 0; padding: 10px 12px; gap: 10px; border-radius: 14px; background: transparent; border-left: 3px solid var(--accent-tile); }
.tools.mini .tool img { width: 44px; height: 44px; border-radius: 11px; }
.tools.mini .txt b { font-size: 16px; color: var(--accent-tile); }
.tools.mini .txt small { font-size: 12.5px; }
.t-band { --accent-tile: #a07ce0; } .t-admin { --accent-tile: #9aa7b8; }