@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: rgba(28, 28, 30, 0.8);
    --bg-card-solid: #1c1c1e;
    --bg-elevated: rgba(44, 44, 46, 0.6);
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.55);
    --text-muted: rgba(255, 255, 255, 0.3);
    --red: #ff3b30;
    --orange: #ff9f0a;
    --yellow: #ffd60a;
    --green: #30d158;
    --mint: #66d4cf;
    --teal: #40c8e0;
    --cyan: #64d2ff;
    --blue: #0a84ff;
    --indigo: #5e5ce6;
    --purple: #bf5af2;
    --pink: #ff375f;
    --glucose-in-range: var(--green);
    --glucose-low: var(--red);
    --glucose-high: var(--yellow);
    --glucose-very-high: var(--orange);
    --glucose-range-band: rgba(48, 209, 88, 0.08);
}

/* ============ Daily Rings ============ */
.rings-card {
    padding: 16px;
    margin-bottom: 12px;
}

.rings-top-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rings-svg-wrap {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}

.rings-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
    stroke-linecap: round;
}

.ring-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring-tir { stroke: var(--green); }
.ring-lows { stroke: var(--pink); }
.ring-avg { stroke: var(--cyan); }

.ring-color-tir { background: var(--green); }
.ring-color-lows { background: var(--pink); }
.ring-color-avg { background: var(--cyan); }

.rings-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.rings-date-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}

.rings-date-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.rings-sync-time {
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.4));
    font-weight: 400;
}

.rings-tip {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 6px;
}

.rings-tip-icon {
    color: var(--yellow);
    margin-right: 4px;
}

.rings-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rings-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rings-legend-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.rings-legend-value {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.rings-legend-goal {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-top: 1px;
}

.rings-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.rings-streak {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rings-streak-count {
    color: var(--green);
    font-weight: 800;
}

.rings-history {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rings-mini {
    width: 28px;
    height: 28px;
}

.rings-mini .ring-track {
    stroke-width: 3;
    stroke: rgba(255, 255, 255, 0.06);
}

.rings-mini .ring-progress {
    stroke-width: 3;
    transition: none;
}

.rings-mini-label {
    font-size: 8px;
    fill: var(--text-muted);
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: 600;
}

/* Center number inside rings */
.rings-center-num {
    font-size: 20px;
    font-weight: 800;
    fill: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.rings-center-label {
    font-size: 9px;
    font-weight: 600;
    fill: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Day labels under mini rings */
.rings-day-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.rings-day-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
}

.rings-day-tap {
    border-radius: 8px;
    padding: 4px 2px;
    transition: background 0.2s;
}

.rings-day-selected {
    background: rgba(255, 255, 255, 0.08);
}

.rings-day-selected .rings-day-label {
    color: var(--text-primary);
}

/* Awards */
.rings-awards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.award-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 6px 10px;
}

.award-new {
    animation: awardGlow 2s ease-in-out;
}

@keyframes awardGlow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.5); }
}

.award-emoji {
    font-size: 18px;
}

.award-detail {
    display: flex;
    flex-direction: column;
}

.award-name {
    font-size: 11px;
    font-weight: 700;
}

.award-tier {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.correction-banner {
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.4);
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    padding: 12px 16px;
    border-radius: var(--radius-xs, 12px);
    margin-bottom: 12px;
    text-align: center;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
    --insight-gradient: linear-gradient(135deg, rgba(255, 55, 95, 0.12), rgba(191, 90, 242, 0.12));
    --insight-border: rgba(255, 55, 95, 0.25);
    --radius: 20px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Love Nudge */
.love-nudge {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: nudge-fade 4s ease-in-out infinite;
}

.love-arrow {
    font-size: 16px;
    font-weight: 700;
    color: var(--pink);
    display: inline-block;
    animation: arrow-bounce 1.2s ease-in-out infinite;
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

@keyframes nudge-fade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* Love Surprise Button */
.love-btn {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    border: none;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font);
    padding: 5px 14px;
    border-radius: 20px;
    cursor: pointer;
    animation: love-wiggle 2.5s ease-in-out infinite;
    transition: transform 0.2s ease;
    letter-spacing: 0.5px;
}

.love-btn:hover {
    transform: scale(1.1);
}

@keyframes love-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

.love-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.love-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.love-heart {
    font-size: 120px;
    animation: love-heartbeat 1s ease-in-out infinite;
    filter: drop-shadow(0 0 40px rgba(255, 55, 95, 0.6));
}

@keyframes love-heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
}

.love-text {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 20px;
    animation: love-glow 2s ease-in-out infinite alternate;
}

@keyframes love-glow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.3); }
}

.love-dismiss {
    margin-top: 32px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    padding: 8px 24px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.love-dismiss:hover {
    border-color: var(--pink);
    color: var(--pink);
}

/* Header */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0 28px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 28px;
    color: var(--pink);
    filter: drop-shadow(0 0 12px rgba(255, 55, 95, 0.4));
}

.header-version {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.period-selector {
    display: flex;
    gap: 2px;
    background: var(--bg-card-solid);
    border-radius: var(--radius-xs);
    padding: 3px;
}

.period-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font);
}

.period-btn:hover {
    color: var(--text-secondary);
}

.period-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.last-sync {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Nav Tabs */
.nav-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-card-solid);
    border-radius: var(--radius-xs);
    padding: 3px;
    margin-bottom: 20px;
    width: fit-content;
}

.nav-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font);
    text-decoration: none;
}

.nav-tab:hover {
    color: var(--text-secondary);
}

.nav-tab.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

/* AI Insight Card — Hero */
.insight-card {
    background: var(--insight-gradient);
    border: 1px solid var(--insight-border);
    border-radius: var(--radius);
    padding: 28px 32px;
    margin-bottom: 20px;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.insight-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--pink);
    background: rgba(255, 55, 95, 0.15);
    padding: 5px 12px;
    border-radius: 20px;
}

.insight-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.insight-refresh,
.insight-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-refresh:hover,
.insight-toggle:hover {
    color: var(--pink);
    background: rgba(255, 55, 95, 0.1);
}

.insight-toggle svg {
    transition: transform 0.3s ease;
}

.insight-card.collapsed .insight-toggle svg {
    transform: rotate(-90deg);
}

.insight-card.collapsed .insight-body,
.insight-card.collapsed .insight-meta {
    display: none;
}

.insight-card.collapsed {
    padding: 16px 32px;
}

.insight-card.collapsed .insight-header {
    margin-bottom: 0;
}

.insight-refresh.spinning svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.insight-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: -0.1px;
}

.insight-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

.insight-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pink);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

.insight-meta {
    margin-top: 14px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Ask My Data — Interactive AI */
.ask-section {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    transition: border-color 0.3s ease;
}

.ask-section:focus-within {
    border-color: var(--pink);
}

.ask-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ask-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.ask-collapse-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ask-collapse-btn:hover {
    color: var(--pink);
    background: rgba(255, 55, 95, 0.1);
}

.ask-collapse-btn svg {
    transition: transform 0.3s ease;
}

.ask-section.collapsed .ask-collapse-btn svg {
    transform: rotate(-90deg);
}

.ask-section.collapsed .ask-body {
    display: none;
}

.ask-section.collapsed .ask-header {
    margin-bottom: 0;
}

.ask-section.collapsed {
    padding: 14px 24px;
}

.ask-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ask-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 15px;
    font-family: var(--font);
    font-weight: 400;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease;
}

.ask-input::placeholder {
    color: var(--text-muted);
}

.ask-input:focus {
    border-color: rgba(255, 55, 95, 0.4);
}

.ask-btn {
    background: var(--pink);
    border: none;
    border-radius: var(--radius-sm);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ask-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.ask-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.ask-btn.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

.ask-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.ask-mode-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 14px 5px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}

.ask-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.ask-mode-toggle.deep {
    border-color: rgba(191, 90, 242, 0.4);
    background: rgba(191, 90, 242, 0.08);
}

.ask-mode-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all 0.3s ease;
}

.ask-mode-toggle.deep .ask-mode-dot {
    background: var(--purple);
    box-shadow: 0 0 8px rgba(191, 90, 242, 0.6);
}

.ask-mode-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.ask-mode-toggle.deep .ask-mode-label {
    color: var(--purple);
}

.ask-mode-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

.ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ask-suggestion {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ask-suggestion:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: rgba(255, 55, 95, 0.08);
}

.ask-conversation {
    margin-top: 0;
}

.ask-conversation:not(:empty) {
    margin-top: 16px;
}

.ask-message {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.ask-message.user {
    background: rgba(255, 55, 95, 0.1);
    border: 1px solid rgba(255, 55, 95, 0.2);
}

.ask-message.user .ask-msg-label {
    color: var(--pink);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.ask-message.assistant {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.ask-message.assistant .ask-msg-label {
    color: var(--purple);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ask-msg-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-primary);
}

.ask-msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.ask-category-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 2px 8px;
    border-radius: 10px;
}

.ask-category-badge.question {
    color: var(--blue);
    background: rgba(10, 132, 255, 0.12);
}

.ask-category-badge.bug {
    color: var(--red);
    background: rgba(255, 59, 48, 0.12);
}

.ask-category-badge.request {
    color: var(--green);
    background: rgba(48, 209, 88, 0.12);
}

.ask-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13px;
    animation: fadeIn 0.3s ease;
}

.ask-typing-dots {
    display: flex;
    gap: 4px;
}

.ask-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    animation: typingDot 1.4s infinite;
}

.ask-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ask-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1.1); }
}

.ask-history-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    padding: 4px 0;
    margin-top: 8px;
    transition: color 0.2s ease;
}

.ask-history-toggle:hover {
    color: var(--text-secondary);
}

/* Glucose Section */
.glucose-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px;
    margin-bottom: 12px;
}

.glucose-current-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color 0.3s ease;
}

.glucose-current-card:hover {
    border-color: var(--border-hover);
}

.glucose-current-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.glucose-current-value {
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--glucose-in-range);
    transition: color 0.3s ease;
}

.glucose-current-value.very-low {
    color: var(--glucose-low);
    animation: urgent-pulse 1s ease-in-out infinite;
}

.glucose-current-value.low {
    color: var(--glucose-low);
}

.glucose-current-value.in-range {
    color: var(--glucose-in-range);
}

