.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .45rem .75rem;
    background: rgba(255, 255, 255, .11);
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.streak-badge .ui-icon { width: 1rem; height: 1rem; color: #d6fbef; }

.streak-panel {
    position: fixed;
    z-index: 10000;
    top: 5rem;
    right: 1rem;
    width: min(390px, calc(100vw - 2rem));
    max-height: calc(100vh - 6rem);
    overflow: auto;
    padding: 1.2rem;
    border: 1px solid #cfe0db;
    border-radius: 20px;
    background: #fff;
    color: #173247;
    box-shadow: 0 22px 54px rgba(17, 72, 83, .22);
}

.streak-panel::before { content: ""; display: block; height: 4px; margin: -1.2rem -1.2rem 1.15rem; border-radius: 20px 20px 0 0; background: var(--brand-gradient); }
.streak-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.streak-panel__title { display: flex; align-items: flex-start; gap: .7rem; }
.streak-panel__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 11px; color: #0f766e; background: #e6f4ef; }
.streak-panel__mark .ui-icon { width: 1.2rem; height: 1.2rem; }
.streak-panel__eyebrow { display: block; margin-bottom: .25rem; color: #0f766e; font-size: .61rem; font-weight: 800; letter-spacing: .12em; }
.streak-panel__header strong { display: block; color: #173247; font-size: 1.04rem; }
.streak-panel__header p { max-width: 285px; margin: .4rem 0 0; color: #607484; font-size: .88rem; line-height: 1.45; }
.streak-panel__header button { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid #d5e2dd; border-radius: 9px; background: #fff; color: #49616e; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.streak-panel__header button:hover { color: #0f766e; background: #ecf4f1; }
.streak-progress { display: grid; gap: .8rem; margin: 1.2rem 0; padding: 1rem; border: 1px solid #e0ebe7; border-radius: 14px; background: #f8fbfa; }
.streak-progress__item { display: grid; grid-template-columns: 1fr auto; gap: .32rem .5rem; color: #3c5361; font-size: .87rem; }
.streak-progress__item > span:first-child { display: inline-flex; align-items: center; gap: .35rem; }
.streak-progress__state { color: #0f766e; font-weight: 800; }
.streak-progress__item > div { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #e7efec; }
.streak-progress__item i { display: block; height: 100%; border-radius: inherit; background: #0f766e; }
.streak-progress__item--sono i { background: #168dc2; }
.streak-progress__item--alimentacao i { background: #4d7c0f; }
.streak-progress__item--exercicio i { background: #c2410c; }
.streak-progress__item--agua i { background: #168dc2; }
.streak-calendar-section { padding-top: .1rem; }
.streak-calendar-section > strong { color: #173247; font-size: .97rem; }
.streak-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; margin: .7rem 0 1.2rem; }
.streak-day { display: grid; place-items: center; padding: .5rem .15rem; border: 1px solid transparent; border-radius: 10px; background: #f0f4f2; color: #6b7d76; }
.streak-day span { font-size: .67rem; text-transform: capitalize; }
.streak-day.is-success { background: #e4f5ef; color: #0f766e; border-color: #a9dcc8; box-shadow: none; }
.streak-notifications { display: grid; gap: .65rem; padding-top: 1rem; border-top: 1px solid #dfe9e5; }
.streak-notifications > strong { color: #173247; }
.streak-notifications label { display: flex; align-items: center; justify-content: space-between; }
.streak-notifications input, .streak-notifications button { padding: .6rem .7rem; border: 1px solid #bfd4cd; border-radius: 9px; }
.streak-notifications input { color: #173247; background: #fff; }
.streak-notifications button { border-color: transparent; background: var(--brand-gradient); color: #fff; font-weight: 700; cursor: pointer; }
.streak-notifications button:hover { background: var(--brand-gradient-hover); }
.streak-notifications small { color: #6b7d76; line-height: 1.4; }

@media (max-width: 700px) {
    .streak-panel { top: 1rem; max-height: calc(100vh - 2rem); }
}