/* Toolora AI Humanizer - Frontend Styles */
.tah-wrapper { max-width: 900px; margin: 20px auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.tah-header { text-align: center; margin-bottom: 30px; }
.tah-header h2 { font-size: 28px; margin: 0 0 10px; color: #1a7f4e; }
.tah-header p { color: #666; font-size: 15px; }
.tah-usage-info { margin-top: 15px; }
.tah-usage-badge { display: inline-block; padding: 6px 14px; background: #e8f5ee; color: #1a7f4e; border-radius: 20px; font-size: 13px; }

.tah-tabs { display: flex; gap: 10px; border-bottom: 2px solid #eee; margin-bottom: 20px; }
.tah-tab { background: none; border: none; padding: 12px 20px; font-size: 15px; font-weight: 600; color: #666; cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; }
.tah-tab:hover { color: #1a7f4e; }
.tah-tab.active { color: #1a7f4e; border-bottom-color: #1a7f4e; }

.tah-tab-content { display: none; }
.tah-tab-content.active { display: block; }

.tah-input-section { margin-bottom: 15px; }
.tah-input-section label { display: block; font-weight: 600; margin-bottom: 8px; color: #333; }
.tah-input-section textarea { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; transition: border 0.2s; box-sizing: border-box; }
.tah-input-section textarea:focus { outline: none; border-color: #1a7f4e; }
.tah-counter { text-align: right; font-size: 13px; color: #999; margin-top: 5px; }

.tah-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.tah-controls label { font-weight: 600; color: #333; }
.tah-controls select { padding: 8px 12px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 14px; }

.tah-btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tah-btn-primary { background: #1a7f4e; color: #fff; }
.tah-btn-primary:hover { background: #15683f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,127,78,0.3); }
.tah-btn-secondary { background: #f0f0f0; color: #333; }
.tah-btn-secondary:hover { background: #e0e0e0; }

.tah-loading { text-align: center; padding: 30px; }
.tah-spinner { width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: #1a7f4e; border-radius: 50%; animation: tah-spin 0.8s linear infinite; margin: 0 auto 15px; }
@keyframes tah-spin { to { transform: rotate(360deg); } }

.tah-result { background: #f8fcfa; border: 2px solid #1a7f4e; border-radius: 10px; padding: 20px; margin-top: 20px; }
.tah-result h3 { margin: 0 0 15px; color: #1a7f4e; }
.tah-result-box textarea { width: 100%; padding: 12px; border: 1px solid #d0e6d9; border-radius: 6px; background: #fff; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.tah-result-stats { display: flex; gap: 20px; margin: 15px 0; font-size: 13px; color: #666; }
.tah-result-stats strong { color: #1a7f4e; }
.tah-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.tah-detect-meters { margin: 20px 0; }
.tah-meter { margin-bottom: 15px; }
.tah-meter label { display: block; font-weight: 600; margin-bottom: 6px; }
.tah-bar { height: 24px; background: #f0f0f0; border-radius: 12px; overflow: hidden; position: relative; }
.tah-bar-fill { height: 100%; transition: width 0.6s ease; border-radius: 12px; }
.tah-ai-bar { background: linear-gradient(90deg, #ff6b6b, #ee5a5a); }
.tah-human-bar { background: linear-gradient(90deg, #1a7f4e, #22a062); }
.tah-meter span { float: right; margin-top: -24px; margin-right: 10px; font-weight: 700; color: #fff; line-height: 24px; position: relative; }

.tah-verdict { padding: 12px 16px; background: #fff; border-radius: 8px; font-weight: 600; font-size: 16px; margin: 15px 0; text-align: center; }
.tah-verdict.ai { background: #ffe5e5; color: #c92a2a; }
.tah-verdict.human { background: #e8f5ee; color: #1a7f4e; }
.tah-verdict.mixed { background: #fff4e0; color: #d68910; }
.tah-reasoning { padding: 12px; background: #f8f9fa; border-left: 3px solid #1a7f4e; font-size: 14px; color: #555; font-style: italic; }

.tah-error { padding: 12px 16px; background: #fee; color: #c92a2a; border-radius: 8px; margin: 15px 0; border-left: 4px solid #c92a2a; }

.tah-ad { margin: 20px 0; text-align: center; min-height: 90px; background: #fafafa; border-radius: 8px; padding: 10px; }

.tah-features { margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; }
.tah-features h3 { text-align: center; color: #1a7f4e; margin-bottom: 20px; }
.tah-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
.tah-feature { padding: 15px; background: #f8fcfa; border-radius: 8px; text-align: center; }
.tah-feature strong { display: block; margin: 8px 0 4px; color: #1a7f4e; }
.tah-feature p { font-size: 13px; color: #666; margin: 0; }

@media (max-width: 600px) {
    .tah-wrapper { padding: 15px; }
    .tah-controls { flex-direction: column; align-items: stretch; }
    .tah-controls .tah-btn { width: 100%; }
    .tah-tab { padding: 10px 14px; font-size: 14px; }
}