.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-12);margin-top:var(--space-20)}
@media(max-width:1250px){.pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.pattern-grid{grid-template-columns:1fr}}
.pattern-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);text-align:left;color:var(--text);padding:var(--space-16);transition:transform .18s ease,border-color .18s ease,opacity .18s ease}
.pattern-card:hover{border-color:var(--accent)}
.pattern-open{grid-column:1;grid-row:1;display:grid;gap:var(--space-12);width:100%;padding:var(--space-4);text-align:left;border:0;background:transparent;color:var(--text)}
.pattern-open strong{font-size:var(--type-section);color:var(--accent)}
.pattern-open span{font-size:var(--type-caption);line-height:var(--leading-body);max-height:5.9em;overflow:hidden;white-space:pre-wrap}
.pattern-open small{color:var(--dim);font-size:var(--type-caption)}
.pattern-move{grid-column:2;grid-row:1;align-self:start;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card2);color:var(--muted);font-size:var(--type-section-lg);cursor:grab;touch-action:none}
.pattern-move:active{cursor:grabbing}
.pattern-move:focus-visible,.pattern-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pattern-card.is-dragging{opacity:.48}
.pattern-card.drop-target{outline:2px solid var(--accent);outline-offset:2px;transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){.pattern-card{transition:none}}
.pattern-selector{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:var(--space-16);display:grid;gap:var(--space-8)}
.pattern-selector>strong{font-size:var(--type-caption);color:var(--accent)}
.pattern-selector>small{font-size:var(--type-caption);color:var(--dim)}
.pattern-search{max-width:340px}
.pattern-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-8);max-height:360px;overflow:auto}
.pattern-link{min-width:0;border:1px solid var(--line);border-radius:8px;padding:var(--space-8)}
.pattern-link:has(input:checked){grid-column:1/-1;border-color:var(--accent);background:var(--card2)}
.pattern-link[hidden],.pattern-link-fields[hidden]{display:none!important}
.pattern-link-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-8)}
.pattern-link-fields label{min-width:0;font-size:var(--type-caption)}
.pattern-link-fields input,.pattern-link-fields select{width:100%}
.pattern-link-note{grid-column:1/-1}
@media(max-width:520px){.pattern-link-fields{grid-template-columns:1fr}.pattern-link-note{grid-column:auto}}
.pattern-choice{display:flex!important;align-items:center;gap:var(--space-8);padding:var(--space-4);cursor:pointer;text-transform:none!important;letter-spacing:0!important;font-size:var(--type-caption)!important}
.pattern-choice:has(input:checked){border-color:var(--accent);background:var(--card2);color:var(--text)}
.pattern-choice input{width:auto;margin:0;accent-color:var(--accent)}
.pattern-choice[hidden]{display:none!important}
.pattern-trade-chips{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.pattern-chip{width:auto;border:1px solid var(--accent);border-radius:18px;background:var(--card2);color:var(--accent);padding:var(--space-8) var(--space-12);font-size:var(--type-caption)}
.pattern-chip:hover{background:var(--card)}
.pattern-examples,.pattern-trade-list{display:grid;gap:var(--space-12);margin:var(--space-16) 0}
.pattern-example-card{display:grid;grid-template-columns:minmax(130px,35%) 1fr;gap:var(--space-16);padding:var(--space-12);border:1px solid var(--line);border-radius:10px;background:var(--card2)}
.pattern-example-card>a{display:block}
.pattern-example-card img{width:100%;max-height:280px;object-fit:contain;border-radius:7px;background:#0b110d}
.pattern-example-card video{display:block;width:100%;max-height:280px;border-radius:7px;background:#0b110d}
.pattern-example-card form,.pattern-example-card>div{min-width:0}
.pattern-example-card small{display:block;color:var(--dim);overflow-wrap:anywhere}
.pattern-example-fields{display:grid;gap:var(--space-12);margin:var(--space-12) 0}
.pattern-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.pattern-example-fields textarea{min-height:70px}
.pattern-trade-list .reviewitem{width:100%;color:var(--text);text-align:left;cursor:pointer}
@media(max-width:650px){.pattern-example-card{grid-template-columns:1fr}.pattern-example-grid{grid-template-columns:1fr 1fr}}
@media print{.pattern-selector,.pattern-example-card button{display:none!important}}
