:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --fg: var(--tg-theme-text-color, #1c1c1e);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-fg: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --danger: #d9363e;
}
* { 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-bottom: calc(64px + env(safe-area-inset-bottom)); }
header { position: sticky; top: 0; z-index: 2; padding: 10px 10px 6px; background: var(--bg); }
form { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; outline: none; }
input:focus { border-color: var(--accent); }
button { padding: 10px 16px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-fg); font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
#status { min-height: 22px; padding: 6px 2px 0; color: var(--hint); font-size: 14px; }
#status.error { color: var(--danger); }
#bar { height: 3px; margin-top: 4px; border-radius: 2px; background: var(--card); overflow: hidden; }
#fill { display: block; width: 0; height: 100%; background: var(--accent); transition: width .3s; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; padding: 4px 10px 10px; }
.tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 8px; background: var(--card); animation: pop .25s ease-out; }
.tile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tile:active { transform: scale(.97); }
.sending .tile { opacity: .45; pointer-events: none; }
.sending .tile.chosen { opacity: 1; outline: 3px solid var(--accent); }
footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--card); }
footer button { width: 100%; background: var(--card); color: var(--accent); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }