:root {
    --khatm-primary: #2d6a4f; --khatm-secondary: #1b4332; --khatm-accent: #40916c;
    --khatm-light-green: #95d5b2; --khatm-light: #d8f3dc; --khatm-text: #333;
    --khatm-border: #b7e4c7; --khatm-shadow: 0 10px 40px rgba(45, 106, 79, 0.15);
    --khatm-gradient: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
}

.khatm-public-container {
    max-width: min(1200px, 90%); margin: 5vh auto; padding: clamp(25px, 4vw, 50px);
    background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%); font-family: 'Vazir', sans-serif;
    border-radius: clamp(20px, 3vw, 25px); box-shadow: var(--khatm-shadow); text-align: justify;
    border: 3px solid var(--khatm-border); line-height: 1.7; word-spacing: -0.05em;
}
.khatm-title { font-size: clamp(1.75rem, 5vw, 2.5rem); text-align: center; color: var(--khatm-secondary); }
.khatm-subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); text-align: center; color: var(--khatm-text); }
.khatm-intent-item { background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%); padding: 30px; 
    border-radius: 20px; margin: 30px 0; border-right: 8px solid var(--khatm-accent); }
.intent-title { font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--khatm-secondary); }
.khatm-progress-bar { height: 35px; background: #e9f5eb; border-radius: 20px; overflow: hidden; margin: 20px 0; }
.khatm-progress-fill { height: 100%; background: var(--khatm-gradient); border-radius: 18px; transition: width 0.8s; }
.khatm-progress-text { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
    color: white; font-weight: 800; font-size: clamp(0.9rem, 2vw, 1rem); }
.khatm-progress-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 15px; margin-top: 15px; }
.khatm-progress-stats span { background: #f8fff9; padding: 12px; border-radius: 12px; 
    border: 2px solid var(--khatm-border); text-align: center; font-size: clamp(0.9rem, 2vw, 1rem); }
.khatm-form { background: #f8fff9; padding: 35px; border-radius: 20px; margin: 30px 0; }
.form-title { font-size: clamp(1.5rem, 4vw, 2rem); text-align: center; color: var(--khatm-secondary); }
.khatm-input { width: 100%; padding: clamp(15px, 3vw, 20px); border: 3px solid var(--khatm-border); 
    border-radius: 15px; font-size: clamp(1rem, 2.5vw, 1.125rem); margin: 15px 0; text-align: center; }
.khatm-button { display: block; width: 100%; padding: clamp(18px, 3vw, 22px); 
    font-size: clamp(1rem, 2.5vw, 1.25rem); background: var(--khatm-gradient); color: white;
    border: none; border-radius: 15px; cursor: pointer; margin: 20px 0; font-weight: 800; }
.khatm-button-secondary { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); }
.khatm-bottom-buttons { display: flex; flex-direction: column; align-items: center; 
    gap: 20px; margin-top: 40px; padding-top: 30px; border-top: 3px solid var(--khatm-border); }
.khatm-bottom-buttons .khatm-button { width: auto; min-width: min(300px, 80%); max-width: 400px; }
#result_message.success { background: #d4edda; color: #155724; border: 2px solid #c3e6cb; }
#result_message.error { background: #f8d7da; color: #721c24; border: 2px solid #f5c6cb; }

@media (max-width: 768px) {
    .khatm-progress-stats { grid-template-columns: 1fr; }
    .khatm-intent-item, .khatm-form { padding: 25px; }
    .khatm-bottom-buttons .khatm-button { min-width: 90%; }
}
@media (max-width: 480px) {
    .khatm-public-container { padding: 20px; margin: 20px auto; }
    .khatm-title { font-size: 1.5rem; }
}