.pt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.pt-header h2 { margin: .15rem 0 .3rem; }
.pt-header p, .pt-scroll-hint { margin: 0; color: var(--text-muted); }
.pt-kicker { color: var(--brand-blue-light); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pt-count { min-width: 120px; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; background: rgba(255,255,255,.025); }
.pt-count strong, .pt-count span { display: block; }
.pt-count strong { font-size: 1.35rem; }
.pt-count span { color: var(--text-muted); font-size: .78rem; }
.pt-controls { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(180px, 1fr) auto auto; gap: .65rem; align-items: end; margin-bottom: .85rem; }
.pt-legend { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin-bottom: .85rem; }
.pt-legend button { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .78rem; }
.pt-legend button::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--category-color); }
.pt-legend button.is-active { color: var(--text); font-weight: 700; }
.pt-grid-scroll { overflow-x: auto; padding: .35rem 0 .7rem; scrollbar-color: var(--border) transparent; }
.periodic-grid, .pt-group-labels { display: grid; grid-template-columns: repeat(18, minmax(48px, 1fr)); gap: 4px; min-width: 930px; }
.pt-group-labels { margin-bottom: 4px; color: var(--text-muted); font-size: .7rem; text-align: center; }
.pt-group-labels span { padding: .2rem; }
.pt-element, .pt-empty { min-height: 58px; }
.pt-empty { visibility: hidden; }
.pt-element { position: relative; padding: .25rem; border: 1px solid color-mix(in srgb, var(--category-color) 65%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--category-color) 18%, transparent); color: var(--text); cursor: pointer; text-align: left; transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease; }
.pt-element:hover, .pt-element:focus-visible { z-index: 2; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.pt-element.is-dimmed { opacity: .12; }
.pt-element.is-match { box-shadow: 0 0 0 2px var(--brand-blue-light); }
.pt-element.is-selected { outline: 2px solid var(--text); outline-offset: 1px; }
.pt-number { display: block; font-size: .62rem; opacity: .72; }
.pt-symbol { display: block; font-size: 1rem; font-weight: 800; line-height: 1.1; }
.pt-name { display: block; overflow: hidden; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.pt-scroll-hint { margin-top: .3rem; font-size: .78rem; }
.pt-detail { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.pt-element-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; border-radius: var(--radius); background: color-mix(in srgb, var(--category-color) 22%, transparent); }
.pt-element-mark span { font-size: .85rem; }
.pt-element-mark strong { font-size: 3.2rem; line-height: 1; }
.pt-detail h3 { margin: .15rem 0 .7rem; font-size: 1.5rem; }
.pt-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.pt-facts div { padding: .55rem .65rem; border-left: 2px solid var(--category-color); background: rgba(148,163,184,.06); }
.pt-facts dt { color: var(--text-muted); font-size: .72rem; }
.pt-facts dd { margin: .15rem 0 0; font-weight: 700; }
.pt-detail-actions, .pt-comparison-head { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.pt-comparison { margin-top: 1rem; }
.pt-comparison-head { justify-content: space-between; margin-bottom: .5rem; }
.pt-comparison-head h3 { margin: 0; }
.pt-learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.pt-learn-card, .pt-guide { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.pt-learn-card h3 { margin: .15rem 0 .8rem; }
.pt-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pt-section-head select { min-width: 180px; }
.pt-quiz-question { display: grid; gap: .35rem; min-height: 86px; margin-bottom: .75rem; padding: .75rem; border-left: 3px solid var(--brand-blue); background: rgba(0,174,239,.07); }
.pt-quiz-question span { color: var(--text-muted); font-size: .78rem; }
.pt-quiz-question strong { font-size: 1.1rem; }
.pt-quiz-answer { display: flex; gap: .55rem; margin-top: .35rem; }
.pt-quiz-answer .input-full { flex: 1 1 160px; }
.pt-quiz-feedback { min-height: 1.4rem; margin: .65rem 0; font-weight: 700; }
.pt-quiz-feedback.is-correct { color: var(--success); }
.pt-quiz-feedback.is-error { color: var(--error); }
.pt-quiz-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; }
.pt-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.pt-tips article { padding: .65rem; border-left: 2px solid var(--brand-blue); background: rgba(148,163,184,.06); }
.pt-tips p { margin: .25rem 0 0; color: var(--text-muted); font-size: .82rem; }
.pt-guide { margin-top: 1rem; }
.pt-guide summary { cursor: pointer; font-weight: 700; }
.pt-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-top: .85rem; }
.pt-guide-grid div { display: grid; gap: .25rem; }
.pt-guide-grid span { color: var(--text-muted); font-size: .82rem; }

@media (max-width: 760px) {
    .pt-controls { grid-template-columns: 1fr 1fr; }
    .pt-detail { grid-template-columns: 100px 1fr; }
    .pt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-learning-grid { grid-template-columns: 1fr; }
    .pt-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .pt-header { flex-direction: column; }
    .pt-count { width: 100%; }
    .pt-controls { grid-template-columns: 1fr; }
    .pt-detail { grid-template-columns: 1fr; }
    .pt-element-mark { min-height: 100px; }
    .pt-section-head { flex-direction: column; }
    .pt-section-head label, .pt-section-head select { width: 100%; }
    .pt-quiz-answer { flex-wrap: wrap; }
    .pt-tips, .pt-guide-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-element { transition: none; }
}