@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";:root{--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-gradient:linear-gradient(135deg, #090d16 0%, #111827 100%);--panel-bg:#111928bf;--panel-border:#ffffff14;--panel-glow:#3b82f626;--color-primary:#3b82f6;--color-primary-hover:#60a5fa;--color-primary-glow:#3b82f659;--color-accent:#06b6d4;--color-accent-glow:#06b6d44d;--color-success:#10b981;--color-success-bg:#10b9811a;--color-success-border:#10b98133;--color-danger:#ef4444;--color-danger-bg:#ef44441a;--color-danger-border:#ef444433;--color-warning:#f59e0b;--color-warning-bg:#f59e0b1a;--color-warning-border:#f59e0b33;--color-text-primary:#f3f4f6;--color-text-secondary:#9ca3af;--color-text-muted:#6b7280;--shadow-premium:0 8px 32px 0 #0000005e;--backdrop-blur:blur(12px);--radius-lg:16px;--radius-md:12px;--radius-sm:8px}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}html{background:#090d16}body{font-family:var(--font-sans);background:var(--bg-gradient);color:var(--color-text-primary);background-attachment:fixed;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0003}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.glass-panel{background:var(--panel-bg);border:1px solid var(--panel-border);-webkit-backdrop-filter:var(--backdrop-blur);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);transition:all .3s cubic-bezier(.4,0,.2,1)}.glass-panel:hover{box-shadow:0 12px 40px 0 #00000073, var(--panel-glow);border-color:#ffffff26}.input-group{flex-direction:column;gap:8px;width:100%;margin-bottom:20px;display:flex}.input-label{color:var(--color-text-secondary);letter-spacing:.5px;text-transform:uppercase;font-size:14px;font-weight:500}.input-field{border-radius:var(--radius-md);width:100%;color:var(--color-text-primary);font-family:var(--font-sans);background:#0003;border:1px solid #ffffff26;outline:none;padding:14px 16px;font-size:16px;transition:all .2s}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-glow);background:#00000059}.input-field::placeholder{color:var(--color-text-muted);opacity:.6}.input-field:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);width:100%;font-family:var(--font-sans);cursor:pointer;box-shadow:0 4px 14px var(--color-primary-glow);border:none;justify-content:center;align-items:center;gap:10px;padding:14px 24px;font-size:16px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:0 6px 20px var(--color-primary-glow);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(1px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}.btn-secondary{color:var(--color-text-primary);border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;background:#ffffff14;border:1px solid #ffffff1a;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:500;transition:all .2s;display:inline-flex}.btn-secondary:hover:not(:disabled){background:#ffffff26;border-color:#fff3}.btn-outline-primary{border:1.5px solid var(--color-primary);color:var(--color-primary-hover);border-radius:var(--radius-md);font-family:var(--font-sans);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex}.btn-outline-primary:hover:not(:disabled){background:var(--color-primary-glow)}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:9999px;align-items:center;padding:6px 12px;font-size:13px;font-weight:600;display:inline-flex}.badge-success{background:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success)}.badge-danger{background:var(--color-danger-bg);border:1px solid var(--color-danger-border);color:var(--color-danger)}.badge-warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);color:var(--color-warning)}.consumption-chart-container{flex-direction:column;gap:15px;width:100%;display:flex}.consumption-bars{border-bottom:2px solid #ffffff1a;justify-content:space-around;align-items:flex-end;gap:12px;height:250px;padding:10px 0;display:flex}.consumption-bar-wrapper{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;display:flex}.consumption-bar-fill{background:linear-gradient(to top, var(--color-primary) 0%, var(--color-accent) 100%);border-radius:var(--radius-sm) var(--radius-sm) 0 0;transform-origin:bottom;width:85%;max-width:45px;min-height:4px;transition:transform 1.2s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .3s;position:relative;transform:scaleY(0)}.consumption-bar-fill:hover{background:linear-gradient(to top, var(--color-primary-hover) 0%, #22d3ee 100%);box-shadow:0 0 15px var(--color-accent-glow)}.consumption-bar-value{font-family:var(--font-mono);color:var(--color-text-primary);opacity:0;pointer-events:none;white-space:nowrap;background:#000000d9;border-radius:4px;padding:2px 6px;font-size:12px;font-weight:600;transition:opacity .2s;position:absolute;top:-26px;left:50%;transform:translate(-50%)}.consumption-bar-fill:hover .consumption-bar-value,.consumption-bar-fill:active .consumption-bar-value,.consumption-bar-fill:focus .consumption-bar-value{opacity:1}.consumption-bar-fill:focus{outline:1.5px solid var(--color-accent);box-shadow:0 0 10px var(--color-accent-glow)}.consumption-bar-label{color:var(--color-text-secondary);text-align:center;margin-top:8px;font-size:13px}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:100;background:#050810bf;justify-content:center;align-items:center;padding:20px;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);flex-direction:column;gap:20px;width:100%;max-width:600px;max-height:90vh;padding:28px;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleIn;display:flex;position:relative;overflow-y:auto}.modal-close{color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex;position:absolute;top:20px;right:20px}.modal-close:hover{color:#fff;background:#ffffff1a}.ticket-help-tabs{border-radius:var(--radius-md);background:#0003;border:1px solid #ffffff14;margin-bottom:20px;padding:4px;display:flex}.ticket-tab-btn{color:var(--color-text-secondary);font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex:1;padding:10px;font-size:14px;font-weight:600;transition:all .2s}.ticket-tab-btn.active{background:var(--color-primary);color:#fff}.ticket-mockup-new{color:#1f2937;border-radius:var(--radius-sm);background:#fff;border:1px solid #d1d5db;width:100%;padding:16px;font-family:Inter,sans-serif;font-size:10px;line-height:1.3;box-shadow:0 4px 20px #00000026}.ticket-header-new{border-bottom:2px solid #2563eb;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;display:flex}.ticket-logo-new{color:#2563eb;align-items:center;gap:4px;font-size:12px;font-weight:800;display:flex}.ticket-title-new{text-align:right;font-weight:700}.ticket-grid-new{grid-template-cols:repeat(4, 1fr);border:1px solid #9ca3af;gap:4px;margin-bottom:10px;display:grid}.ticket-cell{border:.5px solid #d1d5db;padding:4px}.ticket-cell-label{color:#6b7280;text-transform:uppercase;font-size:8px;font-weight:600}.ticket-cell-value{font-size:9px;font-weight:700}.ticket-highlight-blink{background:#f59e0b26;animation:1.5s infinite alternate neonBlink;border:2px dashed #f59e0b!important}.ticket-mockup-old{color:#374151;border-radius:var(--radius-sm);background:#fafafa;border:1px solid #cbd5e1;width:100%;padding:16px;font-family:monospace;font-size:9px;line-height:1.2;box-shadow:0 4px 20px #00000026}.ticket-header-old{text-align:center;border-bottom:1px dashed #64748b;margin-bottom:8px;padding-bottom:6px}.ticket-body-old{background:#fff;border:1px solid #94a3b8;margin-bottom:8px;padding:6px}.table-wrapper{width:100%;margin-top:15px;overflow-x:auto}.invoice-table{border-collapse:collapse;text-align:left;width:100%;font-size:15px}.invoice-table th{color:var(--color-text-secondary);border-bottom:1px solid #ffffff14;padding:14px 16px;font-weight:600}.invoice-table td{color:var(--color-text-primary);border-bottom:1px solid #ffffff0d;padding:16px}.invoice-table tbody tr{transition:background .2s}.invoice-table tbody tr:hover{background:#ffffff05}.toast{color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-premium);border-left:4px solid var(--color-primary);z-index:110;background:#1e293b;align-items:center;gap:12px;padding:14px 20px;font-size:15px;animation:.3s cubic-bezier(.175,.885,.32,1.275) slideUp;display:flex;position:fixed;bottom:24px;right:24px}.toast-error{border-left-color:var(--color-danger)}.toast-success{border-left-color:var(--color-success)}.flex-center{justify-content:center;align-items:center;display:flex}.font-mono{font-family:var(--font-mono)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes neonBlink{0%{border-color:#f59e0b;box-shadow:0 0 2px #f59e0b,inset 0 0 2px #f59e0b}to{background:#f59e0b4d;border-color:#ffc107;box-shadow:0 0 10px #f59e0b,inset 0 0 6px #f59e0b}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){body{padding:0}main{padding:0 12px 24px!important}header.glass-panel{gap:8px;width:95%!important;margin:12px auto!important;padding:12px 16px!important}header.glass-panel h1{font-size:15px!important}header.glass-panel p{font-size:10px!important}.glass-panel{padding:20px!important}.modal-content{width:95%!important;padding:16px!important}.invoice-table th,.invoice-table td{padding:10px 8px!important;font-size:12px!important}.badge{padding:3px 6px!important;font-size:10px!important}.btn-primary{padding:12px 14px;font-size:14px}.input-field{padding:12px 14px;font-size:16px}.btn-secondary{padding:10px 12px!important;font-size:13px!important}.consumption-bars{height:200px;gap:6px!important}.consumption-bar-fill{max-width:24px}.consumption-bar-label{font-size:9px!important}.consumption-bar-value{padding:1px 2px!important;font-size:8px!important}}.btn-spinner{border:2px solid #fff3;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.animate-bounce{animation:1s infinite bounce}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-20%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}.reveal{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transform:translateY(20px)}.reveal.active{opacity:1;transform:translateY(0)}.reveal.active .consumption-bar-fill{transform:scaleY(1)}@keyframes rowFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.invoice-row-animate{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) forwards rowFadeIn}@keyframes cardEntrance{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-card-entrance{opacity:0;animation:.8s cubic-bezier(.16,1,.3,1) forwards cardEntrance}@keyframes textReveal{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.animate-text-reveal{opacity:0;animation:.6s cubic-bezier(.16,1,.3,1) forwards textReveal}.qr-loader-container{color:#0f172a;text-align:center;border-radius:var(--radius-md);z-index:2;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.qr-spinner{border:3px solid #0f172a1a;border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:1s linear infinite qr-spin}@keyframes qr-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){.desktop-qr-code{display:none!important}}.mobile-only{display:none!important}.desktop-only{display:block!important}@media (width<=768px){.desktop-only{display:none!important}.mobile-only{flex-direction:column;gap:12px;display:flex!important}}.invoice-card{border-radius:var(--radius-md);background:#ffffff08;border:1px solid #ffffff0f;flex-direction:column;gap:12px;padding:16px;transition:transform .2s,border-color .2s;display:flex}.invoice-card:hover{border-color:#ffffff1f;transform:translateY(-2px)}.invoice-card-header{justify-content:space-between;align-items:center;display:flex}.invoice-card-ref{color:#fff;font-size:16px;font-weight:700}.invoice-card-details{border-radius:var(--radius-sm);background:#00000026;border:1px solid #ffffff08;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.invoice-card-detail-item{flex-direction:column;gap:4px;display:flex}.invoice-card-detail-label{color:var(--color-text-secondary);text-transform:uppercase;font-size:11px;font-weight:600}.invoice-card-detail-value{color:#fff;font-size:14px;font-weight:600}.invoice-card-actions{margin-top:4px;display:flex}.invoice-card-actions .btn-primary{justify-content:center;align-items:center;gap:8px;width:100%;padding:10px;font-size:14px;font-weight:600;display:flex}.ticket-animation-container-old{border-radius:var(--radius-md);background:#090d16;border:1px solid #ffffff14;justify-content:center;align-items:flex-start;width:100%;height:350px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0009}.ticket-image-old{transform-origin:22% 33.5%;box-sizing:border-box;border:1px solid #d1d5db;width:auto;height:94%;animation:8s ease-in-out infinite ticketImageZoomLoop;display:block;box-shadow:0 4px 20px #00000080}@keyframes ticketImageZoomLoop{0%,15%{transform:scale(1)translateY(0)translate(0)}22%,78%{transform:scale(3.5)}85%,to{transform:scale(1)translateY(0)translate(0)}}.ticket-circle-highlight-fixed{opacity:0;pointer-events:none;z-index:10;border:2px solid #ef4444;border-radius:4px;width:110px;height:20px;animation:8s ease-in-out infinite circleHighlightFixedLoop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #ef4444cc,inset 0 0 6px #ef444480}@keyframes circleHighlightFixedLoop{0%,20%{opacity:0;transform:translate(-50%,-50%)scale(1.4)}24%,74%{opacity:1;transform:translate(-50%,-50%)scale(1)}78%,to{opacity:0;transform:translate(-50%,-50%)scale(1.1)}}@keyframes greenPulse{0%{color:#16a34a;transform:scale(1)}to{color:#15803d;text-shadow:0 0 8px #16a34a80;transform:scale(1.06)}}.animate-pulse-green{animation:1s ease-in-out infinite alternate greenPulse;display:inline-block}.modal-header-container{align-items:center;gap:8px;margin-bottom:4px;display:flex}.modal-title{color:#fff;margin:0;font-size:20px;font-weight:600;line-height:1.25}@media (width<=640px){.modal-header-container{align-items:flex-start!important;gap:6px!important}.modal-title{font-size:16px!important;line-height:1.3!important}}.unified-bill-banner{-webkit-backdrop-filter:blur(12px);background:linear-gradient(135deg,#1e293b99 0%,#0f172abf 100%);border:1px solid #3b82f640;border-radius:16px;flex-direction:column;gap:20px;margin-bottom:24px;padding:24px;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000040,inset 0 1px #ffffff0d}.unified-bill-banner:before{content:"";background:linear-gradient(90deg,#0000,#3b82f680,#0000);height:2px;position:absolute;top:0;left:0;right:0}.unified-bill-banner:hover{border-color:#3b82f666;box-shadow:0 12px 36px #3b82f626,0 10px 30px #0000004d}.unified-bill-content{align-items:flex-start;gap:18px;display:flex}.unified-bill-icon-wrapper{color:#60a5fa;background:#3b82f626;border:1px solid #3b82f64d;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;min-width:48px;max-width:48px;height:48px;min-height:48px;max-height:48px;transition:all .3s;display:flex;box-shadow:0 4px 12px #3b82f61a}.unified-bill-banner:hover .unified-bill-icon-wrapper{color:#93c5fd;background:#3b82f638;transform:scale(1.05)}.unified-bill-icon{flex-shrink:0;width:24px;min-width:24px;height:24px;min-height:24px}.unified-bill-info{flex:1;min-width:0}.unified-bill-info h3{color:#fff;letter-spacing:.2px;margin:0;font-size:17px;font-weight:700}.unified-bill-info p{color:var(--color-text-secondary);margin:6px 0 0;font-size:13.5px;line-height:1.5}.unified-bill-button-container{border-top:1px solid #ffffff14;justify-content:flex-end;width:100%;margin-top:4px;padding-top:18px;display:flex}.unified-bill-btn{cursor:pointer;color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border:1px solid #ffffff1a;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:auto;padding:12px 24px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 14px #3b82f659}.unified-bill-btn:hover:not(:disabled){background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f673}.unified-bill-btn:active:not(:disabled){transform:translateY(0)}@media (width<=640px){.unified-bill-banner{border-radius:14px!important;gap:16px!important;padding:16px!important}.unified-bill-content{gap:12px!important}.unified-bill-icon-wrapper{border-radius:10px!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important}.unified-bill-icon{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important}.unified-bill-info h3{font-size:15px!important}.unified-bill-info p{margin-top:4px!important;font-size:12.5px!important}.unified-bill-button-container{padding-top:14px!important}.unified-bill-btn{width:100%!important;padding:12px 16px!important;font-size:13px!important}}@media (width<=768px){input,select,textarea,.input-field{font-size:16px!important}}