*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{

  --primary:#DD3333;

  --primary-dark:#b91c1c;

  --bg:#f5f7fb;

  --card:#ffffff;

  --text:#111827;

  --text-light:#6b7280;

  --border:#e5e7eb;

  --shadow:
  0 10px 30px rgba(0,0,0,0.06);

  --radius:24px;
}

/* =========================
DARK MODE
========================= */

body.dark{

  --bg:#0f172a;

  --card:#111827;

  --text:#f8fafc;

  --text-light:#cbd5e1;

  --border:#DD3333;

  --shadow:
  0 10px 30px rgba(0,0,0,0.35);
}

/* =========================
BASE
========================= */

html{
  scroll-behavior:smooth;
}

body{

  font-family:
  Arial,
  sans-serif;

  background:var(--bg);

  color:var(--text);

  transition:
  background 0.4s ease,
  color 0.4s ease;
}

/* =========================
CONTAINER
========================= */

.container{

  width:92%;

  max-width:1400px;

  margin:auto;
}

/* =========================
HEADER
========================= */

header{

  background:var(--card);

  border-bottom:
  1px solid #DD3333;


  top:0;

  z-index:999;

  backdrop-filter:blur(10px);
}

footer{

  text-align:center;

  padding:40px 20px;

  color:var(--text-light);
}
a{
  text-decoration: none;
}
.nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:18px 0;

  gap:20px;
}

.logo img{

  height:55px;
}

.nav-right{

  display:flex;

  align-items:center;

  gap:16px;
}

/* =========================
THEME BUTTON
========================= */

#themeToggle{

  border:none;

  background:var(--primary);

  color:white;

  padding:12px 18px;

  border-radius:999px;

  cursor:pointer;

  font-weight:700;

  transition:0.3s ease;
}

#themeToggle:hover{

  transform:translateY(-2px);
}

/* =========================
HERO
========================= */

.hero{

  padding:80px 20px 50px;

  text-align:center;
}

.hero-content{

  max-width:900px;

  margin:auto;
}
/* =========================
FLOATING BUTTONS
========================= */

#helpBtn{
  position:fixed;
  bottom:25px;
  width:52px;
  height:52px;
  border-radius:50%;
  background: transparent;
  color:#DD3333;
  cursor:pointer;
  font-size:18px;
  align-items:center;
  border: 1px solid #DD3333;
  justify-content:center;
  z-index:999;
  right:25px;
  display:flex;
  transition:0.3s ease;
}


#helpBtn:hover{

  transform:translateY(-4px);
}
.hero h1{

  font-size:2.5rem;

  line-height:1.15;

  margin-bottom:25px;

  font-weight:800;
}

.hero p{

  font-size:16px;

  line-height:1.9;

  color:var(--text-light);
}

/* =========================
MAIN GRID
========================= */

.main-grid{

  width:92%;

  max-width:1000px;

  margin:auto;

  display:flex;

  flex-direction:column;

  gap:30px;
}

/* =========================
CARDS
========================= */

.panel-card,
.summary-card,
.chart-card,
.insight-card,
.table-card{

  background:var(--card);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  border:
  1px solid var(--border);

  transition:0.3s ease;
}

.panel-card:hover,
.summary-card:hover,
.chart-card:hover,
.insight-card:hover,
.table-card:hover{

  transform:translateY(-4px);
}

/* =========================
REVEAL ANIMATION
========================= */

.fade-reveal{

  animation:
  fadeReveal 0.6s ease;
}

@keyframes fadeReveal{

  from{

    opacity:0;

    transform:
    translateY(30px);

  }

  to{

    opacity:1;

    transform:
    translateY(0);

  }

}
.hidden{
  display:none !important;
}

/* =========================
PANEL
========================= */

.panel-card{

  padding:30px;
}

/* =========================
PANEL HEADER
========================= */

.panel-header{

  margin-bottom:25px;
}

.panel-header h2{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:22px;
}

.panel-header i{

  color:var(--primary);
}

/* =========================
SECTION TITLE
========================= */

.section-title{

  margin:
  30px 0 20px;

  padding:14px 18px;

  background:
  rgba(221,51,51,0.08);

  border-radius:14px;

  color:var(--primary);

  font-weight:700;
}

