@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)}}.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}