/* 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;
}

/* Tree art (growth tree, its sky, grove mounds, mystery boxes) has its own night look; keep these off it */
body.night-mode svg:not(.tree-svg):not(.tree-sky-art):not(.grove-mound):not(.mbox-icon):not(.focus-sapling):not(.forest-dead):not(.nous-logo-ring) rect {
    fill: #c9a66b !important;
    opacity: 1 !important;
}

body.night-mode svg:not(.tree-svg):not(.tree-sky-art):not(.grove-mound):not(.mbox-icon):not(.focus-sapling):not(.forest-dead):not(.nous-logo-ring) circle[fill],
body.night-mode svg:not(.tree-svg):not(.tree-sky-art):not(.grove-mound):not(.mbox-icon):not(.focus-sapling):not(.forest-dead):not(.nous-logo-ring) ellipse[fill],
body.night-mode svg:not(.tree-svg):not(.tree-sky-art):not(.grove-mound):not(.mbox-icon):not(.focus-sapling):not(.forest-dead):not(.nous-logo-ring) 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;
}

/* Logo ring at night: a soft blue ring (no glow) */
body.night-mode .nous-logo-orbit {
    stroke: #9fb5e8;
    opacity: 0.7;
}

/* 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;
}


/* 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-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nous-starter-head > :last-child:not(.nous-starter-title) { flex-shrink: 0; margin: -6px -6px 0 0; }
.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;
}
/* 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; }
}
/* Nav tabs: an icon with its name underneath */
.nous-nav__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 6px 8px 4px; border-radius: 14px; color: #7d8ca8; transition: color .15s, background-color .15s; }
.nous-nav__btn:hover { background: #f5f7fa; }
.nous-nav__btn.is-active { color: #6B8DD6; background: #eef2fa; }
.nous-nav__btn svg { width: 21px; height: 21px; }
.nous-nav__label { font-size: 10.5px; font-weight: 400; line-height: 1; letter-spacing: .01em; }
@media (max-width: 440px) {
    .nous-nav__btn { min-width: 0; padding: 6px 6px 4px; }
}
/* Smallest phones (320px): tighter tabs and a smaller logo so all six tabs fit */
@media (max-width: 359px) {
    header .nous-title { font-size: 1.5rem !important; }
    header .nous-logo-ring { width: 67px; height: 33px; left: -8px !important; }
    .nous-nav { margin-left: 4px; }
    .nous-nav__btn { padding: 6px 3px 4px; }
    .nous-nav__label { font-size: 9.5px; letter-spacing: 0; }
}
body.night-mode .nous-nav__btn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #8f9bb3; }
body.night-mode .nous-nav__btn.is-active { background: rgba(107,141,214,.18) !important; color: #c7d4f2; }

/* 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);
    /* Landscape iPhones: keep content clear of the notch / Dynamic Island side */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/* 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-chart { position: relative; }
.rp-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(107,141,214,.45); pointer-events: none; }
.rp-goal span { position: absolute; right: 0; bottom: 2px; font-size: 10px; color: #8a9ab8; background: rgba(255,255,255,.85); padding: 0 4px; border-radius: 4px; }
.rp-bar.is-goal { background: #a9bde9; }
.rp-bar.is-goal.is-today { background: #4f72c4; }
.rp-delta { margin-top: 2px; font-size: 12px; color: #8a96ab; }
.rp-delta.is-up { color: #5d8a6e; }
.rp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eef1f6; }
.rp-facts > div { min-width: 0; }
.rp-facts__val { font-size: 15px; color: #252d3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-moodstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; max-width: 360px; }
.rp-moodstrip.is-month { grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 5px; max-width: none; }
.rp-moodstrip__day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rp-moodstrip__day em { font-style: normal; font-size: 11px; color: #9aa6bb; }
.rp-moodstrip__dot { width: 14px; height: 14px; border-radius: 50%; }
.rp-moodstrip__dot.is-empty { background: #eef1f6; }
.rp-moodstrip__dot.is-today { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #6B8DD6; }
.rp-insight { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #5f6b82; }
.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-bar.is-goal { background: rgba(127,157,224,.7); }
body.night-mode .rp-bar.is-goal.is-today { background: #9fb5e8; }
body.night-mode .rp-goal { border-top-color: rgba(159,181,232,.4); }
body.night-mode .rp-goal span { background: rgba(30,41,59,.9); color: #9aa8c2; }
body.night-mode .rp-delta { color: #8f9bb3; }
body.night-mode .rp-delta.is-up { color: #8fc2a0; }
body.night-mode .rp-facts { border-top-color: rgba(148,163,184,.12); }
body.night-mode .rp-facts__val { color: #e4e8ee; }
body.night-mode .rp-moodstrip__dot.is-empty { background: rgba(255,255,255,.07); }
body.night-mode .rp-moodstrip__dot.is-today { box-shadow: 0 0 0 2px #1e293b, 0 0 0 3px #7f9de0; }
body.night-mode .rp-insight { color: #b4bdcc; }
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;
}

/* ============================================
   NOUS TOGETHER (study room, carrier pigeons, loader)
   ============================================ */
.nt-rooms { box-sizing: border-box; max-width: 100%; }
.nt-room {
    --nt-ink: #363f51; --nt-soft: #7d8ca8; --nt-faint: #a8b3c7;
    --nt-accent: #8B7FB8; --nt-accent-ink: #5f5390; --nt-accent-wash: #f1eef8;
    --nt-here: #5FA8A3; --nt-line: #ebe8f3;
    position: relative;
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; overflow: hidden;
    padding: 18px 18px 14px;
    border-radius: 24px;
    border: 1px solid var(--nt-line);
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(139, 127, 184, 0.10), transparent 60%),
        radial-gradient(80% 60% at 100% 100%, rgba(107, 141, 214, 0.07), transparent 70%),
        #ffffff;
    box-shadow: 0 2px 12px rgba(99, 110, 129, 0.08), 0 1px 4px rgba(99, 110, 129, 0.04);
    color: var(--nt-ink);
    transition: background .6s ease, border-color .6s ease;
}
.nt-room.is-break { --nt-accent: #5FA8A3; --nt-accent-ink: #3f7f7a; --nt-accent-wash: #e8f4f3; }
.nt-room.is-paused { background: #fbfbfd; }

.nt-room-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nt-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--nt-soft); letter-spacing: .01em; }
.nt-status-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--nt-accent); flex-shrink: 0; }
.nt-room.is-live .nt-status-dot { animation: nt-breathe 3.2s ease-in-out infinite; }
.nt-room.is-paused .nt-status-dot { background: var(--nt-faint); }

