/* Final catalog reference layer: one selectable button per card. */
html body:has(.ar-hero) #apps.grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:stretch}
html body:has(.ar-hero) #apps .app {
  box-sizing:border-box;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;
  grid-template-rows:minmax(62px,auto) minmax(43px,1fr) auto!important;
  grid-template-areas:'icon copy' 'description description' 'action action';
  column-gap:10px;row-gap:9px;align-content:stretch;align-items:start;
  width:100%;min-width:0;min-height:205px;height:100%;padding:15px 13px 14px!important;
  border-radius:16px!important;border:1px solid rgba(114,164,225,.31)!important;
  background:linear-gradient(149deg,rgba(22,43,66,.98),rgba(12,27,44,.98))!important;
  box-shadow:0 9px 25px rgba(0,0,0,.12)!important;
  text-align:left!important;color:#f7faff;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
html body:has(.ar-hero) #apps .app:hover {transform:translateY(-2px);border-color:rgba(118,192,255,.8)!important;box-shadow:0 14px 26px rgba(0,0,0,.24),0 0 20px rgba(56,126,253,.12)!important}
html body:has(.ar-hero) #apps .app.selected {border-color:#70c4ff!important;background:linear-gradient(150deg,#193657,#142b4c)!important;box-shadow:inset 0 0 0 1px rgba(88,181,255,.22),0 0 20px rgba(45,116,246,.17)!important}
html body:has(.ar-hero) #apps .app-head {display:none!important}
html body:has(.ar-hero) #apps .icon {box-sizing:border-box;grid-area:icon!important;position:relative;justify-self:start!important;align-self:start!important;width:52px!important;height:52px!important;margin:0!important;border-radius:13px!important;overflow:hidden;flex:none;box-shadow:0 6px 14px rgba(0,0,0,.24)}
html body:has(.ar-hero) #apps .icon img,html body:has(.ar-hero) #apps .icon .icon-fallback {border-radius:inherit}
html body:has(.ar-hero) #apps .app-copy {box-sizing:border-box;grid-area:copy!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center;align-self:start!important;width:100%;min-width:0;min-height:52px!important;margin:0!important;padding:3px 0 0!important;gap:5px}
html body:has(.ar-hero) #apps .name {display:block;min-width:0;max-width:100%;margin:0;color:#f7faff;text-align:left!important;font-size:13px!important;font-weight:800;line-height:1.23;overflow-wrap:anywhere}
html body:has(.ar-hero) #apps .meta {display:block;width:100%;margin:0;color:#a8bbd5!important;text-align:left!important;font-size:11px!important;line-height:1.3}
html body:has(.ar-hero) #apps .ar-card-description {grid-area:description;display:-webkit-box;width:100%;min-width:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#c0cee2;font-size:12px;line-height:1.35;text-align:left;overflow-wrap:anywhere;align-self:center}
html body:has(.ar-hero) #apps .app-footer {box-sizing:border-box;grid-area:action!important;display:flex!important;justify-content:center!important;align-items:center!important;position:static;width:100%;min-width:0;min-height:35px;margin:0!important;padding:6px 11px!important;border-radius:999px!important;border:1px solid rgba(106,164,255,.48)!important;background:linear-gradient(103deg,#1e4268,#273b77)!important;color:#8fd3ff!important;box-shadow:none!important}
html body:has(.ar-hero) #apps .app.selected .app-footer {background:linear-gradient(103deg,#186b91,#2748a1)!important;color:#fff!important;border-color:#67c6ff!important}
html body:has(.ar-hero) #apps .app-action {font-size:12px!important;font-weight:800;line-height:1.2}
html body:has(.ar-hero) #apps .app-action-icon {display:none!important}
@media (min-width:1151px) and (max-width:1279px) {html body:has(.ar-hero) #apps.grid {grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:801px) and (max-width:1150px) {html body:has(.ar-hero) #apps.grid {grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:800px) {html body:has(.ar-hero) #apps.grid {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px) {
 html body:has(.ar-hero) #apps.grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 html body:has(.ar-hero) #apps .app {grid-template-columns:43px minmax(0,1fr)!important;grid-template-rows:minmax(49px,auto) minmax(37px,1fr) auto!important;min-height:177px;padding:10px!important;column-gap:8px;row-gap:7px;border-radius:14px!important}
 html body:has(.ar-hero) #apps .icon {width:43px!important;height:43px!important;border-radius:11px!important}
 html body:has(.ar-hero) #apps .app-copy {min-height:43px!important;gap:3px;padding:2px 0 0!important}
 html body:has(.ar-hero) #apps .name {font-size:11px!important}
 html body:has(.ar-hero) #apps .meta {font-size:10px!important}
 html body:has(.ar-hero) #apps .ar-card-description {font-size:11px;line-height:1.3}
 html body:has(.ar-hero) #apps .app-footer {min-height:33px;padding:6px 4px!important}
 html body:has(.ar-hero) #apps .app-action {font-size:11px!important}
}
@media (max-width:350px) {html body:has(.ar-hero) #apps .app {grid-template-columns:37px minmax(0,1fr)!important;column-gap:6px;padding:8px!important}html body:has(.ar-hero) #apps .icon {width:37px!important;height:37px!important}html body:has(.ar-hero) #apps .name {font-size:10.5px!important}}
@media (prefers-reduced-motion:reduce) {html body:has(.ar-hero) #apps .app {transition:none}}