.envelope-viewer-layout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e22ce 100%); } .envelope-action-bar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 3px solid rgba(126, 34, 206, 0.3); padding: 1.25rem 2rem; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .envelope-action-bar__inner { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; } .envelope-logo svg { filter: drop-shadow(0 2px 4px rgba(126, 34, 206, 0.3)); color: #7e22ce; } .envelope-title { font-size: 1.125rem; font-weight: 700; color: #1e293b; letter-spacing: -0.025em; } .envelope-key { font-size: 0.8125rem; color: #64748b; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-weight: 500; margin-top: 0.25rem; } .pdf-controls, .pdf-navigation { display: flex; align-items: center; gap: 0.75rem; } .zoom-level, .page-info { font-size: 0.875rem; font-weight: 600; color: #475569; min-width: 60px; text-align: center; } .envelope-content { flex: 1; min-height: 0; padding: 1.5rem; position: relative; overflow: auto; } .pdf-viewer-container { height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; } .pdf-frame { background: white; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: auto; position: relative; padding: 2rem; height: calc(100vh - 200px); width: 90%; max-width: 1200px; text-align: center; } .pdf-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #7e22ce 0%, #2a5298 100%); z-index: 1; border-radius: 16px 16px 0 0; } .pdf-canvas { display: inline-block; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); vertical-align: top; } .error-container { display: flex; align-items: center; justify-content: center; height: 100%; padding: 2rem; } .alert { border-radius: 12px; border: none; padding: 2rem; max-width: 600px; } .alert-danger { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); color: #be123c; border-left: 4px solid #e11d48; } .alert-warning { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); color: #92400e; border-left: 4px solid #f59e0b; } .spinner-border { border-width: 0.35rem; } @media (max-width: 768px) { .envelope-content { padding: 0.75rem; } .pdf-frame { border-radius: 12px; padding: 1rem; height: calc(100vh - 180px); width: 95%; } .envelope-action-bar { padding: 1rem 1.25rem; } .envelope-action-bar__inner { flex-wrap: wrap; } .envelope-title { font-size: 1rem; } .envelope-key { font-size: 0.75rem; } .envelope-logo svg { width: 20px; height: 20px; } .alert { padding: 1.5rem; } }