:root{--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-card:#111827b3;--bg-card-hover:#192238cc;--bg-glass:#ffffff08;--bg-glass-border:#ffffff14;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-accent:#67e8f9;--accent-teal:#14b8a6;--accent-teal-light:#67e8f9;--accent-purple:#a78bfa;--accent-purple-light:#c4b5fd;--accent-pink:#f472b6;--accent-orange:#fb923c;--accent-red:#ef4444;--accent-green:#34d399;--accent-blue:#60a5fa;--accent-yellow:#fbbf24;--gradient-teal:linear-gradient(135deg, #0d9488 0%, #06b6d4 100%);--gradient-purple:linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);--gradient-warm:linear-gradient(135deg, #f97316 0%, #fbbf24 100%);--gradient-pink:linear-gradient(135deg, #ec4899 0%, #f472b6 100%);--gradient-health:linear-gradient(135deg, #0d9488 0%, #7c3aed 50%, #ec4899 100%);--shadow-sm:0 1px 3px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow-teal:0 0 20px #14b8a626;--shadow-glow-purple:0 0 20px #a78bfa26;--font-family:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-xs:.7rem;--font-sm:.8rem;--font-base:.9rem;--font-lg:1.1rem;--font-xl:1.35rem;--font-2xl:1.75rem;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:20px;--radius-round:50%;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20% 20%,#14b8a60f 0%,#0000 50%),radial-gradient(at 80% 80%,#a78bfa0f 0%,#0000 50%),radial-gradient(#ec489908 0%,#0000 60%);position:fixed;inset:0}#app{z-index:1;min-height:100vh;position:relative}#app-header{padding:var(--space-md) var(--space-lg);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--bg-glass-border);z-index:100;background:#0a0e1ad9;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:var(--space-sm);display:flex}.header-icon{filter:drop-shadow(0 0 8px #14b8a666);font-size:1.4rem}.header-left h1{font-size:var(--font-xl);background:var(--gradient-health);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-weight:600}.header-center,.header-right{align-items:center;gap:var(--space-sm);display:flex}.btn-icon{border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);background:var(--bg-glass);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.btn-icon:hover{color:var(--text-primary);border-color:var(--accent-teal);box-shadow:var(--shadow-glow-teal);background:#ffffff14}.btn-icon.spinning svg{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.btn-pill{border:1px solid var(--bg-glass-border);background:var(--bg-glass);color:var(--text-secondary);cursor:pointer;font-size:var(--font-sm);font-family:var(--font-family);transition:all var(--transition-fast);white-space:nowrap;border-radius:20px;padding:6px 14px}.btn-pill:hover{color:var(--text-primary);background:#ffffff14}.btn-pill.active{background:var(--gradient-teal);color:#fff;box-shadow:var(--shadow-glow-teal);border-color:#0000}#dashboard{padding:var(--space-lg);gap:var(--space-lg);flex-direction:column;max-width:1440px;margin:0 auto;display:flex}.dashboard-row{gap:var(--space-md);padding-bottom:var(--space-xs);scrollbar-width:thin;scrollbar-color:var(--bg-glass-border) transparent;display:flex;overflow-x:auto}.dashboard-grid{gap:var(--space-lg);grid-template-columns:1fr 1fr;display:grid}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-glass-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}.insight-card{min-width:220px;max-width:280px;padding:var(--space-md);background:var(--bg-card);border:1px solid var(--bg-glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-base);cursor:default;flex:none;position:relative;overflow:hidden}.insight-card:before{content:"";border-radius:var(--radius-lg) var(--radius-lg) 0 0;height:3px;position:absolute;top:0;left:0;right:0}.insight-card--positive:before{background:var(--gradient-teal)}.insight-card--negative:before{background:var(--gradient-pink)}.insight-card--neutral:before{background:var(--gradient-purple)}.insight-card--warning:before{background:var(--gradient-warm)}.insight-card:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.insight-card__icon{margin-bottom:var(--space-sm);font-size:1.5rem}.insight-card__title{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--space-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.insight-card__value{font-size:var(--font-xl);margin-bottom:var(--space-xs);font-weight:700}.insight-card__value--teal{color:var(--accent-teal-light)}.insight-card__value--purple{color:var(--accent-purple-light)}.insight-card__value--pink{color:var(--accent-pink)}.insight-card__value--orange{color:var(--accent-orange)}.insight-card__detail{font-size:var(--font-xs);color:var(--text-muted);line-height:1.4}.chart-card{background:var(--bg-card);border:1px solid var(--bg-glass-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--transition-base);flex-direction:column;display:flex;overflow:hidden}.chart-card:hover{box-shadow:var(--shadow-md);border-color:#ffffff1f}.chart-card--wide{grid-column:1/-1}.chart-card__header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--bg-glass-border);justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.chart-card__title{font-size:var(--font-base);color:var(--text-primary);font-weight:600}.chart-card__controls{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.chart-card__body{padding:var(--space-md);flex:1;min-height:300px;position:relative}.chart-card__body canvas{max-height:400px;width:100%!important}.date-range{align-items:center;gap:var(--space-xs);background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:24px;padding:3px;display:flex}.date-range .btn-pill{border:none;border-radius:20px;padding:5px 12px}.metric-selector{align-items:center;gap:var(--space-xs);display:flex}.metric-selector__label{font-size:var(--font-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:500}.metric-select{border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);background:var(--bg-glass);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-sm);cursor:pointer;transition:border-color var(--transition-fast);max-width:180px;padding:5px 10px}.metric-select:hover{border-color:var(--accent-teal)}.metric-select:focus{border-color:var(--accent-teal);box-shadow:var(--shadow-glow-teal);outline:none}.metric-select option{background:var(--bg-secondary);color:var(--text-primary)}#correlation-canvas{cursor:pointer}.correlation-tooltip{background:var(--bg-secondary);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-sm);color:var(--text-primary);pointer-events:none;z-index:50;box-shadow:var(--shadow-lg);white-space:nowrap;position:absolute}#skin-timeline{gap:var(--space-md);padding:var(--space-md) 0;scrollbar-width:thin;scrollbar-color:var(--bg-glass-border) transparent;display:flex;overflow-x:auto}.skin-photo{cursor:pointer;width:80px;transition:transform var(--transition-fast);flex:none;position:relative}.skin-photo:hover{transform:scale(1.08)}.skin-photo__img{border-radius:var(--radius-md);object-fit:cover;border:2px solid var(--bg-glass-border);width:80px;height:80px;transition:border-color var(--transition-fast)}.skin-photo:hover .skin-photo__img{border-color:var(--accent-teal)}.skin-photo__badge{border-radius:var(--radius-round);width:22px;height:22px;font-size:var(--font-xs);color:#fff;border:2px solid var(--bg-primary);justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.skin-photo__badge--1{background:var(--accent-green)}.skin-photo__badge--2{background:var(--accent-teal)}.skin-photo__badge--3{background:var(--accent-yellow)}.skin-photo__badge--4{background:var(--accent-orange)}.skin-photo__badge--5{background:var(--accent-red)}.skin-photo__date{font-size:var(--font-xs);color:var(--text-muted);text-align:center;margin-top:var(--space-xs)}.lightbox{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;justify-content:center;align-items:center;gap:var(--space-md);opacity:0;background:#000000d9;flex-direction:column;animation:.2s forwards fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{to{opacity:1}}.lightbox__img{border-radius:var(--radius-lg);object-fit:contain;max-width:90vw;max-height:70vh;box-shadow:var(--shadow-lg)}.lightbox__info{color:var(--text-secondary);font-size:var(--font-sm);text-align:center;max-width:500px;padding:0 var(--space-lg)}.lightbox__close{top:var(--space-lg);right:var(--space-lg);color:#fff;border-radius:var(--radius-round);cursor:pointer;width:40px;height:40px;transition:background var(--transition-fast);background:#ffffff1a;border:none;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute}.lightbox__close:hover{background:#fff3}.loading-overlay{height:200px;color:var(--text-muted);font-size:var(--font-sm);justify-content:center;align-items:center;display:flex}.loading-spinner{border:3px solid var(--bg-glass-border);border-top-color:var(--accent-teal);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.empty-state{height:200px;color:var(--text-muted);justify-content:center;align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.empty-state__icon{opacity:.5;font-size:2rem}.empty-state__text{font-size:var(--font-sm)}@media (width<=900px){.dashboard-grid{grid-template-columns:1fr}.chart-card--wide{grid-column:1}#app-header{gap:var(--space-sm);flex-wrap:wrap}.header-center{order:3;justify-content:center;width:100%}#dashboard{padding:var(--space-md)}}@media (width<=600px){.insight-card{min-width:180px}.chart-card__body{min-height:250px}.chart-card__header{padding:var(--space-sm) var(--space-md)}}