/* ===== AI COMPLAINT LETTER GENERATOR ===== */

.acl-header { background: linear-gradient(135deg, #1e3a5f 0%, #2d6a4f 50%, #1e3a5f 100%) !important; }

.acl-layout { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; margin-bottom: 28px; }

/* Controls */
.acl-controls { background: #fff; border: 2px solid #e5e7eb; border-radius: 20px; padding: 20px; position: sticky; top: 80px; max-height: 92vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #e5e7eb #fff; }
.acl-controls::-webkit-scrollbar { width: 4px; }
.acl-controls::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.acl-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px solid #f3f4f6; }
.acl-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.acl-section-title { font-size: 12px; font-weight: 800; color: #1f2937; margin-bottom: 10px; }
.acl-req { color: #ef4444; }

/* Category Grid */
.acl-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.acl-cat-btn { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 9px; padding: 8px 6px; font-size: 11px; font-weight: 700; color: #166534; cursor: pointer; transition: all .2s; text-align: center; }
.acl-cat-btn:hover { border-color: #16a34a; background: #dcfce7; }
.acl-cat-btn.active { background: linear-gradient(135deg, #1e3a5f, #2d6a4f); border-color: #2d6a4f; color: #fff; }

/* Input / Textarea */
.acl-input, .acl-textarea { width: 100%; border: 2px solid #e5e7eb; border-radius: 10px; padding: 10px 13px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .2s; box-sizing: border-box; color: #1f2937; }
.acl-textarea { resize: vertical; line-height: 1.6; }
.acl-input:focus, .acl-textarea:focus { border-color: #2d6a4f; }

/* Tone Grid */
.acl-tone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.acl-tone-btn { background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 10px; padding: 9px 6px; font-size: 11px; font-weight: 700; color: #166534; cursor: pointer; transition: all .2s; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.acl-tone-btn small { font-size: 10px; font-weight: 400; color: #4ade80; }
.acl-tone-btn:hover { border-color: #16a34a; }
.acl-tone-btn.active { background: linear-gradient(135deg, #1e3a5f, #2d6a4f); border-color: #2d6a4f; color: #fff; }
.acl-tone-btn.active small { color: #86efac; }

/* Lang */
.acl-lang-btns { display: flex; gap: 6px; }
.acl-lang-btn { flex: 1; background: #f0fdf4; border: 1.5px solid #bbf7d0; border-radius: 9px; padding: 9px 5px; font-size: 12px; font-weight: 700; color: #166534; cursor: pointer; transition: all .2s; text-align: center; }
.acl-lang-btn:hover { border-color: #16a34a; }
.acl-lang-btn.active { background: linear-gradient(135deg, #1e3a5f, #2d6a4f); border-color: #2d6a4f; color: #fff; }

/* Generate */
.acl-generate-btn { width: 100%; background: linear-gradient(135deg, #1e3a5f, #2d6a4f); color: #fff; border: none; border-radius: 14px; padding: 16px; font-size: 17px; font-weight: 900; cursor: pointer; transition: all .3s; box-shadow: 0 4px 20px rgba(45,106,79,.4); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.acl-generate-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(45,106,79,.5); }
.acl-generate-btn:disabled { opacity: .7; cursor: not-allowed; }

/* Output */
.acl-output { display: flex; flex-direction: column; gap: 14px; min-height: 500px; }

/* Placeholder */
.acl-placeholder { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 3px dashed #86efac; border-radius: 20px; padding: 40px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; justify-content: center; min-height: 400px; }
.acl-ph-icon { font-size: 64px; animation: acl-float 3s ease-in-out infinite; }
@keyframes acl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.acl-placeholder h3 { font-size: 22px; font-weight: 800; color: #166534; margin: 0; }
.acl-placeholder p  { font-size: 14px; color: #2d6a4f; max-width: 380px; margin: 0; line-height: 1.6; }
.acl-ph-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 440px; }
.acl-ph-use { background: #fff; border: 2px solid #bbf7d0; border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #166534; text-align: left; }

/* Loading */
.acl-loading { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border: 2px solid #86efac; border-radius: 20px; padding: 60px 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; min-height: 300px; justify-content: center; }
.acl-loading-icon { font-size: 52px; animation: acl-scale 1.2s ease-in-out infinite alternate; }
@keyframes acl-scale { from { transform: scale(0.9); } to { transform: scale(1.1); } }
.acl-loading-title { font-size: 18px; font-weight: 800; color: #166534; }
.acl-loading p { font-size: 13px; color: #2d6a4f; margin: 0; }
.acl-loading-dots { display: flex; gap: 8px; }
.acl-loading-dots span { width: 10px; height: 10px; background: #2d6a4f; border-radius: 50%; animation: acl-dot 1s ease-in-out infinite; }
.acl-loading-dots span:nth-child(2) { animation-delay: .2s; }
.acl-loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes acl-dot { 0%,100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.2); opacity: 1; } }

/* Error */
.acl-error { display: flex; align-items: center; gap: 10px; padding: 20px; background: #fef2f2; border: 2px solid #fecaca; border-radius: 14px; color: #dc2626; font-size: 14px; font-weight: 600; }

/* Results */
.acl-results { display: flex; flex-direction: column; gap: 14px; }
.acl-results-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.acl-results-info h3 { font-size: 16px; font-weight: 800; color: #1f2937; margin: 0 0 4px; }
.acl-word-count { font-size: 12px; color: #6b7280; }
.acl-results-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acl-copy-btn  { background: #1e3a5f; color: #fff; border: none; border-radius: 9px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; }
.acl-copy-btn:hover  { background: #162d4b; }
.acl-print-btn { background: #2d6a4f; color: #fff; border: none; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; }
.acl-print-btn:hover { background: #245c42; }
.acl-regen-btn { background: #fff; border: 2px solid #bbf7d0; border-radius: 9px; padding: 8px 14px; font-size: 12px; font-weight: 700; color: #2d6a4f; cursor: pointer; transition: all .2s; }
.acl-regen-btn:hover { border-color: #2d6a4f; background: #f0fdf4; }

/* Letter Box */
.acl-letter-box { background: #fff; border: 2px solid #e5e7eb; border-radius: 16px; padding: 32px 36px; font-size: 14px; line-height: 2; color: #1f2937; font-family: 'Georgia', serif; white-space: pre-wrap; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.acl-letter-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(135deg, #1e3a5f, #2d6a4f); border-radius: 14px 14px 0 0; }

/* Tips */
.acl-tips-box { background: #fefce8; border: 2px solid #fde047; border-radius: 14px; padding: 18px 20px; }
.acl-tips-box h4 { font-size: 14px; font-weight: 800; color: #713f12; margin: 0 0 10px; }
.acl-tips-box ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.acl-tips-box ul li { font-size: 13px; color: #713f12; line-height: 1.5; }

/* Print */
@media print {
    .acl-controls, .acl-results-header, .acl-tips-box, .tool-header, .breadcrumb, .related-tools-section, .seo-content, footer, header { display: none !important; }
    .acl-letter-box { border: none; padding: 0; box-shadow: none; font-size: 12pt; }
    .acl-letter-box::before { display: none; }
}

/* Responsive */
@media (max-width: 1000px) { .acl-layout { grid-template-columns: 1fr; } .acl-controls { position: static; max-height: none; } }
@media (max-width: 600px) { .acl-cat-grid { grid-template-columns: repeat(2, 1fr); } .acl-tone-grid { grid-template-columns: 1fr 1fr; } .acl-ph-uses { grid-template-columns: 1fr; } .acl-results-header { flex-direction: column; align-items: flex-start; } .acl-letter-box { padding: 20px 16px; } }
@media (max-width: 400px) { .acl-lang-btns { flex-direction: column; } }