.glucose-current-value.high {
    color: var(--glucose-high);
}

.glucose-current-value.very-high {
    color: var(--glucose-very-high);
}

@keyframes urgent-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.glucose-current-unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 4px;
}

.glucose-trend-arrow {
    font-size: 28px;
    margin-top: 4px;
    font-weight: 700;
    line-height: 1;
}

.glucose-trend-arrow.rising-fast { color: var(--glucose-very-high); }
.glucose-trend-arrow.rising { color: var(--glucose-high); }
.glucose-trend-arrow.rising-slow { color: var(--glucose-high); }
.glucose-trend-arrow.flat { color: var(--glucose-in-range); }
.glucose-trend-arrow.falling-slow { color: var(--glucose-in-range); }
.glucose-trend-arrow.falling { color: var(--glucose-low); }
.glucose-trend-arrow.falling-fast { color: var(--glucose-low); }

.glucose-current-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

/* Donut chart card */
.glucose-donut-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: border-color 0.3s ease;
}

.glucose-donut-card:hover {
    border-color: var(--border-hover);
}

.donut-container {
    position: relative;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-container canvas {
    max-height: 160px;
}

.donut-center {
    position: absolute;
    font-size: 28px;
    font-weight: 800;
    color: var(--glucose-in-range);
    letter-spacing: -0.5px;
}

.tir-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tir-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.tir-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Glucose stats card */
.glucose-stats-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: border-color 0.3s ease;
}

