:root {
    --bg-dark: #111827;
    --bg-card: #1f2937;
    --border-color: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --accent-grad-start: #22d3ee;
    --accent-grad-end: #3b82f6;
    --accent-color: #3b82f6;
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --font-family: 'Vazirmatn', sans-serif;
    --diff-easy: #34d399;
    --diff-medium: #fbbf24;
    --diff-hard: #f87171;
    --intent-info: #3b82f6;
    --intent-comm: #f59e0b;
    --intent-trans: #16a34a;
    --intent-mixed: #9333ea;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family);
    direction: rtl;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    padding: 40px 20px;
}
.container { width: 100%; max-width: 1400px; margin: 0 auto; }

/* Header */
.main-header { text-align: center; margin-bottom: 40px; }
.hero-title { font-size: 3rem; font-weight: 800; }
.gradient-text {
    background: linear-gradient(90deg, var(--accent-grad-start), var(--accent-grad-end));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitle { color: var(--text-secondary); margin-top: 8px; font-size: 1.2rem; }

/* Input Card */
.input-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px; padding: 30px;
    display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
}
.form-group { flex: 1; min-width: 250px; }
.form-group label { display: block; font-weight: 500; margin-bottom: 10px; color: var(--text-secondary); }

/* MODIFIED: Added 'select' to the rule */
input[type="text"], input[type="password"], select {
    width: 100%; padding: 12px 16px; border: 1px solid var(--border-color);
    border-radius: 10px; font-size: 1rem; font-family: var(--font-family);
    background-color: #111827; color: var(--text-primary); transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    height: 49px; /* Ensure consistent height */
}

/* MODIFIED: Added select:focus */
input:focus, select:focus { 
    outline: none; 
    border-color: var(--accent-color); 
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 20%, transparent); 
}

/* ADDED: Style for select arrow */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-left: 2.5rem;
}

#apiKey, #serperApiKey, #openaiApiKey { direction: ltr; text-align: left; }

#submitBtn {
    background: linear-gradient(90deg, var(--accent-grad-start), var(--accent-grad-end));
    color: white; border: none; border-radius: 10px;
    padding: 12px 30px; font-size: 1rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; gap: 10px;
    transition: all 0.3s ease;
    height: 49px;
}
#submitBtn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--accent-color) 50%, transparent); }
#submitBtn:disabled { background: #4b5563; cursor: not-allowed; transform: none; box-shadow: none; }

/* Loader, Error, Results */
#loader { text-align: center; padding: 60px 0; }
.spinner { border: 5px solid var(--border-color); border-top: 5px solid var(--accent-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loader p { color: var(--text-secondary); }
.hidden { display: none !important; }
#error-container { margin-top: 20px; padding: 15px; background-color: #4c1d1d; border: 1px solid #f87171; color: #fecaca; border-radius: 8px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#results-dashboard { animation: fadeIn 0.5s ease-out; }
.results-header { display: flex; justify-content: space-between; align-items: center; margin: 40px 0 25px; }
.results-header h2 { font-size: 1.5rem; }
#result-keyword-title { color: var(--accent-grad-start); font-weight: 700; }
#downloadCsvBtn { background-color: #16a34a; color: white; border: none; border-radius: 8px; padding: 10px 18px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
#downloadCsvBtn:hover { background-color: #15803d; }

/* Dashboard Grid */
.dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 25px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.keyword-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; }
.full-width-grid-item { grid-column: 1 / -1; }

@keyframes cardFadeIn { from { opacity: 0; transform: scale(0.98) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.kpi-card, .keyword-card, .serp-analysis-card, .trends-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    animation: cardFadeIn 0.5s ease-out forwards;
    opacity: 0;
}
.kpi-card { text-align: center; }
.kpi-card h3 { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 20px; }
.gauge-score { font-size: 4rem; font-weight: 800; line-height: 1; }
.gauge-label { font-size: 1.1rem; font-weight: 500; margin-top: 8px; }
.justification-list { list-style: none; text-align: right; margin: 0; padding: 0; }
.justification-list li { margin-bottom: 12px; color: var(--text-secondary); line-height: 1.6; }
.justification-list li:last-child { margin-bottom: 0; }

/* Card Header (shared by SERP, Trends, etc.) */
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.card-header h3 { font-size: 1.3rem; }
.card-header .icon { color: var(--accent-color); }

/* Google Trends Card Styles */
.trends-card {
    position: relative;
    overflow: visible;
}
#trends-chart-container {
    width: 100%;
    height: 450px;
    border-radius: 12px;
    overflow: visible;
    position: relative;
    background-color: var(--bg-dark);
}
#trends-chart-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 12px;
    background-color: transparent !important;
}

