/* TempoLife shared SEO page styles (v2.60.1) */

  :root{--bg:#0f1220;--panel:#181e32;--line:#2b3453;--text:#f2f4fb;--muted:#b5bdd4;--accent:#78a1ff;--accent2:#3ecf8e;--carb:#f0b866;--fat:#f07a9a;--max:820px}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}
  a{color:#a9c1ff;text-underline-offset:3px}
  .wrap{width:min(var(--max),calc(100% - 32px));margin:0 auto}
  header{padding:20px 0;border-bottom:1px solid var(--line)}
  .brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}
  .brand img{width:34px;height:34px;border-radius:9px}
  .langs{float:right;font-size:.85rem;margin-top:8px}
  .langs a{color:var(--muted);text-decoration:none;margin-left:10px}
  .langs a.on{color:var(--text);font-weight:700}
  main{padding:34px 0 68px}
  .crumbs{font-size:.85rem;color:var(--muted);margin:0 0 18px}
  .crumbs a{color:var(--muted)}
  h1{font-size:clamp(1.9rem,5.5vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
  h2{font-size:clamp(1.3rem,3.6vw,1.7rem);margin:44px 0 14px}
  h3{margin:0 0 8px;font-size:1.05rem}
  p{margin:0 0 16px}
  .lede{font-size:1.14rem;color:var(--muted);max-width:700px}
  .actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 8px}
  .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:12px;background:var(--accent);color:#081027;text-decoration:none;font-weight:800}
  .button.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}
  .button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .note{color:var(--muted);font-size:.9rem}
  .kcal-hero{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:6px 0 8px}
  .kcal-hero .big{font-size:3rem;font-weight:900;line-height:1;letter-spacing:-.03em}
  .kcal-hero .unit{color:var(--muted);font-size:.95rem;margin-top:6px}
  .facts{width:100%;border-collapse:collapse;margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .facts th,.facts td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
  .facts th{color:var(--muted);font-size:.82rem;font-weight:700}
  .facts td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
  .facts tr:last-child td,.facts tr:last-child th{border-bottom:0}
  .macrobar{display:flex;height:14px;border-radius:8px;overflow:hidden;margin:8px 0 6px;border:1px solid var(--line)}
  .macrobar span{display:block}
  .macrolegend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin:0 0 8px}
  .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
  .catlist{columns:2;column-gap:26px;padding:0;margin:6px 0 0;list-style:none}
  .catlist li{margin:0 0 9px;break-inside:avoid}
  .cat{margin:30px 0 6px;color:var(--accent);font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
  .related{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;padding:0;list-style:none}
  .related a{display:inline-flex;padding:9px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel);text-decoration:none}
  details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:10px 0}
  summary{cursor:pointer;font-weight:750}
  details p{color:var(--muted);margin:12px 0 0}
  .final{margin-top:48px;background:linear-gradient(135deg,#1a2444,#18283a);border:1px solid #40517d;border-radius:20px;padding:26px}
  .tool{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:14px 0 10px}
  .tool label{display:block;color:var(--muted);font-size:.88rem;margin:12px 0 4px}
  .tool input,.tool select{width:100%;max-width:340px;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#0f1424;color:var(--text);font:inherit}
  .tool .row{display:flex;gap:16px;flex-wrap:wrap}
  .tool .row>div{flex:1;min-width:150px}
  .tool .res{margin-top:18px;padding:16px;border-radius:12px;background:#0f1424;border:1px solid var(--line);font-size:1.05rem}
  .tool .res b{font-size:1.5rem}
  .seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:4px 0}
  .seg button{padding:9px 14px;background:transparent;border:0;color:var(--muted);font:inherit;cursor:pointer}
  .seg button.on{background:var(--accent);color:#081027;font-weight:700}
  footer{border-top:1px solid var(--line);padding:24px 0 42px;color:var(--muted);font-size:.9rem}
  footer nav{display:flex;gap:18px;flex-wrap:wrap}
  @media(max-width:640px){.catlist{columns:1}.kcal-hero .big{font-size:2.4rem}main{padding-top:26px}}

/* Utility classes replacing inline style attributes on SEO pages */
.mt0{margin-top:0}
.mb8{margin:0 0 8px}
.mb14{margin-bottom:14px}
.badge-link{display:inline-flex;align-items:center}
.badge-link img{height:52px;width:auto}
.badge-link-sm{display:inline-block;margin-top:16px}
.badge-link-sm img{height:48px;width:auto}
.fine{color:var(--muted);font-size:13px;margin-top:6px}
.kcal-r{text-align:right}
.mt24{margin-top:24px}
.fw6{font-weight:600}
.n-left{text-align:left;font-weight:700}
.ci{color:inherit}