.prn-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 16px; }
.prn-chip { border: 1px solid var(--border-color, #e2e2e2); background: var(--bg-surface, #fff);
            color: var(--text-primary, #222); border-radius: var(--radius-full); padding: 7px 18px;
            font-family: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: .15s; }
.prn-chip:hover { border-color: #A71C20; }
.prn-chip.active { background: #A71C20; border-color: #A71C20; color: #fff; }

.prn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
            gap: 14px; padding: 4px 16px calc(100px + var(--sab)); max-width: 1100px; margin: 0 auto; }

.prn-card { background: var(--bg-surface, #fff); border: 1px solid var(--border-color, #e8e8e8);
            border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
            transition: transform .15s, box-shadow .15s; }
.prn-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

.prn-thumb { position: relative; width: 100%; height: 110px; display: flex; align-items: center; justify-content: center;
             border: 0; font-family: inherit; color: inherit; cursor: zoom-in;
             background: linear-gradient(135deg, rgba(167,28,32,.07), rgba(167,28,32,.02)); }
.prn-preview-tag { position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
                   display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
                   border-radius: var(--radius-full); background: rgba(0,0,0,.72); color: #fff;
                   font-size: var(--text-xs); font-weight: 700; line-height: 1; }
.prn-preview-tag i, .prn-preview-tag svg { width: 15px; height: 15px; }
.prn-thumb .app-icon { width: 54px; height: 54px; }
.prn-thumb.is-img { background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(37,99,235,.02)); }
.prn-thumb.has-cover { padding: 0; background-size: cover; background-position: center top; }

.prn-body { padding: 14px 14px 12px; flex: 1; display: flex; flex-direction: column; }
.prn-cat { font-size: var(--text-xs); font-weight: 800; color: var(--primary-ink); margin-bottom: 4px; }
.prn-title { font-size: var(--text-base); font-weight: 800; margin: 0 0 6px; color: var(--text-primary, #1a1a1a); }
.prn-desc { font-size: var(--text-xs); color: var(--text-secondary, #777); line-height: 1.7; margin: 0 0 12px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }

.prn-meta { display: flex; align-items: center; gap: 12px; font-size: var(--text-xs);
            color: var(--text-tertiary, #999); margin-bottom: 12px; }
.prn-meta span { display: inline-flex; align-items: center; gap: 4px; }
.prn-meta i { width: 13px; height: 13px; }

.prn-btn { padding: 11px; font-size: var(--text-sm); text-decoration: none; }
.prn-btn i { width: 17px; height: 17px; }
.prn-btn.is-busy { opacity: .6; pointer-events: none; }

.prn-actions { display: flex; gap: 8px; }
.prn-actions .prn-btn { flex: 1; }
.prn-share { flex: 0 0 auto; width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.prn-share i { width: 18px; height: 18px; }
.prn-card.is-shared { box-shadow: 0 0 0 3px #A71C20, 0 10px 24px rgba(0,0,0,.10); transition: box-shadow .4s; }

.prn-view { position: fixed; inset: 0; z-index: 9600; display: flex; flex-direction: column;
            background: #17171a; }
.prn-view[hidden] { display: none; }
.prn-view__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
                 padding: calc(8px + var(--sat)) 12px 8px; background: var(--bg-surface);
                 color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.prn-view__head { flex: 1; min-width: 0; text-align: center; }
.prn-view__title { margin: 0; font-size: var(--text-sm); font-weight: 800; color: var(--text-primary);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prn-view__count { display: block; min-height: 1.4em; font-size: var(--text-xs); color: var(--text-secondary); }
.prn-view__bar .btn i, .prn-view__bar .btn svg { width: 20px; height: 20px; }
.prn-view__pages { flex: 1; min-height: 0; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.prn-view__page { position: relative; width: 100%; max-width: 860px; margin: 0 auto 12px; background: #fff;
                  box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.prn-view__page:last-child { margin-bottom: 0; }
.prn-view__page img { display: block; width: 100%; height: auto; }
.prn-view__pages.is-zoomed .prn-view__page { width: 200%; max-width: 1720px; }
.prn-view__page.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px;
                  margin: -16px 0 0 -16px; border-radius: 50%; border: 3px solid rgba(0,0,0,.14);
                  border-top-color: #A71C20; animation: prn-view-spin .8s linear infinite; }
.prn-view__page.is-failed { padding: 40px 16px; text-align: center; color: #1a1a1a; font-size: var(--text-sm); line-height: 1.8; }
@keyframes prn-view-spin { to { transform: rotate(360deg); } }
.prn-view__note { margin: 15vh auto 0; max-width: 300px; text-align: center; color: #fff;
                  font-size: var(--text-sm); line-height: 1.8; }
.prn-view__foot { flex: 0 0 auto; display: flex; padding: 10px 12px calc(10px + var(--sab));
                  background: var(--bg-surface); border-top: 1px solid var(--border-color); }
.prn-view__foot .prn-btn { flex: 1; max-width: 420px; margin: 0 auto; }
html.prn-view-lock, html.prn-view-lock body { overflow: hidden; }

.prn-empty { text-align: center; padding: 60px 20px; color: var(--text-tertiary, #999); }
.prn-empty i { width: 48px; height: 48px; margin-bottom: 12px; opacity: .5; }
.prn-head { max-width: 1100px; margin: 0 auto; padding: 16px 16px 0; }