:root {
  --primary: #067D72;
  --primary-dark: #006259;
  --deep: #0A2F2C;
  --mint: #96f3e5;
  --surface: #f4fbf9;
  --surface-alt: #eef5f3;
  --border: #dde4e2;
  --ink: #161d1c;
  --muted: #6e7977;
  --radius: 16px;
  --max: 820px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}

/* ---- Header ---- */
.hero {
  background: linear-gradient(135deg, var(--primary-dark), var(--deep));
  color: #fff;
  padding: 48px 24px 56px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle at 2px 2px, #fff 1px, transparent 0);
  background-size: 30px 30px;
}
.hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.brand { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; }
.pill {
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  background: rgba(150, 243, 229, 0.18); color: var(--mint);
  padding: 4px 10px; border-radius: 999px;
}
.hero h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 900; margin-top: 22px; }
.hero p { color: rgba(255, 255, 255, 0.72); margin-top: 8px; max-width: 52ch; }

/* ---- Body / toolbar ---- */
main { max-width: var(--max); margin: -28px auto 64px; padding: 0 24px; position: relative; z-index: 2; }
.toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: 0 18px 40px rgba(6, 125, 114, 0.08);
}
.search {
  flex: 1 1 240px; min-width: 0; height: 44px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0 16px; font-size: 15px; color: var(--ink); background: var(--surface);
  outline: none; transition: border-color .15s, background .15s;
}
.search:focus { border-color: var(--primary); background: #fff; }
.count {
  font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 0 8px; white-space: nowrap;
}

/* ---- File list ---- */
.files { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.file {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.file:hover { border-color: var(--mint); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(6, 125, 114, 0.10); }
.file-badge {
  flex: 0 0 auto; min-width: 52px; height: 44px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 12px; font-weight: 800; letter-spacing: .5px;
  background: var(--surface-alt); color: var(--primary-dark); text-transform: uppercase;
}
/* extension accent colors (set by JS via data-ext) */
.file-badge[data-ext="apk"], .file-badge[data-ext="aab"] { background: #e7f6ec; color: #1b8a4b; }
.file-badge[data-ext="zip"], .file-badge[data-ext="tar"], .file-badge[data-ext="gz"] { background: #fff4e5; color: #b4690e; }
.file-badge[data-ext="pdf"] { background: #fdeaea; color: #c0392b; }
.file-badge[data-ext="exe"], .file-badge[data-ext="msi"] { background: #eaf0fb; color: #2d6cdf; }
.file-badge[data-ext="dmg"], .file-badge[data-ext="pkg"] { background: #f0eefb; color: #6b46c1; }
.file-badge[data-ext="png"], .file-badge[data-ext="jpg"], .file-badge[data-ext="svg"], .file-badge[data-ext="webp"] { background: #e9f5f3; color: var(--primary-dark); }

.file-body { flex: 1 1 auto; min-width: 0; }
.file-title { font-size: 16px; font-weight: 800; }
.file-sub { font-size: 13px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.file-size { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.file-dl {
  flex: 0 0 auto; text-decoration: none;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; transition: background .15s;
}
.file-dl:hover { background: var(--primary-dark); }

.empty { text-align: center; color: var(--muted); padding: 40px 0; font-weight: 600; display: none; }

footer { text-align: center; color: var(--muted); font-size: 13px; padding: 0 24px 40px; }

@media (max-width: 560px) {
  .file { flex-wrap: wrap; }
  .file-size { order: 3; margin-left: 66px; }
  .file-dl { order: 4; margin-left: auto; }
}