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

:root {
    --primary: #a29bfe;
    --primary-light: #b8b3ff;
    --primary-dark: #6c5ce7;
    --bg: #1a1a2e;
    --card-bg: #222244;
    --text: #e8e8f0;
    --text-light: #b8b8cc;
    --border: #3a3a5c;
    --success: #55efc4;
    --danger: #ff7675;
    --warning: #ffeaa7;
    /* Concentric corner-radius scale (Liquid-Glass nesting rule:
       child radius = parent radius − gap to parent edge).
       Use --radius-xl on full-bleed sheets, --radius-lg on cards,
       --radius-md on chips/inputs, --radius-sm on tight pills. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius: 12px;            /* legacy alias — keep for back-compat */
    /* Glass-material rim highlights — 1px inset on the top edge of
       cards/nav/modals creates the "lensing" feel without a hard border. */
    --glass-edge: rgba(255, 255, 255, 0.08);
    --glass-edge-strong: rgba(255, 255, 255, 0.14);
    /* Theme-tinted glass: a faint accent gradient sampled from each
       theme's primary colour, layered on top of --card-bg so cards take
       on the atmosphere of the current theme without losing legibility.
       Themes override this in their own scope further down. */
    --card-tint: rgba(162, 155, 254, 0.05);
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* iOS Safari uses the html element's background for the URL-bar blend
   zone above the viewport — without an explicit dark fill here, that
   strip renders white and creates a visible gap above the page. NOTE:
   body must stay transparent so the fixed `#weather-bg` (z-index: -1)
   can paint between html's canvas fill and body's content — giving body
   a bg here would cover the watercolour. */
html {
    background: var(--bg);
    /* Lock the top: disable the WKWebView rubber-band so dragging can't pull
       the page (and the sticky header) down past the top edge. The sticky
       .page-header then stays visually stuck to the top like a native nav bar.
       No-op in desktop browsers that don't bounce; honoured by iOS 16+ WKWebView. */
    overscroll-behavior-y: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    color: var(--text);
    overscroll-behavior-y: none;
    /* Reserve enough space for the docked nav bar at MAX scroll so the
       final card is fully readable/tappable above the bar. During mid-
       scroll, content still passes UNDER the nav (and is dissolved by the
       .nav-edge-fade strip) — that's the iOS 26 scroll-edge effect. The
       reserve = safe-area-inset-bottom + nav height (~60px) + a 16px
       breathing gap above the nav. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
    min-height: 100vh;
}

input, textarea, select, button {
    font-size: 16px !important;
    touch-action: manipulation;
}

.page-shell {
    position: relative;
    min-height: 100vh;
    transform-origin: center center;
}

.page-shell.swiping {
    will-change: transform;
    overflow: hidden;
    pointer-events: none;
}

.page-shell-incoming {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    transform-origin: center center;
    will-change: transform;
    overflow: hidden;
    z-index: 200;
    pointer-events: none;
}

.swipe-edge-hint {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 300;
    opacity: 0;
    background: linear-gradient(to right, rgba(162,155,254,0.6), transparent);
    pointer-events: none;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 12px 4px rgba(162,155,254,0.3);
}

.container {
    max-width: 600px;
    margin: 0 auto;
    /* No top padding — the sticky .page-header brings its own padding and
       needs to sit flush against the viewport top so the glass pane runs
       all the way to the URL-bar edge with no visible gap. */
    padding: 0 1.25rem 1rem;
}

.nav-bar {
    /* Docked glass tab bar — flush to the bottom edge, full width, with
       safe-area-aware bottom padding for iPhone home-indicator clearance.
       Keeps the translucent glass material, lensing rim, and active-tab
       pill from the floating-pill design — just docked instead of detached.
       Heavier "scrolled" appearance is the default; body:not(.is-scrolled)
       lightens it at the very top of the page (see rule below). */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(22, 22, 43, 0.7);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0.25rem;
    padding: 0.45rem 0.6rem env(safe-area-inset-bottom, 0px);
    border-radius: 0;
    box-shadow:
        0 -4px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 var(--glass-edge-strong);
    transition: background 0.25s ease, backdrop-filter 0.25s ease,
                -webkit-backdrop-filter 0.25s ease, box-shadow 0.25s ease;
    z-index: 100;
}

/* "Resting" state at scrollY=0: nav floats almost weightlessly with a
   lighter fill and softer blur, since there's no content scrolling under
   it that needs hiding. Snaps to the heavier rule above as soon as the
   page is scrolled at all. */
body:not(.is-scrolled) .nav-bar {
    background: rgba(22, 22, 43, 0.45);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        0 -2px 12px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 var(--glass-edge);
}

/* Scroll-edge fade strip — a fixed sliver of progressive blur + bg dim
   placed *above* the nav pill (mobile) or *below* it (desktop). Content
   scrolling under it dissolves into the page background instead of
   colliding with the bar. This is the single biggest "iOS 26" cue.
   The mask makes the BLUR itself ramp from 0 (away from the bar) to full
   (right next to the bar); the gradient does the same for the BG dim. */
.nav-edge-fade {
    position: fixed;
    left: 0;
    right: 0;
    /* Sits flush above the docked nav: safe-area inset + nav height (~60px). */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bg));
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black);
            mask-image: linear-gradient(to bottom, transparent, black);
    transition: opacity 0.25s ease;
    z-index: 99;
}

/* When at the very top of the page there's nothing to dim — fade the
   strip out so the watercolor background reads cleanly. */
body:not(.is-scrolled) .nav-edge-fade {
    opacity: 0;
}

.nav-link {
    /* Apple Music / App Store-style tab item:
       - inactive label uses a muted version of the primary purple
       - inactive icon is desaturated + dimmed via filter so the emoji
         reads as a soft grey rather than a vivid colour
       - active state restores full colour to BOTH icon and label
       The active-pill background was intentionally dropped — colour
       alone is the differentiator, matching Apple's HIG. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    /* Muted theme-primary label — same hue family as the active tab
       (so ocean reads as muted cyan, midnight as muted purple, etc.)
       at ~70% opacity for legibility against the dark glass nav.
       rgba fallback first for iOS Safari <16.2; color-mix() upgrades. */
    color: rgba(162, 155, 254, 0.72);
    color: color-mix(in srgb, var(--primary), transparent 28%);
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 18px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-link .nav-icon {
    /* Desaturate + dim emoji icons on inactive tabs so they read as
       soft monochrome glyphs rather than bright coloured emoji. */
    filter: grayscale(0.85) brightness(0.95) opacity(0.55);
    transition: filter 0.2s ease;
}

.nav-link.active {
    /* Active tab: full primary purple on the label, full-colour emoji
       icon — Apple's HIG pattern (colour alone is the differentiator,
       no background pill). */
    color: var(--primary);
    background: transparent;
}

.nav-link.active .nav-icon {
    filter: none;
}

/* The old top-edge stripe is hidden — the pill backdrop above is the new
   active indicator. Keep the rule so any inline scripts that toggle ::after
   don't accidentally re-introduce a stray line. */
.nav-link.active::after {
    display: none;
}

.nav-logout {
    opacity: 0.6;
    font-size: 0.65rem;
}

.nav-icon {
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
}

.page-header {
    /* Liquid-Glass sticky title: pinned to the viewport top, with the
       title floating on a progressive-blur backdrop (see ::before). The
       header itself stays transparent so it never reads as a "bar" — the
       lift comes from the blurred glass pane behind, not from a fill.
       Extends to the .container's edge so the blur reaches viewport edges
       on mobile. */
    position: sticky;
    top: 0;
    z-index: 50;
    text-align: center;
    margin: 0 -1.25rem;
    /* Top padding clears the iOS status bar / Dynamic Island via the safe-area
       inset (it's 0 in a normal browser, ~47-59px in the native standalone
       app), so the title + Log button never sit under the system info. The
       frosted ::before pane below uses inset:0, so it extends up behind the
       status bar too — giving the native large-title "text on frosted glass"
       look instead of overlapping the clock/battery. */
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem 0.75rem;
    /* Sticky elements form their own stacking context, so the ::before
       z-index:-1 stays scoped inside this header — it sits behind the
       title text but in front of cards scrolling beneath. */
    isolation: isolate;
}

/* Progressive-blur backdrop pane — Apple's iOS 26 lock-screen pattern.
   Heavy frost at the top of the title zone fading via a mask gradient
   to fully clear at the bottom, so content scrolling under sharpens
   gradually instead of cutting against a hard edge. The faint white
   specular wash gives it the "lit pane of glass" reading. */
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Pair of the .weather-bg translateZ(0) fix — keeps the blur pane on its
       own GPU layer so mid-scroll sampling can't drop to black on iOS. */
    transform: translateZ(0);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
    pointer-events: none;
}

/* 1px specular highlight along the top edge of the glass pane — the
   "lit rim" that sells the floating-pane illusion. */
.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 30%,
        rgba(255, 255, 255, 0.18) 70%,
        transparent 100%
    );
    pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
    .page-header::before,
    .page-header::after {
        display: none;
    }
}

.page-header.has-log-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-header.has-log-btn h1 {
    text-align: left;
}

.page-header h1 {
    /* Liquid-Glass type ramp: confident large title with tight tracking. */
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 14px rgba(0,0,0,0.3);
}

.header-spacer {
    width: 80px;
    flex-shrink: 0;
}

