/* COOKIE BANNER */
#cookieBanner{position:fixed;left:0;right:0;bottom:0;z-index:2000;background:var(--green-dark);color:white;padding:1rem 1.25rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 -4px 20px rgba(0,0,0,0.2);}
.cookie-banner-text{font-size:0.85rem;line-height:1.5;flex:1;min-width:240px;}
.cookie-banner-text a{color:#bfe8d0;text-decoration:underline;}
.cookie-banner-btns{display:flex;gap:0.5rem;flex-wrap:wrap;}
.cookie-btn{padding:0.55rem 1rem;border-radius:8px;font-size:0.85rem;font-weight:600;cursor:pointer;border:1.5px solid rgba(255,255,255,0.5);background:transparent;color:white;}
.cookie-btn-accept{background:white;color:var(--green-dark);border-color:white;}
.cookie-btn:hover{opacity:0.9;}
@media (max-width:480px){#cookieBanner{flex-direction:column;align-items:stretch;}.cookie-banner-btns{justify-content:stretch;}.cookie-btn{flex:1;}}

/* SIDEBAR */
#sidebar{position:fixed;top:0;left:0;height:100%;width:260px;background:var(--card);border-right:1px solid var(--border);z-index:500;transform:translateX(-100%);transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,0.15);}
#sidebar.open{transform:translateX(0);}
#sidebarOverlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:499;opacity:0;pointer-events:none;transition:opacity 0.28s;}
#sidebarOverlay.open{opacity:1;pointer-events:all;}
.sidebar-header{background:var(--green-dark);padding:1.25rem 1rem 1rem;color:white;display:flex;align-items:center;justify-content:space-between;}
.sidebar-header h2{font-size:1rem;font-weight:700;}
.sidebar-close{background:none;border:none;color:rgba(255,255,255,0.8);font-size:1.3rem;cursor:pointer;padding:0.2rem;}
.sidebar-profile{padding:1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:0.75rem;}
.sidebar-avatar{width:42px;height:42px;border-radius:50%;background:var(--green-pale);display:flex;align-items:center;justify-content:center;font-size:1.2rem;overflow:hidden;}
.sidebar-avatar img{width:100%;height:100%;object-fit:cover;}
.sidebar-name{font-weight:600;font-size:0.9rem;color:var(--text);}
.sidebar-plan{font-size:0.72rem;color:var(--muted);}
.sidebar-nav{flex:1;overflow-y:auto;padding:0.5rem 0;}
.sidebar-item{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 1.1rem;cursor:pointer;font-size:0.88rem;font-weight:500;color:var(--text);border:none;background:none;width:100%;text-align:left;transition:background 0.15s;}
.sidebar-item:hover{background:var(--green-pale);}
.sidebar-item.active{background:var(--green-pale);color:var(--green-dark);font-weight:700;}
.sidebar-item .si-icon{font-size:1.1rem;width:24px;text-align:center;}
.sidebar-footer{padding:0.75rem 1rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.5rem;}
.sidebar-legal{display:flex;flex-direction:column;gap:0.3rem;font-size:0.72rem;}
.sidebar-legal-row{display:flex;gap:0.75rem;}
.sidebar-legal a{color:var(--muted);text-decoration:underline;}
.sidebar-theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0.1rem;font-size:0.85rem;color:var(--text);}
.theme-switch{position:relative;width:42px;height:24px;}
.theme-switch input{opacity:0;width:0;height:0;}
.theme-slider{position:absolute;inset:0;background:var(--border);border-radius:24px;cursor:pointer;transition:background 0.2s;}
.theme-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:transform 0.2s;}
input:checked + .theme-slider{background:var(--green);}
input:checked + .theme-slider:before{transform:translateX(18px);}

/* Hamburger button in header */
#hamburgerBtn{background:none;border:none;color:white;font-size:1.3rem;cursor:pointer;padding:0.2rem 0.4rem;margin-right:0.25rem;display:flex;align-items:center;}

