/* /Layout/LoginLayout.razor.rz.scp.css */
.login-shell[b-ml1e066621] {
    min-height: 100vh;
    background: #FEF7FF;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.layout-root[b-ixna1wmh83] {
    min-height: 100vh;
    position: relative;
}

.main-content[b-ixna1wmh83] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mobile-topbar[b-ixna1wmh83] {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
}

.hamburger-btn[b-ixna1wmh83] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    color: #333;
    border-radius: 4px;
}

.hamburger-btn:hover[b-ixna1wmh83] {
    background: #f0f0f0;
}

.app-name[b-ixna1wmh83] {
    font-size: 1rem;
    font-weight: 600;
    color: #1d1b20;
}

.content[b-ixna1wmh83] {
    flex: 1;
    padding: 24px 32px;
}

@media (max-width: 767.98px) {
    .mobile-topbar[b-ixna1wmh83] {
        display: flex;
    }

    .content[b-ixna1wmh83] {
        padding: 16px;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
:root[b-h4t98n9pe3] {
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-padding-x: 0.5rem;
}

.sidebar-nav[b-h4t98n9pe3] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f8f7fa;
    overflow: hidden;
}

.nav-section-label[b-h4t98n9pe3] {
    padding: 20px 20px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    color: #999;
    text-transform: uppercase;
    flex-shrink: 0;
}

.nav-links[b-h4t98n9pe3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 10px;
    overflow-y: auto;
    gap: 2px;
}

.nav-links .nav-link[b-h4t98n9pe3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.nav-link:hover[b-h4t98n9pe3] {
    background: rgba(103, 80, 164, 0.06);
    color: #333;
    text-decoration: none;
}

.nav-link.active[b-h4t98n9pe3] {
    border-left-color: var(--color-primary, #6750A4);
    background: rgba(103, 80, 164, 0.09);
    color: var(--color-primary, #6750A4);
    font-weight: 600;
}

.nav-icon[b-h4t98n9pe3] {
    align-items: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.nav-icon svg[b-h4t98n9pe3] {
    width: 20px;
    height: 20px;
}

.nav-text[b-h4t98n9pe3] {
    flex: 1;
}

.sidebar-user[b-h4t98n9pe3] {
    position: relative;
    flex-shrink: 0;
    padding: 14px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 2rem;
}

.user-avatar[b-h4t98n9pe3] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary, #6750A4);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-name[b-h4t98n9pe3] {
    font-size: 0.88rem;
    color: #333;
    font-weight: 500;
    margin-left: 3rem;
}
/* /Pages/History.razor.rz.scp.css */
/* ── Root ── */

.hi-root[b-9ivmlkc9ec] {
    background: #FEF7FF;
    min-height: 100%;
    padding: 0 18px 100px;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: var(--color-on-surface);
}

.hi-loading[b-9ivmlkc9ec],
.hi-error[b-9ivmlkc9ec] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── Desktop header ── */

.hi-desk-header[b-9ivmlkc9ec] {
    padding: 28px 4px 20px;
}

.hi-desk-title[b-9ivmlkc9ec] {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--color-on-surface);
}

.hi-desk-sub[b-9ivmlkc9ec] {
    font-size: 13px;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

/* ── KPI strip ── */

.hi-kpi-strip[b-9ivmlkc9ec] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.hi-kpi[b-9ivmlkc9ec] {
    background: #fff;
    border-radius: 16px;
    padding: 14px 12px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.hi-kpi-label[b-9ivmlkc9ec] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-on-surface-variant);
}

.hi-kpi-value[b-9ivmlkc9ec] {
    font-size: 28px;
    font-weight: 400;
    font-family: "Roboto Mono", ui-monospace, monospace;
    margin-top: 2px;
    letter-spacing: -0.5px;
}

.hi-kpi-unit[b-9ivmlkc9ec] {
    font-size: 16px;
    color: var(--color-on-surface-variant);
    margin-left: 2px;
}

/* ── Section label ── */

.hi-section-label[b-9ivmlkc9ec] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
    padding: 0 4px;
    margin-bottom: 10px;
}

/* ── Treatment list ── */

.hi-list[b-9ivmlkc9ec] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hi-row[b-9ivmlkc9ec] {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    gap: 14px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: opacity .15s;
    width: 100%;
}

.hi-row:hover[b-9ivmlkc9ec] {
    opacity: 0.88;
}

.hi-color-bar[b-9ivmlkc9ec] {
    width: 4px;
    height: 40px;
    border-radius: 2px;
    align-self: center;
}

.hi-row-body[b-9ivmlkc9ec] {
    min-width: 0;
}

.hi-row-name[b-9ivmlkc9ec] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-surface);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hi-row-sub[b-9ivmlkc9ec] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    margin-bottom: 8px;
}

.hi-bar-track[b-9ivmlkc9ec] {
    height: 5px;
    border-radius: 3px;
    background: rgba(202, 196, 208, .4);
    overflow: hidden;
    margin-bottom: 5px;
}

.hi-bar-fill[b-9ivmlkc9ec] {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.hi-bar-labels[b-9ivmlkc9ec] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-family: "Roboto Mono", monospace;
    color: var(--color-on-surface-variant);
}

.hi-days-left[b-9ivmlkc9ec] {
    color: var(--color-on-surface-variant);
}

/* ── Streak column ── */

.hi-streak-col[b-9ivmlkc9ec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    min-width: 40px;
}

.hi-streak-num[b-9ivmlkc9ec] {
    font-size: 20px;
    font-weight: 400;
    font-family: "Roboto Mono", ui-monospace, monospace;
    line-height: 1;
    color: var(--color-on-surface);
}

.hi-streak-unit[b-9ivmlkc9ec] {
    font-size: 10px;
    color: var(--color-on-surface-variant);
}
/* /Pages/Home.razor.rz.scp.css */
/* ── Shared ── */

.dash-loading[b-0a3mdee95o],
.dash-error[b-0a3mdee95o] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

.card[b-0a3mdee95o] {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(202, 196, 208, .33);
}

.color-bar[b-0a3mdee95o] {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.d-suffix[b-0a3mdee95o] { font-size: .75em; }

/* ── Mobile layout ── */

.dash-desktop[b-0a3mdee95o] { display: none; }

.dash-mobile[b-0a3mdee95o] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 24px;
}

.today-card[b-0a3mdee95o] { border-radius: 24px; }

.today-summary[b-0a3mdee95o] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.today-text[b-0a3mdee95o] { flex: 1; }

.today-label[b-0a3mdee95o] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-primary);
}

.today-count[b-0a3mdee95o] {
    font-size: 22px;
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: -0.3px;
    color: var(--color-on-surface);
}

.today-sub[b-0a3mdee95o] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.matrix-divider[b-0a3mdee95o] {
    border-top: 1px solid rgba(202, 196, 208, .33);
    margin: 14px 0;
}

.dose-matrix[b-0a3mdee95o] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 6px 12px;
    align-items: center;
}

.slot-icon-col[b-0a3mdee95o] {
    display: flex;
    justify-content: center;
    width: 36px;
}

.treatment-name-cell[b-0a3mdee95o] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.treatment-name[b-0a3mdee95o] {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.dose-cell[b-0a3mdee95o] {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1.5px solid transparent;
}

.dose-taken[b-0a3mdee95o]  { border: none; }
.dose-missed[b-0a3mdee95o] { background: var(--color-coral-dim) !important; }
.dose-pending[b-0a3mdee95o] { border-color: var(--color-outline-variant); }
.dose-na[b-0a3mdee95o] { }

/* Section */

.section-header[b-0a3mdee95o] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.section-label[b-0a3mdee95o] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
}

.section-badge[b-0a3mdee95o] {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-coral);
    background: var(--color-coral-dim);
    padding: 2px 6px;
    border-radius: 8px;
}

/* Refill list */

.refill-list[b-0a3mdee95o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.refill-row[b-0a3mdee95o] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(202, 196, 208, .33);
}

.refill-urgent[b-0a3mdee95o] { border-color: rgba(232, 146, 116, .5); }

.refill-name[b-0a3mdee95o] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.refill-sub[b-0a3mdee95o] {
    font-size: 11px;
    color: var(--color-on-surface-variant);
    margin-top: 1px;
}