/* =========================
INPUTS
========================= */

.input-group{

  margin-bottom:24px;
}

.input-group label{

  display:block;

  font-weight:700;

  margin-bottom:10px;

  font-size:15px;
}

.input-group small{

  display:block;

  color:var(--text-light);

  line-height:1.7;

  margin-bottom:12px;

  font-size:13px;
}

/* =========================
INPUT BOX
========================= */

.input-box{

  display:flex;

  align-items:center;

  border:
  1px solid var(--border);

  border-radius:18px;

  background:transparent;

  overflow:hidden;

  transition:0.3s ease;
}

.input-box:focus-within{

  border-color:var(--primary);

  box-shadow:
  0 0 0 4px rgba(221,51,51,0.1);
}

.input-box span{

  padding-left:18px;

  color:var(--primary);

  font-weight:700;
}

.input-box input{

  width:100%;

  border:none;

  background:none;

  outline:none;

  color:var(--text);

  padding:18px 16px;

  font-size:16px;
}

.input-box input::placeholder{
  opacity: 0.5;
  color:#999;
}


/* =========================
BUTTON
========================= */

#calculateBtn{

  width:100%;

  margin-top:15px;

  border:none;

  background:
  linear-gradient(
    135deg,
    var(--primary),
    var(--primary-dark)
  );

  color:white;

  padding:20px;

  border-radius:18px;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.3s ease;
}

#calculateBtn:hover{

  transform:translateY(-2px);

  opacity:0.95;
}

/* =========================
HIDDEN
========================= */

.hidden{

  display:none;
}

/* =========================
BREAKDOWN
========================= */

.breakdown{

  width:92%;

  max-width:1400px;

  margin:
  40px auto 40px;

  display:grid;

  grid-template-columns:
  repeat(2,minmax(0,1fr));

  gap:30px;

  align-items:start;
}

/* =========================
TABLE CARD
========================= */

.table-card{

  padding:30px;

  overflow-x:auto;
}

/* =========================
TABLE
========================= */

table{

  width:100%;

  border-collapse:collapse;
}

thead{

  background:var(--primary);

  color:white;
}

th,
td{

  padding:18px 16px;

  border-bottom:
  1px solid var(--border);

  text-align:left;

  font-size:14px;
}

tbody tr{

  transition:0.3s ease;
}

tbody tr:hover{

  background:
  rgba(221,51,51,0.03);
}

/* =========================
HIGHLIGHT
========================= */

.highlight-row{

  background:
  rgba(221,51,51,0.08);

  font-weight:700;
}

/* =========================
NEGATIVE
========================= */

.negative{

  color:var(--primary);

  font-weight:700;
}

/* =========================
DASHBOARD
========================= */

.dashboard{

  width:92%;

  max-width:1400px;

  margin:
  0 auto 80px;

  display:grid;

  grid-template-columns:
  1.2fr 1fr;

  gap:30px;

  align-items:start;
}

/* =========================
LEFT SIDE
========================= */

.dashboard-left{

  display:flex;

  flex-direction:column;

  gap:30px;
}

/* =========================
RIGHT SIDE
========================= */

.dashboard-right{

  display:flex;

  flex-direction:column;

  gap:30px;
}

/* =========================
SUMMARY GRID
========================= */

.summary-grid{

  display:grid;

  grid-template-columns:
  repeat(2,minmax(0,1fr));

  gap:20px;
}

/* =========================
SUMMARY CARD
========================= */

.summary-card{

  padding:30px;

  overflow:hidden;
}

.summary-card small{

  display:block;

  margin-bottom:12px;

  font-size:14px;

  color:var(--text-light);
}

.summary-card h3{

  font-size:2rem;

  color:var(--primary);

  line-height:1.3;

  word-break:break-word;
}

/* =========================
INSIGHTS
========================= */

.insight-card{

  padding:30px;
}

.insight-card h3{

  margin-bottom:20px;

  font-size:1.3rem;
}

.insight-card ul{

  padding-left:20px;
}

.insight-card li{

  margin-bottom:10px;

  line-height:1.8;

  color:var(--text-light);
}

/* =========================
RESULT ACTIONS
========================= */