:root {
  --green:#2d6a4f; --green-light:#52b788; --green-pale:#d8f3dc; --green-dark:#1b4332;
  --amber:#e76f51; --amber-pale:#fde8e4; --blue:#3b82f6; --blue-pale:#eff6ff;
  --purple:#7c3aed; --purple-pale:#f5f3ff;
  --bg:#f8faf8; --card:#fff; --text:#1a2e1a; --muted:#6b7c6b; --border:#d4e6d4;
  --radius:12px; --shadow:0 2px 12px rgba(45,106,79,0.08);
}
[data-theme="dark"] {
  --bg:#1a1d23; --card:#22262f; --text:#dce1ea; --muted:#7c8493; --border:#333844;
  --green:#52c97a; --green-light:#7dd99a; --green-pale:#1c2e24; --green-dark:#52c97a;
  --amber:#f59e0b; --amber-pale:#2a2010; --blue:#6ea8fe; --blue-pale:#1a2540;
  --purple:#9d7fe8; --purple-pale:#231a3a;
  --radius:12px; --shadow:0 2px 16px rgba(0,0,0,0.45);
}
[data-theme="dark"] header{background:#22262f;border-bottom:1px solid #333844;}
[data-theme="dark"] .nav-tabs{background:#1a1d23;border-bottom:1px solid #333844;}
[data-theme="dark"] .nav-tab{color:#7c8493;}
[data-theme="dark"] .nav-tab.active{color:#dce1ea;border-bottom-color:#7c8493;}
[data-theme="dark"] .nav-tab:hover{color:#dce1ea;}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#1a1d23;color:#dce1ea;border-color:#333844;}
[data-theme="dark"] .btn-primary{background:#52c97a;color:#111;}
[data-theme="dark"] .btn-primary:hover{background:#7dd99a;}
[data-theme="dark"] .card-header h2{color:#9daabb;}
[data-theme="dark"] .chart-range-btn{background:#22262f;border-color:#333844;color:#7c8493;}
[data-theme="dark"] .chart-range-btn.active{background:#22262f;border-color:#9daabb;color:#dce1ea;}
[data-theme="dark"] .food-kcal{color:#9daabb;}
[data-theme="dark"] .macro-box{background:#1a1d23;}
[data-theme="dark"] .week-stat{background:#1a1d23;}
[data-theme="dark"] .week-day{background:#1a1d23;}
[data-theme="dark"] .date-bar{background:#22262f;border-color:#333844;}
[data-theme="dark"] #dateLabel{color:#dce1ea;}
[data-theme="dark"] .date-bar button{border-color:#333844;color:#dce1ea;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;}

/* AUTH */
#authOverlay{position:fixed;inset:0;background:rgba(27,67,50,0.92);display:none;align-items:center;justify-content:center;z-index:999;padding:1rem;}
.auth-box{position:relative;background:var(--card);border-radius:20px;padding:2rem;max-width:380px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.auth-close{position:absolute;top:0.6rem;right:0.7rem;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;line-height:1;padding:0.25rem;}
.auth-consent{display:flex;align-items:flex-start;gap:0.5rem;text-align:left;font-size:0.78rem;color:var(--text);background:var(--green-pale);border-radius:8px;padding:0.65rem 0.75rem;margin-bottom:1rem;line-height:1.4;}
.auth-consent input{margin-top:0.15rem;flex-shrink:0;width:16px;height:16px;accent-color:var(--green-dark);cursor:pointer;}
.auth-consent label{cursor:pointer;}
.auth-consent a{color:var(--green-dark);font-weight:600;text-decoration:underline;}

/* Preview-mode lock over interactive page content for logged-out users */
.page.active{position:relative;}
.feature-lock{display:none;position:absolute;inset:0;z-index:50;cursor:pointer;background:rgba(0,0,0,0.025);align-items:flex-start;justify-content:center;}
.feature-lock.active{display:flex;}
.feature-lock-badge{margin-top:2.5rem;background:var(--green-dark);color:white;padding:0.7rem 1.25rem;border-radius:30px;font-size:0.85rem;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,0.25);pointer-events:none;white-space:nowrap;}
.header-login-btn{display:none;background:white;color:var(--green-dark);border:none;border-radius:20px;padding:0.45rem 0.95rem;font-size:0.8rem;font-weight:700;cursor:pointer;}
.auth-logo{font-size:2rem;text-align:center;margin-bottom:0.25rem;}
.auth-box h2{text-align:center;font-size:1.3rem;color:var(--green-dark);margin-bottom:0.25rem;}
.auth-box p{text-align:center;font-size:0.82rem;color:var(--muted);margin-bottom:1.5rem;}
.auth-tabs{display:flex;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:1.25rem;}
.auth-tab{flex:1;padding:0.5rem;border:none;background:transparent;cursor:pointer;font-size:0.88rem;font-weight:500;color:var(--muted);transition:all 0.15s;}
.auth-tab.active{background:var(--green-dark);color:white;}
.auth-field{margin-bottom:0.75rem;}
.auth-field label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:0.3rem;}
.auth-field input{width:100%;padding:0.6rem 0.9rem;border:1.5px solid var(--border);border-radius:8px;font-size:0.9rem;color:var(--text);background:var(--bg);outline:none;}
.auth-field input:focus{border-color:var(--green-light);}
.btn-auth{width:100%;padding:0.75rem;background:var(--green-dark);color:white;border:none;border-radius:8px;font-size:0.95rem;font-weight:600;cursor:pointer;margin-top:0.5rem;}
.btn-auth:hover{background:var(--green);}
.auth-free{text-align:center;font-size:0.78rem;color:var(--muted);margin-top:1rem;}
.auth-free strong{color:var(--green);}
.btn-google{width:100%;padding:0.75rem;background:#fff;color:#3c4043;border:1.5px solid #dadce0;border-radius:8px;font-size:0.95rem;font-weight:500;cursor:pointer;margin-bottom:1rem;transition:background 0.15s,box-shadow 0.15s;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.btn-google:hover{background:#f8f9fa;box-shadow:0 2px 6px rgba(0,0,0,0.13);}
.btn-google:disabled{opacity:0.6;cursor:not-allowed;}
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:0.75rem 0;color:var(--muted);font-size:0.8rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.user-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:4px;border:2px solid rgba(255,255,255,0.4);}

/* HEADER */
header{background:var(--green-dark);color:white;padding:0.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
header h1{font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:0.4rem;}
.header-right{display:flex;align-items:center;gap:0.75rem;}
.user-badge{font-size:0.8rem;opacity:0.8;}
.premium-badge{background:gold;color:#333;font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:20px;}
.btn-logout{background:rgba(255,255,255,0.15);border:none;color:white;padding:0.3rem 0.75rem;border-radius:6px;font-size:0.78rem;cursor:pointer;}
.btn-logout:hover{background:rgba(255,255,255,0.25);}

/* NAV */
.nav-tabs{background:var(--green);display:flex;overflow-x:auto;scrollbar-width:none;position:relative;}
.nav-tabs::-webkit-scrollbar{display:none;}
.nav-tab{padding:0.65rem 1.1rem;border:none;background:transparent;color:rgba(255,255,255,0.75);font-size:0.85rem;font-weight:500;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;transition:all 0.15s;}
.nav-tab.active{color:white;border-bottom-color:white;}
.nav-tab:hover{color:white;}
/* Vihje siitä, että navigaatiossa on lisää välilehtiä vierityksen takana —
   aiemmin mobiilissa ei ollut mitään merkkiä siitä että listaa voi selata. */
.nav-tabs-wrap{position:relative;}
.nav-tabs-wrap::after{content:'›';position:absolute;right:0;top:0;bottom:0;width:32px;display:none;align-items:center;justify-content:center;background:linear-gradient(to right, rgba(45,106,79,0), var(--green) 65%);color:white;font-size:1.4rem;font-weight:700;pointer-events:none;}
.nav-tabs-wrap.has-more::after{display:flex;}
[data-theme="dark"] .nav-tabs-wrap.has-more::after{background:linear-gradient(to right, rgba(26,29,35,0), #1a1d23 65%);}

/* PAGE */
.page{display:none;max-width:900px;margin:0 auto;padding:1.25rem 1rem;}
.page.active{display:block;}

/* DATE BAR */
.date-bar{display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:1.25rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:0.6rem 1rem;}
.date-bar button{background:transparent;border:1.5px solid var(--border);color:var(--green-dark);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;}
.date-bar button:hover{background:var(--green-pale);}
#dateLabel{font-weight:600;min-width:130px;text-align:center;color:var(--green-dark);}

/* CARD */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.25rem;}
.card-header{padding:0.9rem 1.25rem 0.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;}
.card-header h2{font-size:0.85rem;font-weight:700;color:var(--green-dark);text-transform:uppercase;letter-spacing:0.06em;}
.card-body{padding:1.25rem;}

/* SUMMARY */
.summary{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;}
.ring-wrap{position:relative;width:110px;height:110px;flex-shrink:0;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ring-center .kcal-num{font-size:1.5rem;font-weight:700;color:var(--green-dark);line-height:1;}
.ring-center .kcal-label{font-size:0.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;}
.macro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;}
.macro-box{background:var(--bg);border-radius:8px;padding:0.6rem 0.5rem;text-align:center;}
.macro-box .macro-val{font-size:1.05rem;font-weight:700;color:var(--green);}
.macro-box .macro-lbl{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.goal-bar-row{margin-top:0.75rem;display:flex;align-items:center;gap:0.75rem;font-size:0.82rem;color:var(--muted);}
.goal-bar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.goal-bar-fill{height:100%;background:var(--green-light);border-radius:3px;transition:width 0.4s ease;}
.goal-bar-fill.over{background:var(--amber);}

/* ADD FOOD SECTION */
.ai-section{padding:1.25rem;}
.ai-tabs{display:flex;gap:0.4rem;margin-bottom:1rem;flex-wrap:wrap;}
.ai-tab{padding:0.35rem 0.85rem;border-radius:20px;font-size:0.8rem;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--muted);transition:all 0.15s;}
.ai-tab.active{background:var(--green-pale);border-color:var(--green-light);color:var(--green-dark);}
.ai-panel{display:none;}
.ai-panel.active{display:block;}
.ai-desc{font-size:0.83rem;color:var(--muted);margin-bottom:0.75rem;}
.input-row{display:flex;gap:0.5rem;}
input[type=text],input[type=url],input[type=email],input[type=number],input[type=password],select,textarea{padding:0.6rem 0.9rem;border:1.5px solid var(--border);border-radius:8px;font-size:0.88rem;color:var(--text);background:var(--bg);outline:none;transition:border-color 0.2s;}
input:focus,select:focus,textarea:focus{border-color:var(--green-light);}
.btn{padding:0.6rem 1.1rem;border:none;border-radius:8px;font-size:0.88rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.2s,transform 0.1s;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--green);color:white;}
.btn-primary:hover{background:var(--green-dark);}
.btn-primary:disabled{background:#aaa;cursor:not-allowed;transform:none;}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--border);}
.btn-ghost:hover{background:var(--green-pale);}
.btn:disabled,.btn-ghost:disabled{opacity:0.45;cursor:not-allowed;}
.btn:disabled:hover,.btn-ghost:disabled:hover{background:transparent;}
.btn-amber{background:var(--amber);color:white;}
.btn-amber:hover{background:#c4563b;}

/* NOT FOUND STATE */
.not-found-state{background:var(--amber-pale);border:1.5px solid #f8c4b4;border-radius:10px;padding:1.25rem;margin-top:1rem;text-align:center;}
.not-found-state p{font-size:0.88rem;color:#8b3a2a;margin-bottom:1rem;}
.not-found-actions{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap;}

/* RESULT */
.ai-result{margin-top:1rem;padding:1rem;background:var(--green-pale);border-radius:8px;border:1px solid var(--green-light);}
.ai-result h4{font-size:0.95rem;font-weight:600;margin-bottom:0.4rem;color:var(--green-dark);}
.ai-result-macros{display:flex;gap:1rem;font-size:0.82rem;color:var(--muted);margin-bottom:0.75rem;flex-wrap:wrap;}
.ai-result-macros span strong{color:var(--text);}
.portion-row{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.portion-row input[type=number]{width:80px;}
.serving-tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.6rem;}
.serving-tag{background:white;border:1.5px solid var(--border);border-radius:20px;padding:0.25rem 0.7rem;font-size:0.78rem;cursor:pointer;color:var(--muted);transition:all 0.15s;}
.serving-tag:hover,.serving-tag.active{background:var(--green-light);border-color:var(--green-light);color:white;}
#aiStatus{font-size:0.82rem;color:var(--muted);margin-top:0.6rem;min-height:1.2em;}
#aiStatus.error{color:var(--amber);}

/* BARCODE SCANNER */
/* Fixed aspect-ratio + object-fit:cover — without this the video sized itself
   from the camera's native (often very tall or very wide) stream resolution,
   which on phones made it balloon way past the viewport ("disappear"). */
.scanner-wrap{position:relative;width:100%;max-width:380px;aspect-ratio:3/4;max-height:65vh;margin:0 auto;border-radius:10px;overflow:hidden;background:#000;}
.scanner-wrap video{width:100%;height:100%;display:block;object-fit:cover;}
.scanner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.scanner-frame{width:70%;height:45%;border:3px solid var(--green-light);border-radius:8px;box-shadow:0 0 0 9999px rgba(0,0,0,0.45);}
.scanner-hint{font-size:0.78rem;color:var(--muted);text-align:center;margin-top:0.5rem;}
#scannerSection{display:none;margin-top:0.75rem;}
.scanner-torch-btn{position:absolute;top:0.6rem;right:0.6rem;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,0.5);border:1.5px solid rgba(255,255,255,0.4);color:white;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:5;}
.scanner-torch-btn.active{background:var(--green-light);border-color:var(--green-light);}
.camera-error-box{background:var(--amber-pale);border-radius:10px;padding:1rem 1.1rem;margin-top:0.75rem;font-size:0.85rem;color:#8b3a2a;}
.camera-error-box h4{margin:0 0 0.4rem;font-size:0.92rem;color:#8b3a2a;}
.camera-error-box ol{margin:0.4rem 0 0;padding-left:1.2rem;}
.camera-error-box li{margin-bottom:0.2rem;}

/* MANDATORY FIELDS INDICATOR */
.required-star{color:var(--amber);font-weight:700;}
.field-row{margin-bottom:0.6rem;}
.field-row label{display:block;font-size:0.73rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:0.3rem;}
.field-row input{width:100%;}
.field-group-header{font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--green-dark);padding:0.5rem 0 0.25rem;border-bottom:1px solid var(--border);margin-bottom:0.6rem;margin-top:0.75rem;}
.fields-required{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;}
.fields-optional{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;}

/* MEAL LOG */
.meal-list{padding:0 1.25rem 1.25rem;}
.meal-group{margin-bottom:1rem;}
.meal-group-header{font-size:0.73rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);padding:0.5rem 0 0.3rem;border-bottom:1px solid var(--border);margin-bottom:0.3rem;display:flex;justify-content:space-between;}
.food-item{display:grid;grid-template-columns:1fr auto auto;gap:0.5rem;align-items:center;padding:0.45rem 0;border-bottom:1px solid var(--bg);font-size:0.86rem;}
.food-item:last-child{border-bottom:none;}
.food-name{font-weight:500;}
.food-grams{color:var(--muted);font-size:0.78rem;}
.food-kcal{font-weight:700;color:var(--green-dark);min-width:55px;text-align:right;}
.food-del{background:none;border:none;color:#ccc;cursor:pointer;font-size:0.9rem;padding:0 0.2rem;}
.food-del:hover{color:var(--amber);}
.empty-state{text-align:center;color:var(--muted);font-size:0.88rem;padding:1.5rem 0;}

/* WEEKLY */
.week-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:0.75rem;margin-bottom:1.25rem;}
.week-stat{background:var(--bg);border-radius:10px;padding:0.75rem;text-align:center;}
.week-stat .val{font-size:1.2rem;font-weight:700;color:var(--green-dark);}
.week-stat .lbl{font-size:0.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.week-days{display:grid;grid-template-columns:repeat(7,1fr);gap:0.5rem;margin-bottom:1.25rem;}
.week-day{background:var(--bg);border-radius:8px;padding:0.6rem 0.4rem;text-align:center;cursor:pointer;border:2px solid transparent;transition:all 0.15s;}
.week-day:hover{border-color:var(--green-light);}
.week-day.today{border-color:var(--green);}
.week-day.selected{background:var(--green-pale);border-color:var(--green);}
.week-day .wd-name{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.week-day .wd-num{font-size:0.95rem;font-weight:600;color:var(--green-dark);margin:0.1rem 0;}
.week-day .wd-kcal{font-size:0.72rem;color:var(--muted);}
.week-day .wd-bar{height:4px;background:var(--border);border-radius:2px;margin-top:0.3rem;overflow:hidden;}
.week-day .wd-bar-fill{height:100%;background:var(--green-light);border-radius:2px;}
.week-day .wd-bar-fill.over{background:var(--amber);}
.email-banner{background:var(--blue-pale);border:1px solid #bfdbfe;border-radius:10px;padding:1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.email-banner p{font-size:0.85rem;color:#1e40af;flex:1;}
.email-banner p strong{display:block;font-size:0.95rem;margin-bottom:0.2rem;}
.email-setup{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;}
.email-setup input{flex:1;min-width:180px;}

/* MACROS */
.macro-targets{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;margin-bottom:1rem;}
.macro-target-box{background:var(--bg);border-radius:10px;padding:1rem;}
.macro-target-box .mt-name{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:0.5rem;}
.macro-target-box .mt-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:0.3rem;}
.macro-target-box .mt-bar-fill{height:100%;border-radius:4px;transition:width 0.4s;}
.macro-target-box .mt-nums{display:flex;justify-content:space-between;font-size:0.78rem;color:var(--muted);}
.macro-target-box .mt-nums strong{color:var(--text);}

/* RECIPES */
.recipe-list{padding:0 1.25rem 1rem;}
.recipe-item{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0;border-bottom:1px solid var(--bg);gap:0.5rem;}
.recipe-item:last-child{border-bottom:none;}
.recipe-name{font-weight:500;font-size:0.9rem;}
.recipe-info{font-size:0.78rem;color:var(--muted);}
.recipe-btns{display:flex;gap:0.4rem;}
.recipe-btn{padding:0.25rem 0.6rem;border-radius:6px;font-size:0.75rem;font-weight:600;cursor:pointer;border:1.5px solid;}
.recipe-btn.add{background:var(--green-pale);border-color:var(--green-light);color:var(--green-dark);}
.recipe-btn.add:hover{background:var(--green-light);color:white;}
.recipe-btn.del{background:transparent;border-color:var(--border);color:var(--muted);}
.recipe-btn.del:hover{background:var(--amber-pale);border-color:var(--amber);color:var(--amber);}
.ingredient-row{display:grid;grid-template-columns:1fr 80px auto auto auto;gap:0.5rem;align-items:center;margin-bottom:0.2rem;}
.ingredient-row input{width:100%;}
.rm-ing{background:none;border:none;color:#ccc;cursor:pointer;font-size:1rem;}
.rm-ing:hover{color:var(--amber);}
.ingredient-manual{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0.4rem;background:var(--bg);border-radius:8px;padding:0.5rem;margin:0 0 0.6rem;}
.ingredient-manual input{font-size:0.78rem;padding:0.35rem 0.5rem;}
.ingredient-manual label{font-size:0.65rem;color:var(--muted);display:block;margin-bottom:0.15rem;text-transform:uppercase;letter-spacing:0.03em;}
/* Yksinkertaistettu ainesosarivi: näytetään vain kcal, proteiini/hiilihydraatit/
   rasva pysyvät DOMissa (täyttyvät automaattisesti tunnistetusta ainesosasta
   ja lasketaan mukaan kokonaissummaan) mutta piilotetaan näkyvistä selkeyden
   vuoksi — aiemmin neljä pientä kenttää per rivi teki listasta sekavan. */
.ingredient-manual.simplified{grid-template-columns:minmax(110px,160px);max-width:200px;}
.ingredient-manual.simplified .ing-extra{display:none;}
.ing-name-wrap{position:relative;}
.ing-suggest{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,0.15);z-index:30;max-height:240px;overflow-y:auto;display:none;margin-top:2px;}
.ing-suggest.show{display:block;}
.ing-suggest-item{padding:0.5rem 0.6rem;cursor:pointer;text-align:center;border-bottom:1px solid var(--border);}
.ing-suggest-item:last-child{border-bottom:none;}
.ing-suggest-item:hover,.ing-suggest-item.hl{background:var(--green-pale);}
.ing-suggest-name{font-weight:700;font-size:0.92rem;color:var(--text);}
.ing-suggest-brand{font-size:0.72rem;color:var(--muted);margin-top:0.15rem;}

/* BMR */
.bmr-result{background:var(--green-pale);border:1px solid var(--green-light);border-radius:10px;padding:1.25rem;margin-top:1rem;}
.bmr-result h3{font-size:1rem;font-weight:600;color:var(--green-dark);margin-bottom:0.75rem;}
.bmr-row{display:flex;justify-content:space-between;font-size:0.88rem;padding:0.35rem 0;border-bottom:1px solid rgba(45,106,79,0.1);}
.bmr-row:last-child{border-bottom:none;font-weight:600;font-size:0.95rem;}
.bmr-row span:last-child{font-weight:600;color:var(--green-dark);}

/* PREMIUM */
.premium-card{background:linear-gradient(135deg,#1b4332,#2d6a4f);color:white;border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem;}
.premium-card h3{font-size:1.1rem;font-weight:700;margin-bottom:0.5rem;}
.premium-card p{font-size:0.85rem;opacity:0.85;margin-bottom:1rem;}
.premium-features{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-bottom:1rem;}
.premium-feature{font-size:0.82rem;display:flex;align-items:center;gap:0.4rem;opacity:0.9;}
.premium-feature::before{content:'✓';color:#52b788;font-weight:700;}
.premium-price{font-size:1.5rem;font-weight:700;}
.premium-price span{font-size:0.85rem;font-weight:400;opacity:0.7;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;}
.shop-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;text-align:center;}
.shop-item .shop-icon{font-size:2rem;margin-bottom:0.5rem;}
.shop-item h4{font-size:0.9rem;font-weight:600;color:var(--green-dark);margin-bottom:0.25rem;}
.shop-item p{font-size:0.78rem;color:var(--muted);margin-bottom:0.75rem;}
.shop-item .price{font-size:1rem;font-weight:700;color:var(--green);margin-bottom:0.5rem;}
.chart-range-btn{background:transparent;border:1.5px solid var(--border);color:var(--muted);font-size:0.72rem;font-weight:600;padding:0.2rem 0.5rem;border-radius:6px;cursor:pointer;transition:all 0.15s}
.chart-range-btn:hover{border-color:var(--green);color:var(--green-dark)}
.chart-range-btn.active{background:var(--green);border-color:var(--green);color:white}

/* FOOD DB */
.food-db-list{padding:0 1.25rem 1rem;}
.db-item{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--bg);font-size:0.84rem;gap:0.5rem;}
.db-item:last-child{border-bottom:none;}
.db-name{font-weight:500;flex:1;}
.db-info{color:var(--muted);font-size:0.76rem;}
.db-btns{display:flex;gap:0.3rem;}
.db-add{background:var(--green-pale);border:1px solid var(--green-light);color:var(--green-dark);border-radius:6px;padding:0.22rem 0.55rem;font-size:0.75rem;font-weight:600;cursor:pointer;}
.db-add:hover{background:var(--green-light);color:white;}
.db-del{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:0.22rem 0.55rem;font-size:0.75rem;cursor:pointer;}
.db-del:hover{background:var(--amber-pale);color:var(--amber);border-color:var(--amber);}
.db-source-badge{font-size:0.65rem;padding:0.1rem 0.4rem;border-radius:10px;font-weight:600;}
.db-source-badge.shared{background:var(--green-pale);color:var(--green-dark);}
.db-source-badge.builtin{background:#f3f4f6;color:#6b7280;}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
.setting-field label{display:block;font-size:0.73rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-bottom:0.3rem;}
.setting-field input,.setting-field select{width:100%;}

/* SPINNER */
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,0.4);border-top-color:white;border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:4px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* TOAST */
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);background:var(--green-dark);color:white;padding:0.65rem 1.25rem;border-radius:8px;font-size:0.88rem;font-weight:500;transition:transform 0.3s ease;z-index:200;pointer-events:none;}
#toast.show{transform:translateX(-50%) translateY(0);}

/* MODAL */
/* modal CSS removed — forms are now full pages */

.micro-toggle-btn{padding:0.22rem 0.65rem;border-radius:20px;font-size:0.72rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--muted);transition:all 0.15s;}
.micro-toggle-btn.active{background:var(--green-pale);border-color:var(--green-light);color:var(--green-dark);}
.day-macro-bar{display:flex;align-items:center;gap:0.6rem;font-size:0.8rem;}
.day-macro-bar .dmb-label{width:88px;color:var(--muted);font-weight:600;white-space:nowrap;font-size:0.73rem;text-transform:uppercase;letter-spacing:0.04em;display:flex;align-items:center;gap:0.3rem;}
.day-macro-bar .dmb-bar{flex:1;height:7px;background:var(--border);border-radius:4px;overflow:hidden;}
.day-macro-bar .dmb-fill{height:100%;border-radius:4px;transition:width 0.4s ease;}
.day-macro-bar .dmb-nums{font-size:0.73rem;color:var(--muted);min-width:70px;text-align:right;white-space:nowrap;}
.micro-section{margin-top:0.6rem;padding-top:0.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
.micro-section:first-of-type{margin-top:0.5rem;}
.micro-section-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:0.1rem;}

/* NUTRIENTS */
.nutrient-detail{font-size:0.75rem;color:var(--muted);padding:0.2rem 0 0 0.75rem;}

footer{background:var(--card);border-top:1px solid var(--border);padding:1.5rem;text-align:center;font-size:0.75rem;color:var(--muted);line-height:1.7;margin-top:2rem;}

@media(max-width:600px){
  .summary{grid-template-columns:1fr;}
  .ring-wrap{margin:0 auto;}
  .settings-grid,.macro-targets,.fields-required{grid-template-columns:1fr;}
  .fields-optional{grid-template-columns:repeat(2,1fr);}
  .week-summary{grid-template-columns:repeat(2,1fr);}
  .week-days{grid-template-columns:repeat(7,1fr);}
  .week-day .wd-name{font-size:0.6rem;}
  .week-day .wd-num{font-size:0.82rem;}
  .week-day .wd-kcal{font-size:0.62rem;}
  .premium-features{grid-template-columns:1fr;}
}

/* Estaa iOS Safarin automaattisen koko sivun zoomauksen kun lomakekenttaan
   kosketetaan - selain zoomaa nakymaa aina kun kosketetun kentan font-size
   on alle 16px, minka jalkeen sivu ei aina palaudu siististi takaisin
   (nakyy esim. "Asetukset"-tekstin tms. nayttamisena suurempana skaalattuna
   selatessa). !important tarvitaan koska monilla kentilla on inline
   font-size-tyyli, joka muuten ohittaisi tata saannon. */
@media (max-width:480px){
  input,select,textarea{font-size:16px!important;}
}

/* Piilottaa reCAPTCHA v3:n nakyvan badgen oikeasta alakulmasta. Googlen
   kayttoehdot vaativat tallaisessa tapauksessa, etta reCAPTCHAn kaytosta
   mainitaan nakyvasti muualla sivustolla (lisatty tietosuojaselosteeseen). */
.grecaptcha-badge{visibility:hidden!important;}

/* Kielivalitsin (FI/EN) - nakyy headerissa kaannetyilla sivuilla. */
.lang-switch{display:flex;gap:0.3rem;font-size:0.78rem;}
.lang-switch a{color:rgba(255,255,255,0.7);text-decoration:none;padding:0.2rem 0.4rem;border-radius:4px;}
.lang-switch a.active{color:white;font-weight:700;background:rgba(255,255,255,0.15);}
.lang-switch a:hover{color:white;}