:root {
  --bg: #08111f;
  --surface: #101c2d;
  --surface-2: #15243a;
  --border: #263850;
  --text: #f2f6fb;
  --muted: #9fb0c5;
  --accent: #59e0ba;
  --accent-dark: #062b24;
  --blue: #75aaff;
  --danger: #ff8f9b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 10% 0%, #123255 0, transparent 32rem),
  radial-gradient(circle at 100% 20%, #112d36 0, transparent 28rem), var(--bg); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2));
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); background: rgba(8, 17, 31, .82);
  backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand small { color: var(--muted); margin-top: 2px; font-size: .74rem; }
.brand-mark {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px;
  color: #031c16; font-weight: 900; font-size: 1.6rem;
  background: linear-gradient(135deg, #8af3d4, #35cda3); box-shadow: 0 12px 35px #28c89c30;
}
.brand-mark.small { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; }
.quiet-button {
  color: var(--muted); background: transparent; border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.quiet-button:hover { color: var(--text); border-color: #47617e; }

.page-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 70px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.eyebrow {
  color: var(--accent); text-transform: uppercase; letter-spacing: .13em;
  font-size: .73rem; font-weight: 800; margin: 0 0 10px;
}
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.045em; line-height: 1.05; }
.subtle { color: var(--muted); line-height: 1.65; margin: 12px 0 0; }
.trust-pill {
  white-space: nowrap; border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 13px; color: #b9c8d9; font-size: .8rem; background: #0c1929;
}
.trust-pill span {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent); margin-right: 6px;
}
.filters {
  display: flex; gap: 6px; margin: 38px 0 24px; padding: 5px; width: fit-content;
  border: 1px solid var(--border); border-radius: 12px; background: #0c1828;
}
.filters a {
  color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 8px;
  font-size: .87rem; font-weight: 650;
}
.filters a:hover { color: var(--text); }
.filters a.active { color: var(--text); background: var(--surface-2); box-shadow: 0 2px 8px #0004; }

.file-grid { display: grid; gap: 14px; }
.file-card {
  background: linear-gradient(145deg, rgba(20, 35, 55, .97), rgba(13, 26, 43, .97));
  border: 1px solid var(--border); border-radius: 16px; padding: 22px;
  box-shadow: 0 14px 40px #0002;
}
.card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.file-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  font-size: .66rem; font-weight: 900; letter-spacing: .06em; color: #b8d2ff;
  background: #172e50; border: 1px solid #294a74;
}
.file-icon.large { width: 62px; height: 62px; margin: auto; }
.filename-wrap { min-width: 0; }
.filename-wrap h2 { margin: 0; font-size: 1.03rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filename-wrap p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.status {
  border-radius: 999px; padding: 6px 10px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.status.available { color: var(--accent); background: var(--accent-dark); border: 1px solid #1c5b4d; }
.status.downloaded { color: #b9d3ff; background: #142a4b; border: 1px solid #2e4c77; }
.metadata {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  border-top: 1px solid var(--border); margin: 19px 0; padding-top: 18px;
}
.metadata div { min-width: 0; }
.metadata dt { color: var(--muted); font-size: .69rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.metadata dd { margin: 0; font-size: .82rem; overflow-wrap: anywhere; }
.download-button {
  width: 100%; border: 0; border-radius: 10px; padding: 12px 15px;
  display: flex; justify-content: center; gap: 10px; color: #03251d;
  background: linear-gradient(100deg, #78edcb, #44d4ac); font-weight: 800; cursor: pointer;
}
.download-button:hover { filter: brightness(1.06); }
.download-button:disabled { cursor: wait; opacity: .65; }
.empty-state {
  text-align: center; border: 1px dashed #33465f; border-radius: 18px;
  padding: 66px 24px; color: var(--muted); background: #0c172650;
}
.empty-state h2 { color: var(--text); margin: 18px 0 6px; }
.empty-state p { margin: 0; }
.alert { border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; font-size: .87rem; }
.alert.error { color: #ffd0d5; background: #3c1820; border: 1px solid #70303c; }
.alert.success { color: #c5fbea; background: #0c3028; border: 1px solid #236555; }
.hidden { display: none; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card {
  width: min(440px, 100%); padding: 38px; border: 1px solid var(--border);
  border-radius: 22px; background: linear-gradient(145deg, #14243aee, #0c192aee);
  box-shadow: 0 28px 90px #0007;
}
.login-card .brand-mark { margin-bottom: 28px; }
.login-card h1 { font-size: 2rem; }
.login-form { display: grid; gap: 9px; margin-top: 28px; }
.login-form label { color: #c8d5e4; font-size: .82rem; font-weight: 700; }
.login-form input {
  width: 100%; color: var(--text); background: #071322; border: 1px solid #334961;
  border-radius: 10px; padding: 13px 14px; outline: 0;
}
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #55ddb528; }
.login-form button {
  border: 0; border-radius: 10px; padding: 13px; margin-top: 5px;
  color: #04251d; background: var(--accent); font-weight: 850; cursor: pointer;
}
.security-note { color: #72869e; line-height: 1.55; font-size: .73rem; margin: 20px 0 0; }

@media (max-width: 720px) {
  .topbar { padding: 0 18px; }
  .page-shell { width: min(100% - 28px, 1180px); padding-top: 34px; }
  .hero { align-items: start; flex-direction: column; }
  .trust-pill { display: none; }
  .metadata { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .login-card { padding: 28px 22px; }
  .brand small { display: none; }
  .card-heading { grid-template-columns: auto minmax(0, 1fr); }
  .status { grid-column: 2; width: fit-content; }
}