/* Shared by the store front (index.html) and the per-app pages (app.php).
   Extracted when the second page appeared, so the two can never drift apart. */

:root{
  --bg:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --muted:#6e6e73;
  --line:rgba(0,0,0,.10); --blue:#0071e3; --pill:#e8e8ed; --pill-ink:#0071e3;
  --note:#fff8e6; --note-line:#f0d9a0; --note-ink:#6b5418;
  --bar:rgba(245,245,247,.72); --field:#ffffff; --seg:#e8e8ed; --seg-on:#ffffff;
  --radius:18px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",
    Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --card:#1c1c1e; --ink:#f5f5f7; --muted:#98989d;
    --line:rgba(255,255,255,.14); --blue:#2997ff; --pill:#2c2c2e; --pill-ink:#2997ff;
    --note:#241f12; --note-line:#4a3d1c; --note-ink:#e6cf95;
    --bar:rgba(0,0,0,.72); --field:#1c1c1e; --seg:#2c2c2e; --seg-on:#48484a;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1c1c1e; --ink:#f5f5f7; --muted:#98989d;
  --line:rgba(255,255,255,.14); --blue:#2997ff; --pill:#2c2c2e; --pill-ink:#2997ff;
  --note:#241f12; --note-line:#4a3d1c; --note-ink:#e6cf95;
  --bar:rgba(0,0,0,.72); --field:#1c1c1e; --seg:#2c2c2e; --seg-on:#48484a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:17px/1.55 var(--font); -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}

.bar{
  position:sticky; top:0; z-index:20; background:var(--bar);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.bar .in{
  max-width:820px; margin:0 auto; padding:0 16px; height:48px;
  display:flex; align-items:center; gap:14px; font-size:14px;
}
.bar .home{color:var(--ink); font-weight:600; letter-spacing:.14em}
.bar nav{margin-left:auto; display:flex; gap:18px}
.bar nav a{color:var(--muted)}

.wrap{max-width:820px; margin:0 auto; padding:0 16px 72px}

header.hero{padding:56px 0 30px}
header.hero h1{
  margin:0; font-size:clamp(2.4rem,7.5vw,3.4rem); line-height:1.06;
  letter-spacing:-.022em; font-weight:700;
}
header.hero p{
  margin:14px 0 0; max-width:34em; color:var(--muted);
  font-size:clamp(1.05rem,2.6vw,1.24rem); line-height:1.5;
}

h2.sec{
  margin:44px 0 16px; font-size:1.6rem; letter-spacing:-.016em; font-weight:700;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
h2.sec span{font-size:.92rem; font-weight:400; color:var(--muted); letter-spacing:0}

/* ---- search + the OS segmented control ---- */
.find{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:6px 0 0}
.field{
  flex:1 1 260px; display:flex; align-items:center; gap:9px;
  background:var(--field); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; min-width:0;
}
.field svg{flex:0 0 auto; opacity:.45}
.field input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  color:var(--ink); font:16px/1.3 var(--font);
}
.field input::placeholder{color:var(--muted)}
.field button{
  flex:0 0 auto; border:0; background:transparent; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer; padding:0 2px;
}
.seg{display:inline-flex; background:var(--seg); border-radius:9px; padding:2px}
.seg button{
  border:0; background:transparent; color:var(--ink); cursor:pointer;
  font:600 13px/1 var(--font); padding:8px 15px; border-radius:7px;
}
.seg button[aria-pressed="true"]{background:var(--seg-on); box-shadow:0 1px 2px rgba(0,0,0,.16)}
.count{margin:14px 0 0; font-size:.86rem; color:var(--muted); min-height:1.2em}

/* ---- app rows ---- */
.list{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.app{display:flex; gap:16px; align-items:flex-start; padding:18px}
.app + .app{border-top:1px solid var(--line)}
.icon{
  width:76px; height:76px; flex:0 0 76px; border-radius:22.5%;
  overflow:hidden; background:var(--pill);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.icon img{width:100%; height:100%; display:block}
.app .meta{flex:1 1 auto; min-width:0}
.app .name{font-size:1.06rem; font-weight:600; letter-spacing:-.01em}
.app .name a{color:var(--ink)}
.app .tag{color:var(--muted); font-size:.93rem; margin-top:1px}
.app .get{flex:0 0 auto; align-self:center; text-align:center}

.btn{
  display:inline-block; background:var(--pill); color:var(--pill-ink);
  font-weight:700; font-size:.82rem; letter-spacing:.03em;
  padding:7px 20px; border-radius:999px; text-transform:uppercase;
  border:0; cursor:pointer; font-family:var(--font);
}
.btn:hover{text-decoration:none; filter:brightness(.94)}
.btn.solid{background:var(--blue); color:#fff}
.sub{display:block; color:var(--muted); font-size:.72rem; margin-top:6px}

.badge{
  display:inline-block; margin-left:8px; vertical-align:2px;
  background:var(--pill); color:var(--muted);
  font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px;
}
.desc{margin:10px 0 0; font-size:.95rem; color:var(--ink)}
.facts{
  margin:12px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.82rem; color:var(--muted);
}
.facts li strong{font-weight:600; color:var(--ink)}
.hash{margin-top:10px; font-size:.72rem; color:var(--muted); font-family:var(--mono); word-break:break-all}
.empty{padding:28px 18px; color:var(--muted); font-size:.95rem}

/* ---- the per-app page ---- */
.sheet{
  background:var(--card); border-radius:var(--radius); padding:24px 22px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.sheet .top{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.sheet .top .icon{width:118px; height:118px; flex-basis:118px}
.sheet h1{margin:0; font-size:1.9rem; letter-spacing:-.018em; line-height:1.15}
.sheet .tag{color:var(--muted); margin-top:4px; font-size:1rem}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.actions .btn{padding:10px 24px; font-size:.86rem}
.crumb{margin:26px 0 14px; font-size:.86rem; color:var(--muted)}
.crumb a{color:var(--muted)}
.specs{
  margin:22px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.specs div{padding:14px 0; border-bottom:1px solid var(--line)}
.specs dt{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.specs dd{margin:4px 0 0; font-size:.94rem}
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:var(--bg); padding:10px 20px; border-radius:999px;
  font-size:.86rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.on{opacity:.95; transform:translateX(-50%) translateY(0)}

.guide{
  background:var(--card); border-radius:var(--radius); padding:24px 22px;
  box-shadow:0 1px 3px rgba(0,0,0,.05); margin-top:16px;
}
.guide h3{margin:0 0 6px; font-size:1.18rem; letter-spacing:-.012em}
.guide p{margin:0 0 14px; font-size:.95rem; color:var(--muted)}
.guide ol{margin:0; padding-left:1.35em; font-size:.95rem}
.guide ol li{margin:0 0 12px; padding-left:4px}
.guide code{font-family:var(--mono); font-size:.85em; background:var(--pill); padding:2px 6px; border-radius:5px}
.guide pre{
  background:var(--pill); border-radius:10px; padding:12px 14px; overflow-x:auto;
  font-family:var(--mono); font-size:.8rem; margin:10px 0 0;
}
.note{
  background:var(--note); border:1px solid var(--note-line); color:var(--note-ink);
  border-radius:12px; padding:14px 16px; margin-top:18px; font-size:.9rem;
}
.note b{font-weight:700}

footer{
  margin-top:52px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.82rem;
}
footer a{color:var(--muted); text-decoration:underline}

@media (max-width:560px){
  .app{flex-wrap:wrap; padding:16px 14px}
  .app .icon{width:60px; height:60px; flex-basis:60px}
  .app .get{order:3; width:100%; text-align:left; margin-top:4px}
  .app .get .sub{display:inline; margin-left:10px}
  .sheet .top .icon{width:88px; height:88px; flex-basis:88px}
  .actions .btn{flex:1 1 auto; text-align:center}
}

/* ---- buy me a coffee ---- */
.coffee{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:#ffdd00;color:#14181b !important;border-radius:999px;padding:10px 18px;
  font-weight:700;font-size:.9rem;text-decoration:none !important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.coffee:hover{filter:brightness(.95)}
.coffee svg{flex:0 0 auto}
.coffeeline{display:block;margin-top:9px;font-size:.84rem}