@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --bg: #edf5ff;
  --bg-2: #d8e9ff;
  --text: #0f172a;
  --muted: #58667b;
  --card: rgba(255, 255, 255, 0.58);
  --card-border: rgba(255, 255, 255, 0.72);
  --primary: #f05a28;
  --primary-2: #ff9b2f;
  --shadow: 0 24px 80px rgba(172, 65, 22, 0.18);
  --nav: rgba(255, 255, 255, 0.62);
  --danger: #ef4444;
}

html[data-theme="dark"] {
  --bg: #100907;
  --bg-2: #24100a;
  --text: #eef5ff;
  --muted: #9eabc0;
  --card: rgba(35, 15, 10, 0.70);
  --card-border: rgba(255, 255, 255, 0.10);
  --primary: #ff5b2d;
  --primary-2: #ff9f2f;
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.34);
  --nav: rgba(24, 10, 7, 0.72);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 78, 38, .30), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(255, 153, 47, .22), transparent 28%),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  font-family: Inter, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
}

.navbar {
  position: sticky;
  top: 16px;
  z-index: 20;
  width: min(1140px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-button, .button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 14px;
}

.button {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 12px 30px rgba(255, 92, 40, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(255, 92, 40, .34);
}

.button.secondary {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: none;
}

.button.danger {
  background: linear-gradient(135deg, #ff5a66, #df3442);
}

.hero {
  padding: 100px 0 72px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card);
  color: var(--primary);
  font-weight: 700;
  font-size: .85rem;
}

h1 {
  margin: 22px 0 18px;
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.065em;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p, .section-copy {
  max-width: 650px;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.glass {
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
  border-radius: 26px;
}

.terminal-wrap {
  padding: 20px;
  transform: rotate(1.5deg);
}

.terminal {
  background: #090b13;
  color: #dce5ff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace
}

.terminal-head {
  display: flex;
  justify-content: space-between;
  color: #7e879f;
  font-family: Inter, sans-serif;
  margin-bottom: 18px
}

.dots {
  display: flex;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a3141;
}

.dot:nth-child(1) { background: #ff5f57; }
.dot:nth-child(2) { background: #febc2e; }
.dot:nth-child(3) { background: #28c840; }

.line {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 10px 0;
  color: #b6c2d9;
}

.line .cyan {
  color: #46d9ff;
}

.line.ok {
  grid-template-columns: 22px 1fr;
  color: #55e09d;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 8px;
  padding-top: 16px;
}

.features {
  padding: 20px 0 90px;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0 0 12px;
  letter-spacing: -.04em;
}

.card-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  padding: 24px;
}

.feature-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  margin-bottom: 18px;
}

.feature-card h3 {
  margin: 0 0 10px;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.panel-shell {
  padding: 70px 0 100px;
}

.panel-head {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--card-border);
  background: var(--card);
}

.user-meta strong {
  display: block;
  font-size: 1.05rem;
}

.user-meta span {
  color: var(--muted);
  font-size: .9rem;
}

.download-card {
  padding: 34px;
  min-height: 300px;
  display: grid;
  place-items: center;
  text-align: center;
}

.download-card .big-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  margin: 0 auto 18px;
}

.download-card h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0 0 12px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.stat-card {
  padding: 20px;
}

.stat-card span {
  color: var(--muted);
  font-size: .85rem;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 1.7rem;
}

.admin-section {
  margin-top: 20px;
  padding: 24px;
}

.log-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--card-border);
}

.status-ok {
  color: #2dcc8c;
}

footer {
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto 24px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: .9rem;
}

.center-page {
  min-height: 75vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.center-page h1 {
  font-size: clamp(3rem, 10vw, 7rem);
  margin-bottom: 14px;
}

@media (max-width: 850px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 70px;
  }

  .card-grid,
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .navbar {
    top: 8px;
    margin-top: 8px;
  }

  .brand span {
    display: none;
  }

  .nav-actions .button span {
    display: none;
  }

  .hero {
    padding-top: 56px;
  }

  .card-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .panel-head,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .terminal-wrap {
    transform: none;
  }
}


.brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 12px; }
.discord-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.version-pill { display:inline-flex; align-items:center; justify-content:center; padding:8px 13px; border-radius:999px; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--primary-2)); white-space:nowrap; }
.changelog-sections {
    padding-top: 0;
    margin-top: 3rem; /* dagdag space sa taas */
}
.changelog-section { padding-top:0; }
.changelog-card { padding:10px 22px; }
.changelog-item { display:flex; justify-content:space-between; gap:24px; padding:18px 2px; border-bottom:1px solid var(--card-border); }
.changelog-item:last-child { border-bottom:0; }
.changelog-item strong { color:var(--primary); font-size:1.05rem; }
.changelog-item p { margin:6px 0 0; color:var(--muted); line-height:1.6; }
.changelog-item time { color:var(--muted); font-size:.82rem; white-space:nowrap; }
.changelog-home.is-scrollable { max-height:286px; overflow-y:auto; }
.changelog-card.user-scroll { max-height:390px; overflow-y:auto; }
.changelog-card::-webkit-scrollbar { width:9px; }
.changelog-card::-webkit-scrollbar-track { background:rgba(255,255,255,.04); border-radius:20px; }
.changelog-card::-webkit-scrollbar-thumb { background:linear-gradient(var(--primary),var(--primary-2)); border-radius:20px; }
.settings-card { margin-top:20px; }
.settings-form { display:grid; gap:11px; margin-top:20px; }
.settings-form label { font-weight:700; }
.settings-form input,.settings-form textarea { width:100%; border:1px solid var(--card-border); border-radius:15px; background:rgba(255,255,255,.08); color:var(--text); padding:14px 15px; font:inherit; outline:none; }
.settings-form input:focus,.settings-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,91,45,.14); }
.settings-form textarea { resize:vertical; min-height:130px; }
.settings-form .button { justify-self:start; margin-top:4px; }
.notice { display:flex; align-items:center; gap:9px; margin-top:18px; padding:13px 15px; border-radius:14px; }
.notice.success { color:#68e8a8; background:rgba(45,204,140,.12); border:1px solid rgba(45,204,140,.24); }
.notice.error { color:#ff8d8d; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.24); }
@media(max-width:600px){.section-heading-row,.changelog-item{align-items:flex-start;flex-direction:column}.changelog-item{gap:8px}.changelog-item time{white-space:normal}}


/* Admin control center */
.admin-body{overflow-x:hidden}.admin-layout{min-height:100vh;display:grid;grid-template-columns:270px 1fr;gap:22px;padding:18px}.admin-sidebar{position:sticky;top:18px;height:calc(100vh - 36px);padding:18px;display:flex;flex-direction:column;z-index:50}.admin-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.1rem;padding:4px 5px 20px}.admin-brand img{width:42px;height:42px;border-radius:13px}.admin-nav{display:grid;gap:7px;overflow-y:auto}.admin-nav a,.admin-sidebar-bottom a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:13px;color:var(--muted);font-weight:650}.admin-nav a:hover,.admin-nav a.active{color:white;background:linear-gradient(135deg,var(--primary),var(--primary-2))}.admin-nav svg,.admin-sidebar-bottom svg{width:19px}.admin-sidebar-bottom{margin-top:auto;display:grid;grid-template-columns:44px 1fr;gap:6px;padding-top:16px;border-top:1px solid var(--card-border)}.admin-sidebar-bottom a:last-child{grid-column:1/-1}.admin-main{min-width:0;padding:4px 10px 50px}.admin-topbar{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-bottom:24px}.admin-topbar h1{font-size:clamp(1.65rem,4vw,2.5rem);letter-spacing:-.04em;margin:3px 0}.admin-topbar .muted,.muted{color:var(--muted)}.avatar.small{width:46px;height:46px}.admin-menu{display:none}.admin-panel{display:none}.admin-panel.active{display:block}.panel-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 20px}.panel-title h2{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 6px;letter-spacing:-.04em}.panel-title p{margin:0;color:var(--muted)}.admin-grid.six{grid-template-columns:repeat(6,1fr)}.admin-columns{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:18px}.admin-section h3{margin-top:0}.log-row.stacked>div{display:grid}.log-row small,td small{display:block;color:var(--muted);margin-top:4px}.release-hero{text-align:center;padding:28px 10px}.release-hero h3{margin:16px 0 8px}.release-hero p{color:var(--muted)}.count-pill,.status-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,115,45,.12);color:var(--primary);font-size:.8rem;font-weight:800}.status-chip.ok{color:#2dcc8c;background:rgba(45,204,140,.12)}.status-chip.bad,.status-bad{color:#ff6b6b}.release-list{display:grid;gap:15px}.release-editor{margin-top:0}.release-editor-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px}.release-editor-head>div{display:grid}.release-editor-head strong{font-size:1.25rem;color:var(--primary)}.release-editor-head time{font-size:.82rem;color:var(--muted)}.release-editor textarea{width:100%;min-height:90px;background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:14px;padding:13px;color:var(--text);font:inherit;resize:vertical}.check-row{display:flex;align-items:center;gap:8px;color:var(--muted);margin:10px 0}.inline-actions{display:flex;gap:9px;flex-wrap:wrap}.inline-actions form{display:inline}.table-search{min-width:240px;border:1px solid var(--card-border);background:var(--card);color:var(--text);border-radius:13px;padding:12px 14px;font:inherit}.table-wrap{overflow:auto;padding:8px 16px}table{width:100%;border-collapse:collapse;min-width:900px}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--card-border);vertical-align:top}th{font-size:.76rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.table-user{display:flex;align-items:center;gap:10px}.table-user img{width:40px;height:40px;border-radius:12px}.table-user>div{display:grid}.user-manage{display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:center;gap:8px}.user-manage input[type=text],.user-manage input:not([type]){background:rgba(255,255,255,.06);border:1px solid var(--card-border);border-radius:10px;padding:9px;color:var(--text)}.ua-cell{max-width:300px;font-size:.82rem;color:var(--muted)}.empty-state{text-align:center;color:var(--muted);padding:28px}.bar-chart{height:230px;display:flex;align-items:flex-end;justify-content:center;gap:18px;padding-top:15px}.bar-item{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:38px}.bar-item div{width:30px;max-height:180px;border-radius:9px 9px 3px 3px;background:linear-gradient(to top,var(--primary-2),var(--primary))}.bar-item span,.bar-item small{font-size:.78rem;color:var(--muted)}.metric-row,.health-row{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--card-border)}.health-list{margin-top:18px}.admin-sidebar.open{transform:translateX(0)}
@media(max-width:1200px){.admin-grid.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.admin-layout{display:block;padding:10px}.admin-sidebar{position:fixed;left:10px;top:10px;width:270px;height:calc(100vh - 20px);transform:translateX(-120%);transition:.25s}.admin-menu{display:grid}.admin-main{padding:4px}.admin-columns{grid-template-columns:1fr}.admin-topbar .user-card{display:none}}
@media(max-width:650px){.admin-grid.six,.admin-grid{grid-template-columns:1fr 1fr}.panel-title{align-items:flex-start;flex-direction:column}.table-search{width:100%;min-width:0}.user-manage{grid-template-columns:1fr}.inline-actions{display:grid}.inline-actions .button{width:100%}}
@media(max-width:430px){.admin-grid.six,.admin-grid{grid-template-columns:1fr}}

/* User panel download deployment overlay */
.download-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 7, 12, .72);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}

