/* 已确认手机样板的共用变量。首批只在 .pn-design 内启用。 */
:root {
  --pn-paper: #f7f2e7; --pn-ink: #181b26; --pn-blue: #1746b9; --pn-purple: #8761bb;
  --pn-coral: #d96156; --pn-muted: #5d5751; --pn-line: #ddd4c4; --pn-error: #b13a30;
  --pn-ease: cubic-bezier(.2,.8,.2,1); --pn-blue-edge: #0b2c79;
  --pn-surface: #fffdf7; --pn-field-line: #8a7d69;
  --pn-control-line: #7e6d53; --pn-control-selected-line: #76588a;
}
.pn-design {
  --pn-gutter: 22px;
  font-family: "Bricolage Grotesque", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  color: var(--pn-ink); background: var(--pn-paper); font-size: 16px; line-height: 1.65;
}
.app-shell.pn-design { width: 100%; max-width: 480px; margin: 0 auto; min-height: 100dvh; box-shadow: none; overflow: visible; }
.pn-design > .page { padding: 0 var(--pn-gutter) 36px; max-width: none; min-height: 100dvh; background: transparent; }
.pn-design.has-bottom-nav > .page { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
.pn-design .page-header { display: flex; position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; min-height: 72px; padding: 12px 0; gap: 12px; margin: 0; background: transparent; backdrop-filter: none; border-bottom: 1px solid var(--pn-line); }
.pn-design .page-header h1 { font-size: 16px; font-weight: 600; }
.pn-design button, .pn-design a, .pn-design input, .pn-design select, .pn-design textarea { -webkit-tap-highlight-color: transparent; }
.pn-design :focus-visible { outline: 3px solid var(--pn-blue); outline-offset: 4px; }
.pn-design h1, .pn-design h2, .pn-design h3, .pn-design p, .pn-design figure { margin-top: 0; }
.pn-design h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.03em; }
.pn-design .btn { background: var(--pn-blue); color: white; min-height: 54px; border-radius: 7px; padding: 12px 20px; box-shadow: 0 5px 0 var(--pn-blue-edge), 0 8px 12px #181b2615; border: 1px solid var(--pn-blue); font-weight: 700; transform: translateY(0); transition: transform 110ms var(--pn-ease),box-shadow 110ms var(--pn-ease); }
.pn-design .btn.secondary { background: var(--pn-paper); color: var(--pn-ink); border-color: var(--pn-line); box-shadow: 0 4px 0 #ded4c1; }
.pn-design .btn.ghost { background: transparent; color: var(--pn-blue); box-shadow: none; border-color: transparent; }
.pn-design .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--pn-blue-edge); }
.pn-design .btn:disabled { opacity: 1; background: #ded8cb; border-color: #ded8cb; color: #4f4c46; box-shadow: 0 3px 0 #c9bfad; cursor: wait; }
.pn-design .icon-button { width: 44px; height: 44px; min-width: 44px; background: transparent; color: var(--pn-ink); border: 1px solid var(--pn-line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pn-design .eyebrow { color: var(--pn-muted); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.pn-design .field { gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.pn-design .field input, .pn-design .field select, .pn-design .field textarea { font-size: 16px; font-weight: 400; padding: 14px; width: 100%; min-height: 52px; color: var(--pn-ink); border: 1px solid var(--pn-field-line); border-radius: 8px; background: var(--pn-surface); }
.pn-design .field textarea { min-height: 160px; line-height: 1.7; resize: vertical; }
.pn-design .field :is(input,select,textarea):focus { outline: 2px solid var(--pn-blue); outline-offset: 1px; border-color: var(--pn-blue); }
.pn-design .field-error { color: var(--pn-error); font-size: 14px; overflow-wrap: anywhere; }
.pn-design .notice { background: #eee6d4; color: var(--pn-ink); border: 0; border-radius: 8px; padding: 14px; font-size: 14px; align-items: flex-start; }
.pn-design .chip-list { gap: 8px; }
.pn-design .chip { border: 1px solid var(--pn-line); border-radius: 7px; padding: 8px 12px; min-height: 44px; background: var(--pn-surface); color: var(--pn-ink); }
.pn-design .chip.is-active { color: white; background: var(--pn-blue); border-color: var(--pn-blue); box-shadow: 0 3px 0 var(--pn-blue-edge); }
.pn-design .status-panel { background: transparent; border: 1px dashed var(--pn-field-line); border-radius: 10px; padding: 24px 18px; overflow-wrap: anywhere; }
.pn-design .status-panel h2 { font-size: 18px; }
.pn-design .status-panel p { color: var(--pn-muted); font-size: 14px; }
.pn-design .card { background: var(--pn-surface); border-radius: 10px; }
.pn-design .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; min-height: 76px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--pn-line); border-radius: 0; background: var(--pn-paper); box-shadow: none; }
.pn-design .bottom-nav .nav-item { gap: 3px; min-height: 54px; font-size: 12px; border-radius: 0; position: relative; color: var(--pn-muted); }
.pn-design .bottom-nav .nav-item.is-active { color: var(--pn-ink); background: #d8caec; clip-path: polygon(8% 3%,87% 0,100% 87%,12% 100%,0 20%); box-shadow: inset 0 -5px 0 #baa8d1; }
.pn-design .bottom-nav i { font-size: 22px; }
.pn-home-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 12px; gap: 12px; }
.pn-wordmark { font-family: 'Bricolage Grotesque',sans-serif; font-size: 26px; line-height: .95; font-weight: 800; letter-spacing: -.08em; margin: 0; }
.pn-home-header > div:last-child { display: flex; gap: 8px; }
.pn-home-kicker { font-size: 12px; color: var(--pn-muted); margin: 10px 0 24px; overflow-wrap: anywhere; }
.pn-home-grid { display: grid; gap: 32px; }
.pn-home-stage { position: relative; }
.pn-design .pn-home-title { position: relative; z-index: 1; max-width: 10em; margin: 0 0 -16px; font-size: clamp(30px,8.5vw,42px); line-height: 1.16; letter-spacing: -.06em; }
.pn-home-stage > p { position: relative; z-index: 1; color: var(--pn-muted); margin-top: 28px; margin-bottom: 8px; font-size: 14px; }
.pn-home-art { width: 100%; height: auto; margin: 0; }
.pn-practice-link { position: relative; margin: -22px 6px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pn-practice-link strong { display: block; font-size: 17px; overflow-wrap: anywhere; }
.pn-practice-link small { display: block; font-weight: 400; font-size: 13px; }
.pn-practice-link > i { flex-shrink: 0; font-size: 23px; }
.pn-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.pn-section-heading h2 { margin: 0; font-size: 22px; }
.pn-section-heading > a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.pn-design .space-between > a[href], .pn-design .card.stack > a[href]:not(.btn), .pn-home-feed > a[href]:not(.pn-line-link) { display: inline-flex; align-items: center; min-height: 44px; }
.pn-grades { display: grid; gap: 8px; }
.pn-grade { position: relative; display: block; padding: 0; width: 100%; background: transparent; text-align: left; min-height: 80px; transition: transform 230ms var(--pn-ease); border-radius: 7px; }
.pn-grade img { width: 100%; height: auto; }
.pn-grade-copy { position: absolute; inset: 33% 15% 24% 11%; display: flex; gap: 16px; align-items: center; color: #181b26; font-size: 21px; font-weight: 700; line-height: 1; }
.pn-grade-copy strong { font-family: 'Bricolage Grotesque',sans-serif; font-size: 24px; }
.pn-grade-copy i { margin-left: 0; font-size: 18px; }
.pn-grade.is-selected { transform: translateX(-3px); }
.pn-grade:active { transform: translate(0,3px); }
.pn-grade-progress { border-left: 3px solid var(--pn-blue); padding: 8px 0 8px 14px; margin: 12px 0 24px; }
.pn-grade-progress p { margin: 0; font-size: 14px; color: var(--pn-muted); }
.pn-grade-progress strong { color: var(--pn-ink); }
.pn-meter { height: 6px; background: #e3d9c7; border-radius: 3px; margin: 12px 0 8px; overflow: hidden; }
.pn-meter span { display: block; height: 100%; background: var(--pn-blue); border-radius: inherit; transition: width 230ms var(--pn-ease); }
.pn-entry-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.pn-entry { position: relative; padding: 16px; border: 1px solid #c8b6a0; border-radius: 5px; background: #ead6d0; box-shadow: 4px 5px 0 #c98980; }
.pn-entry:last-child { background: #f3df87; box-shadow: 4px 5px 0 #c5a746; }
.pn-entry strong { display: block; font-size: 20px; margin-bottom: 6px; }
.pn-entry p { font-size: 13px; margin: 0 0 12px; }
.pn-entry i { display: block; text-align: right; }
.pn-home-feed { margin-top: 40px; }
.pn-feed-grid { display: grid; gap: 16px; }
.pn-feed-item { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; border-top: 1px solid var(--pn-line); padding: 16px 0; }
.pn-feed-item > img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; }
.pn-feed-item p { font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 8px; }
.pn-feed-item span { color: var(--pn-muted); font-size: 12px; }
.pn-home-public { display: grid; gap: 24px; margin-top: 32px; }
.pn-home-public .pn-line-link { padding: 16px 0; }
.pn-legal-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; color: var(--pn-muted); font-size: 12px; }
.pn-legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; }
:is(.pn-detail-title,.pn2-detail-title) { position: relative; padding: 28px 104px 20px 0; min-height: 140px; overflow-wrap: anywhere; }
:is(.pn-detail-title,.pn2-detail-title) h2 { font-size: 32px; line-height: 1.15; margin-bottom: 10px; }
:is(.pn-detail-title,.pn2-detail-title) p { font-size: 13px; color: var(--pn-muted); margin-bottom: 8px; }
.pn-tabs { display: flex; gap: 8px; padding: 5px; background: #e8dfcf; border-radius: 8px; margin: 24px 0; }
.pn-tabs > button { flex: 1; background: transparent; padding: 10px 12px; min-height: 44px; border-radius: 5px; font-size: 15px; transition: background 230ms var(--pn-ease),box-shadow 230ms var(--pn-ease); }
.pn-tabs > button[aria-selected=true] { background: var(--pn-paper); color: var(--pn-blue); font-weight: 700; box-shadow: 0 3px 0 #cabc9f; }
.pn-line-link { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--pn-line); text-align: left; background: transparent; width: 100%; padding: 12px 0; }
.pn-line-link > span { flex: 1; min-width: 0; }
.pn-line-link strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.pn-line-link small { font-size: 12px; color: var(--pn-muted); }
.pn-line-link > i { flex-shrink: 0; font-size: 22px; }
.pn2-post-label { position: relative; padding: 16px 0 22px; min-height: 100px; }
.pn2-post-label > .eyebrow { padding-right: 116px; }
.pn2-post-label h2 { font-size: 26px; margin: 0; overflow-wrap: anywhere; }
.pn2-post-gallery { margin: 0 0 24px; display: grid; gap: 10px; }
.pn2-post-gallery img { width: 100%; max-height: 600px; object-fit: contain; border-radius: 8px; background: #e9e0d0; }
.pn-form-page { max-width: 640px; margin: auto; }
.pn-form-page form { display: grid; gap: 24px; }
.pn-form-page .upload-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.pn-form-page .upload-tile { min-width: 0; width: 100%; min-height: 110px; border-radius: 8px; border: 1px dashed var(--pn-field-line); background: #eee6d4; padding: 10px; }
.pn-form-page .upload-tile img { width: 100%; height: 90px; object-fit: cover; }
.pn-form-page .upload-tile button { min-height: 44px; font-size: 13px; background: transparent; color: var(--pn-blue); }
.pn-form-page .upload-tile:focus-within { outline: 3px solid var(--pn-blue); outline-offset: 3px; }
.pn-form-page .upload-tile input { display: block; width: 100%; height: 44px; font-size: 12px; position: static; opacity: 1; }
.pn-form-page .upload-tile .meta { font-size: 12px; }
.pn-form-page h3 { margin-bottom: 8px; font-size: 16px; }
.pn-char-count { color: var(--pn-muted); font-size: 12px; text-align: right; margin: -16px 0 0; }
.pn-sheet-overlay { position: fixed; z-index: 1500; inset: 0; height: 100dvh; display: flex; align-items: flex-end; justify-content: center; background: #181b266b; padding: 20px 0 0; animation: pn-overlay-in 280ms var(--pn-ease); }
.pn-sheet { width: min(100%,480px); display: flex; flex-direction: column; max-height: 94%; background: var(--pn-paper); border-radius: 20px 20px 0 0; box-shadow: 0 -3px 30px #181b2626; animation: pn-sheet-in 280ms var(--pn-ease); transition: transform 290ms var(--pn-ease); padding-bottom: env(safe-area-inset-bottom); }
.pn-sheet-handle { display: grid; place-items: center; min-height: 44px; flex-shrink: 0; touch-action: none; cursor: grab; }
.pn-sheet-handle > span { width: 38px; height: 4px; border-radius: 2px; background: #b8ae9e; }
.pn-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 16px; border-bottom: 1px solid var(--pn-line); }
.pn-sheet-head h2 { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
.pn-sheet-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 24px 22px 30px; }
.pn-sheet-body form { display: grid; gap: 20px; }
.pn-sheet-body .stack { gap: 16px; }
.pn-sheet.is-dragging { transition: none; animation: none; }
.pn-sheet-overlay.is-closing { animation: pn-overlay-out 290ms var(--pn-ease) forwards; pointer-events: none; }
.pn-sheet-overlay.is-closing .pn-sheet { animation: pn-sheet-out 290ms var(--pn-ease) forwards; }
@keyframes pn-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pn-sheet-out { to { transform: translateY(100%); } }
@keyframes pn-overlay-in { from { background-color: #181b2600; } }
@keyframes pn-overlay-out { to { background-color: #181b2600; } }
@media (max-width: 365px) { .pn-design { --pn-gutter: 18px; } .pn-grade-copy { font-size: 19px; gap: 12px; } .pn-grade-copy strong { font-size: 22px; } .pn-wordmark { font-size: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .pn-design *, .pn-design *::before, .pn-design *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 首批详情保留既有请求与内容结构，展示复用同一组变量。 */
.pn-design .pn2-skill-page, .pn-design .pn2-post-page { max-width: 740px; margin: auto; }
.pn-design .pn2-skill-stats { display: flex; border-top: 1px solid var(--pn-line); border-bottom: 1px solid var(--pn-line); padding: 16px 0; margin-bottom: 24px; }
.pn-design .pn2-skill-stats > span { flex: 1; font-size: 12px; color: var(--pn-muted); }
.pn-design .pn2-skill-stats strong { display: block; color: var(--pn-ink); font-family: 'Bricolage Grotesque',sans-serif; font-size: 26px; }
.pn-design .pn2-skill-description { font-size: 16px; line-height: 1.8; }
.pn-design :is(.pn2-progress-card,.pn2-skill-links,.pn2-skill-resources) { padding: 24px 0; border-bottom: 1px solid var(--pn-line); }
.pn-design .pn2-card-heading { display: flex; justify-content: space-between; gap: 12px; }
.pn-design .pn2-card-heading h2 { font-size: 22px; }
.pn-design .pn2-card-heading > span { font-size: 28px; }
.pn-design .pn2-progress-track { display: flex; gap: 10px; }
.pn-design .pn2-progress-node { flex: 1; text-align: center; background: transparent; border: 1px solid var(--pn-line); padding: 14px 4px; border-radius: 7px; }
.pn-design .pn2-progress-node > i { display: block; font-family: 'Bricolage Grotesque',sans-serif; font-style: normal; font-size: 22px; color: var(--pn-muted); }
.pn-design .pn2-progress-node span { display: block; }
.pn-design .pn2-progress-node strong { display: block; font-size: 15px; }
.pn-design .pn2-progress-node small { display: block; color: var(--pn-muted); font-size: 12px; }
.pn-design .pn2-progress-node.is-active { background: #e2d9ed; border-color: #aa93c6; box-shadow: 0 3px 0 #c1abd8; }
.pn-design .pn2-node-detail { padding: 18px 0 0; min-height: 90px; font-size: 14px; }
.pn-design .pn2-skill-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pn-design .pn2-skill-link-grid > button { padding: 16px; position: relative; border: 1px solid var(--pn-line); border-radius: 7px; background: #efe8d9; text-align: left; min-width: 0; }
.pn-design .pn2-skill-link-grid :is(small,strong) { display: block; overflow-wrap: anywhere; }
.pn-design .pn2-skill-link-grid small { font-size: 12px; color: var(--pn-muted); margin: 12px 0 8px; }
.pn-design .pn2-skill-link-grid strong { font-size: 15px; }
.pn-design .pn2-skill-link-grid > button > i { position: absolute; right: 12px; top: 18px; }
.pn-design .pn2-skill-resources > button { display: flex; align-items: center; width: 100%; padding: 16px 0; gap: 12px; background: transparent; border-bottom: 1px solid var(--pn-line); text-align: left; }
.pn-design .pn2-skill-resources > button > span { flex: 1; min-width: 0; }
.pn-design .pn2-skill-resources strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.pn-design .pn2-skill-resources small { font-size: 12px; color: var(--pn-muted); }
.pn-design .pn2-fold-card { border-bottom: 1px solid var(--pn-line); }
.pn-design .pn2-fold-card summary { display: flex; gap: 12px; padding: 16px 0; min-height: 56px; cursor: pointer; }
.pn-design .pn2-fold-card summary > i { margin-left: auto; }
.pn-design .pn2-fold-card p { font-size: 14px; padding: 12px 0; }
.pn-design .pn2-safety-note { display: flex; gap: 12px; padding: 18px; background: #eee6d4; margin-top: 20px; border-radius: 8px; }
.pn-design .pn2-safety-note p { margin: 0; font-size: 14px; }
.pn-design .pn2-safety-note span { display: block; font-size: 13px; }
.pn-design .pn2-status-card { display: flex; justify-content: space-between; gap: 20px; padding: 20px; margin-top: 24px; background: #eee5d2; border-left: 4px solid var(--pn-blue); }
.pn-design .pn2-status-card > div { min-width: 0; }
.pn-design .pn2-status-card h2 { font-size: 22px; }
.pn-design .pn2-status-card p:last-child { font-size: 13px; color: var(--pn-muted); margin: 0; }
.pn-design .pn2-status-card > span { font-size: 28px; }
.pn-design .pn2-status-card a { min-height: 44px; display: inline-flex; align-items: center; color: var(--pn-blue); font-size: 14px; }
.pn-design .pn2-safe-action { position: sticky; bottom: 12px; max-width: 740px; margin: 24px auto 0; display: flex; gap: 12px; padding: 12px; background: var(--pn-paper); border: 1px solid var(--pn-line); border-radius: 10px; box-shadow: 0 5px 0 #e1d7c4; z-index: 5; }
.pn-design .pn2-safe-action > button { flex: 1; }
.pn-design .pn2-post-author { display: flex; width: 100%; align-items: center; gap: 12px; padding: 24px 0; background: transparent; text-align: left; }
.pn-design .pn2-post-author > img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.pn-design .pn2-post-author > span:nth-child(2) { flex: 1; min-width: 0; }
.pn-design .pn2-post-author strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.pn-design .pn2-post-author small { display: block; font-size: 12px; color: var(--pn-muted); }
.pn-design .pn2-author-arrow { font-size: 22px; }
.pn-design .pn2-post-copy > p:not(.pn2-post-kicker) { font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.pn-design .pn2-post-kicker { font-size: 12px; color: var(--pn-muted); margin: 16px 0; }
.pn-design .pn2-post-links { display: grid; gap: 8px; margin: 24px 0; }
.pn-design .pn2-post-links > button { width: 100%; min-height: 52px; padding: 12px; display: flex; gap: 8px; align-items: center; text-align: left; background: #ebe1cf; font-size: 14px; overflow-wrap: anywhere; }
.pn-design .pn2-post-links > button > i:last-child { margin-left: auto; flex-shrink: 0; }
.pn-design .pn2-comments { padding-top: 28px; }
.pn-design .pn2-section-head { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.pn-design .pn2-section-head h2 { font-size: 24px; margin: 0 0 20px; }
.pn-design .pn2-section-head p { font-size: 12px; color: var(--pn-muted); margin-bottom: 6px; }
.pn-design .pn2-section-head > button { background: transparent; color: var(--pn-blue); min-height: 44px; padding: 10px 0; }
.pn-design .pn2-comments > article { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--pn-line); }
.pn-design .pn2-comments > article > img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.pn-design .pn2-comments > article > div { flex: 1; min-width: 0; }
.pn-design .pn2-comments strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.pn-design .pn2-comments small { display: block; color: var(--pn-muted); font-size: 12px; font-weight: 400; }
.pn-design .pn2-comments article p { font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; }
.pn-design .pn2-comments article :is(button,a) { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; padding: 8px 16px 8px 0; background: transparent; color: var(--pn-blue); }
.pn-design .pn2-pending-label { font-size: 12px; color: #69552d; }
.pn-design .pn2-report-link { padding: 12px 0; min-height: 44px; margin: 12px 0; background: transparent; color: var(--pn-muted); font-size: 13px; }
.pn-design .pn2-post-actions { position: sticky; bottom: 12px; max-width: 740px; margin: 24px auto 0; display: flex; gap: 10px; padding: 12px; align-items: center; background: var(--pn-paper); border: 1px solid var(--pn-line); border-radius: 10px; box-shadow: 0 5px 0 #e1d7c4; z-index: 5; }
.pn-design .pn2-post-actions button { min-height: 50px; padding: 10px 6px; background: transparent; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; }
.pn-design .pn2-post-actions button:disabled { opacity: 1; color: var(--pn-muted); }
.pn-design .pn2-post-actions button.is-active { color: var(--pn-blue); }
.pn-design .pn2-post-actions .pn2-post-comment { flex: 1; border-radius: 7px; color: white; background: var(--pn-blue); box-shadow: 0 5px 0 var(--pn-blue-edge); transition: transform 110ms var(--pn-ease),box-shadow 110ms var(--pn-ease); }
.pn-design .pn2-post-actions .pn2-post-comment:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pn-blue-edge); }
.pn2-comment-form > p { font-size: 14px; }
.pn-sheet-body .pn-char-count { margin-top: -12px; font-size: 12px; }
@media (min-width: 1100px) { .pn-preview-content .pn-design .bottom-nav { left: calc(50% + 117.5px); } }
.pn-design .pn2-post-meta { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--pn-line); color: var(--pn-muted); font-size: 13px; }
.pn-design .pn2-post-copy { margin: 0; }
.pn-design .pn2-comments-empty { color: var(--pn-muted); font-size: 14px; padding: 16px 0; }
.pn-design .pn2-skill-description { margin: 0 0 24px; }
.pn-design .pn2-skill-stats span { text-align: left; }
.pn-design .pn2-skill-links h2, .pn-design .pn2-skill-resources h2 { font-size: 22px; }
.pn-form-page .upload-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pn-form-page .upload-tile { aspect-ratio: auto; min-height: 145px; }
.pn-form-page .card-title { font-size: 16px; line-height: 1.5; }
.pn-design .page { animation: none; }
.pn-feed-item p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pn-notice { z-index: 1700; animation: pn-notice-in 320ms cubic-bezier(.2,.8,.2,1); border-radius: 7px; background: #181b26; }
@keyframes pn-notice-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .pn-notice { animation: none; } }

/* 第二版：厚度属于可操作的组件，插画属于内容区域。 */
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button) {
  --pn-depth: 7px; --pn-side: #c8b99b; --pn-bottom: #d8c9aa;
  position: relative; isolation: isolate; overflow: visible;
  border: 1px solid var(--pn-control-line); border-radius: 3px;
  box-shadow: 0 12px 12px -10px #43383055;
  transition: transform 110ms var(--pn-ease),box-shadow 110ms var(--pn-ease);
}
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button)::before,
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border: 1px solid #181b2630;
}
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button)::before {
  width: var(--pn-depth); top: 3px; bottom: -4px; right: calc(-1 * var(--pn-depth));
  transform: skewY(35deg); transform-origin: left top; background: var(--pn-side);
}
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button)::after {
  height: var(--pn-depth); left: 2px; right: -3px; bottom: calc(-1 * var(--pn-depth));
  transform: skewX(35deg); transform-origin: left top; background: var(--pn-bottom);
}
.pn-design :is(.pn-volume,.btn,button.chip,a.chip,.tab,.text-button,.icon-button,.back-actions button):active:not(:disabled) {
  --pn-depth: 3px; transform: translate(2px,4px); box-shadow: none;
}
.pn-design .btn:not(.secondary):not(.ghost), .pn-design .pn2-post-comment {
  --pn-side: #102f79; --pn-bottom: #10358c; border-color: #102f79;
}
.pn-design .btn.secondary { border-color: var(--pn-control-line); box-shadow: 0 12px 12px -10px #43383055; }
.pn-design .btn.ghost::before, .pn-design .btn.ghost::after { display: none; }
.pn-design .page-header .icon-button {
  background: #f2e5b9; border: 1px solid var(--pn-control-line); border-radius: 4px;
  box-shadow: 3px 4px 0 #c7b581, 4px 5px 0 #a59058;
  transition: transform 110ms var(--pn-ease),box-shadow 110ms var(--pn-ease);
}
.pn-design .page-header .icon-button:active { transform: translate(2px,3px); box-shadow: 1px 1px 0 #a59058; }
.pn-scene-art { display: block; width: 100%; height: auto; }
.pn-design .pn2-skill-hero {
  margin: 22px 0 28px; background: #f4ecdd; border-radius: 6px;
  box-shadow: 5px 7px 0 #d5c5a7; border: 1px solid #d8c9af;
}
.pn-design .pn2-skill-hero .pn2-detail-title { padding: 22px 20px 0; min-height: 0; }
.pn-design .pn2-skill-hero .pn2-detail-title h2 { font-size: 34px; }
.pn-design .pn2-skill-hero .pn-scene-art { margin: 0; border-radius: 0; }
.pn-design .pn2-skill-stats {
  margin: 0; padding: 18px 16px; background: #e2d5ee; border-top: 2px solid #b39ac9; border-bottom: 0;
}
.pn-design .pn2-skill-stats > span { padding: 0 8px; color: #554b62; }
.pn-design .pn2-skill-stats > span + span { border-left: 1px solid #b9a2cc; }
.pn-design .pn2-skill-description { margin: 24px 0; }
.pn-design .pn-tabs { padding: 0 7px 10px 0; gap: 16px; background: transparent; border-radius: 0; }
.pn-design .pn-tabs > button { background: #eadfc8; padding: 13px 10px; color: #50483c; }
.pn-design .pn-tabs > button[aria-selected=true] {
  --pn-side: #173d9c; --pn-bottom: #244baa;
  background: var(--pn-blue); color: white; border-color: #173d9c; box-shadow: 0 12px 12px -10px #43383055;
}
.pn-design .pn2-progress-card { padding: 24px 0 28px; }
.pn-design .pn2-card-heading .eyebrow { color: #6b5287; }
.pn-design .pn2-progress-track { gap: 13px; padding: 12px 7px 13px 0; align-items: flex-start; }
.pn-design .pn2-progress-node { background: #f1e2ae; --pn-side: #bba775; --pn-bottom: #cbb784; }
.pn-design .pn2-progress-node:nth-child(2) { margin-top: 12px; background: #e1d1ef; --pn-side: #aa8cc3; --pn-bottom: #b99ad0; }
.pn-design .pn2-progress-node:nth-child(3) { margin-top: 24px; background: #d3e0f0; --pn-side: #91aaca; --pn-bottom: #a6bfda; }
.pn-design .pn2-progress-node.is-active { outline: 2px solid #41314f; outline-offset: 3px; border-color: #8b6da6; box-shadow: 0 12px 12px -10px #43383055; }
.pn-design .pn2-progress-node > i { color: #4a395c; }
.pn-design .pn2-node-detail { padding: 18px; background: #eee5d6; border-left: 4px solid #8761bb; min-height: 0; margin-top: 12px; }
.pn-design .pn2-skill-link-grid { padding-right: 7px; gap: 20px; }
.pn-design .pn2-skill-link-grid > button { background: #f0ddb9; border-radius: 3px; }
.pn-design .pn2-skill-link-grid > button:nth-child(2) { background: #e4d2ee; --pn-side: #ad91c3; --pn-bottom: #bda2d0; }
.pn-design .pn2-skill-link-grid > button > span {
  display: grid; place-items: center; width: 42px; height: 42px; background: #fff4d8;
  border: 1px solid #b7a478; border-radius: 3px; box-shadow: 3px 4px 0 #c1ab81; font-size: 24px;
}
.pn-design .pn2-safe-action { padding: 12px 18px 19px 12px; gap: 16px; }
.pn-design .pn2-post-label { padding: 8px 0 22px; min-height: 0; }
.pn-design .pn2-post-label > .eyebrow { padding: 6px 12px; width: fit-content; background: #e4d4ee; box-shadow: 2px 3px 0 #b5a0c9; }
.pn-design .pn2-post-gallery { padding: 7px; background: #fffdf7; border: 1px solid #d4c8b2; box-shadow: 5px 6px 0 #d3c2a6; border-radius: 3px; }
.pn-design .pn2-post-gallery img { border-radius: 2px; }
.pn-design .pn2-post-links > button { background: #ead8bb; border: 1px solid #c7b48e; box-shadow: 3px 4px 0 #cbbb9a; border-radius: 3px; }
.pn-design .pn2-section-head h2 { margin-bottom: 18px; }
.pn-design .pn2-comment-invite {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 7px); padding: 0 14px 0 0; margin: 0 0 28px;
  text-align: left; background: #f2eadc; min-height: 136px;
}
.pn-design .pn2-comment-invite .pn-scene-art { width: 48%; flex-shrink: 0; border-radius: 3px 0 0 3px; }
.pn-design .pn2-comment-invite > span { min-width: 0; }
.pn-design .pn2-comment-invite small { color: #655b4f; font-size: 12px; }
.pn-design .pn2-comment-invite strong { font-size: 19px; margin: 4px 0 12px; line-height: 1.4; }
.pn-design .pn2-comment-invite > span > span { display: flex; align-items: center; gap: 10px; color: var(--pn-blue); font-size: 14px; font-weight: 700; }
.pn-design .pn2-post-actions { gap: 16px; padding: 12px 18px 20px 12px; }
.pn-design .pn2-post-actions .pn2-post-like { background: #edd2cc; padding: 10px; --pn-side: #c29e95; --pn-bottom: #d1afa6; }
.pn-design .pn2-post-actions .pn2-post-save { background: #e0d2eb; padding: 10px; --pn-side: #aa94bd; --pn-bottom: #bea7cf; }
.pn-design .pn2-post-actions .pn2-post-comment { box-shadow: 0 12px 12px -10px #43383055; border-radius: 3px; }
.pn-design .pn2-post-actions .pn2-post-comment:active { box-shadow: none; transform: translate(2px,4px); }
.pn-design .pn-compose-cover { padding: 22px 0 0; margin: 0 0 28px; overflow-wrap: anywhere; }
.pn-design .pn-compose-cover h2 { margin-bottom: 0; font-size: 32px; }
.pn-design .pn-compose-cover .pn-scene-art { max-height: 220px; object-fit: contain; margin: 8px 0 0; }
.pn-design .pn-form-page form { padding-right: 7px; }
.pn-design .pn-form-page .chip-list { gap: 14px; padding-bottom: 10px; }
.pn-design .pn-form-page .chip { background: #eee2c8; border-radius: 3px; min-height: 44px; padding: 10px 14px; }
.pn-design .pn-form-page .chip.is-active { background: #ddd0eb; border-color: var(--pn-control-selected-line); --pn-side: #a68ac1; --pn-bottom: #b79acc; color: #3e2c55; }
.pn-design .pn-form-page :is(input,select,textarea) { box-shadow: inset 2px 3px 0 #e2d7c1; border-radius: 3px; }
.pn-design .pn-form-page .upload-tile { background: #e6d9ee; border: 1px dashed #aa8fc0; box-shadow: 3px 4px 0 #c7b2d5; border-radius: 3px; }


/* 全站家族模板：内容、表单、身份与后台使用相同控件语言。 */
.pn-design .page-title { font-size: 30px; line-height: 1.25; margin: 0 0 12px; overflow-wrap: anywhere; }
.pn-design .page-header + * { margin-top: 22px; }
.pn-design .stack-lg { gap: 28px; }
.pn-design .stack { gap: 18px; }
.pn-design :is(.body-copy,.field) { font-size: 16px; line-height: 1.8; }
.pn-design :is(p,h1,h2,h3,strong,small,.meta,.body-copy) { overflow-wrap: anywhere; }
.pn-design .eyebrow { color: #665d50; font-size: 12px; letter-spacing: .06em; }
.pn-design .card { padding: 20px; border: 1px solid var(--pn-line); border-radius: 5px; background: var(--pn-surface); box-shadow: 3px 5px 0 #ded1bb; }
.pn-design .card-title { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.pn-design .status-panel { border: 1px solid var(--pn-line); border-radius: 5px; background: #f0e7d6; padding: 24px; }
.pn-design .status-panel .pn-status-art { width: min(100%,180px); max-height: 120px; object-fit: contain; margin: 0 auto 18px; }
.pn-design .status-panel p { overflow-wrap: anywhere; }
.pn-design .card.tint-blue { background: #e5dced; }
.pn-design .notice { padding: 16px; background: #eee4cc; border-radius: 4px; border: 1px solid #d0c19c; font-size: 14px; }
.pn-design .notice > i { color: #6d588d; }
.pn-design .notice.warning, .pn-design .btn.danger { --pn-side: #8d3934; --pn-bottom: #a3423b; }
.pn-design .btn.danger { background: #a3423b; border-color: #8d3934; color: white; }
.pn-design .field { min-width: 0; }
.pn-design .field > span { font-size: 14px; font-weight: 700; }
.pn-design :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea) { min-width: 0; max-width: 100%; border: 1px solid var(--pn-field-line); border-radius: 4px; background: #fffcf4; font-size: 16px; box-shadow: inset 2px 3px 0 #e4d9c4; padding: 12px; color: var(--pn-ink); }
.pn-design textarea { min-height: 132px; }
.pn-design :is(input,select,textarea):focus-visible { outline-offset: 2px; }
.pn-design input[type=file] { width: 100%; max-width: 100%; font-size: 12px; padding: 6px 0; }
.pn-design .cluster { gap: 14px; align-items: center; flex-wrap: wrap; }
.pn-design .cluster > .field { flex: 1 1 200px; }
.pn-design .chip-list { gap: 13px; padding: 4px 7px 12px 0; }
.pn-design :is(button.chip,a.chip,.tab,.text-button) { border-radius: 3px; min-height: 44px; padding: 10px 14px; background: #eee1c8; border: 1px solid var(--pn-control-line); font-size: 14px; }
.pn-design :is(button.chip,a.chip,.tab).is-active { background: #ddcce9; color: #402a59; --pn-side: #a38aba; --pn-bottom: #b9a0cf; border-color: var(--pn-control-selected-line); }
.pn-design .chip.status { height: auto; min-height: 0; padding: 5px 9px; font-size: 12px; line-height: 1.45; background: #e7dcc4; color: #5b4931; border-radius: 3px; }
.pn-design .chip.status.pending { background: #eadbaa; }
.pn-design .chip.status.published { background: #d7e2f2; color: #25417c; }
.pn-design .chip.status:is(.rejected,.hidden) { background: #edd1c9; color: #87372f; }
.pn-design .tabs { display: flex; flex-wrap: wrap; background: transparent; gap: 14px; padding: 0 7px 10px 0; }
.pn-design .tab { flex: 1; text-align: center; }
.pn-design .icon-button { border-radius: 4px; background: #eee0bf; border: 1px solid var(--pn-control-line); box-shadow: 3px 4px 0 #c5b186; flex-shrink: 0; }
.pn-design .search-row { gap: 16px; }
.pn-design .search-box { border: 1px solid var(--pn-field-line); border-radius: 4px; background: #fffdf7; box-shadow: inset 2px 3px 0 #e2d7bf; }
.pn-design .search-box input { border: 0; box-shadow: none; background: transparent; padding: 10px 0; }
.pn-design .list { background: transparent; border-radius: 0; border: 0; }
.pn-design .list-item { padding: 18px 0; gap: 14px; border-bottom: 1px solid var(--pn-line); min-width: 0; background: transparent; }
.pn-design .list-item > span:nth-child(2) { flex: 1; min-width: 0; }
.pn-design :is(.title,.sub,.list-item strong) { overflow-wrap: anywhere; }
.pn-design .list-item .title { font-size: 16px; }
.pn-design .list-item .sub { font-size: 13px; line-height: 1.65; }
.pn-design .icon-tile { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 3px; border: 1px solid #b39dc2; background: #ded0eb; color: #5a397d; box-shadow: 3px 4px 0 #b8a2c9; }
.pn-page-intro { display: grid; gap: 16px; padding: 24px 0 0; margin-bottom: 26px; border-bottom: 1px solid var(--pn-line); }
.pn-page-intro .pn-intro-copy { min-width: 0; }
.pn-page-intro .pn-scene-art { width: 100%; max-height: 230px; object-fit: contain; }
.pn-page-intro .space-between { gap: 12px; align-items: start; }
.pn-page-intro .space-between > div { min-width: 0; }
.pn-page-intro.is-compact { grid-template-columns: minmax(0,1fr) minmax(100px,.65fr); align-items: center; padding: 24px 0; }
.pn-page-intro.is-compact .page-title { font-size: 25px; }
.pn-page-intro.is-compact .pn-scene-art { max-height: 170px; }
.pn-design .pn-list-feature { min-height: 0; margin: 22px 5px 0 0; overflow: visible; background: #dfd1ea; border: 1px solid #b8a1c6; border-radius: 5px; box-shadow: 5px 7px 0 #bca4cd; }
.pn-design .pn-list-feature > div { width: auto; min-height: 0; padding: 20px; border-radius: 0; background: transparent; }
.pn-design .pn-list-feature h2 { font-size: 26px; overflow-wrap: anywhere; }
.pn-design .pn-list-feature .pn-feature-link { display: inline-flex; align-items: center; min-height: 54px; gap: 14px; color: #fff; background: var(--pn-blue); border-radius: 4px; font-weight: 700; }
.pn-design .media-card { padding: 7px; overflow: hidden; box-shadow: 4px 6px 0 #d8cab2; }
.pn-design .media-card > img, .pn-design .media-card > a > img { width: 100%; max-height: 430px; object-fit: contain; border-radius: 2px; background: #e8dfcf; }
.pn-design .media-card-body { padding: 18px 12px; }
.pn-design .media-card .avatar { width: 38px; height: 38px; object-fit: cover; }
.pn-design .media-card .body-copy { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pn-design .pn-feature-image,.pn-media-gallery img { width: 100%; max-height: 600px; object-fit: contain; background: #eee4d5; border-radius: 4px; }
.pn-media-gallery { display: grid; gap: 16px; }
.pn-family-form > .page { max-width: 680px; margin: auto; }
.pn-family-form form { padding-right: 7px; }
.pn-design .upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.pn-design .upload-tile { width: 100%; min-width: 0; padding: 14px; min-height: 136px; border-radius: 4px; background: #e4d6ef; border: 1px dashed #a78ebb; box-shadow: 3px 4px 0 #c5afd6; }
.pn-design .upload-tile input { display: block; position: static; opacity: 1; height: 44px; }
.pn-family-legal > .page { max-width: 780px; margin: auto; }
.pn-family-legal .card { border: 0; border-bottom: 1px solid var(--pn-line); background: transparent; padding: 20px 0; box-shadow: none; }
.pn-family-legal .body-copy { line-height: 1.95; }
.pn-family-account > .page { max-width: 820px; margin: auto; }
.pn-design .pn-id-front { position: relative; width: 100%; min-width: 0; min-height: 580px; padding: 12px 12px 0; background: #fffdf5; border: 2px solid #645844; border-radius: 20px; box-shadow: 7px 9px 0 #baa889, 10px 15px 24px #362b1b15; }
.pn-id-art { position: relative; border: 1px solid #645844; border-radius: 11px; overflow: hidden; background: #d2eff1; }
.pn-id-art img { display: block; width: 100%; height: auto; }
.pn-id-edition { position: absolute; top: 10px; left: 10px; padding: 6px 9px; border: 1px solid #645844; border-radius: 4px; background: #fff9ec; color: var(--pn-ink); box-shadow: 2px 3px 0 #b9a586; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.pn-id-nameplate { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: calc(100% - 30px); min-height: 76px; margin: -22px 15px 0; padding: 10px 12px; border: 1px solid #75557c; border-radius: 11px; background: #dec6e7; box-shadow: 4px 5px 0 #ab88b5; }
.pn-id-nameplate > img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; border: 2px solid #fffdf5; outline: 1px solid #75557c; object-fit: cover; }
.pn-id-nameplate > div { flex: 1; min-width: 0; }
.pn-id-nameplate strong { display: block; font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.pn-id-nameplate small { display: block; margin-top: 4px; font-size: 12px; }
.pn-id-nameplate > i { flex: 0 0 20px; font-size: 23px; }
.pn-id-data { padding: 22px 12px 12px; }
.pn-id-caption { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin-bottom: 16px; }
.pn-id-caption > span { color: var(--pn-muted); font: 700 11px/1.8 "Bricolage Grotesque",sans-serif; }
.pn-id-signature { margin-bottom: 18px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.pn-public-profile .pn-id-signature { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pn-id-tracks { display: grid; gap: 14px; }
.pn-design .pn-id-track { display: grid; grid-template-columns: 64px 46px minmax(30px,1fr); align-items: center; gap: 9px; min-width: 0; min-height: 44px; font-size: 13px; font-weight: 700; }
.pn-id-track > strong { font-size: 19px; }
.pn-id-progress { display: block; height: 10px; border: 1px solid #776d5d; background: #f5eedf; border-radius: 3px; overflow: hidden; }
.pn-id-progress > i { display: block; height: 100%; background: var(--pn-blue); }
.pn-id-track.is-community .pn-id-progress > i { background: #74569c; }
.pn-design a.pn-id-track { grid-template-columns: 64px 46px minmax(22px,1fr) 16px; min-height: 56px; padding: 9px 10px; border: 1px solid #896e9d; background: #ede0f3; border-radius: 4px; color: var(--pn-ink); --pn-side: #b998cb; --pn-bottom: #bea2ce; }
.pn-design a.pn-id-track.is-community { border-color: #6988a7; background: #e2edf6; --pn-side: #98b4d0; --pn-bottom: #acc1d8; }
.pn-id-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pn-id-tags > span { padding: 5px 10px; border: 1px solid #c5ab73; border-radius: 20px; background: #f5e6be; font-size: 12px; font-weight: 700; }
.pn-id-footer { padding: 0 12px 20px; }
.pn-id-footer .card-flip-hint { min-height: 44px; color: var(--pn-muted); font-size: 12px; }
.pn-id-own-card .pn-id-footer { padding-top: 14px; }
.pn-me-layout { display: grid; gap: 32px; min-width: 0; }
.pn-me-identity { min-width: 0; padding-right: 9px; max-width: 415px; width: 100%; margin: auto; }
.pn-me-identity > .notice { margin-bottom: 20px; }
.pn-me-identity > .profile-stage-label { text-align: center; }
.pn-me-tools { min-width: 0; }
.pn-growth-page { max-width: 780px; margin: auto; }
.pn-growth-stage { padding-top: 24px; }
.pn-growth-stage h2 { font-size: 30px; }
.pn-growth-stage .pn-scene-art { border-bottom: 2px solid #b298c7; }
.pn-growth-switch { display: grid; gap: 12px; margin: 24px 0; }
.pn-growth-summary { padding: 24px; background: #e5d9ee; border: 1px solid #ad91c4; border-radius: 4px; box-shadow: 5px 7px 0 #b79ccb; }
.pn-growth-count { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.pn-growth-count > strong { font-size: 38px; font-weight: 800; }
.pn-growth-summary .growth-progress { margin: 14px 0; background: #f7f2e7; border-color: #977cab; }
.pn-growth-summary .growth-progress > span { background: var(--pn-blue); }
.pn-growth-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 7px 20px 0; }
.pn-growth-actions > * { flex: 1 1 180px; }
.pn-sheet .ledger-row div { min-width: 0; overflow-wrap: anywhere; }
.pn-public-profile .profile-stage { padding: 0 9px 24px 0; }
.pn-public-profile .pn-preview-card { width: min(100%,390px); height: auto; }
.pn-public-profile .pn-preview-card-inner { display: block; position: relative; height: auto; }
.pn-public-profile .card-front { position: relative; inset: auto; overflow: visible; }
.pn-public-profile .card-back { position: absolute; inset: 0; min-width: 0; min-height: 0; border: 2px solid #645844; border-radius: 20px; box-shadow: 7px 9px 0 #baa889; background: #e2e8f3; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.pn-public-profile .back-top { padding-bottom: 16px; border-bottom: 6px solid #bda4d3; color: #304579; }
.pn-public-profile .back-avatar { border-color: #776086; box-shadow: 4px 5px 0 #b49bc7; }
.pn-public-profile .back-intro h2 { font-size: 28px; overflow-wrap: anywhere; }
.pn-public-profile .back-intro p, .pn-public-profile .back-section p { overflow-wrap: anywhere; }
.pn-public-profile .back-actions { flex-wrap: wrap; gap: 16px; padding-right: 7px; margin-bottom: 18px; }
.pn-public-profile .back-actions button { border-radius: 4px; background: var(--pn-blue); color: white; border-color: #102f79; min-height: 48px; --pn-side: #102f79; --pn-bottom: #10358c; }
.pn-public-profile .back-actions button:last-child { background: #f7f2e7; color: var(--pn-ink); --pn-side: #c8b99b; --pn-bottom: #d8c9aa; }
.pn-public-profile .back-stats { gap: 14px; border-radius: 4px; border-color: #9d90b0; }
.pn-public-profile .back-section p { color: var(--pn-ink); font-size: 14px; }
.pn-public-profile .profile-help { margin: 26px 0 0; }
.admin-shell.pn-design { background: var(--pn-paper); grid-template-columns: 220px minmax(0,1fr); }
.pn-design .admin-sidebar { background: #163880; height: 100dvh; border-right: 6px solid #0d2559; }
.pn-design .admin-brand span { color: #e2d5ba; }
.pn-design .admin-nav a { border-radius: 3px; }
.pn-design .admin-nav a.is-active { background: #e4d1ed; color: #362250; box-shadow: 3px 4px 0 #aa8abe; }
.pn-design .admin-main { padding: 24px 32px 60px; min-width: 0; }
.pn-design .admin-topbar { display: flex; flex-direction: column; align-items: start; gap: 12px; margin: 0; }
.pn-design .admin-main .pn-page-intro { padding-top: 0; }
.pn-design .admin-panel { border-radius: 4px; background: var(--pn-surface); border-color: #c7b99f; box-shadow: 3px 5px 0 #d5c6ac; overflow: visible; }
.pn-design .admin-panel-head { background: #e5d9ee; border-color: #c1a8d0; border-radius: 4px 4px 0 0; padding: 18px; }
.pn-design .workbench { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; }
.pn-design .admin-row { background: #fffdf7; min-width: 0; border-color: var(--pn-line); }
.pn-design .admin-row.is-selected { background: #ede0f2; box-shadow: inset 5px 0 #8660ae; }
.pn-design .admin-row span { min-width: 0; overflow-wrap: anywhere; }
.pn-design .admin-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; padding-right: 7px; }
.pn-design .admin-stat { min-width: 0; background: #e9d9ed; border-radius: 4px; border-color: #ad91bd; box-shadow: 4px 6px 0 #bba1cc; }
.pn-design .admin-stat:nth-child(2) { background: #efddbc; border-color: #c5ad83; box-shadow: 4px 6px 0 #cdb88f; }
.pn-design .admin-table-wrap { max-width: 100%; overflow-x: auto; border-radius: 4px; }
.pn-design .admin-table { min-width: 700px; background: #fffdf7; }
.pn-design .admin-table th { background: #e6d9ed; color: #594268; }
.pn-design .admin-table td { overflow-wrap: anywhere; max-width: 280px; }
.pn-design .admin-actions { gap: 18px; padding-right: 7px; }
.pn-design .pn-review-footer { flex-wrap: wrap; gap: 12px; }

@media (max-width: 1020px) {
  .admin-shell.pn-design { grid-template-columns: 1fr; }
  .pn-design .admin-sidebar { position: static; height: auto; width: 100%; padding: 14px; background: #163880; border-right: 0; border-bottom: 5px solid #0d2559; }
  .pn-design .admin-brand { display: none; }
  .pn-design .admin-nav { display: flex; flex-wrap: wrap; min-width: 0; gap: 8px; }
  .pn-design .admin-nav a { padding: 10px; width: auto; flex: 0 1 auto; font-size: 12px; gap: 7px; min-height: 44px; }
  .pn-design .admin-nav a span { display: inline; }
  .pn-design .workbench { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 759px) {
  .pn-design .admin-main { padding: 22px 18px 44px; }
  .pn-design .admin-grid { grid-template-columns: minmax(0,1fr); }
  .pn-design .admin-actions > button { flex: 1 1 130px; }
  .pn-design .space-between { flex-wrap: wrap; }
  .pn-page-intro.is-compact .page-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-public-profile .pn-preview-card-inner { transform: none; }
  .pn-public-profile .card-back { display: block; visibility: hidden; transform: none; }
  .pn-public-profile .pn-preview-card.flipped .card-front { display: block; visibility: hidden; }
  .pn-public-profile .pn-preview-card.flipped .card-back { display: block; visibility: visible; }
}

.pn-design .pn-list-feature .eyebrow { color: var(--pn-muted); }
.pn-design .growth-milestones .milestone small { font-size: 12px; color: var(--pn-muted); }
.pn-design .growth-milestones .milestone.future { opacity: 1; }
.pn-design .growth-milestones .milestone.future > i { opacity: .5; }
.pn-design .pn2-comments article :is(button,a) { min-width: 44px; }
.pn-design label.cluster:has(input[type=checkbox]), .pn-design .check-row { min-height: 44px; }
.pn-design :is(input,textarea)::placeholder { color: var(--pn-muted); opacity: 1; }