/* MyAppsContent: the balance and any notice share one column with the product cards, which follow
   OwnedProductCard (the header opens the product; one Push/Earn action). Widths follow the content
   column, not the window, so the sidebar's state is accounted for. */
.products-page{container-type:inline-size}
.products-summary{display:grid;gap:16px;margin-top:28px}
@container (min-width:760px){.products-summary.has-notice{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

.balance{position:relative;display:flex;flex-direction:column;min-height:176px;padding:24px;border-radius:var(--radius-glass);background:var(--soft-mint);color:var(--ink)}
.balance-icon{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-icon);background:color-mix(in srgb,var(--soft-mint-ink) 16%,transparent);color:var(--soft-mint-ink)}
.balance-icon .ui-icon{width:22px;height:22px}
.balance-label{padding-right:56px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.8px;color:var(--muted)}
.balance strong{display:flex;align-items:baseline;gap:6px;margin-top:10px;font:700 48px/1 var(--app-font);letter-spacing:-2px;font-variant-numeric:tabular-nums}
.balance strong small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--muted)}
.balance p{margin:8px 0 18px;font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.balance-earn{align-self:flex-start;margin-top:auto;min-height:40px;padding:0 16px;border-radius:var(--radius-button);background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);font-size:13px;font-weight:700}
.balance-earn:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}

.products-notice{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto 1fr;gap:16px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-glass);background:var(--card);box-shadow:var(--shadow-sm)}
.products-notice-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-icon);background:var(--soft-primary)}
.products-notice-icon .streak-flame{width:20px;height:23px}
.products-notice h2{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.2px}
.products-notice p{margin:6px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.products-notice .action-row{grid-column:2;align-self:end;margin:0;gap:10px}
.products-notice .action-row .button{flex:1 1 auto;padding:0 18px}
@container (max-width:479px){.products-notice .action-row{grid-column:1/-1}}

.products-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:40px 0 14px}
.products-section-head h2{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.3px}
.products-section-head span{font-size:12px;line-height:16px;font-weight:600;color:var(--muted)}

.owned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.owned-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-glass);background:var(--card);box-shadow:var(--shadow-sm)}
.owned-card:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line))}
.owned-open{display:grid;grid-template-columns:52px minmax(0,1fr) 16px;align-items:center;gap:14px;width:100%;padding:18px;text-align:left}
.owned-open:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:var(--radius-glass)}
.owned-open .product-icon{width:52px;height:52px;border-radius:14px}
.owned-open>svg{width:16px;height:16px;color:var(--muted)}
.owned-copy b,.owned-copy span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.owned-copy b{font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.2px}
.owned-copy span{margin-top:4px;font-size:12px;line-height:17px;color:var(--muted)}
.owned-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:14px 18px;border-top:1px solid var(--line)}
.owned-stats{display:flex;gap:20px;margin:0}
.owned-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.owned-stats dt{font-size:11px;line-height:14px;font-weight:600;color:var(--muted)}
.owned-stats dd{margin:0;font-size:17px;line-height:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.owned-action{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:40px;padding:0 16px;border-radius:var(--radius-button);background:var(--soft-primary);color:var(--soft-primary-ink);font-size:13px;font-weight:700}
.owned-action .ui-icon{width:16px;height:16px}
.owned-action:hover{background:color-mix(in srgb,var(--soft-primary-ink) 14%,var(--soft-primary))}
.owned-action:disabled{opacity:.5}