.glucose-stats-card:hover {
    border-color: var(--border-hover);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.stats-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

.stats-grid-4col {
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    text-align: center;
    padding: 10px 4px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    border: 2px solid transparent;
}

.stat-item:active {
    background: var(--bg-card);
}

.stat-item.stat-selected {
    border-color: var(--pink);
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.stat-value.stat-low {
    color: var(--glucose-low);
}

.stat-value.stat-high {
    color: var(--glucose-high);
}

.stat-value.stat-very-high {
    color: var(--glucose-very-high);
}

.stat-value.stat-very-low {
    color: var(--glucose-low);
}

.stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Stat Expand Panel */
.stat-expand {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
}

.stat-expand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.stat-expand-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-expand-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.stat-expand-chart-wrap {
    height: 140px;
    position: relative;
}

/* Food Log Card */
.food-log-card {
    margin-bottom: 12px;
}

.food-log-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.food-log-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.food-desc-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    min-height: 56px;
    transition: border-color 0.2s ease;
}

.food-desc-input:focus {
    border-color: var(--pink);
}

.food-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.food-carbs-input,
.food-dose-units {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    text-align: center;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease;
}

.food-carbs-input:focus,
.food-dose-units:focus {
    border-color: var(--pink);
}

.food-carbs-input::-webkit-inner-spin-button,
.food-carbs-input::-webkit-outer-spin-button,
.food-dose-units::-webkit-inner-spin-button,
.food-dose-units::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.food-dose-type {
    flex: 1.6;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

.food-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.food-photo-btn:hover {
    border-color: var(--pink);
    color: var(--pink);
}

.food-photo-icon {
    font-size: 18px;
}

.food-photo-preview {
    position: relative;
    border-radius: var(--radius-xs);
    overflow: hidden;
    max-width: 100%;
}

.food-photo-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.food-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.food-submit {
    background: linear-gradient(135deg, var(--pink), var(--purple));
    border: none;
    border-radius: var(--radius-xs);
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    color: #fff;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.food-submit:hover:not(:disabled) {
    filter: brightness(1.1);
}

.food-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

.food-analysis {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(191, 90, 242, 0.08);
    border: 1px solid rgba(191, 90, 242, 0.25);
    border-radius: var(--radius-xs);
    animation: fadeIn 0.3s ease;
}

.food-analysis-header {
    font-size: 11px;
    font-weight: 800;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.food-analysis-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fa-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 4px;
}

.fa-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.fa-conf {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-left: 4px;
}

.fa-section {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.fa-section-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.fa-grade-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.fa-grade {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fa-grade-letter {
    font-size: 26px;
    font-weight: 900;
    color: var(--bg-primary);
}

.fa-grade-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fa-grade-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.fa-grade-reason {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.fa-dose-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(100, 210, 255, 0.08);
    border: 1px solid rgba(100, 210, 255, 0.25);
    border-radius: var(--radius-xs);
}

.fa-dose-pill {
    font-size: 16px;
    font-weight: 900;
    color: var(--teal, #64d2ff);
    white-space: nowrap;
}

.fa-dose-reason {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.fa-footer {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.food-today-log {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.food-today-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    margin-bottom: 2px;
}

.food-entry {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 10px 14px;
}

.food-entry-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.food-entry-main {
    flex: 1;
    min-width: 0;
}

.food-entry-desc {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.food-entry-meta {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
}

.food-entry-obs {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 6px;
}

.food-entry-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
}

.food-entry-dose-suggestion {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(100, 210, 255, 0.08);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
}

.food-dose-pill {
    font-weight: 900;
    color: var(--teal);
    margin-right: 4px;
}

.food-dose-why {
    color: var(--text-secondary);
}

.food-entry-delete:hover {
    color: var(--pink);
}

.food-entry-photo {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: max-height 0.3s ease;
}

.food-entry-photo-expanded {
    max-height: 400px;
    object-fit: contain;
}

.food-grade-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 900;
    color: var(--bg-primary);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 6px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Insulin + Carbs Card */
.insulin-carbs-card {
    margin-bottom: 12px;
}

.insulin-carbs-source {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insulin-carbs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.ic-stat {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    text-align: center;
}

.ic-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ic-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.ic-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

.ic-chart-container {
    position: relative;
    height: 160px;
    margin-top: 4px;
}

.ic-warning {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(255, 159, 10, 0.10);
    border: 1px solid rgba(255, 159, 10, 0.30);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 500;
    color: var(--orange);
    line-height: 1.5;
}

/* Insulin Log */
.insulin-log-card {
    margin-bottom: 12px;
}

.insulin-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.insulin-buttons-top {
    grid-template-columns: 1fr 1fr;
}

.insulin-buttons-bottom {
    grid-template-columns: repeat(3, 1fr);
}

.insulin-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 16px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--bg-elevated);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}

.insulin-type-btn:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.insulin-type-btn:active {
    transform: translateY(0);
}

.insulin-type-btn.tresiba:hover,
.insulin-type-btn.tresiba.active {
    border-color: var(--teal);
    background: rgba(64, 200, 224, 0.08);
}

.insulin-type-btn.lyumjev:hover,
.insulin-type-btn.lyumjev.active {
    border-color: var(--orange);
    background: rgba(255, 159, 10, 0.08);
}

.insulin-type-btn.afrezza:hover,
.insulin-type-btn.afrezza.active {
    border-color: var(--purple);
    background: rgba(191, 90, 242, 0.10);
}

.insulin-type-btn.regular:hover,
.insulin-type-btn.regular.active {
    border-color: var(--blue);
    background: rgba(10, 132, 255, 0.10);
}

.insulin-entry-type.afrezza {
    color: var(--purple);
    background: rgba(191, 90, 242, 0.14);
}

.insulin-entry-type.regular {
    color: var(--blue);
    background: rgba(10, 132, 255, 0.14);
}

.insulin-icon {
    font-size: 28px;
}

.insulin-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.insulin-desc {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.insulin-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    animation: fadeIn 0.2s ease;
}

.insulin-input-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 70px;
}

.insulin-units-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 12px 14px;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-primary);
    outline: none;
    text-align: center;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease;
}

.insulin-units-input:focus {
    border-color: var(--pink);
}

.insulin-units-input::-webkit-inner-spin-button,
.insulin-units-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.insulin-submit {
    background: var(--pink);
    border: none;
    border-radius: var(--radius-xs);
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.insulin-submit:hover {
    filter: brightness(1.1);
}

.insulin-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.insulin-cancel:hover {
    color: var(--text-primary);
}

.insulin-today-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.insulin-today-log {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insulin-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    animation: fadeIn 0.3s ease;
}

.insulin-entry-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.insulin-entry-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
}

.insulin-entry-type.tresiba {
    color: var(--teal);
    background: rgba(64, 200, 224, 0.12);
}

.insulin-entry-type.lyumjev {
    color: var(--orange);
    background: rgba(255, 159, 10, 0.12);
}

.insulin-entry-units {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.insulin-entry-time {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.insulin-entry-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font);
    transition: color 0.2s ease;
    opacity: 0;
}

.insulin-entry:hover .insulin-entry-delete {
    opacity: 1;
}

.insulin-entry-delete:hover {
    color: var(--red);
}

.insulin-entry-bg {
    font-size: 0.75rem;
    color: var(--green);
    font-weight: 600;
    margin-left: 4px;
}

.insulin-entry-info { cursor: pointer; }
.food-entry-main { cursor: pointer; }
.meal-tab-entry { cursor: pointer; }

.edit-inline {
    padding: 8px;
    width: 100%;
}
.edit-input, .edit-select {
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--text);
    padding: 6px 10px;
    font-size: 0.85rem;
    font-family: inherit;
}
.edit-input:focus, .edit-select:focus {
    border-color: var(--pink);
    outline: none;
}
.edit-save, .edit-cancel {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: var(--text);
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
}
.edit-save {
    background: var(--pink);
    border-color: var(--pink);
    font-weight: 600;
}
.edit-cancel:hover { border-color: var(--text); }

.insulin-date-group {
    margin-bottom: 8px;
}

.insulin-date-header {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 0 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

/* Dose Tracker */
.dose-tracker-card {
    margin-bottom: 12px;
}

.section-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 2px;
}

/* 6-column grid for dose tracker */
.dt-grid-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Dose Response Averages */
.da-reason-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 0 4px;
}

.da-reason-label:first-child {
    padding-top: 0;
}

.da-cart-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cyan);
    padding: 8px 0 2px;
    letter-spacing: 0.02em;
}

.da-day-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 0 2px;
}

.da-row {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 6px;
    overflow: hidden;
}

.da-row-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    gap: 8px;
}

.da-row-header:active {
    background: rgba(255, 255, 255, 0.06);
}

.da-period {
    font-weight: 600;
    font-size: 0.85rem;
}

.da-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex: 1;
}