.btn-log-main {
    /* Liquid-Glass primary button — spring tap, soft glow shadow,
       and a sweep-shimmer that fires on success. */
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 0.6rem 1.4rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    /* Spring on tap-release using a slight overshoot easing. */
    transition: background 0.2s ease,
                transform 0.18s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(162, 155, 254, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-log-main:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(162, 155, 254, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-log-main:active {
    transform: scale(0.94);
    box-shadow: 0 1px 4px rgba(162, 155, 254, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

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

.btn-log-main.btn-success-flash {
    background: #27ae60;
}

/* Specular sweep — a diagonal highlight that travels left→right across the
   button when .btn-success-flash is applied, signalling "saved" without a
   text change. Pure CSS, runs once. */
.btn-log-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    pointer-events: none;
    opacity: 0;
}

.btn-log-main.btn-success-flash::before {
    animation: btn-sheen-sweep 0.7s ease-out;
}

@keyframes btn-sheen-sweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-log-main::before {
        animation: none !important;
    }
    .btn-log-main {
        transition: background 0.15s ease;
    }
}

.btn-log-bottom {
    display: block;
    width: 100%;
    padding: 0.8rem 1.4rem 0.7rem;
    margin-top: 0.5rem;
    font-size: 1.1rem;
    line-height: 1;
}

.log-btn-sub {
    display: block;
    font-size: 0.65rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 0.15rem;
    letter-spacing: 0.02em;
}

.btn-tags-only {
    padding: 0.3rem 0.7rem;
    background: transparent;
    color: var(--primary-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.btn-tags-only:hover {
    background: rgba(162,155,254,0.1);
    border-color: var(--primary-light);
}

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

.subtitle {
    /* Quieter supporting text so it visually defers to the title above. */
    color: rgba(232, 232, 240, 0.65);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.card {
    /* Borderless translucent glass — pure surface, no rim at all so it
       dissolves completely into the watercolour background. */
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}
@media (prefers-reduced-transparency: reduce) {
    .card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.06);
    }
}

#checkin-form.editing .card {
    border-color: var(--primary, #a29bfe);
    box-shadow: 0 0 16px rgba(162, 155, 254, 0.35), var(--shadow);
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #e8e8f0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-header .card-title {
    margin-bottom: 0;
}

.label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.header-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.slider-header .label {
    margin-bottom: 0;
    flex: 1;
}

.btn-log {
    padding: 0.4rem 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-log:hover {
    background: var(--primary-dark);
}

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

.pain-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.pain-number-inline {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pain-label-row {
    text-align: center;
    margin-bottom: 0.25rem;
}

.pain-label {
    color: #e8e8f0;
    font-size: 0.85rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
}

.pain-slider-wrap {
    position: relative;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
}

.pain-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    border-radius: 11px;
    background: url('/static/css/slider-track.png?v=3') center/100% 100% no-repeat;
    pointer-events: none;
    overflow: hidden;
}

.pain-slider-track::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.1);
    pointer-events: none;
}

.pain-slider-track::after {
    /* Specular highlight that tracks the thumb — a soft elliptical sheen
       riding atop the watercolour gradient, giving the slider a "wet glass"
       feel when dragging. --thumb-pos is updated by JS on input. */
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background:
        radial-gradient(
            ellipse 38px 14px at calc(var(--thumb-pos, 0%) + 13px - var(--thumb-pos, 0%) * 26 / 100) 28%,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 35%,
            transparent 70%
        );
    pointer-events: none;
    mix-blend-mode: screen;
}

.pain-slider-texture {
    display: none;
}

.pain-slider {
    position: relative;
    width: 100%;
    height: 32px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.pain-slider::-webkit-slider-runnable-track {
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 11px;
    cursor: pointer;
}

.pain-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 40% 38%, #fff 0%, #e8e4f0 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        0 1px 4px rgba(0,0,0,0.35),
        0 0 0 2px rgba(255,255,255,0.15);
    margin-top: -2px;
    transition: transform 0.12s ease;
}

.pain-slider:active::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow:
        0 2px 8px rgba(0,0,0,0.4),
        0 0 0 3px rgba(255,255,255,0.2);
}

.pain-slider::-moz-range-track {
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 11px;
}

.pain-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    background: radial-gradient(circle at 40% 38%, #fff 0%, #e8e4f0 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow:
        0 1px 4px rgba(0,0,0,0.35),
        0 0 0 2px rgba(255,255,255,0.15);
}

.pain-slider:active::-moz-range-thumb {
    transform: scale(1.12);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #e8e8f0;
    margin-top: 0.25rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
}

.tags-rows {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.tags-rows::-webkit-scrollbar {
    display: none;
}

.tags-rows-inner {
    display: inline-flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tags-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    white-space: nowrap;
}

.tags-grouped {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tag-category-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tag-category-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    opacity: 0.7;
    padding-left: 0.1rem;
}

.tag-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.datetime-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Liquid-Glass datetime pill — replaces the native <input type=
   "datetime-local"> on the home page so we don't get the white iOS
   system sheet. Same vocabulary as the report-page date-range pill and
   the timeline day-title pill. Tap opens the glass calendar (with time
   row) defined in glass-calendar.js. */
.datetime-pill {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    font-size: 0.85rem;
    color: #f0f0f6;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    padding: 0.55rem 0.85rem 0.55rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.datetime-pill::after {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.datetime-pill:hover,
.datetime-pill:focus-visible {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.45);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
    outline: none;
}
.datetime-pill:active { transform: scale(0.98); }
.datetime-pill-icon,
.datetime-pill-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.datetime-pill-icon { color: rgba(167,139,250,0.95); }
.datetime-pill-caret {
    color: rgba(255,255,255,0.55);
    transition: transform 0.18s ease, color 0.18s ease;
}
.datetime-pill:hover .datetime-pill-caret,
.datetime-pill:focus-visible .datetime-pill-caret {
    color: #fff;
    transform: translateY(1px);
}
.datetime-pill-text {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    flex-wrap: wrap;
}
.datetime-pill-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}
.datetime-pill-time {
    font-size: 0.95rem;
    line-height: 1.2;
    font-weight: 600;
    color: rgba(167,139,250,0.95);
}
@media (prefers-reduced-transparency: reduce) {
    .datetime-pill {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .datetime-pill:active { transform: none; }
    .datetime-pill:hover .datetime-pill-caret { transform: none; }
}

/* Liquid-Glass date/time inputs — translucent material with backdrop
   blur, soft top specular rim, and a lavender focus halo so they share
   the same vocabulary as the date-range pill and calendar popover. */
.datetime-input {
    flex: 1;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    color-scheme: dark;
    -webkit-text-fill-color: var(--text);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
}
.datetime-input:hover {
    background: rgba(255,255,255,0.08);
}
.datetime-input:focus {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.55);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
}
.datetime-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}
.datetime-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.btn-datetime-now {
    padding: 0.55rem 1rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: #f0f0f6;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
}
.btn-datetime-now::after {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.btn-datetime-now:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.45);
}
.btn-datetime-now:active {
    transform: scale(0.97);
    background: linear-gradient(180deg, rgba(167,139,250,0.95), rgba(127,99,210,0.95));
    border-color: transparent;
    color: #fff;
}
@media (prefers-reduced-transparency: reduce) {
    .datetime-input,
    .btn-datetime-now {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .btn-datetime-now:active { transform: none; }
}

.tag-input-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.tag-inline-input {
    flex: 1;
    padding: 0.4rem 0.7rem;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.tag-inline-input:focus {
    border-color: var(--primary-light);
}

.tag-inline-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.btn-tag-add {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-tag-add:active {
    background: var(--primary);
    color: white;
}

.tag-btn {
    /* Glass capsule: faint translucent fill + thin border + full pill.
       In the default rest state the chip looks like a frosted-glass bead
       sitting on the card. Active state below brightens the fill to the
       theme primary so the toggled state stays unmistakable. */
    position: relative; /* anchors the widget-favourite star sticker */
    padding: 0.35rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.tag-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    /* Subtle bloom around the active chip so the toggled state pops on
       a dark card without resorting to a hard outline. */
    box-shadow: 0 0 0 1px var(--primary), 0 4px 12px rgba(108, 92, 231, 0.25);
}

.tag-icon {
    margin-right: 0.15rem;
}

.tags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.btn-tags-edit {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.85;
}
.btn-tags-edit:hover {
    opacity: 1;
    border-color: var(--primary-light);
}
.btn-tags-edit.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    opacity: 1;
}

.tag-btn.edit-mode {
    position: relative;
    padding-right: 1.4rem;
    border-style: dashed;
    animation: tagWiggle 0.6s ease-in-out infinite alternate;
}

.tag-btn.edit-mode.active {
    border-style: solid;
}

@keyframes tagWiggle {
    from { transform: rotate(-0.6deg); }
    to   { transform: rotate(0.6deg); }
}

.tag-x-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    background: #ff5a5a;
    color: white;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    cursor: pointer;
    user-select: none;
    z-index: 2;
}
.tag-x-badge:hover { background: #ff3030; }

/* Widget-favourite star: a tiny "sticker" stamped over the pill's right edge —
   deliberately overhangs the capsule (not contained inside it), with a slight
   tilt and drop shadow so it reads as stuck on. */
.tag-fav-star {
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%) rotate(14deg);
    font-size: 11px;
    line-height: 1;
    color: #ffd75e;
    text-shadow: 0 0 1.5px rgba(0,0,0,0.85);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
    pointer-events: none;
    z-index: 1;
}
/* When the delete badge occupies the corner in edit mode, nudge the star down
   so the two never overlap. */
.tag-btn.edit-mode .tag-fav-star {
    top: 72%;
}

/* Widget-favourite toggle inside the tag edit modal */
.tag-fav-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tag-fav-toggle .tag-fav-toggle-star {
    font-size: 0.95rem;
    color: var(--text-light);
    transition: color 0.15s ease, transform 0.15s ease;
}
.tag-fav-toggle.active {
    border-color: rgba(255, 215, 94, 0.55);
    background: rgba(255, 215, 94, 0.10);
}
.tag-fav-toggle.active .tag-fav-toggle-star {
    color: #ffd75e;
    transform: rotate(14deg) scale(1.15);
}

.notes-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
    background: var(--card-bg);
    color: var(--text);
}

.notes-input:focus {
    border-color: var(--primary-light);
}

.btn-primary {
    width: 100%;
    padding: 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

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

.btn-success-flash {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
    transition: background 0.3s;
}

.btn-secondary {
    padding: 0.6rem 1.2rem;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

.btn-danger {
    padding: 0.6rem 1.2rem;
    background: transparent;
    color: var(--danger);
    border: 2px solid var(--danger);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-danger:hover {
    background: var(--danger);
    color: white;
}

.success-msg {
    text-align: center;
    color: var(--success);
    font-weight: 600;
    padding: 1rem;
    margin-top: 0.5rem;
}

.hidden {
    display: none !important;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.entries-list {
    margin-bottom: 1rem;
    border-radius: 16px;
    overflow: hidden;
}

.entry-wrapper {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.entry-wrapper:last-child {
    border-bottom: none;
}

.entry-delete-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25%;
    background: #d9534f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    letter-spacing: 0.02em;
}

.entry-edit-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 25%;
    background: var(--primary, #a29bfe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 0 8px 8px 0;
}

.entry-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    position: relative;
    z-index: 1;
    background: var(--card-bg, rgba(30, 30, 60, 0.85));
    transition: transform 0.3s ease;
    touch-action: pan-y;
    user-select: none;
}

.entry-item.swiping {
    transition: none;
}

.entry-item.swiped {
    transform: translateX(80px);
}

.entry-item.deleting {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.entry-wrapper.collapsing {
    max-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-bottom: none;
}

.undo-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #2d2d4e;
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 500;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 0.9rem;
}

.undo-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.undo-toast-btn {
    background: transparent;
    border: none;
    color: var(--primary-light);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.undo-toast-btn:active {
    background: rgba(162,155,254,0.2);
}

.entry-pain {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.entry-details {
    margin-left: 0.75rem;
    flex: 1;
}

.entry-time {
    font-size: 0.7rem;
    color: var(--text-light);
    width: 42px;
    text-align: right;
    flex-shrink: 0;
}

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.entry-tag {
    font-size: 0.7rem;
    background: var(--bg);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    color: var(--text-light);
}

.chart-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.meds-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}
.meds-toggle-label {
    font-size: 0.75rem;
    color: var(--text-light);
}

.chart-date-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.chart-date-label {
    font-size: 0.85rem;
    color: var(--text-light);
    min-width: 120px;
    text-align: center;
}
.chart-date-label-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
}
.chart-date-label-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.chart-date-label-btn:hover,
.chart-date-label-btn:focus-visible {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.45);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
    outline: none;
}
.chart-date-label-btn:active { transform: scale(0.98); }
.chart-date-label-icon {
    display: inline-flex;
    color: rgba(167,139,250,0.95);
    flex-shrink: 0;
}
.chart-date-label-caret {
    display: inline-flex;
    color: rgba(255,255,255,0.55);
    transition: transform 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}
.chart-date-label-btn:hover .chart-date-label-caret,
.chart-date-label-btn:focus-visible .chart-date-label-caret {
    color: #fff;
    transform: translateY(1px);
}
.chart-date-label-text {
    white-space: nowrap;
}
.chart-nav-arrow {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #f0f0f6;
    font-size: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, opacity 0.2s ease;
}
.chart-nav-arrow:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(167,139,250,0.45);
}
.chart-nav-arrow:active {
    transform: scale(0.94);
    background: rgba(167,139,250,0.25);
}
.chart-nav-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}
.chart-nav-arrow:disabled:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
}
@media (prefers-reduced-transparency: reduce) {
    .chart-nav-arrow {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .chart-nav-arrow:active { transform: none; }
}
.chart-with-nav {
    position: relative;
}
.chart-btn {
    flex: 1;
    padding: 0.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg, rgba(30, 30, 50, 0.85));
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Custom-range chart button — same shape as the preset day buttons but
   with a small calendar icon hugging the label so it reads as a picker
   trigger rather than a fixed preset. Opens the Liquid Glass calendar
   in range mode (see static/js/timeline.js → trends-custom-btn). */
.chart-btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.chart-btn-custom svg {
    flex-shrink: 0;
    opacity: 0.85;
}
.chart-btn-custom.active svg { opacity: 1; }

.summary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.stat-box {
    text-align: center;
    padding: 0.75rem;
    background: var(--bg);
    border-radius: 8px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.15rem;
    display: block;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.days-list {
    max-height: 60vh;
    overflow-y: auto;
}

.day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.day-item:hover {
    background: var(--bg);
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.day-item:last-child {
    border-bottom: none;
}

.day-date {
    font-weight: 600;
    font-size: 0.9rem;
    color: #e8e8f0;
}

.day-stats {
    font-size: 0.8rem;
    color: #b0b0c4;
    margin-top: 0.15rem;
}

.day-avg {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.modal-content {
    background: var(--card-bg);
    /* Top corners use --radius-xl to match the bottom-sheet feel of iOS 26. */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-edge-strong);
    position: relative;
}

/* No-glass-on-glass: while a modal sheet is open, drop the cards' own
   backdrop-filter so iOS Safari isn't stacking two blur layers (which
   muddies the result). Honours Apple's HIG "never stack glass on glass". */
body.modal-open .card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* In-sheet scroll-edge fade — a sticky pseudo-element pinned to the top of
   the modal's scroll viewport that softens content scrolling against the
   sheet's rounded rim. Same pattern as .nav-edge-fade but in miniature. */
.modal-content::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    height: 24px;
    margin: -1.5rem -1.5rem 0 -1.5rem;
    background: linear-gradient(to bottom, var(--card-bg) 30%, transparent);
    pointer-events: none;
    z-index: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--border);
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.label-sub {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-light);
}

.times-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}

.setting-divider {
    height: 1px;
    background: var(--border);
    margin: 0.6rem 0;
    opacity: 0.4;
}

.setting-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.15rem;
}

.toggle {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 28px;
    transition: 0.3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: #e8e8f0;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-sm {
    width: 40px;
    height: 22px;
}

.toggle-sm .toggle-slider {
    border-radius: 22px;
}

.toggle-sm .toggle-slider:before {
    height: 16px;
    width: 16px;
}

.toggle-sm input:checked + .toggle-slider:before {
    transform: translateX(18px);
}

.times-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.time-row {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg);
    border-radius: 16px;
    padding: 0.1rem 0.1rem 0.1rem 0;
}

.time-input {
    width: 5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    outline: none;
    background: rgba(255,255,255,0.06);
    color: var(--text);
    color-scheme: dark;
    text-align: center;
    -webkit-text-fill-color: var(--text);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.time-input:hover { background: rgba(255,255,255,0.10); }

.time-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
}

.time-input::-webkit-datetime-edit,
.time-input::-webkit-datetime-edit-fields-wrapper,
.time-input::-webkit-datetime-edit-hour-field,
.time-input::-webkit-datetime-edit-minute-field,
.time-input::-webkit-datetime-edit-ampm-field,
.time-input::-webkit-datetime-edit-text {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
}

.time-input:focus {
    background: rgba(167,139,250,0.18);
    border-color: rgba(167,139,250,0.55);
    box-shadow:
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
}
@media (prefers-reduced-transparency: reduce) {
    .time-input {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}

.time-remove {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-light);
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-remove:hover {
    opacity: 1;
    color: var(--danger);
}

.insight-item {
    padding: 0.85rem;
    background: var(--bg);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    border-left: 4px solid var(--primary);
}

.insight-item.positive {
    border-left-color: var(--danger);
}

.insight-item.negative {
    border-left-color: var(--success);
}

.insight-item.neutral {
    border-left-color: #74b9ff;
}

.insight-general-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text);
    font-style: italic;
    opacity: 0.9;
}

.insight-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.insight-detail {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.35rem;
    opacity: 0.85;
}

.insight-meta {
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    opacity: 0.6;
}

