@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;600;700&display=swap');

#ailaan-viewer { background: #1a1a1a; color: #eee; min-height: 100vh; display: flex; flex-direction: column; }
.ev-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #111; position: sticky; top: 0; z-index: 10; }
.ev-logo { font-size: 22px; font-weight: bold; text-decoration: none; color: #fff; font-family: 'Noto Nastaliq Urdu', serif; }
.ev-date { display: flex; align-items: center; gap: 8px; font-size: 16px; font-family: 'Noto Nastaliq Urdu', serif; }
.ev-chev { color: #eee; text-decoration: none; padding: 2px 8px; border-radius: 3px; background: #333; }
.ev-chev.disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
.ev-right { display: flex; align-items: center; gap: 8px; }
.ev-archive-link { color: #eee; text-decoration: none; padding: 4px 10px; background: #333; border-radius: 3px; }
.ev-page-jump { background: #222; color: #eee; border: 1px solid #444; padding: 4px 6px; border-radius: 3px; }
.ev-canvas-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.ev-canvas { position: relative; max-width: 100%; max-height: calc(100vh - 130px); transform-origin: center center; transition: transform .15s ease; }
.ev-page-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ev-layer { position: absolute; inset: 0; }
.ev-hotspot { position: absolute; border: 1px solid transparent; }
.ev-hotspot:hover, .ev-hotspot:focus-visible { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); outline: none; }
#ailaan-viewer.show-outlines .ev-hotspot { border-color: rgba(255,255,255,0.5); }
.ev-toolbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #111; z-index: 10; }
.ev-spacer { flex: 1; }
.ev-page-indicator { color: #ccc; min-width: 60px; text-align: center; }
.ev-zoom-btn, .ev-outline-btn, .ev-share-btn { background: #333; color: #fff; border: none; padding: 4px 10px; border-radius: 3px; cursor: pointer; }
.ev-zoom-btn:hover, .ev-outline-btn:hover, .ev-share-btn:hover { background: #444; }
.ev-outline-btn[aria-pressed="true"] { background: #2271b1; }

@media (max-width: 640px) {
    .ev-topbar .ev-right { display: none; }
    .ev-topbar { padding: 6px 10px; }
    .ev-canvas-wrap { padding: 10px; }
}