/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Custom Properties (Design System) */
:root {
    /* Light theme (default) */
    --background: hsl(155, 50%, 98%);
    --foreground: hsl(160, 15%, 15%);
    --card: hsl(155, 30%, 96%);
    --card-foreground: hsl(160, 15%, 15%);
    --primary: hsl(155, 60%, 45%);
    --primary-foreground: hsl(155, 50%, 98%);
    --secondary: hsl(155, 25%, 90%);
    --secondary-foreground: hsl(160, 15%, 15%);
    --muted: hsl(155, 25%, 90%);
    --muted-foreground: hsl(160, 10%, 45%);
    --accent: hsl(155, 40%, 85%);
    --accent-foreground: hsl(160, 15%, 15%);
    --destructive: hsl(0, 84%, 60%);
    --destructive-foreground: hsl(155, 50%, 98%);
    --border: hsl(155, 20%, 85%);
    --input: hsl(155, 20%, 85%);
    --ring: hsl(155, 60%, 45%);
    --radius: 0.5rem;
}

/* Dark theme */
[data-theme="dark"] {
    --background: hsl(160, 15%, 8%);
    --foreground: hsl(155, 50%, 95%);
    --card: hsl(160, 15%, 8%);
    --card-foreground: hsl(155, 50%, 95%);
    --primary: hsl(155, 60%, 55%);
    --primary-foreground: hsl(160, 15%, 8%);
    --secondary: hsl(160, 10%, 15%);
    --secondary-foreground: hsl(155, 50%, 95%);
    --muted: hsl(160, 10%, 15%);
    --muted-foreground: hsl(155, 20%, 65%);
    --accent: hsl(160, 10%, 15%);
    --accent-foreground: hsl(155, 50%, 95%);
    --destructive: hsl(0, 62%, 45%);
    --destructive-foreground: hsl(155, 50%, 95%);
    --border: hsl(160, 10%, 15%);
    --input: hsl(160, 10%, 15%);
    --ring: hsl(155, 60%, 55%);
}



/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    min-height: 100vh;
}

/* Layout */
.container {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1rem;
}

/* Quiz Section */
.quiz-section {
    min-height: 100vh;
    background: linear-gradient(135deg, 
        hsla(155, 60%, 45%, 0.1) 0%, 
        hsla(155, 40%, 85%, 0.2) 50%, 
        hsla(155, 25%, 90%, 0.3) 100%);
    padding: 1rem;
}

/* Header */
.header {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInScale 0.6s ease-out;
}

.emoji-container {
    margin-bottom: 1rem;
}

.thinking-emoji {
    font-size: 3.75rem;
    animation: wiggle 2s ease-in-out infinite;
    animation-delay: 3s;
}

.title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--foreground);
}

.gradient-text {
    background: linear-gradient(45deg, var(--primary), hsl(155, 70%, 60%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Quiz Card */
.quiz-card {
    background: var(--card);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    margin-bottom: 2rem;
}

.questions-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Question Styles */
.question {
    border-bottom: 1px solid var(--border);
    padding-bottom: 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.question:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.question-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.question-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.question-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--card-foreground);
    margin-bottom: 0.5rem;
}

.question-description {
    color: var(--muted-foreground);
}

.question-controls {
    max-width: 32rem;
    margin: 0 auto;
}

/* Toggle Buttons */
.toggle-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.toggle-btn {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.875rem;
    min-width: 120px;
}

.toggle-btn:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.toggle-btn.active {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

/* Special styling for different button types */
.toggle-btn[data-value="false"].active,
.toggle-btn[data-value="not_needed"].active {
    background: var(--destructive);
    color: var(--destructive-foreground);
}

.toggle-btn[data-value="maybe"].active,
.toggle-btn[data-value="optional"].active {
    background: hsl(45, 85%, 55%);
    color: hsl(45, 85%, 15%);
}



/* Slider Styles */
.slider-container {
    padding: 0 1rem;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.slider {
    width: 100%;
    height: 0.75rem;
    background: linear-gradient(to right, var(--muted), var(--border));
    outline: none;
    border-radius: 0.9375rem;
    appearance: none;
    cursor: pointer;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary), hsl(155, 70%, 60%));
    cursor: pointer;
    box-shadow: 0 4px 12px hsla(155, 60%, 45%, 0.3);
    transition: all 0.2s ease;
}

.slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px hsla(155, 60%, 45%, 0.4);
}

.slider::-moz-range-thumb {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary), hsl(155, 70%, 60%));
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 12px hsla(155, 60%, 45%, 0.3);
    transition: all 0.2s ease;
}

.slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px hsla(155, 60%, 45%, 0.4);
}

