/* ==========================================================================
   APKAPPS • Core UI
   - Accessible dark + light themes
   - Solid contrast, crisp typography, sturdy layouts
   - Components used across Library, Categories, and App pages
   ========================================================================== */

/* -------- Tokens: colors, radii, shadows, spacing ----------------------- */
:root{
  /* Light theme (default) */
  --bg:        #F7FAFC;
  --surface:   #FFFFFF;
  --panel:     #FFFFFF;
  --elev:      #FFFFFF;
  --text:      #0F172A;
  --muted:     #475569;
  --border:    rgba(2,6,23,0.12);
  --hairline:  rgba(2,6,23,0.08);

  /* Android green */
  --brand:     #3DDC84;
  --brand-ink: #042015;
  --accent:    #2ABF6D;   /* slightly darker green for accents */
  --focus:     #16A34A;   /* good focus ring on light */

  --link:      var(--brand);

  --radius:    16px;
  --radius-sm: 12px;
  --radius-xs: 10px;

  --shadow-lg: 0 18px 36px rgba(2,6,23,.15);
  --shadow-md: 0 12px 24px rgba(2,6,23,.12);
  --shadow-sm: 0 8px 16px rgba(2,6,23,.10);

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;

  --grid-gap: 16px;
}

/* dark theme overrides */
[data-theme="dark"]{
  --bg:       #0B1220;
  --surface:  #0F172A;
  --panel:    #111827;
  --elev:     #0C1629;
  --text:     #F8FAFC;
  --muted:    #94A3B8;
  --border:   rgba(255,255,255,0.10);
  --hairline: rgba(255,255,255,0.06);

  --brand:    #3DDC84;
  --brand-ink:#042015;
  --accent:   #34C471;
  --focus:    #22C55E;

  --link:     var(--brand);

  --shadow-lg: 0 20px 40px rgba(0,0,0,.45);
  --shadow-md: 0 12px 24px rgba(0,0,0,.35);
  --shadow-sm: 0 8px 16px rgba(0,0,0,.25);
}

/* -------- Base ----------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family: ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}

/* Visually-hidden (for a11y helpers) */
.visually-hidden{
  position:absolute!important; height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Focus ring */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:8px;
}

/* -------- Shell & header ------------------------------------------------- */
.shell{max-width:1100px;margin:0 auto;padding:18px 16px}
.site-header{
  position:sticky;top:0;z-index:20;
  backdrop-filter: saturate(160%) blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  border-bottom:1px solid var(--hairline);
}
.site-header .shell{display:flex;align-items:center;gap:var(--space-4)}
.brand{
  font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none;
  font-size:var(--fs-20);
}
.nav{display:flex;gap:var(--space-4); margin-left:auto}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--text)}
.theme-toggle{
  margin-left:var(--space-2);
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); padding:8px 10px; border-radius:var(--radius-xs); cursor:pointer;
}

/* -------- Page scaffolding ---------------------------------------------- */
.page-title{font-size:var(--fs-28); margin:14px 0}
.page-head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;justify-content:space-between}
.empty-state{padding:24px;border:1px dashed var(--hairline);border-radius:var(--radius);opacity:.85}

/* -------- Grid system ---------------------------------------------------- */
.grid{display:grid; gap:var(--grid-gap)}
.grid-cards{grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))}
.two-col{grid-template-columns: 1.6fr .9fr}

/* -------- Cards ---------------------------------------------------------- */
.card{
  background: linear-gradient(180deg, var(--surface), var(--elev));
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:var(--space-4);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border);
}
@media (prefers-reduced-motion: reduce){
  .card, .card:hover{transition:none; transform:none}
}

/* App card (grid item) */
.app-card{
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:var(--space-3); align-items:center;
  color:var(--text); text-decoration:none;
}
.app-card .icon{
  width:56px;height:56px;border-radius:12px;
  border:1px solid var(--hairline); object-fit:cover;
  background:#111;
}
.app-card .meta .title{
  font-weight:800; line-height:1.25;
}
.app-card .meta .sub{
  display:flex; gap:8px; align-items:center; margin-top:2px; flex-wrap:wrap;
}
.app-card .cta{color:var(--brand); font-weight:700}

/* Text clamping utilities */
.line-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* -------- Category card -------------------------------------------------- */
.cat-card .cat-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px
}
.cat-card .cat-name{font-weight:800;color:var(--text);text-decoration:none}
.badge{
  background:rgba(255,255,255,.09);
  padding:4px 8px;border-radius:999px;font-size:var(--fs-12);
  border:1px solid var(--hairline);
}
.badge-soft{background:rgba(255,255,255,.06)}
.rating{color:var(--accent);font-weight:700}

/* Category sample row */
.cat-card .sample{display:flex;gap:12px;text-decoration:none;color:var(--text);align-items:center}
.cat-card .icon{width:56px;height:56px;border-radius:12px;border:1px solid var(--hairline);object-fit:cover}
.meta .title{font-weight:800;line-height:1.2;max-height:2.5em;overflow:hidden}
.meta .rating{color:var(--accent);font-size:var(--fs-14);margin-top:2px}
.meta .cta{color:var(--brand);font-size:var(--fs-14);margin-top:6px}

/* -------- Panels / aside ------------------------------------------------- */
.panel{
  background:linear-gradient(180deg,var(--surface),var(--elev));
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:var(--space-5);
}
.aside .aside-box{margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--hairline)}
.h6{font-size:var(--fs-14); text-transform:uppercase; letter-spacing:.08em; opacity:.9; margin:0 0 8px}
.body{line-height:1.6; opacity:.95}

