body{margin:0;font-family:IBM Plex Sans Arabic,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:IBM Plex Sans Arabic,sans-serif;background:linear-gradient(135deg,#0f172a,#1e1b4b,#312e81);min-height:100vh;padding:20px;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,rgba(99,102,241,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(168,85,247,.15) 0%,transparent 50%);pointer-events:none;z-index:0}.container{max-width:900px;margin:0 auto;position:relative;z-index:1}.header{text-align:center;color:#fff;margin-bottom:40px;padding:20px}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px;text-shadow:0 0 30px rgba(168,85,247,.5);background:linear-gradient(135deg,#fff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{font-size:1.2rem;opacity:.9;font-weight:300;color:#e0e7ff}.calculator-grid{display:flex;flex-direction:column;gap:30px;align-items:center;width:100%}.input-section,.results-section{background:#ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:30px;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;width:100%;max-width:800px;transition:all .3s ease}.input-section:hover,.results-section:hover{border-color:#a855f74d;box-shadow:0 8px 32px #0000004d,0 0 40px #a855f733,inset 0 1px #ffffff1a}.input-section h2,.results-section h2{color:#c4b5fd;font-size:1.5rem;margin-bottom:25px;font-weight:700}.input-group{margin-bottom:20px}.input-group label{display:block;color:#e0e7ff;font-weight:600;margin-bottom:8px;font-size:1rem}.input-field{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:1.1rem;font-family:IBM Plex Sans Arabic,sans-serif;transition:all .3s ease;background:#ffffff0d;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input-field:focus{outline:none;border-color:#a855f780;background:#ffffff14;box-shadow:0 0 0 3px #a855f71a,0 0 20px #a855f733}.input-field::placeholder{color:#ffffff4d}.investment-type{margin:30px 0}.investment-type>label{display:block;color:#e0e7ff;font-weight:600;margin-bottom:12px;font-size:1.1rem}.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:15px}.radio-option{display:flex;align-items:center;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .3s ease;background:#ffffff08;color:#e0e7ff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.radio-option:hover{border-color:#a855f766;background:#a855f71a}.radio-option.active{border-color:#a855f799;background:linear-gradient(135deg,#6366f14d,#a855f74d);box-shadow:0 0 20px #a855f74d;color:#fff}.radio-option input[type=radio]{margin-left:10px;width:20px;height:20px;cursor:pointer;accent-color:#a78bfa}.radio-option span{font-weight:600;font-size:1.05rem}.investment-inputs{background:#6366f11a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(99,102,241,.2);padding:20px;border-radius:12px;margin-top:20px}.investment-inputs h3{color:#c4b5fd;font-size:1.3rem;margin-bottom:15px;font-weight:600}.calculate-btn{width:100%;padding:16px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;border:none;border-radius:12px;font-size:1.3rem;font-weight:700;cursor:pointer;margin-top:30px;transition:all .3s ease;font-family:IBM Plex Sans Arabic,sans-serif;box-shadow:0 4px 15px #a855f766,0 0 30px #a855f733;border:1px solid rgba(255,255,255,.1)}.calculate-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #a855f780,0 0 40px #a855f74d}.calculate-btn:active{transform:translateY(0)}.result-card{background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:25px;margin-bottom:20px;border:1px solid rgba(255,255,255,.1)}.result-card h3{color:#c4b5fd;font-size:1.5rem;margin-bottom:20px;font-weight:700;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}.result-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}.result-row:last-child{border-bottom:none}.result-row span:first-child{color:#cbd5e1;font-size:1rem}.result-row strong{color:#fff;font-size:1.1rem;font-weight:700}.result-row.highlight{background:linear-gradient(to right,rgba(99,102,241,.15),transparent);padding:15px;margin:10px -15px;border-radius:10px;border:none}.monthly-payment{color:#a78bfa;font-size:1.3rem}.success{color:#34d399!important}.danger{color:#f87171!important}.success-bg{background:linear-gradient(to right,rgba(52,211,153,.15),transparent)!important;border-left:4px solid #34d399}.danger-bg{background:linear-gradient(to right,rgba(248,113,113,.15),transparent)!important;border-left:4px solid #f87171}.badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:.9rem;font-weight:600;margin-right:10px}.footer-message{text-align:center;margin-top:30px;padding:20px;background:linear-gradient(135deg,#6366f133,#a855f733);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:#fff;box-shadow:0 4px 15px #0003}.footer-message p{font-size:1.2rem;font-weight:600}@media(max-width:768px){.header h1{font-size:1.5rem}.subtitle{font-size:.95rem}.radio-group{grid-template-columns:1fr}.input-section,.results-section{padding:20px}.result-row{flex-direction:column;align-items:flex-start;gap:5px}}
