/* One appearance vocabulary for saved cards, app details and live previews. */
.app-styled {
 --dc-bg:var(--app-background);--dc-ink:var(--app-text);--dc-muted:var(--app-muted);--dc-line:var(--app-border);
 --dc-blue:var(--app-accent);--app-surface:var(--app-background);--app-ink:var(--app-text);--app-subtle:var(--app-muted);--app-line:var(--app-border);
 --app-button-fill:linear-gradient(120deg,var(--app-accent),var(--app-button-end));--app-button-ink:var(--app-button-text);
}
html.site-dark .app-styled {--dc-bg:var(--app-background-dark);--dc-ink:var(--app-text-dark);--dc-muted:var(--app-muted-dark);--dc-line:var(--app-border-dark);--app-surface:var(--app-background-dark);--app-ink:var(--app-text-dark);--app-subtle:var(--app-muted-dark);--app-line:var(--app-border-dark)}
.app-styled[data-app-buttons=solid] {--app-button-fill:var(--app-accent)}
.app-styled[data-app-buttons=outline] {--app-button-fill:transparent;--app-button-ink:var(--app-accent)}
html.site-pearl body.public-ui #downloadCatalog .download-card.app-styled {
 padding:var(--app-padding)!important;border-radius:var(--app-radius)!important;border-width:var(--app-border-width)!important;
 border-color:var(--app-line)!important;background:var(--app-surface)!important;box-shadow:var(--app-shadow)!important;
}
#downloadCatalog .app-styled .download-card-cover {aspect-ratio:var(--app-cover-ratio);border-radius:max(0px,calc(var(--app-radius) - 7px))}
#downloadCatalog .app-styled .download-card-cover>img {object-fit:var(--app-image-fit)}
#downloadCatalog .app-styled .download-app-icon {display:grid;place-items:center;flex:none;width:38px;height:38px;overflow:hidden;border:1px solid var(--app-line);border-radius:11px;background:var(--dc-soft);color:var(--app-accent)}
#downloadCatalog .app-styled .download-app-icon>img {width:100%;height:100%;object-fit:cover}
#downloadCatalog .app-styled .download-app-icon>.ui-symbol {width:22px;height:22px}
html.site-pearl body.public-ui #downloadCatalog .app-styled .download-card-heading h2 {font-size:var(--app-title-size)!important;font-weight:var(--app-title-weight)!important;color:var(--app-ink)!important}
html.site-pearl body.public-ui #downloadCatalog .app-styled .download-card-description {font-size:var(--app-body-size)!important;color:var(--app-subtle)!important}
html.site-pearl body.public-ui #downloadCatalog .app-styled .download-card-description :is(p,li,span,strong,em,h2,h3,h4) {color:inherit!important}
#downloadCatalog .app-styled .download-card-description>:first-child {margin-top:0}
#downloadCatalog .app-styled .download-card-description>:last-child {margin-bottom:0}
#downloadCatalog .app-styled .download-card-description :is(ul,ol) {padding-left:18px}
#downloadCatalog .app-styled[data-app-description=full] .download-card-description {display:block;-webkit-line-clamp:unset;overflow:visible;max-height:none}
html.site-pearl body.public-ui #downloadCatalog .app-styled .download-primary:not(.download-primary--secondary) {background:var(--app-button-fill)!important;color:var(--app-button-ink)!important;border:1px solid var(--app-accent)!important;font-size:var(--app-button-size)!important}
#downloadCatalog .app-styled .download-primary>.ui-symbol {width:16px;height:16px;flex:none}
#downloadCatalog .app-styled[data-app-layout=compact] .download-card-content {padding:8px 5px 5px}
#downloadCatalog .app-styled[data-app-layout=compact] .download-card-heading {align-items:center;min-height:52px}
/* A compact app page with one download action and no nested tabs. */
.app-icon-image {position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden}
.app-icon-image>img {position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:cover;background:var(--app-surface,#fff)}
.app-icon-image>img[hidden] {display:none!important}
.app-icon-placeholder {display:grid;place-items:center;width:100%;height:100%;color:var(--app-accent);background:var(--app-surface,#f1f6fc)}
.app-icon-placeholder>.ui-symbol {width:55%;height:55%}
html.site-pearl body.public-ui #appDetail {max-width:1000px;min-width:0;margin:0 auto;padding:0!important;color:var(--app-ink)!important}
#appDetail .app-detail-back {display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11px;color:var(--app-subtle);min-width:0}
#appDetail .app-detail-back>a {display:inline-flex;align-items:center;gap:5px;flex:none;color:var(--app-subtle);text-decoration:none;min-height:28px}
#appDetail .app-detail-back .ui-nav-glyph {width:14px;height:14px}
#appDetail .app-detail-back>span:last-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.site-pearl body.public-ui #appDetail .app-compact-hero {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin:0 0 16px;padding:17px 18px;background:var(--app-surface)!important;border:var(--app-border-width) solid var(--app-line);border-radius:min(var(--app-radius),16px);box-shadow:0 3px 15px #1a3b6506}
#appDetail .app-hero-icon {display:grid;place-items:center;grid-column:1;grid-row:1;flex:none;width:52px;height:52px;border-radius:13px;overflow:hidden;background:var(--app-surface);border:1px solid var(--app-line);color:var(--app-accent)}
#appDetail .app-hero-icon>.ui-symbol {width:28px;height:28px}
#appDetail .app-hero-copy {min-width:0;grid-column:2}
#appDetail .app-compact-hero:not(:has(.app-hero-icon)) .app-hero-copy {grid-column:1 / 3}
html.site-pearl body.public-ui #appDetail .app-hero-copy h1 {margin:0!important;color:var(--app-ink)!important;font-size:calc(var(--app-title-size) + 3px)!important;font-weight:var(--app-title-weight)!important;line-height:1.3;overflow-wrap:anywhere}
#appDetail .app-quick-meta {display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:5px;font-size:11px;line-height:1.5;color:var(--app-subtle)}
#appDetail .app-quick-meta>span+span {padding-left:8px;border-left:1px solid var(--app-line)}
#appDetail .app-hero-rating {display:flex;align-items:center;gap:5px;margin-top:4px;font-size:10px;line-height:1.4;color:var(--app-subtle)}
#appDetail .app-hero-rating>span {color:#c9922d;font-size:12px}
#appDetail .app-hero-actions {display:flex;align-items:center;gap:8px;grid-column:3;min-width:0}
html.site-pearl body.public-ui #appDetail .app-main-download {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;min-width:110px;padding:8px 13px;border:1px solid var(--app-accent);border-radius:10px;background:var(--app-button-fill)!important;color:var(--app-button-ink)!important;font-size:var(--app-button-size);font-weight:600;line-height:1.4;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
#appDetail .app-main-download>.ui-symbol {width:17px;height:17px;flex:none}
#appDetail .app-main-download>span {color:inherit!important}
#appDetail .app-buy-action {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 11px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--app-ink);font-size:11px;line-height:1.4;cursor:pointer}
#appDetail .app-buy-action>.ui-symbol {width:15px;height:15px;flex:none}
#appDetail .app-file-pending {font-size:11px;color:var(--app-subtle)}
#appDetail .app-detail-section {display:block!important;min-width:0;margin:0 0 16px;scroll-margin-top:80px}
html.site-pearl body.public-ui #appDetail .app-section-heading {margin:0 0 11px!important;font-size:12px!important;font-weight:650!important;line-height:1.5;color:var(--app-ink)!important;text-transform:none!important}
#appDetail .app-content-grid {display:grid!important;grid-template-columns:minmax(0,1fr) minmax(270px,.7fr);gap:18px;align-items:start}
#appDetail .app-description-panel {min-width:0;padding:3px 0}
html.site-pearl body.public-ui #appDetail .app-rich-description {font-size:var(--app-body-size)!important;line-height:1.75;color:var(--app-ink)!important;overflow-wrap:anywhere}
html.site-pearl body.public-ui #appDetail .app-rich-description :is(p,li,span,strong,em,h2,h3,h4) {color:inherit!important}
#appDetail .app-rich-description>:first-child {margin-top:0}
#appDetail .app-rich-description>:last-child {margin-bottom:0}
#appDetail .app-rich-description :is(ul,ol) {padding-left:20px}
#appDetail .app-facts-panel {padding:14px;background:var(--app-surface);border:var(--app-border-width) solid var(--app-line);border-radius:min(var(--app-radius),14px)}
#appDetail .app-facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0}
#appDetail .app-facts>div {min-width:0}
#appDetail .app-facts dt {margin:0 0 3px;color:var(--app-subtle);font-size:10px;line-height:1.4}
#appDetail .app-facts dd {margin:0;color:var(--app-ink);font-size:11px;font-weight:500;line-height:1.45;overflow-wrap:anywhere}
#appDetail .app-screenshots {display:flex;gap:10px;overflow:auto;margin-top:14px;scrollbar-width:thin}
#appDetail .app-screenshots img {display:block;width:140px;max-height:220px;object-fit:contain;flex:none;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface)}
#appDetail .app-install-panel {padding:14px 0;border-top:1px solid var(--app-line)}
#appDetail .app-install-steps {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0;padding:0}
#appDetail .app-install-steps>li {display:flex;align-items:flex-start;gap:8px;min-width:0;color:var(--app-subtle);font-size:11px;line-height:1.6}
#appDetail .app-install-steps>li>span {display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--app-line);border-radius:7px;color:var(--app-ink);font-size:10px;font-weight:600;background:var(--app-surface)}
#appDetail .app-review-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
#appDetail .app-review-heading>.app-section-heading {margin:0!important}
#appDetail .app-review-heading>span {font-size:10px;color:var(--app-subtle)}
html.site-pearl body.public-ui #appDetail .comment-section {margin:0!important;padding:0!important}
#appDetail .comment-section-title {display:none}
html.site-pearl body.public-ui #appDetail :is(.comment-form,.comment-item) {margin:0 0 12px!important;padding:14px!important;border:var(--app-border-width) solid var(--app-line)!important;border-radius:min(var(--app-radius),14px)!important;box-shadow:none!important;background:var(--app-surface)!important;color:var(--app-ink)!important}
#appDetail .comment-form-title {font-size:11px;margin-bottom:10px}
#appDetail .comment-form .form-field {margin-bottom:10px}
#appDetail .comment-form .form-label {font-size:10px;margin-bottom:4px;color:var(--app-subtle)}
#appDetail .comment-form .form-input {padding:8px 10px;min-height:34px;border:1px solid var(--app-line);border-radius:8px;background:var(--app-surface);color:var(--app-ink);font-size:12px}
#appDetail #cmtText {min-height:74px;resize:vertical}
#appDetail .star-picker {--app-rating:#a67215;gap:3px;margin:0;position:relative}
#appDetail .star-picker input {display:block!important;position:absolute;width:1px;height:1px;margin:-1px;padding:0;opacity:0;overflow:hidden;clip-path:inset(50%)}
#appDetail .star-picker label {display:grid;place-items:center;min-width:32px;min-height:36px;font-size:23px;cursor:pointer;border-radius:7px;color:var(--app-subtle)}
#appDetail .star-picker input:checked~label,#appDetail .star-picker label:hover,#appDetail .star-picker label:hover~label {color:var(--app-rating)!important;-webkit-text-fill-color:currentColor!important}
#appDetail .star-picker input:focus-visible+label {outline:2px solid var(--app-accent);outline-offset:1px}
#appDetail .comment-stars {display:flex;gap:3px;color:#c08a18}
#appDetail .comment-stars>i {color:inherit!important;-webkit-text-fill-color:currentColor!important}
html.site-dark #appDetail .star-picker {--app-rating:#f0c35b}
html.site-dark #appDetail .comment-stars {color:#f0c35b}
#appDetail .comment-body {font-size:13px;line-height:1.75;overflow-wrap:anywhere;white-space:pre-line}
#appDetail .btn-submit-comment {min-height:34px;width:auto;padding:8px 13px;border:1px solid var(--app-accent);border-radius:9px;background:var(--app-button-fill);color:var(--app-button-ink);font-size:11px;box-shadow:none}
html.site-pearl body.public-ui #appDetail :is(.comment-body,.comment-email,.comment-form-title) {color:var(--app-ink)!important}
#appDetail .no-comments {padding:12px;font-size:11px;color:var(--app-subtle)}
#appDetail :is(button,a):active {scale:.98}
#appDetail :is(button,a,input,textarea):focus-visible {outline:2px solid var(--app-accent);outline-offset:3px}
@media(hover:hover) {#appDetail .app-main-download:hover {transform:translateY(-1px);box-shadow:0 4px 10px #245cb224}}
@media(max-width:700px) {
 #downloadCatalog .app-styled .download-app-icon {width:29px;height:29px;border-radius:9px}
 #downloadCatalog .app-styled .download-app-icon>.ui-symbol {width:18px;height:18px}
 html.site-pearl body.public-ui #downloadCatalog .app-styled .download-card-heading h2 {font-size:max(11px,calc(var(--app-title-size) - 2px))!important}
 html.site-pearl body.public-ui #appDetail .app-compact-hero {grid-template-columns:44px minmax(0,1fr);gap:11px;padding:14px;margin-bottom:14px}
 #appDetail .app-hero-icon {width:44px;height:44px;border-radius:11px}
 #appDetail .app-hero-icon>.ui-symbol {width:25px;height:25px}
 #appDetail .app-hero-actions {grid-column:1 / -1;justify-content:flex-start;gap:7px;flex-wrap:wrap;margin-top:1px}
 #appDetail .app-main-download {min-height:34px;min-width:106px}
 #appDetail .app-quick-meta {font-size:10px;gap:3px 6px}
 #appDetail .app-quick-meta>span+span {padding-left:6px}
 #appDetail .app-content-grid {grid-template-columns:minmax(0,1fr);gap:14px}
 #appDetail .app-facts-panel {padding:13px}
 #appDetail .app-facts {gap:11px 14px}
 #appDetail .app-install-steps {grid-template-columns:minmax(0,1fr);gap:9px}
}
@media(prefers-reduced-motion:reduce) {#appDetail *,#appDetail *::after {transition:none!important;animation:none!important}#appDetail :is(button,a):active {scale:1}}