.da-chevron {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.da-avg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 0 12px 10px;
    text-align: center;
}

.da-avg-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.da-avg-value {
    font-size: 1rem;
    font-weight: 700;
}

.da-avg-n {
    font-size: 0.55rem;
    color: var(--text-secondary);
}

.da-expand {
    border-top: 1px solid var(--border);
    padding: 6px 12px;
}

.da-dose-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.da-dose-row:last-child {
    border-bottom: none;
}

.da-dose-info {
    font-weight: 500;
    min-width: 100px;
}

.da-dose-vals {
    color: var(--text-secondary);
    font-size: 0.65rem;
    white-space: nowrap;
}

/* Day headers */
.dt-day-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 0 4px;
}

.dt-day-header:first-child {
    padding-top: 4px;
}

/* Individual dose card */
.dt-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

.dt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dt-dose {
    font-weight: 700;
    font-size: 0.9rem;
}

.dt-time {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Meal line */
.dt-meal {
    font-size: 0.78rem;
    color: var(--orange);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* BG grid — 4 columns */
.dt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
}

.dt-col-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.dt-col-value {
    font-weight: 700;
    font-size: 1.05rem;
}

.dt-col-delta {
    font-size: 0.7rem;
    font-weight: 500;
    margin-top: 1px;
    min-height: 1em;
}

/* BG range colors */
.dt-col-value.dt-inrange { color: var(--green); }
.dt-col-value.dt-high { color: var(--yellow); }
.dt-col-value.dt-vhigh { color: var(--orange); }
.dt-col-value.dt-low { color: var(--red); }
.dt-col-value.dt-vlow { color: var(--red); }

/* Delta colors */
.dt-col-delta.dt-drop { color: var(--green); }
.dt-col-delta.dt-rise { color: var(--red); }
.dt-col-delta.dt-flat { color: var(--yellow); }

/* Per-unit footer */
.dt-footer {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.dt-per-unit {
    font-size: 0.75rem;
    font-weight: 500;
}

.dt-per-unit.dt-drop { color: var(--green); }
.dt-per-unit.dt-rise { color: var(--red); }
.dt-per-unit.dt-flat { color: var(--yellow); }

/* Show more button */
.dt-show-more {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.dt-show-more:active {
    background: rgba(255, 255, 255, 0.1);
}

.dt-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--pink);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 0 4px;
}

.dt-section-label:first-child {
    padding-top: 4px;
}

/* Correction Factor & Carb Ratio Card */
.cf-card {
    margin-bottom: 12px;
}

.cf-row {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
}

.cf-row:last-child {
    margin-bottom: 0;
}

.cf-row-header {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.cf-row-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.cf-stat {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.cf-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.cf-stat-value {
    font-size: 1.2rem;
    font-weight: 800;
}

.cf-unit {
    font-size: 0.6rem;
    font-weight: 500;
}

.cf-stat-value.cf-drop { color: var(--green); }
.cf-stat-value.cf-rise { color: var(--red); }
.cf-stat-value.cf-flat { color: var(--yellow); }
.cf-stat-value.cf-pending { color: var(--text-secondary); font-size: 0.8rem; font-style: italic; }

.cf-stat-count {
    font-size: 0.6rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Glucose trace — taller chart */
.glucose-trace-card {
    margin-bottom: 12px;
}

.chart-container-tall {
    height: 260px;
}

/* Overlay chart */
.overlay-chart-card {
    margin-bottom: 12px;
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.chart-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: border-color 0.3s ease;
}

.chart-card:hover {
    border-color: var(--border-hover);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.chart-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-avg {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.chart-container {
    height: 180px;
    position: relative;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Workouts Section */
.section-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 12px;
}

.section-header {
    margin-bottom: 18px;
}

.section-header h3 {
    font-size: 16px;
    font-weight: 700;
}

.workout-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.workout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    transition: all 0.25s ease;
}

.workout-item:hover {
    border-color: var(--border-hover);
    background: rgba(44, 44, 46, 0.8);
}

.workout-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.workout-type-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(48, 209, 88, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.workout-name {
    font-weight: 600;
    font-size: 15px;
}

.workout-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 500;
}

.workout-stats {
    display: flex;
    gap: 28px;
    align-items: center;
}

.workout-stat {
    text-align: right;
}

.workout-stat-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.workout-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

/* Insights Page */
.insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.insights-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.generate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 55, 95, 0.12);
    color: var(--pink);
    border: 1px solid rgba(255, 55, 95, 0.25);
    border-radius: var(--radius-xs);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s ease;
}

.generate-btn:hover {
    background: rgba(255, 55, 95, 0.2);
}

.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.generate-icon.spinning {
    animation: spin 1s linear infinite;
}

/* Finding Cards */
.finding-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 12px;
    transition: border-color 0.3s ease, padding 0.2s ease;
}

.finding-card:hover {
    border-color: var(--border-hover);
}

.finding-card.collapsed {
    padding: 16px 28px;
}

.finding-card.collapsed .finding-body {
    display: none;
}

.finding-card.collapsed .finding-title {
    margin-bottom: 0;
}

.finding-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.severity-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    padding: 4px 10px;
    border-radius: 20px;
}

.finding-type {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.finding-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: auto;
}

.finding-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.finding-toggle:hover {
    color: var(--text-secondary);
}

.finding-toggle svg {
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}

.finding-card.collapsed .finding-toggle svg {
    transform: rotate(0deg);
}

.finding-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.finding-summary {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.finding-period {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 16px;
}

.finding-chart {
    height: 200px;
    margin-top: 12px;
    position: relative;
}

.finding-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* Feedback FAB */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: linear-gradient(135deg, var(--pink), var(--purple));
    color: var(--text-primary);
    border: none;
    border-radius: 24px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(255, 55, 95, 0.3);
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.feedback-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255, 55, 95, 0.4);
}

