@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
 --bg:#fdf5ef;--sur:#fff8f3;--sur2:#ffeedd;--sur3:#ffd8b8;
 --brd:#f0c9a0;--acc:#e87722;--acc2:#c45a00;--grn:#2e7d32;
 --yel:#f59e0b;--red:#c0392b;
 --tx:#3a1f0a;--tx2:#7a4a20;--tx3:#b07040;
 --r:14px;--rs:9px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);min-height:100vh;padding-bottom:70px;}

/* ── NAV ── */
nav{position:sticky;top:0;z-index:200;height:60px;
 background:rgba(253,245,239,.97);backdrop-filter:blur(16px);
 border-bottom:1px solid var(--brd);
 display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;}
.logo{font-size:1.15rem;font-weight:900;cursor:pointer;
 background:linear-gradient(135deg,var(--acc),var(--acc2));
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-links{display:flex;gap:2px;}
.nav-links button{background:none;border:none;cursor:pointer;
 padding:.38rem .8rem;border-radius:8px;color:var(--tx2);font-size:.83rem;font-weight:600;
 transition:all .18s;font-family:'Inter',sans-serif;}
.nav-links button:hover{color:var(--tx);background:var(--sur2);}
.nav-links button.active{color:var(--acc);background:rgba(232,119,34,.12);}

/* ── PAGES ── */
.page{display:none;}
.page.on{display:block;}

/* ── HERO ── */
.hero{text-align:center;padding:3.5rem 1.5rem 2rem;
 background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(232,119,34,.12) 0%,transparent 70%);}
.badge{display:inline-flex;align-items:center;gap:.4rem;
 background:rgba(232,119,34,.12);border:1px solid rgba(232,119,34,.35);
 padding:.28rem .85rem;border-radius:99px;font-size:.78rem;color:var(--acc);font-weight:700;margin-bottom:1.2rem;}
