:root {
      --clay: #c8511a;
      --cdk: #9e3d10;
      --clt: #f0a070;
      --court: #2d5a27;
      --dark: #1a1a18;
      --dark2: #2a2a26;
      --sand: #f5ede0;
      --muted: #6b6b60;
      --r: 12px
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--sand);
      min-height: 100vh;
      color: var(--dark);
      margin: 0
    }

    .nav-top {
      background: var(--dark);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .8rem 1.5rem;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .3)
    }

    .brand {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.6rem;
      color: #fff;
      letter-spacing: .05em;
      text-decoration: none;
      line-height: 1
    }

    .brand span {
      color: var(--clt)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: .25rem
    }

    .nav-links a {
      color: rgba(255, 255, 255, .65);
      text-decoration: none;
      font-size: .82rem;
      font-weight: 500;
      padding: .4rem .7rem;
      border-radius: 6px;
      transition: background .2s, color .2s;
      white-space: nowrap
    }

    .nav-links a:hover {
      background: rgba(255, 255, 255, .08);
      color: #fff
    }

    .nav-links a.on {
      background: rgba(200, 81, 26, .25);
      color: var(--clt)
    }

    .nav-bell {
      position: relative;
      background: none;
      border: none;
      color: rgba(255, 255, 255, .65);
      font-size: 1.2rem;
      padding: .4rem .5rem;
      cursor: pointer;
      border-radius: 6px;
      transition: color .2s
    }

    .nav-bell:hover {
      color: #fff
    }

    .bell-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      background: var(--clay);
      color: #fff;
      font-size: .55rem;
      font-weight: 700;
      border-radius: 50%;
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .nav-ava {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--clay), var(--cdk));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: .9rem;
      color: #fff;
      cursor: pointer;
      margin-left: .25rem;
      text-decoration: none;
      flex-shrink: 0
    }

    .nav-mob {
      display: none;
      background: none;
      border: none;
      color: rgba(255, 255, 255, .7);
      font-size: 1.3rem;
      cursor: pointer;
      padding: .3rem .4rem
    }
	
	  @media(max-width:767px) {
      .nav-links {
        display: none
      }

      .nav-mob {
        display: block
      }