/* MERCURY App Store — white bg · black headers · red accent. Nothing else. */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --white:#ffffff; --ink:#0a0a0a; --muted:#6b6b70; --line:#e6e6e8; --chip:#f2f2f4;
  --red:#ff2d2d; --red-d:#d61f1f;
  --shadow:0 6px 20px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
}
body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif; color:var(--ink); background:var(--white); min-height:100vh; }

/* Top bar — black header */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:16px 32px; background:var(--ink); color:#fff; }
.brand{ font-weight:800; letter-spacing:3px; font-size:20px; display:flex; align-items:center; gap:10px; }
.brand .dot{ width:14px; height:14px; border-radius:50%; background:var(--red); box-shadow:0 0 12px rgba(255,45,45,.7); }
.account{ text-align:right; line-height:1.2; }
.acct-name{ font-weight:700; font-size:13px; }
.acct-mail{ color:#b8b8bd; font-size:12px; }

main{ max-width:1120px; margin:0 auto; padding:28px 24px 90px; }
.hero{ text-align:center; font-size:40px; font-weight:800; margin-top:24px; letter-spacing:-.5px; }
.hero-sub{ text-align:center; color:var(--muted); margin-top:8px; font-size:15px; }

/* Filters */
.filters{ margin:34px auto 22px; max-width:940px; }
.filter-line{ display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.filter-label{ width:74px; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); flex-shrink:0; padding-top:8px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--line); background:var(--chip); color:var(--ink); padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:all .14s; text-transform:capitalize; }
.chip:hover{ border-color:#cfcfd4; }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.active-query{ margin-top:14px; font-size:14px; min-height:26px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.active-query .lbl{ color:var(--muted); }
.active-query .q{ font-family:ui-monospace,Menlo,monospace; background:var(--red); color:#fff; padding:5px 12px; border-radius:8px; font-weight:700; letter-spacing:.5px; }
.active-query #clear{ border:none; background:none; color:var(--red); font-weight:700; cursor:pointer; font-size:13px; }
.active-query .muted{ color:var(--muted); }

/* Grid */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px; margin-top:20px; }
.tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:22px 12px 16px; background:var(--white); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); cursor:pointer; transition:transform .15s, box-shadow .15s; }
.tile:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.icon{ width:70px; height:70px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:34px; background:var(--ink); box-shadow:0 6px 16px rgba(0,0,0,.22); overflow:hidden; }
.icon img, .m-icon img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.label{ font-weight:700; font-size:15px; }
.platforms{ font-size:11px; color:var(--muted); text-transform:capitalize; text-align:center; line-height:1.4; }
.badge{ position:absolute; top:10px; right:10px; background:var(--red); color:#fff; font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.5px; }
.badge.soon-badge{ background:#ececed; color:#7a7a80; }
.empty{ grid-column:1/-1; text-align:center; color:var(--muted); padding:50px; font-size:15px; }

/* Detail modal — the listing */
.modal{ position:fixed; inset:0; background:rgba(10,10,10,.5); display:flex; align-items:center; justify-content:center; z-index:100; padding:24px; }
.modal.hidden{ display:none; }
.modal-card{ background:#fff; border-radius:24px; max-width:680px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.m-head{ display:flex; align-items:center; gap:18px; }
.m-icon{ width:78px; height:78px; border-radius:20px; background:var(--ink); display:flex; align-items:center; justify-content:center; font-size:40px; flex-shrink:0; }
.m-title{ font-size:24px; font-weight:800; }
.m-plat{ color:var(--muted); font-size:13px; margin-top:4px; text-transform:capitalize; }
.m-close{ margin-left:auto; border:none; background:#f2f2f4; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; align-self:flex-start; }
.m-action{ margin-top:18px; display:flex; align-items:center; gap:12px; }
.btn{ border:none; padding:12px 28px; border-radius:12px; font-size:15px; font-weight:700; cursor:pointer; }
.btn.red{ background:var(--red); color:#fff; }
.btn.red:hover{ background:var(--red-d); }
.btn.ghost{ background:#f2f2f4; color:var(--ink); cursor:default; }
.m-hubnote{ font-size:12px; color:var(--muted); }
.m-desc{ margin-top:18px; font-size:15px; line-height:1.6; color:#22222a; }
.m-section{ margin-top:22px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.shots{ display:flex; gap:10px; margin-top:10px; overflow-x:auto; }
.shot{ flex:0 0 auto; width:200px; height:120px; border-radius:12px; background:#f2f2f4; border:1px dashed #d7d7db; display:flex; align-items:center; justify-content:center; color:#a0a0a8; font-size:12px; }
.video{ margin-top:10px; height:200px; border-radius:14px; background:#0a0a0a; display:flex; align-items:center; justify-content:center; color:#666; font-size:13px; }
.from-design{ margin-top:14px; font-size:12px; color:var(--muted); }
.from-design b{ color:var(--red); }

/* Toast */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px; font-weight:600; z-index:200; transition:transform .3s; }
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast .r{ color:var(--red); }

@media(max-width:560px){ .hero{font-size:30px;} .filter-label{width:58px;} .topbar{padding:14px 18px;} }