/* Loftin Method — App Styles * Extracted from app.html for independent caching and seasonal theme support. * To create a seasonal theme: duplicate this file, swap colors in :root, load the new file. */ *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} :root{ /* Foundation — deep navy */ --bg:#0D1B2A; --s1:#162334; --s2:#1E2F42; --s3:#283D52; /* Primary CTAs */ --cream-bg:#00D4FF; --cream-text:#0D1B2A; --cream-border:rgba(103,232,249,.6); /* Cyan accent */ --gold:#00D4FF; --gold-light:#67E8F9; --gold-dim:rgba(103,232,249,.2); --gold-line:rgba(103,232,249,.18); --gold-glow:rgba(103,232,249,.06); /* Text */ --t1:#E0F2FE; --t2:#7DB8CC; --t3:#2D4A5E; /* Legacy aliases */ --sun:#67E8F9;--warm:#00D4FF;--earth:#0A3050;--cream:#0D1B2A; --green:#34D399;--text:#E0F2FE;--muted:#7DB8CC;--white:#E0F2FE; --card:#091520;--border:rgba(103,232,249,.18);--red:#F87171;--blue:#38BDF8; --shadow:0 16px 48px rgba(0,0,0,.7); --bronze:#00D4FF;--charcoal:#060F1A;--surface:#0D1B2A; --amber:#00D4FF;--leather:#091520;--leather-light:#0D1B2A; --warm-glow:rgba(103,232,249,.06);--candle:rgba(103,232,249,.04); /* Typography */ --font-display:'Playfair Display',Georgia,serif; --font-body:'DM Sans','Segoe UI',system-ui,sans-serif; } body{font-family:var(--font-body);background:var(--bg);color:var(--t1);min-height:100vh;letter-spacing:-.005em;padding-top:env(safe-area-inset-top)}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 15% 50%,rgba(0,212,255,.04) 0%,transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(103,232,249,.04) 0%,transparent 50%)}body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0} body>*{position:relative;z-index:1} #welcome-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(160deg,var(--bg) 0%,var(--s1) 50%,var(--bg) 100%);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px} .welcome-card{background:var(--s1);border:1px solid var(--gold-line);border-top:1px solid rgba(103,232,249,.32);border-radius:20px;padding:48px 36px;max-width:400px;width:100%;text-align:center;box-shadow:0 40px 80px rgba(0,0,0,.8)} .welcome-logo{font-size:1.6rem;font-weight:600;color:var(--gold-light);margin-bottom:4px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body)}.welcome-logo span{color:var(--t2)} .welcome-tagline{font-size:.88rem;color:var(--muted);margin-bottom:32px;line-height:1.5} .welcome-q{font-size:1.2rem;font-weight:700;color:var(--t1);margin-bottom:6px} .welcome-sub{font-size:.85rem;color:var(--muted);margin-bottom:20px} .welcome-input{width:100%;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:1.1rem;text-align:center;outline:none;transition:border .2s;background:rgba(255,255,255,.06);color:var(--text)} .welcome-input:focus{border-color:rgba(103,232,249,.55)} .welcome-btn{width:100%;padding:14px;background:var(--s3);color:var(--gold-light);border:1px solid var(--gold-line);border-top:1px solid rgba(103,232,249,.35);border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;margin-top:14px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body)} .welcome-footer{font-size:.75rem;color:var(--muted);margin-top:20px;line-height:1.6} nav{background:rgba(13,27,42,.97);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(103,232,249,.18),0 8px 40px rgba(0,0,0,.7);backdrop-filter:blur(24px);border-bottom:1px solid rgba(103,232,249,.12)} .logo{color:var(--gold-light);font-size:1.05rem;font-weight:700;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body)}.logo span{color:var(--t1)} .nav-links{display:flex;gap:4px;flex-wrap:wrap} .nav-links a{color:var(--t2);text-decoration:none;font-size:.72rem;padding:5px 10px;border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:.04em;text-transform:uppercase;font-weight:500} .nav-links a:hover,.nav-links a.active{color:var(--t1);background:rgba(255,255,255,.08)} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none} .hamburger span{display:block;width:22px;height:2px;background:#9A9088;border-radius:2px;transition:all .3s} .mobile-menu{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:200} .mobile-menu-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6)} .mobile-menu-panel{position:absolute;top:0;right:0;width:75%;max-width:280px;height:100%;background:var(--s1);border-left:1px solid var(--gold-line);padding:24px 20px;display:flex;flex-direction:column;gap:4px;overflow-y:auto} .mobile-menu-panel .logo{margin-bottom:16px;font-size:1.5rem} .mobile-menu-panel a{color:var(--t2);text-decoration:none;font-size:1rem;padding:12px 16px;border-radius:10px;cursor:pointer;transition:all .2s;display:block} .mobile-menu-panel a:hover,.mobile-menu-panel a.active{color:var(--t1);background:rgba(255,255,255,.08)} .mobile-menu-close{position:absolute;top:16px;left:16px;background:none;border:none;color:var(--t2);font-size:1.4rem;cursor:pointer;padding:4px} @media(max-width:640px){.nav-links{display:none}.hamburger{display:flex}} .page{display:none;animation:none} .page.active{display:block;animation:pageFadeIn .25s ease} @keyframes pageFadeIn{from{opacity:0}to{opacity:1}} @keyframes pulse-warm{0%,100%{box-shadow:0 4px 15px rgba(103,232,249,.2)}50%{box-shadow:0 8px 28px rgba(103,232,249,.4)}} .pulse-cta{animation:pulse-warm 2.5s ease-in-out infinite} .wrap{max-width:780px;margin:0 auto;padding:28px 20px;position:relative} .card{background:linear-gradient(170deg,var(--s2),var(--s1));border-radius:14px;padding:22px 24px;box-shadow:0 2px 0 rgba(103,232,249,.06),0 16px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(103,232,249,.1);border:1px solid rgba(103,232,249,.16);border-top:1px solid rgba(103,232,249,.32);margin-bottom:16px} h2{font-size:.7rem;color:var(--gold);margin-bottom:20px;font-weight:600;font-family:var(--font-body);letter-spacing:.14em;text-transform:uppercase} h3{font-size:.68rem;color:var(--gold);font-weight:600;margin-bottom:10px;font-family:var(--font-body);letter-spacing:.12em;text-transform:uppercase} label{display:block;font-size:.65rem;font-weight:600;color:var(--t2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-body)} select,input[type=number],input[type=time],input[type=date],input[type=text]{width:100%;padding:12px 14px;border:1px solid rgba(103,232,249,.2);border-radius:8px;font-size:.9rem;background:var(--s2);color:var(--t1);outline:none;transition:all .2s;font-family:var(--font-body)} input[type=time]{-webkit-appearance:none;appearance:none;text-align:center;padding:8px 12px;min-height:unset;height:auto;line-height:normal} select:focus,input:focus{border-color:rgba(103,232,249,.45);box-shadow:0 0 0 3px rgba(103,232,249,.08)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px} @media(max-width:520px){.form-grid{grid-template-columns:1fr}} .tog-row{display:flex;gap:8px;flex-wrap:wrap} .tog{flex:1;min-width:80px;padding:10px 8px;border:1px solid var(--gold-line);border-radius:8px;background:transparent;color:var(--t2);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body)} .tog.active{background:linear-gradient(150deg,rgba(103,232,249,.16),rgba(103,232,249,.08));border-color:rgba(103,232,249,.65);border-top-color:rgba(220,185,90,.75);color:#F0E4C4;font-weight:700;box-shadow:inset 0 1px 0 rgba(103,232,249,.2),inset 0 -1px 0 rgba(0,0,0,.2),0 3px 12px rgba(0,0,0,.35)} /* .ptog styles removed — protein selection removed from builder */ .btn{width:100%;padding:14px;background:var(--cream-bg);color:var(--cream-text);border:1px solid var(--cream-border);border-radius:10px;font-size:.75rem;font-weight:700;cursor:pointer;margin-top:14px;transition:all .2s;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body)} .btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(103,232,249,.3)} .btn-sm{padding:9px 18px;font-size:.85rem;border-radius:8px;border:none;background:var(--gold);color:var(--bg);cursor:pointer;font-weight:600} .btn-outline{padding:9px 18px;font-size:.85rem;border-radius:8px;border:1px solid rgba(103,232,249,.4);background:transparent;color:var(--gold);cursor:pointer;font-weight:600} .coach-note{background:rgba(103,232,249,.03);border:none;border-left:1px solid rgba(103,232,249,.22);padding:10px 14px;font-size:.79rem;color:var(--t2);line-height:1.75;margin-top:12px;font-style:italic;letter-spacing:.01em;border-radius:0 6px 6px 0} .coach-note strong{color:var(--gold)} .speed-grid,.incline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px} .sel-btn{padding:9px 6px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);color:var(--muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center} .sel-btn.active{background:linear-gradient(135deg,#0077A8,#00D4FF);border-color:var(--gold);color:var(--t1)} .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px} .stat{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;text-align:center;border:1px solid rgba(255,255,255,.07)} .stat .val{font-size:1.3rem;font-weight:800;color:var(--gold)} .stat .lbl{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;margin-top:2px} .stat.hl .val{color:var(--green)} .phase-banner{border-radius:10px;padding:16px 20px;margin-bottom:16px;font-size:.82rem;line-height:1.6;border:1px solid rgba(103,232,249,.17);border-top:1px solid rgba(103,232,249,.34);background:linear-gradient(170deg,var(--s2),var(--s1));box-shadow:0 2px 0 rgba(103,232,249,.05),0 10px 28px rgba(0,0,0,.45)} .phase-banner.aggressive{background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.25);color:#E8A090} .phase-banner.steady{background:rgba(74,144,184,.12);border:1px solid rgba(74,144,184,.25);color:var(--blue)} .phase-banner.maintenance{background:rgba(74,140,96,.12);border:1px solid rgba(74,140,96,.25);color:var(--gold-light)} .phase-banner.diamond{background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #6a4aac;color:var(--t1)} .phase-banner.diamond strong{color:var(--t2)} .phase-banner strong{display:block;font-size:.95rem;margin-bottom:3px} .prog-wrap{margin:12px 0 14px} .prog-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:5px} .prog-bar{background:rgba(103,232,249,.1);border-radius:1px;height:1px;overflow:hidden;margin-top:10px} .prog-fill{background:linear-gradient(90deg,var(--gold),var(--gold-light));height:100%;border-radius:2px;transition:width .6s ease} .day-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none} .day-tabs::-webkit-scrollbar{display:none} .day-tab{padding:6px 14px;border-radius:20px;border:1px solid rgba(103,232,249,.1);background:transparent;color:rgba(140,125,95,.55);font-size:.62rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .25s cubic-bezier(.25,.46,.45,.94);letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body)} .day-tab.active{background:linear-gradient(150deg,var(--s3),var(--s2));border-color:rgba(103,232,249,.6);border-top-color:rgba(103,232,249,.7);color:var(--gold-light);box-shadow:0 3px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(103,232,249,.18),inset 0 -1px 0 rgba(0,0,0,.3)} .day-tab.today{border-color:rgba(74,140,96,.5);font-weight:800} .day-tab.weekend{border-color:rgba(103,232,249,.15)} .meal-card{background:linear-gradient(175deg,var(--s2) 0%,var(--s1) 100%);border-radius:12px;margin-bottom:10px;border:1px solid rgba(103,232,249,.18);border-left:2px solid rgba(103,232,249,.65);border-top:1px solid rgba(103,232,249,.28);overflow:hidden;box-shadow:0 2px 0 rgba(103,232,249,.04),0 10px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(103,232,249,.09)} .meal-card.alt{border-left-color:rgba(103,232,249,.95);border-left-width:3px;background:linear-gradient(175deg,var(--s3) 0%,var(--s2) 100%);box-shadow:0 2px 0 rgba(103,232,249,.08),0 12px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(103,232,249,.15),0 0 0 1px rgba(103,232,249,.08)} .meal-card.dessert{border-left-color:rgba(103,232,249,.4);border-left-width:2px} .meal-card.custom{border-left-color:var(--gold)} .meal-header{padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center} .meal-header:hover{background:rgba(255,255,255,.03)} .meal-title{font-weight:700;font-size:1.08rem;color:var(--t1);font-family:var(--font-display);letter-spacing:-.015em} .meal-subtitle{font-size:.65rem;color:var(--t2);margin-top:5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;font-family:var(--font-body)} .meal-cal{font-size:.98rem;font-weight:700;color:var(--gold-light);letter-spacing:-.015em;font-family:var(--font-display)} .meal-expand{font-size:.65rem;color:rgba(103,232,249,.5);margin-left:4px;transition:transform .2s} .meal-body{padding:6px 20px 20px;display:none;border-top:1px solid rgba(103,232,249,.12);background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.08))} .meal-body.open{display:block} .meal-body p,.meal-body ul,.meal-body ol{font-size:.84rem;color:var(--muted);line-height:1.6;margin-top:9px} .meal-body ul,.meal-body ol{padding-left:16px} .meal-body li{margin-bottom:0;font-size:.84rem;color:var(--t1);padding:8px 0;border-bottom:1px solid rgba(103,232,249,.08);list-style:none;letter-spacing:.01em} .badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:700;margin-left:5px} .badge.work{background:rgba(74,144,184,.15);color:var(--blue)} .badge.home{background:rgba(74,140,96,.15);color:var(--green)} .badge.custom{background:rgba(103,232,249,.12);color:var(--gold);border:1px solid rgba(103,232,249,.25)} .badge.custom{background:rgba(103,232,249,.15);color:var(--gold)} .wknd-banner{background:transparent;border:none;border-left:2px solid var(--gold-dim);border-radius:0;padding:8px 14px;margin-bottom:12px;font-size:.78rem;color:var(--t2);line-height:1.5;letter-spacing:.02em} .search-row{display:flex;gap:10px;margin-bottom:14px} .search-row input{flex:1} .food-card{background:linear-gradient(160deg,#2E3138,#292C32);border-radius:12px;padding:15px;margin-bottom:10px;border:1px solid rgba(255,255,255,.07);position:relative;box-shadow:0 4px 16px rgba(0,0,0,.2)} .food-card.best{border-color:rgba(74,140,96,.4)} .food-card.recommended{border-color:rgba(103,232,249,.4)} .best-badge{position:absolute;top:-8px;right:12px;font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:20px;color:var(--t1)} .best-badge.top{background:linear-gradient(135deg,#3A6B48,#4A8C60)} .best-badge.today{background:linear-gradient(135deg,#0077A8,#00D4FF)} .food-name{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:3px} .food-desc{font-size:.78rem;color:var(--muted);margin-bottom:9px} .food-macros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .macro{background:rgba(255,255,255,.05);border-radius:8px;padding:5px 10px;text-align:center;border:1px solid rgba(255,255,255,.07);min-width:62px} .macro .mv{font-size:.95rem;font-weight:800;color:var(--gold)} .macro .ml{font-size:.65rem;color:var(--muted);font-weight:600;text-transform:uppercase} .fit-bar{margin-top:8px} .fit-label{font-size:.72rem;color:var(--muted);margin-bottom:3px;display:flex;justify-content:space-between} .fit-track{background:rgba(255,255,255,.08);border-radius:20px;height:7px;overflow:hidden} .fit-fill{height:100%;border-radius:20px} .fit-fill.good{background:linear-gradient(90deg,#3A6B48,#4A8C60)} .fit-fill.high{background:linear-gradient(90deg,#8B2020,#C03030)} .fit-fill.low{background:linear-gradient(90deg,#7A5A24,#C8A04A)} .fit-note{font-size:.73rem;margin-top:3px;font-weight:600} .fit-note.good{color:var(--green)} .fit-note.high{color:var(--red)} .fit-note.low{color:var(--gold)} .drink-card{background:rgba(255,255,255,.04);border-radius:10px;padding:12px 14px;margin-bottom:8px;border:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .drink-name{font-size:.9rem;font-weight:700;color:var(--t1)} .drink-cal{font-size:.76rem;color:var(--muted);margin-top:2px} .section-title{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:12px 0 9px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.07)} .ai-badge{display:inline-block;background:var(--gold);color:var(--bg);font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:5px;vertical-align:middle} .loading{text-align:center;padding:28px;color:var(--muted)} .spinner{width:32px;height:32px;border:2px solid rgba(103,232,249,.1);border-top-color:var(--gold-light);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 10px} @keyframes spin{to{transform:rotate(360deg)}} .empty{text-align:center;padding:22px;color:var(--muted);font-size:.88rem} .info-box{background:rgba(103,232,249,.07);border:1px solid rgba(103,232,249,.15);border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:.83rem;color:var(--t2);line-height:1.5} .info-box strong{color:var(--gold)} .error-box{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);border-radius:10px;padding:11px 14px;color:var(--red);font-size:.84rem;margin-top:8px} .log-row{display:flex;gap:10px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap} .log-row>div{flex:1;min-width:110px} .log-entry{display:flex;justify-content:space-between;align-items:center;padding:9px 13px;background:rgba(255,255,255,.04);border-radius:8px;margin-bottom:5px;border:1px solid rgba(255,255,255,.07);font-size:.85rem} .log-entry .dt{color:var(--muted);font-size:.76rem} .log-entry .wt{font-weight:700} .delta{font-size:.75rem;padding:2px 7px;border-radius:10px;font-weight:600} .delta.down{background:rgba(74,140,96,.2);color:var(--green)} .delta.up{background:rgba(192,57,43,.15);color:var(--red)} .delta.same{background:rgba(255,255,255,.06);color:var(--muted)} .adj-banner{border-radius:12px;padding:13px 16px;margin-bottom:14px;font-size:.86rem;line-height:1.5} .adj-banner.good{background:rgba(74,140,96,.12);border:1px solid rgba(74,140,96,.3);color:var(--gold-light)} .adj-banner.high{background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.3);color:var(--red)} .adj-banner.low{background:rgba(74,144,184,.1);border:1px solid rgba(74,144,184,.3);color:var(--blue)} .adj-banner.flat{background:rgba(103,232,249,.1);border:1px solid rgba(103,232,249,.25);color:var(--gold)} .adj-banner strong{display:block;font-size:.92rem;margin-bottom:3px} canvas{width:100%;height:170px;border-radius:10px;display:block;margin-top:10px} .story{line-height:1.75;color:var(--muted);font-size:.92rem} .story strong{color:var(--gold)} .results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} @media(max-width:460px){.results-grid{grid-template-columns:1fr}} .result-card{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;text-align:center;border:1px solid rgba(255,255,255,.07)} .result-card .name{font-weight:700;color:var(--gold);font-size:.88rem;margin-bottom:5px} .result-card .change{font-size:1.2rem;font-weight:800;color:var(--green)} .result-card .detail{font-size:.74rem;color:var(--muted);margin-top:3px;line-height:1.4} .recipe-section{margin-bottom:20px} .recipe-section h3{color:var(--gold);font-size:1rem;font-weight:700;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)} .groc-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;margin-bottom:3px;border:1px solid rgba(255,255,255,.07)} .dash-greeting{background:linear-gradient(145deg,var(--s2),var(--s1));border:1px solid var(--gold-line);border-top:1px solid rgba(103,232,249,.35);border-radius:16px;padding:30px 26px 26px;margin-bottom:16px;box-shadow:0 2px 0 rgba(103,232,249,.15),0 32px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(103,232,249,.25),inset 0 -1px 0 rgba(0,0,0,.5);position:relative;overflow:hidden;min-height:220px} .dash-greeting:before{content:"";position:absolute;top:-80px;right:-60px;width:360px;height:360px;background:radial-gradient(circle,rgba(103,232,249,.08) 0%,rgba(103,232,249,.03) 40%,transparent 65%);pointer-events:none} .dash-greeting .greeting-time{font-size:.6rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-light);font-weight:600;font-family:var(--font-body);opacity:.9} .dash-greeting .greeting-name{font-size:clamp(1.8rem,6vw,2.5rem);font-weight:700;line-height:1.1;margin-bottom:8px;letter-spacing:-.025em;font-family:var(--font-display);color:var(--t1);text-shadow:0 1px 0 rgba(0,0,0,.5)}.dash-stat .dv{text-shadow:none} .dash-greeting .greeting-date{font-size:.85rem;margin-bottom:14px;color:var(--t2)} .dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .dash-stat{background:linear-gradient(170deg,var(--s2),var(--s1));border:1px solid rgba(103,232,249,.18);border-top:1px solid rgba(103,232,249,.42);border-bottom:1px solid rgba(0,0,0,.6);border-radius:12px;padding:18px 14px 16px;text-align:center;min-height:88px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 1px 0 rgba(103,232,249,.09),0 10px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(103,232,249,.12),inset 0 -1px 0 rgba(0,0,0,.4)} .dash-stat .dv{font-size:clamp(1.4rem,5vw,2rem);font-weight:700;color:var(--t1);font-family:var(--font-display);letter-spacing:-.025em;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.5)} .dash-stat .dl{font-size:.56rem;color:rgba(103,232,249,.7);text-transform:uppercase;font-weight:600;margin-top:4px;letter-spacing:.18em;font-family:var(--font-body)} .dash-stat:after{content:"";display:block;height:1px;width:40%;margin-top:8px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.8),transparent)} .dash-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .dash-action{background:linear-gradient(170deg,var(--s2) 0%,var(--s1) 100%);border:1px solid rgba(103,232,249,.17);border-top:1px solid rgba(103,232,249,.38);border-radius:12px;padding:20px 16px 18px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:0 2px 0 rgba(103,232,249,.05),0 10px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(103,232,249,.11);position:relative;overflow:hidden} .dash-action:before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.35),transparent)} .dash-action:hover{border-color:rgba(103,232,249,.3);transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.55),inset 0 1px 0 rgba(103,232,249,.12)} .dash-action .da-icon{font-size:.55rem;margin-bottom:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--t2);font-weight:600;font-family:var(--font-body)} .dash-action .da-label{font-size:.88rem;font-weight:700;color:var(--t1);line-height:1.3;letter-spacing:.03em;font-family:var(--font-body)} .budget-bar-wrap{background:rgba(255,255,255,.04);border-radius:12px;padding:14px;margin-bottom:14px;border:1px solid rgba(255,255,255,.07)} .budget-bar-label{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:600} .budget-bar-track{background:rgba(255,255,255,.08);border-radius:20px;height:10px;overflow:hidden} .budget-bar-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,#3A6B48,#4A8C60);transition:width .4s} .budget-bar-fill.over{background:linear-gradient(90deg,#8B2020,#C03030)} .custom-meal-form{background:rgba(255,255,255,.03);border-radius:12px;padding:16px;margin-bottom:14px;border:1px dashed rgba(255,255,255,.1)} .hidden{display:none!important} .streak-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(103,232,249,.08);border:1px solid rgba(103,232,249,.2);border-radius:4px;padding:5px 12px;font-size:.72rem;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:.08em} .streak-badge .flame{font-size:1rem} .log-nudge{background:linear-gradient(135deg,var(--s2),var(--s1));border:1px solid rgba(103,232,249,.2);border-top:1px solid rgba(103,232,249,.42);border-radius:12px;padding:16px 18px;margin-bottom:12px;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 2px 0 rgba(103,232,249,.06),0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(103,232,249,.12)} .log-nudge .nudge-icon{font-size:1.3rem} .log-nudge .nudge-text{font-size:.86rem;font-weight:600;color:var(--t1);font-family:var(--font-display)} .log-nudge .nudge-sub{font-size:.7rem;color:var(--t2);margin-top:3px;font-style:italic} .celebration-card{background:linear-gradient(160deg,var(--s2),var(--s1));border:1px solid rgba(103,232,249,.2);border-radius:24px;padding:40px 32px;max-width:340px;width:90%;text-align:center;box-shadow:0 40px 80px rgba(0,0,0,.6);animation:popIn .4s cubic-bezier(.175,.885,.32,1.275)} .celebration-card .cel-icon{font-size:3.5rem;margin-bottom:12px} .celebration-card .cel-title{font-size:1.3rem;font-weight:800;color:var(--gold);margin-bottom:8px} .celebration-card .cel-msg{font-size:.88rem;color:var(--t2);line-height:1.6;margin-bottom:20px} @keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .nearby-map{width:100%;height:260px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);margin-bottom:14px;overflow:hidden;position:relative} .nearby-map-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:8px;color:var(--muted);font-size:.88rem} .nearby-map-placeholder .map-icon{font-size:2rem} .restaurant-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;transition:transform .15s} .restaurant-pin:hover{transform:translate(-50%,-100%) scale(1.2)} .pin-dot{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.2);box-shadow:0 2px 8px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--t1)} .pin-dot.green{background:var(--green)} .pin-dot.yellow{background:#C8A04A} .pin-dot.gray{background:#6A6560} .pin-tail{width:2px;height:8px;background:inherit;margin:0 auto} .nearby-list{margin-bottom:14px} .nearby-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:transparent;border-radius:8px;margin-bottom:6px;border:1px solid var(--gold-line);cursor:pointer;transition:all .2s} .nearby-item:hover,.nearby-item.selected{border-color:rgba(103,232,249,.35);background:rgba(103,232,249,.06)} .nearby-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0} .nearby-dot.green{background:var(--green)} .nearby-dot.yellow{background:#C8A04A} .nearby-dot.gray{background:#6A6560} .nearby-name{font-size:.9rem;font-weight:700;color:var(--t1)} .nearby-meta{font-size:.75rem;color:var(--muted);margin-top:2px} .nearby-badge{font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:auto;white-space:nowrap} .nearby-badge.open{background:rgba(74,140,96,.2);color:var(--green)} .nearby-badge.closed{background:rgba(192,57,43,.15);color:var(--red)} .loc-btn{width:100%;padding:13px;background:var(--gold);color:var(--bg);border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 16px rgba(103,232,249,.2)} .loc-btn:hover{opacity:.9} hr{border:none;border-top:1px solid rgba(255,255,255,.07);margin:16px 0} /* ── BOTTOM TAB NAV ── */ #bottom-nav{display:none;position:fixed;bottom:0;left:0;width:100%;z-index:150;background:rgba(13,27,42,.95);border-top:1px solid rgba(103,232,249,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:8px 0 max(8px,env(safe-area-inset-bottom))} #bottom-nav .tab-bar{display:flex;justify-content:space-around;align-items:center;max-width:600px;margin:0 auto} #bottom-nav .tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 12px;cursor:pointer;transition:all .2s;min-width:56px} #bottom-nav .tab-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:all .2s;display:block} #bottom-nav .tab-label{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);transition:all .2s} #bottom-nav .tab.active .tab-icon svg{stroke:var(--gold)} #bottom-nav .tab.active .tab-label{color:var(--gold)} #bottom-nav .tab:not(.active) .tab-icon svg{stroke:#5A5550} /* More drawer */ #more-drawer{display:none;position:fixed;bottom:0;left:0;width:100%;z-index:200;background:linear-gradient(180deg,var(--s2),var(--s1));border-top:1px solid rgba(103,232,249,.15);border-radius:20px 20px 0 0;padding:16px 20px max(20px,env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.5)} #more-drawer .drawer-handle{width:36px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin:0 auto 18px} #more-drawer .drawer-item{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer;transition:all .2s} #more-drawer .drawer-item:last-child{border-bottom:none} #more-drawer .drawer-item-label{font-size:.9rem;font-weight:600;color:var(--t1);letter-spacing:.01em} #more-drawer .drawer-item-sub{font-size:.72rem;color:var(--t2);margin-top:2px} #more-drawer .drawer-item:hover .drawer-item-label{color:var(--gold)} #more-drawer-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);z-index:190} @media(max-width:640px){ #bottom-nav{display:block} .page.active{padding-bottom:72px} nav{display:none!important} } /* ── PAYWALL SCREEN ─────────────────────────────────────────── */ #paywall-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(160deg,var(--bg) 0%,var(--s1) 50%,var(--bg) 100%);display:none;align-items:center;justify-content:center;z-index:9998;padding:20px} .paywall-card{background:var(--s1);border:1px solid var(--gold-line);border-top:1px solid rgba(103,232,249,.32);border-radius:20px;padding:48px 36px;max-width:400px;width:100%;text-align:center;box-shadow:0 40px 80px rgba(0,0,0,.8)} .paywall-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--gold);margin-bottom:6px;letter-spacing:.04em} .paywall-tagline{font-size:.85rem;color:var(--muted);margin-bottom:28px;font-style:italic} .paywall-price{font-family:var(--font-display);font-size:2.8rem;font-weight:700;color:var(--t1);line-height:1} .paywall-price span{font-size:1rem;font-weight:400;color:var(--muted)} .paywall-trial{font-size:.82rem;color:var(--gold-light);font-weight:600;margin:8px 0 24px;letter-spacing:.04em} .paywall-features{text-align:left;margin-bottom:28px;display:flex;flex-direction:column;gap:10px} .paywall-feature{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--t2)} .paywall-feature::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0} .paywall-btn{width:100%;padding:16px;background:var(--gold);color:var(--bg);border:none;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-body);transition:background .2s;margin-bottom:12px} .paywall-btn:hover{background:var(--gold-light)} .paywall-btn:disabled{opacity:.6;cursor:not-allowed} .paywall-restore{background:none;border:none;color:var(--muted);font-size:.75rem;cursor:pointer;font-family:var(--font-body);letter-spacing:.04em;text-decoration:underline} .paywall-note{font-size:.72rem;color:var(--t3);margin-top:14px;line-height:1.6} /* ── FIRST-TIME TUTORIAL ─────────────────────────────────── */ .tut-card-inner{position:fixed;background:var(--s1);border:1px solid var(--gold-line);border-top:1px solid rgba(103,232,249,.4);border-radius:14px;padding:18px 20px;max-width:280px;z-index:8002} .tut-title{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--gold-light);margin-bottom:6px} .tut-body{font-size:.82rem;color:var(--t2);line-height:1.6;margin-bottom:14px} .tut-arrow{position:absolute;width:0;height:0} .tut-arrow.up{border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid var(--gold-line);top:-8px;left:24px} .tut-arrow.down{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--gold-line);bottom:-8px;left:24px} .tut-step{font-size:.65rem;color:var(--t3);text-align:center;margin-top:10px;letter-spacing:.1em} /* ── GLASSMORPHISM — dark theme hero & stats ── */ .dash-stat{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .dash-greeting{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} /* ── LOFTIN METHOD COLOR REFINEMENT: READABLE SMALL TEXT + SOFT GLOW ── */ /* Keeps the existing font style. Only refines small accent-label colors. */ :root{ --label-cool:#9CCFE0; --label-soft:#8FB8C8; --label-dim:rgba(156,207,224,.72); --accent-readable:#67E8F9; } body::before{ background: radial-gradient(circle at 14% 18%, rgba(0,212,255,.09) 0%, transparent 28%), radial-gradient(circle at 88% 12%, rgba(103,232,249,.07) 0%, transparent 25%), radial-gradient(circle at 50% 96%, rgba(0,212,255,.045) 0%, transparent 36%) !important; filter: blur(16px); } /* Small labels that were feeling too gold/cyan-heavy */ h2, h3, label, .dash-greeting .greeting-time, .dash-stat .dl, .stat .lbl, .meal-subtitle, .day-tab, .nav-links a, #bottom-nav .tab-label, .dash-action .da-icon, .section-title, .budget-bar-label, .prog-label, .tut-step{ color:var(--label-soft) !important; } /* Active/important small labels get a clearer icy accent instead of harsh gold */ .day-tab.active, #bottom-nav .tab.active .tab-label, .nav-links a.active, .nav-links a:hover, .mobile-menu-panel a.active, .mobile-menu-panel a:hover, h2 strong, h3 strong{ color:var(--accent-readable) !important; } /* Keep major numbers, CTAs, and progress accents bright enough to guide the eye */ .dash-stat .dv, .meal-cal, .stat .val, .result-card .name, .logo, .welcome-logo, .paywall-logo{ color:var(--t1) !important; } .logo span, .welcome-logo span{ color:var(--label-soft) !important; } /* Subtle glow depth without changing layout or font */ .dash-greeting{ box-shadow: 0 2px 0 rgba(103,232,249,.10), 0 28px 80px rgba(0,0,0,.62), inset 0 1px 0 rgba(103,232,249,.16), 0 0 70px rgba(0,212,255,.045) !important; } .dash-stat, .dash-action, .meal-card, .card{ box-shadow: 0 1px 0 rgba(103,232,249,.06), 0 12px 36px rgba(0,0,0,.48), inset 0 1px 0 rgba(103,232,249,.08) !important; } #ds-progress-fill, .prog-fill{ box-shadow: 0 0 10px rgba(103,232,249,.42), 0 0 22px rgba(0,212,255,.14) !important; } /* ── HERO CARD ONLY: SLOW LUXURY BORDER SHINE ── */ .dash-greeting{ position:relative; overflow:hidden; border-width:1.75px !important; box-shadow: 0 2px 0 rgba(103,232,249,.12), 0 30px 90px rgba(0,0,0,.64), inset 0 1px 0 rgba(224,242,254,.08), inset 0 0 0 1px rgba(103,232,249,.10), 0 0 60px rgba(0,212,255,.04) !important; } /* ── HERO SUBTEXT COLORS ── */ .ds-range,.ds-range~*,#ds-steps-burn{color:rgba(103,232,249,.65)} /* ── PROGRESS BAR GLOW ── */ #ds-progress-fill{box-shadow:0 0 10px rgba(103,232,249,.55),0 0 20px rgba(103,232,249,.2)} .prog-fill{box-shadow:0 0 8px rgba(103,232,249,.4)} /* ── LOFTIN DEPTH BACKGROUND PNG ── */ /* Place loftin-depth-bg.png in the same folder as app.html. */ body{ background:#06101C !important; overflow-x:hidden; } /* Static PNG atmosphere behind the app */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: linear-gradient(180deg, rgba(6,16,28,.10) 0%, rgba(6,16,28,.28) 42%, rgba(6,16,28,.62) 100%), url("loftin-depth-bg.png") center top / cover no-repeat !important; opacity:.78; filter:saturate(1.05) contrast(1.08) brightness(.72) !important; transform:translateZ(0); } /* Extra soft glow fields that sit behind cards, not attached to them */ body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse at 50% 155px, rgba(103,232,249,.105) 0%, rgba(103,232,249,.045) 34%, transparent 62%), radial-gradient(ellipse at 22% 345px, rgba(0,212,255,.075) 0%, transparent 46%), radial-gradient(ellipse at 78% 430px, rgba(103,232,249,.065) 0%, transparent 44%), radial-gradient(ellipse at 50% 690px, rgba(0,212,255,.055) 0%, transparent 52%), linear-gradient(180deg, rgba(4,11,20,.08), rgba(4,11,20,.38)); opacity:.88; mix-blend-mode:screen; } /* Keep all app content above the background layers */ body > *{ position:relative; z-index:1; } /* Make transparent/glass cards let the depth background do its job */ .dash-greeting, .dash-stat, .meal-card, .card, .log-nudge, .dash-action, .budget-bar-wrap, .info-box{ background:linear-gradient(155deg, rgba(30,47,66,.72), rgba(9,21,32,.64)) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } /* Bottom nav stays readable over the image */ #bottom-nav{ background:rgba(6,16,28,.88) !important; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); } /* ── LIGHT MODE — Unified Clean Block ── */ /* Single authoritative source. Replaces all four previous light-mode blocks. */ body.light-mode{ background:#ECF3F8 !important; background-image:none !important; /* Core palette */ --bg:#ECF3F8; --s1:rgba(255,255,255,.85); --s2:rgba(241,248,252,.75); --s3:rgba(224,238,247,.7); --card:rgba(255,255,255,.85); --card2:rgba(241,248,252,.75); /* Cyan accent — tuned for light readability */ --gold:#1B84AE; --gold-light:#54C3E7; --gold-line:rgba(27,132,174,.20); --gold-dim:rgba(27,132,174,.12); --gold-glow:rgba(27,132,174,.06); /* Text */ --t1:#17324A; --t2:#678397; --t3:#8DA5B5; --muted:#7B97AA; --text:#17324A; --white:#F0F8FF; /* Status */ --green:#059669; --red:#DC2626; --blue:#0284C7; /* Buttons */ --cream-bg:#1B84AE; --cream-text:#F0F8FF; --cream-border:rgba(27,132,174,.5); /* Misc legacy aliases */ --border:rgba(27,132,174,.18); --shadow:0 4px 24px rgba(0,0,0,.1); --surface:#F0F8FF; --leather:#F0F8FF; --leather-light:#ECF3F8; --charcoal:#ECF3F8; /* Label aliases used by color-refinement pass */ --label-soft:#6C879B; --label-cool:#256B83; --accent-readable:#1B84AE; } /* Reset dark overlays */ body.light-mode::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: linear-gradient(180deg,rgba(236,243,248,.16) 0%,rgba(236,243,248,.28) 18%,rgba(236,243,248,.42) 100%), url("loftin-light-depth-bg-v3.png") center top / cover no-repeat !important; opacity:1 !important; filter:saturate(1.02) contrast(1.03) brightness(.98) !important; } body.light-mode::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(ellipse at 50% 165px,rgba(84,195,231,.23) 0%,rgba(84,195,231,.12) 24%,rgba(84,195,231,.04) 42%,transparent 60%), radial-gradient(ellipse at 22% 365px,rgba(27,132,174,.13) 0%,rgba(27,132,174,.06) 28%,transparent 44%), radial-gradient(ellipse at 79% 400px,rgba(84,195,231,.12) 0%,rgba(84,195,231,.05) 26%,transparent 42%), radial-gradient(ellipse at 50% 760px,rgba(27,132,174,.11) 0%,rgba(27,132,174,.05) 30%,transparent 52%), linear-gradient(180deg,rgba(255,255,255,.05),rgba(225,237,245,.18)); opacity:.98 !important; mix-blend-mode:normal !important; } /* Glassmorphism — all floating surfaces */ body.light-mode .dash-greeting, body.light-mode .dash-stat, body.light-mode .meal-card, body.light-mode .card, body.light-mode .log-nudge, body.light-mode .dash-action, body.light-mode .budget-bar-wrap, body.light-mode .info-box, body.light-mode .result-card, body.light-mode .drink-card, body.light-mode .stat, body.light-mode .food-card, body.light-mode .macro{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} /* Hero card */ body.light-mode .dash-greeting{ background:linear-gradient(155deg,rgba(255,255,255,.64),rgba(241,248,252,.54)) !important; box-shadow:0 1px 0 rgba(255,255,255,.78),0 14px 34px rgba(94,126,148,.12),0 0 0 1px rgba(27,132,174,.06),inset 0 1px 0 rgba(255,255,255,.60),0 0 42px rgba(84,195,231,.12) !important; } body.light-mode .dash-greeting::before{ background:radial-gradient(circle,rgba(84,195,231,.16) 0%,rgba(84,195,231,.06) 40%,transparent 68%) !important; } body.light-mode .dash-greeting .greeting-name{color:#17324A !important;text-shadow:none !important} body.light-mode .dash-greeting .greeting-time{color:var(--gold) !important;opacity:1 !important} body.light-mode .dash-greeting .greeting-date{color:#688397 !important} /* Stats + general cards */ body.light-mode .dash-stat, body.light-mode .meal-card, body.light-mode .card, body.light-mode .log-nudge, body.light-mode .dash-action, body.light-mode .budget-bar-wrap, body.light-mode .info-box, body.light-mode .result-card, body.light-mode .drink-card, body.light-mode .stat{ background:linear-gradient(155deg,rgba(255,255,255,.68),rgba(241,248,252,.58)) !important; box-shadow:0 1px 0 rgba(255,255,255,.72),0 10px 24px rgba(94,126,148,.10),inset 0 1px 0 rgba(255,255,255,.55) !important; } body.light-mode .dash-stat .dv{color:var(--t1) !important;text-shadow:none !important} body.light-mode .dash-stat .dl{color:var(--gold) !important} body.light-mode .dash-stat:after{background:linear-gradient(90deg,transparent,rgba(27,132,174,.5),transparent) !important} /* Meal cards */ body.light-mode .meal-card{border-left-color:var(--gold) !important;border-color:var(--gold-line) !important} body.light-mode .meal-card.alt{border-left-color:var(--gold-light) !important} body.light-mode .meal-header{background:transparent !important} body.light-mode .meal-title{color:#235F7F !important;text-shadow:none !important} body.light-mode .meal-cal{color:#1B84AE !important;text-shadow:none !important} body.light-mode .meal-subtitle{color:var(--t2) !important} body.light-mode .meal-expand{color:var(--gold-dim) !important} body.light-mode .meal-body{background:rgba(27,132,174,.02) !important;border-top-color:var(--gold-line) !important} body.light-mode .meal-body li{border-bottom-color:var(--gold-line) !important;color:var(--t1) !important} /* Label + supporting text — all small uppercase labels */ body.light-mode h2, body.light-mode h3, body.light-mode label, body.light-mode .dash-greeting .greeting-time, body.light-mode .dash-stat .dl, body.light-mode .stat .lbl, body.light-mode .nav-links a, body.light-mode #bottom-nav .tab-label, body.light-mode .dash-action .da-icon, body.light-mode .section-title, body.light-mode .budget-bar-label, body.light-mode .prog-label{color:#6C879B !important} /* Active / selected states */ body.light-mode .day-tab{ color:#5C788E !important; background:rgba(255,255,255,.52) !important; border:1px solid rgba(27,132,174,.18) !important; } body.light-mode .day-tab:hover{color:#3D6278 !important;background:rgba(255,255,255,.72) !important} body.light-mode .day-tab.active{ color:#F7FBFF !important; background:linear-gradient(180deg,#4ABEE2,#1B84AE) !important; border-color:rgba(27,132,174,.56) !important; box-shadow:0 8px 24px rgba(27,132,174,.18),inset 0 1px 0 rgba(255,255,255,.28) !important; } body.light-mode .day-tab.today{color:var(--gold) !important;background:rgba(27,132,174,.08) !important;font-weight:700} /* Nav */ body.light-mode nav{background:rgba(236,243,248,.97) !important;border-bottom-color:rgba(27,132,174,.16) !important} body.light-mode .nav-links a:hover,.light-mode .nav-links a.active{color:#F0F8FF !important} /* Bottom nav */ body.light-mode #bottom-nav{ background:rgba(236,243,248,.82) !important; border-top-color:rgba(27,132,174,.16) !important; backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px); } body.light-mode #bottom-nav .tab.active .tab-label, body.light-mode #bottom-nav .tab.active .tab-icon svg{color:#1B84AE !important;stroke:#1B84AE !important} body.light-mode #bottom-nav .tab:not(.active) .tab-label{color:#7B94A7 !important} body.light-mode #bottom-nav .tab:not(.active) .tab-icon svg{stroke:#8EA5B4 !important} /* More drawer */ body.light-mode #more-drawer{background:rgba(236,243,248,.97) !important;border-top-color:rgba(27,132,174,.15) !important} body.light-mode .drawer-item{border-color:rgba(27,132,174,.1) !important} /* Paywall / welcome */ body.light-mode .paywall-card, body.light-mode .welcome-card{background:rgba(255,255,255,.92) !important;border-color:rgba(27,132,174,.2) !important} /* Phase banners */ body.light-mode .phase-banner{background:rgba(27,132,174,.07) !important;border-color:rgba(27,132,174,.18) !important;color:var(--t1) !important} body.light-mode .phase-banner.maintenance{background:rgba(5,150,105,.07) !important;border-color:rgba(5,150,105,.2) !important;color:#065F46 !important} /* Toggles and selectors */ body.light-mode .tog{background:transparent;color:var(--t2);border-color:rgba(27,132,174,.2)} body.light-mode .tog.active{background:var(--gold);color:#F0F8FF;border-color:var(--gold)} body.light-mode .sel-btn{background:rgba(0,0,0,.04) !important;border-color:rgba(27,132,174,.15) !important;color:var(--t2) !important} body.light-mode .sel-btn.active{background:var(--gold) !important;color:#F0F8FF !important;border-color:var(--gold) !important} /* Inputs */ body.light-mode input, body.light-mode select{background:rgba(255,255,255,.8) !important;border-color:rgba(27,132,174,.25) !important;color:var(--t1) !important} /* Buttons */ body.light-mode .btn-sm{background:var(--gold);color:#F0F8FF;border-color:var(--gold)} /* Food cards + macros */ body.light-mode .food-card{ background:linear-gradient(160deg,rgba(255,255,255,.67),rgba(241,248,252,.60)) !important; border-color:rgba(27,132,174,.12) !important; box-shadow:0 1px 0 rgba(255,255,255,.70),0 10px 26px rgba(94,126,148,.10) !important; } body.light-mode .food-name{color:#17324A !important} body.light-mode .food-desc{color:#6D8799 !important} body.light-mode .macro{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(235,245,250,.66)) !important; border:1px solid rgba(27,132,174,.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 4px 12px rgba(101,131,150,.06) !important; } body.light-mode .macro .mv{color:#1C6F95 !important;font-weight:800 !important;text-shadow:none !important} body.light-mode .macro .ml{color:#7D97A9 !important;font-weight:700 !important;letter-spacing:.06em !important} /* Log / stats entries */ body.light-mode .log-entry{background:rgba(0,0,0,.02) !important;border-color:rgba(27,132,174,.1) !important} body.light-mode .delta.same{background:rgba(0,0,0,.05) !important} body.light-mode .log-nudge{background:linear-gradient(155deg,rgba(255,255,255,.68),rgba(241,248,252,.58)) !important;border-color:var(--gold-line) !important;border-top-color:rgba(27,132,174,.3) !important} body.light-mode .log-nudge .nudge-sub{color:#688397 !important} /* Progress */ body.light-mode .prog-bar{background:rgba(27,132,174,.1) !important} body.light-mode #ds-progress-line{border-top-color:rgba(27,132,174,.15) !important} body.light-mode #ds-progress-line span:first-child{color:var(--t3) !important} body.light-mode .ds-range, body.light-mode #ds-steps-burn{color:var(--t2) !important} body.light-mode #dash-log-prompt{background:rgba(255,255,255,.8) !important;border-color:var(--gold-line) !important} /* Misc utility */ body.light-mode .section-title{border-color:rgba(27,132,174,.12) !important} body.light-mode .budget-bar-track{background:rgba(0,0,0,.08) !important} body.light-mode .budget-bar{background:rgba(27,132,174,.15) !important} body.light-mode .custom-meal-form{background:rgba(0,0,0,.02) !important;border-color:rgba(27,132,174,.15) !important} body.light-mode .fit-track{background:rgba(0,0,0,.08) !important} body.light-mode .recipe-section h3{border-color:rgba(27,132,174,.15) !important} body.light-mode .streak-badge{background:rgba(27,132,174,.08);border-color:rgba(27,132,174,.2)} body.light-mode .groc-item{border-color:rgba(27,132,174,.15) !important} body.light-mode .nearby-item{border-color:rgba(27,132,174,.18)} body.light-mode .coach-note{background:rgba(27,132,174,.04) !important;border-color:rgba(27,132,174,.2) !important;color:var(--t2) !important} body.light-mode .info-box{background:rgba(27,132,174,.06) !important;border-color:rgba(27,132,174,.15) !important} body.light-mode .adj-banner{background:rgba(5,150,105,.07) !important;color:#065F46 !important} body.light-mode #tut-card{background:rgba(255,255,255,.9) !important;border-color:rgba(27,132,174,.3) !important} body.light-mode .progress-feedback{background:var(--s2) !important} body.light-mode .badge.home{background:rgba(5,150,105,.12);color:var(--green)} body.light-mode .badge.work{background:rgba(2,132,199,.12);color:var(--blue)} body.light-mode .section-divider{color:var(--gold) !important}