/* Карточки приложений, подробные страницы и галерея снимков (scripts/app-pages.mjs). */
:root{--app-accent:var(--accent,#4f46e5);--app-accent-ink:#fff;--app-ok:#16a34a;--app-warn:#b45309;--app-shadow:0 1px 2px #1018280a,0 12px 32px #1018280f}
html[data-public-theme=dark]{--app-accent:#8f80ff;--app-accent-ink:#0d111a;--app-ok:#4ade80;--app-warn:#fbbf24;--app-shadow:0 1px 2px #0006,0 14px 36px #0008}

/* ── Сетка карточек ── */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.app-grid-compact{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.app-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:20px;background:var(--surface);overflow:hidden;box-shadow:0 1px 2px #10182808;transition:border-color .2s ease,box-shadow .25s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.app-card:hover{border-color:color-mix(in oklab,var(--app-accent) 45%,var(--border));box-shadow:var(--app-shadow);transform:translateY(-2px)}
.app-card-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklab,var(--app-accent) 10%,var(--surface)),color-mix(in oklab,#16b6c9 8%,var(--surface)));border-bottom:1px solid var(--border)}
.app-card-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.app-card:hover .app-card-shot img{transform:scale(1.03)}
.app-card-noshot{display:grid;place-items:center;height:100%;font-size:44px;font-weight:700;color:color-mix(in oklab,var(--app-accent) 60%,var(--text-secondary))}
.app-card-body{display:flex;flex-direction:column;flex:1;gap:8px;padding:16px 18px 18px}
.app-card h2,.app-card h3{margin:2px 0 0;font-size:18px;line-height:1.3;letter-spacing:-.015em;color:var(--text-primary)}
.app-card h2 a,.app-card h3 a{color:inherit;text-decoration:none}
.app-card h2 a:hover,.app-card h3 a:hover{color:var(--app-accent)}
.app-card p{flex:1;margin:0;color:var(--text-secondary);font-size:14px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.app-card-compact .app-card-body{padding:14px 16px 16px}
.app-card-compact h3{font-size:16px}
.app-card-badges{display:flex;flex-wrap:wrap;gap:6px}
.app-status,.app-new{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.app-status{color:var(--app-ok);background:color-mix(in oklab,var(--app-ok) 12%,transparent)}
.app-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in oklab,currentColor 22%,transparent)}
.app-status-paused{color:var(--app-warn);background:color-mix(in oklab,var(--app-warn) 13%,transparent)}
.app-new{color:var(--app-accent);background:color-mix(in oklab,var(--app-accent) 12%,transparent)}

/* ── Кнопка «Подробнее о приложении →» ── */
.app-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:6px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in oklab,var(--app-accent) 32%,var(--border));background:color-mix(in oklab,var(--app-accent) 7%,var(--surface));color:var(--app-accent);font-size:13.5px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s cubic-bezier(.23,1,.32,1)}
.app-more:hover{background:var(--app-accent);border-color:var(--app-accent);color:var(--app-accent-ink);box-shadow:0 6px 18px color-mix(in oklab,var(--app-accent) 32%,transparent)}
.app-more:focus-visible{outline:3px solid color-mix(in oklab,var(--app-accent) 45%,transparent);outline-offset:3px}
.app-more:active{transform:scale(.97)}
.app-arrow{display:inline-block;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.app-more:hover .app-arrow,.app-chip:hover .app-arrow{transform:translateX(3px)}

/* ── /implemented/ ── */
.impl-hero{padding:56px 0 28px}
.impl-hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.05;letter-spacing:-.035em;margin:14px 0 16px;color:var(--text-primary)}
.impl-hero p{max-width:760px;font-size:17px;line-height:1.7;color:var(--text-secondary)}
.impl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:26px;max-width:860px}
.impl-stat{padding:14px 16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:13px}
.impl-stat b{display:block;font-size:28px;line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:2px}
.impl-toc{position:sticky;top:68px;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin-top:8px;background:color-mix(in oklab,var(--background) 88%,transparent);backdrop-filter:blur(14px);scrollbar-width:none}
.impl-toc::-webkit-scrollbar{display:none}
.impl-toc a{flex:none;padding:8px 13px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:13px;font-weight:550;text-decoration:none;transition:border-color .15s,color .15s}
.impl-toc a:hover{border-color:var(--app-accent);color:var(--app-accent)}
.impl-section{padding:40px 0 18px;scroll-margin-top:130px}
.impl-section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.impl-section h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;margin:0;color:var(--text-primary)}
.impl-count{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 9px;border-radius:999px;background:color-mix(in oklab,var(--app-accent) 12%,transparent);color:var(--app-accent);font-size:12.5px;font-weight:700}
.impl-lead{margin:0 0 22px;color:var(--text-secondary);font-size:15px;line-height:1.6;max-width:760px}
.impl-news{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.impl-news-item{display:block;padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:inherit;transition:border-color .15s}
a.impl-news-item:hover{border-color:var(--app-accent)}
.impl-news-item b{display:block;font-size:12px;color:var(--app-accent);margin-bottom:6px;letter-spacing:.02em}
.impl-news-item strong{display:block;color:var(--text-primary);font-size:15.5px;margin-bottom:4px}
.impl-news-item span{color:var(--text-secondary);font-size:13.5px;line-height:1.55}
.impl-paused{margin-top:18px;padding:16px 18px;border-radius:16px;border:1px dashed color-mix(in oklab,var(--app-warn) 45%,var(--border));color:var(--text-secondary);font-size:14px;line-height:1.6}
.impl-paused strong{color:var(--text-primary)}

/* ── Подробная страница ── */
.app-hero{padding:18px 0 40px}
.app-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center}
.app-page h1{margin:12px 0 10px}
.app-tagline{font-size:19px;line-height:1.5;font-weight:600;color:var(--text-primary)!important;margin:0 0 14px!important;max-width:620px}
.app-hero-shot{margin:0}
.app-hero-shot a,.app-shot a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--app-shadow);cursor:zoom-in;transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.app-hero-shot a:hover,.app-shot a:hover{transform:translateY(-2px)}
.app-hero-shot img,.app-shot img{display:block;width:100%;height:auto}
.app-hero-shot figcaption,.app-shot figcaption{margin-top:10px;color:var(--text-secondary);font-size:13px;line-height:1.5}
.app-about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:48px;align-items:start}
.app-aside{padding:22px;border-radius:20px;border:1px solid var(--border);background:var(--surface)}
.app-aside h3{font-size:15px!important;margin:0 0 6px!important}
.app-aside p{font-size:14px!important;line-height:1.65!important;margin:0 0 16px!important}
.app-aside p:last-child{margin:0!important}
.app-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;padding:0;margin:0;list-style:none}
.app-features li{position:relative;padding:12px 14px 12px 42px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:14.5px;line-height:1.55}
.app-features li:before{content:"";position:absolute;left:14px;top:14px;width:18px;height:18px;border-radius:50%;background:color-mix(in oklab,var(--app-ok) 16%,transparent) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.6l4.6-5' fill='none' stroke='%2316a34a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.app-features-plain{margin-bottom:20px}
.app-page .feature-workflow li p{margin:0;color:var(--text-primary)}
.app-links{display:flex;flex-wrap:wrap;gap:10px}
.app-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-primary);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,color .15s}
.app-chip:hover{border-color:var(--app-accent);color:var(--app-accent)}
.app-limits ul{margin:4px 0 14px;padding-left:20px;color:var(--text-secondary);line-height:1.7}
.app-limits h2{margin-bottom:10px}