.refill-sub-urgent[b-0a3mdee95o] { color: var(--color-coral); }

.refill-countdown[b-0a3mdee95o] {
    font-size: 22px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    color: var(--color-on-surface);
}

.refill-countdown-urgent[b-0a3mdee95o] { color: var(--color-coral); }

/* Streaks */

.streak-card[b-0a3mdee95o] {
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.streak-row[b-0a3mdee95o] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.streak-name[b-0a3mdee95o] {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.streak-days[b-0a3mdee95o] {
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
    color: var(--color-on-surface);
    min-width: 28px;
    text-align: right;
}

/* ── Desktop layout ── */

@media (min-width: 768px) {
    .dash-mobile[b-0a3mdee95o]  { display: none; }
    .dash-desktop[b-0a3mdee95o] { display: block; }

    .desk-header[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
    }

    .desk-date[b-0a3mdee95o] {
        font-size: 11px;
        color: #666;
        letter-spacing: 1px;
        font-weight: 600;
    }

    .desk-title[b-0a3mdee95o] {
        font-size: 30px;
        font-weight: 600;
        margin-top: 4px;
        letter-spacing: -0.5px;
        color: #1B1B1F;
    }

    .btn-new[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 4px;
        border: none;
        background: var(--color-primary);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    .kpi-strip[b-0a3mdee95o] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 16px;
    }

    .kpi-card[b-0a3mdee95o] {
        background: #fff;
        border-radius: 8px;
        padding: 14px 16px;
        border: 1px solid rgba(0,0,0,.06);
    }

    .kpi-label[b-0a3mdee95o] {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px;
        color: #666;
        text-transform: uppercase;
    }

    .kpi-value[b-0a3mdee95o] {
        font-size: 24px;
        font-weight: 600;
        font-family: 'Roboto Mono', monospace;
        margin-top: 4px;
        letter-spacing: -0.5px;
    }

    .kpi-sub[b-0a3mdee95o] {
        font-size: 11px;
        color: #666;
        margin-top: 2px;
    }

    .desk-columns[b-0a3mdee95o] {
        display: grid;
        grid-template-columns: 1.6fr 1fr;
        gap: 16px;
        align-items: start;
    }

    .desk-panel[b-0a3mdee95o] {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
        margin-bottom: 12px;
    }

    .desk-panel:last-child[b-0a3mdee95o] { margin-bottom: 0; }

    .desk-panel-header[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .desk-panel-title[b-0a3mdee95o] {
        font-size: 16px;
        font-weight: 600;
        color: #1B1B1F;
    }

    .desk-panel-sub[b-0a3mdee95o] {
        font-size: 12px;
        color: #666;
        margin-top: 2px;
    }

    .desk-table-header[b-0a3mdee95o],
    .desk-table-row[b-0a3mdee95o] {
        display: grid;
        grid-template-columns: 1fr repeat(3, 80px) 60px;
        align-items: center;
    }

    .desk-table-header[b-0a3mdee95o] {
        padding: 8px 0;
        border-bottom: 1px solid rgba(0,0,0,.06);
        font-size: 10px;
        font-weight: 600;
        color: #666;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .desk-slot-col[b-0a3mdee95o] { text-align: center; }

    .desk-table-row[b-0a3mdee95o] {
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,.04);
    }

    .desk-treatment-cell[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .color-bar-tall[b-0a3mdee95o] {
        width: 4px;
        height: 22px;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .desk-treatment-name[b-0a3mdee95o] {
        font-size: 13px;
        font-weight: 500;
        color: #1B1B1F;
    }

    .desk-treatment-dose[b-0a3mdee95o] {
        font-size: 11px;
        color: #666;
    }

    .desk-cell-col[b-0a3mdee95o] {
        display: grid;
        place-items: center;
    }

    .desk-dose-cell[b-0a3mdee95o] {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        border: 1.5px solid var(--color-outline-variant);
    }

    .desk-dose-taken[b-0a3mdee95o]   { border: none; }
    .desk-dose-missed[b-0a3mdee95o]  { border-color: transparent; background: var(--color-coral-dim) !important; }
    .desk-dose-pending[b-0a3mdee95o] { }
    .desk-dose-na[b-0a3mdee95o]      { border: 1px dashed rgba(0,0,0,.1); }

    .desk-status[b-0a3mdee95o] {
        text-align: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--color-on-surface-variant);
    }

    .desk-status-done[b-0a3mdee95o] { color: var(--color-mint); }

    .desk-right[b-0a3mdee95o] { display: flex; flex-direction: column; }

    .desk-mini-header[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
    }

    .desk-mini-title[b-0a3mdee95o] {
        font-size: 13px;
        font-weight: 600;
        color: #1B1B1F;
    }

    .desk-mini-badge[b-0a3mdee95o] {
        font-size: 10px;
        font-weight: 600;
        color: var(--color-coral);
        background: var(--color-coral-dim);
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: auto;
    }

    .desk-refill-row[b-0a3mdee95o] {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
        padding: 8px 10px;
        border-radius: 4px;
        background: #FAFAFA;
        border: 1px solid rgba(0,0,0,.04);
        margin-bottom: 6px;
    }

    .desk-refill-urgent[b-0a3mdee95o] { border-color: rgba(232, 146, 116, .33); }

    .desk-refill-name[b-0a3mdee95o] {
        font-size: 12px;
        font-weight: 500;
    }

    .desk-refill-sub[b-0a3mdee95o] { font-size: 10px; color: #666; }

    .desk-refill-days[b-0a3mdee95o] {
        font-size: 14px;
        font-family: 'Roboto Mono', monospace;
        font-weight: 600;
    }

    .text-coral[b-0a3mdee95o] { color: var(--color-coral); }
    .text-amber[b-0a3mdee95o] { color: var(--color-amber); }
    .text-mint[b-0a3mdee95o]  { color: var(--color-mint); }

    .desk-streak-row[b-0a3mdee95o] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .desk-streak-name[b-0a3mdee95o] { flex: 1; font-size: 12px; }

    .desk-streak-days[b-0a3mdee95o] {
        font-size: 12px;
        font-family: 'Roboto Mono', monospace;
    }

    .drift-row[b-0a3mdee95o] { margin-bottom: 8px; }

    .drift-labels[b-0a3mdee95o] {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        margin-bottom: 2px;
        color: var(--color-on-surface);
    }

    .drift-value[b-0a3mdee95o] { font-family: 'Roboto Mono', monospace; }

    .drift-bar-track[b-0a3mdee95o] {
        height: 4px;
        border-radius: 2px;
        background: #EEE;
        display: flex;
        overflow: hidden;
    }

    .drift-bar-fill[b-0a3mdee95o] { height: 100%; border-radius: 2px; }

    .drift-bar-excess[b-0a3mdee95o] {
        height: 100%;
        background: repeating-linear-gradient(
            45deg,
            #E89274 0 3px,
            rgba(232,146,116,.67) 3px 6px
        );
    }
}
/* /Pages/Login.razor.rz.scp.css */
.login-page[b-j7k3p22qgi] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 480px;
    margin: 0 auto;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    background: #FEF7FF;
}

/* ── Hero ── */
.login-hero[b-j7k3p22qgi] {
    position: relative;
    height: 280px;
    background: linear-gradient(160deg, #EADDFF, #F7F2FB);
    border-radius: 0 0 60px 60px;
    overflow: hidden;
    flex-shrink: 0;
}

.hero-dot[b-j7k3p22qgi] {
    position: absolute;
}

.hero-mark[b-j7k3p22qgi] {
    position: absolute;
    left: 50%;
    bottom: 38px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.hero-icon[b-j7k3p22qgi] {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: #6750A4;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px #6750A455;
}

.hero-app-name[b-j7k3p22qgi] {
    font-size: 20px;
    font-weight: 600;
    color: #1D1B20;
    letter-spacing: -0.3px;
}

/* ── Card ── */
.login-card[b-j7k3p22qgi] {
    padding: 28px 24px 24px;
    flex: 1;
}

.login-title[b-j7k3p22qgi] {
    font-size: 26px;
    font-weight: 700;
    color: #1D1B20;
    letter-spacing: -0.4px;
}

.login-subtitle[b-j7k3p22qgi] {
    font-size: 13px;
    color: #49454F;
    margin-top: 4px;
    margin-bottom: 22px;
}

/* ── Fields ── */
.field-wrap[b-j7k3p22qgi] {
    margin-bottom: 14px;
}

.pwd-wrap[b-j7k3p22qgi] {
    position: relative;
}

.pwd-toggle[b-j7k3p22qgi] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6750A4;
    letter-spacing: 0.5px;
    padding: 6px 4px;
    z-index: 1;
}

/* Syncfusion TextBox — widen right padding for password toggle */
.pwd-wrap[b-j7k3p22qgi]  .e-input-group input.e-input,
.pwd-wrap[b-j7k3p22qgi]  input.e-input {
    padding-right: 56px !important;
}

/* ── Submit button ── */
.login-btn[b-j7k3p22qgi] {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    border: none;
    background: #1D1B20;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.2px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 8px 20px #1D1B2030;
    margin-top: 8px;
    display: grid;
    place-items: center;
    font-family: inherit;
}

.login-btn:disabled[b-j7k3p22qgi] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Spinner ── */
.btn-spinner[b-j7k3p22qgi] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    animation: lspin-b-j7k3p22qgi 0.8s linear infinite;
}

@keyframes lspin-b-j7k3p22qgi {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/RefillInbox.razor.rz.scp.css */
/* ── Root ── */

.ri-root[b-xjmemoakv1] {
    background: #FEF7FF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: var(--color-on-surface);
}

.ri-loading[b-xjmemoakv1],
.ri-error[b-xjmemoakv1] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── App bar ── */

.ri-appbar[b-xjmemoakv1] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 4px 16px 4px 4px;
    background: #FEF7FF;
}

.ri-icon-btn[b-xjmemoakv1] {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--color-on-surface);
    flex-shrink: 0;
}

.ri-icon-btn:hover[b-xjmemoakv1] {
    background: rgba(0, 0, 0, .04);
}

.ri-appbar-title[b-xjmemoakv1] {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-on-surface);
}

/* ── Body ── */

.ri-body[b-xjmemoakv1] {
    padding: 0 16px 100px;
}

/* ── Hero ── */

.ri-hero[b-xjmemoakv1] {
    border-radius: 24px;
    padding: 20px;
    color: #fff;
}

.ri-hero-urgent[b-xjmemoakv1] {
    background: linear-gradient(135deg, #E89274, rgba(232, 146, 116, .8));
    box-shadow: 0 12px 30px rgba(232, 146, 116, .25);
}

.ri-hero-clear[b-xjmemoakv1] {
    background: linear-gradient(135deg, #4FBFA1, rgba(79, 191, 161, .8));
    box-shadow: 0 12px 30px rgba(79, 191, 161, .25);
}

.ri-hero-eyebrow[b-xjmemoakv1] {
    font-size: 11px;
    opacity: .85;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.ri-hero-headline[b-xjmemoakv1] {
    font-size: 24px;
    font-weight: 400;
    margin-top: 6px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.ri-hero-sub[b-xjmemoakv1] {
    font-size: 13px;
    opacity: .9;
    margin-top: 6px;
}

/* ── Group ── */

.ri-group[b-xjmemoakv1] {
    margin-top: 22px;
}

.ri-group-hd[b-xjmemoakv1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 4px;
    margin-bottom: 10px;
}

.ri-group-title-row[b-xjmemoakv1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ri-group-dot[b-xjmemoakv1] {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ri-group-title[b-xjmemoakv1] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
}

.ri-group-sub[b-xjmemoakv1] {
    font-size: 11px;
    color: var(--color-on-surface-variant);
}

.ri-group-rows[b-xjmemoakv1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Row ── */

.ri-row[b-xjmemoakv1] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.ri-row:hover[b-xjmemoakv1] {
    background: #fafafa;
}

.ri-row-main[b-xjmemoakv1] {
    min-width: 0;
}

.ri-row-name-line[b-xjmemoakv1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ri-stripe[b-xjmemoakv1] {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ri-row-name[b-xjmemoakv1] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ri-row-dose[b-xjmemoakv1] {
    font-size: 11px;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
}

/* ── Stock bar ── */

.ri-bar-track[b-xjmemoakv1] {
    height: 8px;
    border-radius: 4px;
    background: rgba(202, 196, 208, .33);
    overflow: hidden;
}

.ri-bar-fill[b-xjmemoakv1] {
    height: 100%;
    border-radius: 4px;
    transition: width .4s ease;
}

/* ── Row meta ── */

.ri-row-meta[b-xjmemoakv1] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 11px;
    color: var(--color-on-surface-variant);
    font-family: "Roboto Mono", ui-monospace, monospace;
}

.ri-days-left[b-xjmemoakv1] {
    font-weight: 600;
}

.ri-d[b-xjmemoakv1] {
    font-size: .85em;
}

/* ── Chevron ── */

.ri-chevron[b-xjmemoakv1] {
    color: var(--color-outline-variant);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Empty ── */

.ri-empty[b-xjmemoakv1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 48px 16px;
    color: var(--color-on-surface-variant);
}

.ri-empty-title[b-xjmemoakv1] {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.ri-empty-sub[b-xjmemoakv1] {
    font-size: 13px;
}

/* ── Desktop overrides ── */

@media (min-width: 768px) {
    .ri-appbar[b-xjmemoakv1] { display: none; }

    .ri-body[b-xjmemoakv1] { padding: 0 0 40px; }

    .ri-body[b-xjmemoakv1]::before {
        content: "Refill alerts";
        display: block;
        font-size: 30px;
        font-weight: 600;
        letter-spacing: -0.5px;
        color: #1B1B1F;
        margin-bottom: 20px;
    }
}
/* /Pages/Today.razor.rz.scp.css */
.today-root[b-v4objrd5xd] {
    background: #FEF7FF;
    min-height: 100%;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: #1D1B20;
    padding-bottom: 24px;
}

.today-loading[b-v4objrd5xd],
.today-error[b-v4objrd5xd] {
    padding: 24px;
    color: #49454F;
    font-size: 14px;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.today-header[b-v4objrd5xd] {
    padding: 12px 20px 18px;
}

.today-header-row[b-v4objrd5xd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.today-datestamp[b-v4objrd5xd] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #49454F;
}

.today-time[b-v4objrd5xd] {
    font-size: 12px;
    font-family: "Roboto Mono", ui-monospace, monospace;
    color: #49454F;
}

.today-greeting[b-v4objrd5xd] {
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.today-count[b-v4objrd5xd] {
    color: #6750A4;
    font-weight: 500;
}

.today-count-suffix[b-v4objrd5xd] {
    color: #49454F;
}

/* ── Day timeline ribbon ─────────────────────────────────────────────── */

.today-timeline[b-v4objrd5xd] {
    padding: 0 20px 4px;
}

.timeline-track[b-v4objrd5xd] {
    position: relative;
    height: 38px;
}

.timeline-bg[b-v4objrd5xd] {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, #E1A954 0%, #6750A4 50%, #4A5C8A 100%);
    opacity: 0.18;
}

.timeline-fill[b-v4objrd5xd] {
    position: absolute;
    left: 0;
    top: 18px;
    height: 2px;
    background: linear-gradient(90deg, #E1A954, #6750A4, #4A5C8A);
    border-radius: 1px;
}

.timeline-marker[b-v4objrd5xd] {
    position: absolute;
    top: 12px;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid;
}

.tl-morning[b-v4objrd5xd]   { border-color: #E1A954; }
.tl-afternoon[b-v4objrd5xd] { border-color: #6750A4; }
.tl-evening[b-v4objrd5xd]   { border-color: #4A5C8A; }

.timeline-now[b-v4objrd5xd] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 38px;
    background: #1D1B20;
}

.timeline-now-label[b-v4objrd5xd] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #1D1B20;
    color: #fff;
    font-size: 9px;
    font-family: "Roboto Mono", monospace;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ── Treatment rows ─────────────────────────────────────────────────── */

.today-rows[b-v4objrd5xd] {
    padding: 20px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.treatment-card[b-v4objrd5xd] {
    background: #fff;
    border-radius: 20px;
    padding: 14px 16px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(103,80,164,.06);
    border: 1px solid rgba(202,196,208,.33);
    transition: opacity .3s;
}

.card-all-taken[b-v4objrd5xd] {
    opacity: 0.85;
}

/* ── Card header ─────────────────────────────────────────────────────── */

.card-header[b-v4objrd5xd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}

.card-icon-wrap[b-v4objrd5xd] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.card-info[b-v4objrd5xd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.card-name[b-v4objrd5xd] {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.1px;
    color: #1D1B20;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-dose[b-v4objrd5xd] {
    font-size: 12px;
    color: #49454F;
}

.refill-badge[b-v4objrd5xd] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(232,146,116,.16);
    color: #E89274;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Dose orbs ───────────────────────────────────────────────────────── */

.orbs-row[b-v4objrd5xd] {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 0 6px;
}

.orbs-connector[b-v4objrd5xd] {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 28px;
    height: 2px;
    background: rgba(202,196,208,.45);
    z-index: 0;
}

.orb-col[b-v4objrd5xd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* NA orb */
.orb-na[b-v4objrd5xd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    opacity: 0.4;
    border: 1.5px dashed #CAC4D0;
}

.orb-dash[b-v4objrd5xd] {
    font-size: 11px;
    font-family: "Roboto Mono", monospace;
    color: #CAC4D0;
}

/* Interactive orb */
.orb[b-v4objrd5xd] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: visible;
    background: transparent;
    transition: outline-offset .25s ease;
}

.orb:focus-visible[b-v4objrd5xd] {
    outline: 2px solid #6750A4;
    outline-offset: 4px;
}

.orb-ring[b-v4objrd5xd] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid;
    transition: background .35s cubic-bezier(.2,.7,.2,1), border-color .35s;
}

.orb-sheen[b-v4objrd5xd] {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 55%);
    pointer-events: none;
    z-index: 2;
}

.orb-icon[b-v4objrd5xd] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 3;
}

.orb-pulse[b-v4objrd5xd] {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid;
    opacity: 0.6;
    animation: pulseRing-b-v4objrd5xd 1.6s ease-out infinite;
    z-index: 0;
    pointer-events: none;
}

.orb-label[b-v4objrd5xd] {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
}

@keyframes pulseRing-b-v4objrd5xd {
    0%   { transform: scale(.95); opacity: .6; }
    70%  { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}
/* /Pages/TreatmentContainers.razor.rz.scp.css */
/* ── Root ── */
.tc-root[b-b92szfz5id] {
    background: #FEF7FF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: var(--color-on-surface);
}
.tc-loading[b-b92szfz5id], .tc-error[b-b92szfz5id] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── App bar ── */
.tc-appbar[b-b92szfz5id] {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 4px;
    height: 56px; padding: 4px 8px 4px 4px;
    background: #FEF7FF;
}
.tc-icon-btn[b-b92szfz5id] {
    width: 44px; height: 44px; border-radius: 22px;
    border: none; background: transparent;
    display: grid; place-items: center;
    cursor: pointer; color: var(--color-on-surface); flex-shrink: 0;
}
.tc-icon-btn:hover[b-b92szfz5id] { background: rgba(0,0,0,.04); }
.tc-title[b-b92szfz5id] { flex: 1; font-size: 16px; font-weight: 500; }

/* ── Body ── */
.tc-body[b-b92szfz5id] { padding: 0 18px 100px; }

/* ── Treatment card ── */
.tc-treat-card[b-b92szfz5id] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 14px;
    border: 1px solid transparent; margin-bottom: 22px;
}
.tc-treat-icon[b-b92szfz5id] {
    width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center; flex-shrink: 0;
}
.tc-treat-name[b-b92szfz5id] { font-size: 15px; font-weight: 600; }
.tc-treat-info[b-b92szfz5id] { flex: 1; min-width: 0; }
.tc-treat-sub[b-b92szfz5id]  { font-size: 11px; color: var(--color-on-surface-variant); margin-top: 1px; }

/* ── Section ── */
.tc-section[b-b92szfz5id] { margin-bottom: 8px; }
.tc-section-hd[b-b92szfz5id] {
    display: flex; align-items: baseline;
    justify-content: space-between; padding: 0 4px; margin-bottom: 10px;
}
.tc-section-left[b-b92szfz5id] { display: flex; align-items: baseline; gap: 6px; }
.tc-section-label[b-b92szfz5id] {
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
}
.tc-section-count[b-b92szfz5id] {
    font-size: 11px; color: var(--color-on-surface-variant);
    font-family: "Roboto Mono", ui-monospace, monospace;
}
.tc-add-btn[b-b92szfz5id] {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600; color: var(--color-primary);
    background: transparent; border: none; cursor: pointer;
    padding: 4px 6px; font-family: inherit;
}

/* ── Mini-stats ── */
.tc-mini-stats[b-b92szfz5id] { display: flex; gap: 6px; margin-bottom: 10px; }
.tc-mini-stat[b-b92szfz5id] {
    flex: 1; background: #fff;
    border: 1px solid rgba(202,196,208,.55);
    border-radius: 10px; padding: 6px 10px;
}
.tc-ms-label[b-b92szfz5id] {
    font-size: 9px; letter-spacing: 0.7px; font-weight: 700;
    color: var(--color-on-surface-variant); text-transform: uppercase;
}
.tc-ms-value[b-b92szfz5id] {
    font-size: 17px; font-weight: 600;
    font-family: "Roboto Mono", ui-monospace, monospace;
    line-height: 1.1; margin-top: 1px;
}

/* ── Container list ── */
.tc-list[b-b92szfz5id] { display: flex; flex-direction: column; gap: 8px; }
.tc-row[b-b92szfz5id] {
    background: #fff; border-radius: 16px;
    border: 1px solid rgba(202,196,208,.55);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; position: relative;
}

/* ── Bottle viz ── */
.tc-bottle[b-b92szfz5id] { position: relative; width: 40px; height: 54px; flex-shrink: 0; }
.tc-bottle-cap[b-b92szfz5id] {
    position: absolute; top: 0;
    left: 25%; right: 25%; height: 14%;
    background: var(--color-on-surface);
    border-radius: 3px 3px 0 0;
}
.tc-bottle-body[b-b92szfz5id] {
    position: absolute; top: 13%; left: 2px; right: 2px; bottom: 0;
    border: 1.5px solid var(--color-on-surface);
    border-top: none;
    background: #fff;
    border-radius: 0 0 7px 7px;
    overflow: hidden;
}
.tc-row .tc-bottle-body[b-b92szfz5id] { border-color: var(--color-outline-variant); }
.tc-bottle-fill[b-b92szfz5id] {
    position: absolute; bottom: 0; left: 0; right: 0;
    transition: height .4s ease;
}
.tc-bottle-check[b-b92szfz5id] {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(79,191,161,.12);
}
.tc-bottle-hatch[b-b92szfz5id] {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        45deg,
        rgba(202,196,208,.3) 0 5px,
        transparent 5px 10px);
}

/* ── Row info ── */
.tc-row-info[b-b92szfz5id] { flex: 1; min-width: 0; }
.tc-row-primary-line[b-b92szfz5id] { display: flex; align-items: center; gap: 8px; }
.tc-row-primary[b-b92szfz5id] { font-size: 15px; font-weight: 600; color: var(--color-on-surface); }
.tc-row-secondary[b-b92szfz5id] { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 3px; }

/* ── Status badges ── */
.tc-badge[b-b92szfz5id] {
    padding: 2px 8px; border-radius: 999px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.6px;
    white-space: nowrap;
}
.tc-badge-active[b-b92szfz5id]   { background: #EADDFF; color: #21005D; }
.tc-badge-finished[b-b92szfz5id] { background: rgba(79,191,161,.16); color: #4FBFA1; }
.tc-badge-unopened[b-b92szfz5id] { background: #F3EDF7; color: #49454F; }

/* ── More menu ── */
.tc-more-wrap[b-b92szfz5id] { position: relative; flex-shrink: 0; }
.tc-more-btn[b-b92szfz5id] {
    width: 32px; height: 32px; border-radius: 16px;
    border: none; background: transparent; cursor: pointer;
    display: grid; place-items: center;
    color: var(--color-on-surface-variant);
}
.tc-more-btn:hover[b-b92szfz5id] { background: rgba(0,0,0,.04); }
.tc-menu[b-b92szfz5id] {
    position: absolute; right: 0; top: 36px; z-index: 20;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,.14);
    min-width: 120px; overflow: hidden;
    border: 1px solid rgba(202,196,208,.6);
}
.tc-menu-item[b-b92szfz5id] {
    display: block; width: 100%;
    padding: 12px 16px; border: none; background: transparent;
    text-align: left; font-size: 14px; cursor: pointer;
    color: var(--color-on-surface); font-family: inherit;
}
.tc-menu-item:hover[b-b92szfz5id] { background: #F3EDF7; }
.tc-menu-item-danger[b-b92szfz5id] { color: var(--color-coral); }

/* ── Empty state ── */
.tc-empty[b-b92szfz5id] {
    background: #fff; border-radius: 16px;
    border: 1px dashed var(--color-outline-variant);
    padding: 28px 16px; text-align: center;
}
.tc-empty-icon[b-b92szfz5id] {
    width: 48px; height: 48px; border-radius: 24px;
    margin: 0 auto 8px;
    background: #F3EDF7;
    display: grid; place-items: center;
}
.tc-empty-text[b-b92szfz5id] { font-size: 13px; color: var(--color-on-surface-variant); }
.tc-empty-add-btn[b-b92szfz5id] {
    margin-top: 10px;
    background: #EADDFF; color: #21005D;
    font-size: 12px; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; border: none;
    cursor: pointer; font-family: inherit;
}

/* ── Scrim + sheet ── */
.tc-scrim[b-b92szfz5id] {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(28,27,31,.45);
    backdrop-filter: blur(2px);
}
.tc-sheet[b-b92szfz5id] {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    background: #FEF7FF;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
    animation: tcSheetUp-b-b92szfz5id .25s ease-out;
    display: flex; flex-direction: column;
    max-height: 92vh;
}
.tc-sheet-tall[b-b92szfz5id] { max-height: 92vh; }
@keyframes tcSheetUp-b-b92szfz5id {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.tc-sheet-handle[b-b92szfz5id] {
    width: 32px; height: 4px; border-radius: 2px;
    background: var(--color-outline-variant);
    margin: 12px auto 4px; flex-shrink: 0;
}

/* ── Sheet content ── */
.tc-sheet-inner[b-b92szfz5id] { padding: 8px 20px 24px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tc-sheet-scroll[b-b92szfz5id] { flex: 1; overflow-y: auto; padding: 4px 0 16px; display: flex; flex-direction: column; gap: 18px; }
.tc-sheet-title-row[b-b92szfz5id] {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.tc-sheet-icon[b-b92szfz5id] {
    width: 44px; height: 44px; border-radius: 14px;
    display: grid; place-items: center; flex-shrink: 0;
}
.tc-sheet-title[b-b92szfz5id]    { font-size: 18px; font-weight: 600; letter-spacing: -.2px; }
.tc-sheet-subtitle[b-b92szfz5id] { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 1px; }

/* ── Sheet fields ── */
.tc-field-label[b-b92szfz5id] {
    font-size: 11px; font-weight: 700; letter-spacing: 1.1px;
    color: var(--color-on-surface-variant); text-transform: uppercase;
    display: block; margin-bottom: 6px;
}
.tc-field-hint[b-b92szfz5id] { font-size: 11px; color: var(--color-on-surface-variant); margin-top: 4px; padding-left: 2px; }
.tc-two-col[b-b92szfz5id] { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }

/* Stepper */
.tc-stepper[b-b92szfz5id] {
    display: flex; align-items: stretch; height: 56px;
    background: #fff; border: 1.5px solid var(--color-outline-variant);
    border-radius: 12px; overflow: hidden;
}
.tc-stepper-btn[b-b92szfz5id] {
    width: 56px; border: none; background: transparent;
    font-size: 24px; font-weight: 300; color: var(--color-primary);
    cursor: pointer; flex-shrink: 0;
}
.tc-stepper-btn:hover[b-b92szfz5id] { background: #F3EDF7; }
.tc-stepper-input[b-b92szfz5id] {
    flex: 1; border: none; border-left: 1px solid rgba(202,196,208,.55);
    border-right: 1px solid rgba(202,196,208,.55);
    text-align: center; font-size: 22px; font-weight: 600;
    font-family: "Roboto Mono", ui-monospace, monospace;
    outline: none; background: transparent; color: var(--color-on-surface);
}

/* Unit segment */
.tc-unit-toggle[b-b92szfz5id] {
    display: flex; height: 56px;
    background: #F3EDF7; border-radius: 12px; padding: 4px;
}
.tc-unit-btn[b-b92szfz5id] {
    flex: 1; border: none; border-radius: 9px;
    background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: var(--color-on-surface-variant);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .15s;
}
.tc-unit-btn-active[b-b92szfz5id] {
    background: #fff; color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Date field */
.tc-date-input[b-b92szfz5id] {
    width: 100%; height: 52px;
    border: 1.5px solid var(--color-outline-variant);
    border-radius: 12px; padding: 0 14px;
    font-size: 14px; font-family: "Roboto Mono", ui-monospace, monospace;
    color: var(--color-on-surface); background: #fff;
    box-sizing: border-box; cursor: pointer; outline: none;
}
.tc-date-input:disabled[b-b92szfz5id] { background: #F3EDF7; opacity: .55; cursor: default; }

/* Preview card */
.tc-preview-card[b-b92szfz5id] {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 14px;
    background: #F3EDF7;
}
.tc-preview-text[b-b92szfz5id]       { flex: 1; min-width: 0; }
.tc-preview-title[b-b92szfz5id]      { font-size: 14px; font-weight: 600; }
.tc-preview-sub[b-b92szfz5id]        { font-size: 11px; color: var(--color-on-surface-variant); margin-top: 2px; line-height: 1.4; }

/* Lifecycle */
.tc-lifecycle-label[b-b92szfz5id] {
    font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
    color: var(--color-on-surface-variant); padding-left: 4px; margin-top: 4px;
}
.tc-lifecycle-sf[b-b92szfz5id] {
    background: #fff; border-radius: 18px;
    border: 1px solid rgba(202,196,208,.55);
    padding: 14px 8px;
}
.tc-tl-event-label[b-b92szfz5id] { font-size: 13px; font-weight: 600; color: var(--color-on-surface); }
.tc-tl-event-date[b-b92szfz5id]  { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 2px; font-family: "Roboto Mono", monospace; }
.tc-tl-event-hint[b-b92szfz5id]  { font-size: 11px; color: var(--color-on-surface-variant); margin-top: 2px; font-style: italic; }

/* Sheet footer */
.tc-sheet-footer[b-b92szfz5id] {
    display: flex; gap: 10px; padding-top: 12px; flex-shrink: 0;
    border-top: 1px solid rgba(202,196,208,.55);
}
.tc-delete-btn[b-b92szfz5id] {
    width: 48px; height: 48px; border-radius: 12px; border: none;
    background: var(--color-coral-dim); color: var(--color-coral);
    cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
    transition: background .15s;
}
.tc-delete-btn-confirm[b-b92szfz5id] { background: var(--color-coral); color: #fff; }
.tc-cancel-btn[b-b92szfz5id] {
    flex: 1; height: 48px; border-radius: 12px; border: none;
    background: #F3EDF7; color: var(--color-on-surface);
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.tc-save-btn[b-b92szfz5id] {
    flex: 1.2; height: 48px; border-radius: 12px; border: none;
    background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit; letter-spacing: .3px;
}
.tc-add-submit-btn[b-b92szfz5id] {
    flex: 1.2; height: 48px; border-radius: 12px; border: none;
    background: var(--color-primary); color: #fff;
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: inherit; letter-spacing: .3px;
}
.tc-add-cancel-btn[b-b92szfz5id] {
    flex: 1; height: 48px; border-radius: 12px; border: none;
    background: transparent; color: var(--color-on-surface);
    font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}
/* /Pages/TreatmentDetail.razor.rz.scp.css */
/* ── Root ── */

.td-root[b-52i475raae] {
    background: #FEF7FF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: var(--color-on-surface);
}

.td-loading[b-52i475raae],
.td-error[b-52i475raae] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── App bar ── */

.td-appbar[b-52i475raae] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 4px 8px 4px 4px;
    background: #FEF7FF;
}

.td-icon-btn[b-52i475raae] {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--color-on-surface);
    flex-shrink: 0;
}

.td-icon-btn:hover[b-52i475raae] {
    background: rgba(0, 0, 0, .04);
}

.td-appbar-title[b-52i475raae] {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-on-surface);
}

/* ── Body ── */

.td-body[b-52i475raae] {
    padding: 0 18px 100px;
}

/* ── Hero ── */

.td-hero[b-52i475raae] {
    border-radius: 24px;
    padding: 18px;
    color: #fff;
}

.td-hero-top[b-52i475raae] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-hero-icon[b-52i475raae] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.td-hero-info[b-52i475raae] {
    flex: 1;
    min-width: 0;
}

.td-hero-name[b-52i475raae] {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-hero-sub[b-52i475raae] {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 1px;
}

.td-hero-stats[b-52i475raae] {
    display: flex;
    gap: 14px;
    margin-top: 16px;
}

.td-stat-label[b-52i475raae] {
    font-size: 9px;
    opacity: 0.75;
    letter-spacing: 1px;
    font-weight: 600;
}

.td-stat-value[b-52i475raae] {
    font-size: 22px;
    font-weight: 400;
    font-family: "Roboto Mono", ui-monospace, monospace;
    margin-top: 2px;
}

/* ── Section ── */

.td-section[b-52i475raae] {
    margin-top: 22px;
}

.td-section-hd[b-52i475raae] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding: 0 4px;
}

.td-section-label[b-52i475raae] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
}

.td-section-sub[b-52i475raae] {
    font-size: 11px;
    color: var(--color-on-surface-variant);
}

.td-section-warn[b-52i475raae] {
    color: var(--color-coral);
}

/* ── Timeline card ── */

.td-timeline-card[b-52i475raae] {
    background: #fff;
    border-radius: 18px;
    padding: 18px 16px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.td-tl-dates[b-52i475raae] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-on-surface-variant);
    font-family: "Roboto Mono", monospace;
    margin-bottom: 12px;
}

.td-ribbon-area[b-52i475raae] {
    position: relative;
    height: 56px;
    margin-bottom: 4px;
}

.td-tl-legend[b-52i475raae] {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    font-size: 11px;
    color: var(--color-on-surface-variant);
    flex-wrap: wrap;
}

.td-tl-leg-item[b-52i475raae] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.td-tl-leg-swatch[b-52i475raae] {
    width: 16px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Day grid ── */

.td-day-grid-card[b-52i475raae] {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.td-day-grid[b-52i475raae] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.td-day-cell[b-52i475raae] {
    aspect-ratio: 1;
    border-radius: 8px;
    background: #F3EDF7;
    border: 1px solid rgba(202, 196, 208, .2);
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: opacity .15s;
    box-sizing: border-box;
}

.td-day-cell:hover[b-52i475raae] {
    opacity: 0.8;
}

.td-day-today[b-52i475raae] {
    border-width: 1.5px;
}

.td-day-label[b-52i475raae] {
    font-size: 9px;
    color: var(--color-on-surface-variant);
    font-family: "Roboto Mono", monospace;
    line-height: 1;
}

.td-day-dots[b-52i475raae] {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.td-dot[b-52i475raae] {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Stock card ── */

.td-stock-card[b-52i475raae] {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
}

.td-stock-low[b-52i475raae] {
    border-color: #E89274;
}

/* Bottle */

.td-bottle[b-52i475raae] {
    position: relative;
    width: 56px;
    height: 80px;
    flex-shrink: 0;
}

.td-bottle-cap[b-52i475raae] {
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 14px;
    border: 2px solid var(--color-on-surface);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.td-bottle-body[b-52i475raae] {
    position: absolute;
    inset: 12px 6px 0 6px;
    border: 2px solid var(--color-on-surface);
    border-radius: 6px 6px 12px 12px;
    background: #fff;
    overflow: hidden;
}

.td-bottle-fill[b-52i475raae] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transition: height .4s ease;
}

.td-bottle-count[b-52i475raae] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    font-family: "Roboto Mono", monospace;
    mix-blend-mode: difference;
    text-align: center;
}

.td-stock-info[b-52i475raae] {
    min-width: 0;
}

.td-stock-primary[b-52i475raae] {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.td-stock-sub[b-52i475raae] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    margin-top: 2px;
}

.td-refill-btn[b-52i475raae] {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: opacity .15s;
}

.td-refill-btn:hover[b-52i475raae] {
    opacity: 0.88;
}

.td-open-btn[b-52i475raae] {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    background: var(--color-primary);
    color: #fff;
    transition: opacity .15s;
}

.td-open-btn:hover[b-52i475raae] {
    opacity: 0.88;
}

/* ── Notes card ── */

.td-notes-card[b-52i475raae] {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.td-notes-text[b-52i475raae] {
    font-size: 13px;
    color: var(--color-on-surface);
    line-height: 1.5;
    cursor: pointer;
    min-height: 40px;
}

.td-section-manage[b-52i475raae] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.td-section-manage:hover[b-52i475raae] {
    text-decoration: underline;
}

/* /Pages/TreatmentForm.razor.rz.scp.css */
/* ── Root ── */
.tf-root[b-n19dk7uc87] {
    background: #FEF7FF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: #1D1B20;
    padding-bottom: 100px;
}

.tf-loading[b-n19dk7uc87], .tf-error[b-n19dk7uc87] {
    padding: 32px;
    text-align: center;
    color: #49454F;
}

/* ── App bar ── */
.tf-appbar[b-n19dk7uc87] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 64px;
    padding: 0 8px 0 4px;
    background: #FEF7FF;
    border-bottom: 1px solid rgba(202,196,208,.33);
}

.tf-icon-btn[b-n19dk7uc87] {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #1D1B20;
}

.tf-appbar-title[b-n19dk7uc87] {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
}

.tf-save-pill[b-n19dk7uc87] {
    padding: 0 18px;
    height: 36px;
    border-radius: 18px;
    border: none;
    background: #6750A4;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
}

.tf-save-pill--disabled[b-n19dk7uc87] {
    background: #F3EDF7;
    color: #49454F;
    cursor: not-allowed;
}

/* ── Body ── */
.tf-body[b-n19dk7uc87] {
    padding: 20px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Preview chip ── */
.tf-preview-chip[b-n19dk7uc87] {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tf-preview-icon[b-n19dk7uc87] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tf-preview-text[b-n19dk7uc87] { flex: 1; min-width: 0; }

.tf-preview-name[b-n19dk7uc87] {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tf-preview-sub[b-n19dk7uc87] {
    font-size: 12px;
    color: #49454F;
    margin-top: 2px;
}

/* ── Hero ── */
.tf-hero[b-n19dk7uc87] {
    border-radius: 24px;
    padding: 18px;
    color: #fff;
}

.tf-hero-top[b-n19dk7uc87] { display: flex; align-items: center; gap: 10px; }

.tf-hero-icon[b-n19dk7uc87] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tf-hero-name[b-n19dk7uc87] { font-size: 20px; font-weight: 500; letter-spacing: -.2px; }
.tf-hero-sub[b-n19dk7uc87]  { font-size: 12px; opacity: .85; margin-top: 1px; }

.tf-hero-stats[b-n19dk7uc87] { display: flex; gap: 14px; margin-top: 16px; }

.tf-stat-label[b-n19dk7uc87] {
    font-size: 9px;
    opacity: .75;
    letter-spacing: 1px;
    font-weight: 600;
}

.tf-stat-val[b-n19dk7uc87] {
    font-size: 22px;
    font-weight: 400;
    font-family: "Roboto Mono", ui-monospace, monospace;
    margin-top: 2px;
}

/* ── Drift banner ── */
.tf-drift-banner[b-n19dk7uc87] {
    padding: 10px 14px;
    background: rgba(232,146,116,.16);
    border: 1px solid rgba(232,146,116,.4);
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: #1D1B20;
}

/* ── Section label ── */
.tf-section-label-row[b-n19dk7uc87] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #49454F;
    text-transform: uppercase;
    padding-left: 4px;
}

/* ── Fields container (add mode: gap only; edit mode: + tf-card) ── */
.tf-fields[b-n19dk7uc87] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Card (wraps shared fields in edit mode) ── */
.tf-card[b-n19dk7uc87] {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(202,196,208,.55);
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(103,80,164,.06);
}

/* ── Field ── */
.tf-field[b-n19dk7uc87] { display: flex; flex-direction: column; gap: 6px; }

.tf-label[b-n19dk7uc87] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.1px;
    color: #49454F;
    text-transform: uppercase;
}

.tf-label-row[b-n19dk7uc87] { display: flex; align-items: baseline; justify-content: space-between; }

.tf-optional[b-n19dk7uc87] { font-size: 10px; color: #49454F; font-style: italic; }

.tf-hint[b-n19dk7uc87] { font-size: 11px; color: #E89274; padding-left: 2px; }

.tf-hint-inline[b-n19dk7uc87] {
    font-size: 10px;
    color: #49454F;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

/* ── Text input ── */
.tf-input[b-n19dk7uc87] {
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid #CAC4D0;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1D1B20;
    background: #fff;
    outline: none;
    transition: border-color .15s;
    width: 100%;
    box-sizing: border-box;
}

.tf-input:focus[b-n19dk7uc87] { border-color: #6750A4; }

/* ── Dose row ── */
.tf-dose-row[b-n19dk7uc87] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}

/* ── Segment control ── */
.tf-segment[b-n19dk7uc87] {
    display: flex;
    background: #fff;
    border: 1.5px solid #CAC4D0;
    border-radius: 10px;
    padding: 3px;
    height: 48px;
}

.tf-seg-btn[b-n19dk7uc87] {
    flex: 1;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #49454F;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}

.tf-seg-btn--active[b-n19dk7uc87] { background: #6750A4; color: #fff; }

/* ── Slot picker ── */
.tf-slots[b-n19dk7uc87] { display: flex; gap: 8px; }

.tf-slot-btn[b-n19dk7uc87] {
    flex: 1;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1.5px solid #CAC4D0;
    background: #fff;
    color: #1D1B20;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color .15s, background .15s, color .15s;
}

.tf-slot-btn--morning[b-n19dk7uc87]   { border-color: #E1A954; background: rgba(225,169,84,.09);  color: #E1A954; }
.tf-slot-btn--afternoon[b-n19dk7uc87] { border-color: #6750A4; background: rgba(103,80,164,.09); color: #6750A4; }
.tf-slot-btn--evening[b-n19dk7uc87]   { border-color: #4A5C8A; background: rgba(74,92,138,.09);  color: #4A5C8A; }

.tf-slot-icon-wrap[b-n19dk7uc87] {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #F3EDF7;
    display: grid;
    place-items: center;
    color: #49454F;
}

.tf-slot-icon-wrap--active[b-n19dk7uc87] { color: #fff; }
.tf-slot-icon-morning[b-n19dk7uc87]   { background: #E1A954; }
.tf-slot-icon-afternoon[b-n19dk7uc87] { background: #6750A4; }
.tf-slot-icon-evening[b-n19dk7uc87]   { background: #4A5C8A; }

.tf-slot-name[b-n19dk7uc87] { font-size: 11px; font-weight: 600; }
.tf-slot-time[b-n19dk7uc87] { font-size: 9px; font-family: "Roboto Mono", ui-monospace, monospace; color: #49454F; }

/* ── Stepper ── */
.tf-stepper[b-n19dk7uc87] {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #CAC4D0;
    border-radius: 10px;
    height: 48px;
    overflow: hidden;
}

.tf-stepper-btn[b-n19dk7uc87] {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #6750A4;
    cursor: pointer;
    flex-shrink: 0;
}

.tf-stepper-input[b-n19dk7uc87] {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    font-family: "Roboto Mono", ui-monospace, monospace;
    color: #1D1B20;
    border: none;
    border-left: 1px solid rgba(202,196,208,.55);
    border-right: 1px solid rgba(202,196,208,.55);
    height: 100%;
    background: transparent;
    outline: none;
    width: 0;
    min-width: 0;
    padding: 0 4px;
    -moz-appearance: textfield;
}

.tf-stepper-input[b-n19dk7uc87]::-webkit-inner-spin-button,
.tf-stepper-input[b-n19dk7uc87]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.tf-break-stepper[b-n19dk7uc87] { padding: 10px 16px 14px; border-top: 1px solid rgba(202,196,208,.33); }

/* ── Color picker ── */
.tf-colors[b-n19dk7uc87] { display: flex; gap: 10px; flex-wrap: wrap; }

.tf-color-swatch[b-n19dk7uc87] {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 2.5px solid transparent;
    padding: 3px;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.tf-color-swatch--active[b-n19dk7uc87] { border-color: #1D1B20; }

.tf-color-dot[b-n19dk7uc87] { width: 100%; height: 100%; border-radius: 50%; }

/* ── Notes ── */
.tf-notes[b-n19dk7uc87] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    border: 1.5px solid #CAC4D0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: #1D1B20;
    outline: none;
}

.tf-notes:focus[b-n19dk7uc87] { border-color: #6750A4; }

/* ── Toggle card ── */
.tf-toggle-card[b-n19dk7uc87] {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(202,196,208,.55);
    overflow: hidden;
}

.tf-toggle-row[b-n19dk7uc87] { padding: 14px 16px; display: flex; align-items: center; gap: 12px; }

.tf-toggle-text[b-n19dk7uc87] { flex: 1; }
.tf-toggle-title[b-n19dk7uc87] { font-size: 14px; font-weight: 500; }
.tf-toggle-sub[b-n19dk7uc87]   { font-size: 12px; color: #49454F; margin-top: 1px; }

.tf-divider[b-n19dk7uc87] { height: 1px; background: rgba(202,196,208,.3); }

.tf-toggle[b-n19dk7uc87] {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    background: #CAC4D0;
    cursor: pointer;
    position: relative;
    transition: background .15s;
    flex-shrink: 0;
}

.tf-toggle--on[b-n19dk7uc87] { background: #6750A4; }

.tf-toggle-thumb[b-n19dk7uc87] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    transition: left .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.tf-toggle--on .tf-toggle-thumb[b-n19dk7uc87] { left: 22px; }

/* ── Stock section ── */
.tf-section[b-n19dk7uc87] { display: flex; flex-direction: column; gap: 10px; }

.tf-section-hd[b-n19dk7uc87] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-left: 4px;
}

.tf-section-label-sm[b-n19dk7uc87] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #49454F;
    text-transform: uppercase;
}

.tf-add-container-btn[b-n19dk7uc87] {
    font-size: 12px;
    font-weight: 600;
    color: #6750A4;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.tf-stock-card[b-n19dk7uc87] {
    background: #fff;
    border-radius: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(202,196,208,.55);
    display: flex;
    align-items: center;
    gap: 14px;
}

.tf-stock-low[b-n19dk7uc87] { border-color: rgba(232,146,116,.8); }

.tf-stock-icon[b-n19dk7uc87] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.tf-stock-primary[b-n19dk7uc87] { font-size: 16px; font-weight: 600; }
.tf-stock-sub[b-n19dk7uc87]     { font-size: 12px; color: #49454F; margin-top: 2px; }
.tf-stock-warn[b-n19dk7uc87]    { color: #E89274; font-weight: 600; }

/* ── Action row ── */
.tf-action-row[b-n19dk7uc87] { display: flex; gap: 10px; }

.tf-save-btn[b-n19dk7uc87] {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    border: none;
    background: #6750A4;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 16px rgba(103,80,164,.4);
    transition: opacity .15s;
}

.tf-save-btn--disabled[b-n19dk7uc87] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.tf-delete-btn[b-n19dk7uc87] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(232,146,116,.16);
    color: #E89274;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 600;
    transition: background .15s, color .15s, width .15s;
}

.tf-delete-btn--confirm[b-n19dk7uc87] {
    background: #E89274;
    color: #fff;
    width: auto;
    padding: 0 16px;
}

/* ── Inline error ── */
.tf-error-inline[b-n19dk7uc87] {
    background: rgba(232,146,116,.16);
    border: 1px solid rgba(232,146,116,.4);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #BA1A1A;
}
/* /Pages/TreatmentHistory.razor.rz.scp.css */
/* ── Root ── */

.th-root[b-f5hlt9oioq] {
    background: #FEF7FF;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Roboto, "Helvetica Neue", system-ui, sans-serif;
    color: var(--color-on-surface);
}

.th-loading[b-f5hlt9oioq],
.th-error[b-f5hlt9oioq] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── App bar ── */

.th-appbar[b-f5hlt9oioq] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 4px 16px 4px 4px;
    background: #FEF7FF;
}

.th-icon-btn[b-f5hlt9oioq] {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    border: none;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--color-on-surface);
    flex-shrink: 0;
}

.th-icon-btn:hover[b-f5hlt9oioq] {
    background: rgba(0, 0, 0, .04);
}

.th-appbar-name[b-f5hlt9oioq] {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.th-appbar-sub[b-f5hlt9oioq] {
    font-size: 11px;
    color: var(--color-on-surface-variant);
    margin-top: 1px;
}

/* ── Body ── */

.th-body[b-f5hlt9oioq] {
    padding: 0 16px 100px;
}

/* ── Streak hero ── */

.th-streak-card[b-f5hlt9oioq] {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
}

.th-flame-ring[b-f5hlt9oioq] {
    width: 84px;
    height: 84px;
    border-radius: 42px;
    background: linear-gradient(135deg, #E89274, #E1A954);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(232, 146, 116, .35);
    flex-shrink: 0;
}

.th-streak-label[b-f5hlt9oioq] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
}

.th-streak-value[b-f5hlt9oioq] {
    font-size: 40px;
    font-weight: 300;
    font-family: "Roboto Mono", ui-monospace, monospace;
    line-height: 1;
    margin-top: 4px;
    letter-spacing: -1px;
}

.th-streak-unit[b-f5hlt9oioq] {
    font-size: 18px;
    color: var(--color-on-surface-variant);
    margin-left: 4px;
    font-weight: 400;
}

.th-streak-sub[b-f5hlt9oioq] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    margin-top: 4px;
}

/* ── Stats row ── */

.th-stats-row[b-f5hlt9oioq] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.th-stat-card[b-f5hlt9oioq] {
    background: #fff;
    border-radius: 14px;
    padding: 12px 10px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.th-stat-label[b-f5hlt9oioq] {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
}

.th-stat-value[b-f5hlt9oioq] {
    font-size: 22px;
    font-weight: 400;
    font-family: "Roboto Mono", ui-monospace, monospace;
    margin-top: 2px;
    color: var(--color-on-surface);
}

/* ── Section ── */

.th-section[b-f5hlt9oioq] {
    margin-top: 22px;
}

.th-section-label[b-f5hlt9oioq] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
    padding: 0 4px;
    margin-bottom: 10px;
}

/* ── Calendar ── */

.th-cal-card[b-f5hlt9oioq] {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
}

.th-cal-grid[b-f5hlt9oioq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.th-dow[b-f5hlt9oioq] {
    font-size: 9px;
    font-weight: 600;
    color: var(--color-on-surface-variant);
    text-align: center;
    letter-spacing: 0.5px;
    padding-bottom: 2px;
}

.th-cal-cell[b-f5hlt9oioq] {
    aspect-ratio: 1;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.th-cal-day[b-f5hlt9oioq] {
    font-size: 9px;
    font-weight: 500;
    color: var(--color-on-surface);
    font-family: "Roboto Mono", monospace;
    line-height: 1;
}

.th-cal-dots[b-f5hlt9oioq] {
    display: flex;
    gap: 1px;
    justify-content: center;
}

.th-dot[b-f5hlt9oioq] {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Slot bars ── */

.th-slots-card[b-f5hlt9oioq] {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.th-slot-row[b-f5hlt9oioq] {
    display: grid;
    grid-template-columns: 90px 1fr 40px;
    gap: 12px;
    align-items: center;
}

.th-slot-name-col[b-f5hlt9oioq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.th-slot-name[b-f5hlt9oioq] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-on-surface);
}

.th-slot-bar-track[b-f5hlt9oioq] {
    height: 6px;
    border-radius: 3px;
    background: rgba(202, 196, 208, .4);
    overflow: hidden;
}

.th-slot-bar-fill[b-f5hlt9oioq] {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}

.th-slot-pct[b-f5hlt9oioq] {
    font-size: 12px;
    font-family: "Roboto Mono", monospace;
    color: var(--color-on-surface);
    text-align: right;
}
/* /Pages/Treatments.razor.rz.scp.css */
/* ── Loading / error ── */

.tl-loading[b-lqq9elry1y],
.tl-error[b-lqq9elry1y] {
    padding: 32px;
    text-align: center;
    color: var(--color-on-surface-variant);
}

/* ── Root ── */

.tl-root[b-lqq9elry1y] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 88px; /* room for sticky FAB */
    min-height: 100%;
}

/* ── Header ── */

.tl-header[b-lqq9elry1y] {
    margin-bottom: 16px;
}

.tl-date[b-lqq9elry1y] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.tl-title[b-lqq9elry1y] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-on-surface);
    margin: 0 0 4px;
    line-height: 1.1;
}

.tl-subtitle[b-lqq9elry1y] {
    font-size: 13px;
    color: var(--color-on-surface-variant);
}

/* ── Filter chips ── */

.tl-chips[b-lqq9elry1y] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tl-chips[b-lqq9elry1y]::-webkit-scrollbar { display: none; }

.tl-chip[b-lqq9elry1y] {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-outline-variant);
    background: #fff;
    color: var(--color-on-surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tl-chip-on[b-lqq9elry1y] {
    border-color: var(--color-primary);
    background: var(--color-primary-container);
    color: #21005D;
}

/* ── Groups ── */

.tl-groups[b-lqq9elry1y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tl-group[b-lqq9elry1y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tl-group-hd[b-lqq9elry1y] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px;
}

.tl-group-label[b-lqq9elry1y] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--color-on-surface-variant);
    text-transform: uppercase;
}

.tl-group-count[b-lqq9elry1y] {
    font-size: 11px;
    font-family: 'Roboto Mono', monospace;
    color: var(--color-on-surface-variant);
}

/* ── Treatment row ── */

.tl-row[b-lqq9elry1y] {
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(202, 196, 208, .33);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.tl-row-top[b-lqq9elry1y] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tl-stripe[b-lqq9elry1y] {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
    margin-right: 4px;
}

.tl-row-name[b-lqq9elry1y] {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-on-surface);
}

.tl-pill[b-lqq9elry1y] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tl-row-meta[b-lqq9elry1y] {
    font-size: 12px;
    color: var(--color-on-surface-variant);
    padding-left: 12px;
}

.tl-row-dates[b-lqq9elry1y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
}

.tl-date-range[b-lqq9elry1y] {
    font-size: 11px;
    font-family: 'Roboto Mono', monospace;
    color: var(--color-on-surface-variant);
}

.tl-refill-tag[b-lqq9elry1y] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-coral);
    letter-spacing: 0.3px;
    line-height: 1;
}

/* ── Adherence bar ── */

.tl-adherence-track[b-lqq9elry1y] {
    height: 4px;
    border-radius: 2px;
    background: #F3EDF7;
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    margin-left: 12px;
}

.tl-adherence-fill[b-lqq9elry1y] {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* ── Empty state ── */

.tl-empty[b-lqq9elry1y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 16px;
    gap: 8px;
}

.tl-empty-title[b-lqq9elry1y] {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-on-surface);
}

.tl-empty-sub[b-lqq9elry1y] {
    font-size: 13px;
    color: var(--color-on-surface-variant);
}

/* ── Bottom FAB ── */

.tl-fab-wrap[b-lqq9elry1y] {
    position: sticky;
    bottom: 20px;
    margin-top: auto;
    padding-top: 16px;
}

.tl-fab[b-lqq9elry1y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    border-radius: 18px;
    border: none;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(103, 80, 164, .33);
    transition: opacity 0.15s;
}

.tl-fab:hover[b-lqq9elry1y] { opacity: 0.9; }
.tl-fab:active[b-lqq9elry1y] { opacity: 0.8; }