@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
      --green-700:#108044;
      --green-500:#32cd32;
      --blue-400:#4ec7de;
      --blue-600:#1aa3b8;
      --milk:#f7faf9;
      --ink:#0b1b1f;
      --pink:#f7a9bf;
      --shadow: 0 10px 24px rgba(0,0,0,.08);
      --radius: 18px;
      --font-family: 'Poppins', sans-serif;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:var(--font-family);
      background:linear-gradient(145deg,var(--milk), #e9f7f3 35%, #f6fbfd);
      color:var(--ink);
      display:flex;
      flex-direction:column;
      min-height:100vh;
    }
    .sidebar{position:fixed; inset:0 auto 0 0; width:400px; background:#fff; border-right:1px solid #e5eef0; padding:18px; transform:translateX(-100%); transition:transform .28s ease; z-index:20; box-shadow: var(--shadow);}
    .sidebar.open{ transform:translateX(0); }
    .brand{display:flex; align-items:center; gap:12px; margin-bottom:16px}
    .brand img{width:44px; height:44px; object-fit:contain; border-radius:12px; box-shadow:0 2px 8px rgba(16,128,68,.25)}
    .brand h1{font-size:1.05rem; margin:0; line-height:1.1}
    .nav a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ink)}
    .nav a.active, .nav a:hover{background:linear-gradient(90deg, rgba(50,205,50,.12), rgba(78,199,222,.12));}
    .nav li {
      list-style: none; /* Removed the default black dots */
    }
    .nav a::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background: var(--green-700);
      border-radius: 50%;
      margin-right: 10px;
    }
    .topbar{position:fixed; inset:0 0 auto 0; height:100px; background:rgba(255,255,255,.8); backdrop-filter: blur(8px); display:flex; align-items:center; gap:12px; padding:0 16px; z-index:10; border-bottom:1px solid #e5eef0;}
    .topbar img {
      width: 64px; /* Larger logo */
      height: 64px;
      border-radius: 12px; /* Rounded corners */
    }
    .topbar .top-title {
      font-size: 2rem; /* Increased font size for navbar text */
      font-weight: 700; /* Make the text bold */
    }
    .topbar a {
      text-decoration: none; /* Remove underline */
      color: inherit; /* Keep the original text color */
    }
    .topbar a:hover {
      color: inherit; /* Prevent color change on hover */
    }
    .hamburger{appearance:none; border:0; background:transparent; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer}
    .hamburger span{display:block; width:22px; height:2px; background:var(--green-700); position:relative}
    .hamburger span:before,.hamburger span:after{content:""; position:absolute; left:0; width:22px; height:2px; background:inherit}
    .hamburger span:before{top:-7px}
    .hamburger span:after{top:7px}
    .top-title{font-weight:700; letter-spacing:.3px}
    .content{ width:100%; max-width:1100px; margin:90px auto 80px; padding:0 16px; flex:1; }
    .card{background:#fff; border:1px solid #e3eef2; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:28px;}
    .hero{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--radius); background:linear-gradient(120deg, rgba(50,205,50,.18), rgba(78,199,222,.18)); border:1px dashed rgba(26,163,184,.35); margin-bottom:32px;}
    .hero img{width:56px; height:56px; object-fit:contain; border-radius:14px}
    h2{margin:0 0 8px; font-size:1.1rem}
    h3{margin:0 0 12px; font-size:1rem; color:var(--green-700)}
    .grid{display:grid; gap:24px}
    @media(min-width:860px){ .grid.two{grid-template-columns:1fr 1fr; gap:30px;} }
    .field{display:flex; flex-direction:column; gap:8px}
    label{font-weight:600; font-size:.92rem}
    input[type="date"], input[type="text"], button{padding:16px 18px; border:1px solid #dce8eb; border-radius:12px; font-size:1rem; outline:none;}
    input[type="date"]:focus, input[type="text"]:focus{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(78,199,222,.2)}
    .btn{background:linear-gradient(135deg,var(--green-700), var(--blue-600)); color:#fff; border:none; cursor:pointer; font-weight:700; letter-spacing:.2px; box-shadow:0 6px 18px rgba(16,128,68,.25);}
    .result{padding:14px 16px; background:linear-gradient(90deg,#f9fdfc,#f4fbff); border:1px solid #e6f1f6; border-left:4px solid var(--green-500); border-radius:12px; font-weight:600; letter-spacing:.2px}
    .tag{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(50,205,50,.12); color:var(--green-700); font-weight:600}
    .tag .dot{width:8px; height:8px; border-radius:50%; background:var(--green-500)}
    footer{opacity:.7; font-size:.85rem; margin-top:16px}