.home-insights {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.home-insight-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    border-left: 4px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.home-insight-card.insight-dismissing {
    opacity: 0;
    margin-bottom: -0.5rem;
    padding-top: 0;
    padding-bottom: 0;
    transition: all 0.3s ease;
}

.home-insight-card.insight-prediction {
    border-left-color: var(--primary);
    background: linear-gradient(135deg, rgba(162,155,254,0.1), var(--card-bg));
}

.home-insight-card.insight-higher {
    border-left-color: #ff7675;
    background: linear-gradient(135deg, rgba(255,118,117,0.08), var(--card-bg));
}

.home-insight-card.insight-lower {
    border-left-color: #55efc4;
    background: linear-gradient(135deg, rgba(85,239,196,0.08), var(--card-bg));
}

.home-insight-card.insight-info {
    border-left-color: #74b9ff;
    background: linear-gradient(135deg, rgba(116,185,255,0.08), var(--card-bg));
}

.home-insight-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.home-insight-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.home-insight-title {
    font-size: 0.85rem;
    font-weight: 600;
    flex: 1;
}

.home-insight-dismiss {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
}

.home-insight-dismiss:hover {
    opacity: 1;
}

.home-insight-save {
    display: block;
    margin-top: 0.5rem;
    background: rgba(162,155,254,0.15);
    border: 1px solid rgba(162,155,254,0.3);
    color: var(--primary-light);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    width: fit-content;
}

.home-insight-save:hover {
    background: rgba(162,155,254,0.25);
}

.home-insight-save.saved {
    background: rgba(85,239,196,0.15);
    border-color: rgba(85,239,196,0.3);
    color: var(--success);
    cursor: default;
}

.home-insight-body {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.home-insight-detail {
    font-size: 0.72rem;
    opacity: 0.8;
    display: inline-block;
    margin-top: 0.2rem;
}

.home-insight-factors {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.home-insight-factor {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-weight: 600;
}

.home-insight-factor.factor-up {
    background: rgba(255,118,117,0.15);
    color: #ff7675;
}

.home-insight-factor.factor-down {
    background: rgba(85,239,196,0.15);
    color: #55efc4;
}

.home-insight-factor.factor-info {
    background: rgba(116,185,255,0.15);
    color: #74b9ff;
}

.home-insight-tip {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
    line-height: 1.3;
}

.prediction-display {
    text-align: center;
    padding: 0.5rem 0;
}

.risk-meter {
    margin: 0.75rem 0;
}

.risk-meter-bar {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, #5b8a72, #8a7a5b, #8a4a52);
    overflow: visible;
}

.risk-meter-fill {
    display: none;
}

.risk-meter-needle {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 20px;
    background: white;
    border-radius: 2px;
    transform: translateX(-2px);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    transition: left 0.8s ease;
}

.risk-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.3rem;
}

.risk-summary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 0.25rem;
}

.risk-score {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.risk-label {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.risk-low { color: #55efc4; }
.risk-moderate-low { color: #81ecb0; }
.risk-moderate { color: #ffeaa7; }
.risk-moderate-high { color: #ffb347; }
.risk-high { color: #ff7675; }

.risk-message {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.5rem 0;
    line-height: 1.4;
}

.data-quality-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-top: 0.25rem;
}

.quality-basic { background: rgba(255,118,117,0.2); color: #ff7675; }
.quality-moderate { background: rgba(255,234,167,0.2); color: #ffeaa7; }
.quality-good { background: rgba(129,236,176,0.2); color: #81ecb0; }
.quality-strong { background: rgba(85,239,196,0.2); color: #55efc4; }

.risk-factors {
    margin-top: 0.75rem;
}

.factors-title {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.factor-item {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    border-left: 3px solid;
}

.factor-higher {
    background: rgba(255,118,117,0.1);
    border-color: #ff7675;
}

.factor-lower {
    background: rgba(85,239,196,0.1);
    border-color: #55efc4;
}

.factor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.factor-name {
    font-size: 0.85rem;
    font-weight: 600;
}

.factor-info {
    background: rgba(116,185,255,0.1);
    border-color: #74b9ff;
}

.factor-higher .factor-name { color: #ff7675; }
.factor-lower .factor-name { color: #55efc4; }
.factor-info .factor-name { color: #74b9ff; }

.prediction-tips {
    margin-top: 0.75rem;
}

.prediction-tip-item {
    font-size: 0.85rem;
    color: var(--text-light);
    padding: 0.5rem 0.75rem;
    background: rgba(116,185,255,0.08);
    border-radius: 8px;
    margin-bottom: 0.35rem;
    border-left: 3px solid #74b9ff;
    line-height: 1.4;
}

.factor-impact {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
}

.factor-detail {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.15rem;
    line-height: 1.3;
}

.btn-add-tag {
    padding: 0.35rem 0.75rem;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-tag:hover {
    background: var(--primary);
    color: white;
}

.modal-compact {
    max-height: 60vh;
}

.custom-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}

.custom-tag-row:last-child {
    border-bottom: none;
}

.tag-btn.custom {
    border-style: dashed;
}

.tag-btn.food-quick {
    border-style: dashed;
    font-size: 0.7rem;
}

.tag-btn.food-quick.active {
    border-style: solid;
    background: var(--success);
    border-color: var(--success);
    color: #1a1a2e;
}

.tag-btn.custom.active {
    border-style: solid;
}

.tag-edit-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag-cat-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 1rem;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tag-cat-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.hint-text {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.4rem;
}

.btn-log-inline {
    display: block;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: auto;
}

.btn-log-inline:hover {
    background: var(--primary);
    color: white;
}

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

.entry-food {
    font-size: 0.7rem;
    color: var(--warning);
    margin-top: 0.15rem;
}

.entry-note {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.2rem;
    font-style: italic;
    line-height: 1.4;
}

.entry-weather {
    font-size: 0.65rem;
    color: var(--text-light);
    margin-top: 0.2rem;
    opacity: 0.8;
}

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

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-light);
}

.empty-state-enhanced {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1;
    opacity: 0.85;
}

.empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.4rem;
}

.empty-state-sub {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
    max-width: 280px;
    margin: 0 auto;
}

.weather-bg {
    position: fixed;
    /* Bleed 120px past the top edge so a rubber-band pull-down (or the
       status-bar zone during scroll) still shows the watercolour instead
       of the bare webview background. */
    top: -120px;
    left: 0;
    right: 0;
    bottom: 0;
    /* Own compositor layer: without this, iOS WKWebView sometimes fails to
       sample this fixed layer under the sticky header's backdrop-filter
       during an active scroll, flashing a black bar in the status-bar zone. */
    transform: translateZ(0);
    background-size: cover;
    background-position: center center;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 75%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3) 75%, rgba(0,0,0,0) 100%);
}

html[data-theme="weather"] .weather-bg {
    opacity: 1;
    transition: none;
}

.weather-bg.visible {
    opacity: 1;
}

.theme-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

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

.theme-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.theme-option.active {
    border-color: var(--primary);
    background: rgba(162, 155, 254, 0.15);
}

.theme-option.locked {
    opacity: 0.7;
}

.theme-preview {
    width: 100%;
    height: 48px;
    border-radius: 8px;
}

.dark-preview {
    background: linear-gradient(135deg, #1a1a2e, #222244, #3a3a5c);
}

.weather-preview {
    background: linear-gradient(135deg, #87CEEB, #E0F0FF, #ffd3b6);
}

.midnight-preview {
    background: linear-gradient(135deg, #0d0d1a, #1a1a3e, #2d1b69);
}

.ocean-preview {
    background: linear-gradient(135deg, #0a2a3f, #134e6f, #1a6b5a);
}

.seasonal-preview {
    background: linear-gradient(135deg, #c9e4ca, #87CEEB, #e8a87c, #b0c4de);
}

.premium-theme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-top: 0.25rem;
    background: rgba(162, 155, 254, 0.2);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.premium-badge.owned {
    background: rgba(0, 184, 148, 0.2);
    color: #00b894;
}

.inline-purchase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    width: 100%;
}

.inline-purchase.hidden {
    display: none;
}

.inline-purchase-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.purchase-currency {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
}

.purchase-input-sm {
    width: 3.5rem;
    padding: 0.25rem 0.35rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.purchase-input-sm:focus {
    outline: none;
    border-color: var(--primary);
}

.btn-unlock {
    width: 100%;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-unlock:hover {
    opacity: 0.85;
}

.btn-unlock:disabled {
    opacity: 0.5;
    cursor: default;
}

.unlock-note {
    font-size: 0.55rem;
    color: var(--text-light);
    text-align: center;
    opacity: 0.7;
}

.weather-gallery {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.weather-gallery.visible {
    max-height: 1200px;
    opacity: 1;
    margin-top: 0.5rem;
}

.gallery-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 0.5rem;
}

.gallery-toggle:active {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
}

.gallery-toggle-arrow {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.gallery-item span {
    font-size: 0.65rem;
    color: var(--text-light);
    text-align: center;
}

body.theme-weather .card {
    /* Liquid-Glass lensing: stronger blur + saturate concentrates the
       colour from the watercolour bg behind the card instead of muddying
       it (plain blur scatters light, lensing concentrates it).
       Tint gradient is layered on top so the theme accent still reads. */
    background:
        linear-gradient(180deg, var(--card-tint), transparent 70%),
        rgba(34, 34, 68, 0.42);
    backdrop-filter: blur(18px) saturate(180%) contrast(105%);
    -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(105%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.35), inset 0 1px 0 var(--glass-edge-strong);
}

body.theme-weather .nav-bar {
    /* Drop alpha to 0.25 on weather theme so the watercolour really shows
       through the bar — the .nav-edge-fade strip handles legibility of
       content behind the bar, so the bar itself can be near-transparent. */
    background: rgba(16, 16, 36, 0.25);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 var(--glass-edge-strong);
}

body.theme-weather:not(.is-scrolled) .nav-bar {
    background: rgba(16, 16, 36, 0.12);
}

body.theme-midnight,
html.theme-midnight {
    --bg: #0d0d1a;
    --card-bg: #161630;
    --border: #2a2a4a;
    --primary: #b8a9ff;
    --primary-light: #d4ccff;
    --primary-dark: #7c6dd8;
    /* Slightly cooler, deeper purple tint than the default theme. */
    --card-tint: rgba(184, 169, 255, 0.06);
}

body.theme-midnight .nav-bar {
    background: rgba(10, 10, 21, 0.7);
}

body.theme-ocean,
html.theme-ocean {
    --bg: #0a1e2e;
    --card-bg: #122d3e;
    --border: #1e4a5f;
    --primary: #6ec6c8;
    --primary-light: #8edadc;
    --primary-dark: #4a9ea0;
    --success: #55efc4;
    /* Faint cyan tint so cards in the ocean theme feel cool / aquatic. */
    --card-tint: rgba(110, 198, 200, 0.07);
}

body.theme-ocean .nav-bar {
    background: rgba(8, 24, 34, 0.7);
}

@media (min-width: 768px) {
    .container {
        padding: 1.5rem;
    }

    .nav-bar {
        /* Docked to the TOP on desktop, full-width and flush to the edge,
           safe-area aware. Mirror of the mobile bottom-docked bar. */
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 0.75rem 0.55rem;
        border-radius: 0;
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.35),
            inset 0 -1px 0 var(--glass-edge);
    }

    /* Mirror the scroll-edge fade to BELOW the top-docked nav on desktop. */
    .nav-edge-fade {
        top: calc(env(safe-area-inset-top, 0px) + 60px);
        bottom: auto;
        background: linear-gradient(to top, transparent, var(--bg));
        -webkit-mask-image: linear-gradient(to top, transparent, black);
                mask-image: linear-gradient(to top, transparent, black);
    }

    body {
        /* Top inset = nav height (~60px) + safe-area + breathing room. */
        padding-top: calc(env(safe-area-inset-top, 0px) + 76px);
        padding-bottom: 0;
    }

    /* Sticky page header pins below the desktop top nav, not at viewport
       top — otherwise it would slide under the nav. Match the desktop
       container padding so the glass pane reaches the column edges. */
    .page-header {
        top: calc(env(safe-area-inset-top, 0px) + 76px);
        margin: 0 -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.journal-page {
    position: relative;
}

.journal-paper {
    background: rgba(30, 28, 45, 0.82);
    border-radius: 4px;
    padding: 1.75rem 1.5rem 1.5rem;
    margin: 0.5rem 0;
    position: relative;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.3),
        0 8px 24px rgba(0,0,0,0.25),
        inset 0 0 60px rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.journal-paper::before {
    content: '';
    position: absolute;
    left: 2.5rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(180,140,140,0.15);
}

.journal-paper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            transparent,
            transparent 1.75rem,
            rgba(255,255,255,0.015) 1.75rem,
            rgba(255,255,255,0.015) 1.8rem
        );
}

.theme-weather .journal-paper {
    background: rgba(30, 28, 45, 0.65);
}

.theme-midnight .journal-paper {
    background: rgba(8, 6, 25, 0.8);
}

.theme-ocean .journal-paper {
    background: rgba(8, 24, 40, 0.75);
}

.journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
}

.journal-nav-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journal-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.15);
}

.journal-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.journal-date-block {
    text-align: center;
}

.journal-date-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 2px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.4);
    font-weight: 600;
}

.journal-date-main {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 12px rgba(0,0,0,0.4);
}

.journal-body {
    min-height: 300px;
}

.journal-loading {
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
    font-style: italic;
}

.journal-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.journal-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.journal-empty-sub {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    opacity: 0.6;
}

.journal-empty-note {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 400px;
}

.journal-empty-note textarea {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: var(--text);
    padding: 0.75rem;
    font-size: 0.9rem;
    resize: vertical;
    margin-bottom: 0.5rem;
}

.journal-empty-note .journal-add-btn {
    width: 100%;
}

.journal-section {
    margin-bottom: 1.25rem;
    background: none;
    border-radius: 0;
    padding: 0.5rem 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
}

.journal-section:last-of-type {
    border-bottom: none;
}

.journal-section::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.5rem;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.6;
}

.journal-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-light);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.journal-bullet {
    font-size: 0.6rem;
    margin-right: 6px;
    vertical-align: middle;
}

.journal-summary-cards {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.journal-stat-card {
    flex: 1;
    min-width: 60px;
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
}

.journal-stat-value {
    font-size: 1.5rem;
    font-weight: 300;
}

.journal-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-top: 2px;
}

.journal-timeline {
    position: relative;
}

.journal-timeline::before {
    content: '';
    position: absolute;
    left: 60px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: rgba(255,255,255,0.1);
}

.journal-timeline-entry {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
    gap: 0.75rem;
}

.journal-timeline-time {
    width: 50px;
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: right;
    padding-top: 2px;
    flex-shrink: 0;
}

.journal-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    box-shadow: 0 0 6px rgba(255,255,255,0.15);
    position: relative;
    z-index: 1;
}

.journal-timeline-detail {
    flex: 1;
}

.journal-timeline-pain {
    font-size: 1rem;
    font-weight: 500;
}

.journal-timeline-label {
    font-size: 0.75rem;
    color: var(--text-light);
}

.journal-timeline-note {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
    margin-top: 3px;
    opacity: 0.8;
}

.journal-medicine-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.journal-medicine-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.journal-medicine-icon {
    font-size: 1rem;
}

.journal-medicine-name {
    font-weight: 500;
    flex: 1;
}

.journal-medicine-time {
    font-size: 0.75rem;
    color: var(--text-light);
}

.journal-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.journal-tag {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}

.journal-tag.food {
    border-color: rgba(255,200,100,0.3);
}

.journal-tag.drink {
    border-color: rgba(100,200,255,0.3);
}

.journal-weather-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.journal-weather-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 80px;
    padding: 0.5rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}

.journal-weather-icon {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.journal-weather-val {
    font-size: 1.1rem;
    font-weight: 500;
}

.journal-weather-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    margin-top: 2px;
}

.journal-note-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.journal-note-item:last-child {
    border-bottom: none;
}

.journal-note-time {
    font-size: 0.7rem;
    color: var(--text-light);
    flex-shrink: 0;
    min-width: 60px;
}

.journal-note-text {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.4;
}

.journal-note-user {
    background: rgba(162,155,254,0.08);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border-bottom: none;
    margin-top: 4px;
}

.journal-note-delete {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.5;
    flex-shrink: 0;
}

.journal-note-delete:hover {
    opacity: 1;
}

.journal-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.journal-insight-item:last-child {
    border-bottom: none;
}

.journal-insight-icon {
    flex-shrink: 0;
}

.journal-insight-text {
    flex: 1;
    font-size: 0.85rem;
    line-height: 1.4;
}

.journal-add-note {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.journal-add-note textarea {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    resize: none;
    font-family: inherit;
}

.journal-add-note textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.journal-add-btn {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
}

.journal-add-btn:hover {
    background: var(--primary-dark);
}

.journal-actions {
    padding: 1rem 0;
    text-align: center;
}

.journal-print-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.journal-print-btn:hover {
    background: rgba(255,255,255,0.15);
}

.journal-glance-notes {
    margin-bottom: 0.75rem;
}

.journal-glance-notes textarea {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--text);
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}

.journal-glance-notes textarea::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}

.journal-glance-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.journal-ai-btn {
    background: rgba(138, 120, 200, 0.25);
    color: #c4b5fd;
    border: 1px solid rgba(138, 120, 200, 0.3);
    border-radius: 8px;
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s;
}

.journal-ai-btn:hover {
    background: rgba(138, 120, 200, 0.4);
}

.journal-ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.journal-glance-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.journal-glance-item:last-child {
    border-bottom: none;
}

.journal-glance-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text);
    flex: 1;
}

.journal-ai-summary {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    font-style: italic;
    opacity: 0.9;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.journal-weather-cond .journal-weather-val {
    font-size: 0.85rem;
    text-transform: capitalize;
}

.journal-weather-manual-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.journal-weather-manual-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.journal-weather-manual-row label {
    font-size: 0.78rem;
    color: var(--text-light);
}

.journal-weather-manual-row input,
.journal-weather-manual-row select {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text);
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.journal-weather-manual-row select {
    appearance: auto;
}

.journal-weather-manual-form > .journal-add-btn {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}

.journal-inline-note {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.journal-inline-note textarea {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    resize: none;
    font-family: inherit;
}

.journal-inline-note textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.journal-ai-loading {
    color: var(--text-light);
    font-size: 0.8rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.journal-ai-loading .dot-pulse {
    display: inline-block;
    animation: dotPulse 1.4s infinite;
}

@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

.report-page {
    padding-bottom: 5rem;
}

.report-print-header,
.report-print-footer {
    display: none;
}

.clinical-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.clinical-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    padding: 0.7rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}

.clinical-summary-item strong {
    font-size: 1.1rem;
}

.clinical-summary-item > span:not(.clinical-compare) {
    color: var(--text-light);
    font-size: 0.72rem;
}

.clinical-compare {
    margin-top: 0.2rem;
    font-size: 0.66rem;
    font-weight: 600;
}

.clinical-compare.improved { color: #65c18c; }
.clinical-compare.worsened { color: #e38a8a; }
.clinical-compare.neutral { color: var(--text-light); opacity: 0.75; }

.clinical-summary-note,
.med-effectiveness-note {
    margin: 0.65rem 0 0;
    color: var(--text-light);
    font-size: 0.68rem;
    line-height: 1.4;
}

.report-points-list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.4;
}

.med-effectiveness {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.med-effectiveness-title {
    margin-bottom: 0.45rem;
    color: var(--text-light);
    font-size: 0.76rem;
    font-weight: 600;
}

.med-effectiveness-table {
    display: grid;
    gap: 0.15rem;
    overflow-x: auto;
}

.med-effectiveness-row {
    display: grid;
    grid-template-columns: minmax(7rem, 1.5fr) repeat(5, minmax(2.8rem, 0.7fr));
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.25rem;
    font-size: 0.7rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.med-effectiveness-head {
    color: var(--text-light);
    font-weight: 600;
}

.weather-coverage {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem;
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    font-size: 0.72rem;
}

.weather-coverage span {
    color: var(--text-light);
}

.weather-report-block {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.weather-report-title {
    margin-bottom: 0.55rem;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.weather-band-table,
.attack-weather-table {
    display: grid;
    gap: 0.15rem;
    overflow-x: auto;
}

.weather-band-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 1fr) repeat(4, minmax(5rem, 1fr));
    gap: 0.25rem;
    min-width: 28rem;
    align-items: stretch;
}

.weather-band-row > span {
    padding: 0.4rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.035);
    font-size: 0.68rem;
}

.weather-band-head > span {
    color: var(--text-light);
    font-weight: 700;
    background: rgba(255,255,255,0.06);
}

.weather-factor-name {
    display: flex;
    align-items: center;
    font-weight: 650;
}

.weather-metric-cell {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.weather-metric-cell strong {
    font-size: 0.75rem;
}

.weather-metric-cell small,
.weather-metric-empty {
    color: var(--text-light);
    font-size: 0.62rem;
}

.weather-reliability {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
}

.weather-reliability.insufficient {
    color: #d9a6a6;
    background: rgba(192,96,64,0.12);
}

.weather-reliability.early {
    color: #e0c36b;
    background: rgba(212,160,32,0.12);
}

.weather-reliability.established {
    color: #79c99a;
    background: rgba(74,154,106,0.12);
}

.weather-baseline p {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
}

.weather-movement-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.weather-movement-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
}

.weather-movement-grid strong {
    font-size: 0.82rem;
}

.weather-movement-grid span,
.weather-method-note {
    color: var(--text-light);
    font-size: 0.64rem;
    line-height: 1.4;
}

.weather-method-note {
    margin: 0.5rem 0 0;
}

.attack-weather-row {
    display: grid;
    grid-template-columns: 1.1fr 0.65fr repeat(4, 1fr);
    gap: 0.25rem;
    min-width: 34rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.66rem;
}

.attack-weather-head {
    color: var(--text-light);
    font-weight: 700;
    background: rgba(255,255,255,0.04);
}

@media (max-width: 560px) {
    .clinical-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .med-effectiveness-row {
        grid-template-columns: minmax(5.2rem, 1.3fr) repeat(5, minmax(2.3rem, 0.65fr));
        gap: 0.2rem;
        font-size: 0.62rem;
        min-width: 34rem;
    }
    .weather-movement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.report-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.report-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.report-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.25rem 0 0;
}

.report-period-selector {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.report-period-btn {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: var(--text-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.report-period-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.report-period-btn:hover:not(.active) {
    background: rgba(255,255,255,0.1);
}

.report-custom-range {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: center;
    align-items: flex-end;
    margin: -0.75rem 0 1.5rem;
}

.report-custom-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--text-light);
}

.report-custom-field label {
    opacity: 0.75;
    text-align: left;
    padding-left: 0.25rem;
}

.report-custom-field input[type="date"] {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    color: var(--text);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color-scheme: dark;
    min-width: 9rem;
}

.report-custom-field input[type="date"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* Liquid-Glass date-field pill — replaces the OS-native <input type="date">
   so we can pop a custom calendar that matches the rest of the app's
   glass language. */
.report-date-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 9.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.report-date-field::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    pointer-events: none;
}
.report-date-field:hover,
.report-date-field:focus-visible {
    background: rgba(255,255,255,0.12);
    border-color: rgba(167,139,250,0.45);
    outline: none;
}
.report-date-field:active {
    transform: scale(0.98);
}
.report-date-field-label {
    flex: 1;
    color: inherit;
    white-space: nowrap;
}
.report-date-field:not(.has-value) .report-date-field-label {
    opacity: 0.55;
}
.report-date-field-icon {
    flex-shrink: 0;
    opacity: 0.7;
}

.report-custom-apply {
    height: 2.1rem;
}

/* ---------- Glass Calendar popover ---------- */
.glass-cal-scrim {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: transparent;
}
/* Range-mode is a centered modal — dim the page so the calendar reads
   as the focused surface. Stays out of glass-on-glass territory because
   the content card under it doesn't sit on top of another glass layer. */
.glass-cal-scrim.is-modal {
    background: rgba(8, 6, 24, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    /* Scrim ramps in slightly faster than the calendar so the page is
       already settling back as the glass surface forms on top. */
    animation: glass-cal-scrim-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes glass-cal-scrim-in {
    from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0);
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}
.glass-calendar {
    position: absolute;
    z-index: 9999;
    width: 18rem;
    max-width: calc(100vw - 16px);
    padding: 0.85rem;
    border-radius: 18px;
    background: rgba(28, 26, 48, 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08);
    color: #f5f5fa;
    isolation: isolate;
    overflow: hidden;
    transform-origin: top center;
    /* Liquid Glass emergence: the material "forms" rather than pops.
       Subtle lift + a brief self-blur that settles to crisp, with a soft
       iOS-style spring (out-quint). No overshoot — overshoot reads as
       cartoonish on glass; the material should feel weighty. */
    animation: glass-cal-emerge 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes glass-cal-emerge {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
        filter: blur(6px);
    }
    60% {
        filter: blur(1px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* Range mode is centered via translate(-50%,-50%) — the emerge keyframes
   above would clobber that transform mid-animation. Use a dedicated
   keyframe set that bakes the centering into every stop. */
.glass-calendar.is-range,
.glass-calendar.is-datetime {
    transform-origin: center center;
    animation: glass-cal-emerge-center 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes glass-cal-emerge-center {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.94);
        filter: blur(8px);
    }
    60% {
        filter: blur(1px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}
/* Soft inner gradient — top half lit, bottom dissolves into the page. */
.glass-calendar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}
/* Specular top-rim highlight — the signature "lit edge" of the material. */
.glass-calendar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    pointer-events: none;
}
.glass-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.65rem;
    padding: 0 0.15rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
.glass-cal-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}
.glass-cal-subtitle {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(167,139,250,0.85);
}
.glass-cal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.glass-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.glass-cal-nav:hover {
    background: rgba(255,255,255,0.14);
}
.glass-cal-nav:active {
    transform: scale(0.94);
}
.glass-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    position: relative;
    z-index: 1;
}
.glass-cal-day-header {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    padding: 0.35rem 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.glass-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #f0f0f6;
    font-size: 0.85rem;
    font-family: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.glass-cal-blank {
    cursor: default;
}
.glass-cal-day:hover {
    background: rgba(255,255,255,0.10);
}
.glass-cal-day:active {
    transform: scale(0.92);
}
.glass-cal-day.is-today {
    box-shadow: inset 0 0 0 1px rgba(167,139,250,0.55);
    color: #fff;
}
.glass-cal-day.is-selected {
    background: linear-gradient(180deg, rgba(167,139,250,0.95), rgba(127,99,210,0.95));
    color: #fff;
    box-shadow:
        0 4px 14px rgba(127,99,210,0.4),
        inset 0 1px 0 rgba(255,255,255,0.35);
}
.glass-cal-day.is-disabled {
    color: rgba(255,255,255,0.18);
    cursor: not-allowed;
}
.glass-cal-day.is-disabled:hover {
    background: transparent;
    transform: none;
}

/* ---- Range mode ---- */
.glass-calendar.is-range {
    width: 20rem;
    max-width: calc(100vw - 24px);
}
/* ---- Datetime mode (single date + time row) ---- */
.glass-calendar.is-datetime {
    width: 20rem;
    max-width: calc(100vw - 24px);
}
.glass-cal-summary {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}
.glass-cal-sum-chip {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    -webkit-tap-highlight-color: transparent;
}
.glass-cal-sum-chip:hover { background: rgba(255,255,255,0.08); }
.glass-cal-sum-chip:active { transform: scale(0.98); }
.glass-cal-sum-chip.is-active {
    background: rgba(167,139,250,0.18);
    border-color: rgba(167,139,250,0.55);
    box-shadow: 0 0 0 2px rgba(167,139,250,0.18);
}
.glass-cal-sum-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.glass-cal-sum-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.glass-cal-sum-chip:not(.has-value) .glass-cal-sum-value {
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}
.glass-cal-sum-arrow {
    color: rgba(255,255,255,0.45);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* In-range fill — square-ish band linking start to end. */
.glass-cal-day.is-in-range {
    background: rgba(167,139,250,0.18);
    border-radius: 6px;
    color: #fff;
}
.glass-cal-day.is-in-range:hover {
    background: rgba(167,139,250,0.28);
}
/* Start/end caps stay circular and stand on top of the band visually. */
.glass-cal-day.is-range-start,
.glass-cal-day.is-range-end {
    background: linear-gradient(180deg, rgba(167,139,250,0.95), rgba(127,99,210,0.95));
    color: #fff;
    border-radius: 50%;
    box-shadow:
        0 4px 14px rgba(127,99,210,0.4),
        inset 0 1px 0 rgba(255,255,255,0.35);
    position: relative;
    z-index: 1;
}

/* Time row inside the glass calendar (withTime mode) — sits between
   the day grid and the Cancel/Confirm footer. Mirrors the iOS native
   layout (label on the left, time on the right) but in dark glass so
   it reads as the same surface as the calendar above it. */
.glass-cal-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.5rem 0.25rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
.glass-cal-time-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.glass-cal-time-input {
    padding: 0.5rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    background: rgba(255,255,255,0.06);
    color: #fff;
    color-scheme: dark;
    -webkit-text-fill-color: #fff;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    outline: none;
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.glass-cal-time-input:hover { background: rgba(255,255,255,0.10); }
.glass-cal-time-input:focus {
    background: rgba(167,139,250,0.18);
    border-color: rgba(167,139,250,0.55);
    box-shadow:
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
}
.glass-cal-time-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}
@media (prefers-reduced-transparency: reduce) {
    .glass-cal-time-input {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}

.glass-cal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
    z-index: 1;
}
/* Inside withTime mode the time row already provides the divider, so
   the footer just gets a small spacer. */
.glass-calendar.is-datetime .glass-cal-footer {
    margin-top: 0.65rem;
    padding-top: 0;
    border-top: none;
}
.glass-cal-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    transition: background 0.15s ease, transform 0.08s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.glass-cal-btn:hover { background: rgba(255,255,255,0.12); }
.glass-cal-btn:active { transform: scale(0.97); }
.glass-cal-apply {
    background: linear-gradient(180deg, rgba(167,139,250,0.95), rgba(127,99,210,0.95));
    border-color: transparent;
    box-shadow:
        0 6px 18px rgba(127,99,210,0.35),
        inset 0 1px 0 rgba(255,255,255,0.35);
}
.glass-cal-apply:hover { filter: brightness(1.05); }
.glass-cal-apply:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

@media (prefers-reduced-transparency: reduce) {
    .glass-calendar {
        background: rgba(24, 22, 42, 0.97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .glass-cal-scrim.is-modal {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(8, 6, 24, 0.85);
    }
    .report-date-field {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .glass-calendar,
    .glass-calendar.is-range,
    .glass-calendar.is-datetime,
    .glass-cal-scrim.is-modal {
        animation: none;
    }
    /* Even without animation, the centered modal still needs its
       translate so it stays centered. */
    .glass-calendar.is-range,
    .glass-calendar.is-datetime {
        transform: translate(-50%, -50%);
    }
    .report-date-field:active,
    .glass-cal-day:active,
    .glass-cal-nav:active,
    .glass-cal-btn:active,
    .glass-cal-sum-chip:active {
        transform: none;
    }
}

.report-pdf-hint {
    text-align: center;
    color: var(--text-light);
    opacity: 0.7;
    font-size: 0.72rem;
    margin: 0.5rem 0 0;
}

.report-loading, .report-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.report-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.report-empty-sub {
    font-size: 0.8rem;
    color: var(--text-light);
    opacity: 0.7;
}

.report-date-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Liquid-Glass date range pill — translucent material + top specular
   rim so it visually matches the calendar that pops out of it. The icon
   and chevron act as affordances so the pill clearly reads as a tappable
   date control rather than a static label. */
.report-date-range {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    font-size: 0.85rem;
    color: #f0f0f6;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 0.55rem 0.95rem 0.55rem 0.85rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
}
/* 1px specular highlight on the lit top rim — the signature material
   detail. Soft falloff at the edges via mask, never visible as a hard
   border. */
.report-date-range::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.report-date-range:hover,
.report-date-range:focus-visible {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.45);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
    outline: none;
}
.report-date-range:active {
    transform: scale(0.98);
}
.report-date-range-icon,
.report-date-range-caret {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(167,139,250,0.95);
}
.report-date-range-caret {
    color: rgba(255,255,255,0.45);
    margin-left: 0.15rem;
    transition: transform 0.18s ease, color 0.18s ease;
}
.report-date-range:hover .report-date-range-caret,
.report-date-range:focus-visible .report-date-range-caret {
    color: rgba(255,255,255,0.85);
    transform: translateY(1px);
}
.report-date-range-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}
.report-date-range-eyebrow {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(167,139,250,0.85);
    line-height: 1;
}
.report-date-range-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (prefers-reduced-transparency: reduce) {
    .report-date-range {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28, 26, 48, 0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .report-date-range:active { transform: none; }
    .report-date-range:hover .report-date-range-caret,
    .report-date-range:focus-visible .report-date-range-caret { transform: none; }
}

@media print {
    .report-date-range {
        background: transparent;
        border: none;
        padding: 0;
        color: inherit;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .report-date-range::after { display: none; }
    .report-date-range-icon,
    .report-date-range-caret,
    .report-date-range-eyebrow {
        display: none !important;
    }
    .report-date-range-value {
        font-size: 1rem;
        color: inherit;
    }
}

/* Print-only portrait replica of the Pain Trend. Time runs from top to bottom,
   with each six-month block occupying its own sheet at the end of the report. */
.report-print-landscape { display: none; }
@page report-landscape {
    size: A4 portrait;
    margin: 1.7cm 1.2cm 1.55cm;
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        color: #555;
        font-size: 8pt;
    }
}
@media print {
    .report-print-landscape.has-print-chart {
        display: block;
        page: report-landscape;
        break-before: page;
        page-break-before: always;
        text-align: center;
    }
    .report-print-landscape-title {
        font-size: 1.15rem;
        font-weight: 600;
        color: #222 !important;
        margin: 0 0 0.6rem;
    }
    .report-print-trend-page {
        page: report-landscape;
        break-after: page;
        page-break-after: always;
    }
    .report-print-trend-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }
    .report-print-trend-page + .report-print-trend-page {
        break-before: page;
        page-break-before: always;
    }
    .report-print-trend-page img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 23cm;
        object-fit: contain;
        margin: 0 auto;
    }
    .report-print-trend-range {
        margin: -0.2rem 0 0.45rem;
        color: #555 !important;
        font-size: 0.8rem;
    }
}

.report-stats-grid .journal-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem;
}

.report-attacks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.report-attack-item {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--accent, #7c6fe0);
}
.report-attack-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 0.25rem;
}
.report-attack-details {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-light);
    flex-wrap: wrap;
}
.report-attack-peak {
    font-weight: 600;
}
.report-attack-duration {
    opacity: 0.7;
}
.report-attack-symptoms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.report-attack-symptoms .journal-tag {
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
}

.report-severity-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    padding: 0.5rem 0;
}

.report-severity-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}

.report-bar-track {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.report-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 3px;
    transition: height 0.3s;
}

.report-bar-label {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 4px;
}

.report-bar-count {
    font-size: 0.65rem;
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 4px;
}

.report-severity-legend {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.report-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.report-list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.report-list-icon {
    font-size: 1rem;
}

.report-list-name {
    flex: 1;
    font-weight: 500;
}

.report-list-count {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 600;
}

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

.report-dow-section {
    margin-top: 1rem;
}

.report-dow-title {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.report-dow-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
    text-align: center;
}

.report-dow-item {
    padding: 0.4rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.report-dow-val {
    font-size: 1.1rem;
    font-weight: 600;
}

.report-dow-label {
    font-size: 0.65rem;
    color: var(--text-light);
}

.report-generate-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.03);
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.report-generate-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent);
    color: var(--accent);
}

.report-ai-content {
    line-height: 1.7;
    font-size: 0.9rem;
}

.report-ai-content strong {
    display: block;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.report-ai-content p {
    margin: 0.5rem 0;
}

.report-cached-badge {
    font-size: 0.7rem;
    color: var(--text-light);
    opacity: 0.6;
    margin-top: 0.5rem;
    text-align: right;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 1.7cm 1.2cm 1.55cm;
        @bottom-right {
            content: "Page " counter(page) " of " counter(pages);
            color: #555;
            font-size: 8pt;
        }
    }

    body {
        background: white !important;
        color: #222 !important;
        padding: 0 !important;
    }

    .report-print-header,
    .report-print-footer {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 10;
        justify-content: space-between;
        color: #555 !important;
        font-size: 8pt;
        background: white;
    }

    .report-print-header {
        top: -1.15cm;
        padding-bottom: 0.15cm;
        border-bottom: 0.5pt solid #bbb;
    }

    .report-print-footer {
        bottom: -1.05cm;
        padding-top: 0.15cm;
        border-top: 0.5pt solid #bbb;
    }

    .report-print-page-number { display: none; }

    .nav-bar,
    .no-print,
    .journal-nav-btn,
    .journal-add-note,
    .journal-actions,
    .report-period-selector,
    .report-generate-btn,
    #weather-bg {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .journal-page {
        padding: 0;
    }

    .journal-paper {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        padding: 1.5rem !important;
        backdrop-filter: none !important;
    }

    .journal-paper::before {
        background: rgba(180,100,100,0.25) !important;
    }

    .journal-paper::after {
        display: none !important;
    }

    .journal-header {
        border-bottom: 2px solid #333;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    .journal-header::before {
        content: 'Migraine Journal — Patient Report';
        display: block;
        font-size: 1.4rem;
        font-weight: 700;
        color: #222;
        margin-bottom: 0.25rem;
    }

    .journal-date-label {
        color: #555 !important;
    }

    .journal-date-main {
        color: #222 !important;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .journal-section {
        background: none !important;
        border: 1px solid #ddd !important;
        margin-bottom: 0.75rem;
    }

    .report-clinical-summary,
    .report-points-section,
    #stats-section,
    #severity-section,
    .report-attack-item,
    .report-list-item,
    .journal-stat-card,
    .clinical-summary-item,
    .med-effectiveness-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .journal-section::before {
        background: #333 !important;
    }

    .journal-section-title {
        color: #333 !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 0.3rem;
    }

    .journal-stat-card {
        background: #f5f5f5 !important;
    }

    .journal-stat-value {
        color: #222 !important;
    }

    .journal-stat-label {
        color: #555 !important;
    }

    .journal-timeline::before {
        background: #ccc !important;
    }

    .journal-timeline-time {
        color: #555 !important;
    }

    .journal-timeline-label {
        color: #555 !important;
    }

    .journal-timeline-note {
        color: #555 !important;
    }

    .journal-tag {
        background: #f0f0f0 !important;
        border-color: #ccc !important;
        color: #333 !important;
    }

    .journal-weather-item {
        background: #f5f5f5 !important;
    }

    .journal-weather-val {
        color: #222 !important;
    }

    .journal-weather-label {
        color: #555 !important;
    }

    .journal-note-text {
        color: #333 !important;
    }

    .journal-note-time {
        color: #666 !important;
    }

    .journal-note-user {
        background: #f8f8fc !important;
    }

    .journal-insight-text {
        color: #333 !important;
    }

    .journal-note-delete {
        display: none !important;
    }

    .journal-medicine-name,
    .journal-medicine-time {
        color: #333 !important;
    }

    .journal-ai-summary {
        color: #333 !important;
        font-style: italic;
    }

    .journal-ai-loading {
        display: none !important;
    }

    .journal-section::before {
        background: #333 !important;
    }

    .journal-section {
        border-bottom-color: #ddd !important;
    }

    .report-header {
        margin-bottom: 0.5rem;
    }

    .report-title {
        color: #222 !important;
        font-size: 1.6rem;
    }

    .report-title::after {
        content: ' — Patient Report';
        font-weight: 400;
        font-size: 1rem;
    }

    .report-subtitle {
        display: none !important;
    }

    .report-date-range {
        color: #555 !important;
        border-bottom-color: #ccc !important;
    }

    .report-severity-bars {
        height: 80px;
    }

    .report-bar-label, .report-bar-count {
        color: #333 !important;
    }

    .report-list-name, .report-list-count {
        color: #333 !important;
    }

    .report-dow-val {
        color: #333 !important;
    }

    .report-dow-label {
        color: #555 !important;
    }

    .report-ai-content {
        color: #222 !important;
    }

    .report-ai-content strong {
        color: #111 !important;
    }

    .report-cached-badge {
        display: none !important;
    }

    .report-chart-container {
        height: 185px;
        filter: contrast(1.2) saturate(0.9);
    }

    .clinical-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .clinical-summary-item,
    .weather-coverage {
        color: #222 !important;
        background: #f5f5f5 !important;
        border-color: #ddd !important;
    }

    .clinical-summary-item > span:not(.clinical-compare),
    .clinical-summary-note,
    .med-effectiveness-note,
    .med-effectiveness-title,
    .weather-coverage span,
    .med-effectiveness-head {
        color: #555 !important;
    }

    .clinical-compare.improved { color: #176b3a !important; }
    .clinical-compare.worsened { color: #9c2f2f !important; }

    .report-points-list {
        color: #222 !important;
    }

    .med-effectiveness-row {
        color: #222 !important;
        border-bottom-color: #ddd !important;
    }

    #weather-section-report:not(.hidden) {
        break-before: page;
        page-break-before: always;
        box-sizing: border-box;
        padding: 0.75rem !important;
    }

    #weather-section-report .journal-weather-grid,
    #weather-section-report .report-dow-section,
    #weather-section-report .report-dow-grid,
    #weather-section-report .weather-coverage,
    #weather-section-report .weather-band-row,
    #weather-section-report .weather-baseline,
    #weather-section-report .weather-movement-grid,
    #weather-section-report .attack-weather-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    #weather-section-report .weather-band-row > span,
    #weather-section-report .weather-movement-grid > div,
    #weather-section-report .attack-weather-head {
        color: #222 !important;
        background: #f5f5f5 !important;
        border-color: #ddd !important;
    }

    #weather-section-report .weather-report-title,
    #weather-section-report .weather-metric-cell small,
    #weather-section-report .weather-movement-grid span,
    #weather-section-report .weather-method-note,
    #weather-section-report .attack-weather-head {
        color: #555 !important;
    }

    #weather-section-report .weather-reliability.insufficient { color: #8d3d32 !important; }
    #weather-section-report .weather-reliability.early { color: #80630b !important; }
    #weather-section-report .weather-reliability.established { color: #176b3a !important; }
}

.tl-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tl-tab {
    flex: 1;
    padding: 0.6rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg, rgba(30, 30, 50, 0.85));
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.tl-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.tl-tab-content.hidden {
    display: none;
}

.tl-cal-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tl-cal-month {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.tl-cal-nav {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #f0f0f6;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.tl-cal-nav:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(167,139,250,0.45);
}
.tl-cal-nav:active { transform: scale(0.94); }
@media (prefers-reduced-transparency: reduce) {
    .tl-cal-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tl-cal-nav:active { transform: none; }
}

.tl-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 1rem;
}

.tl-cal-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    background: rgba(255,255,255,0.03);
}

.tl-cal-cell.tl-cal-empty {
    background: transparent;
    cursor: default;
}

.tl-cal-cell.future {
    opacity: 0.3;
    cursor: default;
}

.tl-cal-cell.today {
    border: 2px solid var(--primary);
}

.tl-cal-cell.selected {
    background: rgba(162,155,254,0.2);
    box-shadow: 0 0 0 2px var(--primary);
}

.tl-cal-cell.has-data:not(.selected):not(.future) {
    background: rgba(255,255,255,0.06);
}

.tl-cal-cell:not(.tl-cal-empty):not(.future):hover {
    background: rgba(162,155,254,0.12);
}

.tl-cal-day {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}

.tl-cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 3px;
}

.tl-day-detail {
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius);
    padding: 1rem;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: none;
    box-shadow: none;
    min-height: 120px;
    margin-bottom: 1rem;
}

.tl-day-nav {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: #f0f0f6;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, opacity 0.2s ease;
    flex-shrink: 0;
}
.tl-day-nav:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(167,139,250,0.45);
}
.tl-day-nav:active { transform: scale(0.94); }
.tl-day-nav:disabled {
    opacity: 0.3;
    cursor: default;
}
@media (prefers-reduced-transparency: reduce) {
    .tl-day-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tl-day-nav:active { transform: none; }
}