.result-actions{

  width:92%;

  max-width:1400px;

  margin:
  0 auto 40px;

  display:flex;

  flex-direction:column;

  gap:24px;
}

/* SUCCESS */

.success-message{

  display:flex;

  align-items:flex-start;

  gap:18px;

  padding:28px;

  background:var(--card);

  border:
  1px solid var(--border);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}

.success-message i{

  font-size:34px;

  color:#22c55e;

  margin-top:2px;
}

.success-message h3{

  margin-bottom:8px;

  font-size:1.2rem;
}

.success-message p{

  color:var(--text-light);

  line-height:1.7;
}

/* BUTTONS */

.action-buttons{

  display:flex;

  gap:18px;

  flex-wrap:wrap;
}

.backlink {
  font-size: 1rem;
  margin-top: 16px;
  text-align: center;
  color: #444;
  font-weight: 500;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}
.action-buttons button{

  flex:1;

  min-width:220px;

  border:none;

  padding:18px 24px;

  border-radius:18px;

  cursor:pointer;

  font-size:15px;

  font-weight:700;

  transition:0.3s ease;
}

/* PDF */

#downloadPdfBtn{

  background:#DD3333;

  color:white;
}

/* SHARE */

#shareBtn{

  background:#111827;

  color:white;
}

body.dark #shareBtn{

  background:white;

  color:#111827;
}

.action-buttons button:hover{

  transform:translateY(-3px);
}

.results-actions{

  display:flex;

  justify-content:center;

  gap:18px;

  margin-top:35px;

  flex-wrap:wrap;
}

.action-btn{

  border:none;

  padding:15px 26px;

  border-radius:14px;

  font-size:15px;

  font-weight:700;

  cursor:pointer;

  display:flex;

  align-items:center;

  gap:10px;

  transition:0.3s ease;
}

.download-btn{

  background:#DD3333;

  color:white;
}

.share-btn{

  background:#111827;

  color:white;
}

body.dark .share-btn{

  background:#334155;
}

.action-btn:hover{

  transform:translateY(-4px);

  opacity:0.92;
}
/* MOBILE */

@media(max-width:768px){

  .success-message{

    flex-direction:column;
  }

  .action-buttons{

    flex-direction:column;
  }
  .hero-content p{
    font-size: 13px;
  }

}
/* =========================
CHART CARD
========================= */

.chart-card{

  padding:30px;

  overflow:hidden;
}

.chart-card canvas{

  width:100% !important;

  max-width:100%;

  max-height:400px;
}



.cta-section{

  width:90%;

  max-width:1300px;

  margin:40px auto;
}

.cta-box{

  background:
  linear-gradient(
    135deg,
    #111827,
    #1f2937
  );

  color:white;

  border-radius:28px;

  padding:55px 40px;

  text-align:center;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.18);
}

.cta-box h2{

  font-size:2.3rem;

  margin-bottom:18px;
}

.cta-box p{

  max-width:760px;

  margin:auto;

  line-height:1.9;

  color:
  rgba(255,255,255,0.82);
}

/* =========================================
   CTA BUTTONS
========================================= */

.cta-buttons{

  margin-top:30px;

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;
}

.cta-btn{

  padding:15px 28px;

  border-radius:14px;

  text-decoration:none;

  font-weight:700;

  transition:0.3s ease;
}

.primary-btn{

  background:#DD3333;

  color:white;
}

.secondary-btn{

  border:
  1px solid rgba(255,255,255,0.35);

  color:white;
}

.cta-btn:hover{

  transform:translateY(-3px);
}

/* =========================================
   FAQ SECTION
========================================= */

.faq-section{

  width:90%;

  max-width:1300px;

  margin:40px auto 70px;
}

.faq-box{

  background:var(--card);

  border-radius:28px;

  padding:40px;

  box-shadow:var(--shadow);
}

.faq-header{

  text-align:center;

  margin-bottom:35px;
}

.faq-badge{

  display:inline-block;

  padding:10px 18px;

  border-radius:999px;

  background:
  rgba(221,51,51,0.1);

  color:#DD3333;

  font-size:14px;

  font-weight:700;

  margin-bottom:18px;
}

