/**
 * Casino Hydra - Security Index Block Styles
 * 10 стилів з підтримкою позитивних/негативних факторів
 * Кольорова шкала за оцінкою 0-100
 */

/* Color Scale Variables */
:root {
    /* Excellent 85-100 - Green */
    --si-exc: #10b981;
    --si-exc-bg: rgba(16, 185, 129, 0.04);
    --si-exc-bg-grad: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, rgba(52, 211, 153, 0.06) 50%, rgba(16, 185, 129, 0.03) 100%);
    --si-exc-light: #34d399;
    --si-exc-text: #065f46;
    --si-exc-muted: #047857;
    --si-exc-border: rgba(16, 185, 129, 0.15);
    /* Good 70-84 - Light Green */
    --si-good: #22c55e;
    --si-good-bg: rgba(34, 197, 94, 0.04);
    --si-good-bg-grad: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, rgba(74, 222, 128, 0.06) 50%, rgba(34, 197, 94, 0.03) 100%);
    --si-good-light: #4ade80;
    --si-good-text: #166534;
    --si-good-muted: #15803d;
    --si-good-border: rgba(34, 197, 94, 0.15);
    /* Medium 50-69 - Yellow/Amber */
    --si-med: #eab308;
    --si-med-bg: rgba(234, 179, 8, 0.04);
    --si-med-bg-grad: linear-gradient(135deg, rgba(234, 179, 8, 0.03) 0%, rgba(250, 204, 21, 0.06) 50%, rgba(234, 179, 8, 0.03) 100%);
    --si-med-light: #facc15;
    --si-med-text: #854d0e;
    --si-med-muted: #a16207;
    --si-med-border: rgba(234, 179, 8, 0.15);
    /* Low 30-49 - Orange */
    --si-low: #f97316;
    --si-low-bg: rgba(249, 115, 22, 0.04);
    --si-low-bg-grad: linear-gradient(135deg, rgba(249, 115, 22, 0.03) 0%, rgba(251, 146, 60, 0.06) 50%, rgba(249, 115, 22, 0.03) 100%);
    --si-low-light: #fb923c;
    --si-low-text: #9a3412;
    --si-low-muted: #c2410c;
    --si-low-border: rgba(249, 115, 22, 0.15);
    /* Danger 0-29 - Red */
    --si-dng: #ef4444;
    --si-dng-bg: rgba(239, 68, 68, 0.04);
    --si-dng-bg-grad: linear-gradient(135deg, rgba(239, 68, 68, 0.03) 0%, rgba(248, 113, 113, 0.06) 50%, rgba(239, 68, 68, 0.03) 100%);
    --si-dng-light: #f87171;
    --si-dng-text: #991b1b;
    --si-dng-muted: #b91c1c;
    --si-dng-border: rgba(239, 68, 68, 0.15);
    /* Positive/Negative */
    --si-pos: #10b981;
    --si-pos-bg: rgba(16, 185, 129, 0.06);
    --si-neg: #ef4444;
    --si-neg-bg: rgba(239, 68, 68, 0.06);
    /* Base */
    --si-text: #1e293b;
    --si-muted: #64748b;
    --si-border: #e2e8f0;
    --si-bg: #ffffff;
}

/* Subtle shimmer animation */
@keyframes si-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes si-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes si-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Common icon styles */
.si-icon svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   STYLE 1: Shield Card (основний)
   ============================================ */
