/* ==========================================================
   LiteAPKs-style layer for APKGO
   Loaded after styles/extras, prefix: lt-
   ========================================================== */
:root {
    --lt-green: #76b82a;
    --lt-green-dark: #5f9a1d;
    --lt-orange: #f07d1a;
    --lt-bg: #fafaf8;
    --lt-card: #ffffff;
    --lt-text: #1d2127;
    --lt-muted: #6b7280;
    --lt-line: #e8e8e4;
    --lt-hero: #1e2229;
    --lt-nav-h: 64px;
}

html.dark {
    --lt-bg: #14171c;
    --lt-card: #1d2127;
    --lt-text: #f1f3f5;
    --lt-muted: #9aa3af;
    --lt-line: #2b3139;
}

body {
    background: var(--lt-bg) !important;
    color: var(--lt-text);
    padding-bottom: calc(var(--lt-nav-h) + env(safe-area-inset-bottom, 0px));
}

.icon-bg-container { display: none !important; }

main { margin-top: 12px !important; }

@media (min-width: 1024px) {
    body { padding-bottom: 0; }
    .lt-bottom-nav { display: none !important; }
}

/* ---------- Header ---------- */
.lt-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--lt-card);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}
.lt-header-inner {
    max-width: 80rem;
    margin: 0 auto;
    height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.lt-icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: var(--lt-muted);
    border-radius: 10px;
}
.lt-icon-btn:hover { color: var(--lt-green); }
.lt-icon-btn svg { width: 26px; height: 26px; }
.lt-brand {
    flex: 1;
    font-size: 26px; font-weight: 800; letter-spacing: -.5px;
    color: var(--lt-green); text-transform: uppercase;
    text-decoration: none; line-height: 1;
    display: flex; align-items: center;
}
.lt-brand img { height: 34px; width: auto; }
.lt-desktop-nav { display: none; gap: 4px; }
.lt-desktop-nav a {
    padding: 8px 14px; border-radius: 10px; font-weight: 700; font-size: 14px;
    color: var(--lt-muted); text-decoration: none;
}
.lt-desktop-nav a:hover, .lt-desktop-nav a.active { color: var(--lt-green); background: rgba(118, 184, 42, .1); }
@media (min-width: 1024px) {
    .lt-desktop-nav { display: flex; }
    #mobile-menu-btn { display: none; }
    .lt-brand { flex: 0 0 auto; margin-right: 12px; }
    .lt-header-inner .lt-spacer { flex: 1; }
}

/* ---------- Section head ---------- */
.lt-sec { margin: 26px 0 8px; }
.lt-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.lt-sec-title { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; color: var(--lt-text); margin: 0; }
.lt-sec-title svg { width: 28px; height: 28px; color: var(--lt-orange); flex: none; }
.lt-more { color: var(--lt-green); font-weight: 700; font-size: 17px; text-decoration: none; }