.faq-header h2{

  font-size:2.2rem;

  margin-bottom:12px;
}

.faq-header p{

  color:var(--text-light);

  line-height:1.8;
}

/* FAQ ITEM */

.faq-item{

  border-bottom:
  1px solid var(--border);

  padding:20px 0;
}

.faq-item:last-child{

  border-bottom:none;
}

.faq-question{

  width:100%;

  border:none;

  background:none;

  display:flex;

  justify-content:space-between;

  align-items:center;

  cursor:pointer;

  color:var(--text);

  font-size:18px;

  font-weight:700;

  text-align:left;
}

.faq-question span{

  color:#DD3333;

  font-size:24px;

  transition:0.3s ease;
}

.faq-answer{

  max-height:0;

  overflow:hidden;

  transition:0.35s ease;
}

.faq-answer p{

  margin-top:15px;

  line-height:1.9;

  color:var(--text-light);
}

.faq-item.active .faq-answer{

  max-height:300px;
}

.faq-item.active .faq-question span{

  transform:rotate(45deg);
}

/* =========================================
   TOAST
========================================= */

.toast{

  position:fixed;

  bottom:30px;

  right:30px;

  background:#111827;

  color:white;

  padding:15px 24px;

  border-radius:14px;

  font-weight:700;

  z-index:9999;

  animation:fadeUp 0.4s ease;
}

body.dark .toast{

  background:#DD3333;
}

/* =========================
SCROLLBAR
========================= */

.table-card::-webkit-scrollbar{

  height:8px;
}

.table-card::-webkit-scrollbar-thumb{

  background:var(--primary);

  border-radius:999px;
}

/* =========================
ANIMATION
========================= */

.dashboard,
.breakdown{

  animation:
  fadeUp 0.5s ease;
}

@keyframes fadeUp{

  from{

    opacity:0;

    transform:translateY(20px);
  }

  to{

    opacity:1;

    transform:translateY(0);
  }

}

/* =========================
TABLET
========================= */

@media(max-width:992px){

  .dashboard,
  .breakdown{

    grid-template-columns:1fr;
  }

  .hero{

    padding:60px 20px 40px;
  }

  .hero h1{

    font-size:2.4rem;

    line-height:1.2;
  }

  .hero p{

    font-size:15px;

    line-height:1.7;
  }



  #themeToggle{

    width:100%;
  }

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .summary-grid{

    grid-template-columns:1fr;
  }

  .dashboard,
  .breakdown,
  .main-grid{

    width:94%;
  }

  .panel-card,
  .summary-card,
  .chart-card,
  .insight-card,
  .table-card{

    padding:22px;
  }

  .hero h1{

    font-size:2rem;
  }

  .hero p{

    font-size:14px;
  }

  .summary-card h3{

    font-size:1.6rem;
  }

  .input-box input{

    font-size:16px;
  }

  th,
  td{

    padding:14px 12px;

    font-size:13px;
  }



#helpBtn{
  right:5px;
  display:flex;
}

 .cta-box{
    padding:40px 25px;
  }

  .cta-box h2{

    font-size:1.5rem;
  }

  .faq-header h2{

    font-size:1.5rem;
  }
}

/* =========================
SMALL MOBILE
========================= */

@media(max-width:480px){

  .hero{

    padding:50px 16px 30px;
  }

  .hero h1{

    font-size:1.7rem;
  }

  .hero p{

    font-size:13px;
  }

  .logo img{

    height:45px;
  }

  .summary-card h3{

    font-size:1.4rem;
  }

  .panel-card,
  .summary-card,
  .chart-card,
  .insight-card,
  .table-card{

    padding:18px;
  }

  .input-box{

    border-radius:14px;
  }

  .input-box input{

    padding:16px 14px;
  }

  #calculateBtn{

    padding:18px;

    font-size:15px;
  }

}
/* =========================
QUICK SUMMARY
========================= */

.quick-summary{

  width:92%;

  max-width:1400px;

  margin:
  40px auto 30px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:24px;

  align-items:stretch;
}

.quick-card{

  background:var(--card);

  border:
  1px solid var(--border);

  border-radius:24px;

  padding:30px;

  box-shadow:var(--shadow);

  transition:0.3s ease;

  min-height:160px;

  display:flex;

  flex-direction:column;

  justify-content:center;
}

