:root{
      --brand:#108a00;
      --bg: #ffffff;
      --muted: #98a7a8;
      --dark: #0b0b0b;
      --glass: rgba(255,255,255,0.95);
      --header-pad: 10px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:#f4f6f7;
      color:#111;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.35;
      -webkit-tap-highlight-color: transparent;
    }

    /* ===== Header (sticky) ===== */
    header.site-header{
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.92));
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(0,0,0,0.04);
      transition: padding .14s ease, box-shadow .14s ease, transform .12s ease;
      box-shadow: 0 6px 18px rgba(16,138,0,0.03);
    }
    .wrap{
      max-width:1200px;
      margin:0 auto;
      padding: var(--header-pad) 14px;
      transition: padding .14s ease;
    }
    header.site-header.shrink .wrap{ padding:6px 12px; }

    .topbar{ display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:8px; }

    .hamburger{ width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer;border-radius:10px; }
    .hamburger svg{ width:25px;height:25px; display:block }
    .hamburger:focus{ outline:3px solid rgba(16,138,0,0.12); outline-offset:2px }

    .brand{ justify-self:center; display:flex; align-items:center; gap:10px; text-decoration:none; color:#111; user-select:none; }
    .brand .logo svg{ width:30px;height:30px }
    .brand .text{ font-size:16px; font-weight:800; letter-spacing:0.2px; }
    .brand .text span{ color:var(--brand) }

    .right-space{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }

    /* ===== Responsive search bar (no left icon) ===== */
    .search-row{ margin-top:10px; display:block; transition:opacity .12s; }
    .search-wrap{
      width: 100%;
      display:flex; align-items:center; gap:10px;
      background: linear-gradient(180deg, #ffffff, #fbfffb);
      border-radius:14px; padding:10px 12px;
      box-shadow: 0 14px 36px rgba(16,138,0,0.06);
      border:1px solid rgba(0,0,0,0.04);
      overflow:hidden;
      transition: transform .16s ease, box-shadow .16s ease;
      min-width:0;
    }

    .search-input{
      border:0; outline:none; font-weight:600;
      font-size: clamp(14px, 2vw, 15px);
      padding:8px 6px; flex:1 1 auto; min-width:0; color:#111;
      letter-spacing:0.2px; background:transparent;
    }
    .search-input::placeholder{ color:var(--muted); font-weight:600; }

    .search-action{
      width: clamp(40px, 6.5vw, 48px);
      height: clamp(40px, 6.5vw, 48px);
      flex: 0 0 clamp(40px, 6.5vw, 48px) !important;
      border-radius:999px !important; display:grid; place-items:center !important;
      cursor:pointer; border:0;
      background: linear-gradient(90deg, var(--brand), #2fb300) !important;
      box-shadow: 0 10px 26px rgba(16,138,0,0.16) !important;
      transition: transform .12s ease, box-shadow .12s ease, filter .12s !important;
    }
    .search-action svg{ width:18px; height:18px; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)) !important; }

    /* Offcanvas (mobile menu) */
    .offcanvas{
      position:fixed; top:0; left:0; height:100vh; width:320px; max-width:86%;
      background:var(--bg); transform:translateX(-120%);
      transition:transform .36s cubic-bezier(.16,.84,.29,1);
      z-index: 12000;
      box-shadow:14px 0 48px rgba(0,0,0,0.12); padding:14px; display:flex; flex-direction:column; gap:12px; border-radius:0 10px 10px 0;
    }
    .offcanvas.open{ transform:translateX(0) }
    .offcanvas nav{ display:flex; flex-direction:column; gap:8px; margin-top:6px }
    .offcanvas a{ text-decoration:none; color:#111; padding:10px 12px; border-radius:10px; font-weight:700; display:flex; gap:12px; align-items:center; }
    .offcanvas a:hover{ background:rgba(16,138,0,0.06); color:var(--brand) }

    .overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.36); opacity:0; pointer-events:none; transition:opacity .2s; z-index: 11000; }
    .overlay.show{ opacity:1; pointer-events:auto }

    nav.desktop-nav{ display:none; }

    @media(min-width:980px){
      .wrap{ display:flex; align-items:center; gap:12px; padding:10px 18px; }
      .topbar{ grid-template-columns:auto 1fr auto; gap:12px; align-items:center; width:100% }
      .hamburger{ display:none }
      .brand{ justify-self:start; }
      nav.desktop-nav{ display:flex; gap:10px; align-items:center; margin-left:12px; }
      nav.desktop-nav a{ text-decoration:none; color:#222; padding:8px 12px; border-radius:10px; font-weight:700; font-size:14px; transition:all .12s ease; }
      nav.desktop-nav a:hover{ color:var(--brand); transform:translateY(-3px); background:rgba(16,138,0,0.06) }
      .mobile-only { display:none; }

      /* center search on desktop */
      .search-row{ margin-top:0; flex:1; display:flex; justify-content:center; }
      .search-wrap{ width:100%; max-width:840px; padding:10px 12px; border-radius:12px; box-shadow: 0 18px 44px rgba(16,138,0,0.06); }
    }

    .muted{ color:var(--muted); font-size:13px }
    a:focus, button:focus, input:focus{ outline:3px solid rgba(16,138,0,0.12); outline-offset:2px; border-radius:8px }

    @media(max-width:420px){
      .brand .text{ font-size:15px }
      .search-wrap{ gap:8px; padding:8px 10px; }
    }

    :root { --off-width: 320px; --overlay-bg: rgba(0,0,0,0.52); }

    #overlay.overlay {
      position: fixed !important;
      inset: 0 !important;
      background: var(--overlay-bg) !important;
      opacity: 0 !important;
      pointer-events: none !important;
      visibility: hidden !important;
      transition: opacity .28s ease !important;
      z-index: 99990 !important;
      -webkit-tap-highlight-color: transparent !important;
      touch-action: manipulation !important;
    }
    #overlay.overlay.show {
      opacity: 1 !important;
      pointer-events: auto !important;
      visibility: visible !important;
    }

    #offcanvas.offcanvas {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      height: 100vh !important;
      width: var(--off-width) !important;
      max-width: 92% !important;
      background: #fff !important;
      transform: translateX(-120%) !important;
      -webkit-transform: translateX(-120%) !important;
      transition: transform .28s cubic-bezier(.22,.9,.28,1) !important;
      box-shadow: 0 20px 40px rgba(0,0,0,.12) !important;
      z-index: 99999 !important;
      display: block !important;
      visibility: hidden !important;
      padding: 18px !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      will-change: transform !important;
    }
    #offcanvas.offcanvas.open {
      transform: translateX(0) !important;
      -webkit-transform: translateX(0) !important;
      visibility: visible !important;
      box-shadow: 0 30px 60px rgba(0,0,0,.18) !important;
    }

    .hamburger { background:transparent; border:0; padding:6px; cursor:pointer; z-index:100000 !important; }
    html.has-off-open, body.has-off-open { overflow: hidden !important; }
    @media (min-width: 992px) { #openMenu { display: none !important; } }

    /* small helpers for inline sign buttons */
    .nav-btn {
      display:inline-block;
      text-decoration:none;
      padding:8px 12px;
      border-radius:10px;
      font-weight:700;
    }
    .nav-btn.signin { color:var(--brand, #108a00); background:rgba(16,138,0,0.06); }
    .nav-btn.signup { color:#fff; background:var(--brand, #108a00); margin-left:8px; }
    .desktop-signup { margin-left:12px; padding:6px 10px; border-radius:8px; background:var(--brand,#108a00); color:#fff; text-decoration:none; font-weight:600; }