:root{
    --cnl-primary: #ee463b;
    --cnl-dark: #06163a;
    --cnl-light: #fff5f4;
}

.ketto-wrap{max-width:1100px;margin:0 auto;}

/* urgent strip */
.ketto-urgent{
    background:var(--cnl-light);
    border:1px solid #f7b2ad;
    color:var(--cnl-primary);
    padding:10px 14px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px
}

/* headings */
.ketto-title{
    font-weight:800;
    font-size:30px;
    line-height:1.2;
    margin:14px 0 16px;
    color:var(--cnl-dark);
}

.ketto-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    border:1px solid #eee
}
.ketto-card-pad{padding:16px}

.ketto-img{border-radius:10px;overflow:hidden}
.ketto-img img{width:100%;height:auto;display:block}

/* tabs */
.ketto-tabs{display:flex;gap:18px;border-bottom:1px solid #eee;margin-top:14px}
.ketto-tabs a{padding:12px 2px;display:inline-block;color:#666;font-weight:700;font-size:14px}
.ketto-tabs a.active{
    color:var(--cnl-primary);
    border-bottom:3px solid var(--cnl-primary)
}

.ketto-section-title{
    font-size:18px;
    font-weight:800;
    margin:18px 0 10px;
    color:var(--cnl-dark);
}

.ketto-muted{color:#777}

/* buttons */
.ketto-btn-main{
    background:var(--cnl-primary);
    border:0;
    color:#fff;
    padding:12px 18px;
    border-radius:8px;
    font-weight:800;
    width:100%
}
.ketto-btn-main:hover{opacity:.95;color:#fff}

.ketto-btn-share{
    background:#fff;
    border:1px solid #e6e6e6;
    color:var(--cnl-dark);
    padding:10px 14px;
    border-radius:8px;
    font-weight:700
}
.ketto-btn-share:hover{
    border-color:var(--cnl-primary);
    color:var(--cnl-primary);
}

/* progress */
.ketto-progress{
    height:8px;
    background:#fde7e5;
    border-radius:999px;
    overflow:hidden
}
.ketto-progress > div{
    height:8px;
    background:var(--cnl-primary);
    width:0%
}

/* stats */
.ketto-stat{display:flex;gap:20px;margin-top:12px}
.ketto-stat .box{flex:1;border:1px solid #eee;border-radius:10px;padding:10px 12px}
.ketto-stat .num{font-weight:900;font-size:18px;color:var(--cnl-dark)}

/* badges */
.ketto-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800
}
.ketto-badge-urgent{
    background:var(--cnl-light);
    color:var(--cnl-primary);
    border:1px solid #f7b2ad
}
.ketto-badge-active{
    background:#eefbf2;
    color:#1e7e34;
    border:1px solid #c8eed3
}

.ketto-mini{font-size:12px;color:#777}

.sticky-side{position:sticky;top:95px}

/* person card */
.ketto-person{display:flex;gap:12px;align-items:center}
.ketto-avatar{
    width:44px;height:44px;border-radius:50%;
    background:#ffe9e7;
    color:var(--cnl-primary);
    display:flex;align-items:center;justify-content:center;
    font-weight:900
}
.ketto-person h6{margin:0;font-weight:900;color:var(--cnl-dark)}
.ketto-person p{margin:0;color:#777;font-size:13px}

.ketto-divider{height:1px;background:#eee;margin:14px 0}
.ketto-pill{display:inline-flex;gap:8px;align-items:center}

/* ===== Donate Modal (Modern) ===== */
#donateModal .modal-dialog{max-width:760px;}
#donateModal .modal-content{
  border:0;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(6,22,58,.25);
}
#donateModal .modal-header{
  border:0;
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(238,70,59,.12), rgba(6,22,58,.06));
}
#donateModal .modal-title{
  font-weight:900;
  color:var(--cnl-dark);
  font-size:18px;
  letter-spacing:.2px;
}
#donateModal .donate-close{
  width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #eee;color:var(--cnl-dark);
  cursor:pointer;transition:.15s ease;
}
#donateModal .donate-close:hover{
  border-color:rgba(238,70,59,.35);
  color:var(--cnl-primary);
  transform:translateY(-1px);
}
#donateModal .modal-body{padding:18px 22px 20px;background:#fff;}
#donateModal .donate-sub{
  font-size:12px;color:#6b7280;
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin-bottom:14px;
}
#donateModal .donate-sub b{color:var(--cnl-primary);font-weight:900}

/* amount grid */
.donate-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
@media(max-width: 576px){
  .donate-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
}
.donate-pill{
  border:1px solid #e9ecef;
  background:#fff;
  border-radius:14px;
  padding:12px 10px;
  font-weight:900;
  color:var(--cnl-dark);
  text-align:center;
  cursor:pointer;
  transition:.15s ease;
  user-select:none;
}
.donate-pill small{display:block;font-weight:700;color:#6b7280;margin-top:2px;}
.donate-pill:hover{
  border-color:rgba(238,70,59,.35);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(6,22,58,.08);
}
.donate-pill.active{
  background:var(--cnl-primary);
  border-color:var(--cnl-primary);
  color:#fff;
  box-shadow:0 14px 28px rgba(238,70,59,.25);
}
.donate-pill.active small{color:rgba(255,255,255,.85);}

/* other amount box */
#otherAmtBox .amount-wrap{
  max-width:460px;
  margin:0 auto 14px;
  background:#f8fafc;
  border:1px solid #eef2f7;
  border-radius:16px;
  padding:12px;
}
#otherAmtBox .input-group-text{
  background:#fff;border:1px solid #e6e6e6;
  border-radius:14px; font-weight:900;
}
#otherAmtBox #donate_amount{
  border:1px solid #e6e6e6;
  border-left:0;
  border-radius:14px;
  height:44px;
}

/* form */
#donateModal label{
  font-weight:900;
  color:var(--cnl-dark);
  font-size:13px;
  margin-bottom:6px;
}
#donateModal .form-control{
  border-radius:14px;
  border:1px solid #e9ecef;
  height:44px;
}
#donateModal .form-control:focus{
  border-color:rgba(238,70,59,.5);
  box-shadow:0 0 0 .2rem rgba(238,70,59,.12);
}
.donate-row{display:flex;gap:12px;}
.donate-row > .col{flex:1;}
@media(max-width: 768px){ .donate-row{flex-direction:column;} }

/* anonymous toggle */
.donate-toggle{
  display:flex;align-items:center;gap:10px;
  background:#f8fafc;
  border:1px solid #eef2f7;
  padding:10px 12px;
  border-radius:14px;
  margin-top:10px;
}
.donate-toggle input{width:18px;height:18px;}
.donate-toggle span{font-size:12px;color:#6b7280;font-weight:700;}

/* proceed button */
#btnProceedDonate{
  height:48px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 14px 28px rgba(238,70,59,.22);
}
#btnProceedDonate:hover{transform:translateY(-1px);}
#donateModal .donate-foot{
  text-align:center;
  margin-top:10px;
  font-size:11px;
  color:#6b7280;
}
#donateModal .donate-foot a{color:var(--cnl-primary);font-weight:900}