.nt-clock { text-align: center; padding: 18px 0 6px; }
.nt-time { font-size: clamp(44px, 13vw, 60px); line-height: 1; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #252d3d; transition: color .4s ease, opacity .4s ease; }
.nt-room.is-paused .nt-time { color: var(--nt-faint); }
.nt-ms { font-size: .38em; color: var(--nt-faint); letter-spacing: 0; margin-left: 2px; }
.nt-phase { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 400; color: var(--nt-accent-ink); background: var(--nt-accent-wash); }

/* Seats: one per person, presence as a soft ring rather than a traffic light */
.nt-seats { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 4px; margin: 14px 0 6px; }
.nt-seat { display: flex; flex-direction: column; align-items: center; width: 76px; min-width: 0; padding: 4px 2px; background: none; border: 0; border-radius: 14px; font: inherit; color: inherit; }
.nt-avatar {
    position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 500; color: var(--nt-accent-ink, #5f5390); background: var(--nt-accent-wash, #f1eef8);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px transparent;
    transition: box-shadow .5s ease, opacity .5s ease, filter .5s ease;
}
.nt-seat.is-here .nt-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(95, 168, 163, .55); }
.nt-seat.is-away .nt-avatar { opacity: .45; filter: grayscale(1); }
.nt-presence { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 9999px; border: 2px solid #fff; background: var(--nt-faint, #a8b3c7); }
.nt-seat.is-here .nt-presence { background: var(--nt-here, #5FA8A3); }
.nt-room.is-live .nt-seat.is-here .nt-presence { animation: nt-breathe 3.2s ease-in-out infinite; }
.nt-seat-name { margin-top: 6px; max-width: 100%; font-size: 12px; font-weight: 400; color: var(--nt-ink, #363f51); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-seat.is-me .nt-seat-name { font-weight: 500; }
.nt-seat-habit { max-width: 100%; font-size: 11px; font-weight: 300; color: var(--nt-soft, #7d8ca8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-seat--invite { cursor: pointer; }
.nt-seat--invite .nt-avatar { background: transparent; color: var(--nt-faint); font-weight: 300; font-size: 22px; border: 1.5px dashed #d1d7e3; box-shadow: none; }
.nt-seat--invite:hover .nt-avatar { color: var(--nt-accent); border-color: var(--nt-accent); }
.nt-seat--invite .nt-seat-name { color: var(--nt-soft); font-weight: 300; }

.nt-wave { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px auto 0; width: max-content; max-width: 100%; padding: 6px 14px; border-radius: 9999px; background: #fdf7e9; color: #8a6d2b; font-size: 13px; font-weight: 400; animation: nt-rise .35s cubic-bezier(.2,.8,.2,1); }
.nt-wave-hand { display: inline-block; transform-origin: 70% 70%; animation: nt-wave 1.2s ease-in-out 2; }

/* Controls */
.nt-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.nt-tool, .nt-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 0; border-radius: 9999px; cursor: pointer; font: inherit; line-height: 1;
    color: #5d6b86; background: #f1f3f7; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.nt-tool { width: 42px; height: 42px; }
.nt-tool--sm { width: 32px; height: 32px; font-size: 14px; }
.nt-icon-btn { width: 32px; height: 32px; background: transparent; color: #a8b3c7; }
.nt-tool:hover, .nt-icon-btn:hover { background: #e4e8ee; color: #363f51; }
.nt-tool:active, .nt-main:active { transform: scale(.94); }
.nt-tool.is-on { background: var(--nt-accent-wash, #f1eef8); color: var(--nt-accent-ink, #5f5390); }
.nt-emoji { font-size: 16px; line-height: 1; }
/* Carrier pigeon: quiet grey like the other room tools, lavender on hover, takes off a little */
.nt-tool--pigeon { color: #7d8ca8; }
.nt-tool--pigeon:hover, .nt-tool--pigeon:focus-visible { background: #f1eef8; color: #5f5390; }
.nt-tool--pigeon svg { transition: transform .2s ease; }
.nt-tool--pigeon:hover svg { transform: translate(1px, -1.5px) rotate(-8deg); }
.nt-tool--pigeon:focus-visible { outline: 2px solid rgba(139, 127, 184, .45); outline-offset: 2px; }
.nt-with-icon { display: inline-flex; align-items: center; gap: 5px; }
.nt-with-icon svg { flex-shrink: 0; color: #8B7FB8; }
.nt-main {
    width: 60px; height: 60px; margin: 0 6px; flex-shrink: 0; border: 0; border-radius: 9999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: var(--nt-accent);
    box-shadow: 0 6px 18px rgba(139, 127, 184, .35);
    transition: background .4s ease, box-shadow .4s ease, transform .15s ease;
}
.nt-room.is-break .nt-main { box-shadow: 0 6px 18px rgba(95, 168, 163, .35); }
.nt-main:hover { filter: brightness(1.05); }
.nt-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px; border: 2px solid #fff; background: #d96c6c; color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.nt-select { appearance: none; -webkit-appearance: none; border: 0; border-radius: 9999px; padding: 5px 12px; font: inherit; font-size: 12px; color: #5d6b86; background: #f1f3f7; cursor: pointer; }
.nt-select:disabled { opacity: .55; cursor: default; }

.nt-leave { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
.nt-link-btn { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 12px; font-weight: 400; color: #a8b3c7; cursor: pointer; transition: color .2s ease; }
.nt-link-btn:hover { color: #5d6b86; }
.nt-leave .nt-link-btn:hover { color: #c05656; }
.nt-sep { color: #d1d7e3; font-size: 12px; }

/* Chat drawer: grid-rows trick animates to the content's natural height */
.nt-drawer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, margin-top .35s ease; margin-top: 0; }
.nt-drawer.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.nt-drawer-inner { min-height: 0; overflow: hidden; border-top: 1px solid var(--nt-line); }
.nt-drawer:not(.is-open) .nt-drawer-inner { visibility: hidden; transition: visibility 0s .35s; }
.nt-messages { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: 12px 2px 8px; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.nt-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.nt-msg.is-mine { align-items: flex-end; }
.nt-msg-name { font-size: 11px; color: var(--nt-soft); margin: 6px 0 2px 10px; }
.nt-bubble { max-width: 80%; padding: 7px 12px; border-radius: 16px 16px 16px 6px; background: #f1f3f7; color: var(--nt-ink); font-size: 14px; font-weight: 300; line-height: 1.4; overflow-wrap: anywhere; }
.nt-msg.is-mine .nt-bubble { border-radius: 16px 16px 6px 16px; background: var(--nt-accent-wash); color: var(--nt-accent-ink); }
.nt-msg-time { margin-left: 8px; font-size: 10px; color: var(--nt-faint); white-space: nowrap; }
.nt-msg-actions { display: flex; gap: 14px; margin: 4px 10px 2px; font-size: 12px; }
.nt-msg-actions button { background: none; border: 0; padding: 2px 0; font: inherit; color: #5d6b86; cursor: pointer; }
.nt-msg-actions button.is-danger { color: #c05656; }
.nt-inbox-actions { margin: 6px 0 0; }
.nt-empty { text-align: center; padding: 18px 0; font-size: 13px; font-weight: 300; color: var(--nt-faint); }
.nt-compose { display: flex; gap: 8px; align-items: center; padding: 4px 0 2px; }
.nt-input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border-radius: 9999px; border: 1px solid #e4e8ee; background: #fff; font: inherit; font-size: 16px; /* 16px stops iOS zooming in on focus */ font-weight: 300; color: var(--nt-ink); }
.nt-input:focus { outline: none; border-color: var(--nt-accent); box-shadow: 0 0 0 3px rgba(139, 127, 184, .15); }
.nt-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--nt-accent); color: #fff; cursor: pointer; transition: opacity .2s ease; }
.nt-send:disabled { opacity: .35; cursor: default; }

/* Carrier pigeon sheet (bottom sheet on phones, centered card on wider screens) */
.nt-overlay { background: rgba(37, 45, 61, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: nt-fade .2s ease; }
.nt-sheet { width: 100%; max-width: 400px; box-sizing: border-box; padding: 18px; border-radius: 24px; background: #fff; box-shadow: 0 20px 48px rgba(37, 45, 61, .18); animation: nt-rise .3s cubic-bezier(.2,.8,.2,1); color: #363f51; }
.nt-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nt-avatar--lg { width: 48px; height: 48px; font-size: 18px; box-shadow: none; }
.nt-sheet-title { font-size: 17px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-sheet-sub { font-size: 13px; font-weight: 300; color: #7d8ca8; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nt-chip { padding: 7px 12px; border-radius: 9999px; border: 1px solid #e4e8ee; background: #fff; font: inherit; font-size: 13px; font-weight: 400; color: #5d6b86; cursor: pointer; transition: all .2s ease; }
.nt-chip:hover:not(:disabled) { border-color: #8B7FB8; color: #5f5390; background: #f8f6fc; }
.nt-chip:disabled { opacity: .5; }
.nt-textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; border: 1px solid #e4e8ee; background: #f8f9fb; font: inherit; font-size: 16px; font-weight: 300; color: #363f51; resize: none; }
.nt-textarea:focus { outline: none; border-color: #8B7FB8; background: #fff; box-shadow: 0 0 0 3px rgba(139, 127, 184, .15); }
.nt-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.nt-count { font-size: 12px; color: #a8b3c7; font-variant-numeric: tabular-nums; }
.nt-primary-btn { padding: 9px 22px; border: 0; border-radius: 9999px; background: #8B7FB8; color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity .2s ease, filter .2s ease; }
.nt-primary-btn:hover:not(:disabled) { filter: brightness(1.06); }
.nt-primary-btn:disabled { opacity: .4; cursor: default; }
.nt-ghost-btn { padding: 6px 12px; border: 0; border-radius: 9999px; background: #f1eef8; color: #5f5390; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }

/* Pigeon inbox */
.nt-inbox { display: flex; flex-direction: column; gap: 8px; }
.nt-inbox-item { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: #fff; border: 1px solid #ebe8f3; box-shadow: 0 2px 10px rgba(99, 110, 129, .06); animation: nt-rise .35s cubic-bezier(.2,.8,.2,1); }
.nt-inbox-item .nt-avatar { width: 36px; height: 36px; font-size: 14px; box-shadow: none; }
.nt-inbox-from { font-size: 12px; font-weight: 500; color: #5f5390; }
.nt-inbox-text { font-size: 14px; font-weight: 300; color: #363f51; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.nt-inbox-more { font-size: 12px; color: #a8b3c7; text-align: center; }

/* First sign-in loader */
.nous-loader { background: #f8f9fb; }
/* stage and text fade in after a beat, so a fast sign-in goes straight from the skeleton to the app */
.nous-loader-stage { position: relative; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; animation: nl-in .6s cubic-bezier(.22, 1, .36, 1) .15s both; }
.nous-loader-glow { position: absolute; inset: 18px; border-radius: 9999px; background: radial-gradient(circle, rgba(167, 216, 245, .45), transparent 70%); animation: nt-glow 2.8s ease-in-out infinite; }
.nous-loader-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: spin 1.6s cubic-bezier(.45, .05, .55, .95) infinite; will-change: transform; }
.nous-loader-track { fill: none; stroke: #e3eff8; stroke-width: 2; }
.nous-loader-arc { fill: none; stroke: #a7d8f5; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 78; }
.nous-loader-text { font-size: 14px; font-weight: 300; letter-spacing: .02em; color: #7d8ca8; animation: nl-in .6s cubic-bezier(.22, 1, .36, 1) .3s both; }
@keyframes nl-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
/* the app fades in once auth is ready (index.js App root). Opacity only: a transform here would
   re-anchor every position:fixed child */
.nous-app-in { animation: nl-app-in .4s ease-out; }
@keyframes nl-app-in { from { opacity: 0; } }

@keyframes nt-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes nt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nt-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-10deg); } }
@keyframes nt-glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 380px) {
    .nt-room { padding: 16px 12px 12px; }
    .nt-controls { gap: 6px; }
    .nt-tool { width: 38px; height: 38px; }
    .nt-main { width: 54px; height: 54px; margin: 0 4px; }
    .nt-seat { width: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    .nt-room *, .nt-overlay, .nt-sheet, .nt-inbox-item, .nous-loader-glow, .nous-loader-stage, .nous-loader-text, .nous-app-in { animation: none !important; transition: none !important; }
    .nt-tool--pigeon svg { transform: none !important; transition: none !important; }
    .nous-loader-ring { animation-duration: 2.4s; }
}

/* Night mode */
body.night-mode .nt-room {
    --nt-ink: #e4e8ee; --nt-soft: #a8b3c7; --nt-faint: #6b7891;
    --nt-accent: #9d92cc; --nt-accent-ink: #d9d3f0; --nt-accent-wash: rgba(157, 146, 204, .18); --nt-line: rgba(148, 163, 184, .14);
    background: radial-gradient(120% 80% at 50% -10%, rgba(157, 146, 204, .14), transparent 60%), rgba(30, 41, 59, .6);
    box-shadow: none;
}
body.night-mode .nt-room.is-break { --nt-accent: #6fb8b2; --nt-accent-ink: #cdeae7; --nt-accent-wash: rgba(111, 184, 178, .18); }
body.night-mode .nt-room.is-paused { background: rgba(30, 41, 59, .45); }
body.night-mode .nt-time { color: #f1f3f7; }
body.night-mode .nt-room.is-paused .nt-time { color: var(--nt-faint); }
body.night-mode .nt-avatar { box-shadow: 0 0 0 2px #1e293b, 0 0 0 3.5px transparent; }
body.night-mode .nt-seat.is-here .nt-avatar { box-shadow: 0 0 0 2px #1e293b, 0 0 0 3.5px rgba(111, 184, 178, .6); }
body.night-mode .nt-presence, body.night-mode .nt-badge { border-color: #1e293b; }
body.night-mode .nt-tool, body.night-mode .nt-select { background: rgba(255, 255, 255, .07) !important; color: #c3cbd9; border: 0 !important; box-shadow: none !important; }
body.night-mode .nt-tool.is-on { background: var(--nt-accent-wash) !important; color: var(--nt-accent-ink); }
body.night-mode .nt-tool:hover, body.night-mode .nt-icon-btn:hover { background: rgba(255, 255, 255, .12) !important; color: #f1f3f7; }
body.night-mode .nt-icon-btn, body.night-mode .nt-link-btn, body.night-mode .nt-msg-actions button,
body.night-mode .nt-seat--invite { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; transform: none !important; }
body.night-mode .nt-link-btn { color: #6b7891 !important; }
body.night-mode .nt-link-btn:hover { color: #c3cbd9 !important; }
body.night-mode .nt-seat--invite .nt-avatar { border: 1.5px dashed rgba(148, 163, 184, .35); }
body.night-mode .nt-main, body.night-mode .nt-send { background: var(--nt-accent) !important; border: 0 !important; color: #1e1b2e; }
body.night-mode .nt-bubble { background: rgba(255, 255, 255, .07); }
body.night-mode .nt-input { background: rgba(255, 255, 255, .05); border-color: rgba(148, 163, 184, .2); }
body.night-mode .nt-wave { background: rgba(234, 196, 105, .12); color: #ead39b; }
body.night-mode .nt-sheet, body.night-mode .nt-inbox-item { background: #1e293b; border-color: rgba(148, 163, 184, .14); color: #e4e8ee; box-shadow: none; }
body.night-mode .nt-sheet .nt-avatar, body.night-mode .nt-inbox-item .nt-avatar { background: rgba(157, 146, 204, .18); color: #d9d3f0; }
body.night-mode .nt-chip { background: transparent !important; border: 1px solid rgba(148, 163, 184, .25) !important; color: #c3cbd9; box-shadow: none !important; }
body.night-mode .nt-textarea { background: rgba(255, 255, 255, .05); border-color: rgba(148, 163, 184, .2); color: #e4e8ee; }
body.night-mode .nt-ghost-btn { background: rgba(157, 146, 204, .18) !important; color: #d9d3f0; border: 0 !important; }
body.night-mode .nt-primary-btn { background: #9d92cc !important; color: #1e1b2e; border: 0 !important; }
body.night-mode .nt-inbox-from { color: #c9c1ea; }
body.night-mode .nt-tool--pigeon:hover { background: rgba(157, 146, 204, .2) !important; color: #d9d3f0; }
body.night-mode .nt-with-icon svg { color: #9d92cc; }
body.night-mode .nt-inbox-text { color: #e4e8ee; }
body.night-mode .nous-loader { background: #0f172a; }
body.night-mode .nous-loader-track { stroke: rgba(167, 216, 245, .14); }

/* ===== Grove + tree titles ===== */
.tree-title-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tree-title-badge svg { flex: none; opacity: 0.8; }
body.night-mode .tree-title-badge { color: var(--tt-night, #e2e8f0) !important; }
.nt-seat-title { max-width: 100%; margin: 1px 0; display: flex; justify-content: center; }
.nt-seat-title .tree-title-badge { font-size: 9.5px; line-height: 14px; padding: 0 5px; }
.nt-seat-title .tree-title-badge svg { display: none; }
/* Narrow seats: long titles ("Willow Whisperer") wrap onto two lines instead of being cut off */
.nt-seat-title .tree-title-badge { white-space: normal; text-align: center; overflow-wrap: anywhere; border-radius: 8px; }
.grove-shiny { position: absolute; top: 4px; right: 14px; font-size: 11px; line-height: 1; color: #d97706; text-shadow: 0 0 4px rgba(255,255,255,0.9); pointer-events: none; }
body.night-mode .grove-shiny { color: #fde68a; text-shadow: none; }

.grove-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.grove-title-label { font-size: 12px; font-weight: 300; color: #7d8ca8; }
.grove-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 300; color: #6b7a99; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.grove-link:hover { color: #363f51; }
.grove-title-options { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.grove-title-option { padding: 3px 10px; border-radius: 999px; border: 1px solid #d6dbe6; background: #fff; font-size: 12px; font-weight: 300; color: #4b5563; cursor: pointer; }
.grove-title-option.is-on { border-width: 1.5px; font-weight: 500; box-shadow: 0 0 0 2px rgba(125,140,168,0.15); }
body.night-mode .grove-title-option { background: transparent; color: #cbd5e1; }

.grove-scene { position: relative; display: flex; align-items: flex-end; gap: 0; height: 128px; padding: 8px 14px 0; overflow-x: auto; overflow-y: hidden; border-radius: 12px; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  background: linear-gradient(to bottom, #e0f2fe 0%, #d1fae5 58%, #a7f3d0 74%, #86efac 74.5%, #6fcf8f 100%); box-shadow: inset 0 2px 8px rgba(0,0,0,0.05); }
body.night-mode .grove-scene { background: linear-gradient(to bottom, #1e1b4b 0%, #283a5e 60%, #1f4d3a 74%, #14532d 74.5%, #0f3d22 100%); }
/* Spots size to their tree's canopy (margins set in GroveTreeArt) so the gaps between trees are even */
.grove-spot { position: relative; flex: none; width: auto; height: 112px; margin: 0; padding: 0; background: none; border: 0; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.grove-spot:focus-visible { outline: 2px solid #7d8ca8; outline-offset: -2px; }
.grove-tree-art { position: relative; width: 74px; height: 89px; pointer-events: none; transition: transform 0.25s ease; transform-origin: 50% 92%; }
.tree-art { position: relative; pointer-events: none; }
.tree-art-fit { height: 100%; aspect-ratio: 200 / 240; margin: 0 auto; }
/* cached tree image: viewBox -40 -30 280 270 against the live 0 0 200 240 */
.grove-tree-img { position: absolute; left: -20%; top: -12.5%; width: 140%; height: 112.5%; max-width: none; display: block; }
/* back on the dashboard: show the grown tree without replaying the grow-in */
.tree-still .tree-leaf, .tree-still .tree-branch { animation-duration: 0s; }
.grove-spot.is-selected .grove-tree-art { transform: scale(1.12); }
.grove-spot.is-selected::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #7d8ca8; }
.grove-night { position: absolute; left: 50%; bottom: 18px; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(49,46,129,0.55) 0%, rgba(49,46,129,0.25) 55%, rgba(49,46,129,0) 72%); pointer-events: none; }
.grove-spot.is-silhouette .grove-tree-art { filter: brightness(0); opacity: 0.13; }
.grove-spot.is-seed { width: 50px; margin: 0 -2px; }
.grove-mound { width: 44px; height: 30px; margin-bottom: 14px; opacity: 0.85; }
.grove-left { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-weight: 400; color: #3f6212; opacity: 0.75; }
body.night-mode .grove-left { color: #bbf7d0; }
.grove-caption { margin-top: 6px; font-size: 12px; font-weight: 300; color: #6b7a99; text-align: center; min-height: 18px; }
/* The grove is static: no entrance, sway, glow or falling-leaf animations across 26 small trees */
.grove-scene .tree-branch, .grove-scene .tree-leaf, .grove-scene .tree-glow, .grove-scene .tree-twinkle, .grove-scene .tree-aurora, .grove-scene .tree-sway, .grove-scene .tree-ember, .grove-scene .tree-mote, .grove-scene .tree-firefly, .grove-scene .tree-vein { animation: none; }
.grove-scene .tree-fall { display: none; }
/* Night mode restyles every button and glows every circle; keep the grove's controls plain */
body.night-mode .grove button, body.night-mode .grove-title-row button, body.night-mode button.grove-link { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: none; }
body.night-mode .grove-title-row .grove-title-option { border: 1px solid rgba(148,163,184,0.35) !important; color: var(--tt-night, #cbd5e1) !important; }
body.night-mode .grove-title-row .grove-title-option.is-on { border-color: rgba(203,213,225,0.8) !important; }
body.night-mode button.grove-link { color: #94a3b8; }
body.night-mode .grove-scene .tree-glow, body.night-mode .grove-night { display: none; }

/* ---- Seeds to gift + gift trees + Together growth boost ---- */
.seed-card { --seed-color: #65a30d; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, #f7fbef, #fdf8ee); border: 1px dashed #c9dca4; }
.seed-card-icon { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #fff; box-shadow: 0 2px 8px rgba(101, 163, 13, .15); }
.seed-card-title { font-size: 13px; font-weight: 500; color: #3f4a2a; }
.seed-card-sub { font-size: 11px; font-weight: 300; color: #6b7280; }
.seed-plant-btn { flex-shrink: 0; padding: 6px 14px; border: 0; border-radius: 9999px; background: #65a30d; color: #fff; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s; }
.seed-plant-btn:hover { background: #4d7c0f; }
.seed-plant-btn:disabled { opacity: .6; cursor: wait; }
.seed-chip { --seed-color: #65a30d; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 9999px; border: 1px dashed var(--seed-color); background: #fff; color: var(--seed-color); font: inherit; font-size: 12px; font-weight: 300; cursor: pointer; transition: opacity .2s; }
.seed-chip:hover { opacity: .8; }
.seed-chip.is-sent { border-style: solid; border-color: #e5e7eb; color: #9ca3af; cursor: default; background: #fafafa; }
.seed-chip.is-sent:hover { opacity: 1; }
.seed-chip.is-sent svg { opacity: .45; }
.seed-friend-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.seed-friend { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid #ebe8f3; border-radius: 14px; background: #fff; font: inherit; font-size: 14px; color: #363f51; cursor: pointer; }
.seed-friend:hover { background: #f7fbef; border-color: #d9e8bf; }
.seed-friend:disabled { opacity: .6; cursor: wait; }
.seed-friend .nt-avatar { width: 30px; height: 30px; font-size: 12px; box-shadow: none; }
.seed-friend-go { font-size: 12px; font-weight: 500; color: #65a30d; }
.gift-tree-row { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 4px; }
.gift-tree { position: relative; flex-shrink: 0; width: 96px; padding: 8px 6px; border-radius: 16px; background: linear-gradient(180deg, #fdf2f8, #fff); border: 1px solid #fbe3ef; text-align: center; }
.gift-tree-art { width: 64px; height: 76px; margin: 0 auto; }
.gift-tree-ribbon { position: absolute; top: -6px; right: -4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #ec4899; color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 2px 6px rgba(236, 72, 153, .35); }
.gift-tree-name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gift-tree-from { font-size: 10px; font-weight: 300; color: #be185d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-boost-chip { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; margin: 4px auto 10px; padding: 5px 12px; border-radius: 9999px; background: #f0f7e4; border: 1px solid #d9e8bf; color: #4d7c0f; font-size: 12px; font-weight: 500; text-align: center; box-sizing: border-box; animation: nt-rise .35s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .nt-boost-chip { animation: none; } }
body.night-mode .seed-card { background: rgba(101, 163, 13, .08); border-color: rgba(163, 230, 53, .3); }
body.night-mode .seed-card-icon, body.night-mode .seed-chip, body.night-mode .seed-friend { background: #1e293b; }
body.night-mode .seed-card-title, body.night-mode .seed-friend { color: #e4e8ee; }
body.night-mode .seed-friend { border-color: rgba(148, 163, 184, .14); }
body.night-mode .seed-chip.is-sent { background: #1e293b; border-color: rgba(148, 163, 184, .2); color: #64748b; }
body.night-mode .gift-tree { background: rgba(236, 72, 153, .08); border-color: rgba(236, 72, 153, .2); }
body.night-mode .gift-tree-from { color: #f9a8d4; }
body.night-mode .nt-boost-chip { background: rgba(101, 163, 13, .14); border-color: rgba(163, 230, 53, .25); color: #bef264; }

/* ---- Tree rarity tiers ---- */
.tree-tier-chip { display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tier); background: color-mix(in srgb, var(--tier) 13%, #fff); border: 1px solid color-mix(in srgb, var(--tier) 35%, transparent); }
.tree-tier-legendary { color: #b45309; background: linear-gradient(90deg, #fef3c7, #fde68a, #fef3c7); border-color: #f59e0b; box-shadow: 0 0 6px rgba(245, 158, 11, .35); }
body.night-mode .tree-tier-chip { background: color-mix(in srgb, var(--tier) 20%, #0f172a); color: color-mix(in srgb, var(--tier) 60%, #fff); }
body.night-mode .tree-tier-legendary { background: linear-gradient(90deg, #78350f, #92400e, #78350f); color: #fde68a; }
/* Mystery boxes on the tree card and in the grove */
.tree-box-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; margin: -4px 0 16px; padding: 12px 12px 12px 14px; border-radius: 18px; background: linear-gradient(120deg, #f2f9fe 0%, #eaf5fd 55%, #f4f1fd 100%); box-shadow: inset 0 0 0 1px rgba(167, 216, 245, .7), 0 2px 10px rgba(93, 107, 134, .06); }
.tree-box-banner::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); transform: translateX(-80px) skewX(-18deg); animation: treeBoxShine 5.5s ease-in-out 1.2s infinite; }
.tree-box-banner > * { position: relative; z-index: 1; }
.tree-box-banner .mbox-stack { flex: none; }
@keyframes treeBoxShine { 0%, 62% { transform: translateX(-80px) skewX(-18deg); } 100% { transform: translateX(560px) skewX(-18deg); } }
/* Home stack of unopened boxes: the front box nudges, the ones behind peek out */
.mbox-stack { position: relative; display: inline-block; flex: none; }
.mbox-stack__box { position: absolute; bottom: 0; display: block; transform-origin: 50% 90%; }
.mbox-stack__box--0 { left: 0; z-index: 3; animation: treeBoxNudge 2.6s ease-in-out infinite; }
.mbox-stack__box--1 { left: 9px; z-index: 2; transform: translate(6px, -3px) scale(.82) rotate(8deg); opacity: .92; }
.mbox-stack__box--2 { left: 18px; z-index: 1; transform: translate(4px, -7px) scale(.68) rotate(14deg); opacity: .8; }
.mbox-stack__count { position: absolute; top: -4px; right: -6px; z-index: 4; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #5d6b86; color: #fff; font-size: 11px; font-weight: 500; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(93,107,134,.25); }
.tree-box-banner__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; font-weight: 300; color: #6b7a99; line-height: 1.35; }
.tree-box-banner__text strong { font-size: 14px; font-weight: 400; color: #363f51; }
.tree-box-banner__btn { flex: none; padding: 8px 18px; border-radius: 10px; border: 0; background: #5d6b86; color: #fff; font: inherit; font-size: 14px; font-weight: 400; cursor: pointer; transition: background .15s; }
.tree-box-banner__btn:hover { background: #4a5568; }
.tree-box-banner__btn:disabled { opacity: .5; cursor: default; }
.tree-sky-box { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; }
.tree-sky-box:disabled { cursor: default; }
.tree-sky-box__icon { position: relative; display: block; animation: treeBoxNudge 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.tree-sky-box__halo { position: absolute; left: 50%; top: 56%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(167,216,245,.55) 36%, rgba(167,216,245,0) 68%); animation: treeSkyHalo 3.2s ease-in-out infinite; }
@keyframes treeSkyHalo { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
.grove-spot.is-box { width: 60px; }
.grove-box { margin-bottom: 14px; animation: treeBoxNudge 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.grove-spot.is-growing .grove-left { font-weight: 500; opacity: .9; }
@keyframes treeBoxNudge { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .tree-box-banner .mbox-icon, .tree-sky-box__icon, .tree-sky-box__halo, .grove-box, .mbox-stack__box--0, .tree-box-banner::after { animation: none; } .tree-box-banner::after { display: none; } }
body.night-mode .tree-box-banner { background: linear-gradient(120deg, rgba(167,216,245,.1), rgba(148,163,184,.06)); box-shadow: inset 0 0 0 1px rgba(167, 216, 245, .22); }
body.night-mode .tree-box-banner::after { opacity: .15; }
body.night-mode .mbox-stack__count { box-shadow: 0 0 0 2px #1e2433; }
body.night-mode .tree-sky-box__halo { opacity: .35; animation: none; }
body.night-mode .tree-box-banner__text strong { color: #e2e8f0; }
body.night-mode .tree-box-banner__btn { background: #6B8DD6 !important; color: #fff !important; border: 0 !important; }
body.night-mode button.tree-sky-box { background: none !important; border: 0 !important; box-shadow: none !important; }
/* In-app confirm (window.nousConfirm) */
.nous-confirm { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(241, 243, 247, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: nousConfirmIn .18s ease-out both; }
.nous-confirm__card { width: 100%; max-width: 320px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(99, 110, 129, .14), 0 2px 8px rgba(99, 110, 129, .06); animation: nousConfirmCard .22s cubic-bezier(.2, .9, .3, 1.1) both; }
.nous-confirm__msg { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.45; color: #363f51; }
.nous-confirm__actions { display: flex; gap: 8px; margin-top: 18px; }
.nous-confirm__btn { flex: 1; padding: 11px 12px; border: 0; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 400; cursor: pointer; background: #f1f3f7; color: #4a5568; transition: background .15s, transform .15s; }
.nous-confirm__btn:hover { background: #e4e8ee; }
.nous-confirm__btn:active { transform: scale(.98); }
.nous-confirm__btn:focus-visible { outline: 2px solid #6B8DD6; outline-offset: 2px; }
.nous-confirm__btn--danger { background: #dc5a5a; color: #fff; }
.nous-confirm__btn--danger:hover { background: #c94848; }
.nous-confirm__btn--primary { background: #5d6b86; color: #fff; }
.nous-confirm__btn--primary:hover { background: #4a5568; }
@keyframes nousConfirmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nousConfirmCard { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nous-confirm, .nous-confirm__card { animation: none; } }
body.night-mode .nous-confirm { background: rgba(10, 14, 26, .65); }
body.night-mode .nous-confirm__card { background: #1e2433; box-shadow: 0 12px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
body.night-mode .nous-confirm__msg { color: #e2e8f0; }
body.night-mode button.nous-confirm__btn { background: rgba(148, 163, 184, .14) !important; color: #e2e8f0 !important; border: 0 !important; box-shadow: none !important; }
body.night-mode button.nous-confirm__btn--danger { background: #dc5a5a !important; color: #fff !important; }
body.night-mode button.nous-confirm__btn--primary { background: #6B8DD6 !important; color: #fff !important; }
/* Legendary timer themes (Habits timer card; chosen on the tree card) */
.nous-timer-card { isolation: isolate; }
body .nous-timer-card.nous-timer-card--aurora { background: linear-gradient(165deg, #10163a 0%, #1e1b4b 52%, #0f3344 100%) !important; border-color: rgba(129, 140, 248, .22) !important; }
.nous-timer-card--aurora::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0 round 24px);
  background: radial-gradient(ellipse 45% 22% at 26% 22%, rgba(45, 212, 191, .42), transparent 70%), radial-gradient(ellipse 40% 20% at 70% 16%, rgba(167, 139, 250, .4), transparent 70%), radial-gradient(ellipse 34% 16% at 50% 32%, rgba(94, 234, 212, .22), transparent 70%);
  filter: blur(10px); animation: auroraDrift 16s ease-in-out infinite alternate; }
.nous-timer-card--aurora::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .65; border-radius: inherit;
  background-image: radial-gradient(1.3px 1.3px at 12% 24%, #fff 60%, transparent), radial-gradient(1px 1px at 33% 9%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 57% 27%, #fff 60%, transparent), radial-gradient(1px 1px at 78% 8%, #fff 60%, transparent), radial-gradient(1.4px 1.4px at 90% 31%, #fff 60%, transparent), radial-gradient(1px 1px at 22% 46%, #fff 60%, transparent), radial-gradient(1px 1px at 84% 52%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 46% 4%, #fff 60%, transparent); }
.nous-timer-card--aurora .nous-glyph, .nous-timer-card--aurora .nous-icon-btn { background: rgba(255, 255, 255, .08); color: #cbd5e1; border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.nous-timer-card--aurora .timer-display { color: #f8fafc !important; text-shadow: 0 0 24px rgba(94, 234, 212, .25); }
@keyframes auroraDrift { from { transform: translateX(-5%) skewX(-5deg); opacity: .75; } to { transform: translateX(5%) skewX(5deg); opacity: 1; } }
body .nous-timer-card.nous-timer-card--bonsai { background: #f7f5ee !important; border-color: #e7e1cf !important; }
.nous-timer-card--bonsai::before { content: ''; position: absolute; right: 16px; bottom: 14px; width: 150px; height: 120px; z-index: -1; opacity: .09; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cg fill='%233f4b3b'%3E%3Cpath d='M45 104h60l-6 14H51z'/%3E%3Crect x='38' y='97' width='74' height='8' rx='2'/%3E%3Cpath d='M74 98c-3-14 3-23 13-31-9 3-15 1-21-7 4 10-2 18-8 22 8-2 13 5 11 16z'/%3E%3Cellipse cx='50' cy='54' rx='26' ry='10'/%3E%3Cellipse cx='99' cy='42' rx='30' ry='11'/%3E%3Cellipse cx='75' cy='24' rx='22' ry='9'/%3E%3C/g%3E%3Cpath d='M70 66c8-8 20-16 26-24M66 62c-6-4-10-6-14-8M79 44c-2-6-3-12-3-18' stroke='%233f4b3b' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.nous-timer-card--bonsai .timer-display { color: #3f4b3b !important; }
body.night-mode .nous-timer-card.nous-timer-card--bonsai { background: #1d221c !important; border-color: rgba(214, 211, 196, .14) !important; }
body.night-mode .nous-timer-card--bonsai::before { filter: invert(1); opacity: .08; }
body.night-mode .nous-timer-card--bonsai .timer-display { color: #dfe7d4 !important; }
@media (prefers-reduced-motion: reduce) { .nous-timer-card--aurora::before { animation: none; } }

/* Legendary perks on the tree card, grove, titles, seeds and leaderboard */
.legend-teaser { margin: 12px 0 0; font-size: 12px; font-weight: 300; color: #7d8ca8; line-height: 1.45; }
.legend-teaser__star { color: #d97706; margin-right: 5px; }
.legend-perks { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #fffbeb, #fff 60%); box-shadow: inset 0 0 0 1px #fde68a; }
.legend-perks__head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.legend-perks__title { font-size: 13px; font-weight: 400; color: #92400e; }
.legend-perks__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12px; font-weight: 300; color: #5d6b86; line-height: 1.45; }
.legend-perks__list strong { font-weight: 500; color: #92400e; margin-right: 6px; }
.legend-perks__themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.legend-perks__label { font-size: 12px; font-weight: 300; color: #7d8ca8; margin-right: 2px; }
.legend-theme { padding: 4px 12px; border-radius: 999px; border: 1px solid #e4e8ee; background: #fff; font: inherit; font-size: 12px; font-weight: 300; color: #4a5568; cursor: pointer; }
.legend-theme.is-on { border-color: #f59e0b; color: #92400e; font-weight: 500; box-shadow: 0 0 0 2px rgba(245, 158, 11, .15); }
.legend-theme--aurora.is-on { background: linear-gradient(90deg, #ccfbf1, #ede9fe); }
.legend-theme--bonsai.is-on { background: #f7f5ee; }
body.night-mode .legend-perks { background: rgba(245, 158, 11, .07); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); }
body.night-mode .legend-perks__title, body.night-mode .legend-perks__list strong { color: #fcd34d; }
body.night-mode .legend-perks__list { color: #cbd5e1; }
body.night-mode button.legend-theme { background: transparent !important; color: #cbd5e1 !important; border: 1px solid rgba(148, 163, 184, .3) !important; }
body.night-mode button.legend-theme.is-on { border-color: #f59e0b !important; color: #fde68a !important; }

.grove-halo { position: absolute; left: 50%; bottom: 14px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(253, 230, 138, .75) 0%, rgba(251, 191, 36, .28) 45%, rgba(251, 191, 36, 0) 70%); animation: groveHalo 3.2s ease-in-out infinite; }
.grove-spot.is-legendary::before { content: '✦'; position: absolute; top: 6px; left: 12px; font-size: 10px; color: #f59e0b; text-shadow: 0 0 6px rgba(255, 255, 255, .9); pointer-events: none; }
@keyframes groveHalo { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
.tree-still .grove-halo { animation: none; }
@media (prefers-reduced-motion: reduce) { .grove-halo { animation: none; } }

.tree-title-badge.tree-title-badge--legendary { color: #92400e !important; background: linear-gradient(90deg, #fef3c7, #fde68a, #fef3c7) !important; box-shadow: 0 0 0 1px #f59e0b, 0 0 8px rgba(245, 158, 11, .35); }
body.night-mode .tree-title-badge.tree-title-badge--legendary { color: #fde68a !important; background: linear-gradient(90deg, #78350f, #92400e, #78350f) !important; }


.leaderboard-legend { margin-left: 8px; vertical-align: 2px; }
.hall-of-fame__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.hall-of-fame__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #f8f9fb; }
.hall-of-fame__row.is-first { background: linear-gradient(90deg, #fffbeb, #f8f9fb); box-shadow: inset 0 0 0 1px #fde68a; }
.hall-of-fame__art { flex: none; width: 44px; height: 52px; }
.hall-of-fame__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hall-of-fame__who { font-size: 15px; font-weight: 400; color: #363f51; }
.hall-of-fame__what { font-size: 12px; font-weight: 300; color: #7d8ca8; }
.hall-of-fame__first { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; color: #92400e; background: #fde68a; }
body.night-mode .hall-of-fame__row { background: rgba(148, 163, 184, .08); }
body.night-mode .hall-of-fame__row.is-first { background: rgba(245, 158, 11, .1); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35); }
body.night-mode .hall-of-fame__who { color: #e2e8f0; }.nous-timer-card--aurora .bg-gray-100.rounded-full { background: rgba(255, 255, 255, .08) !important; }
.nous-timer-card--aurora .bg-gray-100.rounded-full button.bg-white { background: rgba(255, 255, 255, .18) !important; color: #f8fafc !important; box-shadow: none; }
.nous-timer-card--aurora .bg-gray-100.rounded-full button:not(.bg-white) { color: #94a3b8 !important; }
body.night-mode .nous-timer-card--bonsai .text-gray-900 { color: #dfe7d4 !important; }
/* Deep focus row on the timer card: the session's sapling and the switch */
.focus-row { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 28rem; margin: 18px auto 0; padding: 8px 12px; border-radius: 16px; background: #f8f9fb; }
.focus-row.is-on { background: #f1f7ee; }
.focus-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; text-align: left; }
.focus-row__title { font-size: 13px; font-weight: 400; color: #363f51; }
.focus-row__hint { font-size: 12px; font-weight: 300; color: #7d8ca8; }
.focus-switch { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; padding: 0; background: #d5dbe5; cursor: pointer; transition: background .2s ease; }
.focus-switch.is-on { background: #5DAE49; }
.focus-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .2s ease; }
.focus-switch.is-on .focus-switch__knob { transform: translateX(16px); }
.focus-switch:focus-visible { outline: 2px solid #6B8DD6; outline-offset: 2px; }
.focus-sapling { flex: none; overflow: visible; transform-origin: 50% 90%; }
.focus-sapling.is-growing { animation: saplingSway 4s ease-in-out infinite; }
.focus-sapling.is-drooping { animation: saplingDroop 6s ease-out; filter: saturate(.4); }
.focus-sapling.is-withered { filter: none; }
@keyframes saplingSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes saplingDroop { 0% { transform: rotate(14deg) scaleY(.86); } 70% { transform: rotate(10deg) scaleY(.9); } 100% { transform: none; filter: none; } }
body.night-mode .focus-row { background: rgba(148,163,184,.08); }
body.night-mode .focus-row.is-on { background: rgba(93,174,73,.1); }
body.night-mode .focus-row__title { color: #e2e8f0; }
body.night-mode .focus-row__hint { color: #94a3b8; }
body.night-mode .focus-switch:not(.is-on) { background: #475569; }
.nous-timer-card--aurora .focus-row { background: rgba(255,255,255,.06); }
.nous-timer-card--aurora .focus-row__title { color: #f1f5f9; }
.nous-timer-card--aurora .focus-row__hint { color: #a5b4cb; }
.nous-timer-card--bonsai .focus-row { background: rgba(63,75,59,.06); }
.tree-still .focus-sapling { animation: none; }
@media (prefers-reduced-motion: reduce) { .focus-sapling { animation: none !important; } }

/* Nous Together pact */
.nt-pact { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 300; line-height: 1.35; text-align: center; }
.nt-pact__icon { flex: none; }
.nt-pact--offer { border: 1px dashed #c7d0de; background: transparent; color: #5d6b86; cursor: pointer; }
.nt-pact--offer:hover { background: #f8f9fb; }
.nt-pact.is-on { background: #eef6ea; color: #3f6b2f; box-shadow: inset 0 0 0 1px #cfe3c0; }
.nt-pact.is-broken { background: #f7f1ea; color: #8a6a45; box-shadow: inset 0 0 0 1px #e6d6c1; }
body.night-mode .nt-pact--offer { border-color: rgba(148,163,184,.35) !important; color: #cbd5e1 !important; background: transparent !important; }
body.night-mode .nt-pact.is-on { background: rgba(93,174,73,.12); color: #bfe3ad; box-shadow: inset 0 0 0 1px rgba(93,174,73,.3); }
body.night-mode .nt-pact.is-broken { background: rgba(176,141,91,.12); color: #e6cfae; box-shadow: inset 0 0 0 1px rgba(176,141,91,.3); }

/* The forest in Reports: one tree per session */
.forest-count { margin: 2px 0 12px; font-size: 22px; font-weight: 300; color: #363f51; }
.forest-count__dead, .forest-count__pact { font-size: 14px; color: #7d8ca8; }
.forest-plot { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 2px 4px; min-height: 96px; padding: 14px 10px 12px; border-radius: 16px;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,255,255,.35), transparent 70%), linear-gradient(180deg, #e9f4e4 0%, #d6ebcd 100%);
  box-shadow: inset 0 -6px 0 rgba(93,174,73,.12); }
.forest-plot.is-empty { align-items: center; }
.forest-empty { margin: 0; font-size: 13px; font-weight: 300; color: #5f7a55; }
.forest-spot { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 46px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
.forest-spot::after { content: ''; position: absolute; bottom: 1px; left: 50%; width: calc(30px * var(--s, 1)); height: 5px; margin-left: calc(-15px * var(--s, 1)); border-radius: 50%; background: rgba(63,107,47,.18); z-index: 0; }
.forest-tree-art { position: relative; z-index: 1; width: calc(46px * var(--s, 1)); height: calc(55px * var(--s, 1)); pointer-events: none; transform-origin: 50% 95%; transition: transform .2s ease; }
.forest-tree-art > svg { width: 100%; height: 100%; overflow: visible; }
.forest-dead { position: relative; z-index: 1; width: calc(40px * var(--s, 1)); height: calc(48px * var(--s, 1)); }
.forest-spot.is-picked .forest-tree-art, .forest-spot.is-picked .forest-dead { transform: scale(1.15); }
.forest-spot:focus-visible { outline: 2px solid #6B8DD6; outline-offset: 1px; }
.forest-pact { position: absolute; top: 2px; right: 2px; z-index: 2; display: flex; color: #3f6b2f; line-height: 1; }
.nt-pact__icon { display: inline-flex; }
body.night-mode .forest-pact { color: #bfe3ad; }
.forest-more { align-self: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #5f7a55; background: rgba(255,255,255,.6); }
.forest-caption { margin: 10px 0 0; font-size: 13px; font-weight: 300; color: #4a5568; text-align: center; }
.forest-caption.is-hint { color: #9aa6bb; font-size: 12px; }
body.night-mode .forest-count { color: #e2e8f0; }
body.night-mode .forest-plot { background: linear-gradient(180deg, rgba(93,174,73,.12) 0%, rgba(93,174,73,.2) 100%); box-shadow: none; }
body.night-mode .forest-empty { color: #a7c79a; }
body.night-mode .forest-caption { color: #cbd5e1; }
body.night-mode .forest-more { background: rgba(15,23,42,.5); color: #a7c79a; }
/* Recent sessions: delete controls sized for fingers (44px tap targets) */
.sess-del-btn { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #9ca3af; transition: color .15s, background-color .15s; }
.sess-del-btn:hover, .sess-del-btn:active { color: #dc2626; background: #fef2f2; }
.sess-del-confirm, .sess-del-cancel { min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; transition: background-color .15s; }
.sess-del-confirm { background: #ef4444; color: #fff; }
.sess-del-confirm:hover, .sess-del-confirm:active { background: #dc2626; }
.sess-del-cancel { color: #6b7280; }
.sess-del-cancel:hover, .sess-del-cancel:active { background: #f3f4f6; }
body.night-mode .sess-del-cancel:hover, body.night-mode .sess-del-cancel:active { background: rgba(255,255,255,.08); }
body.night-mode .sess-del-btn:hover, body.night-mode .sess-del-btn:active { background: rgba(239,68,68,.12); }

/* Past milestones: a quiet list you can open under the countdowns */
.ms-past-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; font-size: .8rem; font-weight: 300; color: #9ca3af; }
.ms-past-toggle:hover { color: #6b7280; }
.ms-past-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ms-past-caret.is-open { transform: rotate(225deg) translateY(-1px); }
.ms-past-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ms-past-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 12px; border-radius: 12px; background: #f9fafb; border-left: 3px solid #d1d5db; }
.ms-past-icon { flex-shrink: 0; display: flex; }
.ms-past-name { font-size: .9rem; font-weight: 300; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-past-meta { font-size: .72rem; font-weight: 300; color: #9ca3af; }
.ms-past-del { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #c0c6d0; }
.ms-past-del:hover, .ms-past-del:active { color: #dc2626; background: #fef2f2; }
body.night-mode .ms-past-row { background: rgba(255,255,255,.04); border-left-color: #475569; }
body.night-mode .ms-past-name { color: #cbd5e1; }

/* New members (owner only) */
.new-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: #f8fafc; border: 1px solid #e5e9f0; }
.new-member-name { font-size: 15px; color: #334155; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.new-member-meta { font-size: 12px; color: #94a3b8; font-weight: 300; }
.new-member-add { flex-shrink: 0; min-width: 64px; min-height: 38px; padding: 0 14px; border-radius: 10px; background: #dbeafe; color: #1d4ed8; font-size: 14px; }
.new-member-add:hover { background: #bfdbfe; }
.new-member-add.is-sent { background: transparent; color: #94a3b8; cursor: default; }
body.night-mode .new-member-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.night-mode .new-member-name { color: #e2e8f0; }

/* Streaks: flame, streak shields, and days a shield covered */
.streak-flame { display: inline-flex; align-items: center; gap: 2px; color: #f97316; font-size: 12px; font-weight: 500; }
.streak-shield { display: inline-flex; align-items: center; gap: 1px; color: #3b82f6; font-size: 11px; font-weight: 500; }
.nous-day-shielded { background: #eff6ff; border: 2px dashed #93c5fd; color: #3b82f6; }
body.night-mode .nous-day-shielded { background: rgba(59,130,246,.12); border-color: rgba(147,197,253,.55); color: #93c5fd; }

/* Soundscapes (Aurora perk) on the timer card */
.sound-row { width: 100%; max-width: 28rem; margin: 10px auto 0; padding: 10px 12px; border-radius: 16px; background: #f8f9fb; text-align: left; }
.sound-row.is-on { background: linear-gradient(120deg, #eef2ff 0%, #ecfeff 55%, #f0fdf4 100%); }
.sound-row__head { display: flex; flex-direction: column; line-height: 1.3; margin-bottom: 8px; }
.sound-row__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sound-chip { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 400; color: #5b6880; background: #fff; border: 1px solid #e3e8f0; transition: background .15s, color .15s, border-color .15s; }
.sound-chip.is-on { color: #fff; background: #4f5f8a; border-color: #4f5f8a; }
.sound-row__vol { display: block; width: 100%; margin-top: 10px; accent-color: #4f5f8a; }
body.night-mode .sound-row { background: rgba(148,163,184,.08); }
body.night-mode .sound-row.is-on { background: linear-gradient(120deg, rgba(99,102,241,.16), rgba(20,184,166,.12)); }
body.night-mode .sound-chip { background: transparent !important; color: #cbd5e1 !important; border: 1px solid rgba(148,163,184,.35) !important; }
body.night-mode .sound-chip.is-on { background: #6366f1 !important; color: #fff !important; border-color: #6366f1 !important; }
.nous-timer-card--aurora .sound-row { background: rgba(255,255,255,.06); }
.nous-timer-card--aurora .sound-row.is-on { background: linear-gradient(120deg, rgba(99,102,241,.22), rgba(20,184,166,.16)); }
.nous-timer-card--aurora .sound-chip { background: transparent; color: #cbd5e1; border-color: rgba(148,163,184,.35); }
.nous-timer-card--aurora .sound-chip.is-on { background: #6366f1; color: #fff; border-color: #6366f1; }

/* Grove landscapes (Bonsai perk): sky down to ground, the horizon at 74% like the meadow */
.grove-scene--moss { background:
  radial-gradient(ellipse 60% 18% at 30% 70%, rgba(255,255,255,.35), transparent 70%),
  linear-gradient(to bottom, #e3efe6 0%, #cfe3d4 58%, #9cc5a4 74%, #5f9b6b 74.5%, #3f7a4c 100%); }
.grove-scene--zen { background:
  repeating-linear-gradient(178deg, transparent 0 7px, rgba(255,255,255,.35) 7px 8px) 0 100% / 100% 26% no-repeat,
  linear-gradient(to bottom, #f5efe3 0%, #efe4cf 58%, #e6d7b8 74%, #dcc9a3 74.5%, #cdb68a 100%); }
.grove-scene--autumn { background:
  linear-gradient(to bottom, #fde8d7 0%, #fbd5b5 58%, #f6b98c 74%, #d9893f 74.5%, #b8682a 100%); }
.grove-scene--snow { background:
  radial-gradient(circle at 18% 22%, rgba(255,255,255,.9) 0 1.5px, transparent 2px) 0 0 / 46px 38px,
  radial-gradient(circle at 70% 60%, rgba(255,255,255,.8) 0 1px, transparent 1.5px) 0 0 / 34px 30px,
  linear-gradient(to bottom, #dbe7f3 0%, #e8f0f8 58%, #f4f8fc 74%, #ffffff 74.5%, #e9eff6 100%); }
.grove-scene--snow .grove-left { color: #475569; }
body.night-mode .grove-scene--moss { background: linear-gradient(to bottom, #102a22 0%, #1b3d31 60%, #23513c 74%, #1b4430 74.5%, #12301f 100%); }
body.night-mode .grove-scene--zen { background:
  repeating-linear-gradient(178deg, transparent 0 7px, rgba(255,255,255,.07) 7px 8px) 0 100% / 100% 26% no-repeat,
  linear-gradient(to bottom, #1f1b2e 0%, #2c2a3d 60%, #4a4256 74%, #5b5060 74.5%, #463d4a 100%); }
body.night-mode .grove-scene--autumn { background: linear-gradient(to bottom, #2a1630 0%, #43223a 60%, #6b3440 74%, #6b3a1f 74.5%, #4d2914 100%); }
body.night-mode .grove-scene--snow { background:
  radial-gradient(circle at 18% 22%, rgba(255,255,255,.7) 0 1.2px, transparent 1.8px) 0 0 / 46px 38px,
  linear-gradient(to bottom, #0f1b33 0%, #1d2c4a 60%, #3b4c6b 74%, #c7d3e3 74.5%, #9fb0c7 100%); }

/* Landscape picker */
.grove-landscapes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.grove-landscape { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px 0 5px; border-radius: 999px; font-size: 12px; font-weight: 300; color: #5d6b86; background: #fff; border: 1px solid #e3e8f0; }
.grove-landscape.is-on { border-color: #7d8ca8; color: #334155; font-weight: 400; box-shadow: 0 0 0 2px rgba(125,140,168,.15); }
.grove-landscape__swatch { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); background: linear-gradient(to bottom, #e0f2fe 0 55%, #86efac 55% 100%); }
.grove-landscape--moss .grove-landscape__swatch { background: linear-gradient(to bottom, #cfe3d4 0 55%, #5f9b6b 55% 100%); }
.grove-landscape--zen .grove-landscape__swatch { background: repeating-linear-gradient(178deg, #dcc9a3 0 3px, #efe4cf 3px 5px); }
.grove-landscape--autumn .grove-landscape__swatch { background: linear-gradient(to bottom, #fbd5b5 0 55%, #d9893f 55% 100%); }
.grove-landscape--snow .grove-landscape__swatch { background: linear-gradient(to bottom, #dbe7f3 0 55%, #ffffff 55% 100%); }
body.night-mode .grove-landscapes .grove-landscape { background: transparent !important; color: #cbd5e1 !important; border: 1px solid rgba(148,163,184,.35) !important; box-shadow: none !important; }
body.night-mode .grove-landscapes .grove-landscape.is-on { border-color: rgba(203,213,225,.85) !important; color: #f1f5f9 !important; }

/* Moving trees in the grove */
.grove-arrange { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
.grove-link.is-on { color: #334155; font-weight: 500; }
.grove-move { width: 40px; height: 34px; border-radius: 10px; font-size: 22px; line-height: 1; color: #475569; background: #f1f4f8; border: 1px solid #e3e8f0; }
.grove-move:disabled { opacity: .35; }
.grove-scene.is-arranging .grove-spot.is-unlocked { animation: groveWiggle 2.4s ease-in-out infinite; }
.grove-scene.is-arranging .grove-spot.is-selected { animation: none; }
@keyframes groveWiggle { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
body.night-mode .grove-arrange .grove-move { background: rgba(148,163,184,.12) !important; color: #e2e8f0 !important; border: 1px solid rgba(148,163,184,.3) !important; }
@media (prefers-reduced-motion: reduce) { .grove-scene.is-arranging .grove-spot.is-unlocked { animation: none; } }

/* Friends tab: friends | leaderboard switch under the title */
.people-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
body.night-mode .people-seg { background: rgba(255,255,255,.06); }
body.night-mode .people-seg button { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #8f9bb3; }
body.night-mode .people-seg button.is-active { background: rgba(107,141,214,.22) !important; color: #c7d4f2; }

/* Seeds to gift: folded into one line until opened */
.seeds-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: .75rem; font-weight: 300; color: #5d6b86; }
.seeds-toggle:hover { color: #3f4a5f; }
.seeds-toggle__chev { display: inline-block; margin-left: 4px; font-size: 1rem; line-height: 1; transition: transform .2s; }
.seeds-toggle__chev.is-open { transform: rotate(90deg); }
body.night-mode .seeds-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #b4bfd3; }

/* Recent sessions: show more / less */
.sess-more { display: block; width: 100%; min-height: 40px; border-radius: 10px; font-size: .85rem; font-weight: 400; color: #6B8DD6; }
.sess-more:hover { background: #f5f7fa; }
body.night-mode .sess-more { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #9fb5e8; }

/* ============================================
   DARK MODE POLISH
   Quieter buttons (no boxed outline or lift on every icon), the app blue for main
   actions, red kept for sign out and delete, native controls drawn dark.
   ============================================ */
body.night-mode { color-scheme: dark; }
body.night-mode button {
    background: rgba(148, 163, 184, 0.08) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    backdrop-filter: none;
}
body.night-mode button:hover {
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: transparent !important;
    transform: none;
    box-shadow: none !important;
}
/* Icon-only and text buttons sit flat */
body.night-mode .sess-del-btn,
body.night-mode button.p-1,
body.night-mode .nous-hero-identity button,
body.night-mode .secret-tree { background: transparent !important; }
body.night-mode .sess-del-btn:hover { background: rgba(239, 68, 68, 0.12) !important; }
/* Main actions in the app blue, without the glow */
body.night-mode button.bg-gray-900,
body.night-mode button[class*="bg-blue"],
body.night-mode button[class*="bg-purple"] {
    background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(90, 123, 200, 0.6) !important;
    filter: none;
}
body.night-mode button.bg-gray-900:hover,
body.night-mode button[class*="bg-blue"]:hover,
body.night-mode button[class*="bg-purple"]:hover { filter: brightness(1.08); transform: none; }
/* Sign out and delete stay red */
body.night-mode button.bg-red-600 { background: rgba(220, 90, 90, 0.85) !important; color: #fff !important; }
body.night-mode button.bg-red-600:hover { background: #dc5a5a !important; }
body.night-mode button.text-red-600 { background: transparent !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.35) !important; }
/* Only the app bar is a bar: other <header> elements (like the mood check-in title) stay plain */
body.night-mode header:not(.sticky) { background: transparent !important; backdrop-filter: none; border: 0 !important; box-shadow: none !important; }
/* The logo ring: a soft line like in the day, not a glowing blob */
body.night-mode .nous-title { text-shadow: none; }
/* Checkboxes in the app blue */
body.night-mode input[type="checkbox"] { accent-color: #6B8DD6; }
/* Locked secret trees: dark tiles instead of light grey */
body.night-mode .secret-tree.is-locked .secret-tree__art { background: linear-gradient(to bottom, #1e293b, #172033) !important; }
body.night-mode .secret-tree.is-locked .secret-tree__art > div { filter: brightness(0) invert(1) !important; opacity: 0.2 !important; }
/* A backdrop blur on a card traps fixed popups inside it (the countdown picker opened inside the timer card) */
body.night-mode .bg-white,
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,
body.night-mode .bg-blue-50, body.night-mode .bg-gradient-to-b, body.night-mode .bg-gradient-to-r, body.night-mode .bg-gradient-to-br { backdrop-filter: none !important; }
body.night-mode .bg-white { background: rgba(17, 25, 44, 0.92) !important; }
body.night-mode .border-blue-100 { border-color: rgba(148, 163, 184, 0.12) !important; }
body.night-mode button[style*="background: none"] { background: transparent !important; }
body.night-mode .ms-past-toggle, body.night-mode .ms-past-toggle:hover,
body.night-mode .ms-past-del { background: transparent !important; }
body.night-mode .ms-past-del:hover { background: rgba(148, 163, 184, 0.1) !important; }

/* ============================================
   MOOD SCALE
   A slider in place of ten buttons, so it fits a small phone: tap or drag along
   the line, the number shows above.
   ============================================ */
.mood-scale { --mood: #94a3b8; width: 100%; padding: 0 4px; margin-bottom: 8px; user-select: none; -webkit-user-select: none; }
.mood-scale__readout { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 52px; margin-bottom: 10px; }
.mood-scale__num { font-size: 44px; font-weight: 200; line-height: 1; color: var(--mood); font-variant-numeric: tabular-nums; animation: mood-pop .35s ease-out; }
.mood-scale__word { font-size: 16px; font-weight: 300; color: #64748b; letter-spacing: .04em; }
.mood-scale.is-empty .mood-scale__word { font-size: 14px; color: #94a3b8; align-self: center; }
.mood-scale__track { position: relative; height: 44px; }
.mood-scale__rail, .mood-scale__fill {
    position: absolute; left: 14px; right: 14px; top: 50%; height: 6px; margin-top: -3px; border-radius: 99px;
    background: linear-gradient(90deg, #d9706a 0%, #d9a352 40%, #8cb266 70%, #4a9580 100%);
}
.mood-scale__rail { opacity: .22; }
.mood-scale__fill { transition: clip-path .25s ease; }
.mood-scale__dot { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; opacity: .85; pointer-events: none; }
.mood-scale__thumb {
    position: absolute; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
    background: #fff; border: 3px solid var(--mood); box-shadow: 0 4px 14px -4px var(--mood);
    transition: left .25s ease, border-color .3s; pointer-events: none;
}
.mood-scale.is-empty .mood-scale__thumb { border-color: #cbd5e1; box-shadow: none; animation: mood-breathe 2.4s ease-in-out infinite; }
.mood-scale input[type=range] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; background: transparent;
}
.mood-scale input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 44px; }
.mood-scale input[type=range]::-moz-range-thumb { width: 28px; height: 44px; border: 0; }
.mood-scale__track:has(input:focus-visible) .mood-scale__thumb { outline: 2px solid #7c9be0; outline-offset: 3px; }
.mood-scale__ends { display: flex; justify-content: space-between; padding: 2px 6px 0; font-size: 12px; font-weight: 400; letter-spacing: .14em; color: #94a3b8; }
.mood-scale.is-disabled { opacity: .5; pointer-events: none; }
@keyframes mood-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mood-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
    .mood-scale__num, .mood-scale.is-empty .mood-scale__thumb { animation: none; }
    .mood-scale__thumb, .mood-scale__fill { transition: none; }
}
/* Calendar: quiet outlines for days without a log */
.mood-day.is-empty { border: 1px solid #e5e7eb; }
body.night-mode .mood-scale__word { color: #94a3b8; }
body.night-mode .mood-scale.is-empty .mood-scale__word { color: #64748b; }
body.night-mode .mood-scale__rail { opacity: .3; }
body.night-mode .mood-scale__dot { background: #0f172a; opacity: .7; }
body.night-mode .mood-scale__thumb { background: #0f172a; }
body.night-mode .mood-scale.is-empty .mood-scale__thumb { border-color: #334155; }
body.night-mode .mood-scale__ends { color: #64748b; }
body.night-mode .mood-day.is-empty { border-color: rgba(148, 163, 184, 0.12); color: #64748b !important; }
body.night-mode .mood-day.has-log { filter: saturate(.8) brightness(.85); }
body.night-mode .mood-day.is-selected { --tw-ring-color: #7c9be0; box-shadow: 0 0 0 2px #7c9be0 !important; }
body.night-mode .mood-divider { border-color: rgba(148, 163, 184, 0.12) !important; }
/* Check-in card, save button and reflection mark */
.mood-card { background: #fff; border: 1px solid #f1f3f6; border-radius: 2rem; padding: 28px 24px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
@media (max-width: 420px) { .mood-card { padding: 22px 16px; border-radius: 1.5rem; } }
.mood-save { width: 100%; max-width: 440px; padding: 15px 24px; border-radius: 16px; border: 0; background: #6B8DD6; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: lowercase; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(107,141,214,.25); }
.mood-save:hover:not(:disabled) { background: #5a7cc9; transform: translateY(-1px); }
.mood-save:disabled { background: #e8ecf3; color: #9aa6bb; box-shadow: none; cursor: not-allowed; }
.mood-save__hint { margin-top: 8px; font-size: 12px; color: #9aa6bb; }
.mood-today-btn { padding: 3px 12px; border-radius: 999px; border: 1px solid #d6dff3; background: #f3f6fc; color: #5878c4; font-size: 11px; letter-spacing: .06em; cursor: pointer; }
.mood-today-btn:hover { background: #e7edf9; }
.mood-day__note { position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(255,255,255,.9); }
body.night-mode .mood-card { background: rgba(30,41,59,.6); border-color: rgba(148,163,184,.1); box-shadow: none; }
body.night-mode .mood-save, body.night-mode .mood-save:hover:not(:disabled) { background: #6B8DD6 !important; border: 0 !important; color: #fff; box-shadow: none; }
body.night-mode .mood-save:disabled, body.night-mode .mood-save:disabled:hover { background: rgba(255,255,255,.06) !important; color: #64748b; transform: none; box-shadow: none; }
body.night-mode .mood-save__hint { color: #64748b; }
body.night-mode .mood-today-btn, body.night-mode .mood-today-btn:hover { background: rgba(107,141,214,.16) !important; border: 1px solid rgba(107,141,214,.3) !important; color: #b7c7ee; transform: none; box-shadow: none; }

/* ============================================
   ANCHOR (rooted.js, iOS app only; class names keep the old "rooted" prefix)
   The third focus rung under deep focus: lock the phone with the nous stone. The stone settles into
   the nous ring, soft ripples spread from it, and the ring fills in over the first hour (an
   animation started in the past via --rooted-since).
   ============================================ */
.rooted-row { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; }
.rooted-row__main { display: flex; align-items: center; gap: 10px; width: 100%; }
.rooted-row.is-rooted { background: #eef3fb; }
button.rooted-row.is-off { flex-direction: row; align-items: center; border: 0; cursor: pointer; font: inherit; opacity: .7; }
button.rooted-row.is-off:hover { opacity: 1; }
.rooted-row__chev { flex: none; font-size: 20px; line-height: 1; color: #a3b0c6; }
.rooted-art { flex: none; overflow: visible; }
.rooted-art__track { fill: none; stroke: #dbe3f1; stroke-width: 2; }
.rooted-art__ring { fill: none; stroke: #6B8DD6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rooted-art.is-rooted .rooted-art__ring { animation: anchorFill 3600s linear var(--rooted-since, 0s) forwards; }
.rooted-art__ripple { fill: none; stroke: #6B8DD6; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rooted-art.is-rooted .rooted-art__ripple { animation: anchorRipple 4.8s ease-out infinite; }
.rooted-art.is-rooted .rooted-art__ripple--late { animation-delay: 2.4s; }
.rooted-art__shadow { fill: #5f6f88; opacity: .1; }
.rooted-art__stone { fill: #8a9bb4; transform-box: fill-box; transform-origin: center; transform: translateY(-3.5px); }
.rooted-art__shine { fill: #fff; opacity: .22; }
.rooted-art__mark { fill: none; stroke: #eef3fb; stroke-width: .75; stroke-linecap: round; opacity: .95; }
.rooted-art.is-rooted .rooted-art__stone { fill: #6f80a0; transform: none; animation: anchorSettle .9s cubic-bezier(.3, 1.4, .5, 1) both; }
.rooted-art.is-rooted .rooted-art__shadow { opacity: .2; }
.rooted-art.is-off .rooted-art__stone { fill: #c3cddc; }
.rooted-art.is-off .rooted-art__mark { opacity: .8; }
.rooted-art.is-off .rooted-art__track { stroke: #e3e8f0; stroke-dasharray: 2 3; }
@keyframes anchorFill { 0% { stroke-dashoffset: .94; } 100% { stroke-dashoffset: 0; } }
@keyframes anchorRipple { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes anchorSettle { 0% { transform: translateY(-3.5px); } 100% { transform: none; } }
.rooted-btn { flex: none; padding: 6px 14px; border-radius: 999px; border: 1px solid #c9d5ea; background: #fff; color: #4b6cb7; font-size: 13px; font-weight: 400; cursor: pointer; transition: background .2s, transform .15s; }
.rooted-btn--primary { background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%); border-color: transparent; color: #fff; }
.rooted-btn:active { transform: scale(.96); }
.rooted-btn:disabled { opacity: .6; cursor: default; }
/* Rooted: "what are you working on?" after tapping the stone */
.rooted-ask__list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.rooted-ask__habit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; color: #374151; font-size: 15px; font-weight: 300; text-align: left; cursor: pointer; transition: background .2s, transform .15s; }
.rooted-ask__habit:active { transform: scale(.98); background: #f3f6fb; }
.rooted-ask__dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.rooted-ask__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooted-ask__running { flex: none; font-size: 11.5px; color: #5DAE49; }
.rooted-ask__skip { display: block; width: 100%; margin-top: 12px; padding: 10px; border: 0; background: transparent; color: #8a97ad; font-size: 14px; font-weight: 300; cursor: pointer; }
.dark .rooted-ask__habit { background: #1f2937; border-color: #374151; color: #e5e7eb; }
.rooted-emergency { position: relative; overflow: hidden; width: 100%; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: #8a97ad; font-size: 11.5px; font-weight: 300; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rooted-emergency:disabled { cursor: default; opacity: .7; }
.rooted-emergency__fill { position: absolute; inset: 0; background: rgba(217, 112, 106, .16); transform: scaleX(0); transform-origin: left; }
.rooted-emergency.is-holding .rooted-emergency__fill { animation: rootHold 3s linear forwards; }
.rooted-emergency.is-holding { color: #b5524b; animation: rootRumble .12s linear infinite; }
.rooted-emergency__label { position: relative; }
@keyframes rootHold { to { transform: scaleX(1); } }
@keyframes rootRumble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.6px); } 75% { transform: translateX(.6px); } }
@media (prefers-reduced-motion: reduce) {
    /* Still shows how long you've been anchored: --anchor-left is set on each render */
    .rooted-art.is-rooted .rooted-art__ring { animation: none; stroke-dashoffset: var(--anchor-left, .94); }
    .rooted-art.is-rooted .rooted-art__ripple, .rooted-art.is-rooted .rooted-art__stone { animation: none; }
    .rooted-art.is-rooted .rooted-art__ripple { opacity: .18; transform: scale(1.6); }
    .rooted-emergency.is-holding { animation: none; }
}
/* Settings: the focus stone card and its three steps */
.focus-stone__icon { color: #6B8DD6; }
.focus-stone__soon { padding: 2px 9px; border-radius: 999px; background: #eef3fb; color: #5a7bc8; font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.stone-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.stone-step { padding: 12px 14px; border-radius: 20px; background: #f8f9fb; box-shadow: inset 0 0 0 1px #edf0f5; }
.stone-step__row { display: flex; align-items: center; gap: 12px; }
.stone-step__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #dbe2ee; color: #7d8ca8; font-size: 13px; }
.stone-step.is-done .stone-step__num { background: #6B8DD6; box-shadow: none; color: #fff; }
.stone-step__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.stone-step__title { font-size: 14px; font-weight: 400; color: #363f51; }
.stone-step__hint { font-size: 12px; font-weight: 300; color: #7d8ca8; }
.stone-step__btn { flex: none; padding: 6px 14px; border-radius: 999px; border: 0; background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%); color: #fff; font-size: 13px; cursor: pointer; }
.stone-step.is-done .stone-step__btn { background: #fff; color: #4b6cb7; box-shadow: inset 0 0 0 1px #c9d5ea; }
.stone-step__btn:disabled { opacity: .45; cursor: default; }
.stone-list { list-style: none; margin: 10px 0 0 38px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stone-list__item { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 300; color: #4a5568; }
.stone-list__remove { border: 0; background: none; color: #b5524b; font-size: 12px; font-weight: 300; cursor: pointer; padding: 2px 4px; }
.focus-stone__foot { margin-top: 14px; text-align: center; font-size: 12px; font-weight: 300; color: #94a3b8; }
.focus-stone__buy { display: inline-block; margin-left: 4px; padding: 4px 12px; border-radius: 999px; background: #eef3fb; color: #4b6cb7; font-weight: 400; text-decoration: none; }
/* Night */
body.night-mode .rooted-row.is-rooted { background: rgba(107, 141, 214, .12) !important; }
body.night-mode button.rooted-row.is-off { background: rgba(148, 163, 184, .08) !important; }
body.night-mode .rooted-art__track { stroke: #334155; }
body.night-mode .rooted-art__ring, body.night-mode .rooted-art__ripple { stroke: #a9bdf0; }
body.night-mode .rooted-art__stone { fill: #7d8ea8; }
body.night-mode .rooted-art.is-rooted .rooted-art__stone { fill: #9fb0c8; }
body.night-mode .rooted-art__mark { stroke: #f1f5fb; }
body.night-mode .rooted-art__shadow { fill: #000; opacity: .35; }
body.night-mode .rooted-art.is-off .rooted-art__stone { fill: #475569; }
body.night-mode .rooted-art.is-off .rooted-art__track { stroke: #334155; }
body.night-mode button.rooted-btn { background: transparent !important; border: 1px solid rgba(124, 155, 224, .45) !important; color: #a9bdf0 !important; }
body.night-mode button.rooted-btn--primary,
body.night-mode button.stone-step__btn { background: linear-gradient(160deg, #7c9be0 0%, #5a7bc8 100%) !important; border: 0 !important; color: #fff !important; }
body.night-mode button.rooted-emergency { background: transparent !important; color: #7d8ca8; }
body.night-mode button.rooted-emergency.is-holding { color: #f0a29c; }
body.night-mode .focus-stone__buy { background: rgba(107, 141, 214, .15); color: #a9bdf0; }
body.night-mode .focus-stone__soon { background: rgba(107, 141, 214, .15); color: #a9bdf0; }
body.night-mode .stone-step { background: rgba(148, 163, 184, .06); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12); }
body.night-mode .stone-step__num { background: transparent; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3); color: #94a3b8; }
body.night-mode .stone-step.is-done .stone-step__num { background: #5a7bc8; box-shadow: none; color: #fff; }
body.night-mode .stone-step__title { color: #e2e8f0; }
body.night-mode .stone-step__hint, body.night-mode .stone-list__item { color: #94a3b8; }
body.night-mode .stone-step.is-done button.stone-step__btn { background: transparent !important; color: #a9bdf0 !important; box-shadow: inset 0 0 0 1px rgba(124, 155, 224, .45) !important; }
body.night-mode button.stone-list__remove { background: transparent !important; color: #f0a29c; }

/* Mystery box (MysteryBoxIcon): the Nous mark sits still on the ribbon, a spark twinkles */
.mbox-icon__spark { transform-box: fill-box; transform-origin: 50% 50%; animation: mboxIconTwinkle 2.6s ease-in-out infinite; }
@keyframes mboxIconTwinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
.mbox-icon__seam { opacity: var(--heat, 0); }
@media (prefers-reduced-motion: reduce) { .mbox-icon__spark { animation: none; } }

/* Home: the timer already sits in the habits card, so drop its second frame */
.nous-habits-widget .nous-timer-card { margin: -.5rem -1rem 1.5rem; border-color: transparent !important; box-shadow: none !important; }
@media (max-width: 639px) { .nous-home-grid { gap: 1.25rem; } }

/* Aurora night: the Aurora Tree's perk, the whole app on top of night mode */
body.night-mode.theme-aurora { background: linear-gradient(170deg, #0b1030 0%, #16154a 45%, #0d2a3a 100%) fixed !important; }
body.night-mode.theme-aurora::before {
    background-image: radial-gradient(ellipse 70% 38% at 20% 0%, rgba(45, 212, 191, .22), transparent 70%),
        radial-gradient(ellipse 60% 34% at 80% 4%, rgba(167, 139, 250, .22), transparent 70%),
        radial-gradient(circle, rgba(255, 255, 255, .5) .6px, transparent .6px);
    background-size: 100% 100%, 100% 100%, 260px 260px; background-position: 0 0, 0 0, 0 0;
    opacity: 1; animation: aurora-sway 18s ease-in-out infinite alternate;
}
@keyframes aurora-sway { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
body.night-mode.theme-aurora .bg-white { background: rgba(24, 26, 74, .62) !important; border-color: rgba(129, 140, 248, .18) !important; }
body.night-mode.theme-aurora header { background: rgba(14, 16, 52, .78) !important; border-bottom-color: rgba(94, 234, 212, .14) !important; }
body.night-mode.theme-aurora .legend-perks { background: rgba(24, 26, 74, .5); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .25); }
body.night-mode.theme-aurora .legend-perks__list strong, body.night-mode.theme-aurora .legend-perks__title { color: #5eead4; }
body.night-mode.theme-aurora .legend-theme { background: transparent; color: #cbd5e1; border-color: rgba(203, 213, 225, .25); }
body.night-mode.theme-aurora .legend-theme.is-on { background: linear-gradient(90deg, rgba(45, 212, 191, .25), rgba(167, 139, 250, .25)); color: #f0fdfa; border-color: #5eead4; }
@media (prefers-reduced-motion: reduce) { body.night-mode.theme-aurora::before { animation: none; } }
.legend-perks__list .legend-perks__themes { margin-top: 0; }

/* ===== Home calm music toggle (tree card header) ===== */

/* Settings > sound: soft volume sliders (index.js SoundSettingsSection sets --p to the filled share) */
.nous-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; touch-action: pan-y; }
.nous-range:disabled, .nous-range.is-off { opacity: .45; }
.nous-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #6B8DD6 var(--p, 50%), #e5e7eb var(--p, 50%)); }
.nous-range::-moz-range-track { height: 6px; border-radius: 999px; background: #e5e7eb; }
.nous-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #6B8DD6; }
.nous-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid #6B8DD6; box-shadow: 0 1px 4px rgba(99, 110, 129, .25); }
.nous-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #6B8DD6; box-shadow: 0 1px 4px rgba(99, 110, 129, .25); }
.nous-range:focus-visible { outline: none; }
.nous-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(107, 141, 214, .25); }
body.night-mode .nous-range::-webkit-slider-runnable-track { background: linear-gradient(to right, #7c9be0 var(--p, 50%), rgba(148, 163, 184, .25) var(--p, 50%)); }
body.night-mode .nous-range::-moz-range-track { background: rgba(148, 163, 184, .25); }
body.night-mode .nous-range::-webkit-slider-thumb { background: #e2e8f0; border-color: #7c9be0; }

/* --- button text sizes (2026-10-23): no button text under 14px; main actions 15-16px --- */
/* the top nav names: 14px where there is room; on a phone six tabs and the logo share 390px, so they stay small there */
@media (min-width: 641px) { .nous-nav__label { font-size: 14px; } }
.rp-seg button, .nt-chip, .rooted-btn, .stone-step__btn, .tree-box-banner__btn { font-size: 15px; }
.nt-primary-btn { font-size: 16px; min-height: 44px; }
.nt-link-btn, .nt-ghost-btn, .grove-link, .seed-plant-btn, .sound-chip, .rooted-emergency, .ms-past-toggle, .seeds-toggle { font-size: 14px; }
.nt-ghost-btn, .seed-plant-btn, .sound-chip, .rp-seg button { min-height: 36px; }
.nt-msg-actions { font-size: 14px; }

/* --- daily goal ring, session saved card, login pitch (2026-10-23) --- */
.goal-card { padding: 12px 16px; }
.goal-card__row { display: flex; align-items: center; gap: 14px; }
.goal-ring { position: relative; flex-shrink: 0; width: 64px; height: 64px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.goal-ring:focus-visible { outline: 2px solid #6B8DD6; outline-offset: 3px; }
.goal-ring__svg { display: block; }
.goal-ring__svg circle { fill: none; }
/* (no fill attribute on purpose: night mode glows every svg circle[fill]) */
.goal-ring__track { stroke: #e8ecf3; }
.goal-ring__fill { stroke: #6B8DD6; transition: stroke-dashoffset .8s ease, stroke .4s ease; }
.goal-card.is-done .goal-ring__fill { stroke: #7fa883; }
.goal-ring__mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; color: #4a5568; font-variant-numeric: tabular-nums; }
.goal-card.is-done .goal-ring__mid { color: #5f8f63; }
.goal-ring.is-cheer { animation: goal-cheer 1.3s ease-out 2; border-radius: 50%; }
@keyframes goal-cheer { 0% { box-shadow: 0 0 0 0 rgba(127, 168, 131, .45); } 100% { box-shadow: 0 0 0 16px rgba(127, 168, 131, 0); } }
@media (prefers-reduced-motion: reduce) { .goal-ring.is-cheer { animation: none; } .goal-ring__fill { transition: none; } }
.goal-card__text { min-width: 0; flex: 1; }
.goal-card__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; font-weight: 300; color: #2d3748; }
.goal-card__nums { font-size: 15px; font-weight: 400; color: #4a5568; font-variant-numeric: tabular-nums; }
.goal-card__sub { font-size: 14px; font-weight: 300; color: #718096; margin-top: 2px; }
.goal-card__edit { flex-shrink: 0; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 0; background: none; color: #6B8DD6; font-size: 14px; font-weight: 400; cursor: pointer; }
.goal-card__edit:hover { background: rgba(107, 141, 214, .08); }
.goal-card__picker { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f6; }
.goal-card__hint { font-size: 14px; font-weight: 300; color: #718096; margin-bottom: 8px; }
.goal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.goal-chip { min-height: 44px; min-width: 56px; padding: 0 14px; border-radius: 999px; border: 1px solid #dfe5ef; background: #fff; color: #4a5568; font-size: 14px; font-weight: 400; cursor: pointer; transition: background .15s, border-color .15s; }
.goal-chip:hover { border-color: #b8c7e8; }
.goal-chip.is-on { background: #6B8DD6; border-color: #6B8DD6; color: #fff; }
body.night-mode .goal-ring__track { stroke: rgba(148, 163, 184, .18); }
body.night-mode .goal-ring__fill { stroke: #7c9be0; }
body.night-mode .goal-card.is-done .goal-ring__fill { stroke: #8fbf93; }
body.night-mode .goal-ring__mid, body.night-mode .goal-card__nums { color: #cbd5e1; }
body.night-mode .goal-card.is-done .goal-ring__mid { color: #a7d3aa; }
body.night-mode .goal-card__title { color: #e2e8f0; }
body.night-mode .goal-card__sub, body.night-mode .goal-card__hint { color: #94a3b8; }
body.night-mode .goal-card__picker { border-top-color: rgba(148, 163, 184, .12); }
body.night-mode .goal-card__edit { color: #93acec; }
body.night-mode .goal-chip { background: rgba(148, 163, 184, .06); border-color: rgba(148, 163, 184, .2); color: #cbd5e1; }
body.night-mode .goal-chip.is-on { background: #7c9be0; border-color: #7c9be0; color: #0f172a; }

.session-done { text-align: center; }
.session-done__kicker { font-size: 14px; font-weight: 400; color: #6B8DD6; margin-bottom: 2px; }
.session-done__big { font-size: 36px; font-weight: 300; color: #1f2937; line-height: 1.15; }
.session-done__habit { font-size: 15px; font-weight: 300; color: #6b7280; margin-top: 2px; overflow-wrap: anywhere; }
.session-done__rows { list-style: none; margin: 18px 0 20px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.session-done__row { display: flex; align-items: flex-start; gap: 10px; }
.session-done__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f4fa; color: #6B8DD6; }
.session-done__body { flex: 1; min-width: 0; }
.session-done__line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 300; color: #4a5568; min-height: 28px; align-items: center; }
.session-done__val { font-weight: 400; color: #2d3748; text-align: right; font-variant-numeric: tabular-nums; }
.session-done__bar { height: 5px; border-radius: 999px; background: #edf0f6; overflow: hidden; margin-top: 4px; }
.session-done__bar > span { display: block; height: 100%; border-radius: 999px; background: #6B8DD6; }
.session-done__actions { display: flex; gap: 10px; }
.session-done__btn { flex: 1; min-height: 48px; border-radius: 12px; border: 0; background: #6B8DD6; color: #fff; font-size: 16px; font-weight: 400; cursor: pointer; transition: background .15s; }
.session-done__btn:hover { background: #5b7cc5; }
.session-done__btn--ghost { background: #f1f4fa; color: #4a5568; }
.session-done__btn--ghost:hover { background: #e6ebf5; }
body.night-mode .session-done__big, body.night-mode .session-done__val { color: #e2e8f0; }
body.night-mode .session-done__habit, body.night-mode .session-done__line { color: #94a3b8; }
body.night-mode .session-done__kicker { color: #93acec; }
body.night-mode .session-done__icon, body.night-mode .session-done__btn--ghost { background: rgba(148, 163, 184, .1); color: #cbd5e1; }
body.night-mode .session-done__bar { background: rgba(148, 163, 184, .15); }
body.night-mode .session-done__bar > span { background: #7c9be0; }
body.night-mode .session-done__btn { background: #7c9be0; color: #0f172a; }

.auth-pitch { display: flex; flex-direction: column; align-items: center; margin-top: 14px; }
.auth-pitch__grove { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 58px; }
.auth-pitch__tree.grove-tree-art { width: 48px; height: 58px; }
.auth-pitch__tree:nth-child(2) { transform: translateY(-2px) scale(1.12); transform-origin: 50% 100%; }
.auth-pitch__line { margin-top: 8px; font-size: 16px; font-weight: 400; color: #4a5568; text-align: center; line-height: 1.4; }
body.night-mode .auth-pitch__line { color: #cbd5e1; }
/* the app-wide night-mode button chrome (glass pills) doesn't suit the ring, chips or the card buttons */
body.night-mode button.goal-ring { background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important; backdrop-filter: none !important; padding: 0 !important; }
body.night-mode button.goal-ring.is-cheer { animation: goal-cheer 1.3s ease-out 2; }
body.night-mode button.goal-card__edit { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; color: #93acec !important; }
body.night-mode button.goal-chip { background: rgba(148, 163, 184, .06) !important; border: 1px solid rgba(148, 163, 184, .2) !important; color: #cbd5e1 !important; box-shadow: none !important; transform: none !important; }
body.night-mode button.goal-chip.is-on { background: #7c9be0 !important; border-color: #7c9be0 !important; color: #0f172a !important; }
body.night-mode button.session-done__btn { background: #7c9be0 !important; color: #0f172a !important; border: 0 !important; box-shadow: none !important; transform: none !important; }
body.night-mode button.session-done__btn--ghost { background: rgba(148, 163, 184, .12) !important; color: #e2e8f0 !important; }
.auth-pitch__line { text-wrap: balance; }
.auth-logo { display: block; border-radius: 22px; }

/* Community safety: the quiet "···" report / block menu, the community rules sheet, legal links */
.nous-um { position: relative; display: inline-flex; vertical-align: middle; }
.nous-um-btn { width: 28px; height: 28px; }
.nous-um-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; display: flex; flex-direction: column; min-width: 150px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(37, 45, 61, .16); animation: nt-fade .15s ease; }
.nous-um-pop button { background: none; border: 0; padding: 8px 10px; border-radius: 9px; font: inherit; font-size: 14px; font-weight: 400; text-align: left; color: #5d6b86; cursor: pointer; white-space: nowrap; }
.nous-um-pop button:hover { background: #f1f3f7; }
.nous-um-pop button.is-danger { color: #c05656; }
.nous-kind-msg { margin: 6px 2px 0; font-size: 13px; font-weight: 400; color: #c05656; }
.nous-terms { max-width: 420px; }
.nous-terms .nt-sheet-sub { margin: 6px 0; line-height: 1.45; }
.nous-terms-list { margin: 10px 0; padding-left: 18px; list-style: disc; font-size: 14px; font-weight: 300; line-height: 1.5; }
.nous-terms-list li { margin: 4px 0; }
.nous-terms-link, .nous-agree-line a, .nous-legal-links a { color: #6B8DD6; text-decoration: underline; text-underline-offset: 2px; }
.nous-agree-line { margin: 4px 0 0; font-size: 12px; font-weight: 300; text-align: center; color: #8a94a6; }
.nous-legal-links { margin: 18px 0 6px; font-size: 13px; font-weight: 300; text-align: center; color: #8a94a6; }
.csoc-kicker .nous-um { margin-left: 4px; }
body.night-mode .nous-um-pop { background: #2a2f3d !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }
body.night-mode .nous-um-pop button { color: #c9d1e0 !important; }
body.night-mode .nous-um-pop button:hover { background: rgba(255, 255, 255, .08) !important; }
body.night-mode .nous-um-pop button.is-danger { color: #e88a8a !important; }
body.night-mode .nous-terms-link, body.night-mode .nous-agree-line a, body.night-mode .nous-legal-links a { color: #9db4ee !important; }

.nous-agree-line a { white-space: nowrap; }

/* The logo ring is decoration: taps go through it */
.nous-logo-ring { pointer-events: none; }

/* The top bar sits above in-flow content that sets its own z-index (calendar days, the habit picker) */
.nous-topbar { z-index: 40; }

/* Night mode: on/off switches keep their on colour and white knob; slate buttons keep their fill */
body.night-mode button.nous-switch { background: #334155 !important; border: 0 !important; box-shadow: none !important; }
body.night-mode button.nous-switch[aria-pressed="true"] { background: #6B8DD6 !important; }
body.night-mode button.nous-switch > div { background: #f1f5f9 !important; }
body.night-mode button.bg-calm-600 { background: rgba(107, 141, 214, .32) !important; border-color: rgba(107, 141, 214, .5) !important; }

/* Goal delete: always reachable on touch, revealed on hover where a pointer can hover */
.goal-del { opacity: .55; padding: 4px 8px; margin: -4px -4px -4px 0; }
@media (hover: hover) { .goal-del { opacity: 0; } .group:hover .goal-del, .goal-del:focus-visible { opacity: 1; } }

/* Settings: install steps fold away until asked for */
.settings-install__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.settings-install__sum::-webkit-details-marker { display: none; }
.settings-install__sum::after { content: '+'; color: #6B8DD6; font-size: 20px; line-height: 1; margin-left: auto; }
.settings-install[open] .settings-install__sum::after { content: '–'; }
body.night-mode .goal-del, body.night-mode .goal-del:hover { background: transparent !important; border: 0 !important; box-shadow: none; transform: none; color: #94a3b8; }

/* ---- Readable sizes: text is at least 14px and every tap target at least 44px ---- */
/* Phones: six 14px tab names do not fit beside the logo, so the tabs become a bar along the bottom of the screen */
@media (max-width: 640px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    body.night-mode header { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nous-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; gap: 0; justify-content: space-around; padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .96); border-top: 1px solid #eef1f5; box-shadow: 0 -4px 18px rgba(54, 63, 81, .05); }
    .nous-nav__btn, .nous-nav__btn:hover { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px 5px; gap: 3px; justify-content: center; }
    .nous-nav__btn.is-active { background: transparent; }
    .nous-nav__label { font-size: 14px; letter-spacing: 0; white-space: nowrap; }
    body.night-mode .nous-nav { background: rgba(15, 23, 42, .96); border-top-color: rgba(148, 163, 184, .14); box-shadow: 0 -4px 18px rgba(0, 0, 0, .25); }
    body.night-mode .nous-nav__btn.is-active { background: transparent !important; }
}
/* Small buttons keep their look; an invisible ring around them makes the tap area 44px */
.nous-icon-btn, .nous-day-btn, .grove-link, .focus-switch, .nous-pill, .nous-hit { position: relative; }
.nous-icon-btn::after, .nous-day-btn::after, .grove-link::after, .focus-switch::after, button.nous-pill::after, .nous-hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
/* Labels */
.nous-pill { font-size: 14px; line-height: 20px; padding: 2px 10px; }
.nous-day-head .nous-day-letter { font-size: 14px; }
.tree-tier-chip { font-size: 14px; line-height: 20px; padding: 0 9px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.tree-title-badge { font-size: 14px; line-height: 20px; padding: 1px 9px; }
.focus-row__title, .focus-row__hint, .legend-teaser, .grove-title-label, .grove-link, .grove-caption, .grove-left, .streak-flame, .streak-shield, .seeds-toggle, .sess-more { font-size: 14px; }
.grove-link { padding: 0 2px; }
.seeds-toggle, .sess-more, .tree-box-banner__btn { min-height: 44px; }
/* The focus switch: a little larger, with the knob to match */
.focus-switch { width: 44px; height: 26px; }
.focus-switch__knob { width: 20px; height: 20px; }
.focus-switch.is-on .focus-switch__knob { transform: translateX(18px); }
/* the smallest Tailwind text size becomes 14px everywhere */
.text-xs, .text-\[10px\], .text-\[11px\], .text-\[12px\] { font-size: 14px; line-height: 20px; }
.tree-box-banner__text, .nt-seat-title .tree-title-badge, .rp-goal span { font-size: 14px; }
.nt-seat-title .tree-title-badge { line-height: 18px; }
/* Reports */
.rp-label, .rp-delta, .rp-tile-meta, .forest-caption, .forest-caption.is-hint, .rp-axis span, .rp-moodstrip__day em, .rp-seg button, .rp-select { font-size: 14px; }
.rp-axis span { min-width: 0; }
.rp-seg button, .rp-nav-btn { position: relative; }
.rp-seg button::after, .rp-nav-btn::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.rp-select { min-height: 44px; }
.rp-grid > *, .rp-tile > div { min-width: 0; }
/* Settings */
.nous-tall { min-height: 44px; }
.nous-switch { position: relative; }
.nous-switch::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.nous-range { height: 44px; margin: -3px 0 -11px; }
.nous-legal-links { font-size: 14px; }
.nous-legal-links a { display: inline-block; padding: 12px 4px; }

/* Timer header: one family of controls (owner, 2026-10-27: the old tile + pill read as two different buttons).
   Everything here shares the same 1.5px border, 14px radius and 46px height: the name field, the pencil,
   the stopwatch/countdown switch, add and delete. */
.nous-hero-head { --hero-h: 46px; --hero-r: 14px; --hero-line: #d6dff2; --hero-fill: #f6f8fd; }
.nous-hero-identity { flex: 1 1 220px; }
.nous-hero-tools { flex: 0 1 auto; }
.nous-hero-tools__spacer { display: none; }
.nous-habit-pick { flex: 1 1 auto; height: var(--hero-h); padding: 0 12px 0 5px; border: 1.5px solid var(--hero-line); border-radius: var(--hero-r); background: var(--hero-fill); font-size: 1.45rem; line-height: 1.2; box-shadow: 0 1px 3px rgba(54, 63, 81, .06); }
.nous-habit-pick:hover { border-color: #6B8DD6; background: #eef2fa; }
.nous-habit-pick:active { transform: scale(.98); }
.nous-habit-pick__glyph { width: 34px; height: 34px; border-radius: 10px; }
.nous-habit-pick__chev { color: #6B8DD6; margin-left: auto; }
@media (min-width: 640px) { .nous-habit-pick { font-size: 1.7rem; } }
.nous-icon-btn--ring { width: var(--hero-h, 46px); height: var(--hero-h, 46px); border-radius: var(--hero-r, 14px); border: 1.5px solid var(--hero-line, #d6dff2); background: var(--hero-fill, #f6f8fd); color: #7d8ca8; box-shadow: 0 1px 3px rgba(54, 63, 81, .06); }
.nous-icon-btn--ring:hover { border-color: #6B8DD6; background: #eef2fa; color: #363f51; }
.nous-icon-btn--ring.nous-icon-btn--danger:hover { border-color: #fca5a5; background: #fef2f2; color: #dc2626; }
.nous-seg { display: inline-flex; align-items: stretch; height: var(--hero-h, 46px); padding: 4px; gap: 2px; border: 1.5px solid var(--hero-line, #d6dff2); border-radius: var(--hero-r, 14px); background: var(--hero-fill, #f6f8fd); box-shadow: 0 1px 3px rgba(54, 63, 81, .06); box-sizing: border-box; }
.nous-seg__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: calc(var(--hero-r, 14px) - 5px); background: transparent; color: #7d8ca8; font: inherit; font-size: 13px; font-weight: 300; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.nous-seg__btn.is-on { background: #fff; color: #252d3d; font-weight: 500; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
/* Phones: the name field takes the top row; the tools row sits below with the switch left and add/delete right */
@media (max-width: 640px) {
    .nous-hero-identity { flex-basis: 100%; }
    .nous-hero-tools { flex: 1 1 100%; }
    .nous-hero-tools__spacer { display: block; flex: 1; }
}
body.night-mode .nous-hero-head { --hero-line: rgba(148, 163, 184, .35); --hero-fill: rgba(255, 255, 255, .05); }
body.night-mode .nous-hero-identity .nous-habit-pick,
body.night-mode .nous-icon-btn--ring { border: 1.5px solid var(--hero-line) !important; background: var(--hero-fill) !important; box-shadow: none; }
body.night-mode .nous-habit-pick__glyph { background: rgba(255, 255, 255, .06); border-color: transparent; box-shadow: none; }
body.night-mode .nous-seg { border-color: var(--hero-line); background: var(--hero-fill); box-shadow: none; }
body.night-mode .nous-seg__btn.is-on { background: rgba(255, 255, 255, .12); color: #f1f5f9; }
.nous-timer-card--aurora .nous-hero-head { --hero-line: rgba(255, 255, 255, .14); --hero-fill: rgba(255, 255, 255, .07); }
.nous-timer-card--aurora .nous-seg__btn.is-on { background: rgba(255, 255, 255, .14); color: #f8fafc; }
.nous-timer-card--aurora .nous-seg__btn, .nous-timer-card--aurora .nous-habit-pick { color: #cbd5e1; }

/* ============================================================
   PREMIUM MOTION PASS (claude-tg2, 2026-10-27)
   Shared easing tokens, page transitions, frosted bars, press
   feedback, springy toggles and night-mode polish. Everything
   here is additive; reduced-motion users get the still version.
   ============================================================ */
:root {
    --nous-ease-out: cubic-bezier(.22, 1, .36, 1);
    --nous-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --nous-ease-std: cubic-bezier(.4, 0, .2, 1);
    --nous-hairline: rgba(54, 63, 81, .08);
}

/* Pages ease in when a tab opens. The wrappers flip display, which restarts the animation each time. */
.nous-page { animation: nous-page-in .38s var(--nous-ease-out) backwards; }
@keyframes nous-page-in { from { opacity: 0; transform: translateY(10px); } }

/* Logo: a crisp, still ring around the n */
.nous-logo-ring { opacity: .95; }
/* The ring turns: a slow gap travelling round the n, constant movement and progress (owner, 2026-10-27) */
@keyframes nous-orbit { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -226; } }
.nous-logo-orbit { stroke-dasharray: 100 13; animation: nous-orbit 8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .nous-logo-orbit { animation: none; stroke-dasharray: none; } }

/* Cards: hairline edge and a soft, layered shadow instead of a flat one */
main .bg-white.shadow-sm { box-shadow: 0 1px 2px rgba(54, 63, 81, .04), 0 10px 30px -14px rgba(54, 63, 81, .16); }
main .bg-white.border-gray-100 { border-color: var(--nous-hairline); }

/* Top bar: frosted glass on wide screens (on phones the nav is fixed inside the header, so no backdrop filter there) */
@media (min-width: 641px) {
    header.nous-topbar {
        background: rgba(255, 255, 255, .84) !important;
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--nous-hairline);
        box-shadow: 0 4px 18px -12px rgba(54, 63, 81, .22);
    }
    body.night-mode header.nous-topbar { background: rgba(15, 23, 42, .78) !important; }
}

/* Nav tabs: gentle press, the icon lifts with a spring when its tab is active */
.nous-nav__btn { position: relative; transition: color .2s var(--nous-ease-std), background-color .25s var(--nous-ease-out), transform .18s var(--nous-ease-out); -webkit-tap-highlight-color: transparent; }
.nous-nav__btn:active { transform: scale(.93); }
.nous-nav__btn svg { transition: transform .4s var(--nous-ease-spring); }
.nous-nav__btn.is-active svg { transform: translateY(-1px) scale(1.1); }
.nous-nav__btn::before { content: ''; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%) scale(0); transition: transform .4s var(--nous-ease-spring); }
@media (max-width: 640px) {
    .nous-nav__btn.is-active::before { transform: translateX(-50%) scale(1); }
    .nous-nav {
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
        border-top: 1px solid var(--nous-hairline);
        box-shadow: 0 -6px 24px -16px rgba(54, 63, 81, .25);
    }
    body.night-mode .nous-nav { background: rgba(15, 23, 42, .84); border-top-color: rgba(148, 163, 184, .14); }
}

/* Press feedback for every button that has no transform of its own (zero specificity, so styled buttons keep theirs) */
main :where(button) { transition: transform .15s var(--nous-ease-out), background-color .2s, color .2s, border-color .2s, box-shadow .2s, opacity .2s; }
main :where(button):not(:disabled):active { transform: scale(.97); }
body.night-mode button:hover { transform: translateY(-1px); }

/* Inputs: the focus ring breathes in rather than popping */
main :where(input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea, select) { transition: border-color .2s var(--nous-ease-std), box-shadow .25s var(--nous-ease-out), background-color .2s; }
main :where(input:not([type=range]):not([type=checkbox]):not([type=radio]), textarea, select):focus-visible { outline: none; border-color: #6B8DD6; box-shadow: 0 0 0 4px rgba(107, 141, 214, .14); }

/* Timer: the play button breathes while idle, the pause button pulses while a session runs */
.nous-play-btn, .nous-pause-btn { position: relative; isolation: isolate; }
.nous-play-btn { transition: transform .3s var(--nous-ease-spring), box-shadow .25s var(--nous-ease-out), background .25s; }
.nous-play-btn::before, .nous-pause-btn::before { content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 2px solid rgba(107, 141, 214, .4); z-index: -1; pointer-events: none; animation: nous-halo 2.8s var(--nous-ease-out) infinite; }
.nous-pause-btn::before { inset: -4px; border-color: rgba(107, 141, 214, .3); animation-duration: 1.6s; }
.nous-play-btn:hover::before, .nous-pause-btn:hover::before { animation-play-state: paused; opacity: 0; }
@keyframes nous-halo { 0% { transform: scale(.94); opacity: .9; } 65%, 100% { transform: scale(1.24); opacity: 0; } }

/* Toggles: knobs settle with a spring */
.focus-switch { transition: background-color .3s var(--nous-ease-std); }
.focus-switch__knob { transition: transform .4s var(--nous-ease-spring); }
.nous-night-switch { transition: background-color .35s var(--nous-ease-std); }
.nous-night-switch__knob { transition: transform .45s var(--nous-ease-spring), box-shadow .3s; }
.nous-night-switch:active .nous-night-switch__knob { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
body.night-mode .nous-night-switch { background: #1e293b !important; border-color: rgba(148, 163, 184, .25) !important; }
body.night-mode .nous-night-switch:hover { transform: none; }

/* Toasts: drop in with a spring; success ones still do their pulse afterwards */
.nous-toast { animation: nous-toast-in .5s var(--nous-ease-spring) backwards; }
.nous-toast.neuron-pulse { animation: nous-toast-in .5s var(--nous-ease-spring) backwards, neuron-pulse 1.5s ease-in-out .5s; }
@keyframes nous-toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* Sign-in card: rises into place */
.nous-auth-card { border: 1px solid var(--nous-hairline); animation: nous-card-in .6s var(--nous-ease-out) backwards; }
@keyframes nous-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

/* Night mode polish: the generic input/button chrome must not box sliders or text links */
body.night-mode input[type=range] { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
body.night-mode .grove-link, body.night-mode .grove-link:hover { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; transform: none; }
body.night-mode .grove-link { color: #a8b3c7; }
body.night-mode .nous-text-btn, body.night-mode .nous-text-btn:hover { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; transform: none; }
/* The timer card sits inside the habits widget card: at night the two glass layers overlapped and drew a second edge, so the inner one goes clear */
body.night-mode .nous-habits-widget .nous-timer-card:not(.nous-timer-card--aurora):not(.nous-timer-card--bonsai) { background: transparent !important; }
body.night-mode .grove-link:hover { color: #e2e8f0; }

/* Still versions for people who turn motion off */
@media (prefers-reduced-motion: reduce) {
    .nous-page, .nous-auth-card, .nous-toast, .nous-play-btn::before, .nous-pause-btn::before { animation: none !important; }
    .nous-nav__btn, .nous-nav__btn svg, .nous-nav__btn::before, .focus-switch__knob, .nous-night-switch__knob, main :where(button) { transition: none !important; }
    .nous-nav__btn.is-active svg { transform: none; }
}

/* Loading screen: both rings stay visible but only the outer loader arc turns; the ring round the n stands still (owner, 2026-10-31) */
.nous-loader .nous-logo-orbit { animation: none; stroke-dasharray: none; }