.feedback-fab:active {
    transform: translateY(0);
}

/* Feedback Modal */
.feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.feedback-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.feedback-modal {
    background: var(--bg-card-solid);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 24px;
    width: 100%;
    max-width: 480px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.feedback-overlay.visible .feedback-modal {
    transform: translateY(0);
}

.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.feedback-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.feedback-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s ease;
}

.feedback-close:hover {
    color: var(--text-primary);
}

.feedback-textarea {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 15px;
    font-family: var(--font);
    color: var(--text-primary);
    resize: vertical;
    outline: none;
    transition: border-color 0.2s ease;
    min-height: 100px;
}

.feedback-textarea::placeholder {
    color: var(--text-muted);
}

.feedback-textarea:focus {
    border-color: rgba(255, 55, 95, 0.4);
}

.feedback-categories {
    display: flex;
    gap: 8px;
    margin: 14px 0;
}

.feedback-cat-btn {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.feedback-cat-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.feedback-cat-btn.active {
    background: rgba(255, 55, 95, 0.12);
    border-color: rgba(255, 55, 95, 0.3);
    color: var(--pink);
}

.feedback-submit {
    width: 100%;
    background: var(--pink);
    border: none;
    border-radius: var(--radius-sm);
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.feedback-submit:hover {
    filter: brightness(1.1);
}

.feedback-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.feedback-success {
    display: none;
    text-align: center;
    padding: 16px;
    color: var(--green);
    font-size: 15px;
    font-weight: 600;
    animation: fadeIn 0.3s ease;
}

.feedback-success.visible {
    display: block;
}

.feedback-check {
    font-size: 20px;
    margin-right: 6px;
}

/* Suggestions Card */
.sug-card {
    border-image: linear-gradient(135deg, rgba(255, 55, 95, 0.3), rgba(191, 90, 242, 0.3)) 1;
    border-width: 1px;
    border-style: solid;
}

.sug-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.sug-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0;
}

.sug-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin: 2px 0 0;
}

