/* /panels/ and /panels/<id>/ (prototype/Panels.dc.html, prototype/Panel Detail.dc.html) */
.pn-main{max-width:1280px;margin:0 auto;padding:32px 20px 80px;display:grid}
.pn-main>*{min-width:0}
.pn-h1{margin:0;font-family:Sora,sans-serif;font-weight:600;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.15}
.pn-sub{margin:0;color:var(--tx2);font-size:16px;max-width:70ch;text-wrap:pretty}

/* filters */
.pn-filters{display:grid;gap:14px;padding:16px;border-radius:14px;background:var(--sf);border:1px solid var(--ln)}
.pn-frow{display:flex;flex-wrap:wrap;gap:16px;align-items:end}
.pn-fgroup{display:grid;gap:8px;min-width:0;max-width:100%}
.pn-chips{display:flex;flex-wrap:wrap;gap:8px}
.pn-chip{min-height:36px;padding:0 14px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;background:transparent;border:1px solid var(--ln2);color:var(--tx2)}
.pn-chip:hover{border-color:var(--tx3)}
.pn-chip[aria-pressed="true"]{background:var(--ac2);border-color:var(--ac);color:var(--tx)}
.pn-select{height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--ln2);background:var(--sf2);color:var(--tx);min-width:min(220px,100%);max-width:100%}
.pn-count{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--ln);padding-top:12px}
.pn-reset{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--ln2);background:transparent;color:var(--tx2);cursor:pointer;font-size:13px}
.pn-empty{display:grid;gap:10px;place-items:center;text-align:center;padding:56px 20px;border-radius:14px;border:1px dashed var(--ln2)}
.pn-empty[hidden]{display:none}

/* cards */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.pn-card{display:grid;gap:14px;align-content:start;padding:16px;border-radius:14px;background:var(--sf);border:1px solid var(--ln);animation:rw-in .3s ease;min-width:0}
.pn-card[hidden]{display:none}
.pn-ctop{display:flex;justify-content:space-between;gap:10px;align-items:start}
.pn-brand{font-size:12px;color:var(--tx3);font-family:'IBM Plex Mono',monospace}
.pn-name{margin:2px 0 0;font-family:Sora,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.25}
.pn-tiles{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px}
.pn-tile{padding:10px;border-radius:8px;background:var(--bg2);min-width:0}
.pn-tile dt{color:var(--tx3);font-size:11px;font-family:'IBM Plex Mono',monospace}
.pn-tv{margin:2px 0 0;font-weight:600;font-size:15px}
.pn-ts{margin:0;color:var(--tx2)}
.pn-with{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--ln);font-size:13px}
.pn-with[hidden]{display:none}
.pn-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pn-price{font-family:Sora,sans-serif;font-weight:600;font-size:18px}
.pn-psub{font-size:11px;color:var(--tx3)}
.pn-foot .btn-sec{font-size:14px;padding:0 14px;border-radius:8px}

/* detail */
.pn-crumb{font-size:13px;color:var(--tx3);display:flex;gap:8px;flex-wrap:wrap}
.pn-crumb a{color:var(--tx3)}
.pn-crumb a:hover{color:var(--tx)}
.pn-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:start}
.pn-hero>*{min-width:0}
.pn-dh1{margin:0;font-family:Sora,sans-serif;font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:-.025em;line-height:1.05;overflow-wrap:anywhere}
.pn-sum{margin:0;font-size:17px;color:var(--tx2);line-height:1.5;text-wrap:pretty}
.pn-buybox{display:grid;gap:10px;padding:16px;border-radius:14px;background:var(--sf);border:1px solid var(--ln)}
.pn-bbhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pn-store{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--ln)}
.pn-buybtn{height:44px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;background:var(--ac);color:var(--acInk)}
.pn-buybtn:hover{color:var(--acInk)}
.pn-buyw{font-size:12px;font-weight:500;opacity:.8}
.pn-sec{display:grid;gap:18px}
.pn-h2{margin:0;font-family:Sora,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.02em}
.pn-secsub{margin:0;color:var(--tx2);font-size:15px;text-wrap:pretty}
.pn-lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.pn-lcard{display:grid;gap:8px;align-content:start;padding:18px;border-radius:12px;background:var(--sf);border:1px solid var(--ln)}
.pn-lhead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pn-lterm{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ac)}
.pn-lval{font-family:Sora,sans-serif;font-size:30px;font-weight:600;letter-spacing:-.02em}
.pn-lval.pn-na{font-size:20px;color:var(--tx3);line-height:1.8}
.pn-lplain{margin:0;font-size:13px;color:var(--tx2);line-height:1.5}
.pn-chart{display:grid;gap:10px;padding:18px;border-radius:12px;background:var(--sf);border:1px solid var(--ln)}
.pn-chead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pn-cmeta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tx3)}
.pn-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pn-bar{display:grid;gap:6px;text-align:center}
.pn-bwrap{height:80px;display:flex;align-items:end}
.pn-bfill{width:100%;border-radius:6px 6px 0 0;transform-origin:bottom;animation:pn-grow .6s ease both}
@keyframes pn-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.pn-bv{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500}
.pn-bf{font-size:12px;color:var(--tx3)}
.pn-cnote{margin:0;font-size:13px;color:var(--tx2);line-height:1.5}
.pn-clist{display:grid;border-radius:14px;border:1px solid var(--ln);background:var(--sf);overflow:hidden}
.pn-crow{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:8px 16px;padding:14px 16px;border-top:1px solid var(--ln);align-items:center;color:var(--tx);min-height:44px}
.pn-crow:first-child{border-top:0}
.pn-crow:hover{background:var(--sf2);color:var(--tx)}
.pn-srcs{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--tx2);align-items:center}
@media (max-width:480px){.pn-bv{font-size:11px}.pn-bars{gap:4px}.pn-crow{grid-template-columns:1fr;justify-items:start}}
@media (prefers-reduced-motion:reduce){.pn-bfill{animation:none}}