/* ======================================== DESIGN SYSTEM ======================================== Built for readability and maintainability. THEME SWITCHING: Themes work via data-theme attribute on . Each theme defines color tokens (--bg-base, --text-primary, etc.). When you switch themes, CSS variables update automatically. No JavaScript color manipulation needed. SPACING: Everything uses a 4px base scale (--space-1 = 4px, --space-2 = 8px). This creates visual consistency without thinking. COLORS: Each theme has 11 color tokens: - 3 background layers (base, elevated, subtle) - 3 text colors (primary, secondary, tertiary) - 2 accent colors (primary, secondary) - 2 border colors (subtle, strong) - 1 button text color WHY THIS WAY: Makes it easy to add new themes. Just define 11 colors, and everything adapts. No per-component overrides needed. ======================================== */ :root { /* Premium Spacing Scale (4px base - Linear/Notion standard) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Typography Scale - Consistent with marketing pages */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 15px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 48px; --text-3xl: 32px; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* Border Radius - Consistent system */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* Core theme colors - overridden per theme */ --bg-base: #020617; --bg-elevated: #0f172a; --bg-subtle: #1e293b; --text-primary: #f9fafb; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --accent-primary: #f97316; --accent-secondary: #e11d48; --accent-soft: rgba(249, 115, 22, 0.15); --border-subtle: rgba(148, 163, 184, 0.15); --border-strong: rgba(148, 163, 184, 0.3); /* Shadows - Premium elevation system */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08); --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.12); /* Transitions - Refined timing */ --transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Legacy aliases for gradual migration */ --card-bg: var(--bg-elevated); --accent: var(--accent-primary); --accent-2: var(--accent-secondary); --text-main: var(--text-primary); --text-sub: var(--text-secondary); --btn-text: #ffffff; --bg-gradient: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-subtle) 100%); } /* THEMES */ [data-theme="neon"] { --bg-base: #020617; --bg-elevated: #0f172a; --bg-subtle: #1e293b; --text-primary: #f9fafb; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --accent-primary: #f97316; --accent-secondary: #e11d48; --accent-soft: rgba(249, 115, 22, 0.15); --border-subtle: rgba(148, 163, 184, 0.15); --card-bg: rgba(15, 23, 42, 0.65); } [data-theme="coffee"] { --bg-base: #1f0905; --bg-elevated: #3d1f0a; --bg-subtle: #4a2610; --text-primary: #fde7d0; --text-secondary: #d4a574; --text-tertiary: #b08968; --accent-primary: #d97706; --accent-secondary: #f59e0b; --accent-soft: rgba(217, 119, 6, 0.15); --border-subtle: rgba(217, 119, 6, 0.2); --card-bg: rgba(63, 31, 13, 0.5); } [data-theme="solar"] { --bg-base: #fffbf5; --bg-elevated: #fff4e6; --bg-subtle: #ffedd5; --text-primary: #7c2d12; --text-secondary: #9a3412; --text-tertiary: #c2410c; --accent-primary: #ea580c; --accent-secondary: #f97316; --accent-soft: rgba(234, 88, 12, 0.15); --border-subtle: rgba(234, 88, 12, 0.25); --card-bg: rgba(255, 255, 255, 0.85); } [data-theme="forest"] { --bg-base: #022c22; --bg-elevated: #064e3b; --bg-subtle: #065f46; --text-primary: #ecfdf5; --text-secondary: #a7f3d0; --text-tertiary: #6ee7b7; --accent-primary: #10b981; --accent-secondary: #34d399; --accent-soft: rgba(16, 185, 129, 0.15); --border-subtle: rgba(16, 185, 129, 0.2); --card-bg: rgba(16, 185, 129, 0.12); } [data-theme="midnight"] { --bg-base: #0b0b0f; --bg-elevated: #1a0033; --bg-subtle: #2e1065; --text-primary: #f3e8ff; --text-secondary: #d8b4fe; --text-tertiary: #c084fc; --accent-primary: #a78bfa; --accent-secondary: #06b6d4; --accent-soft: rgba(167, 139, 250, 0.15); --border-subtle: rgba(167, 139, 250, 0.15); --card-bg: rgba(26, 0, 51, 0.4); } [data-theme="mono"] { --bg-base: #ffffff; --bg-elevated: #fafafa; --bg-subtle: #f5f5f5; --text-primary: #000000; --text-secondary: #666666; --text-tertiary: #999999; --accent-primary: #000000; --accent-secondary: #333333; --accent-soft: rgba(0, 0, 0, 0.1); --border-subtle: rgba(0, 0, 0, 0.1); --card-bg: #ffffff; } [data-theme="dark"] { --bg-base: #020617; --bg-elevated: #0f172a; --bg-subtle: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --accent-primary: #f97316; --accent-secondary: #22c55e; --accent-soft: rgba(249, 115, 22, 0.15); --border-subtle: rgba(148, 163, 184, 0.2); --card-bg: rgba(15, 23, 42, 0.65); } [data-theme="light"] { --bg-base: #ffffff; --bg-elevated: #f8fafc; --bg-subtle: #f1f5f9; --text-primary: #1e293b; --text-secondary: #475569; --text-tertiary: #64748b; --accent-primary: #2563eb; --accent-secondary: #7c3aed; --accent-soft: rgba(37, 99, 235, 0.15); --border-subtle: rgba(148, 163, 184, 0.25); --card-bg: rgba(255, 255, 255, 0.90); } /* New Themes */ [data-theme="ocean"] { --bg-base: #0a1929; --bg-elevated: #132f4c; --bg-subtle: #1a4d8f; --text-primary: #e0f2fe; --text-secondary: #7dd3fc; --text-tertiary: #38bdf8; --accent-primary: #0ea5e9; --accent-secondary: #06b6d4; --accent-soft: rgba(14, 165, 233, 0.15); --border-subtle: rgba(14, 165, 233, 0.2); --card-bg: rgba(19, 47, 76, 0.5); } [data-theme="sunset"] { --bg-base: #1a0a12; --bg-elevated: #2d1017; --bg-subtle: #4a1625; --text-primary: #fce7f3; --text-secondary: #f9a8d4; --text-tertiary: #f472b6; --accent-primary: #ec4899; --accent-secondary: #f97316; --accent-soft: rgba(236, 72, 153, 0.15); --border-subtle: rgba(236, 72, 153, 0.2); --card-bg: rgba(45, 16, 23, 0.5); } [data-theme="arctic"] { --bg-base: #0c1419; --bg-elevated: #1a2733; --bg-subtle: #2d3e50; --text-primary: #f0f9ff; --text-secondary: #bae6fd; --text-tertiary: #7dd3fc; --accent-primary: #38bdf8; --accent-secondary: #0ea5e9; --accent-soft: rgba(56, 189, 248, 0.15); --border-subtle: rgba(56, 189, 248, 0.2); --card-bg: rgba(26, 39, 51, 0.5); } @keyframes float { 0%, 100% { transform: translateY(0px) translateX(0px); } 25% { transform: translateY(-20px) translateX(10px); } 50% { transform: translateY(-30px) translateX(-10px); } 75% { transform: translateY(-15px) translateX(5px); } } @keyframes glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes float-alternate { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -20px) scale(1.1); } } @keyframes momentum-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } .momentum-pulse { animation: momentum-pulse 0.6s ease-out; } * { box-sizing: border-box; margin: 0; padding: 0; } html { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #0b1220; } body { height: 100%; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #0b1220; color: var(--text-primary); font-size: var(--text-base); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); width: 100%; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } html, body { height: 100%; margin: 0; overflow: hidden; background: #0b1220; } :root { --bottom-nav-height: 72px; } #app-root { height: calc(var(--vh) * 100); display: flex; flex-direction: column; } .scroll-container { flex: 1; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom)); } body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.12) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.12) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%); animation: float 20s ease-in-out infinite, pulse 8s ease-in-out infinite; pointer-events: none; z-index: 0; } body::after { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 60% 40%, rgba(34, 197, 94, 0.06) 0%, transparent 40%), radial-gradient(circle at 30% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 40%); animation: float 25s ease-in-out infinite reverse, pulse 10s ease-in-out infinite; pointer-events: none; z-index: 0; opacity: 0.7; } /* Neon theme decorations (default) */ [data-theme="neon"] body::before { background: radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 50%); animation: glow 8s ease-in-out infinite; } [data-theme="neon"] body::after { background-image: repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.03) 0px, transparent 1px, transparent 2px, rgba(148, 163, 184, 0.03) 3px), repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.03) 0px, transparent 1px, transparent 2px, rgba(148, 163, 184, 0.03) 3px); } /* Coffee theme - steam and coffee beans */ [data-theme="coffee"] body::before { background: radial-gradient(circle at 30% 20%, rgba(217, 119, 6, 0.15) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(245, 158, 11, 0.12) 0%, transparent 45%), radial-gradient(ellipse at 50% 80%, rgba(146, 64, 14, 0.1) 0%, transparent 60%); animation: glow 6s ease-in-out infinite; } [data-theme="coffee"] body::after { background-image: radial-gradient(circle, rgba(217, 119, 6, 0.08) 2px, transparent 2px), radial-gradient(circle, rgba(245, 158, 11, 0.06) 1px, transparent 1px); background-size: 80px 80px, 40px 40px; background-position: 0 0, 40px 40px; opacity: 0.3; } /* Solar theme - sun rays and light beams */ [data-theme="solar"] body::before { background: conic-gradient(from 45deg at 50% 50%, transparent 0%, rgba(234, 88, 12, 0.08) 10%, transparent 20%, rgba(249, 115, 22, 0.06) 30%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(251, 146, 60, 0.12) 0%, transparent 50%); animation: rotate 60s linear infinite; } [data-theme="solar"] body::after { background-image: linear-gradient(45deg, rgba(234, 88, 12, 0.03) 25%, transparent 25%, transparent 75%, rgba(234, 88, 12, 0.03) 75%), linear-gradient(-45deg, rgba(249, 115, 22, 0.03) 25%, transparent 25%, transparent 75%, rgba(249, 115, 22, 0.03) 75%); background-size: 60px 60px; background-position: 0 0, 30px 30px; } /* Forest theme - leaves and branches */ [data-theme="forest"] body::before { background: radial-gradient(ellipse at 20% 30%, rgba(16, 185, 129, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(52, 211, 153, 0.1) 0%, transparent 50%), radial-gradient(circle at 60% 40%, rgba(5, 150, 105, 0.08) 0%, transparent 60%); animation: float-alternate 15s ease-in-out infinite; } [data-theme="forest"] body::after { background-image: url('data:image/svg+xml,'); background-size: 60px 60px; opacity: 0.5; } /* Midnight theme - stars and aurora */ [data-theme="midnight"] body::before { background: radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.15) 0%, transparent 30%), radial-gradient(circle at 85% 80%, rgba(6, 182, 212, 0.12) 0%, transparent 35%), radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 70%); animation: glow 10s ease-in-out infinite; } [data-theme="midnight"] body::after { background-image: radial-gradient(circle, rgba(167, 139, 250, 0.4) 1px, transparent 1px), radial-gradient(circle, rgba(6, 182, 212, 0.3) 1px, transparent 1px), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0.5px, transparent 0.5px); background-size: 100px 100px, 150px 150px, 50px 50px; background-position: 0 0, 75px 75px, 25px 25px; animation: float 20s ease-in-out infinite; } /* Mono theme - minimal geometric patterns */ [data-theme="mono"] body::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 100px 100px; } [data-theme="mono"] body::after { background-image: linear-gradient(45deg, transparent 48%, rgba(0, 0, 0, 0.03) 49%, rgba(0, 0, 0, 0.03) 51%, transparent 52%); background-size: 40px 40px; } /* Dark theme - subtle tech grid */ [data-theme="dark"] body::before { background: radial-gradient(circle at 25% 25%, rgba(249, 115, 22, 0.12) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(34, 197, 94, 0.10) 0%, transparent 50%); animation: glow 12s ease-in-out infinite; } [data-theme="dark"] body::after { background-image: linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px); background-size: 50px 50px; } /* Light theme - soft gradients and dots */ [data-theme="light"] body::before { background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.04) 0%, transparent 50%); animation: float-alternate 20s ease-in-out infinite; } [data-theme="light"] body::after { background-image: radial-gradient(circle, rgba(37, 99, 235, 0.04) 2px, transparent 2px), radial-gradient(circle, rgba(124, 58, 237, 0.03) 1.5px, transparent 1.5px); background-size: 70px 70px, 45px 45px; background-position: 0 0, 35px 35px; } /* Ocean theme - underwater waves */ [data-theme="ocean"] body::before { background: radial-gradient(circle at 20% 30%, rgba(14, 165, 233, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.12) 0%, transparent 50%); animation: float-alternate 16s ease-in-out infinite; } [data-theme="ocean"] body::after { background-image: linear-gradient(rgba(14, 165, 233, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px); background-size: 60px 60px; } /* Sunset theme - warm horizon */ [data-theme="sunset"] body::before { background: radial-gradient(circle at 50% 70%, rgba(236, 72, 153, 0.12) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(251, 146, 60, 0.10) 0%, transparent 50%); animation: glow 14s ease-in-out infinite; } [data-theme="sunset"] body::after { background-image: radial-gradient(circle, rgba(236, 72, 153, 0.04) 2px, transparent 2px), radial-gradient(circle, rgba(251, 146, 60, 0.03) 1.5px, transparent 1.5px); background-size: 65px 65px, 40px 40px; background-position: 0 0, 32px 32px; } /* Arctic theme - ice crystals */ [data-theme="arctic"] body::before { background: radial-gradient(circle at 35% 35%, rgba(56, 189, 248, 0.15) 0%, transparent 50%), radial-gradient(circle at 65% 65%, rgba(125, 211, 252, 0.12) 0%, transparent 50%); animation: float-alternate 18s ease-in-out infinite; } [data-theme="arctic"] body::after { background-image: linear-gradient(30deg, transparent 48%, rgba(56, 189, 248, 0.05) 49%, rgba(56, 189, 248, 0.05) 51%, transparent 52%), linear-gradient(-30deg, transparent 48%, rgba(125, 211, 252, 0.04) 49%, rgba(125, 211, 252, 0.04) 51%, transparent 52%); background-size: 55px 55px; } .app { width: 100%; max-width: 1400px; margin: auto; background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85)); border-radius: var(--radius-2xl); padding: var(--space-8); border: 1px solid rgba(148, 163, 184, 0.1); box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(255, 255, 255, 0.03) inset; backdrop-filter: blur(24px) saturate(180%); position: relative; overflow: visible; z-index: 1; animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(148, 163, 184, 0.08); gap: var(--space-4); position: relative; z-index: 2; } header::before, header::after { pointer-events: none; } .header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; z-index: 10; } .header-right, .top-row { position: relative; z-index: 10; pointer-events: auto; } #operator-toggle-btn { position: relative; z-index: 20; pointer-events: auto; } .glass-layer, .header-overlay, .bg-blur, .top-gradient { pointer-events: none; } .brand { display: flex; align-items: center; gap: var(--space-3); } .logo-pill { width: 32px; height: 32px; border-radius: var(--radius-full); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } .logo-pill img { display: block; width: 100%; height: 100%; object-fit: contain; } .logo-pill:hover { transform: translateY(-1px); cursor: pointer; } .brand-text h1 { font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-normal); color: var(--text-primary); margin: 0; } .brand-text p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; letter-spacing: var(--tracking-normal); display: none; /* Hide tagline for cleaner header */ } .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 15px; } .top-row { display: flex; gap: 12px; align-items: center; } .date-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(249, 115, 22, 0.3); background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)); backdrop-filter: blur(12px); display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .date-pill:hover { border-color: rgba(249, 115, 22, 0.6); background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(236, 72, 153, 0.1)); transform: translateY(-2px); } .status-dot { width: 10px; height: 10px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.8); animation: glow 2s ease-in-out infinite; } .streak-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(250, 204, 21, 0.4); font-size: 15px; font-weight: 600; background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(249, 115, 22, 0.15)); backdrop-filter: blur(12px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(250, 204, 21, 0.2); color: #fbbf24; } .streak-pill:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(250, 204, 21, 0.3); } .theme-select { border-radius: 8px; padding: 8px 12px; font-size: 15px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.5); color: var(--text-main); cursor: pointer; transition: all 0.3s ease; } .theme-select:hover { border-color: rgba(249, 115, 22, 0.4); } .reset-btn { border-radius: 8px; padding: 8px 14px; border: 1px solid rgba(239, 68, 68, 0.3); background: rgba(248, 113, 113, 0.1); color: #fca5a5; font-size: 15px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; } .reset-btn:hover { border-color: rgba(239, 68, 68, 0.6); background: rgba(248, 113, 113, 0.15); } /* TOP NAV (pages) */ .top-nav { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--bg-elevated); border-radius: var(--radius-lg); margin-bottom: var(--space-6); border: 1px solid var(--border-subtle); overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; } .top-nav::-webkit-scrollbar { display: none; } .nav-tab { border-radius: var(--radius-md); border: none; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-4); cursor: pointer; letter-spacing: var(--tracking-normal); transition: var(--transition-base); position: relative; white-space: nowrap; min-height: 40px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav-tab:hover { color: var(--text-primary); background: var(--bg-subtle); } .nav-tab.active { background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(236, 72, 153, 0.15)); color: var(--accent-primary); box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2); font-weight: 600; border: 1px solid rgba(249, 115, 22, 0.3); } .page { display: none; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .page.active { display: block; opacity: 1; transform: translateY(0); } .grid-main { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .card { background: var(--bg-elevated); border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--border-subtle); position: relative; overflow: visible; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; opacity: 0; transition: opacity 0.3s ease; } .card:hover { border-color: rgba(249, 115, 22, 0.4); transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1); } .card:hover::before { opacity: 1; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); gap: var(--space-3); } .card-title { font-size: var(--text-md); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--text-primary); margin: 0; } .card-tag { font-size: var(--text-xs); padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(236, 72, 153, 0.15)); color: var(--accent-primary); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid rgba(249, 115, 22, 0.2); transition: all 0.2s ease; } .card:hover .card-tag { background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(236, 72, 153, 0.25)); border-color: rgba(249, 115, 22, 0.4); transform: scale(1.05); } .expand-btn { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--text-sm); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-weight: 600; } .expand-btn:hover { background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(236, 72, 153, 0.1)); color: var(--accent-primary); border-color: rgba(249, 115, 22, 0.4); transform: scale(1.05); } .expand-btn:active { transform: scale(0.95); } /* Tabs */ .card-tabs { display: inline-flex; background: rgba(15, 23, 42, 0.6); border-radius: 12px; padding: 4px; border: 1px solid rgba(249, 115, 22, 0.2); margin-bottom: 16px; backdrop-filter: blur(10px); } .tab-btn { border: none; background: transparent; color: var(--text-sub); font-size: 17px; font-weight: 600; padding: 10px 16px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 1; } .tab-btn:hover { color: var(--text-main); background: rgba(249, 115, 22, 0.1); } .tab-btn.active { background: linear-gradient(135deg, var(--accent), #ec4899); color: #020617; font-weight: 700; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); } .tab-content { display: none; } .tab-content.active { display: block; } .priorities-list, .tasks-list { display: flex; flex-direction: column; gap: var(--space-2); } .priority, .task-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5)); border: 1px solid rgba(249, 115, 22, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; min-height: 44px; backdrop-filter: blur(10px); } .priority::before, .task-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-radius: var(--radius-lg) 0 0 var(--radius-lg); opacity: 0; transition: opacity 0.3s ease; } .priority:hover::before, .task-item:hover::before { opacity: 1; } .priority:hover, .task-item:hover { background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.65)); border-color: rgba(249, 115, 22, 0.4); transform: translateX(4px); box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15); } .priority-index { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(236, 72, 153, 0.2)); color: var(--accent-primary); font-size: var(--text-sm); font-weight: 700; flex-shrink: 0; border: 1px solid rgba(249, 115, 22, 0.3); transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(249, 115, 22, 0.1); } .priority:hover .priority-index { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; transform: scale(1.1); box-shadow: 0 4px 8px rgba(249, 115, 22, 0.3); } .priority-input, .task-text { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: var(--text-md); font-weight: 400; line-height: var(--leading-normal); min-width: 0; transition: all 0.2s ease; } .priority-input:focus, .task-text:focus { color: var(--text-primary); } .priority-input::placeholder { color: var(--text-tertiary); } .intent-btn { margin-top: 8px; font-size: 18px; border-radius: 8px; padding: 8px 12px; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.4); cursor: pointer; color: #ffffff; transition: all 0.3s ease; } .next-action-btn { margin-top: 12px; padding: 10px 16px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 44px; box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25); } .next-action-btn:hover { transform: translateY(-1px); } .intent-btn:hover { border-color: rgba(249, 115, 22, 0.4); background: rgba(15, 23, 42, 0.6); } .intent-text-display { margin-top: 6px; font-size: 15px; color: var(--text-main); opacity: 0.9; } .intent-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 17px; color: var(--text-sub); margin-bottom: 2px; } /* Workspace */ .tasks-container, .pinboard-container { display: flex; flex-direction: column; gap: 10px; } .tasks-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-right: 6px; } .task-item { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5)); border-radius: 12px; padding: 14px 16px; border: 1px solid rgba(249, 115, 22, 0.2); font-size: 17px; font-weight: 500; transition: all 0.3s ease; backdrop-filter: blur(10px); position: relative; word-wrap: break-word; min-width: 0; } .task-item::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(135deg, var(--accent), #ec4899); border-radius: 12px 0 0 12px; opacity: 0; transition: opacity 0.3s ease; } .task-item:hover::before { opacity: 1; } .task-item:hover { border-color: rgba(249, 115, 22, 0.4); background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)); transform: translateX(4px); box-shadow: 0 4px 16px rgba(249, 115, 22, 0.15); } .task-checkbox { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1.5px solid var(--border-strong); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); transition: var(--transition-base); flex-shrink: 0; position: relative; } .task-checkbox:hover { border-color: var(--accent-primary); background: var(--accent-soft); } .task-checkbox.checked { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-base); } .task-checkbox.checked::after { content: "✓"; font-size: 12px; font-weight: 700; } .task-text.completed { text-decoration: line-through; color: var(--text-tertiary); opacity: 0.6; } .task-delete { font-size: var(--text-md); cursor: pointer; color: var(--text-tertiary); padding: var(--space-2); border-radius: var(--radius-xs); transition: var(--transition-base); opacity: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .task-item:hover .task-delete { opacity: 1; } .task-delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; } .task-input-row { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .task-input-row input, .task-input-row textarea { flex: 1; background: var(--bg-base); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); padding: var(--space-3); outline: none; color: var(--text-primary); font-size: var(--text-md); font-weight: 400; transition: var(--transition-base); font-family: inherit; line-height: var(--leading-normal); } .task-input-row select#task-difficulty { flex: 0 0 120px; background: var(--bg-base); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); padding: var(--space-3); color: var(--text-primary); font-size: var(--text-sm); appearance: none; min-height: 44px; } .task-input-row input:focus, .task-input-row textarea:focus { border-color: var(--accent-primary); background: rgba(15, 23, 42, 0.9); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), 0 4px 12px rgba(249, 115, 22, 0.1); transform: translateY(-1px); transition: all 0.2s ease; } .task-input-row input::placeholder, .task-input-row textarea::placeholder { color: var(--text-tertiary); } .task-input-row button, .routine-btn.primary, .btn-primary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: none; background: linear-gradient(135deg, var(--accent-primary), #ea580c); color: white; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); position: relative; overflow: hidden; } .task-input-row button:hover, .routine-btn.primary:hover, .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); } .task-input-row button:active, .routine-btn.primary:active, .btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); } /* Pinboard */ .pin-input-row { display: flex; gap: 8px; margin-top: 6px; } .pin-input-row textarea { flex: 1; background: rgba(15, 23, 42, 0.6); border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.15); padding: 8px 12px; outline: none; color: var(--text-main); font-size: 17px; resize: none; min-height: 60px; transition: all 0.3s ease; } .pin-input-row textarea:focus { border-color: rgba(249, 115, 22, 0.4); background: rgba(15, 23, 42, 0.7); } .pin-input-row button { border-radius: 10px; border: none; padding: 8px 12px; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: linear-gradient(135deg, #22c55e, #3b82f6); color: #020617; cursor: pointer; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); height: fit-content; transition: all 0.3s ease; } .pin-input-row button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34, 197, 94, 0.4); } .pins-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 4px; padding-right: 4px; } .pin-card { position: relative; background: rgba(15, 23, 42, 0.6); border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.15); padding: 12px 12px 14px; font-size: 16px; color: var(--text-main); transition: all 0.3s ease; } .pin-card:hover { border-color: rgba(249, 115, 22, 0.3); background: rgba(15, 23, 42, 0.7); } .pin-card::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), #ec4899); box-shadow: 0 0 10px rgba(249, 115, 22, 0.7); } .pin-text { margin-top: 12px; white-space: pre-wrap; line-height: 1.4; } .pin-delete { position: absolute; top: 6px; right: 8px; font-size: 18px; cursor: pointer; color: var(--text-sub); padding: 8px; border-radius: 6px; transition: all 0.2s ease; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .pin-delete:hover { background: rgba(239, 68, 68, 0.15); color: #fca5a5; } /* Stats & feel */ .sliders { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); } .slider-row { display: flex; flex-direction: column; gap: var(--space-2); } .slider-row label { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; } .slider-row strong { color: var(--text-primary); font-weight: 600; } .slider-row input[type="range"] { width: 100%; height: 6px; background: var(--bg-subtle); border-radius: var(--radius-full); outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .energy-quick { display: flex; gap: 8px; margin-top: 8px; } .energy-quick button { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-secondary); font-size: 12px; cursor: pointer; } .energy-quick button.active { border-color: rgba(34, 197, 94, 0.4); color: var(--text-primary); } .slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition-base); } .slider-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: var(--shadow-md); } .slider-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent-primary); cursor: pointer; border: none; box-shadow: var(--shadow-sm); transition: var(--transition-base); } .slider-row input[type="range"]::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: var(--shadow-md); } .affirmation-box { margin-top: 8px; border-radius: 18px; padding: 10px 12px; background: radial-gradient(circle at top left, rgba(248, 250, 252, 0.04), rgba(15, 23, 42, 0.95)); border: 1px solid rgba(249, 115, 22, 0.5); font-size: 16px; color: var(--text-main); } .affirmation-label { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.8; margin-bottom: 4px; } .reflection-area { width: 100%; resize: none; min-height: 80px; background: rgba(15, 23, 42, 0.9); border-radius: 16px; border: 1px solid rgba(75, 85, 99, 0.9); padding: 10px 12px; color: var(--text-main); font-size: 17px; outline: none; margin-top: 8px; } .reflection-area::placeholder { color: #6b7280; } .summary-box { margin-top: 8px; font-size: 15px; color: #6b7280; border-top: 1px dashed rgba(75, 85, 99, 0.8); padding-top: 6px; } .summary-title { font-size: 15px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 2px; } /* Timer */ .timer-display { font-size: 48px; font-weight: 700; letter-spacing: var(--tracking-tight); text-align: center; margin-bottom: var(--space-4); cursor: pointer; color: var(--text-primary); transition: var(--transition-base); font-variant-numeric: tabular-nums; } .timer-display:hover { transform: scale(1.02); color: var(--accent-primary); } .timer-edit-input { width: 96px; padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); text-align: center; font-size: var(--text-lg); background: var(--bg-base); color: var(--text-primary); font-family: inherit; font-variant-numeric: tabular-nums; } .timer-controls { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); } .timer-btn { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background: var(--bg-elevated); cursor: pointer; color: var(--text-primary); transition: var(--transition-base); font-weight: 500; } .timer-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); } .timer-btn.primary { border-color: transparent; background: var(--accent-primary); color: white; font-weight: 600; box-shadow: var(--shadow-sm); } .timer-btn.primary:hover { background: var(--accent-secondary); transform: translateY(-1px); box-shadow: var(--shadow-md); } .timer-mode { font-size: var(--text-sm); text-align: center; color: var(--text-secondary); margin-bottom: var(--space-2); font-weight: 500; } .mini-chip-row { display: flex; justify-content: space-between; gap: 6px; font-size: 15px; color: #6b7280; margin-bottom: 8px; flex-wrap: wrap; } .mini-chip { padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(75, 85, 99, 0.9); background: rgba(15, 23, 42, 0.85); } /* Focus Timer Ring */ .focus-timer-ring-container { position: relative; width: 300px; height: 300px; margin: 24px auto; display: flex; align-items: center; justify-content: center; } .focus-timer-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient( rgba(255, 255, 255, 0.1) 0deg 360deg ); padding: 8px; box-sizing: border-box; } .focus-timer-ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg-card, #1e293b); z-index: 1; } .focus-timer-content { position: relative; z-index: 2; text-align: center; } .focus-timer-display { font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-main, #f1f5f9); margin-bottom: 8px; font-family: 'Courier New', monospace; } .focus-timer-task-title { font-size: 14px; color: var(--text-sub, #94a3b8); margin-top: 8px; max-width: 250px; word-wrap: break-word; } .focus-timer-controls { display: flex; gap: 12px; justify-content: center; margin-top: 24px; margin-bottom: 16px; } .focus-timer-btn { padding: 12px 24px; border-radius: 8px; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); background: rgba(15, 23, 42, 0.6); color: var(--text-main, #f1f5f9); cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; } .focus-timer-btn:hover { background: rgba(15, 23, 42, 0.8); border-color: var(--accent, #3b82f6); } .focus-timer-btn.primary { background: var(--accent, #3b82f6); border-color: transparent; color: white; font-weight: 600; } .focus-timer-btn.primary:hover { background: var(--accent-2, #2563eb); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Contract Mode */ body.contract-mode .page[data-page="today"] .card:not(#focus-timer-panel) { filter: blur(4px); opacity: 0.4; pointer-events: none; transition: all 0.3s ease; } body.contract-mode #focus-timer-panel { filter: none; opacity: 1; pointer-events: all; } /* Reflection Bar */ .focus-reflection-bar { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg-card, #1e293b); border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); border-radius: 12px; margin-top: 16px; margin-bottom: 16px; } .focus-reflection-label { font-size: 14px; font-weight: 600; color: var(--text-main, #f1f5f9); text-align: center; margin-bottom: 8px; } .focus-reflection-buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .focus-reflection-btn { padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); background: rgba(15, 23, 42, 0.6); color: var(--text-main, #f1f5f9); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; } .focus-reflection-btn:hover { background: rgba(15, 23, 42, 0.8); border-color: var(--accent, #3b82f6); transform: translateY(-1px); } /* Big 3 with estMinutes selector */ .big3-item { display: flex; align-items: center; gap: 12px; } .big3-est-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1)); background: rgba(15, 23, 42, 0.6); color: var(--text-main, #f1f5f9); font-size: 12px; cursor: pointer; min-width: 100px; } .big3-start-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid var(--accent, #3b82f6); background: var(--accent, #3b82f6); color: white; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .big3-start-btn:hover { background: var(--accent-2, #2563eb); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); } .big3-mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .big3-mobile-actions .pill-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 13px; font-weight: 600; min-height: 44px; } .big3-mobile-actions .primary-cta { flex: 1; padding: 10px 16px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent-primary), #ea580c); color: #fff; font-size: 14px; font-weight: 700; min-height: 44px; } /* Compass UI Styles - Distinct Mode Feel */ .page[data-page="stryde-ai"] { position: relative; } .compass-context-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .compass-context-chip { padding: 8px 12px; border-radius: var(--radius-md); background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); color: #c084fc; font-size: 12px; font-weight: 500; } .compass-primary-btn { width: 100%; padding: 16px 24px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-primary, #f97316), var(--accent-secondary, #e11d48)); border: none; color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); } .compass-primary-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(249, 115, 22, 0.4); } .compass-primary-btn:active { transform: translateY(0); } .compass-mode-btn { padding: 12px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15)); background: rgba(15, 23, 42, 0.6); color: var(--text-secondary, #cbd5e1); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; text-align: center; } .compass-mode-btn:hover { background: rgba(15, 23, 42, 0.8); border-color: var(--accent-primary, #f97316); color: var(--text-primary, #f9fafb); transform: translateY(-1px); } .compass-mode-btn:active { transform: translateY(0); } .compass-memory-chip { background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.2)) !important; border-color: rgba(168,85,247,0.4) !important; color: #c084fc !important; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .quote-box, .tip-box, .analytics-box { margin-top: 8px; padding: 8px 9px; border-radius: 14px; border: 1px solid var(--border-subtle); font-size: 13px; background: var(--bg-elevated); } .box-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; color: var(--text-tertiary); margin-bottom: 4px; font-weight: 600; } .mood-history { display: flex; gap: 4px; margin-top: 4px; } .mood-bar { flex: 1; height: 20px; border-radius: 6px; background: var(--bg-subtle); overflow: hidden; position: relative; } .mood-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(180deg, var(--accent-secondary), var(--accent-primary)); } .mood-history-labels { margin-top: 2px; display: flex; justify-content: space-between; font-size: 11px; color: var(--text-tertiary); } .widgets-toggle { margin-top: 6px; font-size: 18px; display: flex; gap: 8px; flex-wrap: wrap; } .widgets-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; } .footer-hint { margin-top: 14px; font-size: 15px; color: #6b7280; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; } /* Progress page: reflection log */ .reflection-log { font-size: 15px; display: flex; flex-direction: column; gap: 8px; } .reflection-log-item { padding: 8px 10px; border-radius: 12px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(55, 65, 81, 0.8); } .reflection-log-date { font-weight: 600; font-size: 15px; } .reflection-log-metrics { color: #9ca3af; font-size: 18px; margin-top: 2px; } .reflection-log-text { margin-top: 4px; line-height: 1.4; } /* Systems page: routines */ .routine-controls { display: flex; flex-direction: column; gap: 8px; font-size: 16px; } .routine-select { border-radius: 8px; padding: 8px 10px; border: 1px solid rgba(148, 163, 184, 0.15); background: rgba(15, 23, 42, 0.6); color: var(--text-main); font-size: 16px; transition: all 0.3s ease; } .routine-select:focus { border-color: rgba(249, 115, 22, 0.4); background: rgba(15, 23, 42, 0.7); outline: none; } .routine-textarea { width: 100%; min-height: 90px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.15); background: rgba(15, 23, 42, 0.6); color: var(--text-main); padding: 8px 10px; resize: vertical; font-size: 16px; transition: all 0.3s ease; } .routine-textarea:focus { border-color: rgba(249, 115, 22, 0.4); background: rgba(15, 23, 42, 0.7); outline: none; } .routine-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .routine-btn { border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.2); padding: 8px 12px; font-size: 15px; cursor: pointer; background: rgba(15, 23, 42, 0.6); color: var(--text-main); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; transition: all 0.3s ease; } .routine-btn:hover { border-color: rgba(249, 115, 22, 0.4); background: rgba(15, 23, 42, 0.7); } .routine-btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--accent), #ec4899); color: #020617; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); } .routine-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(249, 115, 22, 0.4); } .routine-preview { margin-top: 8px; font-size: 15px; color: var(--text-sub); } .routine-preview ul { margin-top: 4px; padding-left: 16px; } /* Intent modal */ .intent-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: none; justify-content: center; align-items: center; z-index: 10; backdrop-filter: blur(8px); animation: fadeIn 0.15s ease; } .intent-modal { max-width: 480px; width: 90%; background: var(--bg-elevated); border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-2xl); animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .intent-modal h2 { font-size: var(--text-lg); margin: 0 0 var(--space-2) 0; font-weight: 600; color: var(--text-primary); } .intent-modal p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-4) 0; line-height: var(--leading-normal); } .intent-modal textarea { width: 100%; min-height: 100px; resize: vertical; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-primary); padding: var(--space-3); font-size: var(--text-md); outline: none; transition: var(--transition-base); font-family: inherit; line-height: var(--leading-normal); } .intent-modal textarea:focus { border-color: var(--accent-primary); background: var(--bg-subtle); box-shadow: 0 0 0 3px var(--accent-soft); } .intent-modal-actions { margin-top: var(--space-4); display: flex; justify-content: flex-end; gap: var(--space-2); } .btn-ghost { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border: 1px solid var(--border-subtle); background: transparent; cursor: pointer; color: var(--text-primary); font-weight: 500; transition: var(--transition-base); } .btn-ghost:hover { background: var(--bg-subtle); border-color: var(--border-strong); } .btn-primary { border-radius: 8px; padding: 8px 14px; font-size: 16px; border: none; background: linear-gradient(135deg, var(--accent), #ec4899); cursor: pointer; color: #020617; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(249, 115, 22, 0.4); } .expand-btn { padding: 6px 10px; border-radius: 8px; background: rgba(249, 115, 22, 0.15); border: 1px solid rgba(249, 115, 22, 0.3); color: var(--text-main); font-size: 14px; min-width: 34px; min-height: 34px; cursor: pointer; transition: all 0.3s ease; } .expand-btn:hover { background: rgba(249, 115, 22, 0.25); transform: scale(1.1); box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3); } /* Focus Mode Modal */ .focus-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 6, 23, 0.92); backdrop-filter: blur(16px) saturate(180%); display: none; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 0.3s ease; padding: 20px; } .focus-modal.active { display: flex; } .focus-content { width: 90%; max-width: 1000px; max-height: 90vh; background: var(--bg-gradient); border-radius: 28px; border: 1px solid rgba(249, 115, 22, 0.25); padding: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.1), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 100px rgba(249, 115, 22, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); position: relative; animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .focus-header { display: flex; justify-content: space-between; align-items: center; padding: 32px 40px 24px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(249, 115, 22, 0.2); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } .focus-title { font-size: 28px; font-weight: 700; background: linear-gradient(135deg, var(--text-main) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; } .focus-close { padding: 8px 16px; border-radius: 12px; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(239, 68, 68, 0.25); color: #fca5a5; font-size: 28px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .focus-close:hover { background: rgba(248, 113, 113, 0.2); border-color: rgba(239, 68, 68, 0.5); transform: rotate(90deg) scale(1.05); box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3); } .focus-body { font-size: 20px; line-height: 1.6; padding: 32px 40px 40px; flex: 1; } .focus-body::-webkit-scrollbar { width: 10px; } .focus-body::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.4); border-radius: 10px; } .focus-body::-webkit-scrollbar-thumb { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-radius: 10px; border: 2px solid rgba(15, 23, 42, 0.4); } .focus-body::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, var(--accent-2), var(--accent)); } .focus-body .priority, .focus-body .task-item { font-size: 20px; padding: 16px 18px; margin-bottom: 14px; } .focus-body .priority-index { width: 42px; height: 42px; font-size: 20px; } .focus-body .priority-input, .focus-body .task-input { font-size: 20px; } .focus-body .task-checkbox { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } .focus-body .card-title { font-size: 24px; margin-bottom: 24px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Confetti */ .confetti { position: fixed; pointer-events: none; width: 6px; height: 10px; background: #f97316; opacity: 0.9; z-index: 20; animation: fall 1s linear forwards; } @keyframes fall { to { transform: translate3d(var(--tx), calc(var(--vh) * 100), 0) rotate(540deg); opacity: 0; } } /* --- Onboarding tour --- */ .tour-overlay { --cutout-left: 0px; --cutout-top: 0px; --cutout-width: 0px; --cutout-height: 0px; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 100000; pointer-events: none; -webkit-mask: radial-gradient( circle 0 at calc(var(--cutout-left) + var(--cutout-width)/2) calc(var(--cutout-top) + var(--cutout-height)/2), transparent 98%, black 100% ); mask: radial-gradient( circle 0 at calc(var(--cutout-left) + var(--cutout-width)/2) calc(var(--cutout-top) + var(--cutout-height)/2), transparent 98%, black 100% ); } .tour-highlight { position: relative; z-index: 100003 !important; border-radius: 20px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 40px rgba(255, 255, 255, 0.9), 0 0 80px rgba(255, 255, 255, 0.6); filter: brightness(1.4); } .tour-box { position: fixed; max-width: 320px; background: #111827; color: #f9fafb; padding: 16px 18px; border-radius: 16px; font-size: 0.9rem; line-height: 1.4; z-index: 100001; border: 1px solid rgba(148, 163, 184, 0.7); animation: tourSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes tourSlideIn { 0% { transform: translateY(20px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .tour-arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #111827; position: fixed; z-index: 100001; } .tour-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } .tour-next-btn { padding: 6px 12px; border-radius: 999px; border: none; cursor: pointer; font-size: 0.85rem; background: linear-gradient(135deg, var(--accent), #ec4899); color: #020617; font-weight: 500; } .tour-skip-top { position: fixed; top: 12px; right: 16px; z-index: 100002; background: rgba(15, 23, 42, 0.9); border: 1px solid #e5e7eb; color: #e5e7eb; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; cursor: pointer; opacity: 0.85; } /* ======================================== RESPONSIVE DESIGN - MOBILE FIRST ======================================== */ /* Tablet landscape / Small desktop */ @media (max-width: 1200px) { .grid-main { grid-template-columns: 1fr 1fr; gap: 20px; } .card { padding: 20px; } .timer-display { font-size: 44px; } } /* Tablet portrait */ @media (max-width: 1050px) { .grid-main { grid-template-columns: 1.5fr 1.5fr; grid-template-rows: auto auto; } .card-header { flex-wrap: wrap; } } /* Large mobile / Small tablet */ @media (max-width: 800px) { body { padding: 12px; } .app { padding: 20px 16px 24px; border-radius: 20px; max-width: 100%; } header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; } .header-right { align-items: flex-start; width: 100%; flex-direction: column; gap: 12px; } .top-row { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .grid-main { grid-template-columns: 1fr; gap: 20px; } .card { padding: 18px; } .card-header { flex-direction: column; align-items: flex-start; gap: 10px; } .card-tabs { width: 100%; flex-wrap: wrap; } .tab-btn { flex: 1; min-width: 80px; font-size: 15px; padding: 8px 12px; } .timer-display { font-size: 40px; } .priorities-list { gap: 10px; } .mood-slider-group { gap: 16px; } /* Stack analytics vertically on tablet */ #analytics-content canvas { max-height: 400px; } } /* Standard mobile */ @media (max-width: 640px) { body { padding: 8px; -webkit-tap-highlight-color: transparent; } .app { padding: 16px 12px 20px; } header { gap: 12px; } .brand { gap: 10px; } .logo-pill { width: 44px; height: 44px; font-size: 19px; } .brand-text h1 { font-size: 19px; } .brand-text p { font-size: 17px; } .nav-tabs { gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .nav-tabs::-webkit-scrollbar { height: 4px; } .nav-tabs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; } .nav-tab { padding: 14px 20px; font-size: 16px; white-space: nowrap; min-width: fit-content; min-height: 48px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .grid-main { gap: 18px; } .card { padding: 20px; } .card-title { font-size: 16px; } .card-tag { font-size: 16px; padding: 6px 12px; } .timer-display { font-size: 48px; margin-bottom: 14px; } .timer-controls { gap: 10px; flex-wrap: wrap; } .timer-btn { padding: 14px 20px; font-size: 16px; flex: 1; min-width: 90px; min-height: 48px; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .timer-mode-btn { flex: 1; min-width: 120px; padding: 10px 16px; font-size: 14px; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .priorities-list { gap: 12px; } .priority { padding: 14px 16px; gap: 14px; } .priority-index { width: 34px; height: 34px; font-size: 15px; } .priority-input { font-size: 16px; } .priority button { padding: 8px 14px; font-size: 17px; } .task-item { padding: 14px 16px; font-size: 16px; } .task-checkbox { width: 28px; height: 28px; min-width: 28px; min-height: 28px; touch-action: manipulation; } .task-input-row { flex-direction: column; gap: 10px; } .task-input-row input { padding: 14px 16px; font-size: 16px; width: 100%; min-height: 48px; -webkit-appearance: none; appearance: none; border-radius: var(--radius-md); touch-action: manipulation; } .task-input-row button { padding: 14px 18px; font-size: 16px; width: 100%; font-weight: 700; min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .task-input-row select#task-difficulty { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 12px; min-height: 44px; } .energy-quick { display: flex; gap: 8px; margin-top: 8px; } .energy-quick button { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-secondary); font-size: 12px; cursor: pointer; } .energy-quick button.active { border-color: rgba(34, 197, 94, 0.4); color: var(--text-primary); } .mood-slider-group { gap: 14px; } .modal-content { width: 95%; max-width: 450px; padding: 28px 24px; } .modal-content h2 { font-size: 22px; } /* Settings page adjustments */ #settings-content { gap: 18px; } .settings-section { padding: 20px; } .settings-section h3 { font-size: 16px; margin-bottom: 14px; } /* Systems page adjustments */ .backlog-item, .routine-item, .goal-item { padding: 14px; font-size: 15px; } .habit-stack-item { padding: 14px; } } .priority-index { width: 22px; height: 22px; font-size: 16px; flex-shrink: 0; } .priority-input { font-size: 16px; min-height: 48px; padding: 12px; -webkit-appearance: none; appearance: none; touch-action: manipulation; } .priority button { padding: 6px 10px; font-size: 18px; } .task-item { padding: 14px 16px; font-size: 16px; min-height: 56px; touch-action: manipulation; } .task-input-row { flex-direction: column; gap: 8px; } .task-input-row input { padding: 14px 16px; font-size: 16px; width: 100%; min-height: 48px; -webkit-appearance: none; appearance: none; touch-action: manipulation; } .task-input-row button { padding: 14px 18px; font-size: 16px; width: 100%; min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mood-slider-group { gap: 12px; } /* Small mobile */ @media (max-width: 480px) { body { padding: 6px; -webkit-tap-highlight-color: transparent; } .app { padding: 12px 10px 16px; border-radius: 16px; } header { gap: 8px; padding: 12px 0; } .brand { gap: 6px; } .logo-pill { width: 36px; height: 36px; font-size: 16px; } .brand-text h1 { font-size: 15px; } .brand-text p { font-size: 18px; } .nav-tab { padding: 12px 16px; font-size: 15px; min-height: 44px; touch-action: manipulation; } .card { padding: 14px; border-radius: 14px; } .card-title { font-size: 16px; } .card-tag { font-size: 13px; padding: 2px 6px; } .priorities-list { gap: 6px; } .priority { padding: 12px 14px; gap: 12px; min-height: 52px; } .priority-index { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 14px; touch-action: manipulation; } .priority-input { font-size: 16px; } .priority button { padding: 5px 8px; font-size: 14px; } .timer-display { font-size: 32px; margin-bottom: 8px; } .timer-btn { padding: 7px 12px; font-size: 18px; min-width: 60px; } .timer-mode-btn { padding: 4px 8px; font-size: 14px; min-width: 90px; } .task-item { padding: 6px 10px; font-size: 16px; } .task-input-row input { padding: 8px 10px; font-size: 16px; } .task-input-row button { padding: 8px 12px; font-size: 15px; } .mood-slider-group { gap: 10px; } .mood-slider label { font-size: 15px; } .modal-content { padding: 20px 16px; border-radius: 16px; } .modal-content h2 { font-size: 18px; margin-bottom: 16px; } .footer-hint { font-size: 18px; margin-top: 16px; flex-direction: column; gap: 4px; } /* Hide less critical elements on very small screens */ .card-tag { display: none; } .brand-text p { display: none; } } /* Extra small mobile (320px) */ @media (max-width: 360px) { body { padding: 6px; } .app { padding: 14px 10px 18px; } .logo-pill { width: 32px; height: 32px; font-size: 15px; } .brand-text h1 { font-size: 18px; } .nav-tab { padding: 6px 10px; font-size: 18px; } .card { padding: 12px; } .timer-display { font-size: 28px; } .priority-index { width: 18px; height: 18px; font-size: 18px; } .priority-input, .task-item { font-size: 15px; } .modal-content { padding: 16px 12px; width: 98%; } } /* Landscape mode on mobile devices */ @media (max-height: 600px) and (orientation: landscape) { body { padding: 8px; } .app { padding: 12px; } header { padding: 10px 0; } .grid-main { grid-template-columns: 1fr 1fr; gap: 12px; } .card { padding: 14px; } .timer-display { font-size: 32px; margin-bottom: 6px; } .priorities-list { gap: 6px; } .priority { padding: 6px 8px; } .modal-content { max-height: 85vh; padding: 16px; } /* Tour adjustments for landscape */ #tour-overlay .tour-box { max-width: 400px; padding: 16px; } } /* Large screens / Desktop */ @media (min-width: 1400px) { .app { max-width: 1400px; padding: 40px; } .grid-main { gap: 28px; } .card { padding: 28px; } .timer-display { font-size: 52px; } .priority-input { font-size: 15px; } .card-title { font-size: 15px; } } /* Ultra-wide screens */ @media (min-width: 1920px) { .app { max-width: 1600px; } .grid-main { grid-template-columns: repeat(3, 1fr); } } /* High DPI displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Touch optimizations for mobile */ @media (hover: none) and (pointer: coarse) { button, .btn, .nav-tab, .tab-btn, .timer-btn, .task-checkbox, .priority-index { min-height: 44px; min-width: 44px; } .card:hover { transform: none; } .card:active { transform: scale(0.98); } button:active, .btn:active { transform: scale(0.95); opacity: 0.8; } /* Prevent text selection on buttons */ button, .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Improve tap feedback */ button:active, .btn:active, .nav-tab:active { background-color: rgba(249, 115, 22, 0.2); } /* Better scroll behavior */ * { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* Prevent zoom on input focus (iOS) */ input, textarea, select { font-size: 16px !important; } /* Improve form inputs on mobile */ input[type="text"], input[type="email"], input[type="password"], input[type="time"], input[type="number"], textarea { -webkit-appearance: none; appearance: none; border-radius: var(--radius-md); min-height: 44px; padding: 12px 16px; } /* Better slider touch targets */ input[type="range"] { min-height: 44px; padding: 12px 0; } input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; } input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; } } /* Operator UI */ .operator-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition-base); } .operator-toggle:hover { border-color: rgba(249, 115, 22, 0.4); } .operator-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 280px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; display: none; z-index: 1100; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } .operator-panel.active { display: block; } .operator-chat-panel { position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw; height: calc(var(--vh, 1vh) * 100); background: var(--bg-elevated); border-left: 1px solid var(--border-subtle); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35); display: none; flex-direction: column; z-index: 1200; padding-top: env(safe-area-inset-top); } .operator-chat-panel.active { display: flex; } .operator-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); } .operator-chat-close { border: none; background: transparent; color: var(--text-sub); font-size: 20px; cursor: pointer; } .operator-chat-messages { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .operator-chip-row { display: flex; align-items: flex-start; flex-wrap: wrap; row-gap: 8px; gap: 10px; padding: 8px 16px 2px; border-top: 1px solid var(--border-subtle); } .operator-chip-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); font-weight: 600; white-space: nowrap; } .operator-chip-scroll { display: flex; gap: 8px; flex-wrap: wrap; overflow-x: visible; padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none; } .operator-chip-scroll::-webkit-scrollbar { display: none; } .operator-chip { border: 1px solid var(--border-subtle); background: rgba(30, 41, 59, 0.6); color: var(--text-secondary); font-size: 11px; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: var(--transition-base); } .operator-chip:hover { border-color: rgba(249, 115, 22, 0.4); color: var(--text-primary); } .operator-chat-bubble { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; } .operator-chat-bubble.user { align-self: flex-end; background: rgba(59, 130, 246, 0.2); color: var(--text-primary); } .operator-chat-bubble.ai { align-self: flex-start; background: rgba(15, 23, 42, 0.6); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .operator-chat-preview { margin-top: 6px; padding-left: 16px; font-size: 12px; color: var(--text-sub); } .operator-chat-input { display: flex; gap: 8px; padding: 12px 16px; border-top: none; } .operator-chat-input input { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 12px; } .operator-chat-input button { padding: 10px 14px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; font-size: 12px; font-weight: 700; cursor: pointer; } .operator-action-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.7); color: var(--text-secondary); align-self: flex-start; max-width: 100%; } .operator-action-title { font-weight: 700; font-size: 14px; color: var(--text-primary); } .operator-action-list { margin: 0 0 0 16px; padding: 0; font-size: 12px; color: var(--text-secondary); } .operator-action-impact { display: flex; flex-wrap: wrap; gap: 6px; } .operator-action-badge { font-size: 10px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-sub); background: rgba(30, 41, 59, 0.6); } .operator-action-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .operator-action-actions button:disabled { opacity: 0.6; cursor: default; } .operator-clarify { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); } .operator-clarify-text { font-size: 12px; color: var(--text-secondary); } .operator-clarify-actions { display: flex; gap: 8px; flex-wrap: wrap; } .operator-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .operator-diff-preview { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; background: rgba(30, 41, 59, 0.5); } .operator-diff-summary { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); margin-bottom: 6px; } .operator-diff-list { margin: 0 0 0 16px; padding: 0; font-size: 12px; color: var(--text-secondary); } .operator-mode-toggle { display: flex; gap: 6px; margin-bottom: 12px; } .operator-mode-btn { flex: 1; border-radius: 10px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); font-size: 12px; padding: 8px 6px; cursor: pointer; font-weight: 600; } .operator-mode-btn.active { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(236, 72, 153, 0.2)); color: var(--text-primary); border-color: rgba(249, 115, 22, 0.4); } .operator-command { display: flex; gap: 8px; } .operator-command input { flex: 1; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 12px; } .operator-command button { padding: 8px 12px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; font-size: 12px; font-weight: 700; cursor: pointer; } .operator-auto-hint { font-size: 11px; color: var(--text-sub); margin: 4px 0 0; } #operator-notification-container { position: fixed; right: 16px; bottom: calc(var(--bottom-nav-height, 72px) + 16px); display: flex; flex-direction: column; gap: 10px; z-index: 1200; max-width: 320px; } .operator-notification { position: relative; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px 12px 12px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 6px; } .operator-notification-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600; } .operator-notification-message { font-size: 13px; color: var(--text-primary); } .operator-notification-actions { display: flex; gap: 8px; justify-content: flex-end; } .operator-btn { border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); padding: 6px 10px; font-size: 12px; cursor: pointer; } .operator-btn.ghost { background: transparent; color: var(--text-sub); } .operator-btn.primary { border: none; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; font-weight: 600; } .operator-dismiss { position: absolute; top: 6px; right: 6px; background: transparent; border: none; color: var(--text-sub); font-size: 16px; cursor: pointer; } .operator-question { border-color: rgba(59, 130, 246, 0.4); } .operator-success { border-color: rgba(34, 197, 94, 0.4); } .operator-error { border-color: rgba(239, 68, 68, 0.4); } /* Right Side Dropdown Menu */ .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .menu-overlay.active { opacity: 1; pointer-events: auto; } .menu-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--bg-elevated); border-left: 1px solid var(--border-default); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; padding: 24px; gap: 24px; } .menu-overlay.active .menu-panel { transform: translateX(0); } .menu-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); } #menu-close-btn:hover { background: var(--bg-hover); } .menu-section { display: flex; flex-direction: column; gap: 4px; } .menu-section-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 12px; margin-bottom: 8px; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: none; background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 8px; transition: var(--transition-base); text-align: left; width: 100%; } .menu-item:hover { background: var(--bg-hover); color: var(--accent); } .menu-item svg { opacity: 0.7; transition: opacity 0.2s ease; } .menu-item:hover svg { opacity: 1; } .menu-item.active { background: rgba(249, 115, 22, 0.1); color: var(--accent); font-weight: 600; } #menu-toggle-btn:hover { background: var(--bg-hover); border-color: var(--border-default); } @media (max-width: 768px) { .menu-panel { width: 100%; max-width: 100%; padding: 20px; } } /* Print styles */ @media print { body { background: white; } .app { box-shadow: none; border: 1px solid #ddd; } header .nav-tabs, .card button, #tour-overlay, .modal-overlay { display: none !important; } } /* Toast Notification System */ #toast-container { position: fixed; top: 20px; right: 20px; z-index: 999999; display: flex; flex-direction: column; gap: 12px; pointer-events: none; max-width: calc(100vw - 40px); } .toast { background: var(--card-bg, rgba(15, 23, 42, 0.95)); border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.15)); border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; min-width: 280px; max-width: 420px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border-subtle, rgba(148, 163, 184, 0.15)); backdrop-filter: blur(20px); transform: translateX(450px) scale(0.95); opacity: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: auto; position: relative; overflow: hidden; cursor: pointer; color: var(--text-primary, #f9fafb); } .toast::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: 0.6; transform: translateX(-100%); transition: transform 0.6s ease; } .toast-show::before { transform: translateX(100%); } .toast-show { transform: translateX(0) scale(1); opacity: 1; } .toast-icon { font-size: 18px; line-height: 1; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; position: relative; transition: transform 0.2s ease; } .toast:hover .toast-icon { transform: scale(1.1); } .toast-message { font-size: 14px; color: var(--text-main, var(--text-primary, #f9fafb)); font-weight: 500; line-height: 1.5; flex: 1; } .toast-close { background: transparent; border: none; color: var(--text-tertiary, rgba(148, 163, 184, 0.8)); font-size: 24px; line-height: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; transition: all 0.2s ease; flex-shrink: 0; padding: 0; margin-left: 8px; } .toast-close:hover { color: var(--text-primary, #f9fafb); background: rgba(148, 163, 184, 0.1); } /* Info Toast */ .toast-info { border-left: 4px solid #3b82f6; background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.05) 100%); } .toast-info .toast-icon { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.3)); color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .toast-info::before { color: #3b82f6; } /* Success Toast */ .toast-success { border-left: 4px solid #22c55e; background: linear-gradient(135deg, var(--card-bg) 0%, rgba(34, 197, 94, 0.05) 100%); } .toast-success .toast-icon { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3)); color: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.1); } .toast-success::before { color: #22c55e; } /* Error Toast */ .toast-error { border-left: 4px solid #ef4444; background: linear-gradient(135deg, var(--card-bg) 0%, rgba(239, 68, 68, 0.05) 100%); } .toast-error .toast-icon { background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.3)); color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1); } .toast-error::before { color: #ef4444; } /* Warning Toast (if used) */ .toast-warning { border-left: 4px solid #f59e0b; background: linear-gradient(135deg, var(--card-bg) 0%, rgba(245, 158, 11, 0.05) 100%); } .toast-warning .toast-icon { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.3)); color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1); } .toast-warning::before { color: #f59e0b; } /* Mobile Responsive */ @media (max-width: 768px) { #toast-container { right: 12px; left: 12px; top: 12px; max-width: calc(100vw - 24px); } .toast { min-width: auto; max-width: 100%; padding: 14px 16px; gap: 12px; transform: translateX(100%) scale(0.95); } .toast-show { transform: translateX(0) scale(1); } .toast-icon { width: 28px; height: 28px; font-size: 16px; } .toast-message { font-size: 13px; } } /* Theme-specific toast enhancements for light themes */ [data-theme="solar"] .toast, [data-theme="mono"] .toast { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--border-subtle, rgba(0, 0, 0, 0.15)); border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.15)); } /* ======================================== DONATION MODAL ======================================== */ #donation-modal { animation: donationFadeIn 0.2s ease-out; } #donation-modal-content { animation: donationScaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #donation-modal.closing #donation-modal-content { animation: donationScaleOut 0.2s cubic-bezier(0.4, 0, 0.2, 1); } #donation-modal.closing { animation: donationFadeOut 0.2s ease-out; } @keyframes donationFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes donationFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes donationScaleIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes donationScaleOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(10px); } } .donation-tier-btn:hover { transform: translateY(-2px); border-color: var(--accent-primary); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1)); } #donation-modal-close:hover { color: var(--text-primary); transform: scale(1.1); } @media (max-width: 768px) { #donation-modal-content { padding: 32px 24px; } } /* ======================================== MOBILE-FIRST LAYOUT SHELL + BOTTOM NAV ======================================== */ .bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px); height: var(--bottom-nav-height); box-sizing: border-box; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(18px); border-top: 1px solid var(--border-subtle); z-index: 10000; gap: 6px; } .bottom-nav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border: none; background: transparent; color: var(--text-tertiary); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; transition: color 0.2s ease, transform 0.12s ease; position: relative; } .bottom-nav-link svg { opacity: 0.9; } .bottom-nav-link.active { color: var(--accent-primary); } .bottom-nav-link.compass-active { color: #60a5fa; } .bottom-nav-link:active { transform: translateY(1px) scale(0.98); } .bottom-nav-link .nav-badge { position: absolute; top: 6px; right: 18px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--accent-primary); color: #0b0f1a; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(2, 6, 23, 0.8); } @media (max-width: 900px) { body { padding: 0; } .app { max-width: 100%; border-radius: 0; padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); box-shadow: none; } header { padding-top: calc(var(--space-4) + env(safe-area-inset-top)); } .grid-main { grid-template-columns: 1fr; } .bottom-nav { display: flex; } .menu-panel { width: 100%; max-width: 100%; left: 0; right: 0; top: auto; bottom: 0; height: auto; max-height: 85vh; border-radius: 16px 16px 0 0; transform: translateY(100%); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .menu-overlay.active .menu-panel { transform: translateY(0); } .menu-item { min-height: 44px; } .card.card-collapsed > :not(.card-header) { display: none; } .card.card-collapsed .card-header { margin-bottom: 0; } .expand-btn { min-width: 44px; min-height: 44px; } #run-top-bar { position: fixed; top: auto !important; bottom: calc(72px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0 !important; border-radius: 14px 14px 0 0; } .focus-modal { padding: 0; } .focus-content { width: 100%; height: 100%; max-height: none; border-radius: 0; } } @media (max-width: 480px) { .bottom-nav { padding-left: 8px; padding-right: 8px; } #big3Panel.big3-collapsed .big3-item[data-index="2"] { display: none; } .big3-mobile-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; } .big3-mobile-actions .pill-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(15, 23, 42, 0.6); color: var(--text-primary); font-size: 13px; font-weight: 600; min-height: 44px; } .big3-mobile-actions .primary-cta { flex: 1; padding: 10px 16px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--accent-primary), #ea580c); color: #fff; font-size: 14px; font-weight: 700; min-height: 44px; } }