/* Global layout */
html { scroll-behavior: smooth; height: 100%; }
*, *::before, *::after { box-sizing: border-box; }

body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  margin:0; padding:0;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  min-height:100%;
}

/* Header */
.header{
  background: linear-gradient(135deg,#1f2933 0%,#111827 100%);
  backdrop-filter: blur(10px);
  position: sticky; top:0; z-index:1000;
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
}
.header-inner{ position:relative; }
.brand{ text-decoration:none; }
.site-logo{ height:40px; width:auto; display:block; }
.brand-text{ color:#fff; font-weight:800; font-size:1.15rem; }

/* Desktop nav */
.nav-links{ position:absolute; left:50%; transform:translateX(-50%); }
.nav-link{
  color:#fff; text-decoration:none; font-weight:500;
  transition:all .25s ease; display:inline-block;
}
.nav-link:hover{ color:#d1fae5; transform:translateY(-1px); }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-toggle{
  background:none; border:none; color:#fff; font-weight:500;
  cursor:pointer; padding:0; transition:color .25s ease;
}
.dropdown-toggle:hover{ color:#d1fae5; }
.dropdown-content{
  display:none; position:absolute; top:120%; right:0;
  background:#fff; min-width:220px;
  box-shadow:0 10px 30px rgba(15,23,42,.35);
  border-radius:.75rem; overflow:hidden; z-index:1100;
}
.dropdown.open .dropdown-content{ display:block; }
.dropdown-content a{
  color:#4b5563; padding:12px 20px; text-decoration:none;
  display:block; font-size:.9rem; transition:all .2s ease;
}
.dropdown-content a:hover{
  background: linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff; padding-left:26px;
}

/* Mobile */
.mobile-menu-btn{
  display:none;
  background:none;
  border:2px solid #10b981;
  border-radius:999px;
  padding:4px 10px;
  color:#ecfdf5;
  font-size:1.3rem;
  cursor:pointer;
  transition:background .25s ease, transform .15s ease, border-color .25s ease;
}
.mobile-menu-btn:hover{
  background:#10b981;
  border-color:#6ee7b7;
  transform:translateY(-1px);
}
.mobile-menu{
  display:none; flex-direction:column;
  background:#065f46;
  padding:12px 18px 16px;
  gap:4px;
  border-bottom:3px solid #10b981;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  color:#ecfdf5;
  text-decoration:none;
  padding:8px 6px;
  border-radius:6px;
  font-size:.95rem;
  font-weight:500;
  transition:background .2s ease, transform .15s ease;
}
.mobile-menu a:hover{
  background: rgba(16,185,129,.2);
  transform: translateX(2px);
}

/* Hero */
.page-header{
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  padding:80px 20px 90px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at top left, rgba(255,255,255,.2), transparent 55%);
  opacity:.7;
}
.page-header h1{
  position:relative; z-index:1;
  font-size:2.8rem;
  font-weight:900;
  margin:0 0 12px;
  text-shadow:0 8px 25px rgba(15,23,42,.6);
}
.page-header p{
  position:relative; z-index:1;
  font-size:1.12rem;
  opacity:.96;
  margin:0;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float-animation{ animation: float 3s ease-in-out infinite; }

/* Main */
.calculator-container{
  max-width:1400px;
  margin:-60px auto 60px;
  padding:0 20px;
  position:relative; z-index:10;
}
.calculator-card{
  background:#fff;
  border-radius:24px;
  padding:40px;
  box-shadow:0 22px 60px rgba(15,23,42,.25);
  margin-bottom:24px;
}
.card-title{
  font-size:1.7rem;
  font-weight:800;
  color:#4c1d95;
  margin:0 0 28px;
  display:flex; align-items:center; gap:10px;
}

/* Inputs */
.input-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
  margin-bottom:20px;
}
.input-group{
  background: linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  padding:18px;
  border-radius:14px;
  border:2px solid #667eea;
  transition: all .22s ease;
}
.input-group:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(99,102,241,.25);
}
.input-label{
  font-weight:700;
  color:#4c1d95;
  margin-bottom:6px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.input-field, .select-field{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:2px solid #667eea;
  font-size:.95rem;
  font-weight:500;
  color:#111827;
  transition: all .2s ease;
  background:#fff;
}
.input-field:focus, .select-field:focus{
  outline:none;
  border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(129,140,248,.35);
  transform: scale(1.01);
}
.small-note{
  color:#5b21b6;
  font-size:.9rem;
  line-height:1.55;
}

/* Debt list UI */
.debts-wrap{
  background: linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  border:2px solid #667eea;
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
}
.debts-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.debts-head h3{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  color:#4c1d95;
}
.debt-row{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr auto;
  gap:12px;
  align-items:end;
  background:#fff;
  border:2px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  transition: all .2s ease;
}
.debt-row:hover{
  border-color:#6366f1;
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  transform: translateY(-1px);
}
.debt-mini-label{
  font-weight:800;
  color:#4c1d95;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin:0 0 6px;
}
.debt-remove{
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  background: linear-gradient(135deg,#ef4444 0%,#dc2626 100%);
  color:#fff;
  transition: all .2s ease;
}
.debt-remove:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(239,68,68,.35);
}
.add-btn{
  border:none;
  cursor:pointer;
  border-radius:12px;
  padding:10px 14px;
  font-weight:800;
  background: linear-gradient(135deg,#6366f1 0%,#7c3aed 100%);
  color:#fff;
  transition: all .2s ease;
}
.add-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(99,102,241,.35);
}

/* Button */
.calculate-btn{
  width:100%;
  padding:16px;
  background: linear-gradient(135deg,#10b981 0%,#059669 100%);
  color:#fff;
  border:none;
  border-radius:14px;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
  transition: all .22s ease;
  margin-top:12px;
}
.calculate-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 30px rgba(16,185,129,.45);
}

/* Result */
.result-display{
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  padding:30px;
  border-radius:20px;
  color:#fff;
  margin-bottom:24px;
}
.result-value{
  font-size:3.1rem;
  font-weight:900;
  margin:0 0 4px;
  text-align:center;
}
.result-label{
  font-size:1.2rem;
  font-weight:600;
  text-align:center;
  opacity:.97;
  margin:0 0 18px;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px;
  margin-top:18px;
}
.stat-card{
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  padding:18px;
  border-radius:14px;
  text-align:center;
  border:2px solid rgba(255,255,255,.22);
  transition: all .22s ease;
}
.stat-card:hover{ background: rgba(255,255,255,.25); transform: translateY(-2px); }
.stat-title{
  font-size:.8rem;
  font-weight:600;
  margin-bottom:6px;
  opacity:.9;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.stat-value{ font-size:1.55rem; font-weight:900; }
.stat-value-small{ font-size:1rem; line-height:1.4; }

/* Tables */
.table-wrap{
  margin-top:16px;
  overflow:auto;
  border-radius:14px;
  border:2px solid #e5e7eb;
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
  background:#fff;
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  font-size:.92rem;
  color:#111827;
}
.table th{
  background: linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  color:#4c1d95;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:.78rem;
}

/* Info + downloads */
.info-box{
  background: linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  padding:18px;
  border-radius:12px;
  border-left:4px solid #7c3aed;
  margin-top:18px;
}
.info-title{ font-weight:700; color:#4c1d95; margin-bottom:6px; font-size:.95rem; }
.info-text{ color:#5b21b6; font-size:.9rem; line-height:1.6; }

.download-buttons{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
.download-btn{
  flex:1;
  min-width:180px;
  padding:12px 20px;
  background: linear-gradient(135deg,#6366f1 0%,#7c3aed 100%);
  color:#fff;
  border:none;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  transition: all .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:.95rem;
}
.download-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 20px rgba(99,102,241,.4);
}

.adsense-container{
  background: linear-gradient(135deg,#f3f4ff 0%,#e9e4f0 100%);
  border-radius:16px;
  padding:22px;
  margin:24px 0;
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed #a78bfa;
}
.adsense-placeholder{ text-align:center; color:#4c1d95; font-size:.9rem; }

/* Blog */
.blog-section{ max-width:900px; margin:70px auto; padding:0 20px; }
.blog-content{
  background:#fff;
  border-radius:24px;
  padding:40px;
  box-shadow:0 14px 36px rgba(15,23,42,.18);
  line-height:1.75;
}
.blog-content h2{
  font-size:2.05rem;
  font-weight:900;
  margin:0 0 20px;
  background: linear-gradient(135deg,#6366f1 0%,#a855f7 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.blog-content h3{
  font-size:1.3rem;
  font-weight:700;
  color:#111827;
  margin-top:28px;
  margin-bottom:10px;
}
.blog-content p, .blog-content li{
  color:#4b5563;
  font-size:.98rem;
}
.blog-content ul{ margin-left:1.3rem; margin-bottom:14px; }
.blog-content a{ color:#2563eb; text-decoration:none; font-weight:500; }
.blog-content a:hover{ text-decoration:underline; }

.highlight-box{
  background:#f3f4ff;
  padding:16px;
  border-radius:14px;
  border-left:4px solid #6366f1;
  margin:20px 0;
  font-size:.94rem;
}

.faq-item{ margin-top:16px; padding-top:10px; border-top:1px solid #e5e7eb; }
.faq-item h4{ font-size:1rem; font-weight:700; color:#111827; margin:0 0 6px; }
.faq-item p{ margin:0 0 8px; }

/* Footer */
.footer{
  background: linear-gradient(135deg,#1f2937 0%,#030712 100%);
  color:#fff;
  padding:50px 0 18px;
  margin-top:80px;
}
.footer-column h3{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:12px;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.footer-column ul{ list-style:none; padding:0; margin:0; }
.footer-column ul li{ margin-bottom:8px; }
.footer-column ul li a{
  color:#e5e7eb;
  text-decoration:none;
  font-size:.9rem;
  transition:all .2s ease;
  display:inline-block;
}
.footer-column ul li a:hover{ color:#22c55e; transform:translateX(4px); }
.footer-bottom{
  border-top:1px solid rgba(148,163,184,.35);
  margin-top:30px;
  padding-top:18px;
  text-align:center;
  color:#9ca3af;
  font-size:.9rem;
}

/* Responsive */
@media (max-width:1024px){
  .nav-links{ display:none !important; }
  .mobile-menu-btn{ display:block; }
}
@media (max-width:768px){
  .page-header{ padding:60px 18px 70px; }
  .page-header h1{ font-size:2.05rem; }
  .page-header p{ font-size:1rem; }

  .calculator-card{ padding:24px 18px; }
  .input-grid{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .result-value{ font-size:2.45rem; }
  .download-buttons{ flex-direction:column; }
  .blog-content{ padding:26px 18px; }
  .blog-content h2{ font-size:1.65rem; }
  .blog-content h3{ font-size:1.15rem; }

  .debt-row{
    grid-template-columns: 1fr 1fr;
    align-items:stretch;
  }
  .debt-row .debt-remove{
    grid-column: 1 / -1;
    width:100%;
  }
  .table{ min-width: 760px; }
}