.download-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

body.download-in-progress {
  overflow: hidden;
}

.download-dialog {
  width: min(720px, 100%);
  padding: 18px;
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease;
}

.download-overlay.is-open .download-dialog {
  transform: translateY(0) scale(1);
}

.download-terminal {
  padding: 20px;
}

.download-log {
  min-height: 344px;
}

.download-log .line {
  opacity: 0;
  transform: translateY(5px);
  animation: download-line-in .25s ease forwards;
}

@keyframes download-line-in {
  to { opacity: 1; transform: translateY(0); }
}

.download-progress {
  height: 10px;
  overflow: hidden;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.download-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transition: width .35s linear;
}

.download-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
  color: #8e9ab2;
  font-size: .82rem;
}

.download-progress-meta strong {
  color: #dce5ff;
}

.download-note {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid rgba(254,188,46,.22);
  border-radius: 12px;
  color: #f7ce72;
  background: rgba(254,188,46,.08);
  font-family: Inter, sans-serif;
  font-size: .84rem;
  line-height: 1.55;
}

.download-success[hidden] { display: none; }
.download-success { margin-top: 16px; }

@media (max-width: 560px) {
  .download-overlay { padding: 10px; }
  .download-dialog { padding: 10px; }
  .download-terminal { padding: 15px; }
  .download-log { min-height: 312px; }
  .download-log .line { grid-template-columns: 28px 1fr; gap: 8px; font-size: .78rem; }
  .download-progress-meta { font-size: .72rem; }
}

