:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --nav-height: 85px; --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', monospace; --bg-main: #000000; --bg-card: #0a0a0a; --bg-nav: rgba(5, 5, 5, 0.85); --text-main: #ffffff; --text-muted: #666666; --border-color: #1a1a1a; --accent: #ffffff; --accent-invert: #000000;
} [data-theme="light"] { --bg-main: #f5f5f7; --bg-card: #ffffff; --bg-nav: rgba(255, 255, 255, 0.9); --text-main: #000000; --text-muted: #8e8e93; --border-color: #e5e5ea; --accent: #000000; --accent-invert: #ffffff;
} html, body { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden !important; width: 100vw !important; height: 100dvh !important; overscroll-behavior: none !important; margin: 0; padding: 0; font-family: var(--font-ios); background-color: var(--bg-main); color: var(--text-main); -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; transition: background-color 0.3s, color 0.3s;
} p, h1, h2, h3, span, div { word-break: break-word; overflow-wrap: break-word; } video::-webkit-media-controls { display: none !important; }
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } #desktop-landing { display: none; }
#app-container { display: block; height: 100dvh; width: 100vw; position: relative; overflow: hidden; } @media (min-width: 768px) { #desktop-landing { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh; text-align: center; padding: 40px; } #app-container { display: none !important; } body { background-color: #000; color: #fff; } } .view { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100% !important; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; background-color: var(--bg-main); padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + 60px) !important;
}
.view.active { display: block; animation: fadeIn 0.2s ease-out; }
#view-home { background-color: #000; overflow: hidden !important; padding-bottom: 0 !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .camera-container { position: absolute; top: 0; left: 0; right: 0; bottom: calc(var(--nav-height) + var(--safe-bottom)); background: #000; overflow: hidden; border-radius: 0 0 24px 24px;
}
#camera-feed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #analysis-loader { z-index: 35 !important; }
#frozen-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 40 !important; }
#scan-laser { z-index: 41 !important; } #screen-flash { position: absolute; inset: 0; pointer-events: none; z-index: 15; border: 0px solid white; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: inset 0 0 0 rgba(255,255,255,0);
}
#screen-flash.active { border-width: 20px; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 80px rgba(255,255,255,0.9); } .scan-laser { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #fff; box-shadow: 0 0 20px 5px rgba(255,255,255,0.8); opacity: 0;
}
.scan-laser.active { opacity: 1; animation: scan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes scan { 0% { top: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .camera-controls { position: absolute; bottom: 30px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 30;
}
.shutter-btn { width: 76px; height: 76px; border-radius: 50%; background: transparent; border: 3px solid #fff; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.shutter-btn-inner { width: 100%; height: 100%; background: #fff; border-radius: 50%; transition: 0.3s ease; }
.shutter-btn:disabled { border-color: #333; cursor: not-allowed; transform: scale(0.95); }
.shutter-btn:disabled .shutter-btn-inner { background: #222; }
.shutter-btn:active:not(:disabled) { transform: scale(0.85); } .header-pt { padding-top: calc(var(--safe-top) + 24px); }
.font-mono { font-family: var(--font-mono); } .ios-card { background: var(--bg-card); border-radius: 20px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border-color); }
.ios-list-item { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border-color); }
.ios-list-item:last-child { border-bottom: none; } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + var(--safe-bottom)); background: var(--bg-nav); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; padding-bottom: var(--safe-bottom); z-index: 50; transition: background 0.3s;
}
body.on-home .bottom-nav { background: rgba(0, 0, 0, 0.95); border-top: 1px solid rgba(255,255,255,0.05); }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 10px; font-weight: 600; width: 20%; cursor: pointer; transition: color 0.2s;
}
.nav-item.active { color: var(--accent); }
body.on-home .nav-item { color: #444; }
body.on-home .nav-item.active { color: #fff; }
.nav-item svg { margin-bottom: 5px; stroke-width: 2px; }
.slide.active { margin-bottom:100px;
} .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.9); backdrop-filter: blur(15px); display: flex; align-items: flex-end; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content { background: var(--bg-card); color: var(--text-main); width: 100%; border-radius: 32px 32px 0 0; padding: 24px; padding-bottom: calc(40px + var(--safe-bottom)); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-height: 95dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--border-color);
}
.modal-overlay.active .modal-content { transform: translateY(0); } .hidden-forced { display: none !important; }
.milestone-hidden { display: none !important; } .progress-track { background: var(--border-color); border-radius: 10px; height: 6px; overflow: hidden; width: 100%; }
.progress-fill { background: var(--accent); height: 100%; border-radius: 10px; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } #init-screen { position: absolute; inset: 0; background: #000; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }
.loader-ring { width: 30px; height: 30px; border: 2px solid #222; border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } .data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.data-badge { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.data-badge .val { font-family: var(--font-mono); font-size: 24px; font-weight: 700; margin-bottom: 4px; line-height: 1; }
.data-badge .title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-main); margin-bottom: 4px;}
.data-badge .desc { font-size: 10px; color: var(--text-muted); line-height: 1.3;} .custom-dialog-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.custom-dialog-overlay.active { opacity: 1; pointer-events: auto; }
.custom-dialog-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; width: 85%; max-width: 320px; text-align: center; overflow: hidden; transform: scale(0.95); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.custom-dialog-overlay.active .custom-dialog-box { transform: scale(1); }
.custom-dialog-content { padding: 24px 20px; }
.custom-dialog-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; color: var(--text-main); }
.custom-dialog-text { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.custom-dialog-buttons { display: flex; border-top: 1px solid var(--border-color); }
.custom-dialog-btn { flex: 1; padding: 16px; background: transparent; border: none; color: var(--text-main); font-weight: 600; font-size: 15px; cursor: pointer; transition: background 0.2s;}
.custom-dialog-btn.cancel { color: #ef4444; border-right: 1px solid var(--border-color); font-weight: 400;} #survey-modal { display: none; } #survey-modal.active { display: flex; } .slide { display: none; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0 0 calc(env(safe-area-inset-bottom) + 40px) 0; } .slide.active { display: flex; animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .survey-input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; border-radius: 18px; padding: 18px 22px; font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; } .survey-input:focus { border-color: rgba(255,255,255,0.4); } .survey-input option { background: #111; } .survey-btn { width: 100%; background: #fff; color: #000; border: none; border-radius: 18px; padding: 18px; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; transition: opacity 0.15s, transform 0.1s; margin-top: 16px; } .survey-btn:active { transform: scale(0.97); opacity: 0.8; } .survey-chip { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 16px 20px; cursor: pointer; transition: all 0.2s; font-size: 14px; font-weight: 500; text-align: center; } .survey-chip.selected { background: #fff; color: #000; border-color: #fff; } .survey-chip:active { transform: scale(0.96); } .dot-indicator { display: flex; gap: 6px; } .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: all 0.3s; } .dot.active { background: #fff; width: 20px; border-radius: 3px; } #init-screen { position: absolute; inset: 0; background: #000; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; } .init-logo { font-family: 'JetBrains Mono', monospace; font-size: 48px; font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; animation: logoPulse 2s ease-in-out infinite; } @keyframes logoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .init-ring { width: 1px; height: 1px; border-radius: 50%; background: transparent; box-shadow: 0 0 0 0px rgba(255,255,255,0.3); animation: sonarRing 2s ease-out infinite; } @keyframes sonarRing { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6), 0 0 0 0 rgba(255,255,255,0.3); } 100% { box-shadow: 0 0 0 80px rgba(255,255,255,0), 0 0 0 160px rgba(255,255,255,0); } } .init-sub { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-top: 60px; } .init-status { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.2); margin-top: 8px; } #desktop-landing { display: none; } @media (min-width: 768px) { #desktop-landing { display: flex; } #app-container { display: none !important; } } .phone-mockup { width: 375px; height: 780px; border-radius: 50px; border: 2px solid rgba(255,255,255,0.15); background: #0a0a0a; overflow: hidden; position: relative; box-shadow: 0 60px 120px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05); } .phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 10; } .phone-screen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 30px 40px; } #blur-indicator { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 6px 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 25; } #blur-indicator.visible { opacity: 1; } .intake-ring { position: relative; display: inline-flex; } .intake-ring svg { transform: rotate(-90deg); } .intake-ring .ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } #share-preview-modal .modal-content { padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .suggestion-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; } [data-theme="light"] .suggestion-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); } .suggestion-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; shrink: 0; flex-shrink: 0; } [data-theme="light"] .suggestion-icon { background: rgba(0,0,0,0.06); } .suggestion-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; } .suggestion-body { font-size: 11px; color: var(--text-muted); line-height: 1.5; }