.sug-stats {
    display: flex;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.sug-stat {
    text-align: center;
}

.sug-stat-val {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sug-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.sug-refresh {
    padding: 6px 14px;
    font-size: 12px;
}

.sug-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sug-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.sug-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.sug-item:hover {
    border-color: var(--border-hover);
}

.sug-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.sug-cat {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 12px;
}

.sug-cat-basal { color: var(--cyan); background: rgba(100, 210, 255, 0.12); }
.sug-cat-correction { color: var(--orange); background: rgba(255, 159, 10, 0.12); }
.sug-cat-meal { color: var(--green); background: rgba(48, 209, 88, 0.12); }
.sug-cat-exercise { color: var(--blue); background: rgba(10, 132, 255, 0.12); }
.sug-cat-timing { color: var(--purple); background: rgba(191, 90, 242, 0.12); }
.sug-cat-pattern { color: var(--pink); background: rgba(255, 55, 95, 0.12); }

.sug-priority {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
}

.sug-priority-high { color: var(--red); }
.sug-priority-medium { color: var(--orange); }
.sug-priority-low { color: var(--text-muted); }

.sug-item-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.sug-action {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: rgba(255, 55, 95, 0.12);
    border-left: 3px solid var(--pink);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    margin: 6px 0;
    line-height: 1.4;
}

.sug-item-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.sug-data-point {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 3px 8px;
    border-radius: 8px;
}

.sug-error {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.sug-updated {
    text-align: right;
    padding: 8px 4px 0;
    color: var(--text-tertiary);
    font-size: 11px;
}

.sug-section-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.sug-section-label:first-child {
    margin-top: 0;
}

.sug-wins-label {
    color: var(--green);
}

.sug-improve-label {
    color: var(--orange);
}

.sug-item-win {
    border-left: 3px solid var(--green);
}

.sug-win-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--green);
    background: rgba(48, 209, 88, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Cycle category */
.sug-cat-cycle {
    background: rgba(191, 90, 242, 0.15);
    color: var(--purple, #bf5af2);
}
.sug-cat-low {
    background: rgba(255, 55, 95, 0.15);
    color: var(--pink);
}

/* Today's Focus */
.sug-today-focus {
    background: linear-gradient(135deg, rgba(255, 55, 95, 0.12), rgba(191, 90, 242, 0.10));
    border: 1px solid rgba(255, 55, 95, 0.25);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.sug-focus-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.sug-focus-icon {
    font-size: 18px;
}

.sug-focus-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pink);
}

.sug-focus-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.sug-focus-reason {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Insights Refresh All button */
.insights-refresh-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.insights-refresh-all {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.insights-refresh-all:hover {
    background: rgba(255, 55, 95, 0.12);
    border-color: var(--pink);
    color: var(--pink);
}
.insights-refresh-all:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.insights-refresh-all .spinning,
.insights-refresh-all svg.spinning {
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Correction threshold grid */
.sug-corr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.sug-corr-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.sug-corr-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sug-corr-val {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.sug-corr-times {
    margin: 8px 0;
}
.sug-corr-time {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 0;
}
.sug-basal-action {
    font-size: 15px;
}
.sug-problem-meals {
    margin-top: 10px;
}
.sug-problem-meal {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.sug-section {
    margin-bottom: 16px;
}

/* Footer */
.footer {
    text-align: center;
    padding: 24px 0 36px;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Responsive — iPhone optimized */
@media (max-width: 768px) {
    .app {
        padding: 0 12px;
    }

    .header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 20px 0 16px;
    }

    .logo {
        font-size: 22px;
    }

    .love-nudge {
        font-size: 10px;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .period-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .ask-section {
        padding: 14px 16px;
    }

    .ask-input {
        padding: 12px 14px;
        font-size: 14px;
    }

    .ask-btn {
        width: 44px;
        height: 44px;
    }

    .ask-suggestions {
        gap: 6px;
    }

    .ask-suggestion {
        font-size: 11px;
        padding: 6px 12px;
    }

    .ask-msg-text {
        font-size: 13px;
    }

    .glucose-section {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .glucose-current-card {
        padding: 20px 16px;
    }

    .glucose-current-value {
        font-size: 64px;
    }

    .glucose-donut-card,
    .glucose-stats-card {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .stat-item {
        padding: 8px 2px;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 9px;
    }

    .charts-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .chart-card {
        padding: 16px;
    }

    .chart-container {
        height: 160px;
    }

    .chart-container-tall {
        height: 200px;
    }

    .glucose-trace-card {
        margin-bottom: 10px;
    }

    .insight-card {
        padding: 16px 18px;
        margin-bottom: 10px;
    }

    .insight-body {
        font-size: 14px;
        line-height: 1.6;
    }

    .section-card {
        padding: 16px;
    }

    .workout-item {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .workout-stats {
        gap: 20px;
        width: 100%;
    }

    .nav-tabs {
        width: 100%;
    }

    .nav-tab {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 12px;
    }

    .insights-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .generate-btn {
        width: 100%;
        justify-content: center;
    }

    .finding-card {
        padding: 16px 18px;
    }

    .finding-card.collapsed {
        padding: 12px 18px;
    }

    .finding-title {
        font-size: 16px;
    }

    .finding-summary {
        font-size: 14px;
    }

    .finding-chart {
        height: 180px;
    }

    .footer {
        padding: 16px 0 28px;
    }

    .feedback-fab {
        bottom: 16px;
        right: 16px;
        padding: 8px 16px;
        font-size: 12px;
    }

    .feedback-modal {
        padding: 20px 16px;
    }
}

/* ====== Stat Deltas (change indicators under glucose stats) ====== */

.stat-delta {
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
}

.stat-delta.improving { color: var(--green); }
.stat-delta.worsening { color: var(--red); }
.stat-delta.flat { color: var(--text-muted); }

/* ====== What Worked Before ====== */

.ww-card {
    border: 1px solid rgba(100, 210, 255, 0.2);
    background: linear-gradient(135deg, rgba(100, 210, 255, 0.06), rgba(48, 209, 88, 0.06));
}

.ww-pattern {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 8px;
}

.ww-pattern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.ww-cart {
    font-size: 16px;
    font-weight: 800;
    color: var(--cyan);
}

.ww-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.ww-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.ww-stat {
    text-align: center;
}

.ww-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--green);
}

.ww-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ww-note {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ====== Streaks & Personal Bests ====== */

.streaks-card {
    padding: 16px 18px;
}

.streaks-header-row {
    margin-bottom: 14px;
}

.streaks-title {
    font-size: 17px;
    font-weight: 700;
}

.streaks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.streak-item {
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
}

.streak-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.streak-unit {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.streak-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.streak-green { color: var(--green); }
.streak-cyan { color: var(--cyan); }
.streak-purple { color: var(--purple); }
.streak-pink { color: var(--pink); }
.streak-orange { color: var(--orange); }

.pb-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.pb-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.pb-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.pb-medal {
    font-size: 16px;
    margin-right: 10px;
}

.pb-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

.pb-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
}

.pb-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}

.pb-new {
    font-size: 10px;
    font-weight: 800;
    color: var(--pink);
    margin-left: 4px;
    animation: pulse 1.5s infinite;
}

.pb-row-new {
    background: rgba(255, 55, 95, 0.08);
    border-radius: 8px;
    padding: 8px 6px;
    margin: 0 -6px;
}

.pb-row-overall {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.pb-overall-detail {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    padding: 0 0 8px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 6px;
}

.pb-overall-detail span {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.today-vs-section {
    margin-bottom: 4px;
}

.today-vs-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.today-vs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.today-vs-item {
    text-align: center;
}

.today-vs-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.today-vs-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.streaks-section {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* --- Meals Tab --- */
.meals-tab-card { padding: 16px; }
.meals-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.meals-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.meals-count { font-size: 13px; color: var(--text-secondary); }
.meals-search-wrap { margin-bottom: 14px; }
.meals-search {
    width: 100%; padding: 10px 14px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg-elevated);
    color: var(--text-primary); font-size: 15px; font-family: inherit;
    outline: none; box-sizing: border-box;
}
.meals-search:focus { border-color: var(--pink); }
.meals-search::placeholder { color: var(--text-muted); }
.meals-grade-info {
    font-size: 11px; line-height: 1.5; color: var(--text-secondary);
    padding: 8px 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.meal-tab-entry {
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.meal-tab-entry:last-child { border-bottom: none; }
.meal-tab-left { display: flex; align-items: flex-start; gap: 10px; }
.meal-tab-grade {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #000; margin-top: 2px;
}
.meal-tab-grade-pending { background: var(--bg-elevated) !important; color: var(--text-muted); font-weight: 600; font-size: 12px; }
.meal-tab-info { flex: 1; min-width: 0; }
.meal-tab-desc { font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.meal-tab-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.meal-tab-impact { font-size: 12px; color: var(--green); margin-top: 3px; }

/* Safe area for iPhone notch/home indicator */
/* --- Settings Page --- */

.settings-card {
    padding: 20px;
}

.settings-group {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-group:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.settings-group-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.settings-time-row,
.settings-range-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.settings-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-field label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.settings-to,
.settings-dash {
    color: var(--text-secondary);
    font-size: 14px;
    padding-bottom: 10px;
}

.settings-input,
.settings-select {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 16px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.settings-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--pink);
}

.settings-unit {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.settings-time-row {
    margin-bottom: 12px;
}

.settings-preview {
    background: var(--bg-elevated);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 20px;
}

.settings-preview-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.settings-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-around;
}

.settings-preview-stat {
    text-align: center;
    min-width: 56px;
}

.settings-preview-val {
    font-size: 20px;
    font-weight: 700;
}

.settings-preview-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.settings-preview-summary {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-preview-note {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.settings-actions {
    display: flex;
    gap: 12px;
}

.settings-save-btn {
    flex: 1;
    background: var(--pink);
    color: var(--text-primary);
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.settings-save-btn:disabled {
    opacity: 0.5;
}

.settings-save-btn:active {
    opacity: 0.8;
}

.settings-reset-btn {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.settings-saved-msg {
    text-align: center;
    color: var(--green);
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }

    .header {
        padding-top: calc(20px + env(safe-area-inset-top));
    }
}

/* Refresh failure state — replaces a spinner that would otherwise run forever.
   A silent failure that looks like work-in-progress is why a working refresh
   read as broken. */
.refresh-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.refresh-retry {
    background: transparent;
    border: 1px solid var(--border-hover);
    border-radius: 8px;
    padding: 6px 14px;
    color: var(--pink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.refresh-retry:hover {
    border-color: var(--pink);
}

.refresh-error-detail {
    color: var(--text-secondary);
    font-size: 12px;
    opacity: 0.7;
}

/* Stale-data warning. Amber, not red: the data is untrustworthy, not dangerous —
   red is reserved for glucose lows. */
.stale-banner {
    background: rgba(255, 159, 10, 0.12);
    border: 1px solid var(--orange);
    border-radius: 20px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.stale-banner-title {
    color: var(--orange);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stale-banner-detail {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* The sync label itself goes amber, so the warning is visible without
   scrolling back to the banner. */
.rings-sync-time.is-stale {
    color: var(--orange);
    font-weight: 600;
}

/* --- BeAM Score card (v1.57.0) --- */
.beam-hero {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 4px;
}
.beam-hero-val {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    color: var(--text-primary);
}
.beam-hero-val.beam-ok { color: var(--green); }
.beam-hero-val.beam-over { color: var(--orange); }
.beam-hero-val.beam-rise { color: var(--cyan); }
.beam-hero-unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.beam-chip {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 159, 10, 0.14);
    color: var(--orange);
    border: 1px solid rgba(255, 159, 10, 0.28);
}
.beam-chip.beam-chip-ok {
    background: rgba(48, 209, 88, 0.14);
    color: var(--green);
    border-color: rgba(48, 209, 88, 0.28);
}
.beam-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 16px 0 4px;
}
.beam-stat { cursor: default; }
.beam-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.beam-key {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}
.beam-key-ok { background: var(--green); }
.beam-key-over { background: var(--orange); }
.beam-key-rise { background: var(--cyan); }
.beam-key-low { background: var(--red); }
.beam-key-excl { background: rgba(255, 255, 255, 0.14); }
.beam-review,
.beam-readout {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 14px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xs);
    padding: 14px;
}
.beam-review b,
.beam-readout b { color: var(--text-primary); font-weight: 700; }
.beam-review.beam-review-waiting { color: var(--text-muted); }
.beam-note {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* --- Web push controls (v1.59.0) --- */
.push-group { margin-top: 8px; }
.push-help {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 6px 0 12px;
}
.push-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.push-status {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 10px;
    min-height: 1em;
}
.push-status.push-good { color: var(--green); }
.push-status.push-bad { color: var(--orange); }