TheNewMillium：创建页面，内容为“.pd-card-ui-pack { margin: 1em 0 1.5em; color: inherit; font-family: inherit; } .pd-card-ui-controls:empty { display: none; } .pd-card-ui-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .5em 0; font-size: .875em; } .pd-card-ui-controls select, .pd-card-ui-controls button { font: inherit; color: #202122; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; min-height: 30px; padding: 3px 8px; cursor: pointer; } .p…”

2026-10-15T07:04:02Z

创建页面，内容为“.pd-card-ui-pack { margin: 1em 0 1.5em; color: inherit; font-family: inherit; } .pd-card-ui-controls:empty { display: none; } .pd-card-ui-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .5em 0; font-size: .875em; } .pd-card-ui-controls select, .pd-card-ui-controls button { font: inherit; color: #202122; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; min-height: 30px; padding: 3px 8px; cursor: pointer; } .p…”

新页面

.pd-card-ui-pack { margin: 1em 0 1.5em; color: inherit; font-family: inherit; }
.pd-card-ui-controls:empty { display: none; }
.pd-card-ui-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .5em 0; font-size: .875em; }
.pd-card-ui-controls select, .pd-card-ui-controls button { font: inherit; color: #202122; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; min-height: 30px; padding: 3px 8px; cursor: pointer; }
.pd-card-ui-controls select { margin-left: .4em; }
.pd-card-ui-controls button:disabled { color: #72777d; cursor: default; }
.pd-card-ui-controls button:hover:not(:disabled) { background: #eaecf0; }
.pd-card-ui-list { border: 0; }
.pd-card-ui-card { min-width: 0; color: #202122; scroll-margin-top: 76px; }
.pd-card-ui-card + .pd-card-ui-card { margin-top: 3px; }
.pd-card-ui-summary { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 32px 90px minmax(0,1fr) 52px 76px 84px 68px 32px; align-items: stretch; gap: 0; padding: 1px; min-height: 44px; text-align: left; color: #eee; background: #111; border: 2px solid #000; border-radius: 0; font: inherit; line-height: 1.5; }
.pd-card-ui-meta, .pd-card-ui-stats { display: contents; }
.pd-card-ui-rarity, .pd-card-ui-number, .pd-card-ui-name, .pd-card-ui-type, .pd-card-ui-stat, .pd-card-ui-arrow { box-sizing: border-box; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 6px 5px; border-right: 1px solid #454545; overflow-wrap: anywhere; }
.pd-card-ui-summary > .pd-card-ui-rarity { grid-column: 1; grid-row: 1; font-weight: bold; }
.pd-card-ui-number { grid-column: 2; grid-row: 1; font-size: .85em; color: #ddd; }
.pd-card-ui-name { grid-column: 3; grid-row: 1; font-weight: bold; justify-content: flex-start; padding-left: 10px; color: #fff; text-shadow: 0 0 2px rgba(255,255,255,.55); }
.pd-card-ui-type { grid-column: 4; grid-row: 1; font-size: .85em; color: #ddd; }
.pd-card-ui-stat { gap: 4px; font-size: .9em; flex-wrap: nowrap; }
.pd-card-ui-stat-badge { box-sizing: border-box; width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid currentColor; color: #ddd; font-size: .76em; font-weight: bold; line-height: 1.25; text-align: center; letter-spacing: .02em; text-shadow: none; }
.pd-card-ui-stat-value { color: #eee; box-sizing: border-box; width: 4ch; flex: 0 0 4ch; text-align: center; font-family: monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pd-card-ui-kb .pd-card-ui-stat-value { width: 3ch; flex-basis: 3ch; }
.pd-card-ui-ep { grid-column: 5; grid-row: 1; }
.pd-card-ui-bp { grid-column: 6; grid-row: 1; }
.pd-card-ui-kb { grid-column: 7; grid-row: 1; border-left: 1px solid #454545; border-right: 0; }
.pd-card-ui-bp + .pd-card-ui-kb { border-left-color: transparent; }
.pd-card-ui-arrow { grid-column: 8; grid-row: 1; padding: 0; border-right: 0; border-left: 1px solid #454545; visibility: hidden; color: #ddd; background: rgba(255,255,255,.035); }
.pd-card-ui-arrow::before { content: ""; display: block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; transform: rotate(0deg); transform-origin: 45% 50%; transition: transform 160ms ease; }
button.pd-card-ui-summary { cursor: pointer; }
.pd-card-ui-summary:focus, .pd-card-ui-controls button:focus, .pd-card-ui-controls select:focus { outline: 2px solid #36c; outline-offset: 1px; }
.pd-card-ui-ready .pd-card-ui-arrow { visibility: visible; }

.pd-card-ui-rarity-C > .pd-card-ui-summary { box-shadow: inset 0 0 0 1px #70dd90, inset 0 0 6px rgba(112,221,144,.5); }
.pd-card-ui-rarity-B > .pd-card-ui-summary { box-shadow: inset 0 0 0 1px #80b8ff, inset 0 0 6px rgba(128,184,255,.5); }
.pd-card-ui-rarity-A > .pd-card-ui-summary { box-shadow: inset 0 0 0 1px #ce98ff, inset 0 0 6px rgba(206,152,255,.5); }
.pd-card-ui-rarity-S > .pd-card-ui-summary { box-shadow: inset 0 0 0 1px #ffe060, inset 0 0 6px rgba(255,224,96,.5); }
.pd-card-ui-rarity-C .pd-card-ui-rarity { color: #70dd90; text-shadow: 0 0 3px #70dd90; }
.pd-card-ui-rarity-B .pd-card-ui-rarity { color: #80b8ff; text-shadow: 0 0 3px #80b8ff; }
.pd-card-ui-rarity-A .pd-card-ui-rarity { color: #ce98ff; text-shadow: 0 0 3px #ce98ff; }
.pd-card-ui-rarity-S .pd-card-ui-rarity { color: #ffe060; text-shadow: 0 0 3px #ffe060; }
.pd-card-ui-summary:hover { background-color: #1a1a1a; }
.pd-card-ui-card:target { outline: 2px solid #36c; outline-offset: 1px; }
.pd-card-ui-detail { background: #fff; border: 1px solid #a2a9b1; border-top: 0; }
.pd-card-ui-detail[hidden] { display: none; }
.pd-card-ui-detail-inner { padding: 4px 12px 10px; border-top: 1px solid #c8ccd1; }
.pd-card-ui-detail-inner > p { display: none; }
.pd-card-ui-field { display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 12px; padding: 8px 0; line-height: 1.7; overflow-wrap: anywhere; }
.pd-card-ui-field + .pd-card-ui-field { border-top: 1px solid #eaecf0; }
.pd-card-ui-label { font-weight: bold; }
.pd-card-ui-field p { margin: 0; }
.pd-card-ui-rules br { display: block; content: ""; margin-top: 6px; }
@media (max-width: 699px) {
.pd-card-ui-summary { grid-template-columns: 32px minmax(0,1fr) 32px; }
.pd-card-ui-name { grid-column: 2; grid-row: 1; }
.pd-card-ui-arrow { grid-column: 3; grid-row: 1; }
.pd-card-ui-meta { grid-column: 1 / 4; grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); border-top: 1px solid #454545; padding: 3px 0; }
.pd-card-ui-number, .pd-card-ui-type, .pd-card-ui-stat { flex: 1 0 auto; font-size: 12px; padding: 2px 6px; }
.pd-card-ui-number { grid-column: 1; grid-row: 1; }
.pd-card-ui-type { grid-column: 2 / 4; grid-row: 1; border-right: 0; }
.pd-card-ui-ep { grid-column: 1; grid-row: 2; }
.pd-card-ui-bp { grid-column: 2; grid-row: 2; }
.pd-card-ui-kb { grid-column: 3; grid-row: 2; }
.pd-card-ui-stat-badge { width: 24px; height: 24px; padding: 0; }
.pd-card-ui-kb { border-left: 0; }
.pd-card-ui-detail-inner { padding: 2px 10px 8px; }
.pd-card-ui-field { grid-template-columns: minmax(0,1fr); gap: 3px; }
.pd-card-ui-label { font-size: .9em; }
}
@media (prefers-reduced-motion: reduce) { .pd-card-ui-arrow::before { transition: none; } }
@media print {
.pd-card-ui-controls, .pd-card-ui-arrow { display: none !important; }
.pd-card-ui-card, .pd-card-ui-summary, .pd-card-ui-detail { background: #fff !important; color: #000 !important; box-shadow: none !important; }
.pd-card-ui-detail, .pd-card-ui-detail[hidden] { display: block !important; height: auto !important; opacity: 1 !important; overflow: visible !important; }
.pd-card-ui-pack span { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
}

/* Type frame experiment: reserve identical border geometry for every card. */
.pd-card-ui-card > .pd-card-ui-summary { border: 3px solid #111; padding: 5px; box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #888; }
.pd-card-ui-type-角色 > .pd-card-ui-summary { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #80b8ff, inset 0 0 12px 5px rgba(128,184,255,.65); }
.pd-card-ui-type-置物 > .pd-card-ui-summary { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #ffb454, inset 0 0 12px 5px rgba(255,180,84,.65); }
.pd-card-ui-type-行动 > .pd-card-ui-summary { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #ff8585, inset 0 0 12px 5px rgba(255,133,133,.65); }
.pd-card-ui-type-反击 > .pd-card-ui-summary { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #70dd90, inset 0 0 12px 5px rgba(112,221,144,.65); }
.pd-card-ui-type-角色 .pd-card-ui-type { color: #80b8ff; }
.pd-card-ui-type-置物 .pd-card-ui-type { color: #ffb454; }
.pd-card-ui-type-行动 .pd-card-ui-type { color: #ff8585; }
.pd-card-ui-type-反击 .pd-card-ui-type { color: #70dd90; }
.pd-card-ui-card.pd-card-ui-derived > .pd-card-ui-summary { border-color: #ce98ff; outline: 1px solid rgba(206,152,255,.45); outline-offset: 0; }
.pd-card-ui-rarity-C .pd-card-ui-rarity { box-shadow: inset 0 0 6px rgba(112,221,144,.35); }
.pd-card-ui-rarity-B .pd-card-ui-rarity { box-shadow: inset 0 0 6px rgba(128,184,255,.35); }
.pd-card-ui-rarity-A .pd-card-ui-rarity { box-shadow: inset 0 0 6px rgba(206,152,255,.35); }
.pd-card-ui-rarity-S .pd-card-ui-rarity { box-shadow: inset 0 0 6px rgba(255,224,96,.35); }
@media print { .pd-card-ui-card > .pd-card-ui-summary { border-color: #777 !important; } }

/* Attribute badges follow card type, independently of rarity and derivation. */
.pd-card-ui-type-角色 .pd-card-ui-stat-badge { color: #80b8ff; box-shadow: inset 0 0 4px rgba(128,184,255,.38); }
.pd-card-ui-type-置物 .pd-card-ui-stat-badge { color: #ffb454; box-shadow: inset 0 0 4px rgba(255,180,84,.38); }
.pd-card-ui-type-行动 .pd-card-ui-stat-badge { color: #ff8585; box-shadow: inset 0 0 4px rgba(255,133,133,.38); }
.pd-card-ui-type-反击 .pd-card-ui-stat-badge { color: #70dd90; box-shadow: inset 0 0 4px rgba(112,221,144,.38); }

/* Separate full-summary toggle from the independent skill links. */
.pd-card-ui-pack-root .pd-card-ui-summary { position: relative; }
.pd-card-ui-toggle { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; border: 0; border-radius: 0; padding: 0; background: transparent; }
.pd-card-ui-toggle:focus { outline: 2px solid #36c; outline-offset: 2px; }
.pd-card-ui-summary[data-expanded="true"] .pd-card-ui-arrow::before { transform: rotate(90deg); }
.pd-card-ui-summary[data-expanded="true"] .pd-card-ui-arrow { background: rgba(255,255,255,.09); }
.pd-card-ui-has-skills .pd-card-ui-name { gap: 8px; justify-content: space-between; }
.pd-card-ui-skill-icons { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; max-width: 128px; margin-left: auto; text-shadow: none; }
.pd-card-ui-skill-link { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; min-height: 22px; flex: 0 0 18px; background: none; text-decoration: none; }
.pd-card-ui-type-角色 .pd-card-ui-skill-link { color: #80b8ff; }
.pd-card-ui-type-置物 .pd-card-ui-skill-link { color: #ffb454; }
.pd-card-ui-skill-link:hover { background-color: #303030; }
.pd-card-ui-skill-link:focus { outline: 2px solid #36c; outline-offset: 1px; }
@media (max-width: 699px) {
.pd-card-ui-has-skills .pd-card-ui-type { justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.pd-card-ui-skill-icons { max-width: 100%; flex-shrink: 1; }
}
@media print {
.pd-card-ui-toggle, .pd-card-ui-skill-icons { display: none !important; }
.pd-card-ui-card > .pd-card-ui-summary { outline: none !important; }
}

/* Place cards expose IC in the BP slot and movement beside skill icons. */
.pd-card-ui-name { gap: 8px; }
.pd-card-ui-name-text { min-width: 0; flex: 1 1 auto; }
.pd-card-ui-indicators { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; max-width: 160px; flex: 0 0 auto; margin-left: auto; text-shadow: none; }
.pd-card-ui-indicators .pd-card-ui-skill-icons { flex: 0 1 auto; margin-left: 0; }
.pd-card-ui-movement { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; background: #ffb454; color: #000; font-size: 13px; font-weight: bold; text-shadow: none; }
.pd-card-ui-bp { display: grid; grid-template-columns: 24px minmax(0,1fr); }
.pd-card-ui-bp .pd-card-ui-stat-value { justify-self: center; }
.pd-card-ui-ic .pd-card-ui-stat-value { width: 5ch; }
@media (max-width: 699px) {
.pd-card-ui-type { justify-content: flex-end; gap: 6px; }
.pd-card-ui-indicators { max-width: 100%; flex-shrink: 1; }
.pd-card-ui-indicators .pd-card-ui-skill-icons { min-width: 18px; }
}
@media print { .pd-card-ui-indicators { display: none !important; } }

.pd-card-ui-type-角色 .pd-card-ui-arrow { color: #80b8ff; }
.pd-card-ui-type-置物 .pd-card-ui-arrow { color: #ffb454; }
.pd-card-ui-type-行动 .pd-card-ui-arrow { color: #ff8585; }
.pd-card-ui-type-反击 .pd-card-ui-arrow { color: #70dd90; }
.pd-card-ui-summary:hover .pd-card-ui-arrow { background: rgba(255,255,255,.12); }

/* Expanded dossier: scoped to this demo, including structured skills. */
.pd-card-ui-detail { background: #1b2023; color: #e8ecef; border-color: #49525a; }
.pd-card-ui-detail-inner { padding: 16px; border-top: 0; }
.pd-card-ui-detail-layout { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 16px; }
.pd-card-ui-skill-section, .pd-card-ui-info { min-width: 0; }
.pd-card-ui-field { display: block; padding: 0; margin: 0 0 20px; }
.pd-card-ui-field + .pd-card-ui-field { border: 0; }
.pd-card-ui-detail .pd-card-ui-label { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 3px 8px; margin: 0 0 12px; background: #b8c5cf; color: #101416; font-weight: normal; font-size: 1em; line-height: 1.5; overflow-wrap: anywhere; }
.pd-card-ui-rules { line-height: 1.7; overflow-wrap: anywhere; }
.pd-card-ui-detail a { color: #b9d9ff; text-decoration: underline; }
.pd-card-ui-detail a:visited { color: #d6c7ff; }
.pd-card-ui-detail a:focus { outline: 2px solid #fff; outline-offset: 2px; }
.pd-card-ui-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pd-card-ui-tag { display: inline-block; padding: 2px 8px; max-width: 100%; box-sizing: border-box; background: #b8c5cf; color: #101416; overflow-wrap: anywhere; line-height: 1.6; }
.pd-card-ui-detail .pd-card-ui-tag a { color: #101416; }
.pd-card-ui-detail .pd-card-ui-credit { margin-top: 24px; text-align: right; font-size: .85em; overflow-wrap: anywhere; color: #b8c5cf; }
.pd-card-ui-rules > .pd-skill { display: grid; grid-template-columns: minmax(0,24fr) minmax(0,18fr) minmax(0,58fr); grid-template-rows: auto 1fr; margin: 0; line-height: 1.7; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title { display: contents; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-name { grid-column: 1; grid-row: 1 / 3; padding-right: 10px; font-weight: bold; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type { grid-column: 2; grid-row: 1; padding: 0 7px; border-left: 1px solid #566675; font-weight: normal; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { grid-column: 2; grid-row: 2; padding: 5px 7px 0; border-left: 1px solid #566675; margin: 0; font-size: .9em; font-weight: normal; }
.pd-card-ui-rules > .pd-skill > .pd-skill-description { grid-column: 3; grid-row: 1 / 3; padding-left: 12px; border-left: 1px solid #566675; }
.pd-card-ui-detail .pd-skill:target, .pd-card-ui-detail .pd-skill:focus { outline-color: #e8ecef; }
.pd-card-ui-detail .pd-skill-kb { font-family: monospace; }
.pd-card-ui-type-角色 .pd-card-ui-detail .pd-card-ui-label, .pd-card-ui-type-角色 .pd-card-ui-tag { background: #80b8ff; }
.pd-card-ui-type-角色 .pd-card-ui-credit, .pd-card-ui-type-角色 .pd-card-ui-detail .pd-card-ui-cost-badge { color: #80b8ff; }
.pd-card-ui-type-角色 .pd-card-ui-rules > .pd-skill > .pd-skill-description, .pd-card-ui-type-角色 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type, .pd-card-ui-type-角色 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { border-color: #4b6582; }
.pd-card-ui-type-置物 .pd-card-ui-detail .pd-card-ui-label, .pd-card-ui-type-置物 .pd-card-ui-tag { background: #ffb454; }
.pd-card-ui-type-置物 .pd-card-ui-credit, .pd-card-ui-type-置物 .pd-card-ui-detail .pd-card-ui-cost-badge { color: #ffb454; }
.pd-card-ui-type-置物 .pd-card-ui-rules > .pd-skill > .pd-skill-description, .pd-card-ui-type-置物 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type, .pd-card-ui-type-置物 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { border-color: #806442; }
.pd-card-ui-type-行动 .pd-card-ui-detail .pd-card-ui-label, .pd-card-ui-type-行动 .pd-card-ui-tag { background: #ff8585; }
.pd-card-ui-type-行动 .pd-card-ui-credit, .pd-card-ui-type-行动 .pd-card-ui-detail .pd-card-ui-cost-badge { color: #ff8585; }
.pd-card-ui-type-行动 .pd-card-ui-rules > .pd-skill > .pd-skill-description, .pd-card-ui-type-行动 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type, .pd-card-ui-type-行动 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { border-color: #805151; }
.pd-card-ui-type-反击 .pd-card-ui-detail .pd-card-ui-label, .pd-card-ui-type-反击 .pd-card-ui-tag { background: #70dd90; }
.pd-card-ui-type-反击 .pd-card-ui-credit, .pd-card-ui-type-反击 .pd-card-ui-detail .pd-card-ui-cost-badge { color: #70dd90; }
.pd-card-ui-type-反击 .pd-card-ui-rules > .pd-skill > .pd-skill-description, .pd-card-ui-type-反击 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type, .pd-card-ui-type-反击 .pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { border-color: #467453; }

.pd-card-ui-detail .pd-card-ui-cost-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid currentColor; font-size: 11px; margin-right: 4px; }
@media (max-width: 899px) {
.pd-card-ui-detail-layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 699px) {
.pd-card-ui-detail-inner { padding: 14px 12px; }
.pd-card-ui-rules > .pd-skill { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-name { grid-column: 1; grid-row: 1 / 3; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-type { grid-column: 2; grid-row: 1; padding: 0; border: 0; }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-cost { grid-column: 2; grid-row: 2; padding: 4px 0 0; border: 0; }
.pd-card-ui-rules > .pd-skill > .pd-skill-description { grid-column: 1 / 3; grid-row: 3; padding: 8px 0 0; border: 0; }
}
@media print {
.pd-card-ui-detail-layout { display: block; }
.pd-card-ui-detail *, .pd-card-ui-detail .pd-card-ui-tag a { color: #000 !important; background: transparent !important; text-shadow: none !important; box-shadow: none !important; }
.pd-card-ui-detail .pd-card-ui-label { border-bottom: 1px solid #777; }
.pd-card-ui-detail .pd-skill { outline: none !important; }
}

/* Dossier depth and typographic hierarchy. Static lighting, clear reading planes. */
.pd-card-ui-detail { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -24px 48px rgba(0,0,0,.18); }
.pd-card-ui-detail-inner { padding: 20px 18px 16px; }
.pd-card-ui-info { border-left: 1px solid rgba(210,225,235,.24); padding-left: 16px; }
.pd-card-ui-info:empty { border: 0; padding: 0; }
.pd-card-ui-detail .pd-card-ui-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; padding: 4px 10px; margin-bottom: 16px; line-height: 1.45; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pd-card-ui-label-main { font-size: 1.22em; font-weight: bold; letter-spacing: .06em; }
.pd-card-ui-label-en { font-size: .74em; font-weight: bold; letter-spacing: .04em; }
.pd-card-ui-field { margin-bottom: 0; }
.pd-card-ui-field + .pd-card-ui-field { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(210,225,235,.24); }
.pd-card-ui-rules > .pd-skill ~ .pd-skill-separator { display: block; height: 0; margin: 10px 0; border-top: 1px solid rgba(210,225,235,.16); }
.pd-card-ui-rules > .pd-skill > .pd-skill-title > .pd-skill-name { font-size: 1.05em; color: #fff; }
.pd-card-ui-tag { border: 1px solid rgba(255,255,255,.28); font-size: .92em; }
.pd-card-ui-detail .pd-card-ui-credit { border-top: 1px solid rgba(210,225,235,.24); padding-top: 12px; margin-top: 22px; letter-spacing: .025em; }
.pd-card-ui-type-角色 .pd-card-ui-detail { background-image: radial-gradient(ellipse at 0% 0%, rgba(128,184,255,.18) 0%, rgba(128,184,255,0) 62%), linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.12)); background-size: 100% 360px, 100% 100%; background-repeat: no-repeat; }
.pd-card-ui-type-角色 .pd-card-ui-detail .pd-card-ui-label { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(128,184,255,.13); }
.pd-card-ui-type-角色 .pd-card-ui-tag { background: rgba(128,184,255,.14); border-color: rgba(128,184,255,.48); color: #e8ecef; }
.pd-card-ui-type-置物 .pd-card-ui-detail { background-image: radial-gradient(ellipse at 0% 0%, rgba(255,180,84,.18) 0%, rgba(255,180,84,0) 62%), linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.12)); background-size: 100% 360px, 100% 100%; background-repeat: no-repeat; }
.pd-card-ui-type-置物 .pd-card-ui-detail .pd-card-ui-label { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,180,84,.13); }
.pd-card-ui-type-置物 .pd-card-ui-tag { background: rgba(255,180,84,.14); border-color: rgba(255,180,84,.48); color: #e8ecef; }
.pd-card-ui-type-行动 .pd-card-ui-detail { background-image: radial-gradient(ellipse at 0% 0%, rgba(255,133,133,.18) 0%, rgba(255,133,133,0) 62%), linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.12)); background-size: 100% 360px, 100% 100%; background-repeat: no-repeat; }
.pd-card-ui-type-行动 .pd-card-ui-detail .pd-card-ui-label { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,133,133,.13); }
.pd-card-ui-type-行动 .pd-card-ui-tag { background: rgba(255,133,133,.14); border-color: rgba(255,133,133,.48); color: #e8ecef; }
.pd-card-ui-type-反击 .pd-card-ui-detail { background-image: radial-gradient(ellipse at 0% 0%, rgba(112,221,144,.18) 0%, rgba(112,221,144,0) 62%), linear-gradient(135deg, rgba(255,255,255,.025), rgba(0,0,0,.12)); background-size: 100% 360px, 100% 100%; background-repeat: no-repeat; }
.pd-card-ui-type-反击 .pd-card-ui-detail .pd-card-ui-label { box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(112,221,144,.13); }
.pd-card-ui-type-反击 .pd-card-ui-tag { background: rgba(112,221,144,.14); border-color: rgba(112,221,144,.48); color: #e8ecef; }

.pd-card-ui-detail .pd-card-ui-tag a { color: #e8ecef; }
@media (max-width: 899px) {
.pd-card-ui-info { border-left: 0; border-top: 1px solid rgba(210,225,235,.24); padding: 18px 0 0; }
}
@media (max-width: 699px) {
.pd-card-ui-detail-inner { padding: 16px 12px 12px; }
.pd-card-ui-meta { row-gap: 0; padding: 3px 0 0; }
.pd-card-ui-meta::before { content: ""; grid-column: 1 / 4; grid-row: 2; height: 1px; margin: 4px 0; background: #686868; }
.pd-card-ui-meta .pd-card-ui-ep, .pd-card-ui-meta .pd-card-ui-bp, .pd-card-ui-meta .pd-card-ui-kb { grid-row: 3; padding-top: 3px; padding-bottom: 5px; }
}
@media print {
.pd-card-ui-card .pd-card-ui-detail { background-image: none !important; box-shadow: none !important; }
.pd-card-ui-info { padding-left: 0; border-left: 0; }
.pd-card-ui-detail .pd-card-ui-tag { background: transparent !important; color: #000 !important; border-color: #999; }
}

/* Pack toolbar and interaction motion. */
.pd-card-ui-controls { box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 8px; background: #1b2023; border: 1px solid #49525a; color: #e8ecef; border-radius: 0; }
.pd-card-ui-sort-controls, .pd-card-ui-bulk-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pd-card-ui-sort-controls label { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.pd-card-ui-controls select, .pd-card-ui-controls button { min-height: 36px; border-radius: 0; background: #262d32; border-color: #64717a; color: #e8ecef; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.pd-card-ui-controls select { min-width: 0; }
.pd-card-ui-controls button:hover:not(:disabled), .pd-card-ui-controls select:hover { background: #36414a; border-color: #d3e3ee; }
.pd-card-ui-controls button:focus, .pd-card-ui-controls select:focus { outline: 2px solid #d3e3ee; outline-offset: 2px; background: #36414a; }
.pd-card-ui-controls button:active:not(:disabled) { background: #141b20; }
.pd-card-ui-controls button:disabled { color: #7f8b94; border-color: #39434a; background: #20262a; }
.pd-card-ui-summary { transition: background-color 160ms ease, box-shadow 160ms ease; }
.pd-card-ui-summary[data-expanded="true"] { background-color: #202020; }
.pd-card-ui-arrow { transition: background-color 160ms ease, box-shadow 160ms ease; }
.pd-card-ui-arrow::before { transition-duration: 300ms; }
.pd-card-ui-summary[data-expanded="false"] .pd-card-ui-arrow::before { transition-duration: 200ms; }

@media (max-width: 699px) {
.pd-card-ui-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.pd-card-ui-sort-controls { justify-content: space-between; }
.pd-card-ui-bulk-controls { border-top: 1px solid #49525a; padding-top: 8px; }
.pd-card-ui-bulk-controls button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
.pd-card-ui-controls select, .pd-card-ui-controls button, .pd-card-ui-summary, .pd-card-ui-arrow, .pd-card-ui-arrow::before { transition: none !important; }
}
@media print { .pd-card-ui-controls { display: none !important; } }

.pd-card-ui-type-角色 > .pd-card-ui-summary[data-expanded="true"] { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #80b8ff, inset 0 0 12px 5px rgba(128,184,255,.8); }

.pd-card-ui-type-置物 > .pd-card-ui-summary[data-expanded="true"] { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #ffb454, inset 0 0 12px 5px rgba(255,180,84,.8); }

.pd-card-ui-type-行动 > .pd-card-ui-summary[data-expanded="true"] { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #ff8585, inset 0 0 12px 5px rgba(255,133,133,.8); }

.pd-card-ui-type-反击 > .pd-card-ui-summary[data-expanded="true"] { box-shadow: inset 0 0 0 2px #111, inset 0 0 0 5px #70dd90, inset 0 0 12px 5px rgba(112,221,144,.8); }

/* Omit an absent information column at template render time. */
.pd-card-ui-detail-layout.pd-card-ui-detail-solo { grid-template-columns: minmax(0,1fr); }

/* One selected skill; focus and URL target must not leave independent frames. */
.pd-card-ui-detail .pd-skill:target, .pd-card-ui-detail .pd-skill:focus { outline: none; }
.pd-card-ui-rules > .pd-skill { padding: 6px; }
.pd-card-ui-detail .pd-skill.pd-card-ui-skill-active { outline: 1px solid rgba(232,236,239,.72); outline-offset: -3px; }
@media print { .pd-card-ui-detail .pd-skill.pd-card-ui-skill-active { outline: none !important; } }

.pd-card-ui-info-only { grid-template-columns: minmax(0,1fr); }
.pd-card-ui-info-only > .pd-card-ui-info { border: 0; padding: 0; }
.pd-card-ui-list > p:empty { display: none; }

模板:PD卡包/styles.css - 版本历史