/* Key/Value grid */
.kv{display:grid; grid-template-columns:160px 1fr; gap:10px; margin-top:12px}
.kv .k{color:var(--muted)}
.kv .v{color:var(--text)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}

/* -------- Hero block (details page) ------------------------------------- */
.hero{display:flex;gap:18px;align-items:center;margin-bottom:14px}
.hero-icon{
  width:96px;height:96px;border-radius:20px;border:1px solid var(--hairline);object-fit:cover;background:#111
}
.hero-title{margin:0 0 6px 0;font-size:var(--fs-28)}
.hero-meta{flex:1}
.hero-sub{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pkg{background:rgba(255,255,255,.06);padding:3px 6px;border-radius:8px;border:1px solid var(--hairline)}
.hero-cta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* -------- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  text-decoration:none;border:1px solid transparent;cursor:pointer; font-weight:700;
}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{filter:brightness(1.04)}
.btn-soft{background:rgba(255,255,255,.08);color:var(--text);border-color:var(--hairline)}
.btn-soft:hover{background:rgba(255,255,255,.12)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--hairline)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}

/* -------- Search --------------------------------------------------------- */
.search{display:flex;gap:8px;align-items:center}
.search-input{
  flex:1;min-width:240px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--hairline); background:var(--surface); color:var(--text)
}
.search-input::placeholder{color:var(--muted)}

/* -------- Pills (permissions) ------------------------------------------- */
.pills{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pill{
  background:rgba(255,255,255,.08);
  border:1px solid var(--hairline);
  border-radius:999px;padding:6px 10px;font-size:var(--fs-12);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* -------- Breadcrumb / back --------------------------------------------- */
.crumbs{margin-bottom:10px}

/* -------- Ads ------------------------------------------------------------ */
.ad-slot{
  display:grid;place-items:center;
  border:1px dashed var(--hairline);
  border-radius:var(--radius);
  background:rgba(0,0,0,.06);
  min-height:92px;margin:14px 0
}
.ad-leaderboard{min-height:90px}
.ad-rectangle{min-height:250px}
.ad-inline{min-height:120px}
.ad-sidebar{min-height:280px}
.ad-mobile{min-height:50px}

/* Two-column layout only when wide enough */
@media (min-width: 1100px){
  .grid-main{
    display:grid;
    grid-template-columns: minmax(0,1fr) 320px;
    gap:20px;
  }
  .ad-rail{
    position:sticky;
    top:84px;
    align-self:start;
  }
}


/* sticky footer bar */
.ad-sticky{position:sticky;bottom:0;z-index:20;background:#fff;border-top:1px solid rgba(0,0,0,.08);padding:8px}

/* right rail on wide screens */
@media (min-width: 1100px){
  .ad-rail{position:sticky; top:84px; align-self:start}
}

/* house ad images responsive */
.house-ad img{max-width:100%; height:auto; display:block}

/* -------- Footer --------------------------------------------------------- */
.site-footer{opacity:.8;margin-top:40px;border-top:1px solid var(--hairline)}
.site-footer a{color:var(--brand);text-decoration:none}

/* -------- Responsive tweaks --------------------------------------------- */
@media (max-width: 900px){
  .two-col{grid-template-columns: 1fr}
  .hero{align-items:flex-start}
  .kv{grid-template-columns: 1fr}
}

/* -------- Print (basic) -------------------------------------------------- */
@media print{
  .ad-slot, .theme-toggle, .nav, .btn{display:none!important}
  body{background:white;color:black}
  .card, .panel{box-shadow:none;border:1px solid #ddd}
}


/* Global link style */
a{ color: var(--link); }
a:hover{ filter: brightness(1.05); }

/* Keep nav subdued until hover */
.nav a{ color: var(--muted); text-decoration: none; font-weight: 600; }
.nav a:hover{ color: var(--text); }

/* CTAs inside cards use brand green */
.meta .cta, .app-card .cta { color: var(--brand); }

/* ===== FINAL OVERRIDES (keep at end) ===== */

/* 1) NEVER force two columns on generic .grid */
.grid {
  grid-template-columns: initial !important;
  justify-content: initial !important;
  align-items: initial !important;
}

/* 2) Our default card grid everywhere */
.grid-cards {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}

/* 3) Light theme is default */
:root {
  --bg: #f7fafc;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --card: #ffffff;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --android: #3ddc84;              /* Android green */
  --link: var(--android);
}

/* Dark theme */
[data-theme="dark"]{
  --bg: #0f172a;        
  --panel: #111827;     
  --text: #e5e7eb;      
  --muted: #94a3b8;     
  --card: #0b1220;      
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --android: #3ddc84;
  --link: var(--android);
}

/* 4) Links & CTAs now Android green */
a, .meta .cta, .nav a:hover { color: var(--link) !important; }

/* 5) Nice button styles (use on Download etc.) */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 14px; border-radius:12px;
  font-weight:700; text-decoration:none; cursor:pointer;
  border:1px solid rgba(0,0,0,0.06); background:var(--panel); color:var(--text);
  box-shadow: var(--shadow);
}
.btn:hover { filter: brightness(0.98); }
.btn-primary {
  background: var(--android) !important; color:#062d12 !important; border-color: transparent;
}
.btn-primary:hover { filter: brightness(0.96); }

/* 6) Make sure main layout is not a grid container */
main.shell { display:block !important; }

/* 7) Tighten app list rows */
.app-mini { background: linear-gradient(180deg, var(--panel), var(--card));
  border:1px solid rgba(0,0,0,.06); border-radius:16px; box-shadow: var(--shadow); }