/* Import Tailwind CSS */
@import "tailwind-output.css";

/* ============================================
   PREMIUM DESIGN SYSTEM - LIGHT MODE
   ============================================ */

/* Set default body font */
body {
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 300;
    background-color: #f8f9fb;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode default backgrounds */
.min-h-screen {
    background-color: #f8f9fb;
}

/* Soft shadows for light mode */
.soft-shadow {
    box-shadow: 0 2px 12px rgba(99, 110, 129, 0.08), 0 1px 4px rgba(99, 110, 129, 0.04);
}

.soft-shadow-lg {
    box-shadow: 0 8px 24px rgba(99, 110, 129, 0.12), 0 2px 8px rgba(99, 110, 129, 0.06);
}

/* Regular weight for all headers */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
}

/* Title styling with letter spacing */
.nous-title {
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 300;
    letter-spacing: 0.025em;
}

/* ============================================
   PREMIUM DARK MODE - PROFESSIONAL THEME
   ============================================ */

/* Main dark mode container with deep gradient background */
body.night-mode {
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1117 50%, #0a0d15 100%) !important;
    color: #e8edf5 !important;
    position: relative;
    overflow-x: hidden;
}

/* Premium starfield effect - Layer 1 (subtle small stars) */
body.night-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 0.5px, transparent 0.5px),
        radial-gradient(circle, rgba(147, 197, 253, 0.12) 0.6px, transparent 0.6px),
        radial-gradient(circle, rgba(196, 181, 253, 0.1) 0.4px, transparent 0.4px);
    background-size: 280px 280px, 380px 380px, 480px 480px;
    background-position: 0 0, 90px 130px, 190px 60px;
    animation: twinkle1 60s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
    will-change: transform, opacity;
}

/* Premium starfield effect - Layer 2 (larger glowing stars) */
body.night-mode::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(147, 197, 253, 0.15) 1.2px, transparent 1.2px),
        radial-gradient(circle, rgba(196, 181, 253, 0.12) 0.8px, transparent 0.8px);
    background-size: 450px 450px, 550px 550px, 650px 650px;
    background-position: 60px 90px, 210px 160px, 340px 50px;
    animation: twinkle2 70s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    will-change: transform, opacity;
}

@keyframes twinkle1 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.25;
    }

    50% {
        transform: translate(-12px, -12px);
        opacity: 0.35;
    }
}

@keyframes twinkle2 {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.2;
    }

    50% {
        transform: translate(-18px, -18px);
        opacity: 0.3;
    }
}

/* Elegant shooting stars */
@keyframes shooting-star {
    0% {
        transform: translate(150vw, -50vh) scale(0.5);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50vw, 150vh) scale(0);
        opacity: 0;
    }
}

.shooting-star {
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 1.5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(147, 197, 253, 0.2), transparent);
    border-radius: 50%;
    animation: shooting-star 12s linear infinite;
    opacity: 0;
}

.shooting-star:nth-child(2) {
    top: 20%;
    animation-delay: 3s;
    animation-duration: 10s;
}

.shooting-star:nth-child(3) {
    top: 40%;
    animation-delay: 7s;
    animation-duration: 14s;
}

/* Core container styles */
body.night-mode #root {
    background-color: transparent !important;
    position: relative;
    z-index: 10;
}

body.night-mode #root>div {
    background-color: transparent !important;
    position: relative;
}

body.night-mode .max-w-7xl,
body.night-mode .mx-auto,
body.night-mode .container {
    background-color: transparent !important;
}

/* Premium glass-morphism cards */
body.night-mode .bg-white {
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.night-mode .bg-calm-50,
body.night-mode .bg-calm-100,
body.night-mode .bg-gray-50,
body.night-mode .bg-gray-100,
body.night-mode .bg-gray-200 {
    background: rgba(30, 41, 59, 0.6) !important;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

/* Premium gradient backgrounds */
body.night-mode .bg-blue-50 {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.5) 0%, rgba(15, 40, 75, 0.5) 100%) !important;
    backdrop-filter: blur(10px);
}

