/* =========================
   Base Layout & Typography
========================= */

.swp-wrap{
  max-width:1200px;
  margin:auto;
  padding:16px;
  font-family:system-ui;
  color:#0f172a
}

.swp-title{
  text-align:center;
  margin:12px 0 20px;
  font-size:26px;
  font-weight:700
}

.swp-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:28px
}

@media(max-width:768px){
  .swp-grid{grid-template-columns:1fr}
}

.swp-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 30px rgba(15,23,42,.06)
}

/* =========================
   Form Elements
========================= */

label{
  display:block;
  margin-top:14px;
  font-size:13px;
  font-weight:600;
  color:#334155
}

input{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #e5e7eb
}

/* =========================
   Monthly / Yearly Toggle
========================= */

.swp-toggle{
  display:flex;
  gap:8px;
  margin-bottom:12px
}

.swp-toggle button{
  flex:1;
  border:1px solid #2563eb;
  background:#fff;
  color:#2563eb;
  border-radius:10px;
  padding:6px;
  font-weight:600;
  cursor:pointer
}

.swp-toggle button.active{
  background:#2563eb;
  color:#fff
}

/* =========================
   KPI Cards
========================= */

.swp-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:16px
}

@media(max-width:768px){
  .swp-kpis{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .swp-kpis{grid-template-columns:1fr}
}

.kpi{
  position:relative;
  background:#f8fafc;
  padding:16px 16px 16px 52px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  min-height:96px;
  overflow:hidden
}

.kpi-icon{
  position:absolute;
  left:14px;
  top:14px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e0e7ff
}

.kpi strong{
  display:block;
  font-size:20px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.kpi.profit{
  background:#ecfdf5;
  border-color:#bbf7d0
}

.kpi.inflation{
  background:#fff7ed;
  border-color:#fed7aa
}

/* =========================
   Share & Action Buttons
========================= */

.swp-share{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px
}

/* WhatsApp – modern rounded button */
#whatsappShare{
  background:#25d366;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px
}

/* CSV / Excel / Table buttons */
#csvBtn,
#excelBtn,
#toggleTable{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  font-weight:600;
  cursor:pointer;
  color:#0f172a
}

#csvBtn:hover,
#excelBtn:hover,
#toggleTable:hover{
  background:#f8fafc
}

/* =========================
   Warning Message
========================= */

.swp-warning{
  margin-top:10px;
  font-size:13px;
  color:#b45309;
  background:#fff7ed;
  padding:8px 12px;
  border-radius:8px
}

/* =========================
   Ad Slot
========================= */

.swp-ad-slot{
  margin:20px 0;
  padding:20px;
  text-align:center;
  font-size:13px;
  color:#64748b;
  border-radius:12px
}
@media (max-width: 768px) {
  .swp-card canvas {
    max-height: 280px;
  }
}
@media (max-width: 768px) {
  .swp-card {
    text-align: center;
  }
}