/* ==========================================
   🚀 PAGE SPEED TESTER - ULTRA PRO SAAS 2026
========================================== */
.dw-ps-container { max-width: 1050px; margin: 60px auto 80px; padding: 0 20px; font-family: 'Inter', system-ui, sans-serif; }

.dw-ps-header { text-align: center; margin-bottom: 50px; }
.dw-ps-badge { background: #f0fdf4; color: #10b981; border: 1px solid #d1fae5; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 50px; display: inline-block; margin-bottom: 15px; letter-spacing: 0.5px;}
.dw-ps-header h2 { font-size: 42px; font-weight: 800; background: linear-gradient(to right, #0f172a, #334155); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0 0 15px 0; letter-spacing: -1px;}
.dw-ps-header p { color: #64748b; font-size: 17px; max-width: 650px; margin: 0 auto; line-height: 1.6;}

/* INPUT BAR */
.dw-ps-input-bar { display: flex; gap: 15px; max-width: 650px; margin: 0 auto 30px; background: #fff; padding: 12px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); transition: all 0.3s ease;}
.dw-ps-input-bar:focus-within { border-color: #10b981; box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15); transform: translateY(-2px);}
.dw-ps-input-bar input { flex: 1; padding: 10px 15px; border: none; outline: none; font-size: 16px; background: transparent; font-weight: 500;}
.dw-ps-input-bar button { padding: 14px 30px; background: linear-gradient(135deg, #10b981, #059669); color: white; border: none; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.3s; white-space: nowrap;}
.dw-ps-input-bar button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }
.dw-ps-input-bar button:disabled { background: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none;}

/* TABS */
.dw-ps-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; }
.dw-ps-tab { padding: 10px 25px; border-radius: 50px; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: all 0.2s; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0;}
.dw-ps-tab:hover:not(.active) { background: #e2e8f0; }
.dw-ps-tab.active { background: #0f172a; color: white; border-color: #0f172a;}
.dw-ps-tab.disabled { opacity: 0.5; pointer-events: none; }

/* RESULT AREA */
.dw-ps-result { display: none; grid-template-columns: 300px 1fr; gap: 40px; align-items: start;}

/* SCORE GAUGE */
.dw-ps-score-wrapper { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.dw-ps-score-circle { width: 220px; height: 220px; border-radius: 50%; background: conic-gradient(var(--score-color) 0% var(--score-percent), #f1f5f9 var(--score-percent) 100%); display: flex; align-items: center; justify-content: center; transition: background 1s ease-out; }
.dw-ps-score-inner { width: 175px; height: 175px; background: white; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.dw-ps-score-value { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -2px;}
.dw-ps-score-label { font-size: 14px; color: #64748b; margin-top: 5px; font-weight: 600; text-transform: uppercase;}

/* METRICS GRID */
.dw-ps-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.dw-ps-metric-card { background: white; padding: 20px; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: all 0.3s ease;}
.dw-ps-metric-card:hover { border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.04);}
.dw-ps-metric-value { font-size: 26px; font-weight: 800; margin-top: 5px;}
.dw-ps-good { color: #10b981; } .dw-ps-average { color: #f59e0b; } .dw-ps-poor { color: #ef4444; } .dw-ps-na { color: #94a3b8; }

/* CATEGORIES */
.dw-ps-categories { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 30px;}
.dw-ps-category { flex: 1; min-width: 120px; background: white; padding: 18px 15px; border-radius: 16px; text-align: center; border: 1px solid #e2e8f0; box-shadow: 0 2px 5px rgba(0,0,0,0.02);}
.dw-ps-cat-score { font-size: 28px; font-weight: 800; line-height: 1;}
.dw-ps-cat-label { font-size: 13px; color: #64748b; text-transform: capitalize; margin-top: 8px; font-weight: 500;}

/* LOADING */
.dw-ps-loading { display: none; text-align: center; padding: 60px 20px; background: #f8fafc; border-radius: 20px; border: 1px dashed #cbd5e1;}
.dw-ps-loading-bar { height: 6px; background: linear-gradient(90deg, #10b981, #3b82f6); width: 0%; animation: loadingBar 2s infinite ease-in-out; border-radius: 10px;}
@keyframes loadingBar { 0%{width:0%; margin-left:0;} 50%{width:100%; margin-left:0;} 100%{width:0%; margin-left:100%;} }

/* TOAST */
.dw-ps-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #10b981; color: white; padding: 14px 28px; border-radius: 50px; box-shadow: 0 10px 25px rgba(16,185,129,0.3); z-index: 99999; display: none; font-weight: 600; font-size: 14.5px;}

/* BULLETPROOF MEDIA QUERIES */
@media (max-width: 1024px) {
    .dw-ps-result { grid-template-columns: 1fr; gap: 30px;}
    .dw-ps-score-wrapper { margin-bottom: 20px; }
}
@media (max-width: 768px) {
    .dw-ps-header h2 { font-size: 32px; }
    .dw-ps-input-bar { flex-direction: column; background: transparent; padding: 0; border: none; box-shadow: none;}
    .dw-ps-input-bar input { background: #fff; padding: 15px; border-radius: 12px; border: 1px solid #cbd5e1;}
    .dw-ps-input-bar button { padding: 16px; width: 100%; }
}
@media (max-width: 480px) {
    .dw-ps-metrics { grid-template-columns: 1fr; gap: 15px;}
    .dw-ps-category { min-width: 45%; padding: 15px 10px;}
}