.slider-value {
    text-align: center;
    margin-top: 0.5rem;
}

.slider-value span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* Submit Section */
.submit-section {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.submit-btn {
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(to right, var(--primary), hsla(155, 60%, 45%, 0.8));
    color: var(--primary-foreground);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover:not(:disabled) {
    background: linear-gradient(to right, hsla(155, 60%, 45%, 0.9), hsla(155, 60%, 45%, 0.7));
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.submit-btn:disabled {
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Results Section */
.results-section {
    min-height: 100vh;
    background: linear-gradient(135deg, 
        hsla(155, 60%, 45%, 0.1) 0%, 
        hsla(155, 40%, 85%, 0.2) 50%, 
        hsla(155, 25%, 90%, 0.3) 100%);
    padding: 1rem;
}

.results-header {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.celebration-emoji {
    font-size: 3.75rem;
    margin-bottom: 1rem;
}

.results-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.results-subtitle {
    font-size: 1.125rem;
    color: var(--muted-foreground);
}

.recommendations-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.recommendation-card {
    background: var(--card);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--border);
    animation: fadeInLeft 0.6s ease-out;
}

.recommendation-card.best-match {
    border-color: var(--primary);
    box-shadow: 0 10px 15px -3px hsla(155, 60%, 45%, 0.2);
}

.recommendation-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.recommendation-emoji {
    font-size: 1.875rem;
}

.recommendation-details {
    flex: 1;
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.recommendation-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--card-foreground);
}

.best-match-badge {
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.score-badge {
    background: linear-gradient(45deg, var(--primary), hsl(155, 70%, 60%));
    color: var(--primary-foreground);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-left: 0.5rem;
}

.recommendation-description {
    color: var(--muted-foreground);
    margin-bottom: 1rem;
    font-size: 1.125rem;
}

.reasons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.reason-item {
    color: var(--primary);
    background: hsla(155, 60%, 45%, 0.1);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.reason-item.negative {
    color: hsl(0, 60%, 45%);
    background: hsla(0, 60%, 45%, 0.1);
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

.theme-toggle-btn {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.theme-toggle-btn .sun-icon {
    display: block;
    color: var(--foreground);
}

.theme-toggle-btn .moon-icon {
    display: none;
    color: var(--foreground);
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .moon-icon {
    display: block;
}

/* Restart Section */
.restart-section {
    text-align: center;
}

.restart-btn {
    background: linear-gradient(to right, var(--primary), hsla(155, 60%, 45%, 0.8));
    color: var(--primary-foreground);
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
}

.restart-btn:hover {
    background: linear-gradient(to right, hsla(155, 60%, 45%, 0.9), hsla(155, 60%, 45%, 0.7));
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

.restart-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Animations */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}

/* Responsive Design */
@media (min-width: 768px) {
    .reasons-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .container {
        padding: 2rem;
    }
    
    .quiz-card {
        padding: 2rem;
    }
}

@media (max-width: 640px) {
    .title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.125rem;
    }
    
    .quiz-card {
        padding: 1.5rem;
    }
    
    .toggle-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .toggle-btn {
        width: 100%;
    }
} 

/* Documentation Page Styles - THEME CONSISTENT */
.doc-bg {
  background: linear-gradient(135deg, 
    hsla(155, 60%, 45%, 0.1) 0%, 
    hsla(155, 40%, 85%, 0.2) 50%, 
    hsla(155, 25%, 90%, 0.3) 100%);
  min-height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
}
[data-theme="dark"] .doc-bg {
  background: linear-gradient(135deg, 
    hsla(155, 60%, 10%, 1) 0%, 
    hsla(155, 40%, 15%, 1) 100%);
}

.doc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doc-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 1rem;
  margin-bottom: 2.2rem;
  transition: color 0.18s;
}
.doc-back-link:hover {
  color: var(--primary);
}
.doc-back-arrow svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.1em;
}

.doc-header-icon {
  display: block;
  margin: 0 auto 1rem auto;
  font-size: 3.5rem;
  width: auto;
  height: auto;
}

.doc-title {
  font-size: 2.7rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}
.doc-title-green {
  color: var(--primary);
}

.doc-subtitle {
  color: var(--muted-foreground);
  font-size: 1.22rem;
  text-align: center;
  margin-bottom: 2.2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.doc-card,
.param-card {
  width: 80vw;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto 2.5rem auto;
}

.doc-card {
  background: var(--card);
  border-radius: 1.5rem;
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.04);
  font-size: 0.97rem;
  padding: 1.7rem 2rem 1.5rem 2rem;
  border: 2px solid var(--border);
}

.param-card {
  opacity: 1;
  transform: none;
  background: var(--card);
  border-radius: 1.2rem;
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.04);
  border: 2px solid var(--border);
  margin-top: 0.2rem;
  padding: 2rem 2.2rem 1.5rem 2.2rem;
}

.doc-card-title {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--foreground);
}
.doc-card-emoji {
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.doc-param-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 2.2rem;
  margin-top: 0.5rem;
}

.doc-param-link {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  text-decoration: none;
  font-weight: 400;
  border-radius: 0.7em;
  padding: 0.45em 0.7em;
  transition: background 0.18s, color 0.18s;
}
.doc-param-link:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent 92%) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--primary) 8%, transparent 92%) !important;
}
.doc-param-emoji {
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
}

