.invoice-viewer { --iv-blue: #166b9c; font: 14px/1.45 Arial, sans-serif; color: #263c4e; background: #f3f6f8; padding: 0; border: 0; width: min(1280px, 96vw); height: 94vh; max-width: none; max-height: none; border-radius: 10px; box-shadow: 0 12px 50px #0004; }
.invoice-viewer::backdrop { background: #14243599; }
.invoice-viewer *, .invoice-viewer *::before, .invoice-viewer *::after { box-sizing: border-box; }
.invoice-viewer.iv-page { width: 100%; height: 100vh; border-radius: 0; box-shadow: none; }
.iv-shell { display: flex; flex-direction: column; height: 100%; }
.iv-header { background: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #dce5eb; }
.iv-header h1 { margin: 0; font-size: 21px; color: #263c4e; }
.iv-subtitle { color: #637887; margin-top: 3px; }
.iv-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.invoice-viewer button, .invoice-viewer .iv-button { display: inline-block; padding: 8px 12px; border: 1px solid #c5d3de; border-radius: 5px; background: white; color: #263c4e; text-decoration: none; cursor: pointer; font: inherit; white-space: nowrap; }
.invoice-viewer button:disabled { opacity: .5; cursor: default; }
.invoice-viewer .iv-primary { background: var(--iv-blue); color: white; border-color: var(--iv-blue); }
.iv-main { display: flex; flex: 1; min-height: 0; }
.iv-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iv-preview-bar { padding: 8px 16px; min-height: 43px; display: flex; align-items: center; gap: 10px; }
.iv-preview-host { flex: 1; min-height: 0; }
.iv-preview-host object, .iv-preview-host iframe { width: 100%; height: 100%; display: block; border: 0; }
.iv-loading { margin: 30px; text-align: center; color: #637887; }
.iv-composer { flex: 0 0 370px; overflow: auto; background: white; border-left: 1px solid #dce5eb; padding: 20px; }
.iv-composer h2 { margin: 0 0 16px; font-size: 18px; }
.iv-composer label { display: block; font-weight: 600; margin: 14px 0 5px; }
.iv-composer select, .iv-composer textarea, .iv-toolbar select { width: 100%; padding: 8px; border: 1px solid #beced8; border-radius: 5px; font: inherit; background: white; color: #263c4e; font-weight: 400; }
.iv-toolbar select { width: auto; }
.iv-composer textarea { resize: vertical; min-height: 72px; }
.iv-help { font-size: 12px; color: #637887; margin: 5px 0 12px; }
.iv-attachment { margin: 16px 0; padding: 10px; background: #eef6fa; border-left: 3px solid var(--iv-blue); overflow-wrap: anywhere; }
.iv-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.iv-message { padding: 10px 18px; background: #e9f5ec; color: #244e32; }
.iv-message.iv-error { background: #fff0ed; color: #96371c; }
.invoice-viewer [hidden] { display: none !important; }
.invoice-viewer :focus-visible { outline: 3px solid #49a3d8; outline-offset: 2px; }
@media(max-width: 760px) { .iv-main { flex-direction: column; overflow: auto; } .iv-preview { min-height: 55vh; } .iv-composer { flex: none; border-left: 0; border-top: 1px solid #dce5eb; } .iv-header { align-items: flex-start; padding: 12px; flex-direction: column; gap: 10px; } }