/* ── Галерея ── */
.app-gallery-lead{max-width:720px}
.app-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.app-shot{margin:0;min-width:0}
.app-shot-wide{grid-column:1/-1}
.app-strip-section{padding-top:8px}

/* ── Увеличенный снимок ── */
.app-lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#edf1f7}
.app-lightbox::backdrop{background:rgba(6,9,16,.88);backdrop-filter:blur(4px)}
.app-lightbox[open]{display:grid;grid-template-rows:auto 1fr auto;animation:app-lb-in .18s ease-out}
.app-lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;font-size:13px;color:#a6b0c0}
.app-lightbox-stage{display:grid;place-items:center;min-height:0;padding:0 64px}
.app-lightbox img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px #000a}
.app-lightbox figcaption{padding:12px 18px 20px;text-align:center;font-size:14px;line-height:1.5;color:#d4d9e2}
.app-lightbox button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff2e;background:#ffffff14;color:#fff;font-size:20px;cursor:pointer;transition:background-color .15s}
.app-lightbox button:hover{background:#ffffff2e}
.app-lightbox button:focus-visible{outline:3px solid #8f80ff;outline-offset:2px}
.app-lightbox .app-lb-prev,.app-lightbox .app-lb-next{position:fixed;top:50%;transform:translateY(-50%)}
.app-lightbox .app-lb-prev{left:14px}.app-lightbox .app-lb-next{right:14px}
@keyframes app-lb-in{from{opacity:0}to{opacity:1}}

@media (max-width:980px){
  .app-hero-grid,.app-about{grid-template-columns:1fr;gap:28px}
  .impl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .app-features{grid-template-columns:1fr}
  .app-gallery{grid-template-columns:1fr;gap:18px}
  .app-grid{grid-template-columns:1fr;gap:16px}
  .impl-toc{top:60px}
  .impl-hero{padding-top:36px}
  .app-lightbox-stage{padding:0 8px}
  .app-lightbox .app-lb-prev,.app-lightbox .app-lb-next{top:auto;bottom:14px;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .app-card,.app-card-shot img,.app-more,.app-arrow,.app-hero-shot a,.app-shot a{transition:none}
  .app-card:hover,.app-hero-shot a:hover,.app-shot a:hover{transform:none}
  .app-card:hover .app-card-shot img{transform:none}
  .app-lightbox[open]{animation:none}
}
.app-shot-wide~.app-shot:last-child:nth-child(even){grid-column:1/-1}
html[dir=rtl] .app-arrow{transform:scaleX(-1)}
html[dir=rtl] .app-more:hover .app-arrow,html[dir=rtl] .app-chip:hover .app-arrow{transform:translateX(-3px) scaleX(-1)}