.si-style-1 {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors based on score */
.si-style-1.si-bg-exc { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(255,255,255,0.98) 50%, rgba(52, 211, 153, 0.03) 100%);
    border-color: var(--si-exc-border);
}
.si-style-1.si-bg-good { 
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.02) 0%, rgba(255,255,255,0.98) 50%, rgba(74, 222, 128, 0.03) 100%);
    border-color: var(--si-good-border);
}
.si-style-1.si-bg-med { 
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.02) 0%, rgba(255,255,255,0.98) 50%, rgba(250, 204, 21, 0.03) 100%);
    border-color: var(--si-med-border);
}
.si-style-1.si-bg-low { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.02) 0%, rgba(255,255,255,0.98) 50%, rgba(251, 146, 60, 0.03) 100%);
    border-color: var(--si-low-border);
}
.si-style-1.si-bg-dng { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, rgba(255,255,255,0.98) 50%, rgba(248, 113, 113, 0.03) 100%);
    border-color: var(--si-dng-border);
}
/* Shimmer effect overlay */
.si-style-1.si-bg-exc::before,
.si-style-1.si-bg-good::before,
.si-style-1.si-bg-med::before,
.si-style-1.si-bg-low::before,
.si-style-1.si-bg-dng::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: si-shimmer 8s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.5;
}
.si-style-1 .si-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.si-style-1 .si-shield {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-1 .si-shield svg {
    width: 40px;
    height: 40px;
    color: #fff;
}
.si-style-1 .si-shield.si-exc { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.si-style-1 .si-shield.si-good { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.si-style-1 .si-shield.si-med { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); }
.si-style-1 .si-shield.si-low { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
.si-style-1 .si-shield.si-dng { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.si-style-1 .si-info { flex: 1; }
.si-style-1 .si-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--si-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.si-style-1 .si-score {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
}
.si-style-1 .si-score.si-exc { color: var(--si-exc); }
.si-style-1 .si-score.si-good { color: var(--si-good); }
.si-style-1 .si-score.si-med { color: var(--si-med); }
.si-style-1 .si-score.si-low { color: var(--si-low); }
.si-style-1 .si-score.si-dng { color: var(--si-dng); }
.si-style-1 .si-score span {
    font-size: 18px;
    font-weight: 600;
    color: var(--si-muted);
}
.si-style-1 .si-label {
    font-size: 16px;
    font-weight: 600;
    margin-top: 2px;
}
.si-style-1 .si-label.si-exc { color: var(--si-exc); }
.si-style-1 .si-label.si-good { color: var(--si-good); }
.si-style-1 .si-label.si-med { color: var(--si-med); }
.si-style-1 .si-label.si-low { color: var(--si-low); }
.si-style-1 .si-label.si-dng { color: var(--si-dng); }
.si-style-1 .si-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
}
.si-style-1 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-1 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-1 .si-trend svg { width: 18px; height: 18px; }
.si-style-1 .si-bar-wrap { margin-bottom: 20px; }
.si-style-1 .si-bar {
    height: 10px;
    background: var(--si-border);
    border-radius: 10px;
    overflow: hidden;
}
.si-style-1 .si-bar-fill {
    height: 100%;
    border-radius: 10px;
}
.si-style-1 .si-bar-fill.si-exc { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.si-style-1 .si-bar-fill.si-good { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
.si-style-1 .si-bar-fill.si-med { background: linear-gradient(90deg, #eab308 0%, #facc15 100%); }
.si-style-1 .si-bar-fill.si-low { background: linear-gradient(90deg, #f97316 0%, #fb923c 100%); }
.si-style-1 .si-bar-fill.si-dng { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }
.si-style-1 .si-factors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.si-style-1 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--si-bg);
    border-radius: 12px;
    border: 1px solid var(--si-border);
}
.si-style-1 .si-factor.pos { border-left: 3px solid var(--si-pos); }
.si-style-1 .si-factor.neg { border-left: 3px solid var(--si-neg); background: var(--si-neg-bg); }
.si-style-1 .si-factor-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.si-style-1 .si-factor-icon svg { width: 18px; height: 18px; color: #fff; }
.si-style-1 .si-factor-icon.pos { background: var(--si-pos); }
.si-style-1 .si-factor-icon.neg { background: var(--si-neg); }
.si-style-1 .si-factor-text {
    font-size: 14px;
    color: var(--si-text);
    line-height: 1.45;
}

/* ============================================
   STYLE 2: Progress Cards
   ============================================ */
.si-style-2 {
    background: var(--si-bg);
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors */
.si-style-2.si-bg-exc { background: linear-gradient(180deg, rgba(16, 185, 129, 0.02) 0%, rgba(255,255,255,1) 100%); border-color: var(--si-exc-border); }
.si-style-2.si-bg-good { background: linear-gradient(180deg, rgba(34, 197, 94, 0.02) 0%, rgba(255,255,255,1) 100%); border-color: var(--si-good-border); }
.si-style-2.si-bg-med { background: linear-gradient(180deg, rgba(234, 179, 8, 0.02) 0%, rgba(255,255,255,1) 100%); border-color: var(--si-med-border); }
.si-style-2.si-bg-low { background: linear-gradient(180deg, rgba(249, 115, 22, 0.02) 0%, rgba(255,255,255,1) 100%); border-color: var(--si-low-border); }
.si-style-2.si-bg-dng { background: linear-gradient(180deg, rgba(239, 68, 68, 0.02) 0%, rgba(255,255,255,1) 100%); border-color: var(--si-dng-border); }
.si-style-2.si-bg-exc .si-header { border-color: var(--si-exc-border); }
.si-style-2.si-bg-good .si-header { border-color: var(--si-good-border); }
.si-style-2.si-bg-med .si-header { border-color: var(--si-med-border); }
.si-style-2.si-bg-low .si-header { border-color: var(--si-low-border); }
.si-style-2.si-bg-dng .si-header { border-color: var(--si-dng-border); }
.si-style-2 .si-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--si-border);
}
.si-style-2 .si-left { display: flex; align-items: center; gap: 16px; }
.si-style-2 .si-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-2 .si-icon svg { width: 30px; height: 30px; color: #fff; }
.si-style-2 .si-icon.si-exc { background: var(--si-exc); }
.si-style-2 .si-icon.si-good { background: var(--si-good); }
.si-style-2 .si-icon.si-med { background: var(--si-med); }
.si-style-2 .si-icon.si-low { background: var(--si-low); }
.si-style-2 .si-icon.si-dng { background: var(--si-dng); }
.si-style-2 .si-title { font-size: 20px; font-weight: 700; color: var(--si-text); }
.si-style-2 .si-subtitle { font-size: 14px; color: var(--si-muted); margin-top: 2px; }
.si-style-2 .si-right { text-align: right; }
.si-style-2 .si-score { font-size: 42px; font-weight: 800; }
.si-style-2 .si-score.si-exc { color: var(--si-exc); }
.si-style-2 .si-score.si-good { color: var(--si-good); }
.si-style-2 .si-score.si-med { color: var(--si-med); }
.si-style-2 .si-score.si-low { color: var(--si-low); }
.si-style-2 .si-score.si-dng { color: var(--si-dng); }
.si-style-2 .si-score span { font-size: 18px; color: var(--si-muted); }
.si-style-2 .si-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
}
.si-style-2 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-2 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-2 .si-trend svg { width: 14px; height: 14px; }
.si-style-2 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.si-style-2 .si-col-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.si-style-2 .si-col-title.pos { color: var(--si-pos); }
.si-style-2 .si-col-title.neg { color: var(--si-neg); }
.si-style-2 .si-col-title svg { width: 16px; height: 16px; }
.si-style-2 .si-factors { display: flex; flex-direction: column; gap: 10px; }
.si-style-2 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
}
.si-style-2 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-2 .si-factor-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.si-style-2 .si-factor-icon svg { width: 18px; height: 18px; color: #fff; }
.si-style-2 .si-factor-icon.pos { background: var(--si-pos); }
.si-style-2 .si-factor-icon.neg { background: var(--si-neg); }
.si-style-2 .si-factor-content { flex: 1; }
.si-style-2 .si-factor-title { font-size: 14px; font-weight: 600; color: var(--si-text); margin-bottom: 2px; }
.si-style-2 .si-factor-desc { font-size: 13px; color: var(--si-muted); line-height: 1.4; }

/* ============================================
   STYLE 3: Horizontal Bar
   ============================================ */
.si-style-3 {
    background: var(--si-bg);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors */
.si-style-3.si-bg-exc { background: linear-gradient(135deg, rgba(16, 185, 129, 0.015) 0%, rgba(255,255,255,0.99) 100%); border-color: var(--si-exc-border); }
.si-style-3.si-bg-good { background: linear-gradient(135deg, rgba(34, 197, 94, 0.015) 0%, rgba(255,255,255,0.99) 100%); border-color: var(--si-good-border); }
.si-style-3.si-bg-med { background: linear-gradient(135deg, rgba(234, 179, 8, 0.015) 0%, rgba(255,255,255,0.99) 100%); border-color: var(--si-med-border); }
.si-style-3.si-bg-low { background: linear-gradient(135deg, rgba(249, 115, 22, 0.015) 0%, rgba(255,255,255,0.99) 100%); border-color: var(--si-low-border); }
.si-style-3.si-bg-dng { background: linear-gradient(135deg, rgba(239, 68, 68, 0.015) 0%, rgba(255,255,255,0.99) 100%); border-color: var(--si-dng-border); }
.si-style-3 .si-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.si-style-3 .si-left { display: flex; align-items: center; gap: 12px; }
.si-style-3 .si-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-3 .si-icon svg { width: 26px; height: 26px; color: #fff; }
.si-style-3 .si-icon.si-exc { background: var(--si-exc); }
.si-style-3 .si-icon.si-good { background: var(--si-good); }
.si-style-3 .si-icon.si-med { background: var(--si-med); }
.si-style-3 .si-icon.si-low { background: var(--si-low); }
.si-style-3 .si-icon.si-dng { background: var(--si-dng); }
.si-style-3 .si-title { font-size: 18px; font-weight: 700; color: var(--si-text); }
.si-style-3 .si-subtitle { font-size: 13px; color: var(--si-muted); }
.si-style-3 .si-right { display: flex; align-items: center; gap: 12px; }
.si-style-3 .si-score { font-size: 32px; font-weight: 800; }
.si-style-3 .si-score.si-exc { color: var(--si-exc); }
.si-style-3 .si-score.si-good { color: var(--si-good); }
.si-style-3 .si-score.si-med { color: var(--si-med); }
.si-style-3 .si-score.si-low { color: var(--si-low); }
.si-style-3 .si-score.si-dng { color: var(--si-dng); }
.si-style-3 .si-score span { font-size: 16px; color: var(--si-muted); }
.si-style-3 .si-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
}
.si-style-3 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-3 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-3 .si-trend svg { width: 16px; height: 16px; }
.si-style-3 .si-bar-container { margin-bottom: 20px; }
.si-style-3 .si-bar {
    height: 14px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.si-style-3 .si-bar-fill { height: 100%; border-radius: 10px; }
.si-style-3 .si-bar-fill.si-exc { background: linear-gradient(90deg, #059669, #10b981, #34d399); }
.si-style-3 .si-bar-fill.si-good { background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80); }
.si-style-3 .si-bar-fill.si-med { background: linear-gradient(90deg, #ca8a04, #eab308, #facc15); }
.si-style-3 .si-bar-fill.si-low { background: linear-gradient(90deg, #ea580c, #f97316, #fb923c); }
.si-style-3 .si-bar-fill.si-dng { background: linear-gradient(90deg, #dc2626, #ef4444, #f87171); }
.si-style-3 .si-bar-marks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--si-muted);
}
.si-style-3 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.si-style-3 .si-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid;
}
.si-style-3 .si-col-title.pos { color: var(--si-pos); border-color: var(--si-pos); }
.si-style-3 .si-col-title.neg { color: var(--si-neg); border-color: var(--si-neg); }
.si-style-3 .si-factors { display: flex; flex-direction: column; gap: 8px; }
.si-style-3 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}
.si-style-3 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-3 .si-factor svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.si-style-3 .si-factor.pos svg { color: var(--si-pos); }
.si-style-3 .si-factor.neg svg { color: var(--si-neg); }
.si-style-3 .si-factor-text { font-size: 13px; color: var(--si-text); line-height: 1.4; }

/* ============================================
   STYLE 4: Stats Row (Tags)
   ============================================ */
.si-style-4 {
    background: var(--si-bg);
    border-radius: 16px;
    border: 1px solid var(--si-border);
    overflow: hidden;
    position: relative;
}
/* Subtle background colors */
.si-style-4.si-bg-exc { background: rgba(16, 185, 129, 0.015); border-color: var(--si-exc-border); }
.si-style-4.si-bg-good { background: rgba(34, 197, 94, 0.015); border-color: var(--si-good-border); }
.si-style-4.si-bg-med { background: rgba(234, 179, 8, 0.015); border-color: var(--si-med-border); }
.si-style-4.si-bg-low { background: rgba(249, 115, 22, 0.015); border-color: var(--si-low-border); }
.si-style-4.si-bg-dng { background: rgba(239, 68, 68, 0.015); border-color: var(--si-dng-border); }
.si-style-4.si-bg-exc .si-header { border-color: var(--si-exc-border); }
.si-style-4.si-bg-good .si-header { border-color: var(--si-good-border); }
.si-style-4.si-bg-med .si-header { border-color: var(--si-med-border); }
.si-style-4.si-bg-low .si-header { border-color: var(--si-low-border); }
.si-style-4.si-bg-dng .si-header { border-color: var(--si-dng-border); }
.si-style-4.si-bg-exc .si-bar-wrap,
.si-style-4.si-bg-good .si-bar-wrap,
.si-style-4.si-bg-med .si-bar-wrap,
.si-style-4.si-bg-low .si-bar-wrap,
.si-style-4.si-bg-dng .si-bar-wrap { background: rgba(248,250,252,0.8); }
.si-style-4 .si-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--si-border);
}
.si-style-4 .si-left { display: flex; align-items: center; gap: 14px; }
.si-style-4 .si-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-4 .si-icon svg { width: 28px; height: 28px; color: #fff; }
.si-style-4 .si-icon.si-exc { background: var(--si-exc); }
.si-style-4 .si-icon.si-good { background: var(--si-good); }
.si-style-4 .si-icon.si-med { background: var(--si-med); }
.si-style-4 .si-icon.si-low { background: var(--si-low); }
.si-style-4 .si-icon.si-dng { background: var(--si-dng); }
.si-style-4 .si-title { font-size: 18px; font-weight: 700; color: var(--si-text); }
.si-style-4 .si-label { font-size: 14px; font-weight: 600; }
.si-style-4 .si-label.si-exc { color: var(--si-exc); }
.si-style-4 .si-label.si-good { color: var(--si-good); }
.si-style-4 .si-label.si-med { color: var(--si-med); }
.si-style-4 .si-label.si-low { color: var(--si-low); }
.si-style-4 .si-label.si-dng { color: var(--si-dng); }
.si-style-4 .si-right { display: flex; align-items: center; gap: 16px; }
.si-style-4 .si-score { font-size: 36px; font-weight: 800; }
.si-style-4 .si-score.si-exc { color: var(--si-exc); }
.si-style-4 .si-score.si-good { color: var(--si-good); }
.si-style-4 .si-score.si-med { color: var(--si-med); }
.si-style-4 .si-score.si-low { color: var(--si-low); }
.si-style-4 .si-score.si-dng { color: var(--si-dng); }
.si-style-4 .si-score span { font-size: 16px; color: var(--si-muted); }
.si-style-4 .si-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
}
.si-style-4 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-4 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-4 .si-trend svg { width: 16px; height: 16px; }
.si-style-4 .si-bar-wrap { padding: 16px 24px; background: #f8fafc; }
.si-style-4 .si-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}
.si-style-4 .si-bar-fill { height: 100%; border-radius: 8px; }
.si-style-4 .si-bar-fill.si-exc { background: var(--si-exc); }
.si-style-4 .si-bar-fill.si-good { background: var(--si-good); }
.si-style-4 .si-bar-fill.si-med { background: var(--si-med); }
.si-style-4 .si-bar-fill.si-low { background: var(--si-low); }
.si-style-4 .si-bar-fill.si-dng { background: var(--si-dng); }
.si-style-4 .si-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 24px; }
.si-style-4 .si-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}
.si-style-4 .si-tag.pos { background: var(--si-pos-bg); color: #059669; }
.si-style-4 .si-tag.neg { background: var(--si-neg-bg); color: #dc2626; }
.si-style-4 .si-tag svg { width: 14px; height: 14px; }

/* ============================================
   STYLE 5: Meter
   ============================================ */
.si-style-5 {
    background: var(--si-bg);
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors with gentle gradient */
.si-style-5.si-bg-exc { 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(16, 185, 129, 0.03) 100%); 
    border-color: var(--si-exc-border); 
}
.si-style-5.si-bg-good { 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(34, 197, 94, 0.03) 100%); 
    border-color: var(--si-good-border); 
}
.si-style-5.si-bg-med { 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(234, 179, 8, 0.03) 100%); 
    border-color: var(--si-med-border); 
}
.si-style-5.si-bg-low { 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249, 115, 22, 0.03) 100%); 
    border-color: var(--si-low-border); 
}
.si-style-5.si-bg-dng { 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(239, 68, 68, 0.03) 100%); 
    border-color: var(--si-dng-border); 
}
.si-style-5 .si-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.si-style-5 .si-left { display: flex; align-items: center; gap: 12px; }
.si-style-5 .si-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-5 .si-icon svg { width: 24px; height: 24px; color: #fff; }
.si-style-5 .si-icon.si-exc { background: var(--si-exc); }
.si-style-5 .si-icon.si-good { background: var(--si-good); }
.si-style-5 .si-icon.si-med { background: var(--si-med); }
.si-style-5 .si-icon.si-low { background: var(--si-low); }
.si-style-5 .si-icon.si-dng { background: var(--si-dng); }
.si-style-5 .si-title { font-size: 18px; font-weight: 700; color: var(--si-text); }
.si-style-5 .si-right { display: flex; align-items: center; gap: 12px; }
.si-style-5 .si-score { font-size: 36px; font-weight: 800; }
.si-style-5 .si-score.si-exc { color: var(--si-exc); }
.si-style-5 .si-score.si-good { color: var(--si-good); }
.si-style-5 .si-score.si-med { color: var(--si-med); }
.si-style-5 .si-score.si-low { color: var(--si-low); }
.si-style-5 .si-score.si-dng { color: var(--si-dng); }
.si-style-5 .si-score span { font-size: 18px; color: var(--si-muted); }
.si-style-5 .si-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
}
.si-style-5 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-5 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-5 .si-trend svg { width: 16px; height: 16px; }
.si-style-5 .si-meter {
    position: relative;
    height: 24px;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: linear-gradient(90deg, 
        var(--si-dng) 0%, 
        var(--si-low) 25%, 
        var(--si-med) 50%, 
        var(--si-good) 75%, 
        var(--si-exc) 100%
    );
}
.si-style-5 .si-meter-pointer {
    position: absolute;
    top: -6px;
    width: 4px;
    height: 36px;
    background: var(--si-text);
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.si-style-5 .si-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--si-muted);
    margin-bottom: 24px;
}
.si-style-5 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.si-style-5 .si-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.si-style-5 .si-col-header svg { width: 20px; height: 20px; }
.si-style-5 .si-col-header.pos svg { color: var(--si-pos); }
.si-style-5 .si-col-header.neg svg { color: var(--si-neg); }
.si-style-5 .si-col-header span { font-size: 14px; font-weight: 600; }
.si-style-5 .si-col-header.pos span { color: var(--si-pos); }
.si-style-5 .si-col-header.neg span { color: var(--si-neg); }
.si-style-5 .si-factors { display: flex; flex-direction: column; gap: 8px; }
.si-style-5 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}
.si-style-5 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-5 .si-factor svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.si-style-5 .si-factor.pos svg { color: var(--si-pos); }
.si-style-5 .si-factor.neg svg { color: var(--si-neg); }
.si-style-5 .si-factor-text { font-size: 13px; color: var(--si-text); line-height: 1.4; }

/* ============================================
   STYLE 6: Dark Card
   ============================================ */
.si-style-6 {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 20px;
    padding: 28px;
    color: #fff;
}
.si-style-6 .si-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.si-style-6 .si-shield {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.2);
    border: 2px solid var(--si-exc);
}
.si-style-6 .si-shield.si-good { background: rgba(34, 197, 94, 0.2); border-color: var(--si-good); }
.si-style-6 .si-shield.si-med { background: rgba(234, 179, 8, 0.2); border-color: var(--si-med); }
.si-style-6 .si-shield.si-low { background: rgba(249, 115, 22, 0.2); border-color: var(--si-low); }
.si-style-6 .si-shield.si-dng { background: rgba(239, 68, 68, 0.2); border-color: var(--si-dng); }
.si-style-6 .si-shield svg { width: 32px; height: 32px; color: var(--si-exc); }
.si-style-6 .si-shield.si-good svg { color: var(--si-good); }
.si-style-6 .si-shield.si-med svg { color: var(--si-med); }
.si-style-6 .si-shield.si-low svg { color: var(--si-low); }
.si-style-6 .si-shield.si-dng svg { color: var(--si-dng); }
.si-style-6 .si-info { flex: 1; }
.si-style-6 .si-title {
    font-size: 14px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.si-style-6 .si-score { font-size: 40px; font-weight: 800; color: #fff; }
.si-style-6 .si-score span { color: #64748b; font-size: 20px; }
.si-style-6 .si-label { font-size: 16px; font-weight: 600; color: #34d399; }
.si-style-6 .si-label.si-good { color: #4ade80; }
.si-style-6 .si-label.si-med { color: #facc15; }
.si-style-6 .si-label.si-low { color: #fb923c; }
.si-style-6 .si-label.si-dng { color: #f87171; }
.si-style-6 .si-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}
.si-style-6 .si-trend.down { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.si-style-6 .si-trend svg { width: 18px; height: 18px; }
.si-style-6 .si-bar-wrap { margin-bottom: 24px; }
.si-style-6 .si-bar {
    height: 8px;
    background: #334155;
    border-radius: 8px;
    overflow: hidden;
}
.si-style-6 .si-bar-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #10b981, #34d399);
}
.si-style-6 .si-bar-fill.si-good { background: linear-gradient(90deg, #22c55e, #4ade80); }
.si-style-6 .si-bar-fill.si-med { background: linear-gradient(90deg, #eab308, #facc15); }
.si-style-6 .si-bar-fill.si-low { background: linear-gradient(90deg, #f97316, #fb923c); }
.si-style-6 .si-bar-fill.si-dng { background: linear-gradient(90deg, #ef4444, #f87171); }
.si-style-6 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.si-style-6 .si-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.si-style-6 .si-col-title.pos { color: #34d399; }
.si-style-6 .si-col-title.neg { color: #f87171; }
.si-style-6 .si-factors { display: flex; flex-direction: column; gap: 8px; }
.si-style-6 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.si-style-6 .si-factor.neg { background: rgba(239, 68, 68, 0.1); }
.si-style-6 .si-factor svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.si-style-6 .si-factor.pos svg { color: #34d399; }
.si-style-6 .si-factor.neg svg { color: #f87171; }
.si-style-6 .si-factor-text { font-size: 13px; color: #cbd5e1; line-height: 1.4; }

/* ============================================
   STYLE 7: Two Column
   ============================================ */
.si-style-7 {
    display: grid;
    grid-template-columns: 260px 1fr;
    background: var(--si-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--si-border);
}
/* Subtle background colors */
.si-style-7.si-bg-exc { border-color: var(--si-exc-border); }
.si-style-7.si-bg-good { border-color: var(--si-good-border); }
.si-style-7.si-bg-med { border-color: var(--si-med-border); }
.si-style-7.si-bg-low { border-color: var(--si-low-border); }
.si-style-7.si-bg-dng { border-color: var(--si-dng-border); }
.si-style-7.si-bg-exc .si-right { background: rgba(16, 185, 129, 0.015); }
.si-style-7.si-bg-good .si-right { background: rgba(34, 197, 94, 0.015); }
.si-style-7.si-bg-med .si-right { background: rgba(234, 179, 8, 0.015); }
.si-style-7.si-bg-low .si-right { background: rgba(249, 115, 22, 0.015); }
.si-style-7.si-bg-dng .si-right { background: rgba(239, 68, 68, 0.015); }
.si-style-7 .si-left {
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--si-border);
}
.si-style-7 .si-left.si-exc { background: linear-gradient(180deg, var(--si-exc-bg) 0%, var(--si-bg) 100%); }
.si-style-7 .si-left.si-good { background: linear-gradient(180deg, var(--si-good-bg) 0%, var(--si-bg) 100%); }
.si-style-7 .si-left.si-med { background: linear-gradient(180deg, var(--si-med-bg) 0%, var(--si-bg) 100%); }
.si-style-7 .si-left.si-low { background: linear-gradient(180deg, var(--si-low-bg) 0%, var(--si-bg) 100%); }
.si-style-7 .si-left.si-dng { background: linear-gradient(180deg, var(--si-dng-bg) 0%, var(--si-bg) 100%); }
.si-style-7 .si-shield {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.si-style-7 .si-shield.si-exc { background: var(--si-exc); }
.si-style-7 .si-shield.si-good { background: var(--si-good); }
.si-style-7 .si-shield.si-med { background: var(--si-med); }
.si-style-7 .si-shield.si-low { background: var(--si-low); }
.si-style-7 .si-shield.si-dng { background: var(--si-dng); }
.si-style-7 .si-shield svg { width: 40px; height: 40px; color: #fff; }
.si-style-7 .si-score { font-size: 48px; font-weight: 800; }
.si-style-7 .si-score.si-exc { color: var(--si-exc); }
.si-style-7 .si-score.si-good { color: var(--si-good); }
.si-style-7 .si-score.si-med { color: var(--si-med); }
.si-style-7 .si-score.si-low { color: var(--si-low); }
.si-style-7 .si-score.si-dng { color: var(--si-dng); }
.si-style-7 .si-score span { font-size: 20px; color: var(--si-muted); }
.si-style-7 .si-label { font-size: 16px; font-weight: 600; margin-top: 4px; }
.si-style-7 .si-label.si-exc { color: var(--si-exc); }
.si-style-7 .si-label.si-good { color: var(--si-good); }
.si-style-7 .si-label.si-med { color: var(--si-med); }
.si-style-7 .si-label.si-low { color: var(--si-low); }
.si-style-7 .si-label.si-dng { color: var(--si-dng); }
.si-style-7 .si-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
}
.si-style-7 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-7 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-7 .si-trend svg { width: 16px; height: 16px; }
.si-style-7 .si-right { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.si-style-7 .si-col-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.si-style-7 .si-col-title svg { width: 18px; height: 18px; }
.si-style-7 .si-col-title.pos { color: var(--si-pos); }
.si-style-7 .si-col-title.neg { color: var(--si-neg); }
.si-style-7 .si-factors { display: flex; flex-direction: column; gap: 8px; }
.si-style-7 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}
.si-style-7 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-7 .si-factor svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.si-style-7 .si-factor.pos svg { color: var(--si-pos); }
.si-style-7 .si-factor.neg svg { color: var(--si-neg); }
.si-style-7 .si-factor-text { font-size: 13px; color: var(--si-text); line-height: 1.4; }

/* ============================================
   STYLE 8: Detailed List
   ============================================ */
.si-style-8 {
    background: var(--si-bg);
    border-radius: 20px;
    padding: 28px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors */
.si-style-8.si-bg-exc { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.02) 0%, rgba(255,255,255,0.99) 50%, rgba(16, 185, 129, 0.01) 100%); 
    border-color: var(--si-exc-border); 
}
.si-style-8.si-bg-good { 
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.02) 0%, rgba(255,255,255,0.99) 50%, rgba(34, 197, 94, 0.01) 100%); 
    border-color: var(--si-good-border); 
}
.si-style-8.si-bg-med { 
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.02) 0%, rgba(255,255,255,0.99) 50%, rgba(234, 179, 8, 0.01) 100%); 
    border-color: var(--si-med-border); 
}
.si-style-8.si-bg-low { 
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.02) 0%, rgba(255,255,255,0.99) 50%, rgba(249, 115, 22, 0.01) 100%); 
    border-color: var(--si-low-border); 
}
.si-style-8.si-bg-dng { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.02) 0%, rgba(255,255,255,0.99) 50%, rgba(239, 68, 68, 0.01) 100%); 
    border-color: var(--si-dng-border); 
}
.si-style-8.si-bg-exc .si-header { border-color: var(--si-exc-border); }
.si-style-8.si-bg-good .si-header { border-color: var(--si-good-border); }
.si-style-8.si-bg-med .si-header { border-color: var(--si-med-border); }
.si-style-8.si-bg-low .si-header { border-color: var(--si-low-border); }
.si-style-8.si-bg-dng .si-header { border-color: var(--si-dng-border); }
.si-style-8 .si-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--si-border);
}
.si-style-8 .si-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px solid;
    flex-shrink: 0;
}
.si-style-8 .si-circle.si-exc { border-color: var(--si-exc); background: var(--si-exc-bg); }
.si-style-8 .si-circle.si-good { border-color: var(--si-good); background: var(--si-good-bg); }
.si-style-8 .si-circle.si-med { border-color: var(--si-med); background: var(--si-med-bg); }
.si-style-8 .si-circle.si-low { border-color: var(--si-low); background: var(--si-low-bg); }
.si-style-8 .si-circle.si-dng { border-color: var(--si-dng); background: var(--si-dng-bg); }
.si-style-8 .si-circle-num { font-size: 32px; font-weight: 800; line-height: 1; }
.si-style-8 .si-circle-num.si-exc { color: var(--si-exc); }
.si-style-8 .si-circle-num.si-good { color: var(--si-good); }
.si-style-8 .si-circle-num.si-med { color: var(--si-med); }
.si-style-8 .si-circle-num.si-low { color: var(--si-low); }
.si-style-8 .si-circle-num.si-dng { color: var(--si-dng); }
.si-style-8 .si-circle-max { font-size: 12px; color: var(--si-muted); }
.si-style-8 .si-info { flex: 1; }
.si-style-8 .si-title { font-size: 20px; font-weight: 700; color: var(--si-text); margin-bottom: 4px; }
.si-style-8 .si-label { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.si-style-8 .si-label.si-exc { color: var(--si-exc); }
.si-style-8 .si-label.si-good { color: var(--si-good); }
.si-style-8 .si-label.si-med { color: var(--si-med); }
.si-style-8 .si-label.si-low { color: var(--si-low); }
.si-style-8 .si-label.si-dng { color: var(--si-dng); }
.si-style-8 .si-bar { height: 8px; background: #f1f5f9; border-radius: 8px; overflow: hidden; max-width: 300px; }
.si-style-8 .si-bar-fill { height: 100%; border-radius: 8px; }
.si-style-8 .si-bar-fill.si-exc { background: var(--si-exc); }
.si-style-8 .si-bar-fill.si-good { background: var(--si-good); }
.si-style-8 .si-bar-fill.si-med { background: var(--si-med); }
.si-style-8 .si-bar-fill.si-low { background: var(--si-low); }
.si-style-8 .si-bar-fill.si-dng { background: var(--si-dng); }
.si-style-8 .si-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
}
.si-style-8 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-8 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-8 .si-trend svg { width: 18px; height: 18px; }
.si-style-8 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.si-style-8 .si-col-header {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.si-style-8 .si-col-header svg { width: 20px; height: 20px; }
.si-style-8 .si-col-header.pos { color: var(--si-pos); }
.si-style-8 .si-col-header.neg { color: var(--si-neg); }
.si-style-8 .si-factors { display: flex; flex-direction: column; gap: 12px; }
.si-style-8 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid;
}
.si-style-8 .si-factor.pos { border-color: var(--si-pos); }
.si-style-8 .si-factor.neg { border-color: var(--si-neg); background: var(--si-neg-bg); }
.si-style-8 .si-factor-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.si-style-8 .si-factor-icon.pos { background: var(--si-pos-bg); }
.si-style-8 .si-factor-icon.pos svg { color: var(--si-pos); }
.si-style-8 .si-factor-icon.neg { background: #fee2e2; }
.si-style-8 .si-factor-icon.neg svg { color: var(--si-neg); }
.si-style-8 .si-factor-icon svg { width: 20px; height: 20px; }
.si-style-8 .si-factor-content { flex: 1; }
.si-style-8 .si-factor-title { font-size: 14px; font-weight: 600; color: var(--si-text); margin-bottom: 4px; }
.si-style-8 .si-factor-desc { font-size: 13px; color: var(--si-muted); line-height: 1.45; }

/* ============================================
   STYLE 9: Vertical Stack
   ============================================ */
.si-style-9 {
    border-radius: 20px;
    padding: 28px;
    text-align: center;
    border: 1px solid var(--si-border);
    background: var(--si-bg);
    position: relative;
    overflow: hidden;
}
/* Subtle background colors with gentle top-to-bottom gradient */
.si-style-9.si-bg-exc { 
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, rgba(255,255,255,1) 40%); 
    border-color: var(--si-exc-border); 
}
.si-style-9.si-bg-good { 
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.03) 0%, rgba(255,255,255,1) 40%); 
    border-color: var(--si-good-border); 
}
.si-style-9.si-bg-med { 
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.03) 0%, rgba(255,255,255,1) 40%); 
    border-color: var(--si-med-border); 
}
.si-style-9.si-bg-low { 
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.03) 0%, rgba(255,255,255,1) 40%); 
    border-color: var(--si-low-border); 
}
.si-style-9.si-bg-dng { 
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, rgba(255,255,255,1) 40%); 
    border-color: var(--si-dng-border); 
}
/* Legacy classes (keep for compatibility) */
.si-style-9.si-exc { background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, var(--si-bg) 100%); }
.si-style-9.si-good { background: linear-gradient(180deg, rgba(34, 197, 94, 0.03) 0%, var(--si-bg) 100%); }
.si-style-9.si-med { background: linear-gradient(180deg, rgba(234, 179, 8, 0.03) 0%, var(--si-bg) 100%); }
.si-style-9.si-low { background: linear-gradient(180deg, rgba(249, 115, 22, 0.03) 0%, var(--si-bg) 100%); }
.si-style-9.si-dng { background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, var(--si-bg) 100%); }
.si-style-9 .si-shield {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-style-9 .si-shield.si-exc { background: var(--si-exc); }
.si-style-9 .si-shield.si-good { background: var(--si-good); }
.si-style-9 .si-shield.si-med { background: var(--si-med); }
.si-style-9 .si-shield.si-low { background: var(--si-low); }
.si-style-9 .si-shield.si-dng { background: var(--si-dng); }
.si-style-9 .si-shield svg { width: 40px; height: 40px; color: #fff; }
.si-style-9 .si-score { font-size: 48px; font-weight: 800; margin-bottom: 4px; }
.si-style-9 .si-score.si-exc { color: var(--si-exc); }
.si-style-9 .si-score.si-good { color: var(--si-good); }
.si-style-9 .si-score.si-med { color: var(--si-med); }
.si-style-9 .si-score.si-low { color: var(--si-low); }
.si-style-9 .si-score.si-dng { color: var(--si-dng); }
.si-style-9 .si-score span { font-size: 20px; color: var(--si-muted); }
.si-style-9 .si-label { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.si-style-9 .si-label.si-exc { color: var(--si-exc); }
.si-style-9 .si-label.si-good { color: var(--si-good); }
.si-style-9 .si-label.si-med { color: var(--si-med); }
.si-style-9 .si-label.si-low { color: var(--si-low); }
.si-style-9 .si-label.si-dng { color: var(--si-dng); }
.si-style-9 .si-trend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
}
.si-style-9 .si-trend.up { background: var(--si-pos-bg); color: var(--si-pos); }
.si-style-9 .si-trend.down { background: var(--si-neg-bg); color: var(--si-neg); }
.si-style-9 .si-trend svg { width: 18px; height: 18px; }
.si-style-9 .si-bar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.si-style-9 .si-bar-fill { height: 100%; border-radius: 12px; }
.si-style-9 .si-bar-fill.si-exc { background: var(--si-exc); }
.si-style-9 .si-bar-fill.si-good { background: var(--si-good); }
.si-style-9 .si-bar-fill.si-med { background: var(--si-med); }
.si-style-9 .si-bar-fill.si-low { background: var(--si-low); }
.si-style-9 .si-bar-fill.si-dng { background: var(--si-dng); }
.si-style-9 .si-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; }
.si-style-9 .si-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-align: center;
}
.si-style-9 .si-col-title.pos { color: var(--si-pos); }
.si-style-9 .si-col-title.neg { color: var(--si-neg); }
.si-style-9 .si-factors { display: flex; flex-direction: column; gap: 8px; }
.si-style-9 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--si-bg);
    border-radius: 10px;
}
.si-style-9 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-9 .si-factor svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.si-style-9 .si-factor.pos svg { color: var(--si-pos); }
.si-style-9 .si-factor.neg svg { color: var(--si-neg); }
.si-style-9 .si-factor-text { font-size: 13px; color: var(--si-text); line-height: 1.4; }

