{} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: #f4f6f8; } .container { max-width: 900px; margin: 40px auto; background: #ffffff; padding: 30px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; } h1 { color: #222; margin-bottom: 15px; } p { color: #555; line-height: 1.6; } .btn-group { margin: 30px 0; } .btn { display: inline-block; margin: 10px; padding: 14px 28px; background: #007bff; color: #fff; text-decoration: none; border-radius: 6px; font-size: 16px; transition: 0.3s; } .btn:hover { background: #0056b3; } form { margin-top: 30px; text-align: left; } input, textarea { width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; } button { width: 100%; padding: 14px; background: #28a745; color: #fff; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; } button:hover { background: #218838; } footer { margin-top: 30px; font-size: 14px; color: #777; } @media (max-width: 600px) { .container { margin: 15px; padding: 20px; } } 

 body{ font-family: Arial, sans-serif; background:#f2f6ff; margin:0; padding:30px; } .container{ max-width:1000px; margin:auto; } h1{text-align:center;} .tabs{ display:flex; justify-content:center; margin:30px 0; } .tabs button{ padding:12px 25px; border:none; cursor:pointer; background:#e0e7ff; margin:0 5px; border-radius:6px; } .tabs button.active{ background:#2563eb; color:#fff; } .card{ background:#fff; padding:25px; border-radius:10px; box-shadow:0 10px 25px rgba(0,0,0,.08); margin-bottom:30px; } label{font-weight:bold;} input,select{ width:100%; padding:10px; margin:8px 0 20px; } .result{ font-size:18px; font-weight:bold; margin-top:15px; } .hidden{display:none;} 

 body{ font-family: Arial, sans-serif; background:#eef2ff; margin:0; padding:30px; } .container{ max-width:1100px; margin:auto; } h1{text-align:center;margin-bottom:10px;} .subtitle{text-align:center;color:#555;margin-bottom:30px;} .tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:30px; } .tabs button{ padding:12px 25px; border:none; border-radius:8px; cursor:pointer; background:#e5e7eb; font-size:15px; } .tabs button.active{ background:#2563eb; color:#fff; } .section{ display:none; } .section.active{ display:block; } .grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } .card{ background:#fff; padding:25px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.08); } label{font-weight:bold;} input,select{ width:100%; padding:10px; margin:8px 0 18px; } button.calc{ width:100%; padding:14px; background:#16a34a; border:none; color:#fff; font-size:16px; border-radius:8px; cursor:pointer; } .result h3{ margin-top:0; color:#2563eb; } .result p{ font-size:16px; margin:8px 0; } @media(max-width:800px){ .grid{grid-template-columns:1fr;} } 

 body{ font-family: Arial, sans-serif; background:#eef2ff; padding:25px; } .container{max-width:1200px;margin:auto} h1{text-align:center;color:#1e3a8a} .subtitle{text-align:center;color:#555;margin-bottom:25px} .card{ background:#fff; padding:22px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.08); margin-bottom:25px } label{font-weight:bold} input,select{ width:100%; padding:9px; margin:8px 0 14px } button{ padding:12px; width:100%; background:#16a34a; color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer } .secondary{ background:#1e40af } .green{color:#16a34a;font-weight:bold} .red{color:#dc2626;font-weight:bold} .hidden{display:none} .share button{ width:auto; margin-right:10px; margin-top:10px } 

 body{ font-family: Arial, sans-serif; background:#eef2ff; padding:25px; } .container{max-width:1200px;margin:auto} h1{text-align:center;color:#1e3a8a} .subtitle{text-align:center;color:#555;margin-bottom:25px} .card{ background:#fff; padding:22px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.08); margin-bottom:25px } button{ padding:12px; width:100%; background:#16a34a; color:#fff; border:none; border-radius:8px; font-size:15px; cursor:pointer } .secondary{background:#1e40af} .green{color:#16a34a;font-weight:bold} .red{color:#dc2626;font-weight:bold} .hidden{display:none} /* PDF PRINT STYLES */ @media print{ body{background:#fff} button,.no-print{display:none} .card{box-shadow:none} #pdfHeader,#pdfFooter{display:block} } /* PDF HEADER & FOOTER */ #pdfHeader,#pdfFooter{ display:none; text-align:center; margin-bottom:15px } #pdfHeader img{ max-height:60px; margin-bottom:10px } #pdfFooter{ font-size:12px; color:#555; margin-top:20px } textarea{ width:100%; min-height:180px; padding:12px; font-size:14px } 

 body{margin:0;font-family:Arial,sans-serif;background:#eef2ff} .container{max-width:1200px;margin:auto;padding:25px} h1{text-align:center;margin-bottom:5px} .subtitle{text-align:center;color:#555;margin-bottom:25px} .card{background:#fff;border-radius:12px;padding:22px; box-shadow:0 10px 25px rgba(0,0,0,.08);margin-bottom:25px} .hidden{display:none} .green{color:#16a34a;font-weight:bold} .red{color:#dc2626;font-weight:bold} button{padding:10px 14px;border:none;border-radius:8px; background:#2563eb;color:#fff;cursor:pointer} button.secondary{background:#16a34a} button.light{background:#e5e7eb;color:#111} input,select,textarea{width:100%;padding:8px;margin:6px 0 14px} .tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px} .tabs button.active{background:#1e3a8a} .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} @media(max-width:900px){.grid{grid-template-columns:1fr}} @media print{ button,.no-print{display:none} body{background:#fff} #pdfHeader,#pdfFooter{display:block} } #pdfHeader,#pdfFooter{display:none;text-align:center} #pdfHeader img{max-height:60px;margin-bottom:10px} #pdfFooter{font-size:12px;color:#555;margin-top:20px} 

 /* ========== GLOBAL ========== */ body{ margin:0; font-family: Arial, sans-serif; background:#eef2ff; color:#111; } .container{ max-width:1200px; margin:auto; padding:30px 20px; } h1{ text-align:center; margin-bottom:8px; } .subtitle{ text-align:center; color:#555; margin-bottom:25px; } /* ========== TABS ========== */ .tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:30px; } .tabs button{ padding:10px 22px; border:none; border-radius:8px; background:#e5e7eb; cursor:pointer; font-size:14px; } .tabs button.active{ background:#1e3a8a; color:#fff; } /* ========== GRID ========== */ .grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } @media(max-width:900px){ .grid{grid-template-columns:1fr;} } /* ========== CARD ========== */ .card{ background:#fff; border-radius:14px; padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.08); } /* ========== FORM ========== */ label{ font-weight:bold; font-size:14px; } input, select{ width:100%; padding:9px; margin:6px 0 16px; border-radius:8px; border:1px solid #ccc; } /* ========== BUTTON ========== */ button.primary{ width:100%; padding:12px; background:#16a34a; border:none; border-radius:10px; color:#fff; font-size:15px; cursor:pointer; } /* ========== ROI OUTPUT ========== */ .stat{ display:flex; justify-content:space-between; margin:10px 0; font-size:15px; } .green{color:#16a34a;font-weight:bold} .blue{color:#2563eb;font-weight:bold} .purple{color:#7c3aed;font-weight:bold} /* ========== BAR ========== */ .bar{ height:12px; border-radius:8px; background:#e5e7eb; overflow:hidden; margin:8px 0 18px; } .bar span{ display:block; height:100%; } /* ========== CHART ========== */ canvas{ width:100%; height:220px; } /* ========== SCENARIO CARDS ========== */ .scenarios{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:20px; } .scenario{ padding:15px; border-radius:10px; font-size:13px; } .scenario.con{background:#ecfeff} .scenario.mod{background:#eef2ff} .scenario.agg{background:#fdf4ff} 

 /* ========== GLOBAL ========== */ body{ margin:0; font-family: Arial, sans-serif; background:#eef2ff; color:#111; } .container{ max-width:1200px; margin:auto; padding:30px 20px; } h1{ text-align:center; margin-bottom:8px; } .subtitle{ text-align:center; color:#555; margin-bottom:25px; } /* ========== TABS ========== */ .tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:30px; } .tabs button{ padding:10px 22px; border:none; border-radius:8px; background:#e5e7eb; cursor:pointer; font-size:14px; } .tabs button.active{ background:#1e3a8a; color:#fff; } /* ========== GRID ========== */ .grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } @media(max-width:900px){ .grid{grid-template-columns:1fr;} } /* ========== CARD ========== */ .card{ background:#fff; border-radius:14px; padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.08); } /* ========== FORM ========== */ label{ font-weight:bold; font-size:14px; } input, select{ width:100%; padding:9px; margin:6px 0 16px; border-radius:8px; border:1px solid #ccc; } /* ========== BUTTON ========== */ button.primary{ width:100%; padding:12px; background:#16a34a; border:none; border-radius:10px; color:#fff; font-size:15px; cursor:pointer; } /* ========== ROI OUTPUT ========== */ .stat{ display:flex; justify-content:space-between; margin:10px 0; font-size:15px; } .green{color:#16a34a;font-weight:bold} .blue{color:#2563eb;font-weight:bold} .purple{color:#7c3aed;font-weight:bold} /* ========== BAR ========== */ .bar{ height:12px; border-radius:8px; background:#e5e7eb; overflow:hidden; margin:8px 0 18px; } .bar span{ display:block; height:100%; } /* ========== CHART ========== */ canvas{ width:100%; height:220px; } /* ========== SCENARIO CARDS ========== */ .scenarios{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:20px; } .scenario{ padding:15px; border-radius:10px; font-size:13px; } .scenario.con{background:#ecfeff} .scenario.mod{background:#eef2ff} .scenario.agg{background:#fdf4ff} 

 body{margin:0;font-family:Arial,sans-serif;background:#eef2ff} .container{max-width:1200px;margin:auto;padding:25px} h1{text-align:center;margin-bottom:6px} .subtitle{text-align:center;color:#555;margin-bottom:25px} .tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px} .tabs button{ padding:10px 22px;border:none;border-radius:8px; background:#e5e7eb;cursor:pointer;font-size:14px } .tabs button.active{background:#1e3a8a;color:#fff} .section{display:none} .section.active{display:block} .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} @media(max-width:900px){.grid{grid-template-columns:1fr}} .card{ background:#fff;border-radius:14px;padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.08); margin-bottom:25px } label{font-weight:bold;font-size:14px} input,select,textarea{ width:100%;padding:8px;margin:6px 0 14px; border-radius:8px;border:1px solid #ccc } button{ padding:10px 14px;border:none;border-radius:8px; background:#2563eb;color:#fff;cursor:pointer } button.green{background:#16a34a} button.light{background:#e5e7eb;color:#111} .stat{display:flex;justify-content:space-between;margin:8px 0} .greenText{color:#16a34a;font-weight:bold} .redText{color:#dc2626;font-weight:bold} .blueText{color:#2563eb;font-weight:bold} .hidden{display:none} @media print{ button,.no-print{display:none} body{background:#fff} #pdfHeader,#pdfFooter{display:block} } #pdfHeader,#pdfFooter{ display:none;text-align:center } #pdfHeader img{max-height:60px;margin-bottom:10px} #pdfFooter{font-size:12px;color:#555;margin-top:20px} 

 body{margin:0;font-family:Arial,sans-serif;background:#eef2ff} .container{max-width:1200px;margin:auto;padding:25px} h1{text-align:center;margin-bottom:6px} .subtitle{text-align:center;color:#555;margin-bottom:25px} .tabs{display:flex;justify-content:center;gap:10px;margin-bottom:30px} .tabs button{ padding:10px 22px;border:none;border-radius:8px; background:#e5e7eb;cursor:pointer;font-size:14px } .tabs button.active{background:#1e3a8a;color:#fff} .section{display:none} .section.active{display:block} .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} @media(max-width:900px){.grid{grid-template-columns:1fr}} .card{ background:#fff;border-radius:14px;padding:22px; box-shadow:0 12px 30px rgba(0,0,0,.08); margin-bottom:25px } label{font-weight:bold;font-size:14px} input,select,textarea{ width:100%;padding:8px;margin:6px 0 14px; border-radius:8px;border:1px solid #ccc } button{ padding:10px 14px;border:none;border-radius:8px; background:#2563eb;color:#fff;cursor:pointer } button.green{background:#16a34a} button.light{background:#e5e7eb;color:#111} .stat{display:flex;justify-content:space-between;margin:8px 0} .greenText{color:#16a34a;font-weight:bold} .redText{color:#dc2626;font-weight:bold} .blueText{color:#2563eb;font-weight:bold} .hidden{display:none} @media print{ button,.no-print{display:none} body{background:#fff} #pdfHeader,#pdfFooter{display:block} } #pdfHeader,#pdfFooter{ display:none;text-align:center } #pdfHeader img{max-height:60px;margin-bottom:10px} #pdfFooter{font-size:12px;color:#555;margin-top:20px} 

 body{margin:0;font-family:Arial,sans-serif;background:#eef2ff} .container{max-width:1200px;margin:auto;padding:30px} h1{text-align:center} .subtitle{text-align:center;color:#555;margin-bottom:25px} .tabs,.subtabs{ display:flex;justify-content:center;gap:10px;margin-bottom:20px } .tabs button,.subtabs button{ padding:10px 20px;border:none;border-radius:8px; background:#e5e7eb;cursor:pointer } .tabs button.active,.subtabs button.active{ background:#1e3a8a;color:#fff } .section{display:none} .section.active{display:block} .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} @media(max-width:900px){.grid{grid-template-columns:1fr}} .card{ background:#fff;padding:22px;border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.08);margin-bottom:25px } label{font-weight:bold;font-size:14px} input,select,textarea{ width:100%;padding:8px;margin:6px 0 14px; border-radius:8px;border:1px solid #ccc } button.green{background:#16a34a;color:#fff;border:none;padding:10px;border-radius:8px} .stat{display:flex;justify-content:space-between;margin:6px 0} .greenText{color:#16a34a;font-weight:bold} .redText{color:#dc2626;font-weight:bold} .blueText{color:#2563eb;font-weight:bold} .hidden{display:none} /* Feedback */ .feedback-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:20px} .feedback-tabs button{padding:8px 16px;border:none;border-radius:8px} /* Social */ .social button{margin:5px} /* Print */ @media print{ button,.no-print{display:none} body{background:#fff} } 

 :root{ --bg:#eef2ff; --card:#ffffff; --primary:#5b5cff; --green:#16a34a; --blue:#2563eb; --purple:#7c3aed; --shadow:0 15px 35px rgba(0,0,0,.08); } *{box-sizing:border-box} body{ margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:#111827; } .container{ max-width:1200px; margin:auto; padding:40px 20px; } h1{ text-align:center; font-size:40px; margin-bottom:10px; } .subtitle{ text-align:center; max-width:760px; margin:0 auto 30px; color:#4b5563; line-height:1.6; } /* Top Tabs */ .top-tabs{ display:flex; justify-content:center; gap:12px; margin-bottom:35px; } .top-tabs a{ padding:10px 26px; border-radius:10px; background:#fff; text-decoration:none; color:#374151; box-shadow:var(--shadow); font-weight:500; } .top-tabs a.active{ background:var(--primary); color:#fff; } /* Layout */ .grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } @media(max-width:900px){ .grid{grid-template-columns:1fr} } .card{ background:var(--card); border-radius:16px; padding:24px; box-shadow:var(--shadow); margin-bottom:25px; } .card h3{ margin-top:0; display:flex; align-items:center; gap:10px; } /* Inputs */ label{ font-size:14px; font-weight:600; margin-top:14px; display:block; } input,select{ width:100%; padding:10px; margin-top:6px; border-radius:10px; border:1px solid #d1d5db; font-size:14px; } input[type=range]{padding:0} /* Scenario Tabs */ .scenarios{ display:flex; background:#fdecec; border-radius:12px; overflow:hidden; margin-bottom:15px; } .scenarios button{ flex:1; border:none; padding:10px; background:transparent; cursor:pointer; font-weight:600; } .scenarios button.active{ background:#fff; border-radius:10px; } /* Stats */ .stats{ display:flex; justify-content:space-between; margin-top:15px; } .stat{ text-align:center; } .stat span{ display:block; font-size:13px; color:#6b7280; } .stat strong{ font-size:20px; } /* Bars */ .bar{ height:10px; background:#e5e7eb; border-radius:10px; overflow:hidden; margin:8px 0 16px; } .bar div{ height:100%; background:#111; } /* Summary */ .summary{ background:#ecfdf5; padding:14px; border-radius:12px; margin-top:10px; } /* Chart */ .chart{ height:260px; background:linear-gradient(180deg,#c7d2fe,#eef2ff); border-radius:14px; display:flex; align-items:flex-end; padding:20px; gap:6px; } .chart div{ width:100%; background:linear-gradient(180deg,#8b5cf6,#6366f1); border-radius:6px 6px 0 0; } /* Scenario cards */ .scenario-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media(max-width:900px){ .scenario-cards{grid-template-columns:1fr} } .sc-card{ padding:18px; border-radius:14px; background:#f9fafb; box-shadow:var(--shadow); } /* Community */ .community{ margin-top:60px; } .community h2{ text-align:center; color:#5b5cff; } .community p{ text-align:center; color:#4b5563; } /* Community Tabs */ .comm-tabs{ display:flex; justify-content:center; gap:10px; margin:20px 0; } .comm-tabs button{ border:none; background:#fff; padding:8px 18px; border-radius:10px; box-shadow:var(--shadow); cursor:pointer; } .comm-tabs button.active{ background:#111; color:#fff; } /* Forms */ textarea{min-height:100px} /* Share */ .share-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .share-grid button{ padding:12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; } 

 :root{ --bg:#eef2ff; --card:#ffffff; --primary:#5b5cff; --green:#16a34a; --blue:#2563eb; --purple:#7c3aed; --shadow:0 15px 35px rgba(0,0,0,.08); } *{box-sizing:border-box} body{ margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:#111827; } .container{ max-width:1200px; margin:auto; padding:40px 20px; } h1{ text-align:center; font-size:40px; margin-bottom:10px; } .subtitle{ text-align:center; max-width:760px; margin:0 auto 30px; color:#4b5563; line-height:1.6; } /* Top Tabs */ .top-tabs{ display:flex; justify-content:center; gap:12px; margin-bottom:35px; } .top-tabs a{ padding:10px 26px; border-radius:10px; background:#fff; text-decoration:none; color:#374151; box-shadow:var(--shadow); font-weight:500; } .top-tabs a.active{ background:var(--primary); color:#fff; } /* Layout */ .grid{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } @media(max-width:900px){ .grid{grid-template-columns:1fr} } .card{ background:var(--card); border-radius:16px; padding:24px; box-shadow:var(--shadow); margin-bottom:25px; } .card h3{ margin-top:0; display:flex; align-items:center; gap:10px; } /* Inputs */ label{ font-size:14px; font-weight:600; margin-top:14px; display:block; } input,select,textarea{ width:100%; padding:10px; margin-top:6px; border-radius:10px; border:1px solid #d1d5db; font-size:14px; } input[type=range]{padding:0} /* Scenario Tabs */ .scenarios{ display:flex; background:#fdecec; border-radius:12px; overflow:hidden; margin-bottom:15px; } .scenarios button{ flex:1; border:none; padding:10px; background:transparent; cursor:pointer; font-weight:600; } .scenarios button.active{ background:#fff; border-radius:10px; } /* Stats */ .stats{ display:flex; justify-content:space-between; margin-top:15px; } .stat{ text-align:center; } .stat span{ display:block; font-size:13px; color:#6b7280; } .stat strong{ font-size:20px; } /* Bars */ .bar{ height:10px; background:#e5e7eb; border-radius:10px; overflow:hidden; margin:8px 0 16px; } .bar div{ height:100%; background:#111; } /* Summary */ .summary{ background:#ecfdf5; padding:14px; border-radius:12px; margin-top:10px; } /* Chart */ .chart{ height:260px; background:linear-gradient(180deg,#c7d2fe,#eef2ff); border-radius:14px; display:flex; align-items:flex-end; padding:20px; gap:6px; } .chart div{ width:100%; background:linear-gradient(180deg,#8b5cf6,#6366f1); border-radius:6px 6px 0 0; } /* Scenario cards */ .scenario-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } @media(max-width:900px){ .scenario-cards{grid-template-columns:1fr} } .sc-card{ padding:18px; border-radius:14px; background:#f9fafb; box-shadow:var(--shadow); } /* Community */ .community{ margin-top:60px; } .community h2{ text-align:center; color:#5b5cff; } .community p{ text-align:center; color:#4b5563; } /* Community Tabs */ .comm-tabs{ display:flex; justify-content:center; gap:10px; margin:20px 0; } .comm-tabs button{ border:none; background:#fff; padding:8px 18px; border-radius:10px; box-shadow:var(--shadow); cursor:pointer; } .comm-tabs button.active{ background:#111; color:#fff; } .comm-section{display:none} .comm-section.active{display:block} /* Share */ .share-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; } .share-grid button{ padding:12px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; } 

 :root{ --bg:#eef2ff; --card:#ffffff; --primary:#5b5cff; --green:#16a34a; --blue:#2563eb; --purple:#7c3aed; --shadow:0 15px 35px rgba(0,0,0,.08); } *{box-sizing:border-box} body{ margin:0; font-family:Inter,Arial,sans-serif; background:var(--bg); color:#111827; } .container{ max-width:1200px; margin:auto; padding:40px 20px; } h1{text-align:center;font-size:40px;margin-bottom:10px} .subtitle{ text-align:center; max-width:760px; margin:0 auto 30px; color:#4b5563; line-height:1.6; } /* Top tabs */ .top-tabs{ display:flex;justify-content:center;gap:12px;margin-bottom:35px } .top-tabs a{ padding:10px 26px;border-radius:10px;background:#fff; text-decoration:none;color:#374151;box-shadow:var(--shadow) } .top-tabs a.active{background:var(--primary);color:#fff} /* Layout */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} @media(max-width:900px){.grid{grid-template-columns:1fr}} .card{ background:var(--card); border-radius:16px; padding:24px; box-shadow:var(--shadow); margin-bottom:25px; } label{font-size:14px;font-weight:600;margin-top:14px;display:block} input,textarea{ width:100%;padding:10px;margin-top:6px; border-radius:10px;border:1px solid #d1d5db } input[type=range]{padding:0} /* Scenarios */ .scenarios{ display:flex;background:#fdecec;border-radius:12px;overflow:hidden;margin-bottom:15px } .scenarios button{ flex:1;border:none;padding:10px;background:transparent; cursor:pointer;font-weight:600 } .scenarios button.active{background:#fff;border-radius:10px} /* Stats */ .stats{display:flex;justify-content:space-between;margin-top:15px} .stat{text-align:center} .stat span{display:block;font-size:13px;color:#6b7280} .stat strong{font-size:20px} /* Bars */ .bar{height:10px;background:#e5e7eb;border-radius:10px;overflow:hidden;margin:8px 0 16px} .bar div{height:100%;background:#111} /* Summary */ .summary{background:#ecfdf5;padding:14px;border-radius:12px;margin-top:10px} /* Chart */ .chart{ height:260px;background:linear-gradient(180deg,#c7d2fe,#eef2ff); border-radius:14px;display:flex;align-items:flex-end;padding:20px;gap:6px } .chart div{ width:100%;background:linear-gradient(180deg,#8b5cf6,#6366f1); border-radius:6px 6px 0 0 } /* Scenario cards */ .scenario-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.scenario-cards{grid-template-columns:1fr}} .sc-card{padding:18px;border-radius:14px;background:#f9fafb;box-shadow:var(--shadow)} /* Community */ .community{margin-top:60px} .community h2{text-align:center;color:#5b5cff} .community p{text-align:center;color:#4b5563} .comm-tabs{display:flex;justify-content:center;gap:10px;margin:20px 0} .comm-tabs button{ border:none;background:#fff;padding:8px 18px; border-radius:10px;box-shadow:var(--shadow);cursor:pointer } .comm-tabs button.active{background:#111;color:#fff} .comm-section{display:none} .comm-section.active{display:block} .share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px} .share-grid button{ padding:12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;cursor:pointer } 

 *{box-sizing:border-box;font-family:Inter} body{margin:0;background:#eef4ff;color:#111} .container{max-width:1200px;margin:auto;padding:30px} /* ---------- HERO ---------- */ h1{text-align:center;font-size:40px;margin-bottom:10px} .hero-p{text-align:center;max-width:720px;margin:auto;color:#555} /* ---------- TABS ---------- */ .calc-tabs{display:flex;gap:10px;justify-content:center;margin:25px 0} .calc-tabs button{ padding:10px 22px;border-radius:10px;border:0; background:#fff;color:#333;font-weight:600;cursor:pointer } .calc-tabs .active{background:#111;color:#fff} /* ---------- GRID ---------- */ .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:25px} .card{ background:#fff;border-radius:14px; padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.08) } label{font-weight:600;font-size:14px} input,textarea{ width:100%;padding:10px;border-radius:8px; border:1px solid #ddd;margin-top:6px;margin-bottom:15px } input[type=range]{padding:0} /* ---------- SCENARIOS ---------- */ .scenarios{display:flex;background:#fdecec;border-radius:12px;overflow:hidden} .scenarios button{ flex:1;padding:10px;border:0;background:none; font-weight:600;color:#666;cursor:pointer } .scenarios .active{background:#fff;color:#111} /* ---------- METRIC CARDS ---------- */ .metric-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px} .metric{ background:#f8fafc;border-radius:12px;padding:15px;text-align:center } .metric h3{margin:0;font-size:20px} .metric p{margin:4px 0 0;color:#666;font-size:13px} /* ---------- BREAKDOWN ---------- */ .full{grid-column:1/-1} .bar{ height:10px;background:#e5e7eb;border-radius:10px;overflow:hidden;margin:8px 0 } .bar span{display:block;height:100%;background:#111} /* ---------- COMMUNITY ---------- */ .comm-tabs{ display:flex;gap:10px;justify-content:center;margin:30px 0 } .comm-tabs button{ padding:10px 18px;border-radius:10px;border:0; background:#fff;font-weight:600;cursor:pointer } .comm-tabs .active{background:#111;color:#fff} .comm-section{display:none} .comm-section.active{display:block} /* ---------- SHARE ---------- */ .share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .share-grid button{ padding:10px;border-radius:8px;border:1px solid #ddd; background:#fff;cursor:pointer } .likes{ text-align:center;padding:25px;background:#fdecec;border-radius:14px;margin-bottom:20px } .likes span{font-size:18px;font-weight:700} /* ---------- UTIL ---------- */ .center{text-align:center} 

 *{box-sizing:border-box;font-family:Inter} body{margin:0;background:#eef4ff;color:#111} .container{max-width:1200px;margin:auto;padding:30px} h1{text-align:center;font-size:40px} p.center{text-align:center;color:#555} .card{ background:#fff;border-radius:14px;padding:22px; box-shadow:0 10px 25px rgba(0,0,0,.08) } .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} .full{grid-column:1/-1} input,textarea{ width:100%;padding:10px;border-radius:8px; border:1px solid #ddd;margin:6px 0 14px } input[type=range]{padding:0} .calc-tabs,.comm-tabs{display:flex;gap:10px;justify-content:center;margin:25px 0} .calc-tabs button,.comm-tabs button{ padding:10px 20px;border-radius:10px;border:0; background:#fff;font-weight:600;cursor:pointer } .calc-tabs .active,.comm-tabs .active{background:#111;color:#fff} .scenarios{ display:flex;background:#fdecec;border-radius:12px;overflow:hidden } .scenarios button{ flex:1;padding:10px;border:0;background:none; font-weight:600;color:#666;cursor:pointer } .scenarios .active{background:#fff;color:#111} .metric-boxes{ display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px } .metric{ background:#f8fafc;border-radius:12px;padding:15px;text-align:center } .metric h3{margin:0;font-size:20px} .metric p{margin:4px 0 0;color:#666;font-size:13px} .bar{height:10px;background:#e5e7eb;border-radius:10px;overflow:hidden} .bar span{display:block;height:100%;background:#111} .comm-section{display:none} .comm-section.active{display:block} .star-group span{ font-size:26px;cursor:pointer;color:#ddd } .star-group span.active{color:#facc15} .share-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:10px } .share-grid button{ padding:10px;border-radius:8px;border:1px solid #ccc; background:#fff;cursor:pointer } .likes{ text-align:center;padding:20px;background:#fdecec;border-radius:12px;margin-bottom:20px } 

 *{box-sizing:border-box;font-family:Inter} body{margin:0;background:#eef4ff;color:#111} .container{max-width:1200px;margin:auto;padding:30px} h1{text-align:center;font-size:40px} p.center{text-align:center;color:#555} .card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 12px 30px rgba(0,0,0,.08)} .grid{display:grid;grid-template-columns:1fr 1fr;gap:25px} .full{grid-column:1/-1} label{font-weight:600;font-size:14px} input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #ddd;margin:6px 0 14px} input[type=range]{padding:0} .calc-tabs,.comm-tabs{display:flex;gap:10px;justify-content:center;margin:25px 0} .calc-tabs button,.comm-tabs button{ padding:10px 22px;border-radius:12px;border:0; background:#fff;font-weight:600;cursor:pointer;color:#333 } .calc-tabs .active,.comm-tabs .active{background:#111;color:#fff} .scenarios{display:flex;background:#fdecec;border-radius:14px;overflow:hidden} .scenarios button{ flex:1;padding:10px;border:0;background:none; font-weight:600;color:#666;cursor:pointer } .scenarios .active{background:#111;color:#fff} .metric-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px} .metric{background:#f8fafc;border-radius:12px;padding:16px;text-align:center} .metric h3{margin:0;font-size:20px} .metric p{margin:4px 0 0;color:#666;font-size:13px} .bar{height:10px;background:#e5e7eb;border-radius:10px;overflow:hidden} .bar span{display:block;height:100%;background:#111} .comm-section{display:none} .comm-section.active{display:block} .star-group span{font-size:28px;cursor:pointer;color:#ddd} .star-group span.active{color:#facc15} .share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .share-grid button{ padding:12px;border-radius:10px;border:1px solid #ccc; background:#fff;cursor:pointer;font-weight:600 } .likes{text-align:center;padding:20px;background:#fdecec;border-radius:14px;margin-bottom:20px} .review-item{border-bottom:1px solid #eee;padding:10px 0}