/* advanced-traffic-booster-toolkit-styles.css */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --text-color: #2c3e50;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --border-color: #ddd;
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.dark-theme {
    --primary-color: #5dade2;
    --secondary-color: #58d68d;
    --accent-color: #e74c3c;
    --text-color: #ecf0f1;
    --bg-color: #2c3e50;
    --card-bg: #34495e;
    --border-color: #4a6572;
    --shadow: 0 4px 12px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:var(--bg-color); color:var(--text-color); line-height:1.6; transition: background 0.3s; }

.traffic-booster-container { max-width:1200px; margin:0 auto; padding:20px; }

/* Header */
.traffic-booster-header {
    display:flex; justify-content:space-between; align-items:center; padding:20px; background:var(--card-bg); border-radius:12px; margin-bottom:30px; box-shadow:var(--shadow);
}
.traffic-booster-logo h1 { font-size:2rem; margin:0; }
.traffic-booster-logo p { font-size:0.9rem; opacity:0.8; margin:5px 0 0; }

.theme-toggle button { padding:10px 20px; border:none; border-radius:8px; cursor:pointer; font-weight:600; background:var(--secondary-color); color:#fff; }

/* Dashboard */
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dashboard-header h2 { margin:0; font-size:1.5rem; }
.last-updated { font-size:0.9rem; opacity:0.7; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
.stat-card {
    background:var(--card-bg); padding:20px; border-radius:12px; box-shadow:var(--shadow); text-align:center; position:relative; overflow:hidden;
}
.stat-icon { font-size:2.2rem; margin-bottom:10px; }
.stat-value { font-size:2rem; font-weight:700; margin:10px 0; }
.stat-trend { font-size:0.95rem; font-weight:600; }
.stat-trend.up { color:var(--secondary-color); }
.progress-bar { height:6px; background:var(--border-color); border-radius:3px; overflow:hidden; margin-top:10px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--primary-color),var(--secondary-color)); border-radius:3px; transition:width 1s ease; }

/* Tabs */
.traffic-booster-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:25px; }
.tab-btn {
    padding:12px 20px; background:var(--card-bg); border:1px solid var(--border-color); border-radius:8px; cursor:pointer; font-weight:500; transition:all .3s;
}
.tab-btn.active, .tab-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }

/* Tab Content */
.tab-content { display:none; background:var(--card-bg); padding:30px; border-radius:12px; box-shadow:var(--shadow); }
.tab-content.active { display:block; animation:fadeIn 0.5s ease; }
.tab-content h2 { margin-top:0; margin-bottom:15px; font-size:1.6rem; }

/* Forms */
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; font-weight:600; }
.form-group input {
    width:100%; padding:14px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-color); color:var(--text-color); font-size:1rem;
}
.form-group input:focus { border-color:var(--primary-color); outline:none; box-shadow:0 0 0 3px rgba(52,152,219,0.2); }

/* Buttons */
.traffic-booster-btn {
    padding:14px 28px; border:none; border-radius:8px; cursor:pointer; font-weight:600; font-size:1rem; position:relative; overflow:hidden; transition:all .3s;
}
.traffic-booster-btn-primary { background:var(--primary-color); color:#fff; }
.traffic-booster-btn-primary:hover { background:#2980b9; transform:translateY(-2px); }
.traffic-booster-btn:disabled { opacity:0.7; cursor:not-allowed; }

/* AI Chat */
.ai-chat-container { display:flex; flex-direction:column; height:420px; border:1px solid var(--border-color); border-radius:12px; overflow:hidden; }
.ai-messages { flex:1; padding:15px; overflow-y:auto; background:var(--bg-color); }
.ai-input { display:flex; border-top:1px solid var(--border-color); }
.ai-input input { flex:1; border:none; padding:15px; border-radius:0; }
.ai-input button { background:var(--primary-color); color:#fff; border:none; padding:0 20px; }

/* Footer */
.traffic-booster-footer { text-align:center; margin-top:50px; padding:20px; font-size:0.9rem; opacity:0.7; }

/* Responsive */
@media (max-width:768px) {
    .traffic-booster-header { flex-direction:column; text-align:center; gap:15px; }
    .stats-grid { grid-template-columns:1fr; }
    .dashboard-header { flex-direction:column; gap:10px; text-align:center; }
}