.tl-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

/* Day title is now a tappable glass pill that opens the calendar so the
   user can jump to any day, matching the date-range pill on /report. */
.tl-day-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.tl-day-title::after {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
    pointer-events: none;
}
.tl-day-title:hover,
.tl-day-title:focus-visible {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.45);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
    outline: none;
}
.tl-day-title:active { transform: scale(0.98); }
.tl-day-title-caret {
    color: rgba(255,255,255,0.55);
    display: inline-flex;
    transition: transform 0.18s ease, color 0.18s ease;
}
.tl-day-title:hover .tl-day-title-caret,
.tl-day-title:focus-visible .tl-day-title-caret {
    color: #fff;
    transform: translateY(1px);
}
@media (prefers-reduced-transparency: reduce) {
    .tl-day-title {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tl-day-title:active { transform: none; }
    .tl-day-title:hover .tl-day-title-caret { transform: none; }
}

.tl-day-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.tl-action-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.tl-action-btn:hover {
    background: rgba(255,255,255,0.12);
}

.tl-action-btn:disabled {
    opacity: 0.5;
}

.tl-entry-selectable {
    cursor: pointer;
    border: 2px solid var(--primary);
    border-radius: 10px;
    padding: 0.4rem;
    margin: 0.25rem 0;
    transition: background 0.15s, border-color 0.15s;
}

.tl-entry-selectable:hover,
.tl-entry-selectable:active {
    background: rgba(162, 155, 254, 0.1);
}

.tl-entry-selected {
    background: rgba(162, 155, 254, 0.15);
    border-color: var(--primary-light);
}

.tl-action-btn.active {
    background: var(--primary);
    border-color: var(--primary);
}

.tl-inline-edit {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    margin: 0.35rem 0 0.5rem;
    animation: fadeSlideIn 0.2s ease;
}

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

.tl-ie-tags-wrap,
.tl-ie-notes-wrap {
    margin-bottom: 0.5rem;
}

.tl-ie-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.tl-ie-actions {
    display: flex;
    gap: 0.5rem;
}

.tl-ie-save,
.tl-ie-cancel {
    flex: 1;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 8px;
}

.edit-tag-pill {
    position: relative;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.edit-tag-remove {
    margin-left: 0.25rem;
    font-weight: bold;
    opacity: 0.7;
}

.tl-loading {
    text-align: center;
    color: var(--text-light);
    padding: 2rem 0;
    font-size: 0.9rem;
}

.tl-empty {
    text-align: center;
    color: var(--text-light);
    padding: 1.5rem 0;
}

.tl-empty p {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.tl-empty-note {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tl-empty-note textarea {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.5rem;
    resize: none;
    font-size: 0.85rem !important;
}

.tl-summary-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 0.6rem 0.5rem;
}

.tl-stat {
    flex: 1;
    text-align: center;
}

.tl-stat-val {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.2;
}

.tl-stat-lbl {
    font-size: 0.65rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-section {
    margin-bottom: 0.75rem;
}

.tl-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--primary-light);
    margin-bottom: 0.4rem;
}

.tl-entries {
    position: relative;
}

.tl-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    position: relative;
}

.tl-entry:last-child {
    margin-bottom: 0;
}

.tl-entry-time {
    font-size: 0.75rem;
    color: var(--text-light);
    min-width: 4.2rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.tl-entry-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0.3rem 0.5rem 0 0.25rem;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 0 2px rgba(34,34,68,0.9);
}

.tl-entry-body {
    flex: 1;
    min-width: 0;
}

.tl-entry-pain {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.tl-pain-label {
    font-weight: 400;
    font-size: 0.8rem;
    opacity: 0.8;
}

.tl-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.tl-entry-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: var(--text-light);
}

.tl-entry-tag.medicine {
    background: rgba(108,92,231,0.15);
    color: var(--primary-light);
}

.tl-entry-tag.food {
    background: rgba(255,165,0,0.12);
    color: #ffb347;
}

.tl-entry-tag.drink {
    background: rgba(0,184,148,0.12);
    color: #55efc4;
}

.tl-entry-note {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
    margin-top: 0.25rem;
}

.tl-med {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
}

.tl-med-icon {
    font-size: 0.9rem;
}

.tl-med-name {
    font-weight: 600;
    color: var(--text);
}

.tl-med-time {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-left: auto;
}

.tl-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tl-tag {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    color: var(--text-light);
}

.tl-tag.food {
    background: rgba(255,165,0,0.12);
    color: #ffb347;
}

.tl-tag.drink {
    background: rgba(0,184,148,0.12);
    color: #55efc4;
}

.tl-weather-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tl-weather-chip {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.tl-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tl-note:last-child {
    border-bottom: none;
}

.tl-note-time {
    font-size: 0.7rem;
    color: var(--text-light);
    white-space: nowrap;
    margin-top: 0.1rem;
}

.tl-note-text {
    flex: 1;
    color: var(--text);
}

.tl-note-user {
    background: rgba(162,155,254,0.06);
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    margin: 0.15rem 0;
}

.tl-note-del {
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tl-note-del:hover {
    background: var(--danger);
    color: white;
}

.tl-inline-note {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tl-inline-note textarea {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 0.5rem;
    resize: none;
    font-size: 0.85rem !important;
}

.tl-small-btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-size: 0.8rem !important;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.tl-small-btn:hover {
    background: var(--primary-dark);
}

.tl-ai-loading {
    text-align: center;
    color: var(--text-light);
    padding: 1rem 0;
    font-size: 0.85rem;
}

.tl-ai-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    padding: 0.5rem;
    background: rgba(162,155,254,0.06);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.tl-ai-editor {
    width: 100%;
    min-height: 80px;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.tl-ai-editor:focus {
    border-color: var(--primary-light);
}

.tl-ai-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tl-ai-save {
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
}

.tl-ai-discard {
    background: transparent !important;
    color: var(--text-light) !important;
    border: 1px solid var(--border) !important;
}

.tl-ai-saved {
    font-size: 0.75rem;
    color: #00b894;
    margin-top: 0.4rem;
    font-weight: 600;
}

.tl-quick-add {
    background: rgba(162,155,254,0.06);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.tl-qa-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.tl-qa-time {
    width: 100px;
    padding: 0.5rem 0.55rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    color-scheme: dark;
    -webkit-text-fill-color: var(--text);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.tl-qa-time:hover { background: rgba(255,255,255,0.08); }
.tl-qa-time:focus {
    background: rgba(255,255,255,0.10);
    border-color: rgba(167,139,250,0.55);
    box-shadow:
        0 0 0 3px rgba(167,139,250,0.12),
        inset 0 1px 0 rgba(255,255,255,0.10);
}
.tl-qa-time::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}
@media (prefers-reduced-transparency: reduce) {
    .tl-qa-time {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(28,26,48,0.92);
    }
}

.tl-qa-input {
    flex: 1;
    padding: 0.45rem 0.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
}

.tl-qa-input:focus {
    border-color: var(--primary-light);
}

.tl-qa-add-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--primary-light);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.tl-qa-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.tl-qa-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tl-qa-tag-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.tl-qa-presets {
    margin-top: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
}

.tl-qa-cat {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.tl-qa-cat-label {
    font-size: 0.7rem;
    color: var(--text-light);
    font-weight: 600;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.tl-qa-preset {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: transparent;
    color: var(--text-light);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s;
}

.tl-qa-preset.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.tl-qa-preset:hover {
    border-color: var(--primary-light);
}

.tl-qa-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
    align-items: center;
}

.tl-qa-cancel {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
}

.tl-qa-cancel:hover {
    color: var(--text);
}

@media print {
    .tl-tabs, .tl-cal-strip, .tl-cal-weekdays, .tl-cal-grid,
    .tl-day-actions, .tl-inline-note, .tl-note-del, .tl-small-btn,
    .tl-quick-add,
    .nav-bar, #weather-bg, .tl-action-btn, .tl-empty-note {
        display: none !important;
    }
    .tl-day-detail {
        background: white;
        color: #333;
        border: 1px solid #ccc;
    }
    .tl-section-label {
        color: #555;
    }
    .tl-note-text, .tl-entry-pain, .tl-med-name, .tl-day-title {
        color: #333;
    }
}

[id^="replit"] {
    z-index: 1 !important;
    pointer-events: auto;
}

.reminder-preset-btn,
.feedback-cat-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-light);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reminder-preset-btn.active,
.feedback-cat-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.reminder-preset-btn:not(.active):hover,
.feedback-cat-btn:not(.active):hover {
    background: rgba(255,255,255,0.1);
}

.share-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    max-width: 90vw;
    width: 400px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.share-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.share-toast-title {
    font-weight: 600;
    color: #a78bfa;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.share-toast-url {
    font-size: 0.7rem;
    color: #ccc;
    word-break: break-all;
    background: rgba(255,255,255,0.05);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.share-toast-copy-btn {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: rgba(139, 92, 246, 0.25);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 8px;
    color: #e0d4ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.share-toast-copy-btn:active {
    background: rgba(139, 92, 246, 0.5);
}

.share-toast-note {
    font-size: 0.7rem;
    color: #888;
}

.report-share-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(4, 5, 18, 0.76);
    backdrop-filter: blur(8px);
}

.report-share-modal.hidden {
    display: none;
}

.report-share-modal-card {
    width: min(100%, 28rem);
    padding: 1.2rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    background: #16162c;
    box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}

.report-share-modal-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.report-share-modal-card > p {
    margin: 0 0 0.85rem;
    color: var(--text-light);
    font-size: 0.78rem;
    line-height: 1.45;
}

.report-share-option {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.55rem;
    padding: 0.85rem;
    text-align: left;
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
}

.report-share-option span {
    color: var(--text-light);
    font-size: 0.72rem;
    line-height: 1.4;
}

.report-share-option:hover,
.report-share-option:focus-visible {
    border-color: var(--accent);
    background: rgba(108,92,231,0.14);
}

.report-share-cancel {
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.65rem;
    color: var(--text-light);
    border: 0;
    background: transparent;
}

.report-shares {
    width: min(100%, 760px);
    margin: 1.5rem auto 0;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    background: rgba(255,255,255,0.035);
}

.report-shares-heading,
.report-share-item,
.report-share-item-actions {
    display: flex;
    align-items: center;
}

.report-shares-heading {
    justify-content: space-between;
    gap: 1rem;
}

.report-shares-heading h2 {
    margin: 0;
    font-size: 1rem;
}

.report-shares-heading p {
    margin: 0.3rem 0 0;
    color: var(--text-light);
    font-size: 0.73rem;
    line-height: 1.45;
}

.report-shares-refresh,
.report-share-item-actions a,
.report-share-revoke {
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 9px;
    color: var(--text-main);
    background: rgba(255,255,255,0.06);
    font-size: 0.72rem;
    text-decoration: none;
    white-space: nowrap;
}

.report-share-item {
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.report-share-item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.76rem;
}

.report-share-item-details span,
.report-shares-status {
    color: var(--text-light);
    font-size: 0.7rem;
}

.report-share-item-actions {
    gap: 0.4rem;
}

.report-share-revoke {
    color: #ffb5bd;
    border-color: rgba(255, 100, 120, 0.3);
}

.report-shares-error {
    color: #ffb5bd;
}

@media (max-width: 560px) {
    .report-shares-heading,
    .report-share-item {
        align-items: flex-start;
    }

    .report-share-item {
        flex-direction: column;
    }
}

.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}

.tutorial-overlay.active {
    background: transparent;
    pointer-events: all;
}

.tutorial-overlay.active.tutorial-no-spotlight {
    background: rgba(0, 0, 0, 0.75);
}

.tutorial-spotlight {
    position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
    border-radius: 12px;
    z-index: 10001;
    transition: all 0.4s ease;
    pointer-events: none;
    border: 2px solid rgba(139, 92, 246, 0.5);
}

.tutorial-tooltip {
    position: absolute;
    width: calc(100% - 2rem);
    max-width: 340px;
    background: linear-gradient(145deg, #2a2040, #1e1833);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    padding: 1.25rem;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(139, 92, 246, 0.15);
}

.tutorial-tooltip.visible {
    opacity: 1;
}

.tutorial-tooltip-center {
    position: fixed !important;
}

.tutorial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.tutorial-step-count {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutorial-skip {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.tutorial-skip:hover,
.tutorial-skip:active {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}

.tutorial-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.5rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tutorial-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
    margin: 0 0 1rem;
}

.tutorial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tutorial-dots {
    display: flex;
    gap: 6px;
}

.tutorial-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s, transform 0.2s;
}

.tutorial-dot.active {
    background: #8b5cf6;
    transform: scale(1.3);
}

.tutorial-next {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.tutorial-next:active {
    transform: scale(0.96);
}

.tutorial-install {
    margin-bottom: 1rem;
}

.tutorial-install-icon {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.tutorial-install-steps {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    counter-reset: install-step;
}

.tutorial-install-steps li {
    counter-increment: install-step;
    position: relative;
    padding: 0.5rem 0 0.5rem 2.2rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-install-steps li:last-child {
    border-bottom: none;
}

.tutorial-install-steps li::before {
    content: counter(install-step);
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #c4b5fd;
}

.tutorial-install-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tutorial-swipe-demo {
    margin-bottom: 0.75rem;
}

.tutorial-demo-entry {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 44px;
    margin-bottom: 0.25rem;
}

.tutorial-demo-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
}

.tutorial-demo-bg-delete {
    left: 0;
    background: #d9534f;
    border-radius: 8px 0 0 8px;
}

.tutorial-demo-bg-edit {
    right: 0;
    background: #a29bfe;
    border-radius: 0 8px 8px 0;
}

.tutorial-demo-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(30, 30, 60, 0.95);
    border-radius: 10px;
    height: 100%;
    z-index: 1;
}

.tutorial-demo-item-delete {
    animation: tutorialSwipeRight 3s ease-in-out infinite;
}

.tutorial-demo-item-edit {
    animation: tutorialSwipeLeft 3s ease-in-out infinite;
}

.tutorial-demo-time {
    font-size: 0.7rem;
    color: #999;
    min-width: 45px;
}

.tutorial-demo-pain {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.tutorial-demo-tag {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
}

.tutorial-demo-label {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.75rem;
    margin-top: 0.15rem;
}

.tutorial-tag-edit-demo {
    margin-bottom: 0.5rem;
}

.tutorial-tag-demo-scene {
    position: relative;
    min-height: 110px;
    overflow: hidden;
}

.tutorial-tag-demo-phase {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.tutorial-tag-phase-hold {
    animation: tutorialTagPhaseHold 6s ease-in-out infinite;
}

.tutorial-tag-phase-edit {
    opacity: 0;
    animation: tutorialTagPhaseEdit 6s ease-in-out infinite;
}

.tutorial-demo-tags {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.tutorial-demo-tag-pill {
    padding: 0.35rem 0.75rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
}

.tutorial-demo-tag-target {
    position: relative;
    animation: tutorialTagPulse 6s ease-in-out infinite;
}

.tutorial-hold-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 22px;
    border: 2px solid #8b5cf6;
    opacity: 0;
    animation: tutorialHoldRing 6s ease-in-out infinite;
}

.tutorial-hold-label {
    text-align: center;
    font-size: 0.7rem;
    color: #8b5cf6;
    opacity: 0;
    animation: tutorialHoldLabel 6s ease-in-out infinite;
}

.tutorial-demo-modal {
    background: rgba(40, 35, 65, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    opacity: 0;
    transform: scale(0.9);
    animation: tutorialModalAppear 6s ease-in-out infinite;
}

.tutorial-demo-field {
    margin-bottom: 0.5rem;
}

.tutorial-demo-field:last-child {
    margin-bottom: 0;
}

.tutorial-demo-field-label {
    display: block;
    font-size: 0.65rem;
    color: #999;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutorial-demo-input {
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    position: relative;
    height: 1.7rem;
    display: flex;
    align-items: center;
}

.tutorial-demo-typo {
    color: #d9534f;
    text-decoration: line-through;
    position: absolute;
    animation: tutorialTypoFade 6s ease-in-out infinite;
}

.tutorial-demo-fixed {
    color: #5aad70;
    position: absolute;
    opacity: 0;
    animation: tutorialFixedFade 6s ease-in-out infinite;
}

.tutorial-demo-cats {
    display: flex;
    gap: 0.4rem;
}

.tutorial-demo-cat {
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-size: 0.75rem;
    transition: all 0.3s;
}

.tutorial-demo-cat-old {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    text-decoration: line-through;
    animation: tutorialCatOld 6s ease-in-out infinite;
}

.tutorial-demo-cat-new {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
    opacity: 0;
    animation: tutorialCatNew 6s ease-in-out infinite;
}

@keyframes tutorialTagPhaseHold {
    0%, 40% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes tutorialTagPhaseEdit {
    0%, 40% { opacity: 0; }
    50%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes tutorialTagPulse {
    0%, 5% { background: rgba(255,255,255,0.08); }
    15%, 35% { background: rgba(139, 92, 246, 0.25); }
    45%, 100% { background: rgba(255,255,255,0.08); }
}

@keyframes tutorialHoldRing {
    0%, 5% { opacity: 0; transform: scale(0.8); }
    15% { opacity: 1; transform: scale(1); }
    35% { opacity: 1; transform: scale(1); }
    45%, 100% { opacity: 0; transform: scale(1.1); }
}

@keyframes tutorialHoldLabel {
    0%, 8% { opacity: 0; }
    18%, 35% { opacity: 1; }
    42%, 100% { opacity: 0; }
}

@keyframes tutorialModalAppear {
    0%, 45% { opacity: 0; transform: scale(0.9); }
    55% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    95%, 100% { opacity: 0; transform: scale(0.95); }
}

@keyframes tutorialTypoFade {
    0%, 55% { opacity: 1; }
    65%, 100% { opacity: 0; }
}

@keyframes tutorialFixedFade {
    0%, 60% { opacity: 0; }
    70%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes tutorialCatOld {
    0%, 55% { opacity: 1; }
    65%, 100% { opacity: 0.3; }
}

@keyframes tutorialCatNew {
    0%, 62% { opacity: 0; transform: scale(0.9); }
    72%, 90% { opacity: 1; transform: scale(1); }
    95%, 100% { opacity: 0; transform: scale(0.95); }
}

@keyframes tutorialSwipeRight {
    0%, 15% { transform: translateX(0); }
    30%, 55% { transform: translateX(25%); }
    70%, 100% { transform: translateX(0); }
}

@keyframes tutorialSwipeLeft {
    0%, 15% { transform: translateX(0); }
    30%, 55% { transform: translateX(-25%); }
    70%, 100% { transform: translateX(0); }
}

.delete-confirm-form {
    margin-top: 1rem;
    padding: 1rem;
    border: 2px solid var(--danger);
    border-radius: var(--radius);
    background: rgba(255, 118, 117, 0.08);
}

.delete-confirm-warning {
    color: var(--danger);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.delete-confirm-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.3rem;
    margin-top: 0.6rem;
}

.delete-confirm-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid rgba(255, 118, 117, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.delete-confirm-input:focus {
    border-color: var(--danger);
}

.delete-error {
    color: var(--danger);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
    text-align: center;
}

.btn-danger-solid {
    width: 100%;
    padding: 0.75rem 1.2rem;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.75rem;
    transition: opacity 0.2s, background 0.2s;
}

.btn-danger-solid:hover {
    background: #e05555;
}

.btn-danger-solid:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Final delete confirmation modal */
.delete-final-card {
    background: var(--card-bg);
    border: 2px solid var(--danger);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    margin: auto 1rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

#delete-final-modal {
    align-items: center;
}

.delete-final-title {
    color: var(--danger);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    text-align: center;
}

.delete-final-intro {
    font-size: 0.85rem;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.delete-final-list {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
}

.delete-final-list li {
    margin-bottom: 0.2rem;
}

.delete-final-warn {
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    text-align: center;
}

.delete-final-ack {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem;
    background: rgba(255, 118, 117, 0.08);
    border: 1px solid rgba(255, 118, 117, 0.25);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.4;
}

.delete-final-ack input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--danger);
    flex-shrink: 0;
    cursor: pointer;
}

/* Landscape chart view */
.chart-landscape-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text-color, #eaeaea);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0.4rem 0;
    -webkit-tap-highlight-color: transparent;
}
.chart-landscape-btn:hover,
.chart-landscape-btn:active {
    background: rgba(255,255,255,0.16);
}
.chart-landscape-icon {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chart-landscape-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.chart-landscape-btn.chart-orientation-toggle {
    padding: 0.3rem 0.5rem;
    gap: 0;
}
@media print {
    .chart-landscape-btn { display: none !important; }
}

.chart-landscape-overlay {
    position: fixed;
    inset: 0;
    background: #0a0a0a;
    z-index: 99999;
    overflow: hidden;
}
/* Inner is sized + positioned in JS to bypass iOS Safari's flaky vw/vh
   handling in PWA/standalone mode. CSS just provides defaults that get
   overridden inline. */
.chart-landscape-inner {
    position: absolute;
    inset: 0;
    /* The overlay follows the device orientation naturally. Rotating a live
       Chart.js canvas with CSS clears/mis-sizes its bitmap in iOS WKWebView. */
    transform: none;
    background: #0a0a0a;
    padding: 0;
    box-sizing: border-box;
}
.chart-landscape-topbar {
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
}
.chart-landscape-topbar > * { pointer-events: auto; }
.chart-landscape-hint {
    color: rgba(170,170,170,0.7);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.chart-landscape-close {
    background: rgba(40,40,40,0.85);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    font-size: 0.8rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.chart-landscape-close .chart-landscape-icon svg {
    width: 22px;
    height: 22px;
}
.chart-landscape-close:hover,
.chart-landscape-close:active {
    background: rgba(255,255,255,0.22);
}
.chart-landscape-canvas-wrap {
    position: absolute;
    inset: 0;
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    box-sizing: border-box;
}
.chart-landscape-chart-host {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.chart-landscape-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.chart-landscape-placeholder { display: none; }

/* ===========================================================
   Accessibility — Liquid-Glass fallbacks (always last so they win)
   =========================================================== */

/* iOS/macOS "Reduce Transparency" — strip backdrop-filter and switch to
   opaque surfaces so card text stays high-contrast for low-vision users.
   This is the same fallback Apple's own apps provide on iOS 26. */
@media (prefers-reduced-transparency: reduce) {
    body.theme-weather .card,
    body.theme-weather .nav-bar,
    .nav-bar,
    body:not(.is-scrolled) .nav-bar,
    body.theme-weather:not(.is-scrolled) .nav-bar,
    .modal-content {
        background: rgba(20, 21, 48, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .card {
        box-shadow: var(--shadow);
    }
    /* Replace the progressive fade strip with a flat opaque cap — no blur,
       no gradient — so low-vision users get a hard, high-contrast edge. */
    .nav-edge-fade {
        background: var(--bg) !important;
        -webkit-backdrop-filter: none !important;
                backdrop-filter: none !important;
        -webkit-mask-image: none !important;
                mask-image: none !important;
        opacity: 1 !important;
    }
    /* High-contrast inactive nav labels for low-vision users — drop the
       low-alpha muted primary in favour of solid --text-light. */
    .nav-link {
        color: var(--text-light) !important;
    }
    /* And restore full-colour emoji icons (no desaturation filter) so
       glyph silhouettes read clearly. */
    .nav-link .nav-icon {
        filter: none !important;
    }
}

/* "Increase Contrast" — strengthen edges, text, and highlights.
   NOTE: --border is redefined on body.theme-midnight / body.theme-ocean,
   so a :root-only override would lose the cascade in those themes. We
   mirror the override onto every theme scope. */
@media (prefers-contrast: more) {
    :root,
    body.theme-midnight,
    body.theme-ocean {
        --text: #ffffff;
        --text-light: #e0e0f0;
        --border: #6a6a8c;
        --glass-edge: rgba(255, 255, 255, 0.25);
        --glass-edge-strong: rgba(255, 255, 255, 0.35);
    }
    .card {
        border: 1px solid var(--border);
    }
    .subtitle {
        color: rgba(255, 255, 255, 0.92);
    }
}

/* "Reduce Motion" — disable CSS transitions and animations. Especially
   important for this app since vestibular motion can itself be a migraine
   trigger for our users. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================================
   Settings page — Apple HIG-inspired grouped inset list (2026-05 redesign)
   =========================================================================== */

.settings-page-header {
    /* Same safe-area top clearance as .page-header (overridden here via the
       !important the redesign uses), so Settings' title also sits below the
       status bar in the native app. */
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 0 0.4rem !important;
}
.settings-page-header h1 {
    letter-spacing: -0.02em;
}

.settings-saved-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 35, 0.92);
    color: #e8e8f0;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
                inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
    z-index: 200;
    animation: settings-saved-pop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes settings-saved-pop {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.settings-section { margin-top: 1.4rem; }
.settings-section:first-of-type { margin-top: 0.6rem; }

.settings-caption {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-light, #b8b8cc);
    opacity: 0.7;
    text-transform: uppercase;
    padding: 0 0.55rem 0.45rem;
}

.settings-group {
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
                0 1px 2px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) {
    .settings-group {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.06);
    }
}

.settings-section-footer {
    font-size: 0.7rem;
    color: var(--text-light, #b8b8cc);
    opacity: 0.7;
    padding: 0.5rem 0.55rem 0;
    line-height: 1.45;
}

.settings-version-line {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-light, #b8b8cc);
    opacity: 0.5;
    margin: 1.75rem 0 0.5rem;
}

/* --- Row (shared between div / a / button / details) --- */
.settings-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    position: relative;
    color: var(--text-main, #e8e8f0);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: default;
}
button.settings-row,
a.settings-row,
.settings-row-summary {
    cursor: pointer;
}
.settings-row + .settings-row::before,
.settings-row + details > .settings-row-summary::before,
details + .settings-row::before {
    content: "";
    position: absolute;
    left: 3.85rem;
    right: 0;
    top: 0;
    height: 0.5px;
    background: rgba(255, 255, 255, 0.06);
}
/* Hairline between consecutive rows inside a group, regardless of element type */
.settings-group > * + * {
    position: relative;
}
.settings-group > * + *::before {
    content: "";
    position: absolute;
    left: 3.85rem;
    right: 0;
    top: 0;
    height: 0.5px;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    z-index: 1;
}

.settings-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(162, 155, 254, 0.18);
    color: var(--primary, #a29bfe);
    flex-shrink: 0;
}
.settings-row-icon svg {
    width: 20px;
    height: 20px;
}
.settings-row-icon-neutral {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-main, #e8e8f0);
}
.settings-row-icon-danger {
    background: rgba(255, 118, 117, 0.18);
    color: var(--danger, #ff7675);
}

.settings-row-main {
    flex: 1;
    min-width: 0;
}
.settings-row-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main, #e8e8f0);
    flex: 1;
    min-width: 0;
}
.settings-row-sub {
    font-size: 0.72rem;
    color: var(--text-light, #b8b8cc);
    opacity: 0.75;
    margin-top: 0.15rem;
    line-height: 1.35;
}
.settings-row-value {
    font-size: 0.85rem;
    color: var(--text-light, #b8b8cc);
    opacity: 0.75;
    margin-left: auto;
    flex-shrink: 0;
}
.settings-row-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--text-light, #b8b8cc);
    opacity: 0.55;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    margin-left: 0.25rem;
}
.settings-row-chevron svg {
    width: 14px;
    height: 14px;
}

.settings-row-danger .settings-row-label {
    color: var(--danger, #ff7675);
}

/* Hover/active feedback */
button.settings-row:hover,
a.settings-row:hover,
.settings-row-summary:hover {
    background: rgba(255, 255, 255, 0.04);
}
button.settings-row:active,
a.settings-row:active,
.settings-row-summary:active {
    background: rgba(255, 255, 255, 0.07);
}

/* --- Expandable rows (native <details>/<summary>) --- */
.settings-row-expandable {
    padding: 0;
    display: block;
}
.settings-row-expandable > .settings-row-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    width: 100%;
    position: relative;
}
.settings-row-expandable > .settings-row-summary::-webkit-details-marker {
    display: none;
}
.settings-row-expandable[open] > .settings-row-summary .settings-row-chevron {
    transform: rotate(90deg);
}
.settings-row-body {
    padding: 0.25rem 1rem 1rem;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.settings-row-help {
    font-size: 0.72rem;
    color: var(--text-light, #b8b8cc);
    opacity: 0.8;
    margin: 0.6rem 0 0.7rem;
    line-height: 1.45;
}
.background-weather-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-main, #e8e8f0);
    font-size: 0.82rem;
}
.background-weather-schedule {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.8rem 0 0;
    padding: 0.8rem 0 0;
    display: grid;
    gap: 0.55rem;
    color: var(--text-main, #e8e8f0);
    font-size: 0.82rem;
}
.background-weather-schedule legend { padding: 0; font-weight: 600; }
.background-weather-schedule select,
.background-weather-times input {
    margin: 0 0.3rem;
    padding: 0.3rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
    background: var(--surface, rgba(255,255,255,0.08));
    color: inherit;
}
.background-weather-times { display: grid; gap: 0.4rem; }
.background-weather-times label { display: flex; align-items: center; justify-content: space-between; max-width: 18rem; }
.background-weather-add-time { width: fit-content; padding: 0.35rem 0.65rem; }
.background-weather-error { color: #ff7675; opacity: 1; }
@media (max-width: 480px) {
    .background-weather-switch { align-items: flex-start; }
    .background-weather-schedule select { max-width: 5rem; }
}

/* When a section's group only contains expandables, ensure the body's top border looks intentional */
.settings-row-expandable .theme-grid {
    margin-top: 0.4rem;
}

/* Inline delete confirm form lives inside the .settings-group;
   ensure it has clean spacing and no row hairline interfering */
.settings-group > .delete-confirm-form {
    padding: 1rem;
    background: rgba(255, 118, 117, 0.04);
    border-top: 0.5px solid rgba(255, 118, 117, 0.18);
}
.settings-group > .delete-confirm-form::before {
    display: none !important;
}

/* Account row "Sign out" needs neutral text color (not danger red) */
.settings-row-action .settings-row-label {
    color: var(--text-main, #e8e8f0);
}

/* ===== Home-screen widget preview (Trends page) =====
   Sized like an iOS medium widget: ~329×155pt at 1x, so we use a 2.13:1
   rectangle. Layout (top → bottom): header, Log button, watercolour
   pain slider, top-3 tag chips. Slider mirrors the main pain slider
   (watercolour track + pearl thumb + travelling sheen) at smaller scale. */
.widget-tile {
    aspect-ratio: 2.13 / 1;
    width: 100%;
    max-width: 329px;
    margin: 0 auto;
    padding: 11px 14px 12px;
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(40,40,55,0.92), rgba(20,20,30,0.92));
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.widget-tile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 2px;
}
.widget-tile-title {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.widget-expand-btn {
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.75);
    width: 22px; height: 22px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.widget-expand-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
/* Log button now lives inline in the header. Uses the active theme's
   --primary accent so it shifts with Dark / Midnight / Ocean / premium themes. */
.widget-log-btn {
    flex: 0 0 auto;
    background: var(--primary, #a29bfe);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 4px 14px;
    font-weight: 600;
    font-size: 0.72rem;
    line-height: 1.1;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.1s, filter 0.15s;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.widget-log-btn:hover:not(:disabled) { filter: brightness(1.1); }
.widget-log-btn:active:not(:disabled) { transform: scale(0.96); }
.widget-log-btn:disabled { opacity: 0.5; cursor: wait; }
.widget-slider-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.widget-pain-slider-wrap {
    position: relative;
    flex: 1;
    height: 22px;
    display: flex;
    align-items: center;
}
.widget-pain-slider-track {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: url('/static/css/slider-track.png?v=3') center/100% 100% no-repeat;
    pointer-events: none;
    overflow: hidden;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.2),
        0 1px 1px rgba(0,0,0,0.1);
}
.widget-pain-slider-track::after {
    /* Travelling specular highlight, same idea as the main slider but
       scaled down to fit the 16px-tall track. */
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: radial-gradient(
        ellipse 26px 9px at calc(var(--thumb-pos, 0%) + 9px - var(--thumb-pos, 0%) * 18 / 100) 28%,
        rgba(255,255,255,0.5) 0%,
        rgba(255,255,255,0.16) 35%,
        transparent 70%);
    pointer-events: none;
    mix-blend-mode: screen;
}
.widget-pain-slider {
    position: relative;
    width: 100%;
    height: 22px;
    -webkit-appearance: none; appearance: none;
    background: transparent;
    outline: none;
    z-index: 2;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.widget-pain-slider::-webkit-slider-runnable-track {
    height: 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
}
/* Thumb is intentionally taller than the track (20 vs 16 px, same ~1.18
   ratio as the main pain slider) so it visually "sits on" the bar.
   Scales up on :active to match the main slider's tactile feel. */
.widget-pain-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff 0%, #e8e4f0 100%);
    border: none;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.35),
        0 0 0 1.5px rgba(255,255,255,0.15);
    margin-top: -2px;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.widget-pain-slider:active::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        0 0 0 2.5px rgba(255,255,255,0.22);
}
.widget-pain-slider::-moz-range-track {
    height: 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
}
.widget-pain-slider::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff 0%, #e8e4f0 100%);
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 0 0 1.5px rgba(255,255,255,0.15);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.widget-pain-slider:active::-moz-range-thumb {
    transform: scale(1.18);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.4),
        0 0 0 2.5px rgba(255,255,255,0.22);
}
.widget-pain-value {
    font-size: 1rem;
    font-weight: 700;
    min-width: 18px;
    text-align: right;
    color: rgba(255,255,255,0.95);
    font-variant-numeric: tabular-nums;
}
.widget-tags-row {
    display: flex;
    gap: 5px 5px;
    flex: 1 1 auto;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
    /* Cap at ~2 rows so a long tag list never pushes content out of
       the fixed-aspect tile. Single-row case still hugs the slider. */
    max-height: calc((1.6em + 8px) * 2);
}
.widget-tag-chip {
    background: rgba(255,255,255,0.1);
    border: 0.5px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
    font-size: 0.7rem;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget-tag-chip:hover { background: rgba(255,255,255,0.16); }
.widget-tag-chip.selected {
    background: rgba(120,160,255,0.32);
    border-color: rgba(160,190,255,0.55);
    color: #fff;
}
.widget-toast {
    position: absolute;
    left: 50%; bottom: 8px;
    transform: translateX(-50%) translateY(8px);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.widget-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.widget-toast-ok { background: rgba(40,160,90,0.9); }
.widget-toast-err { background: rgba(200,60,60,0.9); }

/* Native StoreKit gate — a quiet, full-screen iPhone sheet rather than a web
   modal. Kept scoped so the subscription experience cannot alter app chrome. */
#native-subscription-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #101b2b;
    color: #f5f7fb;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}
#native-subscription-gate::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -170px;
    border-radius: 50%;
    background: rgba(116, 171, 185, 0.16);
    filter: blur(2px);
    pointer-events: none;
}
.native-sub-sheet {
    position: relative;
    width: min(100%, 390px);
    padding: 30px 22px 20px;
    border-radius: 28px;
    background: #1d2b3d;
    box-shadow: 0 18px 55px rgba(3, 10, 20, .35), inset 0 1px 0 rgba(255,255,255,.08);
}
.native-sub-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #d8e2e9;
    font: 300 27px/36px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    cursor: pointer;
}
.native-sub-close:active { background: rgba(255,255,255,.16); }
.native-sub-mark {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(3, 10, 20, .32);
}
.native-sub-eyebrow {
    color: #b9d4cf;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 9px;
}
.native-sub-sheet h1 {
    margin: 0 auto 10px;
    max-width: 310px;
    color: #f8fafc;
    font-size: 27px;
    line-height: 1.12;
    letter-spacing: -.025em;
}
.native-sub-lede {
    margin: 0 auto 22px;
    max-width: 310px;
    color: #bdc9d4;
    font-size: 15px;
    line-height: 1.45;
}
.native-sub-plan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(185,212,207,.3);
    border-radius: 16px;
    background: rgba(185,212,207,.08);
}
.native-sub-plan > div:first-child, .native-sub-price, .native-sub-offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.native-sub-plan strong { color: #f4f8f8; font-size: 15px; }
.native-sub-plan span { color: #aebdc8; font-size: 12px; line-height: 1.3; }
.native-sub-price, .native-sub-offer { flex-shrink: 0; text-align: right; }
.native-sub-price strong, .native-sub-offer strong { color: #d8eee9; font-size: 16px; white-space: nowrap; }
.native-sub-offer strong { font-size: 18px; }
.native-sub-offer span { color: #d8eee9; white-space: nowrap; }
.native-sub-buy {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: #b9d4cf;
    color: #19383d;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}
.native-sub-buy:active { transform: scale(.98); }
.native-sub-buy:disabled, .native-sub-secondary:disabled { opacity: .5; cursor: default; }
.native-sub-secondary, .native-sub-retry {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: #c9dfdc;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    padding: 15px 8px 8px;
    cursor: pointer;
}
.native-sub-retry { padding-top: 8px; }
.native-sub-state {
    margin: 12px 0 14px;
    color: #bdc9d4;
    font-size: 13px;
    line-height: 1.45;
}
.native-sub-state-loading { color: #c6d8d8; }
.native-sub-state-pending { color: #e8d2a7; }
.native-sub-state-error { color: #f0b9b5; }
.native-sub-connection {
    margin: 8px 0 14px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(240,185,181,.09);
    color: #f4d0cd;
    font-size: 15px;
}
.native-sub-disclosure {
    margin: 18px 2px 0;
    color: #8fa1af;
    font-size: 11px;
    line-height: 1.45;
}
.native-sub-legal {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 13px 0 0;
    color: #a9c5c1;
    font-size: 12px;
}
.native-sub-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#native-subscription-readonly {
    position: fixed;
    z-index: 9000;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 11px 12px 11px 14px;
    border: 1px solid rgba(185,212,207,.32);
    border-radius: 15px;
    background: rgba(29,43,61,.96);
    color: #f4f8f8;
    box-shadow: 0 10px 28px rgba(3,10,20,.32);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
body.native-subscription-readonly-active #page-shell {
    /* The persistent banner occupies real layout space instead of covering the
       first log card. The page already handles the iPhone status-area inset. */
    padding-top: 72px;
}
@media (min-width: 768px) {
    #native-subscription-readonly {
        /* The navigation moves from the bottom to the top on iPad. Keep the
           banner below it, aligned with the desktop content inset. */
        top: calc(env(safe-area-inset-top, 0px) + 76px);
        z-index: 90;
    }
    body.native-subscription-readonly-active .page-header {
        /* Sticky headers must not slide behind the persistent banner. */
        top: calc(env(safe-area-inset-top, 0px) + 148px);
    }
}
#native-subscription-readonly div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#native-subscription-readonly strong { font-size: 13px; }
#native-subscription-readonly span {
    color: #b9c8d2;
    font-size: 11px;
    line-height: 1.3;
}
#native-subscription-readonly button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 10px;
    background: #b9d4cf;
    color: #19383d;
    font: 700 12px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    cursor: pointer;
}
@media (max-width: 360px) {
    .native-sub-sheet { padding-left: 17px; padding-right: 17px; }
    .native-sub-plan { gap: 8px; padding: 13px; }
    .native-sub-plan span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .native-sub-buy { transition: none; }
}