/* App Center full-screen modal styles */
#app-store-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#app-store-modal.show { display: flex; opacity: 1; }
#app-store-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.app-store-window {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  width: 100%;
  height: 100%;
  background: rgba(10,10,12,0.98);
  border-top: 1px solid rgba(79,195,247,0.35);
  border-left: 1px solid rgba(79,195,247,0.2);
  box-shadow: 0 0 40px rgba(79,195,247,0.35), 0 0 80px rgba(79,195,247,0.2);
}
/* Match folder modal slide animations */
.app-store-window.sliding-in { animation: folderWindowSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.app-store-window.sliding-out { animation: folderWindowSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.app-store-sidebar {
  border-right: 1px solid rgba(79,195,247,0.2);
  padding: 16px 12px;
  background: linear-gradient(180deg, rgba(20,20,25,0.9), rgba(14,14,18,0.95));
}
.app-store-sidebar .logo {
  display: flex; align-items: center; gap: 10px; color: #E9ECF1; font-weight: 600; margin: 6px 8px 14px;
}
.app-store-sidebar .logo i { color:#4fc3f7; text-shadow: 0 0 10px rgba(79,195,247,0.25); }
.app-store-sidebar .nav {
  display: flex; flex-direction: column; gap: 6px; padding: 6px;
}
.app-store-nav-item {
  display: flex; align-items: center; gap: 10px; color: #A5ABB5; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all .2s ease;
}
.app-store-nav-item:hover { background: rgba(79,195,247,0.08); color: #d1f7f2; }
.app-store-nav-item.active { background: rgba(79,195,247,0.16); color: #4fc3f7; border: 1px solid rgba(79,195,247,0.35); }
.app-store-content { padding: 18px 22px; overflow: auto; }
.app-store-header { display:flex; justify-content: space-between; align-items:center; padding-bottom: 10px; border-bottom: 1px solid rgba(79,195,247,0.2); }
.app-store-header h3 { color:#E9ECF1; text-shadow: 0 0 12px rgba(79,195,247,0.25), 0 0 20px rgba(79,195,247,0.15); }
.app-store-close {
  background: none; border: none; color: #A5ABB5; font-size: 18px; cursor: pointer; padding: 8px; border-radius: 6px; transition: all .2s ease;
}
.app-store-close:hover { background: rgba(79,195,247,0.1); color: #4fc3f7; }
.app-store-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; padding-top: 16px; }
.app-card { background: rgba(22,22,26,0.9); border: 1px solid rgba(79,195,247,0.2); border-radius: 12px; padding: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor: pointer; }
.app-card:hover { transform: translateY(-2px); border-color: rgba(79,195,247,0.5); box-shadow: 0 8px 24px rgba(79,195,247,0.25), 0 0 20px rgba(79,195,247,0.2); }
.app-card .icon { font-size: 28px; color: #4fc3f7; margin-bottom: 10px; }
.app-card h4 { margin: 0 0 6px; color: #E9ECF1; font-size: 16px; }
.app-card p { margin: 0; color: #A5ABB5; font-size: 13px; line-height: 1.4; }

/* Category sections */
.category-section { margin-top: 18px; }
.category-header { display:flex; align-items:center; gap:10px; padding: 10px 4px; color: #A5ABB5; border-top: 1px solid rgba(79,195,247,0.2); }
.category-header h4 { display:flex; align-items:center; gap:10px; margin:0; color:#E9ECF1; font-size: 15px; font-weight: 600; text-shadow: 0 0 10px rgba(79,195,247,0.18); }
.category-grid { margin-top: 10px; }

/* Details modal */
#app-store-details-modal{ position:fixed; inset:0; display:none; z-index:11100; opacity: 0; transition: opacity 0.25s ease-in-out; }
#app-store-details-modal.show{ display:flex; opacity: 1; }
#app-store-details-modal .details-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#app-store-details-modal .details-window{ position:relative; width:min(860px, 92%); margin:auto; background:rgba(14,14,18,0.98); border:1px solid rgba(79,195,247,0.35); border-radius:14px; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(79,195,247,0.15); overflow:hidden; }
/* Slide animations for details window as well */
#app-store-details-modal .details-window.sliding-in { animation: folderWindowSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
#app-store-details-modal .details-window.sliding-out { animation: folderWindowSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.details-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(79,195,247,0.2); }
.details-app-id{ display:flex; align-items:center; gap:12px; color:#E9ECF1; }
.details-app-id .icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:10px; background: rgba(79,195,247,0.12); color:#4fc3f7; font-size:20px; box-shadow: 0 0 20px rgba(79,195,247,0.2); }
.details-app-id .meta h3{ margin:0; font-size:18px; }
.details-app-id .meta p{ margin:2px 0 0; color:#A5ABB5; font-size:13px; }
.details-actions{ display:flex; align-items:center; gap:10px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid rgba(79,195,247,0.35); border-radius:999px; color:#A5ABB5; background: rgba(79,195,247,0.08); font-size:12px; }
.chip.installed{ color:#4fc3f7; border-color: rgba(79,195,247,0.5); background: rgba(79,195,247,0.14); box-shadow: 0 0 12px rgba(79,195,247,0.18); }
.chip.subtle{ border-color: rgba(79,195,247,0.18); background: rgba(79,195,247,0.06); }
.rating{ color:#ffd166; font-size:14px; letter-spacing: 1px; display:inline-flex; align-items:center; gap:6px; margin-left: 4px; }
.rating .rating-num{ color:#A5ABB5; font-size:12px; margin-left:4px; }
.details-close{ background:none; border:none; color:#A5ABB5; cursor:pointer; padding:8px; border-radius:6px; }
.details-close:hover{ background: rgba(79,195,247,0.1); color:#4fc3f7; }
.details-body{ padding:16px 18px; color:#A5ABB5; display:flex; flex-direction:column; gap:14px; }
.details-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.details-screens{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
.details-screens .screenshot{ border:1px solid rgba(79,195,247,0.2); border-radius:10px; overflow:hidden; background: rgba(79,195,247,0.03); }
.details-screens .screenshot img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); transition: transform .25s ease; }
.details-screens .screenshot:hover img{ transform: scale(1.02); }
.details-desc-block{ border-top:1px solid rgba(79,195,247,0.12); padding-top:10px; }
.details-footer{ display:flex; align-items:center; gap:12px; padding:14px 18px; border-top:1px solid rgba(79,195,247,0.2); }
.open-btn{ background: rgba(79,195,247,0.14); color:#4fc3f7; border:1px solid rgba(79,195,247,0.35); padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; }
.open-btn:hover{ background: rgba(79,195,247,0.2); }
.install-btn{ background: linear-gradient(135deg, rgba(79,195,247,0.85), rgba(79,195,247,0.85)); color:#0b1418; border:none; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; box-shadow: 0 6px 18px rgba(79,195,247,0.35); }
.install-btn.installed{ background: rgba(79,195,247,0.18); color:#4fc3f7; box-shadow:none; cursor:default; }
.install-progress{ flex:1; height:12px; background: rgba(79,195,247,0.08); border:1px solid rgba(79,195,247,0.2); border-radius:999px; overflow:hidden; position:relative; }
.install-progress .bar{ position:absolute; left:-30%; top:0; bottom:0; width:30%; background: linear-gradient(90deg, rgba(79,195,247,0.6), rgba(79,195,247,0.9)); filter: drop-shadow(0 0 6px rgba(79,195,247,0.5)); border-radius:999px; transform: translateX(0); }
.install-progress .percent{ position:absolute; right:10px; top:50%; transform: translateY(-50%); font-size:11px; color:#cfefff; text-shadow: 0 0 6px rgba(79,195,247,0.6); }
.install-progress.active .bar{ animation: app-install 1.2s infinite ease-in-out; }
@keyframes app-install{
  0% { left: -35%; width: 30%; }
  50% { left: 20%; width: 55%; }
  100% { left: 110%; width: 30%; }
}

/* Full-screen install overlay */
#app-install-overlay{ position: fixed; inset: 0; display: none; z-index: 12000; opacity: 0; transition: opacity .25s ease; }
#app-install-overlay.show{ display:flex; opacity:1; }
#app-install-overlay .install-overlay-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#app-install-overlay .install-overlay-card{ position:relative; margin:auto; width:min(520px, 92%); background: rgba(14,14,18,0.98); border:1px solid rgba(79,195,247,0.35); border-radius: 16px; padding: 28px; box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 0 30px rgba(79,195,247,0.15); display:flex; flex-direction:column; align-items:center; gap:12px; }
#app-install-overlay .spinner{ width:54px; height:54px; border-radius:50%; border:3px solid rgba(79,195,247,0.25); border-top-color:#4fc3f7; animation: spin 1s linear infinite; filter: drop-shadow(0 0 10px rgba(79,195,247,0.5)); }
#app-install-overlay .title{ color:#E9ECF1; font-weight:700; letter-spacing:.3px; margin-top:6px; text-shadow: 0 0 10px rgba(79,195,247,0.25); }
#app-install-overlay .subtitle{ color:#A5ABB5; font-size:13px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .app-store-window { grid-template-columns: 240px 1fr; }
  .app-store-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .app-store-window { grid-template-columns: 1fr; }
  .app-store-sidebar { display:none; }
  .app-store-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}