:root{
  --bg: #0b0b0c;
  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --radius: 18px;
  --shadow: 0 14px 40px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);

  /* App-like background */
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(700px 500px at 85% 0%, rgba(255,255,255,.07), transparent 55%),
    var(--bg);
}

/* Prevent iOS overscroll glow, and reduce “rubber band” feel */
body{
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Center the app “screen” and respect iPhone safe areas */
main{
  width: min(560px, 100%);
  min-height: 100vh;
  padding:
    calc(env(safe-area-inset-top) + 18px)
    18px
    calc(env(safe-area-inset-bottom) + 18px);
  margin: 0 auto;

  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}

.header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  user-select: none;
}

h1{
  margin: 0;
  font-size: 22px;
  letter-spacing: .2px;
}

.subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2×2 on mobile too */
  gap: 14px;
  align-content: start;
}

/* Make tiles feel tappable like app buttons */
.tile{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 16px;
  min-height: 150px;

  display: grid;
  align-content: start;
  gap: 8px;

  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--text);

  /* Reduce link tap highlight on iOS */
  -webkit-tap-highlight-color: transparent;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.tile:hover{
  background: var(--card2);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* “Pressed” state on mobile */
.tile:active{
  transform: scale(.985);
}

.tileTitle{
  font-size: 18px;
  font-weight: 800;
}

.tileSub{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
}

.footer{
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding-bottom: 6px;
}