/* 我的收藏 (saved.js): the library's cards, then the lessons' records as quiet rows. */
#saved-view .saved{max-width:1040px}
#saved-view .saved :is(h1,h2,p,ul){margin:0}
#saved-view .saved-head{margin:0 0 24px}
#saved-view .saved-head h1{margin:0 0 6px;font-size:30px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
#saved-view .saved-head p{font-size:15px;color:var(--muted)}
#saved-view .saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:20px 16px}
#saved-view .saved-grid:empty{min-height:300px;border-radius:18px;background:color-mix(in srgb,var(--ink) 4%,var(--bg));animation:card-wait 1.4s ease-in-out infinite}
#saved-view .saved-empty{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px;border-radius:22px;background:color-mix(in srgb,var(--ink) 3.5%,var(--bg))}
#saved-view .saved-empty p{font-size:15px;line-height:1.6}
#saved-view .saved-btn{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--button);color:var(--button-ink);font-size:14px;font-weight:600;text-decoration:none}
#saved-view .saved-records{margin:40px 0 0}
#saved-view .saved-records h2{margin:0 0 10px;font-size:17px;font-weight:600}
#saved-view .saved-records ul{padding:0;list-style:none}
#saved-view .saved-record{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .15s ease}
#saved-view .saved-record:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
#saved-view .saved-record img,#saved-view .saved-record>span:first-child{width:44px;height:44px;border-radius:10px;object-fit:contain;background:#f2f2f5}
#saved-view .saved-record-text{display:flex;flex-direction:column;gap:2px;min-width:0}
#saved-view .saved-record-text strong{overflow:hidden;font-size:15px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
#saved-view .saved-record-text span{font-size:13px;color:var(--muted)}
:root[data-theme=dark] #saved-view .saved-empty{background:#1c1c1e}

/* Product detail actions: save, and a way to do the sums. */
#detail-view .pd-info>.pd-actions{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 16px}
#detail-view .pd-save{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 22px;border:0;border-radius:999px;background:var(--button);color:var(--button-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s ease}
#detail-view .pd-save:active{transform:scale(.97)}
#detail-view .pd-save .when-on{display:none}
#detail-view .pd-save[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 7%,var(--bg));color:var(--ink)}
#detail-view .pd-save[aria-pressed=true] .when-on{display:inline}
#detail-view .pd-save[aria-pressed=true] .when-off{display:none}
#detail-view .pd-save:disabled{opacity:.6;cursor:wait}
#detail-view .pd-calc{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
#detail-view .pd-calc:hover{text-decoration:underline;text-underline-offset:3px}
/* The big save button replaces the small bookmark in the heading. */
#detail-view .product-detail-heading>.favorite-button{display:none}
#detail-view .product-detail-heading>[data-metric-product]{right:0}
#detail-view .pd-info>.product-detail-heading{padding-right:48px}
#saved-view #saved-grid .batch2-product{display:flex;flex-direction:column;min-width:0}