:root{
  --g:#1a6b3c;--gl:#e8f5ee;--gm:#2d8f55;--gd:#124d2c;--g2:#16a35a;
  --text:#1a1a2e;--muted:#666;--border:#e2e8e2;--bg:#f5f7f5;
  --red:#c0392b;--orange:#e67e22;--blue:#1565c0;--purple:#6c3483;--teal:#0e7490;
  --sh:0 2px 16px rgba(0,0,0,0.07);--sh2:0 8px 32px rgba(0,0,0,0.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text)}
body.ur{font-family:'Noto Nastaliq Urdu',serif;font-size:16px;line-height:2.1}
body.en{font-family:'Outfit',sans-serif;font-size:15px;line-height:1.75}

/* HEADER */
header{background:var(--g);position:sticky;top:0;z-index:300;box-shadow:0 3px 24px rgba(0,0,0,0.25)}
.htop{max-width:1280px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}
.logo-icon{width:44px;height:44px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.logo-text .m{color:#fff;font-size:19px;font-weight:700;display:block;line-height:1.2}
.logo-text .s{color:rgba(255,255,255,0.75);font-size:11px;font-family:'Outfit',sans-serif;direction:ltr;display:block}
.hright{display:flex;align-items:center;gap:10px}
.srch{display:flex;align-items:center;background:rgba(255,255,255,0.14);border-radius:28px;padding:6px 14px;gap:8px;border:1px solid rgba(255,255,255,0.2)}
.srch input{background:none;border:none;outline:none;color:#fff;font-size:13px;width:180px}
.srch input::placeholder{color:rgba(255,255,255,0.55)}
.ltog{display:flex;background:rgba(255,255,255,0.12);border-radius:28px;padding:3px;gap:2px;border:1px solid rgba(255,255,255,0.25)}
.lb{padding:5px 13px;border-radius:24px;border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all .2s;background:transparent;color:rgba(255,255,255,0.7)}
.lb.on{background:#fff;color:var(--gd)}
nav{background:var(--gd)}
.nav-i{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;overflow-x:auto;gap:0}
.nav-i a{color:rgba(255,255,255,0.78);text-decoration:none;padding:9px 14px;font-size:12.5px;white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s;cursor:pointer;display:block}
.nav-i a:hover,.nav-i a.on{color:#fff;border-bottom-color:#7ffab3;background:rgba(255,255,255,0.05)}

/* HERO */
.hero{background:linear-gradient(135deg,var(--g) 0%,#1e8048 45%,#14a352 100%);color:#fff;padding:56px 20px 48px;text-align:center;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:40px;background:var(--bg);clip-path:ellipse(55% 100% at 50% 100%)}
.hero h1{font-size:36px;line-height:1.4;margin-bottom:10px;position:relative}
.hero p{font-size:16px;opacity:.9;margin-bottom:32px;position:relative}
.hsrch{display:flex;max-width:540px;margin:0 auto;background:#fff;border-radius:50px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,0.22)}
.hsrch input{flex:1;border:none;outline:none;padding:15px 22px;font-size:15px;color:var(--text)}
body.ur .hsrch input{font-family:'Noto Nastaliq Urdu',serif}
.hsrch button{background:var(--g);border:none;color:#fff;padding:0 26px;font-size:18px;cursor:pointer}
.hbadges{display:flex;justify-content:center;gap:10px;margin-top:24px;flex-wrap:wrap}
.hbdg{background:rgba(255,255,255,0.13);border:1px solid rgba(255,255,255,0.22);border-radius:28px;padding:5px 14px;font-size:12px;color:#fff}

/* COMMON */
.wrap{max-width:1280px;margin:0 auto;padding:36px 20px}
.stitle{font-size:20px;color:var(--gd);margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid var(--g);display:flex;align-items:center;gap:8px}
.sh2{font-size:18px;color:var(--gd);margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* EMERGENCY BANNER */
.emg{background:#fff9f0;border:2px solid var(--orange);border-radius:14px;padding:16px 20px;margin-bottom:28px;display:flex;gap:12px;align-items:flex-start}
.emg .ei{font-size:24px;flex-shrink:0}
.emg strong{color:var(--red);display:block;margin-bottom:3px;font-size:14px}
.emg p{font-size:13px;color:var(--muted)}

/* STATS */
.stats{background:#fff;border-radius:16px;padding:20px;margin-bottom:32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;box-shadow:var(--sh);text-align:center}
.stat .n{font-size:24px;font-weight:800;color:var(--g);font-family:'Outfit',sans-serif;direction:ltr;display:block}
.stat .l{font-size:12px;color:var(--muted);display:block}

/* CATEGORY GRID */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:40px}
.cat-card{background:#fff;border-radius:16px;padding:20px;cursor:pointer;transition:all .2s;box-shadow:var(--sh);border:2px solid transparent;display:flex;align-items:flex-start;gap:14px;text-decoration:none;color:inherit}
.cat-card:hover{border-color:var(--g);transform:translateY(-3px);box-shadow:var(--sh2)}
.cat-ico{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.cat-info h3{font-size:15px;color:var(--gd);margin-bottom:4px;line-height:1.4}
.cat-info p{font-size:12px;color:var(--muted);line-height:1.7}
.cat-info .cnt{font-size:11px;color:var(--g);font-family:'Outfit',sans-serif;font-weight:600;margin-top:6px}

/* TOOLS GRID */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:40px}
.tool-card{background:#fff;border-radius:14px;padding:20px;cursor:pointer;transition:all .2s;box-shadow:var(--sh);border:2px solid transparent;text-align:center;text-decoration:none;display:block}
.tool-card:hover{border-color:var(--g);transform:translateY(-2px)}
.tool-card .icon{font-size:36px;margin-bottom:10px}
.tool-card h3{font-size:14px;color:var(--gd);font-weight:700;margin-bottom:5px}
.tool-card p{font-size:12px;color:var(--muted)}
.tool-badge{display:inline-block;background:var(--gl);color:var(--gd);padding:2px 8px;border-radius:10px;font-size:11px;margin-top:6px;font-weight:600}

/* A-Z */
.az-box{background:#fff;border-radius:16px;padding:24px;margin-bottom:36px;box-shadow:var(--sh)}
.az-ltrs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;direction:ltr;justify-content:flex-end}
.az-l{width:32px;height:32px;background:var(--gl);color:var(--gd);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:700;cursor:pointer;transition:all .2s;font-size:13px}
.az-l:hover,.az-l.sel{background:var(--g);color:#fff}
.az-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:6px}
.az-it{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;transition:background .2s;border:1px solid transparent;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.az-it:hover{background:var(--gl);border-color:var(--g);color:var(--gd)}
.az-it .coming{font-size:10px;background:#f0f0f0;color:#999;padding:1px 6px;border-radius:8px;font-family:'Outfit',sans-serif}

/* CONDITION DETAIL */
.cdl{max-width:1280px;margin:0 auto;padding:24px 20px;display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.csb{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh);position:sticky;top:88px}
.csb-h{background:var(--g);color:#fff;padding:16px 18px}
.csb-h h2{font-size:18px;line-height:1.4}
.csb-h .et{font-family:'Outfit',sans-serif;font-size:12px;direction:ltr;opacity:.8;display:block;margin-top:3px}
.csb-nav a{display:flex;align-items:center;gap:9px;padding:12px 16px;text-decoration:none;color:var(--text);font-size:13px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .2s}
.csb-nav a:hover,.csb-nav a.on{background:var(--gl);color:var(--gd);border-right:4px solid var(--g)}
body.en .csb-nav a:hover,body.en .csb-nav a.on{border-right:none;border-left:4px solid var(--g)}
.csb-dot{width:7px;height:7px;background:var(--g);border-radius:50%;flex-shrink:0}
.csb-ft{padding:12px 16px;background:var(--gl)}
.back-b{display:flex;align-items:center;gap:6px;color:var(--gd);font-size:13px;cursor:pointer;font-weight:600;text-decoration:none}
.cc{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.sec{display:none}.sec.on{display:block}
.ch{background:linear-gradient(135deg,var(--g),var(--gm));color:#fff;padding:28px 34px}
.ch h1{font-size:26px;margin-bottom:5px;line-height:1.4}
.ch .et{font-family:'Outfit',sans-serif;direction:ltr;font-size:13px;opacity:.8}
.ch p{margin-top:12px;font-size:14px;opacity:.95;line-height:2}
.cb{padding:28px 34px}
.cb h2{font-size:18px;color:var(--gd);margin-bottom:12px;margin-top:26px;padding-bottom:7px;border-bottom:2px solid var(--gl)}
.cb h2:first-child{margin-top:0}
.cb p{font-size:14px;line-height:2.2;margin-bottom:13px}
.ib{border-radius:12px;padding:16px 20px;margin:18px 0}
.ib.g{background:var(--gl);border-right:4px solid var(--g)}
.ib.o{background:#fff8f0;border-right:4px solid var(--orange)}
.ib.r{background:#fef0ee;border-right:4px solid var(--red)}
.ib.b{background:#e8f4fd;border-right:4px solid var(--blue)}
.ib.p{background:#f5eef8;border-right:4px solid var(--purple)}
body.en .ib.g{border-right:none;border-left:4px solid var(--g)}
body.en .ib.o{border-right:none;border-left:4px solid var(--orange)}
body.en .ib.r{border-right:none;border-left:4px solid var(--red)}
body.en .ib.b{border-right:none;border-left:4px solid var(--blue)}
body.en .ib.p{border-right:none;border-left:4px solid var(--purple)}
.ib h3{font-size:14px;margin-bottom:7px}
.ib.g h3{color:var(--gd)}.ib.o h3{color:#a04000}.ib.r h3{color:var(--red)}.ib.b h3{color:var(--blue)}.ib.p h3{color:var(--purple)}
.sl{list-style:none;margin:12px 0}
.sl li{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;line-height:2}
.sl li:last-child{border-bottom:none}
.sb{width:17px;height:17px;background:var(--g);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:7px}
.lgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:16px 0}
.li{background:var(--gl);border-radius:12px;padding:16px;text-align:center}
.li .ic{font-size:26px;margin-bottom:7px}
.li h4{font-size:13px;color:var(--gd);margin-bottom:5px}
.li p{font-size:11px;color:var(--muted);line-height:1.7}
.mc{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start}
.mi{width:44px;height:44px;background:#e8f4fd;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.md h4{font-size:14px;color:var(--gd);margin-bottom:4px}
.md p{font-size:13px;color:var(--muted);line-height:2}
.disc{background:#f8f8f8;border-radius:9px;padding:12px 16px;margin-top:24px;font-size:12px;color:var(--muted);border:1px solid var(--border)}

/* BREADCRUMB */
.bc{background:#fff;padding:10px 20px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted)}
.bci{max-width:1280px;margin:0 auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.bci a{color:var(--g);cursor:pointer;text-decoration:none}

/* HEALTH TOOLS */
.tools-page{max-width:1000px;margin:0 auto;padding:36px 20px}
.calc-card{background:#fff;border-radius:20px;padding:32px;box-shadow:var(--sh);margin-bottom:28px}
.calc-card h2{font-size:20px;color:var(--gd);margin-bottom:8px}
.calc-card > p{font-size:14px;color:var(--muted);margin-bottom:24px}
.calc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.ci label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.ci input,.ci select{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:10px;font-size:14px;outline:none;transition:border .2s}
body.en .ci input,body.en .ci select{font-family:'Outfit',sans-serif}
.ci input:focus,.ci select:focus{border-color:var(--g)}
.calc-btn{width:100%;background:var(--g);color:#fff;border:none;padding:13px;border-radius:12px;font-size:15px;cursor:pointer;transition:background .2s;margin-top:4px}
.calc-btn:hover{background:var(--gd)}
.bmi-result{display:none;margin-top:20px;border-radius:14px;overflow:hidden}
.bmi-num{padding:24px;text-align:center;color:#fff}
.bmi-num .big{font-size:56px;font-weight:800;font-family:'Outfit',sans-serif;direction:ltr;display:block;line-height:1}
.bmi-num .cat{font-size:18px;margin-top:8px;display:block}
.bmi-detail{padding:20px 24px;background:#fff}
.bmi-detail p{font-size:14px;line-height:2;margin-bottom:12px}
.bmi-bar{margin:16px 0}
.bmi-bar-track{height:14px;border-radius:10px;background:linear-gradient(to left,#c0392b 0%,#e67e22 25%,#f1c40f 45%,#2ecc71 60%,#e67e22 80%,#c0392b 100%);position:relative;margin-bottom:8px}
.bmi-marker{position:absolute;top:-6px;width:2px;height:26px;background:#1a1a2e;border-radius:2px;transform:translateX(-50%);transition:left .5s}
.bmi-labels{display:flex;justify-content:space-between;font-size:11px;font-family:'Outfit',sans-serif;direction:ltr;color:var(--muted)}
.bmi-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.bmi-table th{background:var(--gl);color:var(--gd);padding:8px 12px;text-align:right;font-weight:600}
body.en .bmi-table th{text-align:left}
.bmi-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
.bmi-table tr:last-child td{border-bottom:none}
.bmi-ok{background:#e8f5ee}.bmi-warn{background:#fff8f0}.bmi-danger{background:#fef0ee}
.waist-result{display:none;margin-top:16px}
.water-result{display:none;margin-top:16px}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0}
.bp-box{border-radius:12px;padding:16px;text-align:center}
.bp-box .range{font-size:15px;font-weight:700;font-family:'Outfit',sans-serif;direction:ltr;display:block}
.bp-box .label{font-size:13px;margin-top:4px;display:block}

/* LIFESTYLE */
.lifestyle-hub{max-width:1280px;margin:0 auto;padding:36px 20px}
.ls-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:36px}
.ls-cat{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh);cursor:pointer;transition:all .2s;border:2px solid transparent}
.ls-cat:hover{border-color:var(--g);transform:translateY(-3px)}
.ls-cat-head{padding:20px;display:flex;align-items:center;gap:12px}
.ls-cat-body{padding:0 20px 18px}
.ls-cat-body p{font-size:12px;color:var(--muted);line-height:1.8}
.ls-cat-body ul{list-style:none;margin-top:8px}
.ls-cat-body ul li{font-size:12px;color:var(--muted);padding:3px 0;border-bottom:1px solid var(--border);display:flex;gap:6px}
.ls-cat-body ul li::before{content:'→';color:var(--g)}
.ls-content{display:none}
.ls-content.on{display:block}
.ls-art{background:#fff;border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:var(--sh)}
.ls-art h2{font-size:20px;color:var(--gd);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--gl)}
.ls-art h3{font-size:16px;color:var(--gd);margin:18px 0 10px}
.ls-art p{font-size:14px;line-height:2.2;margin-bottom:14px;color:var(--text)}
.tip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:16px 0}
.tip{background:var(--gl);border-radius:12px;padding:16px;text-align:center}
.tip .ic{font-size:28px;margin-bottom:8px}
.tip h4{font-size:14px;color:var(--gd);margin-bottom:5px}
.tip p{font-size:12px;color:var(--muted);line-height:1.7}

/* CONSULT */
.con-hero{background:linear-gradient(135deg,#0a4f2d,var(--g));color:#fff;padding:52px 20px;text-align:center}
.con-hero h1{font-size:30px;margin-bottom:10px;line-height:1.4}
.con-hero p{font-size:15px;opacity:.9;max-width:580px;margin:0 auto}
.con-body{max-width:1280px;margin:0 auto;padding:36px 20px}
.con-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:44px}
.con-card{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--sh)}
.con-card h2{font-size:18px;color:var(--gd);margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--gl)}
.fg{margin-bottom:16px}
.fg label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 14px;border:2px solid var(--border);border-radius:9px;font-size:14px;outline:none;transition:border .2s}
body.ur .fg input,body.ur .fg select,body.ur .fg textarea{font-family:'Noto Nastaliq Urdu',serif;direction:rtl}
body.en .fg input,body.en .fg select,body.en .fg textarea{font-family:'Outfit',sans-serif;direction:ltr}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--g)}
.sbtn{width:100%;background:var(--g);color:#fff;border:none;padding:13px;border-radius:11px;font-size:15px;cursor:pointer;transition:background .2s;margin-top:6px}
.sbtn:hover{background:var(--gd)}
.succ{background:var(--gl);border:2px solid var(--g);border-radius:12px;padding:18px;text-align:center;display:none}
.pay-ms{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pm{background:#f8f8f8;border:2px solid var(--border);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.pm:hover{border-color:var(--g);background:var(--gl)}
.pm .pill{font-family:'Outfit',sans-serif;font-size:10px;background:var(--g);color:#fff;padding:1px 7px;border-radius:8px}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:24px 0}
.plan{background:#fff;border-radius:18px;padding:26px;box-shadow:var(--sh);border:2px solid var(--border);position:relative;transition:transform .2s}
.plan:hover{transform:translateY(-3px)}
.plan.ft{border-color:var(--g)}
.pbdg{position:absolute;top:-11px;right:18px;background:var(--g);color:#fff;padding:3px 12px;border-radius:18px;font-size:11px;font-weight:700}
.plan h3{font-size:18px;color:var(--gd);margin-bottom:4px}
.plan .pr{font-size:26px;font-weight:800;color:var(--g);font-family:'Outfit',sans-serif;direction:ltr}
.plan .ps{font-size:12px;color:var(--muted);margin-bottom:16px}
.plan ul{list-style:none}
.plan ul li{padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;display:flex;gap:7px;align-items:flex-start}
.plan ul li:last-child{border-bottom:none}
.plan ul li::before{content:'✓';color:var(--g);font-weight:700;flex-shrink:0}
.pbtn{width:100%;margin-top:18px;background:var(--g);color:#fff;border:none;padding:11px;border-radius:9px;font-size:14px;cursor:pointer}
.plan.ft .pbtn{background:var(--gd)}

/* TEAM */
.team-page{max-width:960px;margin:0 auto;padding:36px 20px}
.team-hero-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.th{background:linear-gradient(135deg,var(--g),var(--gm));color:#fff;padding:36px;display:flex;align-items:center;gap:24px}
.tav{width:90px;height:90px;background:rgba(255,255,255,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;flex-shrink:0;border:3px solid rgba(255,255,255,0.35)}
.ti h1{font-size:24px;margin-bottom:5px}
.ti p{opacity:.88;font-size:14px;line-height:1.7}
.tc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tc span{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);border-radius:20px;padding:4px 12px;font-size:12px}
.tb{padding:28px 36px}
.si-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:16px 0}
.si{background:var(--gl);border-radius:12px;padding:14px;text-align:center}
.si .ic{font-size:28px;margin-bottom:6px}
.si p{font-size:12px;color:var(--gd)}
.avail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.avail-box{background:#f8f8f8;border-radius:10px;padding:14px;border:1px solid var(--border);font-size:13px;line-height:1.8}
.avail-box h4{font-size:13px;color:var(--gd);margin-bottom:5px}

/* EMERGENCY */
.ep{max-width:720px;margin:0 auto;padding:36px 20px}
.eh{background:linear-gradient(135deg,#8b0000,var(--red));color:#fff;border-radius:18px;padding:28px;text-align:center;margin-bottom:22px}
.eh h1{font-size:26px;margin-bottom:6px}
.eh p{font-size:14px;opacity:.9}
.en-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin:14px 0}
.en-card{background:var(--red);color:#fff;border-radius:12px;padding:14px;text-align:center}
.nn{font-size:28px;font-weight:800;font-family:'Outfit',sans-serif;direction:ltr}
.nl{font-size:12px;margin-top:4px;opacity:.9}

/* ABOUT */
.ap{max-width:820px;margin:0 auto;padding:36px 20px}

/* FOOTER */
footer{background:var(--gd);color:#fff;margin-top:60px}
.fi{max-width:1280px;margin:0 auto;padding:36px 20px 20px}
.ftrust{background:rgba(255,255,255,0.07);border-radius:12px;padding:14px 20px;margin-bottom:28px;display:flex;gap:12px;align-items:center;font-size:13px;border:1px solid rgba(255,255,255,0.12)}
.fg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:28px;margin-bottom:28px}
.fc h3{font-size:14px;margin-bottom:12px;color:rgba(255,255,255,0.9);padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.12)}
.fc a{display:block;font-size:13px;color:rgba(255,255,255,0.65);margin-bottom:7px;cursor:pointer;text-decoration:none;transition:color .2s}
.fc a:hover{color:#fff}
.fb{border-top:1px solid rgba(255,255,255,0.1);padding-top:16px;font-size:12px;color:rgba(255,255,255,0.5)}

/* RESPONSIVE */
@media(max-width:768px){
  .cdl{grid-template-columns:1fr}
  .csb{position:static}
  .con-grid{grid-template-columns:1fr}
  .calc-inputs{grid-template-columns:1fr}
  .hero h1{font-size:26px}
  .avail-grid{grid-template-columns:1fr}
  .th{flex-direction:column;text-align:center}
  .srch{display:none}
}

/* ==================== WHEN TO ACT ====================*/
.wta-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 8px; }
.wta-title { font-size: 18px; font-weight: 700; color: var(--t); margin: 0 0 14px; }
.wta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media(max-width:700px){ .wta-grid { grid-template-columns: 1fr; } }
.wta-card { border-radius: 14px; padding: 18px 16px; }
.wta-card.home { background: #e8f5ee; border: 1.5px solid #a5d6b5; }
.wta-card.doc  { background: #e8f0fb; border: 1.5px solid #9cb8f0; }
.wta-card.em   { background: #fdecea; border: 1.5px solid #f5a6a6; }
.wta-card h3   { font-size: 14px; font-weight: 700; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.wta-card.home h3 { color: #1a6b3c; }
.wta-card.doc  h3 { color: #2057b0; }
.wta-card.em   h3 { color: #c62828; }
.wta-card ul   { list-style: none; padding: 0; margin: 0; }
.wta-card ul li { font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid rgba(0,0,0,.06); line-height: 1.5; color: var(--t); }
.wta-card ul li:last-child { border: none; }
.wta-card ul li::before { content: '• '; font-weight: 700; }
.wta-card.home ul li::before { color: #1a6b3c; }
.wta-card.doc  ul li::before { color: #2057b0; }
.wta-card.em   ul li::before { color: #c62828; }

/* ==================== TOOL LINK CARD ====================*/
.tl-wrap { max-width: 1100px; margin: 0 auto; padding: 12px 16px 4px; }
.tl-card { background: linear-gradient(135deg, var(--gl) 0%, #dff0e8 100%); border: 1.5px solid var(--g); border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tl-card .tl-info h4 { font-size: 14px; font-weight: 700; color: var(--g); margin: 0 0 3px; }
.tl-card .tl-info p  { font-size: 12px; color: var(--t2); margin: 0; }
.tl-card a { background: var(--g); color: #fff; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tl-card a:hover { background: var(--gd); }

/* ==================== TRACKER ====================*/
.tr-page { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.tr-hero { background: linear-gradient(135deg, #2057b0 0%, #3b7dd8 100%); color: #fff; border-radius: 16px; padding: 32px; margin-bottom: 24px; }
.tr-hero h1 { font-size: 26px; margin: 0 0 8px; }
.tr-hero p  { font-size: 14px; opacity: .85; margin: 0; }
.tr-tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tr-tab { flex: 1; padding: 12px; border: 2px solid #e0ede5; border-radius: 10px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--t2); transition: all .2s; }
.tr-tab.on { border-color: var(--g); background: var(--gl); color: var(--g); }
.tr-panel { display: none; }
.tr-panel.on { display: block; }
.tr-add-card { background: #fff; border: 1px solid #e8edf2; border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.tr-add-card h3 { font-size: 16px; color: var(--t); margin: 0 0 14px; }
.tr-inputs { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tr-inputs .ti { flex: 1; min-width: 110px; }
.tr-inputs label { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 4px; }
.tr-inputs input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #d0d9df; border-radius: 8px; font-family: inherit; font-size: 14px; }
.tr-inputs input:focus { outline: none; border-color: var(--g); }
.tr-add-btn { padding: 11px 22px; background: var(--g); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.tr-range-card { background: var(--gl); border: 1px solid #c8e6d4; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; font-size: 13px; }
.tr-range-card h4 { font-size: 13px; font-weight: 700; color: var(--g); margin: 0 0 6px; }
.tr-range-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tr-range-row span { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.rg { background: #d4edda; color: #155724; }
.ry { background: #fff3cd; color: #856404; }
.rr { background: #f8d7da; color: #721c24; }
.tr-chart-wrap { background: #fff; border: 1px solid #e8edf2; border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.tr-log { background: #fff; border: 1px solid #e8edf2; border-radius: 14px; overflow: hidden; }
.tr-log-head { display: grid; gap: 0; background: var(--gl); padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--g); }
.tr-log-row { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid #f0f0f0; font-size: 13px; gap: 8px; }
.tr-log-row:last-child { border: none; }
.tr-log-row .tr-date { color: var(--t2); font-size: 12px; flex: 1; }
.tr-log-row .tr-val { font-family: Outfit,sans-serif; font-weight: 700; font-size: 16px; flex: 1; }
.tr-log-row .tr-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 700; }
.tr-log-row .tr-del { background: none; border: none; cursor: pointer; color: #ccc; font-size: 16px; padding: 0 4px; }
.tr-del:hover { color: #e53935; }
.tr-empty { text-align: center; padding: 30px; color: var(--t2); font-size: 13px; }

/* ==================== REMINDERS ====================*/
.rm-page { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.rm-hero { background: linear-gradient(135deg, #7b2d8b 0%, #a855c8 100%); color: #fff; border-radius: 16px; padding: 32px; margin-bottom: 24px; }
.rm-hero h1 { font-size: 26px; margin: 0 0 8px; }
.rm-hero p  { font-size: 14px; opacity: .85; margin: 0; }
.rm-add-card { background: #fff; border: 1px solid #e8edf2; border-radius: 14px; padding: 22px; margin-bottom: 20px; }
.rm-add-card h3 { font-size: 16px; color: var(--t); margin: 0 0 14px; }
.rm-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.rm-row .ri { flex: 1; min-width: 130px; }
.rm-row label { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 4px; }
.rm-row input, .rm-row select { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid #d0d9df; border-radius: 8px; font-family: inherit; font-size: 14px; }
.rm-row input:focus, .rm-row select:focus { outline: none; border-color: #7b2d8b; }
.rm-add-btn { padding: 11px 22px; background: #7b2d8b; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; width: 100%; margin-top: 4px; }
.rm-list { display: flex; flex-direction: column; gap: 12px; }
.rm-item { background: #fff; border: 1.5px solid #e0d4eb; border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rm-item .rm-icon { width: 44px; height: 44px; background: #f3e5f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.rm-item .rm-info { flex: 1; }
.rm-item .rm-info h4 { font-size: 14px; font-weight: 700; color: var(--t); margin: 0 0 3px; }
.rm-item .rm-info p  { font-size: 12px; color: var(--t2); margin: 0; }
.rm-item .rm-actions { display: flex; gap: 8px; align-items: center; }
.rm-taken { padding: 7px 14px; background: #e8f5ee; color: #1a6b3c; border: 1.5px solid #a5d6b5; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s; }
.rm-taken.done { background: #1a6b3c; color: #fff; border-color: #1a6b3c; }
.rm-missed { padding: 7px 14px; background: #fdecea; color: #c62828; border: 1.5px solid #f5a6a6; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s; }
.rm-missed.done { background: #c62828; color: #fff; border-color: #c62828; }
.rm-del-btn { background: none; border: 1px solid #ddd; border-radius: 8px; padding: 7px 10px; cursor: pointer; color: #ccc; font-size: 14px; }
.rm-del-btn:hover { color: #e53935; border-color: #e53935; }
.rm-notif-bar { background: #f3e5f9; border: 1.5px solid #ce93d8; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.rm-notif-bar p { font-size: 13px; color: #4a148c; margin: 0; flex: 1; }
.rm-notif-bar button { padding: 8px 16px; background: #7b2d8b; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rm-today-summary { background: var(--gl); border: 1px solid #c8e6d4; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; display: flex; gap: 20px; }
.rm-today-summary .ts { text-align: center; flex: 1; }
.rm-today-summary .ts .n { font-family: Outfit,sans-serif; font-size: 28px; font-weight: 800; color: var(--g); }
.rm-today-summary .ts .l { font-size: 12px; color: var(--t2); }

/* ==================== DOCTOR TRUST BADGE ====================*/
.dr-trust-bar { background: linear-gradient(135deg, #1a3a2a 0%, #1a6b3c 100%); border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 0; }
.dr-trust-bar .dt-avatar { width: 46px; height: 46px; background: rgba(255,255,255,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; border: 2px solid rgba(255,255,255,.3); }
.dr-trust-bar .dt-info { flex: 1; }
.dr-trust-bar .dt-info h4 { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.dr-trust-bar .dt-info p  { font-size: 11px; color: rgba(255,255,255,.75); margin: 0; }
.dr-trust-bar .dt-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dr-trust-bar .dt-badge { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 3px 10px; font-size: 11px; color: #fff; font-weight: 600; white-space: nowrap; }

/* Doctor badge on condition pages — compact version */
.dr-reviewed { display: inline-flex; align-items: center; gap: 6px; background: #e8f5ee; border: 1px solid #a5d6b5; border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #1a6b3c; margin-bottom: 12px; }

/* ==================== HABIT NUDGE ====================*/
.habit-nudge { background: #fff; border: 1.5px solid #e0ede5; border-radius: 14px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.habit-nudge .hn-ic { font-size: 28px; flex-shrink: 0; }
.habit-nudge .hn-info { flex: 1; }
.habit-nudge .hn-info h4 { font-size: 14px; font-weight: 700; color: var(--t); margin: 0 0 2px; }
.habit-nudge .hn-info p  { font-size: 12px; color: var(--t2); margin: 0; }
.habit-nudge .hn-actions { display: flex; gap: 8px; }
.hn-yes { padding: 8px 16px; background: var(--g); color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.hn-no  { padding: 8px 16px; background: #f5f5f5; color: var(--t2); border: 1px solid #ddd; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.hn-done { background: var(--gl); border: 1.5px solid var(--g); border-radius: 14px; padding: 14px 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--g); font-weight: 600; }

/* ==================== REMINDER ALIVE / DAILY CHECK-IN ====================*/
.rm-checkin { background: linear-gradient(135deg, #7b2d8b 0%, #a855c8 100%); border-radius: 14px; padding: 18px 20px; color: #fff; margin-bottom: 20px; }
.rm-checkin h3 { font-size: 15px; margin: 0 0 12px; }
.rm-checkin-items { display: flex; flex-direction: column; gap: 10px; }
.rm-ci-item { background: rgba(255,255,255,.15); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rm-ci-item .ci-name { flex: 1; font-size: 13px; font-weight: 600; }
.rm-ci-item .ci-time { font-size: 11px; opacity: .75; }
.rm-ci-btn-t { padding: 7px 14px; background: #4caf50; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rm-ci-btn-m { padding: 7px 14px; background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rm-ci-btn-t.done { opacity: .6; cursor: default; }
.rm-checkin-empty { font-size: 13px; opacity: .75; text-align: center; padding: 8px; }

/* Simplified tracker input */
.tr-simple-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.tr-big-input { font-family: Outfit, sans-serif; font-size: 32px; font-weight: 800; width: 100%; box-sizing: border-box; padding: 12px 16px; border: 2px solid #d0d9df; border-radius: 10px; color: var(--t); text-align: center; }
.tr-big-input:focus { outline: none; border-color: var(--g); }
.tr-today-label { font-size: 12px; color: var(--t2); text-align: center; margin-top: 4px; }
.tr-trend { display: flex; align-items: center; gap: 6px; font-family: Outfit, sans-serif; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 8px; margin-bottom: 14px; }
.tr-trend.up   { background: #fdecea; color: #c62828; }
.tr-trend.down { background: #e8f5ee; color: #1a6b3c; }
.tr-trend.flat { background: #f5f5f5; color: var(--t2); }

/* ==================== QUICK ACTIONS ====================*/
.qa-wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 28px; }
.qa-title { font-size: 17px; font-weight: 700; color: var(--t); margin-bottom: 12px; }
.qa-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media(max-width:700px){ .qa-grid { grid-template-columns: repeat(2,1fr); } }
.qa-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border-radius: 14px; text-decoration: none; font-family: inherit; cursor: pointer; border: none; transition: transform .2s, box-shadow .2s; text-align: center; }
.qa-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.qa-btn .qa-ic { font-size: 28px; }
.qa-btn .qa-lbl { font-size: 13px; font-weight: 700; }
.qa-btn .qa-sub { font-size: 11px; opacity: .8; }
.qa-btn.green  { background: linear-gradient(135deg, #1a6b3c, #2d9e5f); color: #fff; }
.qa-btn.purple { background: linear-gradient(135deg, #7b2d8b, #a855c8); color: #fff; }
.qa-btn.blue   { background: linear-gradient(135deg, #2057b0, #3b7dd8); color: #fff; }
.qa-btn.red    { background: linear-gradient(135deg, #c62828, #e53935); color: #fff; }

/* ==================== EMOTIONAL TAGLINE ====================*/
.hero-tagline { font-size: 13px; opacity: .75; margin-top: 10px; font-style: italic; }

/* ==================== CONDITION REMINDER CTA ====================*/
.cond-reminder-cta { max-width: 1100px; margin: 0 auto 8px; padding: 0 16px; }
.crc-card { background: linear-gradient(135deg, #7b2d8b 0%, #a855c8 100%); border-radius: 14px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.crc-card .crc-text h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.crc-card .crc-text p  { font-size: 12px; color: rgba(255,255,255,.8); margin: 0; }
.crc-card a { background: #fff; color: #7b2d8b; border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.crc-card a:hover { background: #f3e5f9; }

/* ==================== FOOTER DOCTOR BADGE ====================*/
.fb-doctor { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.fb-doctor .fbd-ic { font-size: 24px; flex-shrink: 0; }
.fb-doctor .fbd-text p:first-child { font-size: 13px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.fb-doctor .fbd-text p:last-child  { font-size: 11px; color: rgba(255,255,255,.65); margin: 0; }
.fb-doctor-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.fb-doctor-badges span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 3px 10px; font-size: 11px; color: rgba(255,255,255,.85); font-weight: 600; }