.hero h1{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:.8rem;}
.hero h1 span{background:linear-gradient(135deg,var(--acc),var(--acc2));
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero p{color:var(--tx2);max-width:480px;margin:0 auto 1.5rem;font-size:.97rem;}

/* ── CATEGORY TABS ── */
.cats{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;padding:.5rem 1.5rem 1.8rem;}
.cat{padding:.42rem 1rem;border-radius:99px;font-size:.8rem;font-weight:700;cursor:pointer;
 border:1px solid var(--brd);background:var(--sur);color:var(--tx2);transition:all .18s;}
.cat:hover{border-color:var(--acc);color:var(--acc);}
.cat.active{background:var(--acc);border-color:var(--acc);color:#fff;}

/* ── GRID ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
 gap:1.1rem;padding:0 1.5rem 4rem;max-width:1380px;margin:0 auto;}

/* ── CARD ── */
.card{background:var(--sur);border:1px solid var(--brd);border-radius:var(--r);
 overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.card:hover{border-color:var(--acc);box-shadow:0 0 0 1px rgba(232,119,34,.18),0 6px 28px rgba(180,80,0,.1);}
.ch{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem .75rem;
 border-bottom:1px solid var(--brd);}
.cico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
 font-size:1.05rem;flex-shrink:0;}
.ch h3{font-size:.9rem;font-weight:800;color:var(--tx);}
.ch p{font-size:.74rem;color:var(--tx3);margin-top:1px;}
.cb{padding:.9rem 1.1rem 1.1rem;}

/* ── FORM ELEMENTS ── */
.f{margin-bottom:.65rem;}
.f label{display:block;font-size:.74rem;color:var(--tx2);margin-bottom:.25rem;font-weight:600;}
.f input,.f select{width:100%;padding:.5rem .78rem;
 background:#fff;border:1px solid var(--brd);border-radius:var(--rs);
 color:var(--tx);font-size:.88rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .18s;}
.f input:focus,.f select:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(232,119,34,.14);}
.f select option{background:#fff;}
.row{display:flex;gap:.5rem;}.row .f{flex:1;}

/* ── BUTTON ── */
.btn{width:100%;padding:.62rem 1rem;margin-top:.2rem;
 background:linear-gradient(135deg,var(--acc),var(--acc2));
 border:none;border-radius:var(--rs);color:#fff;
 font-size:.88rem;font-weight:800;cursor:pointer;
 font-family:'Inter',sans-serif;transition:opacity .18s,transform .12s;}
.btn:hover{opacity:.88;}
.btn:active{transform:scale(.98);}

/* ── RESULT ── */
.res{margin-top:.75rem;padding:.7rem .9rem;
 background:var(--sur2);border-radius:var(--rs);
 border-left:3px solid var(--grn);
 font-family:'JetBrains Mono',monospace;font-size:.84rem;color:var(--grn);
 white-space:pre-line;word-break:break-word;display:none;}
.res.on{display:block;}
.res.err{border-left-color:var(--red);color:var(--red);}

/* ── SCIENTIFIC CALC ── */
.sci-disp{background:#fff;border:1px solid var(--brd);border-radius:var(--rs);
 padding:.65rem .9rem;margin-bottom:.7rem;text-align:right;}
.sci-disp .expr{font-size:.75rem;color:var(--tx3);min-height:16px;word-break:break-all;}
.sci-disp .val{font-size:1.55rem;font-weight:700;font-family:'JetBrains Mono',monospace;word-break:break-all;color:var(--tx);}
.sci-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem;}
.sb{padding:.52rem .2rem;border-radius:8px;border:1px solid var(--brd);
 background:#fff;color:var(--tx);font-size:.78rem;font-weight:700;
 cursor:pointer;transition:all .14s;font-family:'Inter',sans-serif;}
.sb:hover{background:var(--sur2);border-color:var(--acc);color:var(--acc);}
.sb.op{color:var(--acc);}
.sb.fn{color:#b45309;}
.sb.eq{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:#fff;}
.sb.eq:hover{opacity:.85;color:#fff;}
.sb.cl{color:var(--red);}

/* ── STATIC PAGES ── */
.spage{max-width:820px;
       margin:0 auto;
       padding:3rem 1.5rem 4rem;}
.spage h1{font-size:2rem;
          font-weight:900;
          letter-spacing:-.8px;
          margin-bottom:.4rem;
          color:var(--tx);}
.spage .sub{color:var(--tx2);
            margin-bottom:2rem;}
.spage h2{font-size:1.05rem;
          font-weight:800;
          color:var(--acc);
          margin:1.8rem 0 .5rem;}
.spage p{color:var(--tx2);
         margin-bottom:.7rem;
         line-height:1.7;}
.spage ul{color:var(--tx2);
          padding-left:1.3rem;}
.spage li{margin-bottom:.35rem;
          line-height:1.7;}

/* ── STATS BOXES ── */
.stat-row{display:grid;
 grid-template-columns:repeat(3,1fr);
          gap:1rem;margin:1.5rem 0;}
.sbox{background:var(--sur);
      border:1px solid var(--brd);
      border-radius:var(--r);padding:1.1rem;
      text-align:center;}
.sbox .n{font-size:1.9rem;
         font-weight:900;
         letter-spacing:-1px;
         color:var(--acc);}
.sbox .l{font-size:.78rem;
         color:var(--tx3);
         margin-top:.2rem;}

/* ── TEAM ── */
.tgrid{display:grid;
       grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
       gap:1rem;margin-top:1.5rem;}
.tcard{background:var(--sur);
       border:1px solid var(--brd);
       border-radius:var(--r);
 padding:1.3rem .9rem;
       text-align:center;
       transition:border-color .2s;}
.tcard:hover{border-color:var(--acc);}
.tava{width:64px;
      height:64px;
      border-radius:50%;
      margin:0 auto .9rem;
 display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.6rem;
      border:2px solid var(--brd);}
.tcard h3{font-size:.88rem;
          font-weight:800;
          margin-bottom:.2rem;
          color:var(--tx);}
.tcard p{font-size:.76rem;
         color:var(--tx3);}

/* ── CONTACT ── */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem;}
.cf .f input,.cf .f select{background:var(--sur);border:1px solid var(--brd);}
.cf textarea{width:100%;padding:.55rem .78rem;background:var(--sur);border:1px solid var(--brd);
 border-radius:var(--rs);color:var(--tx);font-size:.88rem;font-family:'Inter',sans-serif;
 resize:vertical;min-height:110px;outline:none;transition:border-color .18s;}
.cf textarea:focus{border-color:var(--acc);box-shadow:0 0 0 2px rgba(232,119,34,.14);}
.ci .ii{display:flex;gap:.7rem;margin-bottom:1.1rem;align-items:flex-start;}
.ci .iico{width:38px;height:38px;border-radius:9px;background:var(--sur2);border:1px solid var(--brd);
 display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.ci .itxt h4{font-size:.82rem;font-weight:800;margin-bottom:.15rem;color:var(--tx);}
.ci .itxt p{font-size:.8rem;color:var(--tx2);margin:0;}

/* ── WORLD CLOCK ── */
.wc-row{display:flex;justify-content:space-between;align-items:center;
 padding:.38rem .65rem;background:var(--sur2);border-radius:8px;margin-bottom:.35rem;}
.wc-city{font-size:.82rem;font-weight:700;color:var(--tx);}
.wc-time{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--acc);}
.wc-date{font-size:.7rem;color:var(--tx3);margin-left:.5rem;}

/* ── BOTTOM FOOTER NAV ── */
.bottom-nav{
 position:fixed;bottom:0;left:0;right:0;z-index:300;
 background:rgba(253,245,239,.97);backdrop-filter:blur(16px);
 border-top:1px solid var(--brd);
 display:flex;align-items:center;justify-content:center;
 gap:0;height:58px;
}
.bottom-nav button{
 background:none;border:none;cursor:pointer;
 padding:.5rem 1.5rem;color:var(--tx2);
 font-size:.8rem;font-weight:700;font-family:'Inter',sans-serif;
 transition:all .18s;display:flex;flex-direction:column;
 align-items:center;gap:3px;height:100%;justify-content:center;
 border-right:1px solid var(--brd);
}
.bottom-nav button:last-child{border-right:none;}
.bottom-nav button:hover{color:var(--acc);background:rgba(232,119,34,.07);}
.bottom-nav button.active{color:var(--acc);background:rgba(232,119,34,.1);}
.bottom-nav button span.icon{font-size:1.1rem;line-height:1;}
.bottom-nav button span.label{font-size:.7rem;font-weight:700;}

/* ── TOAST ── */
.toast{position:fixed;bottom:4.5rem;left:50%;transform:translateX(-50%);
 background:var(--sur3);border:1px solid var(--grn);color:var(--grn);
 padding:.6rem 1.3rem;border-radius:99px;font-size:.84rem;font-weight:700;
 opacity:0;pointer-events:none;transition:opacity .28s;z-index:999;}
.toast.on{opacity:1;}

@media(max-width:600px){
 .grid{grid-template-columns:1fr;padding:0 .9rem 3rem;}
 .cgrid{grid-template-columns:1fr;}
 .stat-row{grid-template-columns:1fr 1fr;}
 nav{padding:0 .9rem;}
 .nav-links{display:none;}
 .bottom-nav button{padding:.5rem .9rem;font-size:.72rem;}
}
/* 1. Date Input and Calendar Popup Color Styling */
#age-d {
    border: 1px solid var(--brd);
    border-radius: var(--r);
    padding: 0.5rem;
    font-family: inherit;
    background: var(--sur);
    color: var(--tx);
}

/* 2. Customizing Browser Native Calendar Theme Colors */
/* (Ye CSS rules standard systems me browser date picker ka color override karte hain) */
::-webkit-calendar-picker-indicator {
    filter: invert(0.5); /* Icon ka color dark/light karne ke liye */
    cursor: pointer;
}

/* 3. Pure App aur Calendar Accent Color Ko Badalna */
:root {
    /* #007BFF ki jagah aap apna manpasand color (jaise Blue, Green) rakh sakte hain */
    --acc: #007BFF !important; 
}

/* 4. Missing Date (17 Tarikh) Ko Wapas Lane Ka Fix */
/* Aaj 17 July 2026 hai, isliye browser default rup se current date ko high-contrast accent ring deta hai. */
/* Agar aapka custom code kisi div ko hide kar raha hai, toh ye use wapas show karega: */
#age-d::-webkit-datetime-edit {
    display: inline-flex !important;
    visibility: visible !important;
}