.param-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.param-emoji {
  font-size: 2rem;
  margin-right: 0.2em;
}
.param-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--foreground);
}
.param-desc {
  color: var(--muted-foreground);
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
}
.param-section {
  margin-bottom: 1.1rem;
}
.param-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.2em;
}
.param-section-content {
  color: var(--muted-foreground);
  font-size: 0.98rem;
}
.param-scenario {
  font-style: italic;
}
.license-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
  margin-top: 0.7em;
  align-items: flex-start;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 0.7em;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5em 0.5em;
  line-height: 1.25;
}
.badge-icon {
  display: flex;
  align-items: center;
}
.badge-green {
  background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent 70%);
}
.badge-red {
  color: var(--destructive);
  background: color-mix(in srgb, var(--destructive) 10%, transparent 90%);
}
.badge-orange {
  background: color-mix(in srgb, orange 10%, transparent 90%);
  color: orange;
  border-color: color-mix(in srgb, orange 30%, transparent 70%);
}
.badge-blue {
  background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent 70%);
}
.badge-none {
    background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 30%, transparent 70%);
}
.badge-gray {
  background: #f3f3f3;
  color: #888;
  border: 2px solid #cccccc;
  box-shadow: 0 0 0 2px #cccccc33;
  font-style: italic;
}

.badge-desc {
  font-size: 0.92em;
  opacity: 0.8;
  margin-left: 0.3em;
  color: var(--muted-foreground);
}

.doc-footer-cta {
  padding: 1rem 0 2.7rem 0;
}
.doc-footer-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin-bottom: 2.2rem;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.doc-footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.doc-footer-prompt {
  color: var(--muted-foreground);
  font-size: 1.1rem;
  text-align: center;
}
.doc-footer-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.9em 2.2em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--primary) 8%, transparent 92%);
}
.doc-footer-btn:hover {
  background: color-mix(in srgb, var(--primary) 80%, var(--foreground) 20%);
  color: var(--primary-foreground);
}

@media (max-width: 900px) {
  .doc-container, .doc-card {
    max-width: 98vw;
    width: 98vw;
  }
  .doc-param-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .doc-container, .doc-card {
    max-width: 100vw;
    width: 100vw;
    padding: 1.2rem 0.5rem;
  }
  .doc-param-grid {
    grid-template-columns: 1fr;
  }
  .doc-title {
    font-size: 2rem;
  }
} 

/* Quick Navigation Styles */
.quick-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.quick-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.quick-nav a:hover {
    color: color-mix(in srgb, var(--primary) 80%, var(--foreground) 20%);
}
.quick-nav svg {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    stroke: currentColor;
}
.text-primary {
    color: var(--primary) !important;
}
.hover\:text-primary\/80:hover {
    color: color-mix(in srgb, var(--primary) 80%, var(--foreground) 20%) !important;
} 

/* Analyze Page Styles */
.analyze-card {
  background: var(--card);
  border-radius: 1.2rem;
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.04);
  border: 2px solid var(--border);
  padding: 2rem 2.2rem 1.5rem 2.2rem;
  margin: 2rem auto 2.5rem auto;
  max-width: 1100px;
  width: 100%;
}

.analyze-label {
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--foreground);
  margin-bottom: 0.2em;
}
.analyze-label .lucide-search {
  color: var(--primary);
}

.analyze-subtext {
  color: var(--muted-foreground);
  font-size: 1rem;
  margin-bottom: 1.2em;
}

.analyze-select-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5em;
}
.analyze-select {
  flex: 1;
  font-size: 1rem;
  padding: 0.7em 2.5em 0.7em 1em; /* extra right padding for arrow */
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  transition: border 0.18s, box-shadow 0.18s;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232eb87e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2em center;
  background-size: 1.2em;
}
.analyze-select:focus {
  border: 1.5px solid var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
.analyze-select option {
  color: var(--foreground);
  font-size: 1.05rem;
}

.analyze-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7em 2em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--primary) 8%, transparent 92%);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.analyze-btn:hover {
  background: color-mix(in srgb, var(--primary) 80%, var(--foreground) 20%);
  color: var(--primary-foreground);
}