/* SERP Analysis Card Styles */
.serp-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-bottom: 30px; }
.serp-result-item { background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
.serp-result-item .position { font-size: 1.5rem; font-weight: 800; color: var(--accent-color); }
.serp-result-item .title { font-size: 1.1rem; font-weight: 700; margin: 10px 0; }
.serp-result-item .title a { color: var(--text-primary); text-decoration: none; }
.serp-result-item .title a:hover { text-decoration: underline; color: var(--accent-grad-start); }
.serp-result-item .item-label { color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; margin-top: 15px; }
.serp-result-item .item-value { color: #d1d5db; line-height: 1.6; }
.serp-result-item .item-value.tag { background-color: var(--border-color); padding: 4px 10px; border-radius: 8px; display: inline-block; }

.serp-summary { background-color: color-mix(in srgb, var(--accent-color) 8%, var(--bg-dark)); border-right: 4px solid var(--accent-color); padding: 25px; border-radius: 8px; }
.serp-summary h4 { font-size: 1.2rem; margin-bottom: 15px; }
.serp-summary .summary-section { margin-bottom: 20px; }
.serp-summary .summary-section:last-child { margin-bottom: 0; }
.serp-summary .summary-label { display: block; color: var(--text-secondary); font-size: 1rem; margin-bottom: 8px; }
.serp-summary .summary-content { font-size: 1.05rem; line-height: 1.7; }
.serp-summary .summary-content ul { list-style-type: '– '; padding-right: 20px; }
.serp-summary .summary-content li { margin-bottom: 8px; }

/* Keyword Card Styles */
.keyword-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
.keyword-card-header .icon { color: var(--accent-color); }
.keyword-card-header h4 { font-size: 1.2rem; flex-grow: 1; }
.keyword-card-header .count { background-color: var(--border-color); color: var(--text-primary); padding: 2px 10px; border-radius: 50px; font-size: 0.8rem; font-weight: 500; }
.keyword-list-wrapper { max-height: 300px; overflow-y: auto; padding-left: 10px; }
.keyword-list { list-style: none; padding: 0; }
.keyword-list li { padding: 10px 5px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; transition: background-color 0.2s; font-size: 0.95rem; }
.keyword-list li:last-child { border-bottom: none; }
.keyword-list li:hover { background-color: #374151; border-radius: 6px; }
.copy-btn { background: none; border: none; cursor: pointer; color: #6b7280; opacity: 0; transition: all 0.2s; }
.keyword-list li:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--accent-grad-start); }
.cluster-name { font-weight: 700; margin-bottom: 6px; }
.sub-keywords { font-size: 0.9em; color: var(--text-secondary); line-height: 1.5; }

/* Custom Scrollbar */
.keyword-list-wrapper::-webkit-scrollbar { width: 6px; }
.keyword-list-wrapper::-webkit-scrollbar-track { background: transparent; }
.keyword-list-wrapper::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 10px; }
.keyword-list-wrapper::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .dashboard-grid, .kpi-grid, .keyword-grid, .serp-results-grid { gap: 20px; grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body { padding: 20px 10px; }
    .hero-title { font-size: 2rem; }
    .subtitle { font-size: 1rem; }
    .input-card { padding: 20px; }
    .form-group { min-width: 100%; }
    .results-header { flex-direction: column; gap: 15px; align-items: stretch; }
    .results-header h2 { font-size: 1.3rem; }
    #downloadCsvBtn { align-self: center; }
}