*{margin:0;padding:0;box-sizing:border-box}body{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:linear-gradient(135deg,#0f172a,#1e293b,#334155);min-height:100vh;color:#1e293b;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(59,130,246,.05) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(139,92,246,.05) 0%,transparent 50%),radial-gradient(circle at 100% 0%,rgba(6,182,212,.03) 0%,transparent 50%);pointer-events:none;z-index:0;animation:gradientShift 15s ease-in-out infinite}@keyframes gradientShift{0%,to{opacity:1}50%{opacity:.8}}#root{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}.app-container{flex:1;display:flex;flex-direction:column;background:none}.status-message{padding:1rem 2rem;font-size:.9rem;opacity:.85;text-align:center;border-bottom:1px solid rgba(0,0,0,.06);background:#f9f9f9;animation:slideDown .5s cubic-bezier(.34,1.56,.64,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.status-message.offline{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;border-bottom:1px solid rgba(156,28,28,.2)}.status-message.online{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#166534;border-bottom:1px solid rgba(34,197,94,.2)}.header{background:linear-gradient(135deg,#0f172a99,#1e293b99);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:1.2rem 2rem;color:#fff;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0003;position:relative;overflow:hidden}.header:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(59,130,246,.04) 0%,transparent 70%);animation:float 20s ease-in-out infinite}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,-30px)}}.header h1{font-size:1.8rem;margin-bottom:.2rem;font-weight:700;letter-spacing:-1px;background:linear-gradient(135deg,#fff,#e0e7ff,#dbeafe);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInDown .8s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:1;filter:drop-shadow(0 4px 12px rgba(59,130,246,.3))}.header p{font-size:.9rem;opacity:.95;margin-bottom:0;font-weight:500;animation:fadeInUp .8s cubic-bezier(.34,1.56,.64,1) .2s both;position:relative;z-index:1;color:#fffffff2}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-content{flex:1;display:flex;justify-content:stretch;align-items:stretch;padding:1.5rem;gap:1.5rem;animation:fadeIn 1s ease-out .3s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card{background:#fff;border-radius:12px;box-shadow:0 4px 12px #3b82f614;width:100%;overflow:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(59,130,246,.1);transition:all .4s cubic-bezier(.34,1.56,.64,1);transform:scale(1) translateY(0);animation:cardSlideIn .7s cubic-bezier(.34,1.56,.64,1) .2s both;display:flex;flex-direction:column}@keyframes cardSlideIn{0%{opacity:0}to{opacity:1}}.card:hover{box-shadow:none;transform:scale(1) translateY(0)}.tabs{display:flex;border-bottom:2px solid rgba(59,130,246,.1);background:linear-gradient(90deg,#f8fafc,#f1f5f9);padding:.5rem;gap:.5rem;position:relative}.tab-button{flex:1;padding:1rem;background:transparent;border:none;cursor:pointer;font-size:1rem;font-weight:600;color:#94a3b8;transition:all .4s cubic-bezier(.34,1.56,.64,1);border-radius:12px 12px 0 0;border-bottom:3px solid transparent;position:relative;z-index:2}.tab-button:hover{color:#3b82f6;background:#3b82f614;transform:translateY(-2px)}.tab-button.active{color:#3b82f6;background:#fff;border-bottom-color:#3b82f6;box-shadow:0 -2px 8px #3b82f626;animation:tabActivate .4s cubic-bezier(.34,1.56,.64,1)}@keyframes tabActivate{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.tab-content{padding:2rem;animation:contentFadeIn .5s ease-out}@keyframes contentFadeIn{0%{opacity:0}to{opacity:1}}.calculator-container{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch;min-height:calc(100vh - 300px)}.calculator-form{display:flex;flex-direction:column;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px #3b82f60d;border:1px solid rgba(59,130,246,.08)}.calculator-results{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto;padding:2rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;border:1px solid rgba(59,130,246,.1);box-shadow:0 2px 8px #3b82f60d}.calculator-results::-webkit-scrollbar{width:8px}.calculator-results::-webkit-scrollbar-track{background:transparent}.calculator-results::-webkit-scrollbar-thumb{background:#3b82f64d;border-radius:4px}.calculator-results::-webkit-scrollbar-thumb:hover{background:#3b82f680}.form-group{margin-bottom:1.5rem;animation:slideInLeft .5s ease-out both}.form-group:nth-child(1){animation-delay:.1s}.form-group:nth-child(2){animation-delay:.2s}.form-group:nth-child(3){animation-delay:.3s}.form-group:nth-child(4){animation-delay:.4s}.form-group:nth-child(5){animation-delay:.5s}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#1e293b;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px;color:#64748b}.form-group input,.form-group select{width:100%;padding:.875rem;border:2px solid #e2e8f0;border-radius:10px;font-size:1rem;transition:all .4s cubic-bezier(.34,1.56,.64,1);font-family:inherit;background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#1e293b}.form-group input::placeholder{color:#cbd5e1}.form-group input:hover,.form-group select:hover{border-color:#cbd5e1;background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f614}.form-group input:focus,.form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f633,inset 0 1px 2px #00000005;background:#fff;transform:translateY(-2px) scale(1.01)}.button-group{display:flex;gap:1rem;margin-top:2rem;animation:slideInUp .5s ease-out .6s both}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn{flex:1;padding:.95rem 1.5rem;border:none;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .4s cubic-bezier(.34,1.56,.64,1);text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:#ffffff4d;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,.5);color:#fff;box-shadow:0 8px 32px #3b82f659,inset 0 0 10px #ffffff26;font-weight:700;letter-spacing:.5px}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#3b82f6b3;box-shadow:0 14px 48px #3b82f666,inset 0 0 15px #fff3;transform:translateY(-6px) scale(1.03)}.btn-primary:active:not(:disabled){transform:translateY(-2px) scale(.98)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:#f1f5f926;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(59,130,246,.25);color:#3b82f6;box-shadow:0 8px 24px #3b82f626,inset 0 0 10px #ffffff14;font-weight:700}.btn-secondary:hover:not(:disabled){background:#f1f5f940;border-color:#3b82f666;box-shadow:0 12px 35px #3b82f633,inset 0 0 15px #ffffff1f;transform:translateY(-4px) scale(1.02)}.btn-success{background:#10b98126;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.3);color:#10b981;box-shadow:0 8px 25px #10b98133,inset 0 0 10px #ffffff14;flex:.5}.btn-success:hover:not(:disabled){background:#10b98140;border-color:#10b98180;box-shadow:0 14px 40px #10b9814d,inset 0 0 15px #ffffff1f;transform:translateY(-4px) scale(1.02)}.btn-danger{background:#ef444426;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(239,68,68,.3);color:#ef4444;box-shadow:0 8px 25px #ef444433,inset 0 0 10px #ffffff14;flex:.5}.btn-danger:hover:not(:disabled){background:#ef444440;border-color:#ef444480;box-shadow:0 14px 40px #ef44444d,inset 0 0 15px #ffffff1f;transform:translateY(-4px) scale(1.02)}.loading{text-align:center;padding:2rem;color:#999}.spinner{display:inline-block;width:50px;height:50px;border:4px solid #f0f0f0;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 10px #3b82f64d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b;padding:1rem;border-radius:6px;margin-bottom:1rem;border-left:4px solid #dc2626;animation:shake .5s ease-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.success{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#166534;padding:1rem;border-radius:6px;margin-bottom:1rem;border-left:4px solid #22c55e;animation:slideInDown .5s ease-out}.warning{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;padding:1rem;border-radius:6px;margin-bottom:1rem;border-left:4px solid #f59e0b}.result-box{background:linear-gradient(135deg,#f8fafc,#f1f5f9);padding:2rem;border-radius:16px;margin-top:1.5rem;box-shadow:0 8px 32px #3b82f626,0 0 1px #ffffff80 inset;border:1px solid rgba(59,130,246,.2);animation:slideUp .6s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.result-amount{font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem;letter-spacing:-1px;animation:countUp .8s ease-out}@keyframes countUp{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.result-details{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.result-item{background:#fff;padding:1.2rem;border-radius:12px;box-shadow:0 4px 12px #3b82f614;border:1px solid rgba(59,130,246,.1);transition:all .4s cubic-bezier(.34,1.56,.64,1);animation:scaleIn .5s ease-out both}.result-item:nth-child(1){animation-delay:.1s}.result-item:nth-child(2){animation-delay:.2s}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.result-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #3b82f62e;border-color:#3b82f64d}.result-item-label{font-size:.85rem;color:#94a3b8;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.result-item-value{font-size:1.5rem;font-weight:700;color:#1e293b}.rules-list{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;max-height:400px;overflow-y:auto;padding:0;margin-top:1.5rem;border:1px solid rgba(59,130,246,.1);box-shadow:inset 0 2px 4px #00000005}.rule-item{padding:1.2rem;border-bottom:1px solid rgba(59,130,246,.08);display:flex;justify-content:space-between;align-items:center;transition:all .4s cubic-bezier(.34,1.56,.64,1);background:#fff;animation:slideInLeft .5s ease-out both}.rule-item:hover{background:linear-gradient(135deg,#f8fafc,#f1f5f9);transform:translate(8px);box-shadow:0 4px 12px #3b82f61a}.rule-item:last-child{border-bottom:none}.rule-info{flex:1}.rule-id{font-weight:700;color:#3b82f6;margin-bottom:.25rem;font-size:1rem}.rule-desc{font-size:.9rem;color:#94a3b8}.rule-discount{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:.6rem 1.2rem;border-radius:24px;font-weight:700;font-size:.9rem;box-shadow:0 4px 12px #3b82f64d;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.rule-discount:hover{transform:scale(1.08) rotate(2deg);box-shadow:0 8px 24px #3b82f666}.editor-container{position:relative}.editor-actions{display:flex;gap:1rem;margin-bottom:1rem;animation:slideInUp .5s ease-out;flex-wrap:wrap}.editor-actions .btn{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#3b82f6;box-shadow:0 8px 32px #1f268733,inset 0 0 10px #ffffff1a;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.editor-actions .btn:hover:not(:disabled){background:#3b82f626;border-color:#3b82f666;box-shadow:0 12px 40px #3b82f64d,inset 0 0 15px #ffffff26;transform:translateY(-4px) scale(1.02)}.editor-actions .btn-secondary{background:#f1f5f926;border:1px solid rgba(59,130,246,.25);color:#3b82f6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.editor-actions .btn-success{background:#10b98126;border:1px solid rgba(16,185,129,.3);color:#10b981;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.editor-actions .btn-success:hover:not(:disabled){background:#10b98140;border-color:#10b98180;box-shadow:0 12px 40px #10b98140,inset 0 0 15px #ffffff1a}.editor-actions .btn-danger{background:#ef444426;border:1px solid rgba(239,68,68,.3);color:#ef4444;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.editor-actions .btn-danger:hover:not(:disabled){background:#ef444440;border-color:#ef444480;box-shadow:0 12px 40px #ef444440,inset 0 0 15px #ffffff1a}textarea{width:100%;min-height:400px;padding:1.2rem;border:2px solid #e2e8f0;border-radius:12px;font-family:Monaco,Menlo,Courier New,monospace;font-size:.9rem;resize:vertical;background:linear-gradient(135deg,#f8fafc,#f1f5f9);transition:all .4s cubic-bezier(.34,1.56,.64,1);line-height:1.6;color:#1e293b}textarea::placeholder{color:#cbd5e1}textarea:hover{border-color:#cbd5e1;background:#fff;box-shadow:0 4px 12px #3b82f614}textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 4px #3b82f633,inset 0 1px 2px #00000005;background:#fff;transform:scale(1.01)}.validation-info{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border:1px solid rgba(59,130,246,.3);color:#1e40af;padding:1rem;border-radius:6px;margin-top:1rem;font-size:.9rem}.json-display{background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;border:1px solid rgba(59,130,246,.1);box-shadow:0 8px 32px #3b82f626,0 0 1px #ffffff80 inset;overflow:hidden;animation:slideUp .6s cubic-bezier(.34,1.56,.64,1)}.json-content{font-family:Monaco,Menlo,Courier New,monospace;font-size:.9rem;padding:1.5rem;margin:0;overflow-x:auto;line-height:1.6;color:#1e293b;background:transparent;white-space:pre-wrap;word-wrap:break-word}.json-content::-webkit-scrollbar{height:8px}.json-content::-webkit-scrollbar-track{background:transparent}.json-content::-webkit-scrollbar-thumb{background:#3b82f64d;border-radius:4px}.json-content::-webkit-scrollbar-thumb:hover{background:#3b82f680}.footer{background:linear-gradient(135deg,#0f172acc,#1e293bcc);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;text-align:center;color:#fff;font-size:.9rem;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 32px #0000001a}.footer a{color:#60a5fa;text-decoration:none;border-bottom:2px solid rgba(96,165,250,.3);transition:all .4s cubic-bezier(.34,1.56,.64,1);font-weight:600;position:relative}.footer a:before{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#60a5fa,#3b82f6);transition:width .4s ease}.footer a:hover{color:#fff;border-bottom-color:#fff}.footer a:hover:before{width:100%}@media (max-width: 768px){.header h1{font-size:1.8rem}.header p{font-size:1rem}.main-content{padding:1rem;gap:1rem}.tab-content{padding:1.5rem}.calculator-container{grid-template-columns:1fr;gap:1rem;min-height:auto}.calculator-form{border-radius:12px}.calculator-results{position:static;top:auto;max-height:none;padding:1.5rem;margin-top:0;border-radius:12px}.result-details{grid-template-columns:1fr}.button-group{flex-direction:column}.btn{width:100%}textarea{min-height:300px}}