.analyze-popular-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 2.5rem 0 1.5rem 0;
}

.analyze-pill {
  background: transparent;
  color: var(--foreground);
  border: 1.5px solid var(--border);
  border-radius: 0.4em;
  padding: 0.5em 1.3em;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border 0.18s;
  box-shadow: none;
}

.analyze-pill:hover,
.analyze-pill:focus {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
  outline: none;
}

.analyze-results-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: var(--foreground);
}
.analyze-results-license {
  text-align: center;
  color: var(--muted-foreground);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.analyze-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 1rem;
  margin: 2.5rem auto 0.5rem auto;
  transition: color 0.18s;
  width: fit-content;
}
.analyze-back-link:hover {
  color: var(--primary);
}

.analyze-header-emoji {
  font-size: 3rem;
  text-align: center;
  margin: 0 auto 1rem auto;
  display: block;
}
.analyze-title {
  font-size: 2.7rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--foreground);
}
.analyze-title-green {
  color: var(--primary);
}
.analyze-subtitle {
  color: var(--muted-foreground);
  font-size: 1.22rem;
  text-align: center;
  margin-bottom: 2.2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
} 

.license-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.license-param-card {
  background: var(--card);
  border-radius: 0.4rem;
  border: 1.5px solid var(--border);
  box-shadow: 0 4px 24px -4px rgba(46, 184, 126, 0.10), 0 1.5px 6px 0 rgba(0,0,0,0.06);
  padding: 1.5rem 1.5rem 1.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.license-param-status {
  border-radius: 0.5em;
  padding: 0.5em 0.7em;
  display: inline-block;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  border: 1px solid transparent;
}
.license-param-status.allowed,
.license-param-status.granted,
.license-param-status.permissive,
.license-param-status.high,
.license-param-status.yes,
.license-param-status.specified {
  background: color-mix(in srgb, var(--primary) 10%, transparent 90%);
  color: var(--primary);
}
.license-param-status.required,
.license-param-status.weak,
.license-param-status.medium,
.license-param-status.limited {
  background: #fffbe6e7;
  color: #bfa100;
}
.license-param-status.not-protected,
.license-param-status.not-granted,
.license-param-status.no,
.license-param-status.unspecified,
.license-param-status.restrictive,
.license-param-status.low {
  background: color-mix(in srgb, var(--destructive) 10%, transparent 90%);
  color: var(--destructive);
}
.license-param-status.strong,
.license-param-status.protected {
  background: #e6f7ff;
  color: #2563eb;
  border-color: #2563eb;
}
.license-param-status.maybe {
  background: color-mix(in srgb, #f7e06e 20%, transparent 80%);
  color: #b59d00;
  border: 2px solid #f7e06e;
  box-shadow: 0 0 0 2px #f7e06e33;
}
.license-param-status.not-required {
  background: color-mix(in srgb, #b3c6e0 20%, transparent 80%);
  color: #3a4a5a;
  border: 2px solid #b3c6e0;
  box-shadow: 0 0 0 2px #b3c6e033;
}
.license-param-status.badge-none,
.license-param-status.badge-not-required {
  background: rgba(20, 20, 20, 0.65);
  color: #fff;
}
[data-theme="dark"] .license-param-status.badge-none,
[data-theme="dark"] .license-param-status.badge-not-required {
  background: rgba(240, 240, 240, 0.12);
  color: #fff;
}
.license-param-question {
  color: var(--muted-foreground);
  font-size: 0.9rem;
}
.license-param-desc {
  color: var(--muted-foreground);
  font-size: 0.8rem;
}
.license-param-impact {
  background: #e5f3ed;
  color: var(--muted-foreground);
  border-radius: 0.5em;
  padding: 0.7em 1em;
  font-size: 0.8rem;
  margin-top: 0.7em;
} 
[data-theme="dark"] .license-param-impact {
  background: rgba(46, 184, 126, 0.10); /* subtle greenish transparency */
  color: var(--muted-foreground);
}
.license-params-grid.slide-down {
  animation: slideDownGrid 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  overflow: hidden;
}
@keyframes slideDownGrid {
  0% {
    opacity: 0;
    transform: translateY(-32px);
  }
  60% {
    opacity: 1;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} 
[data-theme="dark"] .analyze-pill {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(46, 184, 126, 0.07);
}
[data-theme="dark"] .analyze-pill:hover,
[data-theme="dark"] .analyze-pill:focus {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}