/* SEO-страница приложения /apps/{slug}. Цвета через переменные: тёмные темы (omoda/tenet/chery) и светлая XCITE. */
html {
    --acc: #3b82f6;
    --ap-head: #ffffff;          /* заголовки, жирное */
    --ap-lead: #e5e7eb;          /* первый абзац */
    --ap-text: #d1d5db;          /* основной текст */
    --ap-muted: #9ca3af;         /* второстепенное */
    --ap-dim: #6b7280;           /* крошки */
    --ap-surface: rgba(255,255,255,.04);
    --ap-surface2: rgba(255,255,255,.03);
    --ap-border: rgba(255,255,255,.08);
    --ap-shadow: none;
    --ap-badge-bg: rgba(255,255,255,.08);
    --ap-badge: #d1d5db;
    --ap-free-bg: rgba(34,197,94,.15);
    --ap-free: #4ade80;
}
html[data-brand="tenet"] { --acc: #06b6d4; }
html[data-brand="chery"] { --acc: #dc2626; }
html[data-brand="xcite"] {
    --acc: #2d5fc4;
    --ap-head: #362620;
    --ap-lead: #362620;
    --ap-text: #55443a;
    --ap-muted: #7d695a;
    --ap-dim: #9a8878;
    --ap-surface: #fdf7ea;
    --ap-surface2: #fdf7ea;
    --ap-border: rgba(54,38,32,.10);
    --ap-shadow: 0 6px 22px rgba(150,95,45,.10);
    --ap-badge-bg: rgba(54,38,32,.07);
    --ap-badge: #6d5a4d;
    --ap-free-bg: rgba(22,163,74,.12);
    --ap-free: #15803d;
}

.app-page { max-width: 48rem; margin: 0 auto; padding: 7rem 1.5rem 5rem; color: var(--ap-text); }

.ap-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .85rem; color: var(--ap-dim); margin-bottom: 1.25rem; }
.ap-crumbs a { color: var(--ap-muted); text-decoration: none; }
.ap-crumbs a:hover { color: var(--acc); }

.ap-h1 { font-size: 2rem; line-height: 1.2; font-weight: 800; margin: 0 0 1.5rem; color: var(--ap-head); }
@media (min-width: 768px) { .ap-h1 { font-size: 2.6rem; } }

.ap-apps { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .ap-apps { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }
.ap-app { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 1rem;
    background: var(--ap-surface); border: 1px solid var(--ap-border); box-shadow: var(--ap-shadow); }
.ap-app-icon { width: 3rem; height: 3rem; border-radius: .75rem; flex-shrink: 0; }
.ap-app-name { font-weight: 700; color: var(--ap-head); }
.ap-app-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .8rem; color: var(--ap-muted); margin-top: .15rem; }
.ap-badge { padding: .05rem .5rem; border-radius: 999px; background: var(--ap-badge-bg); color: var(--ap-badge); }
.ap-badge-free { background: var(--ap-free-bg); color: var(--ap-free); }

.ap-shot { margin: 0 0 2rem; display: flex; justify-content: center; padding: 1.25rem; border-radius: 1.25rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 8%, transparent), rgba(168,85,247,.06)); }
.ap-shot img { max-width: 100%; max-height: 22rem; object-fit: contain; border-radius: .75rem; }

.ap-body { color: var(--ap-text); font-size: 1.05rem; line-height: 1.75; }
.ap-body > p:first-child { font-size: 1.15rem; color: var(--ap-lead); }
.ap-body h2 { color: var(--ap-head); font-size: 1.5rem; line-height: 1.3; font-weight: 700; margin: 2.25rem 0 .85rem; }
.ap-body h3 { color: var(--ap-head); font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .6rem; }
.ap-body p { margin: 0 0 1rem; }
.ap-body ul, .ap-body ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.ap-body ul { list-style: disc; }
.ap-body ol { list-style: decimal; }
.ap-body li { margin: .35rem 0; }
.ap-body li::marker { color: var(--acc); font-weight: 700; }
.ap-body strong { color: var(--ap-head); font-weight: 700; }
.ap-body a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.ap-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .95rem; }
.ap-body th, .ap-body td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--ap-border); vertical-align: top; }
.ap-body th { color: var(--ap-head); font-weight: 700; }
.ap-body .ap-note { padding: 1rem 1.15rem; border-radius: .9rem; margin: 0 0 1.25rem;
    background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }

.ap-faq { margin-top: 2.5rem; }
.ap-faq h2, .ap-related h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; color: var(--ap-head); }
.ap-faq details { border: 1px solid var(--ap-border); border-radius: .9rem; margin-bottom: .6rem; background: var(--ap-surface2); box-shadow: var(--ap-shadow); }
.ap-faq summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; color: var(--ap-head); list-style: none; }
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after { content: "+"; float: right; color: var(--acc); font-weight: 700; }
.ap-faq details[open] summary::after { content: "−"; }
.ap-faq details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--ap-text); line-height: 1.65; }

.ap-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2.5rem 0; }
.ap-btn { display: inline-flex; align-items: center; padding: .85rem 1.4rem; border-radius: .9rem; font-weight: 700; text-decoration: none;
    color: var(--ap-head); border: 1px solid var(--ap-border); background: var(--ap-surface); box-shadow: var(--ap-shadow); transition: transform .2s, filter .2s; }
.ap-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ap-btn-main { background: var(--acc); border-color: var(--acc); color: #fff; }

.ap-related ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
@media (min-width: 640px) { .ap-related ul { grid-template-columns: 1fr 1fr; } }
.ap-related li a { display: block; padding: .7rem 1rem; border-radius: .8rem; text-decoration: none; color: var(--ap-text);
    background: var(--ap-surface); border: 1px solid var(--ap-border); box-shadow: var(--ap-shadow); }
.ap-related li a:hover { border-color: color-mix(in srgb, var(--acc) 50%, transparent); color: var(--ap-head); }
.ap-all { color: var(--acc); text-decoration: none; font-weight: 600; }