body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}.login-screen{min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2)}.login-card{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:1rem;padding:2.5rem;text-align:center;color:#fff;min-width:300px}.login-card h1{margin:0 0 1.5rem;font-size:1.8rem}.login-card form{display:flex;flex-direction:column;gap:1rem}.login-card input{padding:.75rem 1rem;border:1px solid rgba(255,255,255,.3);border-radius:.5rem;background:#ffffff1a;color:#fff;font-size:1rem;outline:none}.login-card input::placeholder{color:#ffffff80}.login-card button{padding:.75rem;border:none;border-radius:.5rem;background:#ffffff40;color:#fff;font-size:1rem;cursor:pointer;font-weight:600}.login-card button:hover{background:#ffffff59}.login-error{color:#ff6b6b;margin:0;font-size:.9rem}.App{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.App-header{background-color:#0000004d;padding:1.5rem 2rem;color:#fff;display:flex;justify-content:space-between;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.App-header h1{margin:0;font-size:2rem;font-weight:700}.header-buttons{display:flex;gap:.5rem}.quick-add-btn{padding:.75rem 1rem;background:#28a745;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;font-size:1.5rem;font-weight:600;transition:all .3s;line-height:1}.quick-add-btn:hover{background:#218838;transform:scale(1.05)}.quick-add-btn.work{background:#0f766e}.quick-add-btn.work:hover{background:#0d5f59}.quick-add-btn.home{background:#b45309}.quick-add-btn.home:hover{background:#92400e}.toggle-history-btn{padding:.75rem 1.5rem;background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s}.toggle-history-btn:hover{background:#ffffff4d;border-color:#ffffff80}.App-main{flex:1;max-width:900px;width:100%;margin:0 auto;padding:2rem;box-sizing:border-box}.refuel-form{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 40px #0003;box-sizing:border-box}.form-row{display:flex;gap:1rem;margin-bottom:1.5rem}.form-row.triple{gap:1rem}.form-group{flex:1;display:flex;flex-direction:column}.form-group label{font-weight:600;margin-bottom:.5rem;color:#333;font-size:.9rem}.stations-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.manage-stations-btn{padding:.5rem 1rem;background:#667eea33;color:#667eea;border:2px solid #667eea;border-radius:6px;cursor:pointer;font-size:1.2rem;font-weight:600;transition:all .3s}.manage-stations-btn:hover{background:#667eea;color:#fff;transform:translateY(-1px)}.form-group input{padding:1rem;font-size:1.1rem;border:2px solid #e0e0e0;border-radius:8px;outline:none;transition:all .3s;font-weight:500;box-sizing:border-box;width:100%}.form-group input[type=date]{min-height:48px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;padding:.75rem}.form-group input[type=date]::-webkit-date-and-time-value{text-align:left}.form-group input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6}.form-group input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-group input::placeholder{color:#999}.use-latest-km-btn{margin-top:.45rem;align-self:flex-start;padding:.45rem .7rem;border:1px solid #667eea;border-radius:6px;background:#667eea1a;color:#4f5fc4;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s}.use-latest-km-btn:hover{background:#667eea;color:#fff}.stations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem;margin-top:.5rem}.station-item{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:#f8f9fa;border-radius:8px;border:2px solid #e0e0e0;transition:all .3s;cursor:pointer}.station-item:hover{border-color:#667eea;background:#f0f4ff}.station-item.selected{border-color:#667eea;background:#e8edff;box-shadow:0 0 0 3px #667eea1a}.station-radio{display:flex;align-items:center;cursor:pointer;gap:.5rem}.station-radio input[type=radio]{width:20px;height:20px;cursor:pointer;accent-color:#667eea}.station-name{font-weight:500;color:#333;flex:1}.quick-fill-btn{padding:.5rem .75rem;background:#667eea;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .3s;align-self:flex-start}.quick-fill-btn:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.hint{font-size:.85rem;color:#666;font-style:italic;margin-top:.5rem}.submit-btn{width:100%;padding:1.25rem;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;cursor:pointer;transition:all .3s;margin-top:1rem;box-shadow:0 4px 15px #667eea66}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.history-section{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 40px #0003}.history-section h2{margin-top:0;color:#333;font-size:1.8rem}.refuels-list{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.refuel-card{background:#f8f9fa;border-radius:12px;padding:1.5rem;border-left:4px solid #667eea;transition:all .3s}.refuel-card:hover{box-shadow:0 4px 12px #0000001a;transform:translate(4px)}.refuel-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}.refuel-header-left{display:flex;flex-direction:column;gap:.25rem;flex:1}.refuel-date{font-weight:600;color:#667eea;font-size:1rem}.refuel-station{font-size:.9rem;color:#666;background:#fff;padding:.25rem .75rem;border-radius:6px}.refuel-details{display:flex;gap:1.5rem;flex-wrap:wrap}.refuel-detail{display:flex;gap:.5rem;align-items:center}.refuel-detail .label{font-weight:600;color:#666;font-size:.9rem}.refuel-detail .value{font-weight:700;color:#333;font-size:1.1rem}.refuel-notes{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e0e0e0;color:#666;font-style:italic}.refuel-actions{display:flex;gap:.5rem;flex-shrink:0;align-items:center}.edit-refuel-btn{background:#667eea26;border:1px solid rgba(102,126,234,.35);border-radius:6px;padding:.5rem;cursor:pointer;font-size:1.2rem;transition:all .3s;line-height:1}.edit-refuel-btn:hover:not(:disabled){background:#667eea40;border-color:#667eea80;transform:scale(1.05)}.delete-refuel-btn{background:#dc35451a;border:1px solid rgba(220,53,69,.3);border-radius:6px;padding:.5rem;cursor:pointer;font-size:1.2rem;transition:all .3s;line-height:1}.delete-refuel-btn:hover:not(:disabled){background:#dc354533;border-color:#dc354580;transform:scale(1.1)}.edit-refuel-btn:disabled,.delete-refuel-btn:disabled{opacity:.5;cursor:not-allowed}.edit-refuel-modal{position:fixed;inset:0;background:#0009;z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}.edit-refuel-content{background:#fff;border-radius:16px;padding:1.5rem 2rem;max-width:560px;width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0003}.edit-refuel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.edit-refuel-header h2{margin:0;font-size:1.35rem;color:#333}.edit-refuel-content .refuel-form{margin:0}.edit-refuel-buttons{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.25rem;padding-top:1rem;border-top:1px solid #eee}.cancel-edit-btn{padding:.6rem 1.2rem;border-radius:8px;border:1px solid #ccc;background:#f5f5f5;cursor:pointer;font-size:1rem}.cancel-edit-btn:hover{background:#eee}.empty-state{text-align:center;color:#999;padding:3rem;font-size:1.1rem}.quick-add-modal{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.quick-add-content{background:linear-gradient(135deg,#667eea,#764ba2);width:100%;height:100%;display:flex;flex-direction:column;padding:2rem;position:relative;overflow-y:auto}@media(max-width:768px){.quick-add-content{padding:1.5rem 1rem}}.quick-add-close{position:absolute;top:1rem;right:1rem;background:#fff3;border:none;color:#fff;font-size:2rem;width:50px;height:50px;border-radius:50%;cursor:pointer;transition:all .3s;line-height:1}.quick-add-close:hover{background:#ffffff4d;transform:rotate(90deg)}.quick-add-steps{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem}.step-indicator{width:40px;height:40px;border-radius:50%;background:#fff3;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem;transition:all .3s}.step-indicator.active{background:#fff;color:#667eea;transform:scale(1.2)}@media(max-width:768px){.step-indicator{width:36px;height:36px;font-size:1rem}}.quick-add-step{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;width:100%;padding:0 1rem;box-sizing:border-box}@media(max-width:768px){.quick-add-step{gap:1.5rem;justify-content:flex-start;padding:2rem .5rem 0}}.quick-add-step h2{color:#fff;font-size:2.5rem;margin:0;text-align:center;line-height:1.2}@media(max-width:768px){.quick-add-step h2{font-size:1.8rem}}.quick-input{width:100%;max-width:400px;padding:2rem;font-size:3rem;text-align:center;border:3px solid rgba(255,255,255,.3);border-radius:20px;background:#ffffff1a;color:#fff;outline:none;transition:all .3s;-webkit-appearance:none;-moz-appearance:textfield;box-sizing:border-box}@media(max-width:768px){.quick-input{font-size:2rem;padding:1rem .75rem;max-width:100%;width:calc(100% - 1rem)}}.quick-input::placeholder{color:#ffffff80}.quick-input:focus{border-color:#fff;background:#fff3}.quick-input.compact{max-width:none;padding:1rem;font-size:1.35rem;border-radius:12px;text-align:left}.work-quick-content{justify-content:center}.work-quick-form{max-width:560px;margin:0 auto;justify-content:center}.home-monthly-content{justify-content:center}.home-monthly-form{max-width:620px;margin:0 auto;justify-content:center}.home-monthly-summary{width:100%;display:flex;flex-direction:column;gap:.75rem}.home-monthly-row{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.25rem;border-radius:12px;background:#ffffff29;border:2px solid rgba(255,255,255,.2);color:#fff}.home-monthly-row span{font-weight:700;opacity:.85}.home-monthly-row strong{text-align:right;font-size:1.15rem}.home-monthly-row.highlight{background:#ffffff47;border-color:#ffffff73}.home-monthly-confirmed{width:100%;padding:.9rem 1rem;border-radius:12px;background:#ffffff2e;color:#fff;text-align:center;font-weight:700}.work-quick-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.work-quick-field{color:#fff;display:flex;flex-direction:column;gap:.5rem;font-weight:700}.work-quick-field span{font-size:.95rem;opacity:.9}.work-quick-result{width:100%;max-width:400px;min-height:88px;padding:1rem 1.25rem;border-radius:16px;background:#ffffff29;border:2px solid rgba(255,255,255,.24);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;box-sizing:border-box}.work-quick-result.wide{max-width:620px}.work-quick-result span{font-size:1rem;opacity:.85}.work-quick-result strong{font-size:2rem}.price-type-toggle{display:flex;gap:1rem;margin-bottom:1rem}.price-type-toggle button{padding:1rem 2rem;border:2px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;border-radius:12px;cursor:pointer;font-size:1.2rem;font-weight:600;transition:all .3s}.price-type-toggle button.active{background:#fff;color:#667eea;border-color:#fff}.quick-buttons{display:flex;gap:1rem;width:100%;max-width:400px}.quick-btn-back,.quick-btn-next,.quick-btn-save{flex:1;padding:1.5rem;font-size:1.5rem;font-weight:700;border:none;border-radius:12px;cursor:pointer;transition:all .3s;min-height:56px}@media(max-width:768px){.quick-btn-back,.quick-btn-next,.quick-btn-save{width:100%;font-size:1.1rem;padding:1.2rem}}.quick-btn-back{background:#fff3;color:#fff}.quick-btn-back:hover{background:#ffffff4d}.quick-btn-next,.quick-btn-save{background:#fff;color:#667eea}.quick-btn-next:hover,.quick-btn-save:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ffffff4d}.quick-btn-next:disabled,.quick-btn-save:disabled{opacity:.5;cursor:not-allowed;transform:none}.quick-stations-list{width:100%;max-width:500px;display:flex;flex-direction:column;gap:1rem;max-height:50vh;overflow-y:auto}.quick-station-btn{padding:1.5rem;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;cursor:pointer;transition:all .3s;text-align:left;display:flex;flex-direction:column;gap:.5rem}.quick-station-btn:hover{background:#fff3;transform:translate(5px)}.quick-station-btn.selected{background:#fff;color:#667eea;border-color:#fff}.quick-station-btn.skip{background:#fff3;text-align:center;font-weight:600}.quick-station-btn .station-name{font-size:1.3rem;font-weight:600}.quick-station-btn .station-location{font-size:1rem;opacity:.8}.no-stations{color:#fff;text-align:center;font-size:1.2rem;opacity:.7}@media(max-width:768px){.App-header{align-items:stretch;flex-direction:column;gap:.85rem;padding:.85rem}.App-header h1{font-size:1.35rem;line-height:1.2;text-align:center}.header-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;width:100%}.quick-add-btn,.toggle-history-btn,.toggle-stats-btn{align-items:center;border-radius:8px;display:flex;justify-content:center;min-height:44px;padding:.65rem;width:100%}.quick-add-btn{font-size:1.35rem}.toggle-history-btn,.toggle-stats-btn{font-size:.95rem;grid-column:span 2;line-height:1.1;white-space:nowrap}.App-main,.refuel-form{padding:1rem}.form-row{flex-direction:column;gap:0}.form-row.triple{flex-direction:column}.form-group{margin-bottom:.75rem}.form-group input{padding:.75rem .5rem;font-size:16px}.form-group input[type=date]{padding:.5rem;min-height:44px}.stations-grid{grid-template-columns:1fr}.refuel-header{flex-direction:column;align-items:flex-start}.refuel-details{flex-direction:column;gap:.75rem}.App-main,.quick-add-content{padding:1rem}.quick-add-step h2{font-size:2rem}.quick-input{font-size:2rem;padding:1.5rem}.work-quick-grid{grid-template-columns:1fr}.quick-input.compact{font-size:1rem;padding:.85rem}}.stations-manager-modal{position:fixed;inset:0;background:#000c;z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s}.stations-manager-content{background:#fff;border-radius:16px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 40px #0000004d}.stations-manager-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:2px solid #f0f0f0}.stations-manager-header h2{margin:0;color:#333;font-size:1.5rem}.close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666;padding:.5rem;line-height:1;transition:all .3s}.close-btn:hover{color:#333;transform:rotate(90deg)}.stations-manager{padding:1.5rem;overflow-y:auto;flex:1}.add-station-form{background:#f8f9fa;padding:1.5rem;border-radius:12px;margin-bottom:2rem}.add-station-form h3{margin:0 0 1rem;color:#333;font-size:1.2rem}.station-input{width:100%;padding:.75rem;margin-bottom:.75rem;font-size:1rem;border:2px solid #ddd;border-radius:8px;outline:none;transition:all .3s;box-sizing:border-box}.station-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.add-station-form button{width:100%;padding:.75rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}.add-station-form button:hover:not(:disabled){background:#5568d3;transform:translateY(-1px)}.add-station-form button:disabled{opacity:.6;cursor:not-allowed}.stations-list-manager h3{margin:0 0 1rem;color:#333;font-size:1.2rem}.stations-manager-list{display:flex;flex-direction:column;gap:.75rem}.station-manager-item{background:#f8f9fa;padding:1rem;border-radius:8px;border-left:4px solid #667eea}.station-info{display:flex;flex-direction:column;gap:.5rem}.station-name-manager{font-weight:600;color:#333;font-size:1.1rem}.station-location-manager{color:#666;font-size:.9rem}.station-price-manager{color:#667eea;font-size:.9rem;font-weight:500}.empty-message{text-align:center;color:#999;padding:2rem;font-style:italic}.stats-section{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 40px #0003}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0}.stats-header h2{margin:0;color:#333;font-size:1.8rem}.refresh-stats-btn{background:#667eea1a;border:2px solid #667eea;border-radius:8px;padding:.5rem 1rem;font-size:1.2rem;cursor:pointer;transition:all .3s;line-height:1}.refresh-stats-btn:hover{background:#667eea;color:#fff;transform:rotate(180deg)}.stats-loading,.stats-empty{text-align:center;color:#999;padding:3rem;font-size:1.1rem}.stats-card{margin-bottom:2rem;padding:1.5rem;background:#f8f9fa;border-radius:12px;border-left:4px solid #667eea}.stats-card h3{margin:0 0 1.5rem;color:#333;font-size:1.4rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.stat-item{background:#fff;padding:1rem;border-radius:8px;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 2px 4px #0000000d}.stat-label{font-size:.85rem;color:#666;font-weight:500}.stat-value{font-size:1.3rem;font-weight:700;color:#333}.stat-value.highlight{color:#667eea}.stat-value.success{color:#28a745}.stat-value.warning{color:#ffc107}.monthly-stats{display:flex;flex-direction:column;gap:1rem}.month-card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px #0000001a;transition:all .3s}.month-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.month-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #f0f0f0}.month-header h4{margin:0;color:#667eea;font-size:1.2rem}.month-count{background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:600}.month-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem}.month-detail{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#f8f9fa;border-radius:6px}.month-detail .label{font-size:.85rem;color:#666;font-weight:500}.month-detail .value{font-weight:700;color:#333;font-size:.95rem}.month-detail .value.highlight{color:#667eea}.month-detail .value.success{color:#28a745}.month-detail .value.warning{color:#ffc107}.station-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.station-stat-card{background:#fff;padding:1.5rem;border-radius:12px;box-shadow:0 2px 8px #0000001a;border-left:4px solid #667eea;transition:all .3s}.station-stat-card:hover{box-shadow:0 4px 12px #00000026;transform:translate(4px)}.station-stat-header{margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid #f0f0f0}.station-stat-header h4{margin:0 0 .25rem;color:#333;font-size:1.1rem}.station-location-stat{font-size:.85rem;color:#666}.station-stat-details{display:flex;flex-direction:column;gap:.5rem}.station-stat-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#f8f9fa;border-radius:6px}.station-stat-item .label{font-size:.85rem;color:#666;font-weight:500}.station-stat-item .value{font-weight:700;color:#333;font-size:.95rem}.station-stat-item .value.highlight{color:#667eea}.price-trend{display:flex;flex-direction:column;gap:.75rem}.trend-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d;transition:all .3s}.trend-item:hover{box-shadow:0 4px 8px #0000001a;transform:translate(4px)}.trend-month{font-weight:600;color:#333}.trend-price{font-weight:700;color:#667eea;font-size:1.1rem}.toggle-stats-btn{padding:.75rem 1.5rem;background:#fff3;color:#fff;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s}.toggle-stats-btn:hover{background:#ffffff4d;border-color:#ffffff80}@media(max-width:768px){.stats-grid,.month-details,.station-stats{grid-template-columns:1fr}.month-header{flex-direction:column;align-items:flex-start;gap:.5rem}.stats-header{flex-direction:column;align-items:flex-start;gap:1rem}}