/* Pro ePaper – Frontend Viewer v1.2.0 */
*, *::before, *::after { box-sizing:border-box; }

.pec-viewer-wrap {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#1a1a2e; border-radius:10px; overflow:hidden;
    max-width:1100px; margin:0 auto 40px; color:#fff;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* Header */
.pec-viewer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:#16213e;
    border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; gap:8px;
}
.pec-viewer-title strong { font-size:15px; display:block; }
.pec-viewer-title span   { font-size:12px; color:rgba(255,255,255,.6); }
.pec-viewer-controls { display:flex; gap:6px; align-items:center; }
.pec-btn {
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    color:#fff; padding:6px 12px; border-radius:4px; cursor:pointer;
    font-size:14px; text-decoration:none; display:inline-flex;
    align-items:center; transition:background .15s;
}
.pec-btn:hover { background:rgba(255,255,255,.2); color:#fff; }

/* Loading */
.pec-loading {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:60px 20px; gap:16px; background:#0f0f23; color:rgba(255,255,255,.7);
}
.pec-spinner {
    width:36px; height:36px; border:3px solid rgba(255,255,255,.2);
    border-top-color:#fff; border-radius:50%; animation:pec-spin .7s linear infinite;
}
@keyframes pec-spin { to { transform:rotate(360deg); } }

/* Stage */
.pec-viewer-stage {
    display:flex; align-items:center; justify-content:center;
    padding:16px; gap:12px; min-height:60vh; background:#0f0f23;
}
.pec-nav {
    background:rgba(255,255,255,.1); border:none; color:#fff;
    font-size:32px; width:44px; height:64px; border-radius:6px;
    cursor:pointer; flex-shrink:0; transition:background .15s;
    display:flex; align-items:center; justify-content:center;
}
.pec-nav:hover   { background:rgba(255,255,255,.25); }
.pec-nav:disabled { opacity:.3; cursor:default; }

.pec-page-wrap  { flex:1; overflow:auto; display:flex; justify-content:center; align-items:flex-start; }
.pec-page-inner { position:relative; display:inline-block; }
.pec-page-canvas { display:block; box-shadow:0 4px 24px rgba(0,0,0,.5); }

/* Clip hotspots */
.pec-clips-layer { position:absolute; inset:0; pointer-events:none; }
.pec-clip-hotspot {
    position:absolute; border:2px solid transparent;
    cursor:pointer; pointer-events:all;
    transition:border-color .15s, background .15s;
}
.pec-clip-hotspot:hover {
    border-color:rgba(255,220,50,.9);
    background:rgba(255,220,50,.12);
}
.pec-clip-hotspot-label {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(255,220,50,.9); color:#1a1a2e; font-size:10px;
    font-weight:600; padding:2px 4px; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis;
    opacity:0; transition:opacity .15s;
}
.pec-clip-hotspot:hover .pec-clip-hotspot-label { opacity:1; }

/* Footer */
.pec-viewer-footer {
    background:#16213e; padding:10px 16px;
    border-top:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:16px; overflow-x:auto;
}
.pec-page-counter { font-size:12px; color:rgba(255,255,255,.6); flex-shrink:0; white-space:nowrap; }
.pec-thumb-strip  { display:flex; gap:4px; overflow-x:auto; padding:4px 0; }
.pec-strip-thumb  {
    flex-shrink:0; border:2px solid transparent; border-radius:3px;
    cursor:pointer; opacity:.5; transition:opacity .15s, border-color .15s;
    background:#333; min-width:36px;
}
.pec-strip-thumb.active, .pec-strip-thumb:hover { opacity:1; border-color:rgba(255,220,50,.8); }

/* Modal */
.pec-modal {
    position:fixed; inset:0; z-index:999999;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.pec-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); cursor:pointer; }
.pec-modal-box {
    position:relative; background:#fff; color:#1d2327; border-radius:10px;
    padding:28px 32px; max-width:820px; width:100%; max-height:90vh;
    overflow-y:auto; box-shadow:0 16px 48px rgba(0,0,0,.5); z-index:1;
}
.pec-modal-close {
    position:absolute; top:12px; right:14px; background:none; border:none;
    font-size:20px; cursor:pointer; color:#666; line-height:1;
}
.pec-modal-close:hover { color:#d63638; }
.pec-modal-title    { font-size:20px; margin:0 0 4px; font-weight:700; }
.pec-modal-category { font-size:12px; color:#888; margin:0 0 16px; text-transform:uppercase; }
.pec-modal-article-wrap { border-top:1px solid #eee; padding-top:16px; }
.pec-article-canvas { display:block; max-width:100%; height:auto; border:1px solid #ddd; border-radius:4px; }

/* Editions grid */
.pec-editions-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:20px; margin:20px 0;
}
.pec-edition-card {
    background:#fff; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06); transition:box-shadow .2s, transform .2s;
}
.pec-edition-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.12); transform:translateY(-2px); }
.pec-edition-cover {
    height:200px; background-size:cover; background-position:center top; background-color:#f0f0f0;
}
.pec-edition-cover-placeholder {
    display:flex; align-items:center; justify-content:center; font-size:48px; color:#ccc;
}
.pec-edition-info { padding:10px 12px; }
.pec-edition-info a     { text-decoration:none; color:#1d2327; font-size:13px; display:block; margin-bottom:4px; }
.pec-edition-info span  { font-size:11px; color:#666; display:block; }
.pec-edition-info time  { font-size:11px; color:#888; display:block; }
.pec-edition-info small { font-size:10px; color:#aaa; display:block; }

.pec-error { color:#d63638; font-style:italic; }

@media (max-width:640px) {
    .pec-viewer-header { flex-direction:column; align-items:flex-start; }
    .pec-nav { display:none; }
    .pec-modal-box { padding:20px 16px; }
}