*{margin:0;padding:0;box-sizing:border-box}
:root{--green:#2ecc71;--dark:#27ae60;--light:#e8f8f0;--text:#2c3e50;--gray:#95a5a6;--bg:#f8fffe}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}
.container{max-width:800px;margin:0 auto;padding:0 20px}

/* NAV */
nav{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:100}
nav .container{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-size:1.4rem;font-weight:700;color:var(--green)}
.logo span{margin-right:4px}
.nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nav-links a{padding:6px 12px;border-radius:8px;font-size:.85rem;transition:.2s}
.nav-links a:hover,.nav-links a.active{background:var(--light);color:var(--green)}
.lang-sw{display:flex;gap:2px;margin-left:8px}
.lang-sw button{border:1px solid #ddd;background:#fff;padding:3px 8px;border-radius:6px;font-size:.75rem;cursor:pointer;transition:.2s}
.lang-sw button.active{background:var(--green);color:#fff;border-color:var(--green)}

/* HERO */
.hero{text-align:center;padding:60px 20px 40px}
.hero h1{font-size:2.2rem;margin-bottom:12px}
.hero h1 .accent{color:var(--green)}
.hero p{color:var(--gray);font-size:1.1rem;max-width:500px;margin:0 auto}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;padding:20px 0 60px}
.card{background:#fff;border-radius:16px;padding:28px 24px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.05);transition:.3s;cursor:pointer;border:2px solid transparent}
.card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 8px 24px rgba(46,204,113,.15)}
.card .icon{font-size:2.4rem;margin-bottom:12px}
.card h3{font-size:1.1rem;margin-bottom:6px}
.card p{font-size:.85rem;color:var(--gray)}

/* CALC PAGE */
.calc-page{padding:30px 0 60px}
.calc-page h1{text-align:center;font-size:1.8rem;margin-bottom:8px}
.calc-page .subtitle{text-align:center;color:var(--gray);margin-bottom:30px}
.calc-box{background:#fff;border-radius:16px;padding:32px;box-shadow:0 2px 16px rgba(0,0,0,.06);max-width:600px;margin:0 auto}
label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem}
input,select{width:100%;padding:12px 14px;border:2px solid #e8e8e8;border-radius:10px;font-size:1rem;margin-bottom:16px;transition:.2s;outline:none}
input:focus,select:focus{border-color:var(--green)}
.row{display:flex;gap:12px}
.row>*{flex:1}
button.calc-btn{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:.2s}
button.calc-btn:hover{background:var(--dark)}

/* RESULT */
.result{margin-top:24px;padding:24px;background:var(--light);border-radius:14px;display:none}
.result.show{display:block}
.result h2{text-align:center;font-size:2rem;color:var(--green);margin-bottom:4px}
.result .label{text-align:center;color:var(--gray);font-size:.9rem;margin-bottom:16px}
.result .advice{padding:14px;background:#fff;border-radius:10px;font-size:.9rem;line-height:1.7}
.result .advice strong{color:var(--green)}

/* BMI BAR */
.bmi-bar{height:18px;border-radius:9px;background:linear-gradient(90deg,#3498db 0%,#2ecc71 25%,#f1c40f 50%,#e67e22 75%,#e74c3c 100%);position:relative;margin:16px 0 8px}
.bmi-marker{width:4px;height:26px;background:var(--text);border-radius:2px;position:absolute;top:-4px;transition:.4s}
.bmi-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--gray)}

/* HR ZONES */
.zone{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;margin-bottom:8px;font-size:.9rem}
.zone .dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.zone-fat{background:#e8f8f0}.zone-fat .dot{background:#2ecc71}
.zone-aero{background:#ebf5fb}.zone-aero .dot{background:#3498db}
.zone-ana{background:#fdedec}.zone-ana .dot{background:#e74c3c}

/* SLEEP */
.sleep-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}
.sleep-card{background:#fff;border-radius:12px;padding:16px;text-align:center;border:2px solid #e8e8e8}
.sleep-card.recommended{border-color:var(--green);background:var(--light)}
.sleep-card .time{font-size:1.4rem;font-weight:700;color:var(--text)}
.sleep-card .cycles{font-size:.8rem;color:var(--gray)}

/* FOOTER */
footer{text-align:center;padding:30px 20px;border-top:1px solid #eee;font-size:.85rem;color:var(--gray)}
footer .tip-btn{display:inline-block;margin-top:10px;padding:8px 20px;background:var(--green);color:#fff;border-radius:10px;font-size:.85rem;cursor:pointer;border:none;transition:.2s}
footer .tip-btn:hover{background:var(--dark)}
.tip-addr{font-size:.7rem;color:var(--gray);margin-top:6px;word-break:break-all}

@media(max-width:600px){
  .hero h1{font-size:1.6rem}
  .nav-links a{padding:4px 8px;font-size:.78rem}
  .calc-box{padding:20px}
  .row{flex-direction:column;gap:0}
}