/* ---------- Featured slider ("Indispensable on your phone") ---------- */
.lt-feat {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
}
.lt-feat::-webkit-scrollbar { display: none; }
.lt-feat-card {
    position: relative; flex: 0 0 82%; max-width: 560px; aspect-ratio: 16 / 9;
    border-radius: 26px; overflow: hidden; scroll-snap-align: start;
    background: #111; display: block; text-decoration: none;
}
.lt-feat-card .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lt-feat-card .bg.blur { filter: blur(22px) saturate(1.4); transform: scale(1.3); opacity: .9; }
.lt-feat-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background: rgba(40, 40, 40, .72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lt-feat-bar img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; background: #fff; }
.lt-feat-bar .t { color: #fff; font-size: 19px; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.lt-feat-bar .c { color: var(--lt-green); font-size: 15px; font-weight: 600; margin-top: 2px; }
@media (min-width: 768px) { .lt-feat-card { flex-basis: 46%; } }

/* ---------- Compact app grid ---------- */
.lt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
@media (min-width: 640px) { .lt-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .lt-grid { grid-template-columns: repeat(8, 1fr); } }
.lt-app { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--lt-text); min-width: 0; }
.lt-app .ic { position: relative; width: 100%; aspect-ratio: 1; border-radius: 22%; overflow: hidden; background: var(--lt-line); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.lt-app .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-app .mod { position: absolute; top: 4px; right: 4px; background: var(--lt-orange); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 6px; }
.lt-app .nm { margin-top: 10px; font-size: 16px; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.lt-app .rt { margin-top: 8px; color: var(--lt-muted); font-size: 16px; display: flex; align-items: center; gap: 4px; }
.lt-app .rt svg { width: 16px; height: 16px; color: var(--lt-orange); }

/* ---------- Horizontal recommended scroller ---------- */
.lt-reco { background: var(--lt-card); border-radius: 24px; padding: 18px 16px 12px; box-shadow: 0 1px 10px rgba(0, 0, 0, .06); margin: 22px 0; }
.lt-reco h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 800; color: var(--lt-text); }
.lt-reco h3 svg { width: 26px; height: 26px; color: var(--lt-green); }
.lt-reco p.sub { margin: 6px 0 14px; color: var(--lt-muted); font-size: 16px; }
.lt-reco-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.lt-reco-row::-webkit-scrollbar { display: none; }
.lt-reco-row .lt-app { flex: 0 0 96px; scroll-snap-align: start; }
.lt-reco-row .lt-app .nm { font-size: 15px; }

/* ---------- App page hero ---------- */
.lt-hero {
    position: relative; margin: -12px -12px 0; color: #fff; background: var(--lt-hero); overflow: hidden;
}
@media (min-width: 768px) { .lt-hero { margin: 0; border-radius: 24px; } }
.lt-hero-bg { height: 150px; position: relative; overflow: hidden; }
.lt-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.3); transform: scale(1.25); opacity: .85; }
.lt-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 34, 41, 0) 30%, var(--lt-hero) 100%); }
.lt-hero-body { position: relative; margin-top: -26px; padding: 0 16px 22px; }
.lt-crumb { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; align-items: center; gap: 12px; font-size: 18px; margin-bottom: 22px; scrollbar-width: none; }
.lt-crumb::-webkit-scrollbar { display: none; }
.lt-crumb a { color: var(--lt-green); text-decoration: none; }
.lt-crumb .cur { color: var(--lt-orange); }
.lt-crumb svg { width: 14px; height: 14px; color: #9aa3af; flex: none; }
.lt-titlebox { display: flex; gap: 16px; align-items: flex-start; }
.lt-titlebox .ic { width: 94px; height: 94px; border-radius: 22px; overflow: hidden; flex: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); background: #333; }
.lt-titlebox .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lt-titlebox h1 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; color: #fff; word-break: break-word; }
.lt-pct { color: var(--lt-green); font-size: 20px; font-weight: 600; }
.lt-badge-mod { display: inline-block; margin-top: 10px; background: var(--lt-orange); color: #fff; font-weight: 800; font-size: 18px; padding: 6px 22px; border-radius: 999px; }
.lt-modline { margin: 22px 0 0; color: var(--lt-orange); font-style: italic; font-size: 21px; line-height: 1.35; }
.lt-stats { display: flex; align-items: stretch; margin: 30px 0 28px; }
.lt-stat { flex: 1; text-align: center; padding: 0 6px; border-left: 1px solid rgba(255, 255, 255, .15); min-width: 0; }
.lt-stat:first-child { border-left: 0; }
.lt-stat .v { font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; white-space: nowrap; overflow: hidden; }
.lt-stat .v svg { width: 34px; height: 34px; }
.lt-stat .v .star { color: var(--lt-orange); width: 22px; height: 22px; }
.lt-stat .l { color: #9aa3af; font-size: 19px; margin-top: 4px; }
.lt-stat a { color: inherit; text-decoration: none; display: block; }
.lt-dl-btn {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--lt-green); color: #fff !important; font-weight: 700; font-size: 22px;
    padding: 18px; border-radius: 999px; text-decoration: none; width: 100%;
    box-shadow: 0 6px 16px rgba(118, 184, 42, .35);
}
.lt-dl-btn:active { background: var(--lt-green-dark); }
.lt-dl-btn svg { width: 28px; height: 28px; }
.lt-actions { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.lt-actions a, .lt-actions button {
    display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer;
    font-size: 21px; font-weight: 600; text-decoration: none;
}
.lt-actions svg { width: 28px; height: 28px; }
.lt-actions .share { color: var(--lt-green); }
.lt-actions .upd { color: var(--lt-orange); }
.lt-rate-line { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 18px; color: #cbd5e1; font-size: 15px; }

/* Info chips below hero (publisher, updated, requires...) */
.lt-info { background: var(--lt-card); border-radius: 22px; padding: 6px 18px; margin: 18px 0; box-shadow: 0 1px 10px rgba(0, 0, 0, .06); }
.lt-info-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lt-line); font-size: 17px; }
.lt-info-row:last-child { border-bottom: 0; }
.lt-info-row .k { color: var(--lt-muted); }
.lt-info-row .v { font-weight: 700; text-align: right; color: var(--lt-text); }
.lt-info-row .v a { color: var(--lt-green); text-decoration: none; }

/* ---------- Download page ---------- */
.lt-dl-page { max-width: 640px; margin: 0 auto; }
.lt-dl-page .lt-crumb { margin: 10px 0 24px; }
.lt-dl-page .lt-crumb a { color: var(--lt-green); }
.lt-dl-icon { display: block; width: 224px; height: 224px; margin: 0 auto; border-radius: 22%; object-fit: cover; box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.lt-dl-meta { text-align: center; margin: 34px 0 10px; font-size: 21px; color: var(--lt-muted); }
.lt-dl-meta b { color: var(--lt-green); font-weight: 600; }
.lt-dl-meta i { margin-left: 12px; }
.lt-dl-title { text-align: center; font-size: 30px; font-weight: 700; line-height: 1.45; margin: 18px 0 34px; color: var(--lt-text); }
.lt-acc { border-radius: 24px; overflow: hidden; background: var(--lt-card); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); margin-bottom: 18px; border: 1px solid var(--lt-line); }
.lt-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; cursor: pointer; background: linear-gradient(180deg, #7bbd2c, #6aa822); color: #fff; font-size: 26px; font-weight: 600; padding: 22px 26px; text-align: left; }
.lt-acc-head svg { width: 30px; height: 30px; transition: transform .25s; flex: none; }
.lt-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.lt-acc .accordion-content { background: var(--lt-card); }
.lt-dl-row {
    display: flex; align-items: center; gap: 16px; margin: 20px; padding: 14px 18px;
    background: rgba(118, 184, 42, .07); border-radius: 18px; text-decoration: none; color: var(--lt-text);
}
.lt-dl-row .ico { width: 58px; height: 58px; border-radius: 16px; background: rgba(118, 184, 42, .18); display: flex; align-items: center; justify-content: center; color: var(--lt-green); flex: none; }
.lt-dl-row .ico svg { width: 30px; height: 30px; }
.lt-dl-row .tt { flex: 1; min-width: 0; }
.lt-dl-row .tt b { display: block; font-size: 21px; font-weight: 500; text-transform: uppercase; letter-spacing: .2px; }
.lt-dl-row .tt span { color: var(--lt-muted); font-size: 19px; }
.lt-dl-row .sz { background: rgba(0, 0, 0, .06); color: var(--lt-muted); padding: 10px 16px; border-radius: 14px; font-size: 18px; white-space: nowrap; }
html.dark .lt-dl-row .sz { background: rgba(255, 255, 255, .08); }
.lt-notice { text-align: center; background: rgba(118, 184, 42, .08); border: 1px solid rgba(118, 184, 42, .35); border-radius: 22px; padding: 26px 22px; font-size: 21px; line-height: 1.5; color: var(--lt-text); margin: 28px 0; }
.lt-card { background: var(--lt-card); border-radius: 22px; padding: 20px; margin: 18px 0; box-shadow: 0 1px 10px rgba(0, 0, 0, .06); }
.lt-card h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px; color: var(--lt-text); }
.lt-card ol { padding-left: 22px; font-size: 16px; line-height: 1.8; color: var(--lt-muted); }
.lt-second-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; padding: 16px; border-radius: 999px; background: #1f2937; color: #fff !important; font-weight: 700; font-size: 18px; text-decoration: none; }

/* ---------- Bottom nav ---------- */
.lt-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--lt-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--lt-card); border-top: 1px solid var(--lt-line);
    display: flex; box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.lt-bottom-nav a, .lt-bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; cursor: pointer; text-decoration: none;
    color: var(--lt-muted); font-size: 15px; font-weight: 500;
}
.lt-bottom-nav svg { width: 28px; height: 28px; }
.lt-bottom-nav .active { color: var(--lt-green); }

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
    .lt-titlebox h1 { font-size: 20px; }
    .lt-stat .v { font-size: 21px; }
    .lt-stat .l { font-size: 16px; }
    .lt-dl-title { font-size: 24px; }
    .lt-acc-head { font-size: 22px; }
}