/* Site Tools — загальні стилі */
.st-widget-outer .st-wrap {
    max-width: 560px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.st-subtitle {
    font-size: 15px;
    color: #666;
    margin: 0 0 1rem;
    line-height: 1.5;
}

/* Поле введення */
.st-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 0.75rem;
}

.st-input-row input[type="number"] {
    flex: 1;
    font-size: 18px;
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    outline: none;
    transition: border-color 0.2s;
}

.st-input-row input[type="number"]:focus {
    border-color: #7F77DD;
}

.st-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.st-btn:hover {
    background: #f5f5f5;
}

/* Помилка */
.st-error {
    font-size: 13px;
    color: #A32D2D;
    margin-bottom: 8px;
}

/* Картка результату */
.st-card {
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    padding: 1.25rem 1.5rem;
    background: #fff;
    margin-bottom: 1rem;
}

.st-badge {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

.st-gen-name {
    font-size: 22px;
    font-weight: 600;
    color: #111;
    margin-bottom: 3px;
}

.st-gen-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.st-gen-desc {
    font-size: 15px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* Теги рис */
.st-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.st-trait {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    background: #f5f5f5;
    color: #555;
    border: 1px solid #eee;
}

/* Шкала поколінь */
.st-scale-wrap {
    margin-top: 0.5rem;
}

.st-scale {
    display: flex;
    gap: 4px;
    height: 6px;
}

.st-seg {
    flex: 1;
    border-radius: 3px;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.st-seg.st-seg-active {
    opacity: 1;
}

.st-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.st-scale-labels span {
    font-size: 10px;
    color: #aaa;
}

/* Адаптив */
@media (max-width: 480px) {
    .st-input-row {
        flex-direction: column;
    }
    .st-input-row input[type="number"],
    .st-btn {
        width: 100%;
    }
    .st-gen-name {
        font-size: 18px;
    }
}

/* =====================
   Zodiac Widget
   ===================== */

.st-zodiac-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.st-zodiac-symbol {
    font-size: 36px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.st-zodiac-info {
    flex: 1;
}

.st-zodiac-element-badge {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 6px;
    font-weight: 500;
}

.st-zodiac-details {
    display: flex;
    gap: 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.st-zodiac-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 20px;
    margin-bottom: 6px;
}

.st-zodiac-detail-label {
    font-size: 12px;
    color: #999;
}

.st-zodiac-detail-val {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.st-zodiac-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Сумісність */
.st-zodiac-compat-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.st-zodiac-compat-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.st-select {
    flex: 1;
    font-size: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    outline: none;
    cursor: pointer;
}

.st-select:focus {
    border-color: #7F77DD;
}

.st-zodiac-percent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.st-zodiac-compat-label {
    font-size: 14px;
    color: #555;
}

.st-zodiac-percent {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}

.st-zodiac-bar-bg {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.st-zodiac-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Топ-3 */
.st-zodiac-top3 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.st-zodiac-top3-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.st-zodiac-top3-num {
    font-size: 13px;
    font-weight: 600;
    color: #bbb;
    width: 16px;
    text-align: center;
}

.st-zodiac-top3-sym {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.st-zodiac-top3-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.st-zodiac-top3-pct {
    font-size: 14px;
    font-weight: 600;
    color: #1D9E75;
}

@media (max-width: 480px) {
    .st-zodiac-compat-row {
        flex-direction: column;
    }
    .st-select, .st-zodiac-compat-row .st-btn {
        width: 100%;
    }
    .st-zodiac-symbol {
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
}

/* Автоматична обгортка з рамкою */
.st-auto-widget {
    border: 1.5px solid #e0ddf8;
    border-radius: 12px;
    padding: 6px;
    margin: 1.5rem 0;
    background: #fafafe;
}

/* =====================
   Numerology Widget
   ===================== */
.st-num-main-card { margin-bottom: 0; }
.st-num-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.st-num-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.st-num-info { flex: 1; }
.st-num-calc-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 10px;
}
.st-num-formula {
    margin-bottom: 8px;
}
.st-num-formula-text {
    font-size: 13px;
    color: #666;
    font-family: monospace;
}
.st-num-steps { display: flex; flex-direction: column; gap: 4px; }
.st-num-step {
    font-size: 13px;
    color: #555;
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.st-num-step-label { color: #aaa; font-size: 12px; }
.st-num-step-digits { font-family: monospace; color: #7F77DD; font-weight: 500; }
/* Додаткові числа */
.st-num-extra-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.st-num-extra-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}
.st-num-extra-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.st-num-extra-info { flex: 1; }
.st-num-extra-label { font-size: 11px; color: #aaa; }
.st-num-extra-title { font-size: 14px; font-weight: 600; color: #333; }
.st-num-extra-hint  { font-size: 11px; color: #bbb; }

/* =====================
   Numerology Widget
   ===================== */
.st-num-main-card { margin-bottom: 0; }
.st-num-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.st-num-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
    border: 1.5px solid transparent;
}
.st-num-title {
    font-size: 20px;
    font-weight: 500;
    color: #111;
    margin-bottom: 3px;
}
.st-num-subtitle {
    font-size: 13px;
    color: #888;
}
.st-num-desc {
    font-size: 14px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 14px;
}
/* Кроки розрахунку */
.st-num-calc-title {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 10px;
}
.st-num-steps { display: flex; flex-direction: column; gap: 6px; }
.st-num-step {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 6px;
    color: #555;
}
.st-num-step-final {
    background: #EEEDFE;
    color: #3C3489;
    font-weight: 500;
}
.st-num-step-label { color: inherit; }
.st-num-step-val   { font-weight: 500; }
/* Додаткові числа */
.st-num-extra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 1rem;
}
.st-num-extra-card {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    background: #fff;
}
.st-num-extra-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 8px;
}
.st-num-extra-label {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}
.st-num-extra-hint {
    font-size: 11px;
    color: #aaa;
    line-height: 1.4;
}
@media (max-width: 400px) {
    .st-num-extra-grid { grid-template-columns: 1fr; }
}

/* =====================
   Birthday Number Widget
   ===================== */
.st-bday-steps-card { margin-bottom: 1rem; }
.st-bday-formula-title {
    font-size: 12px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}
.st-bday-step-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.st-bday-step {
    flex: 1;
    min-width: 80px;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.st-bday-step-label {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 4px;
}
.st-bday-step-calc {
    font-size: 14px;
    color: #333;
}
.st-bday-total {
    font-size: 15px;
    color: #555;
    text-align: center;
    padding: 8px;
    border-top: 1px solid #f0f0f0;
}
.st-master-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #EEEDFE;
    color: #3C3489;
    font-weight: 500;
    vertical-align: middle;
}
/* Головна картка */
.st-bday-main-card { margin-bottom: 1rem; }
.st-bday-num-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.st-bday-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Додаткові числа */
.st-bday-extra-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 12px;
}
.st-bday-extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.st-bday-extra-card {
    background: #f8f8f8;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.st-bday-extra-num {
    font-size: 28px;
    font-weight: 700;
    color: #7F77DD;
    line-height: 1;
    margin-bottom: 4px;
}
.st-bday-extra-label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}
.st-bday-extra-hint {
    font-size: 11px;
    color: #aaa;
}
@media (max-width: 480px) {
    .st-bday-extra-grid { grid-template-columns: 1fr; }
    .st-bday-circle { width: 58px; height: 58px; font-size: 26px; }
}

/* =====================
   Countdown Widget
   ===================== */
.st-countdown-wrap { max-width: 520px; }
.st-cd-select-row { margin-bottom: 1.25rem; }
.st-cd-select {
    width: 100%;
    font-size: 15px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    outline: none;
    cursor: pointer;
}
.st-cd-select:focus { border-color: #7F77DD; }
.st-cd-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}
.st-cd-icon { font-size: 40px; margin-bottom: 8px; line-height: 1; }
.st-cd-name { font-size: 18px; font-weight: 600; color: #222; margin-bottom: 4px; }
.st-cd-date { font-size: 13px; color: #999; margin-bottom: 1.25rem; }
.st-cd-tiles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.st-cd-tile {
    background: #f5f4ff;
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 64px;
}
.st-cd-num {
    font-size: 28px;
    font-weight: 700;
    color: #7F77DD;
    line-height: 1;
    margin-bottom: 4px;
}
.st-cd-label { font-size: 11px; color: #aaa; }
.st-cd-sep { font-size: 24px; font-weight: 700; color: #ccc; }
.st-cd-today { font-size: 18px; font-weight: 600; color: #1D9E75; padding: 12px 0; }
/* Список найближчих */
.st-cd-upcoming-title {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}
.st-cd-list { display: flex; flex-direction: column; gap: 6px; }
.st-cd-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}
.st-cd-list-icon { font-size: 18px; flex-shrink: 0; }
.st-cd-list-name { flex: 1; font-size: 13px; color: #333; }
.st-cd-list-date { font-size: 12px; color: #999; white-space: nowrap; }
.st-cd-list-days {
    font-size: 12px;
    font-weight: 600;
    color: #7F77DD;
    white-space: nowrap;
    min-width: 44px;
    text-align: right;
}

/* =====================
   Slang Quiz Widget
   ===================== */
.st-quiz-wrap { max-width: 540px; }
.st-quiz-start-btn {
    width: 100%;
    padding: 13px !important;
    font-size: 16px !important;
    font-weight: 600;
    background: #7F77DD !important;
    color: #fff !important;
    border-color: #7F77DD !important;
    border-radius: 10px !important;
    margin-top: 8px;
}
.st-quiz-start-btn:hover { background: #534AB7 !important; border-color: #534AB7 !important; }
/* Прогрес */
.st-quiz-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}
.st-quiz-progress-bar {
    flex: 1;
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}
.st-quiz-progress-fill {
    height: 100%;
    background: #7F77DD;
    border-radius: 3px;
    transition: width .3s ease;
}
.st-quiz-progress-label { font-size: 13px; color: #aaa; white-space: nowrap; }
/* Питання */
.st-quiz-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.25rem;
}
.st-quiz-q {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.st-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1rem;
}
.st-quiz-opt {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}
.st-quiz-opt:hover:not(:disabled) { background: #f5f4ff; border-color: #7F77DD; color: #3C3489; }
.st-quiz-opt-correct { background: #EAF3DE !important; border-color: #639922 !important; color: #27500A !important; }
.st-quiz-opt-wrong   { background: #FCEBEB !important; border-color: #E24B4A !important; color: #791F1F !important; }
.st-quiz-opt:disabled { cursor: default; }
/* Пояснення */
.st-quiz-explanation {
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 3px solid;
}
.st-expl-correct { background: #EAF3DE; color: #27500A; border-color: #639922; }
.st-expl-wrong   { background: #FCEBEB; color: #791F1F; border-color: #E24B4A; }
/* Кнопка далі */
.st-quiz-next-btn {
    width: 100%;
    padding: 11px !important;
    font-size: 15px !important;
    background: #7F77DD !important;
    color: #fff !important;
    border-color: #7F77DD !important;
    border-radius: 8px !important;
}
.st-quiz-next-btn:hover { background: #534AB7 !important; }
/* Результат */
.st-quiz-result-card { text-align: center; padding: 2rem 1.5rem; }
.st-quiz-result-icon  { font-size: 52px; margin-bottom: 8px; line-height: 1; }
.st-quiz-result-score { font-size: 40px; font-weight: 700; margin-bottom: 6px; }
.st-quiz-result-title { font-size: 18px; font-weight: 600; color: #222; margin-bottom: 8px; }
.st-quiz-result-desc  { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 1.25rem; }
.st-quiz-result-breakdown {
    text-align: left;
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.st-quiz-bd-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.st-bd-icon { font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.st-bd-ok .st-bd-icon  { color: #1D9E75; }
.st-bd-err .st-bd-icon { color: #E24B4A; }
.st-bd-q { color: #555; }
.st-quiz-retry-btn {
    width: 100%;
    padding: 11px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}

/* =====================
   МОБІЛЬНА АДАПТАЦІЯ (глобальна)
   ===================== */
@media (max-width: 600px) {
    .st-wrap { padding: .75rem 0; }
    .st-subtitle { font-size: 14px; }

    /* Загальні інпути */
    .st-input-row { flex-direction: column; }
    .st-input-row input, .st-input-row .st-btn,
    .st-input-row button { width: 100%; }

    /* Покоління */
    .st-scale-labels span { font-size: 9px; }

    /* Зодіак */
    .st-zodiac-top { gap: 10px; }
    .st-zodiac-symbol { width: 50px; height: 50px; font-size: 26px; }
    .st-gen-name { font-size: 17px; }
    .st-zodiac-details { gap: 8px; }
    .st-zodiac-compat-row { flex-direction: column; }
    .st-select, .st-zodiac-compat-row .st-btn { width: 100%; }

    /* Пропорції */
    .st-prop-row { flex-direction: column; align-items: stretch; }
    .st-prop-arrow { display: none; }
    .st-prop-input { width: 100%; font-size: 16px; }
    .st-prop-multiplier { text-align: center; }
    .st-prop-ing-row { flex-wrap: wrap; }
    .st-prop-ing-name { flex: 100%; }
    .st-prop-ing-amt  { flex: 1; }
    .st-prop-ing-unit { flex: 1; }

    /* Число народження */
    .st-bday-step-row { gap: 6px; }
    .st-bday-step { padding: 8px; }
    .st-bday-num-row { gap: 10px; }
    .st-bday-circle { width: 54px; height: 54px; font-size: 24px; }
    .st-bday-extra-grid { grid-template-columns: 1fr 1fr; }

    /* Лічильник */
    .st-cd-tiles { gap: 5px; }
    .st-cd-tile { min-width: 54px; padding: 10px 10px; }
    .st-cd-num { font-size: 22px; }
    .st-cd-sep { font-size: 18px; }
    .st-cd-list-name { font-size: 12px; }

    /* Квіз */
    .st-quiz-q { font-size: 15px; }
    .st-quiz-opt { font-size: 13px; padding: 11px 12px; }
    .st-quiz-result-icon { font-size: 44px; }
    .st-quiz-result-score { font-size: 34px; }
    .st-quiz-result-title { font-size: 16px; }
}

/* =====================
   BMI Widget
   ===================== */
.st-bmi-wrap { max-width: 560px; }
.st-bmi-form { margin-bottom: 1.5rem; }
.st-bmi-row { margin-bottom: 1rem; }
.st-bmi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-bmi-field { display: flex; flex-direction: column; gap: 5px; }
.st-bmi-field-full { width: 100%; }
.st-bmi-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.st-bmi-input-unit { display: flex; align-items: center; gap: 6px; }
.st-bmi-input {
    flex: 1; font-size: 16px; padding: 9px 12px;
    border-radius: 8px; border: 1px solid #ddd;
    background: #fff; color: #222; outline: none;
    min-width: 0;
}
.st-bmi-input:focus { border-color: #7F77DD; }
.st-bmi-unit { font-size: 13px; color: #aaa; white-space: nowrap; }
/* Стать */
.st-bmi-gender { display: flex; gap: 6px; }
.st-bmi-gender-btn {
    flex: 1; padding: 9px; border-radius: 8px;
    border: 1px solid #ddd; background: #fff;
    color: #555; font-size: 14px; cursor: pointer; transition: all .15s;
}
.st-bmi-gender-active { background: #EEEDFE; border-color: #7F77DD; color: #3C3489; font-weight: 500; }
/* Цілі */
.st-bmi-goals { display: flex; gap: 6px; }
.st-bmi-goal-btn {
    flex: 1; padding: 9px 6px; border-radius: 8px;
    border: 1px solid #ddd; background: #fff;
    color: #555; font-size: 13px; cursor: pointer; transition: all .15s;
}
.st-bmi-goal-active { background: #EEEDFE; border-color: #7F77DD; color: #3C3489; font-weight: 500; }
/* Кнопка */
.st-bmi-calc-btn {
    width: 100%; padding: 12px !important; font-size: 15px !important;
    background: #7F77DD !important; color: #fff !important;
    border-color: #7F77DD !important; border-radius: 10px !important;
    margin-top: 4px; font-weight: 500;
}
.st-bmi-calc-btn:hover { background: #534AB7 !important; }
/* Секції результату */
.st-bmi-section { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.st-bmi-section-title { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .4px; }
/* Картки зверху */
.st-bmi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 1.25rem; }
.st-bmi-card { background: #f8f8f8; border-radius: 10px; padding: 12px; text-align: center; }
.st-bmi-card-label { font-size: 11px; color: #aaa; margin-bottom: 6px; }
.st-bmi-card-val { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 4px; line-height: 1; }
.st-bmi-card-status { font-size: 11px; color: #888; }
/* Шкала */
.st-bmi-scale-wrap { position: relative; }
.st-bmi-scale { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.st-bmi-scale-seg { height: 100%; }
.st-bmi-seg-blue   { background: #378ADD; }
.st-bmi-seg-green  { background: #1D9E75; }
.st-bmi-seg-yellow { background: #EF9F27; }
.st-bmi-seg-orange { background: #D85A30; }
.st-bmi-seg-red    { background: #E24B4A; }
.st-bmi-scale-labels { display: flex; justify-content: space-between; }
.st-bmi-scale-labels span { font-size: 10px; color: #bbb; }
.st-bmi-scale-names { display: flex; justify-content: space-around; margin-top: 2px; }
.st-bmi-scale-names span { font-size: 10px; color: #bbb; }
.st-bmi-marker-wrap { position: relative; height: 16px; margin-top: -28px; pointer-events: none; }
.st-bmi-marker {
    position: absolute; top: 0; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid #fff;
    transform: translateX(-50%);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: left .4s ease;
}
/* Калорії по цілях */
.st-bmi-kcal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-bmi-kcal-card { background: #f8f8f8; border-radius: 10px; padding: 12px; text-align: center; border: 1px solid transparent; }
.st-bmi-kcal-active { background: #EEEDFE; border-color: #7F77DD; }
.st-bmi-kcal-num { font-size: 20px; font-weight: 700; color: #222; margin-bottom: 4px; }
.st-bmi-kcal-lbl { font-size: 11px; color: #888; line-height: 1.3; }
/* БЖВ */
.st-bmi-macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.st-bmi-macro-card { background: #f8f8f8; border-radius: 10px; padding: 12px; text-align: center; }
.st-bmi-macro-val { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.st-bmi-macro-bar-bg { height: 5px; background: #e8e8e8; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.st-bmi-macro-bar { height: 100%; border-radius: 3px; }
.st-bmi-macro-lbl { font-size: 11px; color: #888; }
/* Вода */
.st-bmi-water-row { display: flex; align-items: center; gap: 14px; }
.st-bmi-water-icon { font-size: 32px; flex-shrink: 0; }
.st-bmi-water-val { font-size: 24px; font-weight: 700; color: #378ADD; margin-bottom: 2px; }
.st-bmi-water-hint { font-size: 12px; color: #aaa; }
/* Рекомендації */
.st-bmi-recs { }
.st-bmi-tip { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 14px; color: #444; line-height: 1.5; }
.st-bmi-tip:last-child { margin-bottom: 0; }
.st-bmi-tip-dot { width: 7px; height: 7px; border-radius: 50%; background: #7F77DD; flex-shrink: 0; margin-top: 6px; }

/* Мобільна адаптація BMI */
@media (max-width: 600px) {
    .st-bmi-row-3 { grid-template-columns: 1fr 1fr; }
    .st-bmi-cards { grid-template-columns: 1fr 1fr; }
    .st-bmi-cards .st-bmi-card:last-child { grid-column: 1 / -1; }
    .st-bmi-kcal-grid { grid-template-columns: 1fr; }
    .st-bmi-macro-grid { grid-template-columns: repeat(3,1fr); }
    .st-bmi-card-val { font-size: 18px; }
    .st-bmi-kcal-num { font-size: 18px; }
    .st-bmi-goals { flex-wrap: wrap; }
    .st-bmi-goal-btn { min-width: calc(33% - 4px); }
}
@media (max-width: 380px) {
    .st-bmi-row-3 { grid-template-columns: 1fr; }
    .st-bmi-macro-grid { grid-template-columns: 1fr 1fr; }
    .st-bmi-macro-grid .st-bmi-macro-card:last-child { grid-column: 1 / -1; }
}

/* =====================
   Chinese Zodiac Widget
   ===================== */
.st-czodiac-wrap { max-width: 520px; }
.st-cz-main-card { margin-bottom: 1rem; }
.st-cz-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.st-cz-animal {
    width:64px; height:64px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:36px; flex-shrink:0;
}
.st-cz-info { flex:1; }
.st-cz-name { font-size:20px; font-weight:500; color:#222; margin-bottom:3px; }
.st-cz-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.st-cz-details {
    display:flex; flex-wrap:wrap; gap:10px 20px;
    border-top:1px solid #f0f0f0; padding-top:12px; margin-bottom:12px;
}
.st-cz-detail { display:flex; flex-direction:column; gap:2px; }
.st-cz-dlabel { font-size:11px; color:#aaa; }
.st-cz-dval   { font-size:13px; font-weight:500; color:#333; }
.st-cz-compat-title { font-size:13px; font-weight:600; color:#555; margin-bottom:10px; }
.st-cz-compat-grid { display:flex; flex-direction:column; gap:10px; }
.st-cz-compat-sec { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.st-cz-compat-sec-title { font-size:12px; font-weight:600; width:100%; }
.st-cz-chip {
    display:inline-block; font-size:13px;
    padding:4px 12px; border-radius:20px; font-weight:500;
}
.st-cz-cycle {
    display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
}
.st-cz-cycle-item {
    display:flex; flex-direction:column; align-items:center;
    padding:8px 4px; border-radius:8px; border:1px solid #f0f0f0;
    background:#fafafa;
}
.st-cz-cycle-active { border-color:#7F77DD; }
.st-cz-cycle-emoji { font-size:20px; }
.st-cz-cycle-year  { font-size:10px; color:#aaa; margin-top:2px; }

/* =====================
   Retirement Widget
   ===================== */
.st-ret-wrap { max-width:540px; }
.st-ret-form { margin-bottom:1.5rem; }
.st-ret-row  { margin-bottom:1rem; }
.st-ret-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.st-ret-date-card {
    display:flex; align-items:center; gap:14px;
    background:#f5f4ff; border-radius:10px; padding:14px 18px;
}
.st-ret-date-icon  { font-size:28px; flex-shrink:0; }
.st-ret-date-label { font-size:12px; color:#888; margin-bottom:4px; }
.st-ret-date-val   { font-size:20px; font-weight:700; color:#3C3489; }
.st-ret-stats { display:flex; flex-direction:column; gap:8px; }
.st-ret-stat-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; background:#fafafa;
    border-radius:8px; border:1px solid #f0f0f0;
}
.st-ret-stat-icon  { font-size:18px; flex-shrink:0; }
.st-ret-stat-label { flex:1; font-size:13px; color:#555; }
.st-ret-stat-val   { font-size:14px; font-weight:700; color:#7F77DD; }

/* Мобільна адаптація нових віджетів */
@media (max-width:600px) {
    .st-cz-top { gap:10px; }
    .st-cz-animal { width:52px; height:52px; font-size:28px; }
    .st-cz-cycle { grid-template-columns:repeat(4,1fr); }
    .st-ret-row-2 { grid-template-columns:1fr; }
    .st-ret-date-val { font-size:17px; }
}

/* =====================
   Electricity Widget
   ===================== */
.st-elec-wrap { max-width: 560px; }
.st-elec-form { margin-bottom: 1rem; }
.st-elec-field { margin-bottom: 1rem; }
.st-elec-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}
.st-elec-accent { color: #7F77DD; }
.st-elec-section {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.st-elec-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}
/* Standby */
.st-elec-standby-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.st-elec-standby-val { font-size: 22px; font-weight: 700; color: #BA7517; }
.st-elec-standby-label { font-size: 12px; color: #aaa; margin-top: 2px; }
.st-elec-standby-hint { font-size: 13px; color: #555; line-height: 1.5; flex: 1; min-width: 160px; }
/* Класи */
.st-elec-classes { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.st-elec-class-row { display: flex; align-items: center; gap: 10px; }
.st-elec-class-badge {
    font-size: 12px; font-weight: 700;
    padding: 3px 10px; border-radius: 6px;
    min-width: 38px; text-align: center; flex-shrink: 0;
}
.st-elec-class-bar-wrap {
    flex: 1; height: 8px; background: #f0f0f0;
    border-radius: 4px; overflow: hidden;
}
.st-elec-class-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.st-elec-class-cost { font-size: 13px; font-weight: 600; color: #333; min-width: 90px; text-align: right; }
.st-elec-saving-note {
    font-size: 13px; color: #1D9E75;
    background: #EAF3DE; padding: 8px 12px;
    border-radius: 8px; margin-top: 4px;
}
/* Автомат */
.st-elec-breaker-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.st-elec-breaker-main { display: flex; flex-direction: column; }
.st-elec-breaker-val { font-size: 26px; font-weight: 700; line-height: 1; }
.st-elec-breaker-label { font-size: 11px; color: #aaa; }
.st-elec-breaker-badge {
    font-size: 13px; font-weight: 700; color: #fff;
    padding: 6px 16px; border-radius: 8px; margin-left: auto;
}
.st-elec-breaker-advice {
    font-size: 13px; color: #555;
    padding: 8px 0; border-top: 1px solid #f0f0f0;
    margin-bottom: 6px;
}
.st-elec-breaker-devices { font-size: 13px; color: #666; }
.st-elec-breaker-devices strong { color: #7F77DD; }

@media (max-width: 600px) {
    .st-elec-row-3 { grid-template-columns: 1fr 1fr; }
    .st-elec-row-3 .st-elec-field:last-child { grid-column: 1 / -1; }
    .st-elec-class-cost { min-width: 70px; font-size: 12px; }
    .st-elec-standby-row { flex-direction: column; gap: 8px; }
}

/* =====================
   Proportions Widget (v2 — theme-neutral)
   ===================== */
.st-prop-wrap { max-width: 560px; }

/* Верхній рядок з порціями */
.st-prop-top {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.st-prop-col { display: flex; flex-direction: column; gap: 4px; }
.st-prop-lbl { font-size: 12px; color: #888; font-weight: 500; }
.st-prop-num-input {
    width: 100px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #222 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.st-prop-num-input:focus { border-color: #7F77DD !important; }
.st-prop-arrow-icon {
    font-size: 18px;
    color: #ccc;
    padding-bottom: 10px;
    flex-shrink: 0;
}
.st-prop-mult-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #555;
    margin-bottom: 10px;
    white-space: nowrap;
    transition: all .2s;
}

/* Таблиця інгредієнтів */
.st-prop-table {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.st-prop-table-head {
    display: grid;
    grid-template-columns: 1fr 90px 80px 32px;
    gap: 0;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    font-size: 11px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.st-prop-row {
    display: grid;
    grid-template-columns: 1fr 90px 80px 32px;
    gap: 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
}
.st-prop-row:last-child { border-bottom: none; }

/* Поля у рядку — ізолюємо від теми */
.st-prop-cell-name,
.st-prop-cell-amt,
.st-prop-unit-sel {
    width: 100% !important;
    display: block !important;
    border: none !important;
    border-right: 1px solid #f0f0f0 !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.st-prop-cell-name:focus,
.st-prop-cell-amt:focus,
.st-prop-unit-sel:focus {
    background: #fafaff !important;
    outline: none !important;
    box-shadow: none !important;
}
.st-prop-cell-amt { text-align: center !important; }
.st-prop-unit-sel { cursor: pointer !important; padding-right: 4px !important; }

.st-prop-del {
    background: none !important;
    border: none !important;
    color: #ddd !important;
    font-size: 14px !important;
    cursor: pointer !important;
    padding: 0 8px !important;
    width: 32px !important;
    text-align: center !important;
    box-shadow: none !important;
    outline: none !important;
    transition: color .15s;
}
.st-prop-del:hover { color: #E24B4A !important; }

.st-prop-add-row,
.st-prop-example-btn {
    width: 100% !important;
    padding: 9px !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid #f0f0f0 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: color .15s !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}
.st-prop-add-row { color: #7F77DD !important; font-weight: 600 !important; }
.st-prop-add-row:hover { background: #f5f4ff !important; }
.st-prop-example-btn { color: #aaa !important; }
.st-prop-example-btn:hover { color: #7F77DD !important; }

/* Результат */
.st-prop-result {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}
.st-prop-result-title {
    padding: 8px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e8e8e8;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.st-prop-res-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
}
.st-prop-res-row:last-child { border-bottom: none; }
.st-prop-res-name { color: #444; }
.st-prop-res-val { font-weight: 700; color: #7F77DD; }

@media (max-width: 500px) {
    .st-prop-top { gap: 6px; }
    .st-prop-num-input { width: 80px !important; font-size: 17px !important; }
    .st-prop-table-head,
    .st-prop-row { grid-template-columns: 1fr 70px 70px 28px; }
    .st-prop-cell-name,
    .st-prop-cell-amt,
    .st-prop-unit-sel { padding: 8px !important; font-size: 13px !important; }
}