body.night-mode .bg-blue-100 {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(15, 40, 75, 0.6) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

body.night-mode .bg-gradient-to-b {
    background: linear-gradient(to bottom,
            rgba(30, 58, 95, 0.4) 0%,
            rgba(15, 61, 48, 0.4) 100%) !important;
    backdrop-filter: blur(8px);
}

body.night-mode .bg-gradient-to-r {
    background: linear-gradient(to right,
            rgba(30, 58, 95, 0.4) 0%,
            rgba(45, 27, 78, 0.4) 100%) !important;
    backdrop-filter: blur(8px);
}

body.night-mode .bg-gradient-to-br {
    background: linear-gradient(to bottom right,
            rgba(30, 58, 95, 0.4) 0%,
            rgba(45, 27, 78, 0.4) 100%) !important;
    backdrop-filter: blur(8px);
}

/* Premium border styling */
body.night-mode .border-gray-300,
body.night-mode .border-calm-300 {
    border-color: rgba(100, 116, 139, 0.2) !important;
}

body.night-mode .border-gray-200 {
    border-color: rgba(71, 85, 105, 0.15) !important;
}

body.night-mode .border-b {
    border-bottom-color: rgba(71, 85, 105, 0.15) !important;
}

/* Enhanced header */
body.night-mode header {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Premium text colors with better hierarchy */
body.night-mode .text-calm-600,
body.night-mode .text-calm-700,
body.night-mode .text-calm-800 {
    color: #f1f5f9 !important;
}

body.night-mode .text-calm-500 {
    color: #cbd5e1 !important;
}

body.night-mode .text-gray-600,
body.night-mode .text-gray-700,
body.night-mode .text-gray-800 {
    color: #e2e8f0 !important;
}

body.night-mode .text-gray-500 {
    color: #cbd5e1 !important;
}

body.night-mode .text-gray-400 {
    color: #94a3b8 !important;
}

/* Premium shadows for dark mode */
body.night-mode .soft-shadow {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.night-mode .soft-shadow-lg {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Premium input fields */
body.night-mode input,
body.night-mode textarea,
body.night-mode select {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.15) !important;
    color: #f1f5f9 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.night-mode input:focus,
body.night-mode textarea:focus,
body.night-mode select:focus {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.1),
        0 4px 16px rgba(59, 130, 246, 0.2);
}

body.night-mode input::placeholder,
body.night-mode textarea::placeholder {
    color: #64748b !important;
}

/* Premium button styling */
body.night-mode button {
    background: rgba(30, 41, 59, 0.8) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
    color: #f1f5f9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.night-mode button:hover {
    background: rgba(51, 65, 85, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Premium colored buttons */
body.night-mode button[class*="bg-blue"],
body.night-mode button[class*="bg-purple"],
body.night-mode button[class*="bg-green"] {
    background: linear-gradient(135deg,
            rgba(var(--button-color, 59, 130, 246), 0.8) 0%,
            rgba(var(--button-color, 59, 130, 246), 0.6) 100%) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 32px rgba(var(--button-color, 59, 130, 246), 0.2);
    filter: brightness(1.2) saturate(1.1);
}

body.night-mode button[class*="bg-blue"]:hover,
body.night-mode button[class*="bg-purple"]:hover,
body.night-mode button[class*="bg-green"]:hover {
    filter: brightness(1.3) saturate(1.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 48px rgba(var(--button-color, 59, 130, 246), 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* FAB Button - ensure visibility in all modes */
.fab-add-habit,
.fab-button,
button[style*="linear-gradient(135deg, #3b82f6"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none !important;
    color: white !important;
}

body.night-mode .fab-add-habit,
body.night-mode .fab-button {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Color picker buttons - preserve their colors */
button[style*="border-radius: 50%"][style*="backgroundColor"] {
    border: none !important;
}

/* Premium timer display */
body.night-mode .timer-display {
    background: transparent !important;
    backdrop-filter: none;
    border: none !important;
    color: #f1f5f9 !important;
    box-shadow: none;
}

body.night-mode .timer-display.running {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    color: #34d399 !important;
    /* Brighter green for contrast */
}

body.night-mode .timer-display.paused {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    color: #fbbf24 !important;
    /* Brighter yellow/orange for contrast */
}

/* Premium SVG and tree styling */
body.night-mode svg {
    color: #f1f5f9;
}

body.night-mode .branch-draw {
    stroke: #c9a66b !important;
    stroke-width: 5 !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

body.night-mode svg .branch-draw {
    stroke: #c9a66b !important;
    stroke-width: 5 !important;
    opacity: 1 !important;
}

body.night-mode svg rect {
    fill: #c9a66b !important;
    opacity: 1 !important;
}

/* Premium tree leaves with glow effect */
body.night-mode svg circle[fill],
body.night-mode svg ellipse[fill],
body.night-mode svg polygon[fill] {
    fill: #6ee7b7 !important;
    stroke: #34d399 !important;
    stroke-width: 1 !important;
    opacity: 1 !important;
    filter: brightness(1.3) saturate(1.4) drop-shadow(0 0 4px rgba(52, 211, 153, 0.6)) drop-shadow(0 0 8px rgba(52, 211, 153, 0.3)) !important;
}

/* Premium headings */
body.night-mode h1,
body.night-mode h2,
body.night-mode h3,
body.night-mode h4,
body.night-mode h5,
body.night-mode h6 {
    color: #f8fafc !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Premium nous logo */
body.night-mode .nous-title {
    color: #ffffff !important;
    font-weight: 300 !important;
    text-shadow: 0 0 32px rgba(147, 197, 253, 0.3);
    letter-spacing: 0.025em;
}

/* Premium circle logo effect */
body.night-mode .circle-flow {
    stroke: #4ade80 !important;
    fill: none !important;
    stroke-width: 3 !important;
    opacity: 0.95 !important;
    filter: drop-shadow(0 0 24px rgba(74, 222, 128, 0.8)) drop-shadow(0 0 16px rgba(74, 222, 128, 0.6)) drop-shadow(0 0 8px rgba(74, 222, 128, 0.4));
    stroke-dasharray: none !important;
    animation: none !important;
    stroke-linecap: round !important;
}

/* Premium mode toggle */
body.night-mode button.bg-gray-900 {
    background: linear-gradient(135deg, rgba(26, 32, 46, 0.9), rgba(30, 41, 59, 0.9)) !important;
    border: 2px solid rgba(59, 130, 246, 0.5) !important;
    box-shadow:
        0 8px 32px rgba(59, 130, 246, 0.3),
        0 0 32px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.night-mode button.bg-gray-900:hover {
    background: linear-gradient(135deg, rgba(36, 48, 73, 0.95), rgba(51, 65, 85, 0.95)) !important;
    transform: scale(1.05);
    box-shadow:
        0 12px 40px rgba(59, 130, 246, 0.4),
        0 0 48px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Premium text elements */
body.night-mode .text-xs,
body.night-mode .text-sm {
    color: #cbd5e1 !important;
}

body.night-mode strong {
    color: #93c5fd !important;
    font-weight: 600 !important;
}

/* Smooth transitions */
body.night-mode,
body.night-mode * {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Premium animations */
@keyframes neuron-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

.neuron-pulse {
    animation: neuron-pulse 1.5s ease-in-out;
}

@keyframes soft-glow {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(107, 141, 214, 0.3), 0 0 24px rgba(107, 141, 214, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(107, 141, 214, 0.5), 0 0 40px rgba(107, 141, 214, 0.2);
    }
}

.soft-glow {
    animation: soft-glow 2s ease-in-out infinite;
}

@keyframes circle-flow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -200;
    }
}

.circle-flow {
    stroke-dasharray: 100;
    animation: circle-flow 8s linear infinite;
}

/* Timer components */
.timer-display {
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
    text-align: center;
    user-select: none;
    margin: 10px 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    transition: all 0.3s ease;
}

.timer-display.running {
    color: #10b981;
    border-color: transparent;
    background: transparent;
}

.timer-display.paused {
    color: #f59e0b;
    border-color: transparent;
    background: transparent;
}

.timer-display .milliseconds {
    font-size: 1.8rem;
    color: #6b7280;
    margin-left: 8px;
}

.timer-display.running .milliseconds {
    color: #059669;
}

.timer-display.paused .milliseconds {
    color: #d97706;
}

.timer-container {
    position: relative;
    width: 200px;
    height: 200px;
}

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

.timer-circle-bg {
    fill: none;
    stroke: #e6e6e6;
    stroke-width: 12;
}

body.night-mode .timer-circle-bg {
    stroke: rgba(71, 85, 105, 0.3) !important;
}

.timer-circle-progress {
    fill: none;
    stroke: #007bff;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.timer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Satoshi", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Custom border width for toggle buttons */
.border-3 {
    border-width: 3px;
}

/* Premium hover effects for header */
body.night-mode header button,
body.night-mode header a {
    opacity: 0.9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.night-mode header button:hover,
body.night-mode header a:hover {
    opacity: 1;
    transform: scale(1.1);
}

.night-mode-toggle:hover {
    transform: scale(1.15);
}

/* Ensure proper z-index layering */
body.night-mode>div,
body.night-mode main,
body.night-mode section,
body.night-mode article,
body.night-mode aside {
    background-color: transparent !important;
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    body.night-mode::before,
    body.night-mode::after {
        animation: none !important;
    }

    .shooting-star {
        animation: none !important;
        display: none;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   REPORT PAGE - SCREEN TIME STYLE
   ============================================ */

/* Segmented Control - Pill Style */
.segmented-control {
    background-color: #e5e7eb;
    border-radius: 8px;
    padding: 2px;
    display: inline-flex;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

body.night-mode .segmented-control {
    background-color: rgba(30, 41, 59, 1);
    border-color: rgba(255, 255, 255, 0.05);
}

.segmented-control button {
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    color: #4b5563;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

body.night-mode .segmented-control button {
    color: #94a3b8;
}

.segmented-control button.active {
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
    color: #000;
}

body.night-mode .segmented-control button.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Chart Bars */
.chart-bar-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.chart-bar {
    width: 100%;
    max-width: 32px;
    /* Flexible width for consistent look */
    background-color: #3b82f6;
    border-radius: 4px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-height: 4px;
    /* Ensure 0 values are slightly visible or handle efficiently */
    position: relative;
}

.chart-bar.empty {
    background-color: transparent;
    opacity: 0;
}

.chart-bar.selected {
    background-color: #2563eb;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

body.night-mode .chart-bar {
    background-color: #3b82f6;
}

body.night-mode .chart-bar.selected {
    background-color: #60a5fa;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.5);
}

/* Category Bars (Progress bars in list) */
.category-bar-bg {
    background-color: #f3f4f6;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
    width: 100%;
}

body.night-mode .category-bar-bg {
    background-color: rgba(255, 255, 255, 0.1);
}

.category-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stat Cards */
.stat-card {
    background: white;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

body.night-mode .stat-card {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.1);
}

/* Utility for layout */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Confetti Animation */
.confetto {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 9999;
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   NOUS LIVING PROGRESS BAR SYSTEM
   Hypnotic, organic flowing stream with ambient sheen sweep
   and luminous breathing beacon tip
   ============================================ */

@keyframes nous-flow-stream {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes nous-shimmer-sweep {
    0% {
        transform: translateX(-150%);
        opacity: 0;
    }
    15% {
        opacity: 0.85;
    }
    50% {
        transform: translateX(250%);
        opacity: 0.85;
    }
    55%, 100% {
        transform: translateX(250%);
        opacity: 0;
    }
}

@keyframes nous-beacon-pulse {
    0%, 100% {
        transform: translate(50%, -50%) scale(0.85);
        opacity: 0.85;
        box-shadow: 0 0 4px rgba(107, 141, 214, 0.6), 0 0 2px #ffffff;
    }
    50% {
        transform: translate(50%, -50%) scale(1.2);
        opacity: 1;
        box-shadow: 0 0 8px rgba(107, 141, 214, 0.8), 0 0 14px rgba(90, 123, 200, 0.4), 0 0 4px #ffffff;
    }
}

/* Subtle living stream pulse */
@keyframes nous-subtle-glow {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(107, 141, 214, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 4px rgba(107, 141, 214, 0.45));
    }
}

/* Progress bar container */
.nous-progress-container {
    position: relative;
    width: 100%;
}

/* Track container */
.nous-progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 9999px;
    background: rgba(238, 242, 246, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.7);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.night-mode .nous-progress-track {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(51, 65, 85, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Flowing filled bar - soft periwinkle stream (app primary #6B8DD6) */
.nous-progress-fill {
    position: relative;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(
        90deg,
        #5a7bc8 0%,
        #6b8dd6 25%,
        #94aee6 50%,
        #6b8dd6 75%,
        #5a7bc8 100%
    );
    background-size: 200% 100%;
    animation: nous-flow-stream 5s linear infinite, nous-subtle-glow 3s ease-in-out infinite;
    transition: width 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
    will-change: background-position, width;
}

/* Slightly faster and more radiant when timer is running */
.nous-progress-fill.is-active {
    animation: nous-flow-stream 2.4s linear infinite, nous-subtle-glow 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(107, 141, 214, 0.4);
}

/* Goal reached: settle into the app's success green */
.nous-progress-fill.is-complete {
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #059669 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* Sheen sweep overlay */
.nous-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 75%,
        transparent 100%
    );
    animation: nous-shimmer-sweep 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Luminous leading beacon pearl in dark blue */
.nous-progress-beacon {
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #ffffff;
    pointer-events: none;
    animation: nous-beacon-pulse 2s ease-in-out infinite;
    will-change: transform, box-shadow, opacity;
}

/* Tactile minimalist timer controls */
.nous-play-btn {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: linear-gradient(160deg, #84a2e2 0%, #5a7bc8 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(90, 123, 200, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nous-play-btn:hover {
    background: linear-gradient(160deg, #7695db 0%, #4e6fbd 100%);
    box-shadow: 0 10px 24px -6px rgba(90, 123, 200, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px) scale(1.02);
}
.nous-play-btn:active {
    transform: scale(0.95);
}
body.night-mode .nous-play-btn,
body.night-mode .nous-play-btn:hover {
    background: linear-gradient(160deg, #84a2e2 0%, #5a7bc8 100%) !important;
    border: none !important;
    color: #ffffff;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
}

.nous-pause-btn {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #f59e0b;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nous-pause-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
}
.nous-pause-btn:active {
    transform: scale(0.95);
}

.nous-stop-btn {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #f8fafc;
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nous-stop-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
    transform: translateY(-1px);
}
.nous-stop-btn:active {
    transform: scale(0.95);
}

/* ============================================
   HABIT GLYPHS & ICON BUTTONS
   ============================================ */

/* Soft-squircle symbol tile with a subtle top highlight */
.nous-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%);
    color: #7d8ca8;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 10px -4px rgba(15, 23, 42, 0.12), inset 0 1px 0 #ffffff;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nous-glyph--lg {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    cursor: pointer;
}
.nous-glyph--lg:hover {
    border-color: rgba(15, 23, 42, 0.16);
}
.nous-glyph.is-done {
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08), 0 4px 10px -4px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
body.night-mode .nous-glyph {
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    color: #a8b3c7;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.night-mode .nous-glyph.is-done {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.12) 100%);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

/* Comfortable icon-only button (32px hit area) */
.nous-icon-btn {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #94a3b8;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.nous-icon-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.nous-icon-btn.is-active {
    background: #eef2fb;
    color: #5a7bc8;
    box-shadow: inset 0 0 0 1px rgba(107, 141, 214, 0.25);
}
/* Override the global night-mode button chrome for flat icon buttons */
body.night-mode .nous-icon-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    backdrop-filter: none;
    color: #94a3b8;
}
body.night-mode .nous-icon-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc;
    transform: none;
    box-shadow: none;
}
body.night-mode .nous-icon-btn.is-active {
    background: rgba(107, 141, 214, 0.2) !important;
    color: #a9bdea;
}

/* Small neutral meta pill (goal progress, 1-tap) */
.nous-pill {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 1px 7px;
    border-radius: 9999px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
    background: #f1f5f9;
    color: #475569;
}
.nous-pill.is-met {
    background: #ecfdf5;
    color: #047857;
}
body.night-mode .nous-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}
body.night-mode .nous-pill.is-met {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

/* Week header day labels */
.nous-day-head {
    color: #94a3b8;
    line-height: 1.2;
}
.nous-day-head .nous-day-letter {
    text-transform: lowercase;
    font-size: 11px;
    font-weight: 400;
}
.nous-day-head .nous-day-num {
    font-size: 15px;
    margin-top: 2px;
    color: #64748b;
}
.nous-day-head.is-today .nous-day-letter,
.nous-day-head.is-today .nous-day-num {
    color: #5a7bc8;
    font-weight: 400;
}
body.night-mode .nous-day-head.is-today .nous-day-letter,
body.night-mode .nous-day-head.is-today .nous-day-num {
    color: #a9bdea;
}


.add-habit-btn:hover {
    color: #0f172a;
}
body.night-mode .add-habit-btn:hover {
    color: #f8fafc;
}
.nous-icon-btn--strong {
    color: #334155;
}
body.night-mode .nous-icon-btn--strong {
    color: #cbd5e1;
}

/* Symbol picker option */
.nous-symbol-opt {
    font-family: inherit;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #7d8ca8;
    border: 1px solid #eef1f5;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nous-symbol-opt:hover {
    background: #f8f9fb;
    color: #5d6b86;
    border-color: #e4e8ee;
}
.nous-symbol-opt.is-selected {
    background: #f1f3f7;
    color: #6b8dd6;
    border-color: rgba(107, 141, 214, 0.45);
}
body.night-mode .nous-symbol-opt {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8;
    box-shadow: none;
    transform: none;
}
body.night-mode .nous-symbol-opt:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f1f5f9;
    transform: none;
}
body.night-mode .nous-symbol-opt.is-selected {
    background: rgba(107, 141, 214, 0.2) !important;
    border-color: rgba(107, 141, 214, 0.6) !important;
    color: #c7d4f2;
}
.nous-symbol-label {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: #94a3b8;
}

/* ============================================
   BUTTONS
   ============================================ */
.nous-btn-primary {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(90, 123, 200, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.nous-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(90, 123, 200, 0.65); }
.nous-btn-primary:active { transform: scale(0.98); }
.nous-btn-primary:disabled { opacity: 0.5; cursor: default; transform: none; }
.nous-btn-secondary {
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease;
}
.nous-btn-secondary:hover { background: #f8fafc; }
body.night-mode .nous-btn-primary,
body.night-mode .nous-btn-primary:hover {
    background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%) !important;
    border: none !important;
    color: #ffffff;
}
body.night-mode .nous-btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0;
    transform: none;
}

/* ============================================
   STARTER PACK
   ============================================ */
.nous-starter {
    background: #ffffff;
    border: 1px solid #eef1f5;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
}
.nous-starter-title { font-size: 18px; font-weight: 400; color: #0f172a; letter-spacing: -0.01em; }
.nous-starter-sub { font-size: 13px; color: #64748b; margin-top: 4px; line-height: 1.5; }
.nous-starter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.nous-starter-opt {
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #eef1f5;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.nous-starter-opt:hover { border-color: #dbe2ec; }
.nous-starter-opt.is-selected {
    border-color: rgba(107, 141, 214, 0.6);
    background: #f5f8fe;
    box-shadow: 0 0 0 3px rgba(107, 141, 214, 0.12);
}
.nous-starter-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nous-starter-opt-title { font-size: 14px; font-weight: 400; color: #0f172a; }
.nous-starter-opt-meta { font-size: 12px; color: #94a3b8; margin-top: 1px; }
.nous-starter-check {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 1.5px solid #d6dde7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}
.nous-starter-opt.is-selected .nous-starter-check { background: #6b8dd6; border-color: #6b8dd6; }
.nous-starter-scratch {
    font-family: inherit;
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: none;
    border: none;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
}
.nous-starter-scratch:hover { color: #0f172a; }
body.night-mode .nous-starter { background: rgba(30, 41, 59, 0.6); border-color: rgba(255, 255, 255, 0.06); }
body.night-mode .nous-starter-title,
body.night-mode .nous-starter-opt-title { color: #f1f5f9; }
body.night-mode .nous-starter-opt {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
    transform: none;
}
body.night-mode .nous-starter-opt.is-selected {
    background: rgba(107, 141, 214, 0.15) !important;
    border-color: rgba(107, 141, 214, 0.6) !important;
}
body.night-mode .nous-starter-scratch { background: none !important; border: none !important; box-shadow: none; }

/* ============================================
   WEEKLY RECAP
   ============================================ */
.nous-recap-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 14px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f8fe 0%, #eef2fb 100%);
    border: 1px solid rgba(107, 141, 214, 0.25);
}
.nous-recap-banner-text { flex: 1; min-width: 0; }
.nous-recap-banner-title { font-size: 14px; font-weight: 400; color: #0f172a; }
.nous-recap-banner-sub { font-size: 12px; color: #64748b; margin-top: 1px; }
body.night-mode .nous-recap-banner { background: rgba(107, 141, 214, 0.12); border-color: rgba(107, 141, 214, 0.3); }
body.night-mode .nous-recap-banner-title { color: #f1f5f9; }

.nous-recap {
    width: 100%;
    max-width: 400px;
    max-height: calc(100% - 40px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 24px;
    padding: 22px 22px 18px;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
}
.nous-recap-head { display: flex; align-items: flex-start; justify-content: space-between; }
.nous-recap-title { font-size: 18px; font-weight: 400; color: #0f172a; letter-spacing: -0.01em; }
.nous-recap-sub { font-size: 13px; color: #94a3b8; margin-top: 2px; }
.nous-recap-hero { margin-top: 18px; }
.nous-recap-hero-num {
    font-size: 44px;
    line-height: 1;
    font-weight: 300;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.nous-recap-hero-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: #64748b; margin-top: 6px; }

.nous-recap-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-top: 22px;
    padding-bottom: 2px;
}
.nous-recap-col { display: flex; flex-direction: column; align-items: center; }
.nous-recap-bar-area {
    position: relative;
    width: 100%;
    height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid #eef1f5;
}
.nous-recap-bar {
    width: 22px;
    max-width: 70%;
    background: #6b8dd6;
    border-radius: 4px 4px 0 0;
    transition: height 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.nous-recap-col:hover .nous-recap-bar { background: #5a7bc8; }
.nous-recap-bar-empty { width: 22px; max-width: 70%; height: 2px; background: #e2e8f0; border-radius: 1px; }
.nous-recap-bar-empty.is-future { background: transparent; }
.nous-recap-bar-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 400;
    color: #334155;
    white-space: nowrap;
}
.nous-recap-day { font-size: 11px; font-weight: 400; color: #94a3b8; margin-top: 6px; }
.nous-recap-day.is-today { color: #5a7bc8; font-weight: 400; }

.nous-recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.nous-recap-stat { background: #f8fafc; border-radius: 14px; padding: 12px; }
.nous-recap-stat-value { font-size: 20px; font-weight: 400; color: #0f172a; }
.nous-recap-stat-label { font-size: 11px; color: #94a3b8; margin-top: 2px; }

.nous-recap-habits { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.nous-recap-habit { display: flex; align-items: center; gap: 10px; }
.nous-recap-habit-name { flex: 1; min-width: 0; font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nous-recap-dots { display: flex; gap: 4px; }
.nous-recap-dot { width: 8px; height: 8px; border-radius: 9999px; background: #e2e8f0; }
.nous-recap-dot.is-done { background: #10b981; }
.nous-recap-habit-count { font-size: 12px; color: #64748b; width: 28px; text-align: right; }

.nous-recap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }

body.night-mode .nous-recap { background: #111827; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7); }
body.night-mode .nous-recap-title,
body.night-mode .nous-recap-hero-num,
body.night-mode .nous-recap-stat-value,
body.night-mode .nous-recap-habit-name { color: #f1f5f9; }
body.night-mode .nous-recap-bar-label { color: #cbd5e1; }
body.night-mode .nous-recap-bar-area { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.night-mode .nous-recap-bar-empty { background: rgba(255, 255, 255, 0.1); }
body.night-mode .nous-recap-stat { background: rgba(255, 255, 255, 0.05); }
body.night-mode .nous-recap-dot { background: rgba(255, 255, 255, 0.12); }
body.night-mode .nous-recap-day.is-today { color: #a9bdea; }
.nous-btn-lg { padding: 15px 18px; border-radius: 16px; font-size: 16px; }
.nous-chip-selected {
    background: #eef2fb;
    color: #4e6fbd;
    border-color: rgba(107, 141, 214, 0.55) !important;
}
body.night-mode .nous-chip-selected {
    background: rgba(107, 141, 214, 0.2) !important;
    border-color: rgba(107, 141, 214, 0.6) !important;
    color: #c7d4f2;
}

/* ============================================
   PHONE-WIDTH LAYOUT
   ============================================ */
.nous-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Hero header wraps the mode switcher under the habit name when space runs out */
.nous-hero-head {
    flex-wrap: wrap;
    row-gap: 12px;
}
.nous-hero-identity {
    flex: 1 1 200px;
}
/* Phones: the nav fills the space next to the logo with the icons evenly spaced */
@media (max-width: 640px) {
    .nous-nav { flex: 1; justify-content: space-evenly; gap: 0; margin-left: 12px; }
}
@media (max-width: 440px) {
    .nous-nav > button { padding: 8px !important; }
    .nous-nav > button svg { width: 22px; height: 22px; }
}

/* Timer reset (left of play) and destructive icon button */
.nous-reset-btn {
    font-family: inherit;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f3f7;
    color: #7d8ca8;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.nous-reset-btn:hover:not(:disabled) { background: #e4e8ee; color: #4a5568; transform: rotate(-30deg); }
.nous-reset-btn:active:not(:disabled) { transform: scale(0.95); }
.nous-reset-btn:disabled { opacity: 0.45; cursor: default; }
body.night-mode .nous-reset-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    color: #a8b3c7;
    box-shadow: none;
}
.nous-icon-btn--danger:hover {
    background: #fef2f2;
    color: #dc2626;
}
body.night-mode .nous-icon-btn--danger:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5;
}

/* ============================================
   SAFE AREAS (iOS app is edge-to-edge; env() is 0 elsewhere)
   ============================================ */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
/* Solid backdrop behind the status bar so scrolled content never shows through it
   (html::before, since body's pseudo-elements draw the night-mode starfield) */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: #ffffff;
    z-index: 60;
    pointer-events: none;
}
html:has(body.night-mode)::before {
    background: #0f172a;
}
header.sticky {
    top: env(safe-area-inset-top);
}
/* Full-screen dialog overlays keep their content clear of the notch and home indicator */
.fixed.inset-0.flex {
    padding-top: max(20px, calc(env(safe-area-inset-top) + 8px)) !important;
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}

/* ============================================
   REPORTS (calm redesign)
   ============================================ */
.rp-page { max-width: 46rem; margin: 0 auto; padding: 24px 16px 48px; color: #363f51; }
.rp-title { font-size: 30px; font-weight: 300; color: #363f51; letter-spacing: -0.01em; }
.rp-sub { font-size: 14px; font-weight: 300; color: #7d8ca8; margin-top: 2px; }
.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0 12px; }
.rp-seg { display: inline-flex; background: #f1f3f7; border-radius: 9999px; padding: 3px; }
.rp-seg button { padding: 6px 16px; border-radius: 9999px; font-size: 13px; font-weight: 400; color: #7d8ca8; transition: all .2s ease; }
.rp-seg button.is-active { background: #fff; color: #6B8DD6; box-shadow: 0 1px 4px rgba(99,110,129,.12); }
.rp-select-wrap { position: relative; display: inline-flex; }
.rp-select { appearance: none; -webkit-appearance: none; background: #f1f3f7; border: 0; border-radius: 9999px; padding: 7px 32px 7px 14px; font: inherit; font-size: 13px; font-weight: 400; color: #5d6b86; cursor: pointer; }
.rp-select:focus { outline: 2px solid rgba(107,141,214,.35); outline-offset: 1px; }
.rp-select-wrap svg { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #a8b3c7; }
.rp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rp-nav-btn { width: 34px; height: 34px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: #7d8ca8; background: transparent; transition: background .2s ease; }
.rp-nav-btn:hover { background: #f1f3f7; }
.rp-nav-btn:disabled { opacity: .3; cursor: default; background: transparent; }
.rp-nav-label { font-size: 15px; font-weight: 400; color: #4a5568; }
.rp-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 2px 12px rgba(99,110,129,.08), 0 1px 4px rgba(99,110,129,.04); }
.rp-stack > * + * { margin-top: 14px; }
.rp-label { font-size: 13px; font-weight: 300; color: #7d8ca8; }
.rp-big { font-size: 40px; line-height: 1.1; font-weight: 300; color: #252d3d; letter-spacing: -0.02em; }
.rp-big small { font-size: 18px; color: #7d8ca8; margin-left: 2px; }
.rp-mid { font-size: 18px; font-weight: 400; color: #363f51; }
.rp-hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.rp-chart { height: 160px; display: flex; align-items: flex-end; gap: 6px; }
.rp-chart.is-dense { gap: 2px; }
.rp-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rp-bar { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: #dfe6f7; transition: height .6s cubic-bezier(.34,1.3,.64,1), background .2s ease; }
.rp-chart.is-dense .rp-bar { max-width: 9px; border-radius: 3px 3px 1px 1px; }
.rp-bar.is-empty { background: #eef1f6; }
.rp-bar.is-today { background: #6B8DD6; }
.rp-col:hover .rp-bar:not(.is-empty), .rp-bar.is-picked { background: #8aa6e2; }
.rp-bar.is-today.is-picked { background: #5878c4; }
.rp-axis { display: flex; gap: 6px; margin-top: 8px; }
.rp-chart.is-dense + .rp-axis { gap: 2px; }
.rp-axis span { flex: 1; text-align: center; font-size: 11px; font-weight: 400; color: #a8b3c7; white-space: nowrap; }
.rp-axis span.is-today { color: #6B8DD6; }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-tile { display: flex; flex-direction: column; gap: 10px; }
.rp-icon { width: 34px; height: 34px; border-radius: 9999px; background: #eef2fb; color: #6B8DD6; display: inline-flex; align-items: center; justify-content: center; }
.rp-tile-name { font-size: 16px; font-weight: 400; color: #363f51; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-tile-meta { font-size: 13px; font-weight: 300; color: #7d8ca8; }
.rp-h3 { font-size: 16px; font-weight: 400; color: #363f51; margin-bottom: 14px; }
.rp-row + .rp-row { margin-top: 14px; }
.rp-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.rp-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 400; color: #4a5568; }
.rp-row-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
.rp-row-val { font-size: 14px; font-weight: 400; color: #4a5568; white-space: nowrap; }
.rp-row-val em { font-style: normal; font-weight: 300; color: #a8b3c7; margin-left: 6px; }
.rp-track { height: 6px; border-radius: 9999px; background: #f1f3f7; overflow: hidden; }
.rp-fill { height: 100%; border-radius: 9999px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.rp-empty { text-align: center; padding: 28px 8px; color: #a8b3c7; font-size: 14px; font-weight: 300; }
.rp-empty svg { margin: 0 auto 10px; display: block; color: #d1d7e3; }
.rp-mood { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.rp-mood .rp-big { font-size: 28px; }
.rp-spin { width: 28px; height: 28px; margin: 48px auto; border-radius: 9999px; border: 2px solid #e4e8ee; border-top-color: #6B8DD6; animation: spin 1s linear infinite; }
@media (max-width: 420px) { .rp-big { font-size: 34px; } .rp-card { padding: 16px; } .rp-grid { gap: 10px; } }

body.night-mode .rp-page, body.night-mode .rp-title, body.night-mode .rp-mid, body.night-mode .rp-h3, body.night-mode .rp-tile-name { color: #e4e8ee; }
body.night-mode .rp-big { color: #f1f3f7; }
body.night-mode .rp-nav-label, body.night-mode .rp-row-name, body.night-mode .rp-row-val { color: #d1d7e3; }
body.night-mode .rp-card { background: rgba(30,41,59,.6); box-shadow: none; border: 1px solid rgba(148,163,184,.1); }
body.night-mode .rp-seg, body.night-mode .rp-select, body.night-mode .rp-track { background: rgba(255,255,255,.06); }
body.night-mode .rp-select { color: #d1d7e3; }
body.night-mode .rp-seg button.is-active { background: rgba(107,141,214,.22); color: #c7d4f2; box-shadow: none; }
body.night-mode .rp-nav-btn:hover { background: rgba(255,255,255,.06); }
body.night-mode .rp-bar { background: rgba(107,141,214,.35); }
body.night-mode .rp-bar.is-empty { background: rgba(255,255,255,.06); }
body.night-mode .rp-bar.is-today { background: #7f9de0; }
body.night-mode .rp-icon { background: rgba(107,141,214,.16); color: #9fb5e8; }
/* The app-wide night-mode button style (bordered glass pills) doesn't suit these controls */
body.night-mode .rp-page button { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: none; }
body.night-mode .rp-page .rp-seg button.is-active { background: rgba(107,141,214,.22) !important; }
body.night-mode .rp-page .rp-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.06) !important; }

/* Toasts: centered just below the header, clear of the iOS status bar and notch */
.nous-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 76px);
    /* Centered with margins, since the success pulse animates transform */
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 70;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 8px 24px rgba(99, 110, 129, 0.18), 0 2px 8px rgba(99, 110, 129, 0.08);
}
.nous-toast.is-dark { background: #363f51; }

/* Crisp text everywhere: grayscale antialiasing for the light Satoshi weights,
   and no automatic text inflation in the iOS web view */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}