:root{--background:0 0% 100%;--foreground:210 25% 12%;--card:0 0% 100%;--primary:210 45% 25%;--primary-foreground:0 0% 100%;--primary-dark:210 50% 18%;--secondary:210 20% 96%;--secondary-foreground:210 25% 12%;--muted:210 15% 96%;--muted-foreground:210 15% 35%;--border:210 13% 91%;--ring:210 45% 25%;--success:142 76% 36%;--warning:38 92% 50%;--error:0 84% 60%;--radius:0.75rem}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,hsl(var(--background)) 0,hsl(var(--secondary)) 100%);color:hsl(var(--foreground));min-height:100vh}

[v-cloak] {
      display: none;
    }
.text-center{text-align:center}
h1{font-size:2.5rem;font-weight:700;margin:0 0 .75rem;background:linear-gradient(135deg,hsl(var(--primary)) 0,hsl(var(--secondary-foreground)) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h2{font-family:Poppins,sans-serif;font-size:2.25rem;line-height:2.5rem;font-weight:700;margin-bottom:1.5rem}
h3{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.subtitle{font-size:1.125rem;color:hsl(var(--muted-foreground));max-width:600px;margin:0 auto;line-height:1.6}
.tool-title{margin-bottom:3rem}
.tool-subtitle{color:hsl(var(--muted-foreground))}
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:0 4px 20px -4px hsl(210 25% 12% / .08);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:0 8px 30px -4px hsl(210 25% 12% / .12)}
.card-header{margin-bottom:1rem}
.card-title{font-family:Poppins,sans-serif;font-size:1.125rem;font-weight:600;color:hsl(var(--foreground))}
.card-description{font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.25rem}
.section+.section{margin-top:2rem}
.card.main{margin-bottom:2rem;padding:0}
.card-header.main{padding:1.5rem;margin:0}
.card-title.main{font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.025em;font-family:Poppins,sans-serif}
.card.recommendations{margin-top:2rem;padding:1.5rem}
.badge{display:inline-block;padding:.25rem .75rem;font-size:.75rem;font-weight:600;border-radius:9999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.badge-outline{background:0 0;border:1px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}
.tool-card{cursor:pointer;transition:all .2s ease}
.tool-card:hover{transform:translateY(-2px)}
.tool-card.active{ring:2px solid hsl(var(--primary));box-shadow:0 0 0 2px hsl(var(--primary))}
.tool-icon{width:48px;height:48px;background:hsl(var(--primary) / .1);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:hsl(var(--primary))}
.tool-icon svg{width:24px;height:24px}
.progress{width:100%;height:1rem;background:hsl(var(--muted));border-radius:1rem;overflow:hidden}
.progress-bar{height:100%;background:hsl(var(--primary));transition:width .3s ease}
.progress-green .progress-bar{background:hsl(var(--success))}
.progress-yellow .progress-bar{background:hsl(var(--warning))}
.progress-orange .progress-bar{background:hsl(38 92% 60%)}
.progress-red .progress-bar{background:hsl(var(--error))}
.score-display{text-align:center;padding:2rem;padding-top:0}
.score-value{color:red;font-size:4rem;font-weight:700;line-height:1;margin-bottom:1rem}
.score-label{color:#dc2626;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.score-description{color:hsl(var(--muted-foreground));font-size:1rem}
.category-card{margin-bottom:1.5rem}
.category-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem}
.category-info{flex:1}
.category-score{text-align:right;min-width:100px}
.category-score-value{font-size:1.5rem;font-weight:700;color:hsl(var(--primary))}
.category-progress{width:96px;margin-top:.5rem}
#appPAIR .slider-wrapper{padding:0;margin:0;height:29px;margin-top:10px}
.irs{position:relative;display:block;height:55px}
.irs-line{position:relative;display:block;overflow:hidden;height:8px;top:33px;background:hsl(var(--muted));border-radius:4px}
.irs-bar{position:absolute;display:block;left:0;height:8px;background:hsl(var(--primary));border-radius:4px 0 0 4px}
.irs-handle{position:absolute;display:block;box-sizing:border-box;cursor:pointer;z-index:1;top:26px;width:24px;height:24px;background:hsl(var(--background));border:3px solid hsl(var(--primary));border-radius:50%;box-shadow:0 2px 8px hsl(0 0% 0% / .15);transition:transform .2s ease,box-shadow .2s ease}
.irs-handle:hover{transform:scale(1.15);box-shadow:0 4px 12px hsl(var(--primary) / .4)}
.irs-single{position:absolute;display:block;top:0;left:0;cursor:default;white-space:nowrap;font-size:.875rem;font-weight:600;color:hsl(var(--foreground));background:0 0;padding:1px 5px}
.irs-max,.irs-min{display:none}
.irs-from,.irs-grid,.irs-to{display:none}
#appPAIR .slider-meta{display:none;justify-content:space-between;font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.25rem;padding:0 .5rem}
.slider-label{font-size:.875rem;display:block;font-weight:500;font-family:Inter,system-ui,sans-serif;line-height:var(--leading-relaxed);color:hsl(var(--muted-foreground))}
.slider-section-questions{padding:1.5rem;padding-top:0}
span.irs .irs-from,span.irs .irs-max,span.irs .irs-min,span.irs .irs-single,span.irs .irs-to{position:absolute;display:none!important}
.irs--flat .irs-line{top:8px}
.irs--flat .irs-bar{top:8px;background-color:#23405c}
.irs--flat .irs-handle{top:3.5px;width:22px;height:22px;background-color:#fff}
.irs--flat .irs-handle i{background:#fff!important}
.questions-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.5rem;margin-top:1rem}
.question-item{display:flex;align-items:flex-start;font-size:.875rem;color:hsl(var(--muted-foreground))}
.question-icon{fill: none !important; width:16px;height:16px;color:hsl(var(--primary));margin-right:.5rem;flex-shrink:0;margin-top:2px}
.recommendation{display:flex;align-items:flex-start;padding:1rem;border-radius:var(--radius);margin-bottom:1rem}
.recommendation-icon{width:20px;height:20px;margin-right:.75rem;flex-shrink:0;margin-top:2px;fill: none !important;}
.recommendation h4{margin: 0;}
.recommendation p{margin-bottom: 0;}
.recommendation-orange{background:hsl(25 95% 95%);border:1px solid hsl(25 95% 85%)}
.recommendation-orange .recommendation-icon{color:hsl(25 95% 50%)}
.recommendation-orange h4{color:hsl(25 95% 35%)}
.recommendation-orange p{color:hsl(25 95% 40%)}
.recommendation-yellow{background:hsl(45 93% 95%);border:1px solid hsl(45 93% 80%)}
.recommendation-yellow .recommendation-icon{color:hsl(45 93% 45%)}
.recommendation-yellow h4{color:hsl(45 93% 30%)}
.recommendation-yellow p{color:hsl(45 93% 35%)}
.recommendation-green{background:hsl(142 76% 95%);border:1px solid hsl(142 76% 80%)}
.recommendation-green .recommendation-icon{color:hsl(142 76% 36%)}
.recommendation-green h4{color:hsl(142 76% 25%)}
.recommendation-green p{color:hsl(142 76% 30%)}

@media (max-width:768px){
    h1{font-size:2rem}
    .tools-grid{grid-template-columns:1fr}
    .category-header{flex-direction:column;gap:1rem}
    .category-score{text-align:left}
    .category-progress{width:100%}
    .questions-grid{grid-template-columns:1fr}
    .cta-buttons{flex-direction:column}
}