/* Profile menu and setup */
.profile-menu{position:relative}.profile-menu-button{padding:0 12px 0 7px}.profile-menu-button img{width:32px;height:32px;border-radius:10px;object-fit:cover}.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:190px;padding:8px;z-index:80;border-radius:16px}.profile-dropdown[hidden]{display:none}.profile-dropdown button,.profile-dropdown a{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.profile-dropdown button:hover,.profile-dropdown a:hover{background:rgba(255,255,255,.08)}.profile-dropdown a{color:#ff717a}.profile-overlay{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:20px;background:rgba(5,7,12,.72);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:.2s}.profile-overlay.is-open{opacity:1;visibility:visible}body.profile-open{overflow:hidden}.profile-dialog{width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:26px}.profile-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.profile-dialog h2{font-size:clamp(1.8rem,5vw,2.7rem);margin:15px 0 0;letter-spacing:-.04em}.profile-copy{margin:12px 0 18px;font-size:.96rem}.profile-form{display:grid;gap:20px}.profile-photo-row{display:grid;grid-template-columns:90px 1fr;gap:18px;align-items:center}.profile-photo-row>img{width:90px;height:90px;border-radius:24px;object-fit:cover;border:1px solid var(--card-border);background:var(--card)}.profile-photo-row>div{display:flex;align-items:flex-start;flex-direction:column;gap:8px}.upload-button{min-height:40px;padding:0 13px}.upload-button input{display:none}.profile-photo-row small{color:var(--muted);line-height:1.5}.text-button{border:0;background:transparent;color:var(--primary);font:inherit;font-weight:700;cursor:pointer;padding:2px}.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-fields label{display:grid;gap:8px;font-weight:700}.profile-fields label span{font-size:.9rem}.profile-fields b{color:var(--danger)}.profile-fields input{width:100%;border:1px solid var(--card-border);border-radius:14px;background:rgba(255,255,255,.08);color:var(--text);padding:13px 14px;font:inherit;outline:none}.profile-fields input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,91,45,.14)}.profile-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.skip-button{margin-left:auto}.profile-actions .button{min-height:43px}.profile-dialog .notice{margin:0 0 18px}
@media(max-width:600px){.profile-menu-button span,.profile-menu-button>svg{display:none}.profile-menu-button{padding:6px;min-height:44px}.profile-fields{grid-template-columns:1fr}.profile-photo-row{grid-template-columns:72px 1fr}.profile-photo-row>img{width:72px;height:72px;border-radius:19px}.profile-dialog{padding:19px}.profile-actions{display:grid;grid-template-columns:1fr 1fr}.profile-actions .button{width:100%}.skip-button{grid-column:1/-1;margin:2px auto 0}}


/* Requested UX motion, recent downloads, and responsive site footer */
@media (prefers-reduced-motion: no-preference) {
  .navbar { animation: nav-enter .55s cubic-bezier(.2,.8,.2,1) both; }
  .hero > div:first-child { animation: hero-enter .7s .08s cubic-bezier(.2,.8,.2,1) both; }
  .terminal-wrap { animation: terminal-enter .75s .16s cubic-bezier(.2,.8,.2,1) both; }
  .brand-logo { animation: logo-float 4.5s ease-in-out infinite; }
  .feature-card, .recent-download-item, .changelog-item { transition: transform .22s ease, border-color .22s ease, background .22s ease; }
  .feature-card:hover, .recent-download-item:hover { transform: translateY(-4px); border-color: rgba(255,115,45,.34); }
  .reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
  .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
  @keyframes nav-enter { from { opacity:0; transform:translateY(-16px) } to { opacity:1; transform:translateY(0) } }
  @keyframes hero-enter { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
  @keyframes terminal-enter { from { opacity:0; transform:translateY(24px) rotate(3deg) scale(.97) } to { opacity:1; transform:rotate(1.5deg) scale(1) } }
  @keyframes logo-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-3px) } }
}
.recent-downloads-section { padding-top: 0; }
.recent-downloads-card { padding: 8px 22px; }
.recent-download-item { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 4px; border-bottom:1px solid var(--card-border); border-radius:14px; }
.recent-download-item:last-child { border-bottom:0; }
.recent-user { display:flex; align-items:center; gap:13px; min-width:0; }
.recent-user img { width:46px; height:46px; border-radius:14px; object-fit:cover; background:var(--card); }
.recent-user div, .recent-download-item time { display:grid; gap:4px; }
.recent-user strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-user span, .recent-download-item time span { color:var(--muted); font-size:.84rem; }
.recent-download-item time { min-width:88px; text-align:right; }
.recent-download-item time strong { color:var(--primary); }
.empty-downloads { min-height:120px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); }
.site-footer { display:block; padding:0; overflow:hidden; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px; }
.footer-brand { display:flex; align-items:center; gap:13px; min-width:0; }
.footer-brand img { width:48px; height:48px; border-radius:14px; object-fit:contain; }
.footer-brand div { display:grid; gap:4px; }
.footer-brand strong { color:var(--text); font-size:1rem; }
.footer-brand span { color:var(--muted); font-size:.84rem; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.footer-links a { display:inline-flex; align-items:center; gap:8px; padding:11px 13px; border:1px solid var(--card-border); border-radius:13px; background:rgba(255,255,255,.05); color:var(--muted); font-weight:700; transition:transform .2s ease,color .2s ease,border-color .2s ease; }
.footer-links a:hover { transform:translateY(-2px); color:var(--primary); border-color:rgba(255,115,45,.34); }
.footer-links svg { width:18px; height:18px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-top:1px solid var(--card-border); color:var(--muted); font-size:.82rem; }
@media (max-width:700px) {
  .footer-main { align-items:flex-start; flex-direction:column; }
  .footer-links { width:100%; justify-content:flex-start; }
  .footer-links a { flex:1 1 120px; justify-content:center; }
  .footer-bottom { align-items:flex-start; flex-direction:column; }
}
@media (max-width:500px) {
  .recent-download-item { align-items:flex-start; }
  .recent-user img { width:42px; height:42px; }
  .recent-download-item time { min-width:70px; }
  .footer-main, .footer-bottom { padding-left:20px; padding-right:20px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity:1; transform:none; } }

/* Interaction notifications */
.notification-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}
.notification-toast {
  --notification-accent: var(--primary);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 14px 12px 17px 14px;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
  color: var(--text);
  pointer-events: auto;
  backdrop-filter: blur(18px);
  animation: notification-slide-in .34s cubic-bezier(.2,.85,.35,1) both;
}
.notification-toast.is-leaving { animation: notification-slide-out .28s ease both; }
.notification-toast[data-type="success"] { --notification-accent: #22c55e; }
.notification-toast[data-type="error"] { --notification-accent: #ef4444; }
.notification-toast[data-type="warning"] { --notification-accent: #f59e0b; }
.notification-toast[data-type="info"] { --notification-accent: #38bdf8; }
.notification-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--notification-accent);
  background: color-mix(in srgb, var(--notification-accent) 14%, transparent);
}
.notification-icon svg { width: 20px; height: 20px; }
.notification-copy { min-width: 0; display: grid; gap: 3px; }
.notification-copy strong { font-size: .94rem; line-height: 1.25; }
.notification-copy span { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.notification-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.notification-close:hover { background: rgba(127,127,127,.12); color: var(--text); }
.notification-close svg { width: 16px; height: 16px; }
.notification-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--notification-accent) 25%, transparent);
}
.notification-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: var(--notification-accent);
  animation: notification-progress var(--notification-duration, 5000ms) linear forwards;
}
@keyframes notification-slide-in { from { opacity:0; transform:translateX(42px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes notification-slide-out { to { opacity:0; transform:translateX(42px) scale(.98); } }
@keyframes notification-progress { to { transform:scaleX(0); } }
@media (max-width: 540px) { .notification-stack { right:16px; bottom:16px; } }
@media (prefers-reduced-motion: reduce) {
  .notification-toast, .notification-toast.is-leaving { animation:none; }
}