@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --ink: #172033; --muted: #7c8799; --line: #e7eaf0; --blue: #2563eb; --blue-dark: #1d4ed8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f7f8fb; font-family: 'DM Sans', Arial, sans-serif; }
.apps-page { width: min(100%, 820px); margin: 0 auto; padding: 42px 20px 64px; }
.apps-header { display: flex; align-items: center; margin-bottom: 22px; }
.apps-header h1 { margin: 0; font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 700; letter-spacing: -.04em; }
.apps-header span { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; margin-left: 8px; padding: 0 7px; border-radius: 50px; vertical-align: 4px; color: #526074; background: #e8edf5; font-size: .76rem; letter-spacing: 0; }
.app-list { display: grid; gap: 10px; }
.app-card { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgba(23,32,51,.025); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.app-card:hover { transform: translateY(-2px); border-color: #d4dbe7; box-shadow: 0 8px 24px rgba(30,41,59,.07); }
.app-logo-wrapper { width: 62px; height: 62px; flex: 0 0 62px; overflow: hidden; border-radius: 14px; background: #eef2ff; }
.app-logo { width: 100%; height: 100%; display: block; object-fit: cover; }
.app-logo-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: white; background: linear-gradient(135deg,#3b82f6,#6d28d9); font-size: 1.75rem; }
.app-info { min-width: 0; flex: 1; }.app-info h2 { overflow: hidden; margin: 0 0 6px; color: var(--ink); font-size: 1rem; font-weight: 700; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }.app-info p { margin: 0; color: var(--muted); font-size: .81rem; }.app-info p i { margin-right: 4px; color: #22a06b; }
.btn-download { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-width: 120px; padding: 11px 15px; border: 0; border-radius: 9px; color: white; background: var(--blue); box-shadow: 0 4px 10px rgba(37,99,235,.18); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .16s ease, transform .16s ease; }.btn-download:hover { background: var(--blue-dark); transform: translateY(-1px); }.btn-download:focus-visible { outline: 3px solid rgba(37,99,235,.32); outline-offset: 3px; }.btn-disabled { color: #9aa5b5; background: #edf0f4; box-shadow: none; }
.empty-state { padding: 60px 20px; border: 1px dashed #cfd6e1; border-radius: 15px; color: var(--muted); text-align: center; }.empty-state i { color: #aab4c2; font-size: 2rem; }.empty-state h2 { margin: 12px 0 4px; color: var(--ink); font-size: 1.1rem; }.empty-state p { margin: 0; }
#confettiCanvas { position: fixed; z-index: 10; inset: 0; display: none; width: 100vw; height: 100vh; pointer-events: none; } #confettiCanvas.is-active { display: block; }
@media (max-width: 520px) { .apps-page { padding: 26px 13px 42px; }.apps-header { margin-bottom: 15px; }.app-card { gap: 12px; min-height: 80px; padding: 11px; border-radius: 13px; }.app-logo-wrapper { width: 52px; height: 52px; flex-basis: 52px; border-radius: 12px; }.btn-download { min-width: 120px; padding: 10px 12px; }.app-info h2 { font-size: .94rem; } }