:root {
  --pn-bg: #f4f1ea; --pn-card: #fff; --pn-ink: #2b2822; --pn-mut: #5C5648;
  --pn-line: #d6cfbe; --pn-brand: #0F6E56; --pn-faint: #8a8577;
}

.pn-page { max-width: 780px; margin: 0 auto; padding: 16px 14px 48px; }
.pn-page h1 { font-size: 21px; margin: 0 0 3px; color: #0b3d2e; }
.pn-page .pn-lead { margin: 0 0 14px; color: var(--pn-mut); font-size: 13.5px; }


.pn-filters { margin-bottom: 14px; }
.pn-frow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 7px; }
.pn-lab {
  flex: 0 0 46px; font-size: 11.5px; color: var(--pn-faint); font-weight: 700;
}
.pn-f {
  border: 1px solid var(--pn-line); border-radius: 99px; padding: 6px 13px;
  font-size: 12.5px; background: #faf8f3; color: var(--pn-ink); cursor: pointer;
  font-family: inherit; line-height: 1.35;
  
  min-height: 36px;
}
.pn-f:hover { background: #f2efe6; }
.pn-f.on { background: var(--pn-brand); color: #fff; border-color: var(--pn-brand); font-weight: 800; }


.pn-list { display: block; }
.pn-item {
  background: var(--pn-card); border: 1px solid var(--pn-line); border-radius: 13px;
  padding: 13px 15px; margin-bottom: 11px;
}


.pn-item.pn-hi { border-inline-start: 4px solid #b42318; }

.pn-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }

.pn-ty {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; border-radius: 99px; padding: 3px 10px;
  border: 1px solid transparent;
}
.pn-ty-critical { background: #fdecea; color: #b42318; border-color: #f3c4bf; }
.pn-ty-urgent   { background: #fdf0e6; color: #c2410c; border-color: #f0d0b4; }
.pn-ty-warning  { background: #fdf6e6; color: #b54708; border-color: #edd9ac; }
.pn-ty-info,
.pn-ty-tip      { background: #e8f1f7; color: #0b6ea8; border-color: #c3dced; }

.pn-cat  { font-size: 11.5px; color: var(--pn-mut); }
.pn-arch { font-size: 10.5px; color: var(--pn-faint); border: 1px dashed var(--pn-line);
           border-radius: 99px; padding: 2px 8px; }
.pn-when { margin-inline-start: auto; font-size: 11.5px; color: var(--pn-faint);
           font-variant-numeric: tabular-nums; }



.pn-head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.pn-title { font-size: 16px; margin: 0; font-weight: 800; color: var(--pn-ink); line-height: 1.35; }

.pn-stat {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 3px 9px;
  border: 1px solid transparent;
}


.pn-stat-live { background: #fdf6d8; color: #b45309; border-color: #ecd9a0; }
.pn-stat-done { background: #e6f2ec; color: #0F6E56; border-color: #bfdccf; }
.pn-stat-end  { background: #fdf0ef; color: #16694f; border-color: #f2cfcb; }


.pn-stat-exp  { background: #f3f0e7; color: #6b6759; border-color: var(--pn-line); }

.pn-body { margin: 7px 0 0; font-size: 13.5px; line-height: 1.65; color: #3c382f; }
.pn-body a { color: var(--pn-brand); }

.pn-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
           margin-top: 9px; font-size: 12.5px; }
.pn-cta { color: var(--pn-brand); font-weight: 700; text-decoration: none;
          border-bottom: 1px solid currentColor; }
.pn-loc { color: var(--pn-mut); text-decoration: none; display: inline-flex; gap: 4px;
          align-items: center; }
.pn-loc:hover { color: var(--pn-brand); }
.pn-exp { color: var(--pn-faint); display: inline-flex; gap: 4px; align-items: center; }
.pn-exp-v { font-variant-numeric: tabular-nums; }



.pn-sk-t, .pn-sk-h, .pn-sk-b {
  background: linear-gradient(90deg, #efece4 25%, #f7f5ef 37%, #efece4 63%);
  background-size: 400% 100%; border-radius: 6px; animation: pn-shine 1.4s ease-in-out infinite;
}
.pn-sk-t { height: 13px; width: 42%; margin-bottom: 9px; }
.pn-sk-h { height: 19px; width: 72%; margin-bottom: 9px; }
.pn-sk-b { height: 13px; width: 92%; }
@keyframes pn-shine { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

@media (prefers-reduced-motion: reduce) {
  .pn-sk-t, .pn-sk-h, .pn-sk-b { animation: none; background: #efece4; }
}

.pn-err, .pn-empty {
  background: var(--pn-card); border: 1px solid var(--pn-line); border-radius: 13px;
  padding: 26px 20px; text-align: center;
}
.pn-err { border-color: #f0b7b1; background: #fdf5f4; }
.pn-err-t, .pn-empty-t { display: block; font-size: 16px; font-weight: 800; margin-bottom: 5px; }
.pn-err-p, .pn-empty-p { margin: 0 0 14px; color: var(--pn-mut); font-size: 13.5px; }
.pn-btn {
  border: 1px solid var(--pn-line); background: #faf8f3; border-radius: 9px;
  padding: 9px 17px; font-size: 13px; font-family: inherit; cursor: pointer;
  margin: 0 4px; min-height: 40px; color: var(--pn-ink);
}
.pn-btn-p { background: var(--pn-brand); color: #fff; border-color: var(--pn-brand); font-weight: 700; }





.pn-more {
  display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 6px 0 0; padding: 12px; font-size: 12.5px; color: var(--pn-mut);
}
.pn-more-n, .pn-more-t { font-weight: 800; color: var(--pn-ink); font-variant-numeric: tabular-nums; }
.pn-more .pn-btn { margin-inline-start: 8px; }



.pn-more-err { flex-basis: 100%; color: #B3261E; font-weight: 700; }





@media (max-width: 560px) {
  .pn-page { padding: 12px 11px 40px; }
  .pn-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pn-title { font-size: 15.5px; }
  .pn-when { margin-inline-start: 0; flex-basis: 100%; }
  .pn-lab { flex-basis: 100%; }
}