/* ============================================
   STYLE 10: Split Info
   ============================================ */
.si-style-10 {
    display: grid;
    grid-template-columns: 200px 1fr;
    background: var(--si-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--si-border);
}
/* Subtle background colors - right panel gets very light bg */
.si-style-10.si-bg-exc { border-color: var(--si-exc-border); }
.si-style-10.si-bg-good { border-color: var(--si-good-border); }
.si-style-10.si-bg-med { border-color: var(--si-med-border); }
.si-style-10.si-bg-low { border-color: var(--si-low-border); }
.si-style-10.si-bg-dng { border-color: var(--si-dng-border); }
.si-style-10.si-bg-exc .si-right { background: rgba(16, 185, 129, 0.015); }
.si-style-10.si-bg-good .si-right { background: rgba(34, 197, 94, 0.015); }
.si-style-10.si-bg-med .si-right { background: rgba(234, 179, 8, 0.015); }
.si-style-10.si-bg-low .si-right { background: rgba(249, 115, 22, 0.015); }
.si-style-10.si-bg-dng .si-right { background: rgba(239, 68, 68, 0.015); }
.si-style-10 .si-left {
    padding: 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.si-style-10 .si-left.si-exc { background: linear-gradient(135deg, var(--si-exc) 0%, #059669 100%); }
.si-style-10 .si-left.si-good { background: linear-gradient(135deg, var(--si-good) 0%, #16a34a 100%); }
.si-style-10 .si-left.si-med { background: linear-gradient(135deg, var(--si-med) 0%, #ca8a04 100%); }
.si-style-10 .si-left.si-low { background: linear-gradient(135deg, var(--si-low) 0%, #ea580c 100%); }
.si-style-10 .si-left.si-dng { background: linear-gradient(135deg, var(--si-dng) 0%, #dc2626 100%); }
.si-style-10 .si-shield {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.si-style-10 .si-shield svg { width: 32px; height: 32px; color: #fff; }
.si-style-10 .si-score { font-size: 42px; font-weight: 800; color: #fff; }
.si-style-10 .si-score span { font-size: 18px; opacity: 0.8; }
.si-style-10 .si-label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-top: 4px; }
.si-style-10 .si-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.si-style-10 .si-trend svg { width: 14px; height: 14px; }
.si-style-10 .si-right { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.si-style-10 .si-col-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.si-style-10 .si-col-title.pos { color: var(--si-pos); }
.si-style-10 .si-col-title.neg { color: var(--si-neg); }
.si-style-10 .si-factors { display: flex; flex-direction: column; gap: 6px; }
.si-style-10 .si-factor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
}
.si-style-10 .si-factor.neg { background: var(--si-neg-bg); }
.si-style-10 .si-factor svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.si-style-10 .si-factor.pos svg { color: var(--si-pos); }
.si-style-10 .si-factor.neg svg { color: var(--si-neg); }
.si-style-10 .si-factor-text { font-size: 12px; color: var(--si-text); line-height: 1.4; }

/* ============================================
   STYLE 11: Theme 2 Style (Ring + Scale + Chips)
   ============================================ */
.si-style-11 {
    background: var(--si-bg);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--si-border);
    position: relative;
    overflow: hidden;
}
/* Dynamic background based on score */
.si-style-11.si-bg-exc { 
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.03) 0%, rgba(255,255,255,1) 100%); 
    border-color: var(--si-exc-border); 
}
.si-style-11.si-bg-good { 
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.03) 0%, rgba(255,255,255,1) 100%); 
    border-color: var(--si-good-border); 
}
.si-style-11.si-bg-med { 
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.03) 0%, rgba(255,255,255,1) 100%); 
    border-color: var(--si-med-border); 
}
.si-style-11.si-bg-low { 
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.03) 0%, rgba(255,255,255,1) 100%); 
    border-color: var(--si-low-border); 
}
.si-style-11.si-bg-dng { 
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.03) 0%, rgba(255,255,255,1) 100%); 
    border-color: var(--si-dng-border); 
}

.si-style-11 .si-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ring Score - SVG donut */
.si-style-11 .si-ring {
    width: 100px;
    height: 100px;
    position: relative;
    flex-shrink: 0;
}
.si-style-11 .si-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.si-style-11 .si-ring-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
}
.si-style-11 .si-ring-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}
.si-style-11 .si-ring-fill.si-exc { stroke: var(--si-exc); }
.si-style-11 .si-ring-fill.si-good { stroke: var(--si-good); }
.si-style-11 .si-ring-fill.si-med { stroke: var(--si-med); }
.si-style-11 .si-ring-fill.si-low { stroke: var(--si-low); }
.si-style-11 .si-ring-fill.si-dng { stroke: var(--si-dng); }
.si-style-11 .si-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.si-style-11 .si-ring-score {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.si-style-11 .si-ring-score.si-exc { color: var(--si-exc); }
.si-style-11 .si-ring-score.si-good { color: var(--si-good); }
.si-style-11 .si-ring-score.si-med { color: var(--si-med); }
.si-style-11 .si-ring-score.si-low { color: var(--si-low); }
.si-style-11 .si-ring-score.si-dng { color: var(--si-dng); }
.si-style-11 .si-ring-max {
    font-size: 11px;
    color: var(--si-muted);
    margin-top: 2px;
}

.si-style-11 .si-info { flex: 1; }
.si-style-11 .si-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--si-text);
    margin-bottom: 6px;
}
.si-style-11 .si-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
}
.si-style-11 .si-label.si-exc { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.si-style-11 .si-label.si-good { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.si-style-11 .si-label.si-med { background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.si-style-11 .si-label.si-low { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.si-style-11 .si-label.si-dng { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.si-style-11 .si-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 600;
}
.si-style-11 .si-trend.up { color: #16a34a; }
.si-style-11 .si-trend.down { color: #dc2626; }
.si-style-11 .si-trend svg { width: 14px; height: 14px; }

/* Color Scale Bar */
.si-style-11 .si-scale {
    margin-bottom: 20px;
    position: relative;
}
.si-style-11 .si-scale-bar {
    height: 10px;
    border-radius: 9999px;
    background: linear-gradient(90deg, 
        #ef4444 0%, 
        #ef4444 30%, 
        #f97316 30%, 
        #f97316 50%, 
        #eab308 50%, 
        #eab308 70%, 
        #22c55e 70%, 
        #22c55e 85%, 
        #10b981 85%, 
        #10b981 100%
    );
}
.si-style-11 .si-scale-marker {
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 12px solid #0f172a;
}
.si-style-11 .si-scale-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--si-muted);
    margin-top: 6px;
    padding: 0 2px;
}

/* Chips/Tags for factors */
.si-style-11 .si-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.si-style-11 .si-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid;
}
.si-style-11 .si-chip.pos {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}
.si-style-11 .si-chip.neg {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}
.si-style-11 .si-chip svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.si-style-11 .si-chip.pos svg { color: var(--si-pos); }
.si-style-11 .si-chip.neg svg { color: var(--si-neg); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .si-style-1 .si-factors,
    .si-style-2 .si-columns,
    .si-style-3 .si-columns,
    .si-style-5 .si-columns,
    .si-style-6 .si-columns,
    .si-style-8 .si-columns,
    .si-style-9 .si-columns {
        grid-template-columns: 1fr;
    }
    .si-style-7,
    .si-style-10 {
        grid-template-columns: 1fr;
    }
    .si-style-7 .si-left {
        border-right: none;
        border-bottom: 1px solid var(--si-border);
    }
}