.quick-card:hover{

  transform:translateY(-4px);
}

.quick-card small{

  display:block;

  color:var(--text-light);

  margin-bottom:14px;

  font-size:14px;

  line-height:1.6;
}

.quick-card h3{

  color:var(--primary);

  font-size:2rem;

  line-height:1.3;

  word-break:break-word;
}

/* TABLET */

.faq-answer a{
  color: #DD3333;
  text-decoration: none;
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
}

@media(max-width:992px){

  .quick-summary{

    grid-template-columns:
    repeat(2,minmax(0,1fr));

  }

}

/* MOBILE */

@media(max-width:768px){

  .quick-summary{

    grid-template-columns:1fr;

    gap:18px;
  }

  .quick-card{

    padding:24px;

    min-height:auto;
  }

  .quick-card h3{

    font-size:1.7rem;
  }

}

/* =========================
SIMPLE EXPLANATION
========================= */

.simple-explanation{

  width:92%;

  max-width:1400px;

  margin:
  0 auto 30px;

  background:#fff;

  border:
  1px solid var(--border);

  border-radius:24px;

  padding:30px;

  box-shadow:var(--shadow);

}

.simple-explanation h3{

  color:var(--primary);

  margin-bottom:15px;

  font-size:1.4rem;
}

.simple-explanation p{

  color:var(--text);

  line-height:1.9;

  font-size:1rem;
}

/* DARK MODE */

body.dark .simple-explanation{

  background: transparent;

  border:1px solid #DD3333;
}

body.dark .simple-explanation p{

  color:#F3F4F6;
}

body.dark .simple-explanation h3{

  color:#ff5c6c;
}

/* =========================
CHART SIZE
========================= */

.chart-card{

  min-height:700px;
}

.chart-card canvas{

  width:100% !important;

  height:450px !important;
}

/* MOBILE */

@media(max-width:768px){

  .chart-card{

    min-height:auto;
  }

  .chart-card canvas{

    height:340px !important;
  }

}

/* =========================
CUSTOM CHART LEGEND
========================= */

.chart-legend{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:28px;

  margin-top:30px;
}

.legend-item{

  display:flex;

  align-items:flex-start;

  gap:14px;
}

.legend-color{

  width:18px;

  height:18px;

  border-radius:50%;

  margin-top:5px;

  flex-shrink:0;
}

.legend-content{

  display:flex;

  flex-direction:column;
}

.legend-title{
  font-weight:700;
  font-size:18px;
  color:var(--text);
}

.legend-value{
  color:var(--text-light);
  margin-top:4px;
  font-size:15px;
  line-height:1.5;
}

/* MOBILE */

@media(max-width:768px){

  .chart-legend{

    grid-template-columns:1fr;
  }

}
/* =========================================
TOAST
========================================= */

.toast{

  position:fixed;

  bottom:30px;

  right:30px;

  background:#111827;

  color:white;

  padding:15px 24px;

  border-radius:14px;

  font-weight:700;

  z-index:9999;

  animation: fadeUp 0.4s ease;
}

body.dark .toast{

  background:#DD3333;
}

@keyframes fadeUp{

  from{

    opacity:0;

    transform:translateY(35px);
  }

  to{

    opacity:1;

    transform:translateY(0);
  }
}

/* =========================
MONTHLY BREAKDOWN
========================= */

#monthlyBreakdown{

  margin-top:30px;

}

#monthlyBreakdown table{

  width:100%;

  border-collapse:collapse;

}

#monthlyBreakdown th{

  background:#dc2626;

  color:#fff;

  padding:16px;

  text-align:left;

}

#monthlyBreakdown td{

  padding:16px;

  border-bottom:
  1px solid #e5e7eb;

}

#monthlyBreakdown tr:last-child td{

  font-weight:700;

  color:#111827;

}

/* DARK MODE */

body.dark #monthlyBreakdown{

  background:#111827;
}

body.dark .backlink{
  color: #fff;
}

body.dark #monthlyBreakdown td{

  border-color:#374151;

  color:#E5E7EB;

}