/* apps-gallery/style.css */
:root{
  --bg: #0b0f14;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted:#94a3b8;
  --card:#0b1220;
  --border: rgba(148,163,184,.2);
  --accent:#2563eb;
  --accent-2:#60a5fa;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --panel:#f8fafc;
    --text:#0b1220;
    --muted:#475569;
    --card:#ffffff;
    --border: rgba(15,23,42,.12);
    --accent:#2563eb;
    --accent-2:#1d4ed8;
    --shadow: 0 10px 30px rgba(2,8,23,.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
/* Before */
body{background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}

/* After (inherit from root) */
body{
  background:var(--bg);
  color:var(--text);
  font: 18px/1.55 inherit;
  font-family: inherit;
}
main.container{ padding-bottom: 40px; }

.container{max-width:1080px;margin:0 auto;padding:0 20px}
/* Minimal header: left-aligned logo, no border/rule, no sticky, no nav */
.site-header{
  position: static;          /* was sticky */
  background: transparent;
  border: none;              /* removes horizontal rule */
  box-shadow: none;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  padding: 18px 20px 0;      /* subtle top spacing */
}
.brand-logo { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo img{ height: 100px; width: auto; display: block; }

/* Remove old nav styling if present */
.nav, .nav-link { display: none !important; }

.brand{font-weight:700;letter-spacing:.3px;color:var(--text);text-decoration:none}
.nav{display:flex;gap:14px}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link.is-active{color:var(--text);background:var(--panel);border:1px solid var(--border)}

.intro{padding:65px 0 18px}
.intro h1{margin:0 0 8px 0;font-size:28px}
.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.input{flex:1;min-width:240px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);outline:none}
.input:focus{border-color:color-mix(in srgb, var(--accent) 60%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer}
.tag[aria-pressed="true"]{color:#fff;background:var(--accent);border-color:transparent}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;padding:16px 0 40px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.thumb{aspect-ratio:16/9;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent-2) 14%, transparent));display:flex;align-items:center;justify-content:center;color:color-mix(in srgb, var(--accent-2) 70%, white)}
.thumb span{font-weight:700;opacity:.8}
.card-body{padding:14px}
.card h3{margin:0 0 6px 0;font-size:18px}
.card p{margin:0 0 12px 0;color:var(--muted);min-height:42px}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted)}

.card-actions{display:flex;gap:8px;margin-top:auto;padding:14px}
.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center;cursor:pointer}
.btn.primary{background:var(--accent);border-color:transparent;color:white}
.btn:hover{filter:brightness(1.06)}

/* apps-gallery/style.css */
.thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


.site-footer{border-top:1px solid var(--border);padding:18px 0;color:var(--muted)}

.tiny{font-size:12px}

/* Overlay */
.overlay[hidden]{display:none}
.overlay{position:fixed;inset:0;z-index:100}
.overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.overlay-card{position:absolute;inset:40px;max-width:1100px;margin:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.overlay-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}
.ov-header{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 8px}
.ov-tags{display:flex;gap:6px;flex-wrap:wrap}
.ov-desc{padding:0 16px 12px;color:var(--muted)}
.ov-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px}
.ov-frame-wrap{flex:1;min-height:420px;background:var(--bg);border-top:1px solid var(--border)}
.ov-frame-wrap iframe{border:0;width:100%;height:100%}
@media (max-width:820px){
  .overlay-card{inset:10px}
}