.deck-cover { display: inline-block; position: relative; width: 88px; height: 91px; flex-shrink: 0; perspective: 400px; }
.deck-appearance { margin:14px 0 18px; border:1px solid var(--line); border-radius:8px; padding:12px; background:#f6f2f8; }
.appearance-preview { display:flex; align-items:center; gap:14px; }
.appearance-preview > div { min-width:0; }
.appearance-preview strong { display:block; font-size:11px; line-height:1.7; }
.appearance-preview small { display:block; font-size:9px; color:var(--muted); margin-top:6px; }
.appearance-options > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 0 2px; font-size:11px; }
.appearance-options > summary .icon { width:16px; height:16px; }
.appearance-options fieldset { border:0; padding:0; margin:18px 0; min-width:0; }
.appearance-options legend { font-size:11px; margin-bottom:9px; }
.style-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.style-swatches button { padding:10px 3px; min-height:72px; position:relative; display:flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid var(--line); background:#fff9; }
.style-swatches button[aria-pressed="true"] { outline:2px solid var(--purple); outline-offset:1px; background:#eee5f4; }
.style-swatches button > .icon { position:absolute; top:3px; right:3px; width:12px; height:12px; color:var(--purple); }
.key-picker { display:block; font-size:11px; }
.key-picker select { display:block; width:100%; min-width:0; margin-top:9px; font-size:14px; }
.saved-deck-shelf { display:flex; gap:10px; overflow-x:auto; padding:4px 3px 13px; scroll-snap-type:x mandatory; }
.saved-deck-shelf > button { flex:0 0 130px; min-width:0; padding:10px; background:#f8f4fa; border-radius:8px; text-align:left; scroll-snap-align:start; }
.saved-deck-shelf > button > strong { display:block; font-size:10px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; }
.saved-deck-shelf > button[aria-pressed="true"] { border-color:var(--purple); background:#e9dfef; }
.match-deck-covers { display:flex; gap:30px; justify-content:center; margin-bottom:20px; }
.match-deck-covers > div { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.match-deck-covers strong { font-size:11px; line-height:1.7; }
.deck-card-add { min-width:40px; padding:0; }
.deck-list .deck-quantity { width:17px; text-align:center; }
.deck-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding:12px 3px 18px; scroll-padding:12px; }
.deck .deck-list { max-height:none; overflow:visible; }
.deck-footer { display:flex; align-items:center; gap:16px; border-top:1px solid var(--line); background:#fbfaf7; padding:12px 3px; }
.deck-footer-count { flex:0 0 auto; min-width:65px; }
.deck-footer-count strong { display:block; font:23px var(--display); }
.deck-footer-count small { font-size:11px; color:var(--muted); }
.deck-footer-count > span { display:block; font-size:9px; color:var(--muted); margin-top:4px; }
.deck .deck-footer > .save-deck { position:static; bottom:auto; min-height:48px; flex:1; width:auto; margin:0; box-shadow:none; }
.deck .sample-decks { padding-top:4px; }
.template-group { min-width:0; margin:0 0 20px; }
.template-group h3,.template-group > summary { font-size:12px; font-weight:700; line-height:1.7; margin:0; padding:14px 0 10px; }
.deck .sample-decks .deck-template-list { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; min-width:0; }
.deck .sample-decks .deck-template-list > button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-width:0; padding:13px 14px; min-height:76px; height:auto; text-align:left; border-radius:7px; background:#fff9; }
.deck .sample-decks .deck-template-list > button > .template-content { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; margin:0; color:var(--ink); }
.template-rank { font-size:9px; color:var(--muted); line-height:1.5; }
.template-name { display:block; font-size:13px; font-weight:700; line-height:1.7; white-space:normal; overflow-wrap:anywhere; }
.deck .sample-decks .template-content > .recipe-player { font-size:10px; color:var(--muted); margin:0; line-height:1.7; white-space:normal; overflow-wrap:anywhere; }
.deck .sample-decks .deck-template-list > button > .template-use { flex:0 0 auto; margin:0; padding:5px 8px; border-radius:5px; font-size:10px; line-height:1.5; color:var(--purple); background:var(--lilac); }
@media(min-width:901px) {
  .deck { display:grid; grid-template-rows:auto minmax(0,1fr) auto; max-height:calc(100dvh - 220px); padding:0 18px; overflow:hidden; }
  .deck .deck-heading { padding-top:15px; }
  .deck .deck-heading h2 { margin:0 0 8px; }
}
@media(max-width:900px) {
  .deck.is-open { display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:min(90dvh,920px); max-height:calc(100dvh - max(8px,env(safe-area-inset-top,0px))); padding:0 18px; overflow:hidden; }
  .deck.is-open .deck-heading { position:static; z-index:5; background:#fbfaf7; margin:0; padding:14px 0 12px; border-bottom:1px solid var(--line); }
  .deck.is-open .deck-heading h2 { margin:0; font-size:20px; }
  .deck.is-open .deck-heading .eyebrow { display:none; }
  .deck-list { overflow:visible; max-height:none!important; }
  .deck-list [data-remove], .deck-list [data-add] { min-height:44px; min-width:40px; }
  .deck-card-info img { width:35px; height:49px; }
  .deck-card-info span { font-size:11px; }
  .deck.is-open .deck-footer { padding:12px 0 calc(12px + var(--safe-bottom)); }
  .deck .deck-footer > .save-deck { min-height:48px; padding:12px 16px; }
  .card-bottom .add { min-height:44px; min-width:44px; }
  .key-picker select { font-size:16px; }
  .match-deck-covers { gap:15px; }
  .match-deck-covers > div { flex-direction:column; align-items:flex-start; gap:5px; }
  .match-deck-covers .deck-cover { transform:scale(.85); transform-origin:left bottom; height:80px; }
}


.deck-cover .cover-card { position:absolute; left:50%; bottom:2px; width:52px; height:73px; margin-left:-26px; border-radius:6%/4.3%; overflow:hidden; background:#35204d; box-shadow:0 4px 10px #291a3940; display:grid; place-items:center; transform-origin:50% 100%; }
.deck-cover .cover-card img { display:block; width:100%; height:100%; object-fit:cover; }
.deck-cover .cover-card > .icon { color:#fff8; width:25px; height:25px; }
.deck-cover .cover-pos-0 { z-index:3; transform:rotate(-2deg); }
.deck-cover .cover-pos-1 { z-index:2; transform:translateX(18px) rotate(12deg); }
.deck-cover .cover-pos-2 { z-index:1; transform:translateX(-18px) rotate(-14deg); }
.deck-cover.cover-count-2 .cover-pos-0 { transform:translateX(-8px) rotate(-5deg); }
.deck-cover.cover-count-2 .cover-pos-1 { transform:translateX(12px) rotate(9deg); }
.key-picks { display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; margin:10px 0 4px; }
.key-picks .key-auto { grid-column:1/-1; min-height:40px; font-size:12px; border-radius:10px; }
.key-picks .key-auto[aria-pressed="true"] { background:var(--purple); border-color:var(--purple); color:#fff; }
.key-pick { position:relative; padding:0; min-height:0; border:0; background:none; border-radius:6%/4.3%; }
.key-pick img { display:block; width:100%; aspect-ratio:5/7; object-fit:cover; border-radius:6%/4.3%; box-shadow:0 2px 6px #291a3930; transition:transform .15s, box-shadow .15s; }
.key-pick[aria-pressed="true"] img { box-shadow:0 0 0 3px var(--purple),0 4px 10px #291a3955; transform:translateY(-3px); }
.key-pick b { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:var(--purple); color:#fff; font:700 11px ui-monospace,monospace; }
.key-note { margin:6px 0 0; font-size:10px; color:var(--muted); }.deck-cover { width:104px; } .appearance-preview .deck-cover { margin:0 6px; }