/* Calendar indicators */
    .cal-indicators { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
    @media (max-width: 575px) { .cal-indicators { grid-template-columns: 1fr; } }
    .cal-ind { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background: var(--color-card-background); }
    .cal-ind strong { display: block; font-size: var(--font-size-sm, 14px); color: var(--color-secondary); margin-bottom: 4px; }
    .cal-ind p { margin: 0; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); line-height: 1.4; }
    /* TASK-540: пиктограммы справки = пиктограммы календаря (ui_icon в пастельной
       плашке), вместо юникод-глифов ▲▼●Σ. Пары фон/цвет — те же токены, что у
       чипов в assets/styles/pages/user-calendar.css. */
    /* @brandbook-ignore-next BB-ICON-SIZE-RAW — это КОНТЕЙНЕР-плашка (фон + border-radius) вокруг иконки, а не сама иконка: SVG приходит из ui_icon({size:'sm'}) */
    .cal-ind-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border-radius: var(--border-radius-sm);
    }
    /* @brandbook-ignore-next BB-ICON-SIZE-RAW — нормализация вложенного ui_icon() под размер плашки выше (тот же приём, что .cal-chip-icon svg в user-calendar.css) */
    .cal-ind-icon svg { width: 16px; height: 16px; display: block; }
    /* «Надходження» — шеврон ВВЕРХ: в реестре иконок есть только chevron-down. */
    .cal-ind-icon--income { background: var(--color-surface-income, #CCECD0); color: var(--color-success-strong, #009F13); }
    .cal-ind-icon--income svg { transform: rotate(180deg); }
    .cal-ind-icon--expense { background: var(--color-surface-expense, #F4DED6); color: var(--color-warning-strong, #DA600A); }
    /* «Події» — залитый круг: иконка circle контурная и несёт свой fill="none". */
    .cal-ind-icon--events { background: var(--color-surface-event, #FFEC82); color: var(--color-warning, #F97316); }
    .cal-ind-icon--events svg circle { fill: currentColor; stroke: none; }
    .cal-ind-icon--balance { background: var(--color-surface-balance, #DCE5FD); color: var(--color-primary, #4F7CF7); }

    .cal-ind-badge { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--border-radius-sm); font-size: var(--font-size-base, 16px); font-weight: var(--font-weight-bold, 700); color: var(--color-white, var(--color-hero-text, #fff)); flex-shrink: 0; }
    .cal-ind-green { background: var(--color-success, var(--color-success, #34A853)); }
    .cal-ind-red { background: var(--color-error, var(--color-danger, #e74c3c)); }
    .cal-ind-orange { background: var(--color-warning, var(--color-warning, #F97316)); }
    .cal-ind-dark { background: var(--color-error-dark, var(--color-error-dark, #b71c1c)); }

    .api-endpoints { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
    .api-endpoint { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); background: var(--color-background); }
    .api-method { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: 4px; font-weight: var(--font-weight-bold, 700); font-size: var(--font-size-xs, 12px); }
    .api-method--get { background: var(--color-success-bg); color: var(--color-success-dark); }
    .api-path { font-size: var(--font-size-sm, 14px); color: var(--color-primary); margin-left: var(--spacing-sm); }
    .api-params { margin-top: var(--spacing-sm); display: flex; flex-direction: column; gap: var(--spacing-xs); }
    .api-param { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }
    .api-param code { color: var(--color-secondary); font-weight: var(--font-weight-semibold, 600); }
    .api-example { margin-top: 10px; }
    .api-example summary { cursor: pointer; font-size: var(--font-size-xs, 12px); color: var(--color-primary); font-weight: var(--font-weight-medium, 500); }
    .api-example pre { margin-top: var(--spacing-sm); padding: 12px; background: var(--color-secondary); color: var(--color-white, var(--color-hero-text, #fff)); border-radius: var(--border-radius-sm); overflow-x: auto; font-size: var(--font-size-xs, 12px); line-height: 1.5; }
    .api-example code { color: inherit; }