*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{font-size:16px;height:100%;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0f172a;color:#f1f5f9;min-height:100%;line-height:1.6;overscroll-behavior-y:none;touch-action:pan-x pan-y}#root{min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;letter-spacing:-.025em;color:#f9fafb}h1{font-size:1.875rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}@media(min-width:768px){h1{font-size:2.25rem}h2{font-size:1.875rem}h3{font-size:1.5rem}}.app-container{max-width:480px;margin:0 auto;position:relative}@media(min-width:768px){.app-container{max-width:768px}}@media(min-width:1024px){.app-container{max-width:1024px}}@media(min-width:1280px){.app-container{max-width:1200px}}.mobile-header{position:sticky;top:0;background:#1f2937;border-bottom:1px solid #374151;box-shadow:0 1px 3px #0000004d;z-index:30}.mobile-header-logo{display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;background:#0f172a}.mobile-header-logo img{height:2rem;width:auto}@media(min-width:1024px){.mobile-header-logo img{height:2.5rem}}.mobile-header-nav{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;height:3.5rem}.mobile-header-left{display:flex;align-items:center;gap:.75rem;flex:1}.mobile-header-right{display:flex;align-items:center;gap:.5rem}.mobile-header-title{font-size:1.25rem;font-weight:700;color:#f3f4f6}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:1rem;letter-spacing:-.01em;min-height:48px;border:none;cursor:pointer;transition:all .2s ease-out;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.98)}.btn-primary{background-color:#059669;color:#fff;box-shadow:0 1px 2px #0000000d}.btn-primary:hover:not(:disabled){background-color:#047857;box-shadow:0 4px 6px #0000001a}.btn-primary:focus{box-shadow:0 0 0 4px #10b9814d}.btn-secondary{background-color:#374151;color:#f9fafb}.btn-secondary:hover:not(:disabled){background-color:#4b5563}.btn-danger{background-color:#dc2626;color:#fff}.btn-danger:hover:not(:disabled){background-color:#b91c1c}.btn-ghost{background-color:transparent;color:#d1d5db}.btn-ghost:hover:not(:disabled){background-color:#1f2937}.icon-btn{min-width:48px;min-height:48px;padding:.5rem;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:.5rem;cursor:pointer;color:#f3f4f6;font-size:1.75rem;transition:background-color .2s}.icon-btn:hover{background-color:#374151}.card{background-color:#1f2937;border-radius:1rem;border:1px solid #374151;padding:1rem;box-shadow:0 1px 2px #0000004d;transition:box-shadow .2s}@media(min-width:768px){.card{padding:1.25rem}}@media(min-width:1024px){.card{padding:1.5rem}}.card:hover{box-shadow:0 4px 6px #0006}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1rem 0}@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}.stat-card{display:flex;align-items:center;justify-content:space-between;background:#1f2937;border:1px solid #374151;border-radius:1rem;padding:1rem}.stat-card-content{flex:1}.stat-card-title{font-size:.875rem;color:#9ca3af;margin-bottom:.25rem}.stat-card-value{font-size:1.5rem;font-weight:700}@media(min-width:1024px){.stat-card-value{font-size:1.875rem}}.stat-card-value.emerald{color:#10b981}.stat-card-value.blue{color:#3b82f6}.stat-card-value.purple{color:#a855f7}.stat-card-value.orange{color:#f97316}.stat-card-icon{font-size:2.5rem;opacity:.2}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.875rem;font-weight:600;color:#d1d5db;margin-bottom:.5rem}.form-input,.form-select{width:100%;padding:.75rem 1rem;border-radius:.75rem;border:2px solid #4b5563;background-color:#1f2937;color:#f9fafb;font-size:1rem;min-height:48px;transition:all .2s}.form-input:focus,.form-select:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 4px #10b98133}.form-input-error{border-color:#ef4444}.form-error-message{color:#ef4444;font-size:.875rem;margin-top:.25rem}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#0f172ae6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #374151;z-index:40}.bottom-nav-container{max-width:480px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;height:4rem}@media(min-width:768px){.bottom-nav-container{max-width:768px}}@media(min-width:1024px){.bottom-nav{position:relative;top:0;background:#1f2937;border-top:none;border-bottom:1px solid #374151}.bottom-nav-container{max-width:1024px;height:4.5rem;padding:0 1rem}.bottom-nav-item{flex-direction:row;gap:.75rem;padding:.75rem 1.5rem;border-radius:.75rem}.bottom-nav-item:hover{background:#374151}.bottom-nav-icon{margin-bottom:0}.bottom-nav-label{font-size:1rem}}@media(min-width:1280px){.bottom-nav-container{max-width:1200px}}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;min-height:48px;color:#6b7280;text-decoration:none;transition:color .2s}.bottom-nav-item.active{color:#10b981}.bottom-nav-icon{font-size:1.25rem;margin-bottom:.125rem}@media(min-width:420px){.bottom-nav-icon{font-size:1.5rem;margin-bottom:.25rem}}.bottom-nav-label{font-size:.625rem;font-weight:500;white-space:nowrap}@media(min-width:420px){.bottom-nav-label{font-size:.75rem}}.mobile-menu-overlay{position:fixed;inset:0;background:#00000080;z-index:50;opacity:0;transition:opacity .3s;pointer-events:none}.mobile-menu-overlay.open{opacity:1;pointer-events:auto}.mobile-menu{position:fixed;top:0;left:0;bottom:0;width:85%;max-width:480px;background:#1f2937;z-index:51;transform:translate(-100%);transition:transform .3s;display:flex;flex-direction:column;box-shadow:4px 0 12px #00000080}@media(min-width:768px){.mobile-menu{max-width:520px}}@media(min-width:1024px){.mobile-menu{width:30%;max-width:480px}}.mobile-menu.open{transform:translate(0)}.mobile-menu-header{background:#0f172a;padding:1.5rem}.mobile-menu-logo img{height:2rem}.mobile-menu-items{flex:1;overflow-y:auto;padding:1rem 0}.mobile-menu-item{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;color:#f3f4f6;text-decoration:none;border:none;background:transparent;border-left:4px solid transparent;transition:all .2s;font-size:1.125rem;font-weight:500;width:100%;text-align:left;cursor:pointer}.mobile-menu-item:hover{background:#374151;color:#fff}.mobile-menu-item.active{background:#10b98126;color:#10b981;border-left-color:#10b981;font-weight:600}.mobile-menu-item svg{width:1.5rem;height:1.5rem;flex-shrink:0}.mobile-menu-footer{padding:1.5rem;border-top:1px solid #374151;text-align:center;color:#6b7280;font-size:.875rem}.transaction-list{display:flex;flex-direction:column;gap:.75rem}@media(min-width:1024px){.transaction-list{gap:1rem}}.transaction-item{display:flex;align-items:center;justify-content:space-between;background:#1f2937;border:1px solid #374151;border-radius:1rem;padding:1rem}.transaction-content{flex:1}.transaction-amount{font-size:1.25rem;font-weight:700;color:#10b981;margin-bottom:.25rem}.transaction-meta{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#9ca3af}.transaction-employee{color:#d1d5db}.transaction-delete{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;color:#ef4444;font-size:1.5rem;background:transparent;border:none;cursor:pointer;border-radius:.5rem;transition:background-color .2s}.transaction-delete:hover{background-color:#ef44441a}.fab{position:fixed;bottom:5rem;left:50%;transform:translate(-50%);background-color:#059669;color:#fff;border-radius:1rem;box-shadow:0 4px 12px #0000004d;padding:1rem 2rem;display:flex;align-items:center;gap:.75rem;font-size:1.125rem;font-weight:700;border:none;cursor:pointer;z-index:30;transition:all .2s}@media(min-width:1024px){.fab{bottom:2rem;right:2rem;left:auto;transform:none}.fab:active{transform:scale(.95)}}.fab:hover{background-color:#047857;box-shadow:0 6px 16px #0006}.fab:active{transform:translate(-50%) scale(.95)}.fab-icon{font-size:1.875rem}.page{min-height:100vh;background:#0f172a;padding-bottom:5rem}@media(min-width:1024px){.page{padding-bottom:2rem}}.page-content{padding:1rem}@media(min-width:768px){.page-content{padding:1.5rem}}@media(min-width:1024px){.page-content{padding:2rem}}.page-content>*+*{margin-top:1.5rem}.text-center{text-align:center}.text-right{text-align:right}.font-bold{font-weight:700}.font-semibold{font-weight:600}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.hidden{display:none}.loading-skeleton{background:linear-gradient(90deg,#1f2937 25%,#374151,#1f2937 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:.5rem}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.toast{position:fixed;bottom:6rem;left:50%;transform:translate(-50%);background:#1f2937;color:#f9fafb;padding:1rem 1.5rem;border-radius:.75rem;box-shadow:0 4px 12px #0000004d;border:1px solid #374151;z-index:100;max-width:90%;animation:slideUp .3s ease-out}@media(min-width:1024px){.toast{bottom:2rem;right:2rem;left:auto;transform:none;max-width:400px;animation:slideInRight .3s ease-out}}.toast.error{background:#7f1d1d;border-color:#991b1b}.toast.success{background:#065f46;border-color:#047857}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.date-picker{display:flex;align-items:center;gap:.5rem;background:#1f2937;border:1px solid #374151;border-radius:.75rem;padding:.75rem}.date-picker input[type=date]{flex:1;background:transparent;border:none;color:#f9fafb;font-size:1rem;padding:.5rem}.date-picker input[type=date]:focus{outline:none}.date-nav-btn{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;background:#374151;border:none;border-radius:.5rem;color:#f9fafb;cursor:pointer;transition:background-color .2s}.date-nav-btn:hover{background:#4b5563}.filter-container{background:#1f2937;border:1px solid #374151;border-radius:1rem;padding:1rem}.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}@media(min-width:768px){.filter-row{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.filter-row{grid-template-columns:repeat(4,1fr)}}.filter-row.full{grid-template-columns:1fr}.filter-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}.empty-state{text-align:center;padding:3rem 1rem;color:#6b7280}.empty-state-icon{font-size:4rem;margin-bottom:1rem}.empty-state-text{font-size:1rem}.quick-select-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}@media(min-width:768px){.quick-select-grid{grid-template-columns:repeat(4,1fr);gap:.75rem}}@media(min-width:1024px){.quick-select-grid{grid-template-columns:repeat(5,1fr);gap:1rem}}.quick-select-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#374151;border:2px solid #4b5563;border-radius:.75rem;padding:.75rem .5rem;min-height:75px;cursor:pointer;transition:all .2s}.quick-select-item:hover{background:#4b5563;border-color:#10b981;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.quick-select-item:active{transform:translateY(0)}.quick-select-amount{font-size:1.25rem;font-weight:700;color:#10b981;margin-bottom:.25rem}@media(min-width:768px){.quick-select-amount{font-size:1.5rem}}@media(min-width:1024px){.quick-select-amount{font-size:1.875rem}}.quick-select-label{font-size:.75rem;color:#d1d5db;text-align:center;line-height:1.2}@media(min-width:768px){.quick-select-label{font-size:.875rem}}@media(max-width:768px){.hide-mobile{display:none!important}}@media(min-width:769px){.hide-desktop{display:none!important}}