:root {
      --green-950: #0c4d16;
      --green-900: #0f641b;
      --green-800: #137220;
      --green-700: #19852a;
      --green-100: #eef8eb;
      --green-50: #f7fcf5;
      --yellow: #e7df15;
      --yellow-dark: #c6b900;
      --text: #14301a;
      --muted: #57715d;
      --line: #d8e6d5;
      --card: #ffffff;
      --soft: #f1f5ef;
      --shadow: 0 14px 28px rgba(10, 40, 15, 0.08);
      --radius-xl: 22px;
      --radius-lg: 18px;
      --radius-md: 14px;
      --radius-sm: 10px;
      --container: 1280px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: #f0f3ed;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, select, textarea { font: inherit; }

    .container {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      background: var(--green-950);
      color: white;
      position: sticky;
      top: 0;
      z-index: 20;
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    }

    .notfound-page {
      min-height: calc(100vh - 90px);
      padding: 44px 0 56px;
      background:
        radial-gradient(circle at 20% 14%, rgba(231, 223, 21, .2), transparent 30%),
        linear-gradient(145deg, #062818 0%, #124f31 48%, #f0d22d 48%, #ffe457 100%);
      overflow: hidden;
    }

    .notfound-layout {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(320px, .74fr);
      align-items: center;
      gap: 28px;
      min-height: 620px;
    }

    .notfound-copy {
      color: white;
      max-width: 650px;
      text-shadow: 0 2px 16px rgba(0, 0, 0, .24);
    }

    .notfound-copy .eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      border-radius: 999px;
      padding: 7px 13px;
      background: rgba(255, 228, 87, .95);
      color: var(--green-950);
      font-weight: 1000;
      letter-spacing: 0;
    }

    .notfound-copy h1 {
      margin: 12px 0 12px;
      color: white;
      font-size: clamp(58px, 7vw, 118px);
      line-height: .88;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .notfound-copy p:not(.eyebrow) {
      margin: 0;
      max-width: 560px;
      color: rgba(255, 255, 255, .92);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.45;
    }

    .notfound-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 26px;
    }

    .notfound-actions .btn {
      min-height: 48px;
    }

    .notfound-visual {
      position: relative;
      align-self: end;
      min-height: 580px;
    }

    .notfound-visual img {
      position: absolute;
      right: max(-80px, -7vw);
      bottom: -92px;
      width: min(520px, 50vw);
      max-width: none;
      filter: drop-shadow(0 32px 34px rgba(0, 0, 0, .32));
    }

    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      font-size: 20px;
    }

    .brand-mark {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
    }

    .brand-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand .hu {
      background: var(--yellow);
      color: var(--green-950);
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 18px;
      font-weight: 900;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .nav-links a,
    .nav-menu-link {
      padding: 12px 12px;
      border-radius: 999px;
      color: rgba(255,255,255,0.86);
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .nav-links a.active,
    .nav-links a:hover,
    .nav-menu-link.active,
    .nav-menu-link:hover {
      color: white;
      background: rgba(255,255,255,0.08);
    }

    .site-nav {
      position: static;
      flex: 1;
      justify-content: center;
    }

    .nav-menu-item {
      display: flex;
      align-items: center;
    }

    .nav-mega {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
	  background: rgba(3, 26, 7, 0.98);
      border-top: 1px solid rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 22px 40px rgba(0,0,0,0.22);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
      z-index: 19;
    }

    .has-mega:hover .nav-mega,
    .has-mega:focus-within .nav-mega {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .nav-mega-inner {
      padding: 20px 0 22px;
    }

    .nav-mega-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
      color: white;
    }

    .nav-mega-heading strong {
      font-size: 20px;
      font-weight: 900;
    }

    .nav-mega-heading a {
      padding: 0;
      border-radius: 0;
      background: transparent;
      color: var(--yellow);
      font-weight: 900;
      font-size: 13px;
      text-transform: uppercase;
    }

    .nav-mega-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .nav-mega-link {
      display: flex;
      min-height: 46px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 8px;
      background: rgba(255,255,255,0.08);
      color: white;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
    }

    .nav-mega-link:hover,
    .nav-mega-link.active {
      background: var(--yellow);
      color: var(--green-950);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .mobile-auth-btn {
      display: none;
    }

    .mobile-menu-toggle,
    .mobile-menu-backdrop,
    .mobile-menu-drawer {
      display: none;
    }

    .mobile-menu-toggle {
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 12px;
      background: rgba(255,255,255,0.08);
      color: white;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
    }

    .mobile-menu-toggle span:not(.sr-only) {
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .mobile-menu-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(4, 18, 7, 0.52);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 60;
    }

    .mobile-menu-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(88vw, 390px);
      height: 100vh;
      background: #f8fbf5;
      color: var(--text);
      box-shadow: -22px 0 42px rgba(0,0,0,0.28);
      transform: translateX(100%);
      transition: transform 0.24s ease;
      z-index: 61;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .mobile-menu-head {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      background: var(--green-950);
      color: white;
      font-size: 18px;
    }

    .mobile-menu-close {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      color: white;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .mobile-menu-nav {
      display: grid;
      gap: 6px;
      padding: 14px;
    }

    .mobile-menu-link,
    .mobile-menu-group > summary {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 8px;
      background: white;
      border: 1px solid var(--line);
      color: var(--text);
      font-weight: 800;
      line-height: 1.25;
    }

    .mobile-menu-link:hover,
    .mobile-menu-group > summary:hover {
      border-color: rgba(25,133,42,0.34);
      background: var(--green-50);
      color: var(--green-950);
    }

    .mobile-menu-group {
      display: grid;
      gap: 6px;
    }

    .mobile-menu-group > summary {
      cursor: pointer;
      list-style: none;
    }

    .mobile-menu-group > summary::-webkit-details-marker {
      display: none;
    }

    .mobile-menu-group > summary::after {
      content: "+";
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-100);
      color: var(--green-900);
      flex: 0 0 auto;
    }

    .mobile-menu-group[open] > summary::after {
      content: "-";
    }

    .mobile-submenu {
      display: grid;
      gap: 6px;
      padding: 2px 0 2px 12px;
      border-left: 2px solid var(--green-100);
      margin-left: 12px;
    }

    .mobile-menu-parent {
      color: var(--green-900);
      background: var(--green-100);
    }

    .mobile-menu-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 14px;
    }

    .mobile-menu-actions .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 12px;
      text-align: center;
    }

    .mobile-menu-actions .btn-outline {
      color: var(--green-950);
      border-color: var(--line);
      background: white;
    }

    .btn,
    .icon-btn {
      border: none;
      cursor: pointer;
      transition: 0.18s ease;
    }

    .btn {
      border-radius: 12px;
      padding: 14px 18px;
      font-weight: 800;
    }

    .btn:hover,
    .icon-btn:hover { transform: translateY(-1px); }

    .btn-outline {
      background: transparent;
      color: white;
      border: 1px solid rgba(255,255,255,0.18);
    }

    .btn-yellow {
      background: var(--yellow);
      color: var(--green-950);
    }

    .btn-green {
      background: var(--green-900);
      color: white;
    }

    .icon-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      color: var(--yellow);
      font-size: 20px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.08);
    }

    .icon-btn svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mobile-auth-btn svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .profile-menu {
      position: relative;
    }

    .profile-trigger {
      min-height: 48px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px 6px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      color: white;
      font-weight: 900;
    }

    .profile-avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-950);
      font-weight: 900;
      text-transform: uppercase;
    }

    .profile-trigger-name {
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }

    .profile-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 230px;
      display: grid;
      gap: 4px;
      padding: 8px;
      border-radius: 8px;
      background: white;
      border: 1px solid var(--line);
      box-shadow: 0 18px 34px rgba(0,0,0,0.18);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      transition: 0.16s ease;
      z-index: 30;
    }

    .profile-menu:hover .profile-dropdown,
    .profile-menu:focus-within .profile-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .profile-dropdown a {
      padding: 10px 11px;
      border-radius: 7px;
      color: var(--text);
      font-size: 14px;
      font-weight: 800;
    }

    .profile-dropdown a:hover {
      background: var(--green-100);
      color: var(--green-950);
    }

    .search-modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      background: rgba(4, 18, 7, 0.62);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 70;
    }

    .privacy-modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      background: rgba(4, 18, 7, 0.66);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 80;
    }

    .privacy-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      width: min(880px, calc(100% - 32px));
      height: min(82vh, 720px);
      display: none;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 14px;
      padding: 20px;
      border-radius: 8px;
      background: #f8fbf5;
      color: var(--text);
      box-shadow: 0 30px 70px rgba(0,0,0,0.34);
      transform: translate(-50%, -48%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 81;
    }

    body.privacy-modal-open {
      overflow: hidden;
    }

    body.privacy-modal-open .privacy-modal-backdrop,
    body.privacy-modal-open .privacy-modal {
      display: grid;
    }

    body.privacy-modal-open .privacy-modal-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    body.privacy-modal-open .privacy-modal {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }

    .privacy-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .privacy-modal-head h2,
    .privacy-article h3 {
      margin: 0;
      color: var(--green-950);
    }

    .privacy-modal-close {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      color: var(--green-950);
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .privacy-modal-body {
      min-height: 0;
      overflow-y: auto;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .privacy-lead {
      color: var(--muted);
      font-weight: 800;
      line-height: 1.55;
    }

    .privacy-article-body {
      color: var(--text);
      line-height: 1.6;
    }

    .search-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      width: min(1120px, calc(100% - 32px));
      height: min(82vh, 780px);
      display: none;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: 18px;
      padding: 22px;
      border-radius: 8px;
      background: #f8fbf5;
      color: var(--text);
      box-shadow: 0 30px 70px rgba(0,0,0,0.32);
      transform: translate(-50%, -48%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 71;
      overflow: hidden;
    }

    body.search-modal-open {
      overflow: hidden;
    }

    body.search-modal-open .search-modal-backdrop,
    body.search-modal-open .search-modal {
      display: grid;
    }

    body.search-modal-open .search-modal-backdrop {
      opacity: 1;
      pointer-events: auto;
    }

    body.search-modal-open .search-modal {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }

    .search-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .search-modal-head .eyebrow {
      margin: 0 0 6px;
      color: var(--green-800);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .search-modal-head h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 30px;
      line-height: 1.1;
    }

    .search-modal-close {
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      color: var(--green-950);
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .search-modal-grid,
    .search-results-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      min-height: 0;
    }

    .search-mobile-tabs {
      display: none;
    }

    .search-modal-panel {
      display: grid;
      gap: 9px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .search-modal-panel label {
      color: var(--green-950);
      font-size: 15px;
      font-weight: 900;
    }

    .search-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .search-modal-panel input {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      color: var(--text);
      outline: none;
    }

    .search-modal-panel input:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .search-modal-panel p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .search-meta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      background: linear-gradient(135deg, #fff8bd, var(--green-100));
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
      border: 1px solid rgba(25,133,42,0.16);
      box-shadow: 0 8px 18px rgba(10, 40, 15, 0.06);
    }

    .search-meta::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow);
      box-shadow: 0 0 0 4px rgba(231,223,21,0.24);
    }

    .search-results-grid {
      overflow: hidden;
      min-height: 0;
    }

    .search-results-grid > div {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }

    .search-results-grid h3 {
      margin: 0 0 10px;
      color: var(--green-950);
      font-size: 18px;
    }

    .search-results-list {
      display: grid;
      gap: 10px;
      min-height: 0;
      overflow-y: auto;
      padding-right: 4px;
      align-content: start;
    }

    .search-result-item {
      display: grid;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      color: var(--text);
    }

    .search-result-item:hover {
      border-color: rgba(25,133,42,0.34);
      background: var(--green-50);
    }

    .waste-result-rich.clickable {
      cursor: pointer;
    }

    .site-result {
      grid-template-columns: 92px 1fr;
    }

    .site-result img {
      width: 92px;
      height: 78px;
      border-radius: 7px;
      object-fit: cover;
      background: var(--soft);
    }

    .search-result-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-950);
      font-weight: 900;
    }

    .waste-result {
      grid-template-columns: 42px 1fr;
      align-items: start;
    }

    .search-result-item h4 {
      margin: 0;
      color: var(--green-950);
      font-size: 15px;
      line-height: 1.25;
    }

    .search-result-item span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .search-result-item p,
    .search-empty {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .search-empty {
      margin: 0;
      padding: 14px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.72);
    }

    .waste-result-rich {
      grid-template-columns: 42px 1fr;
    }

    .waste-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .waste-tags span {
      margin: 0;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--green-100);
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
    }

    .waste-local-note {
      padding: 8px 10px;
      border-radius: 7px;
      background: #fffbe2;
      color: var(--green-950) !important;
    }

    .waste-related {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .waste-related strong {
      color: var(--green-950);
      font-size: 13px;
    }

    .waste-related a {
      color: var(--green-800);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .waste-suggestion strong {
      display: block;
      color: var(--green-950);
      font-size: 15px;
    }

    .waste-suggestion {
      border-style: solid;
      border-color: rgba(231,223,21,0.72);
      background:
        linear-gradient(135deg, rgba(231,223,21,0.28), rgba(255,255,255,0.92)),
        #fff;
      box-shadow: 0 14px 28px rgba(10, 40, 15, 0.08);
    }

    .waste-suggestion strong::before {
      content: "!";
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      margin-right: 8px;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 14px;
      font-weight: 900;
    }

    .waste-suggestion p {
      color: var(--green-950);
      font-weight: 800;
    }

    .waste-feedback-form {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .waste-feedback-form input,
    .waste-feedback-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      color: var(--text);
      background: white;
      outline: none;
    }

    .waste-feedback-form textarea {
      resize: vertical;
    }

    .waste-feedback-form label {
      color: var(--green-950);
      font-weight: 900;
    }

    .waste-feedback-status {
      margin: 0;
      color: var(--green-950);
      font-weight: 800;
    }

    .privacy-check {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 9px;
      align-items: start;
      padding: 10px;
      border-radius: 8px;
      background: #fffbe2;
      color: var(--green-950);
      font-size: 13px;
      line-height: 1.45;
    }

    .privacy-check input {
      width: 18px;
      height: 18px;
      margin: 1px 0 0;
    }

    .privacy-link-btn {
      justify-self: start;
      border: 0;
      background: transparent;
      color: var(--green-800);
      font-weight: 900;
      text-decoration: underline;
      cursor: pointer;
      padding: 0;
    }

    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .waste-detail-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 22px;
      align-items: start;
    }

    .waste-detail-main .eyebrow {
      margin: 0 0 6px;
      color: var(--green-800);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .waste-detail-main h1 {
      margin: 0;
      color: var(--green-950);
      font-size: 40px;
      line-height: 1.05;
    }

    .waste-report-toggle.btn-outline {
      color: var(--green-950);
      border-color: var(--line);
      background: white;
    }

    .waste-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    .waste-detail-grid div,
    .waste-detail-section {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--green-50);
      padding: 15px;
    }

    .waste-detail-grid span {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .waste-detail-grid strong {
      display: block;
      color: var(--green-950);
      font-size: 18px;
      line-height: 1.25;
    }

    .waste-detail-grid p,
    .waste-detail-section p {
      margin: 8px 0 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.55;
    }

    .waste-detail-section {
      margin-top: 12px;
    }

    .waste-detail-section h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 20px;
    }

    .waste-detail-section.warning {
      background: #fff5f0;
    }

    .waste-detail-section.local-note {
      background: #fffbe2;
    }

    .local-provider-section {
      background: #f2fbf5;
    }

    .local-provider-head h2 {
      margin-bottom: 6px;
    }

    .local-provider-search {
      margin-top: 14px;
    }

    .local-provider-search input {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 14px;
      color: var(--green-950);
      font: inherit;
      font-weight: 800;
      background: white;
      outline: none;
    }

    .local-provider-search input:focus {
      border-color: var(--green-600);
      box-shadow: 0 0 0 3px rgba(30, 128, 74, 0.13);
    }

    .local-provider-results {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    .provider-empty {
      margin: 0;
      border: 1px dashed rgba(30, 128, 74, 0.32);
      border-radius: 8px;
      padding: 13px;
      color: var(--muted);
      font-weight: 800;
      background: rgba(255, 255, 255, 0.68);
    }

    .provider-card {
      display: grid;
      grid-template-columns: minmax(130px, 0.38fr) minmax(0, 1fr);
      gap: 14px;
      border: 1px solid rgba(30, 128, 74, 0.2);
      border-radius: 8px;
      padding: 14px;
      background: white;
    }

    .provider-location strong,
    .provider-main h3 {
      display: block;
      margin: 0;
      color: var(--green-950);
      line-height: 1.25;
    }

    .provider-location span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .provider-main p {
      margin: 6px 0 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.45;
    }

    .provider-main a {
      color: var(--green-700);
      font-weight: 900;
      text-decoration: none;
    }

    .provider-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }

    .provider-links a {
      border: 1px solid rgba(30, 128, 74, 0.2);
      border-radius: 999px;
      padding: 7px 10px;
      background: var(--green-50);
      font-size: 13px;
      line-height: 1;
    }

    .provider-missing {
      border-left: 4px solid #f0b429;
      padding-left: 12px;
    }

    .waste-detail-report {
      margin-top: 16px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .hero-wrap {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(3, 55, 17, 0.88) 0%, rgba(7, 83, 24, 0.7) 42%, rgba(4, 67, 20, 0.34) 72%, rgba(4, 67, 20, 0.22) 100%),
        url("/assets/img/hero-bg.png") center bottom / cover no-repeat;
    }

    .hero-grid {
      width: min(1500px, calc(100% - 32px));
      display: grid;
      grid-template-columns: minmax(320px, 0.95fr) minmax(430px, 1.1fr) minmax(330px, 0.9fr);
      min-height: 710px;
      align-items: stretch;
    }

    .hero-left,
    .hero-center,
    .hero-right {
      min-height: 710px;
      min-width: 0;
    }

    .hero-left {
      position: relative;
      overflow: hidden;
      padding: 50px 34px 28px;
      color: white;
      display: flex;
      flex-direction: column;
    }

    .hero-leaf {
      position: absolute;
      right: -8px;
      top: 34px;
      width: 58%;
      height: 84%;
      opacity: 0.18;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(180px, 26vw, 360px);
      filter: saturate(0.9);
      color: #062d0f;
    }

    .hero-title {
      position: relative;
      z-index: 2;
      font-weight: 900;
      font-size: clamp(56px, 2.6vw, 84px);
      line-height: 0.94;
      letter-spacing: 0;
      max-width: 470px;
      text-transform: uppercase;
      margin: 0 0 18px;
      text-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
    }

    .hero-title .accent { color: var(--yellow); }

    .hero-sub {
      position: relative;
      z-index: 2;
      font-size: 29px;
      font-weight: 800;
      line-height: 1.18;
      max-width: 320px;
      margin: 0 0 22px;
      text-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
    }

    .hero-mascot {
      position: absolute;
      z-index: 1;
      left: 82px;
      bottom: 92px;
      width: min(390px, 86%);
      max-width: none;
      filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.32));
      pointer-events: none;
    }

    .hero-search-stats {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 360px;
      margin: auto 0 14px 12px;
    }

    .hero-search-stats button {
      min-height: 88px;
      display: grid;
      align-content: center;
      gap: 4px;
      border: 2px solid rgba(235, 255, 167, 0.36);
      border-radius: 8px;
      padding: 12px 18px;
      background: rgba(6, 76, 25, 0.86);
      color: white;
      text-align: center;
      cursor: pointer;
      transition: 0.18s ease;
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
    }

    .hero-search-stats button:hover {
      transform: translateY(-1px);
      background: rgba(6, 76, 25, 0.96);
      border-color: rgba(231,223,21,0.78);
    }

    .hero-search-stats strong {
      color: var(--yellow);
      font-size: 37px;
      line-height: 1;
      font-weight: 900;
    }

    .hero-search-stats strong.count-updating {
      color: #fff26a;
      text-shadow: 0 2px 0 rgba(2, 36, 14, 0.42), 0 0 18px rgba(255, 242, 106, 0.34);
    }

    .hero-search-stats span {
      color: #f1f8df;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .hero-left .cta {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 340px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: var(--yellow);
      color: var(--green-950);
      padding: 18px 20px;
      border-radius: 14px;
      border: 0;
      font-size: 17px;
      font-weight: 900;
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
      margin-left: 10px;
    }

    .hero-center {
      padding: 30px 12px 24px;
      display: flex;
      align-items: center;
    }

    .news-panel {
      width: 100%;
      background: rgba(7, 84, 27, 0.92);
      border-radius: 16px;
      color: white;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      box-shadow: 0 22px 44px rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .news-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px 4px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    .news-panel-header .title {
      display: inline-flex;
      flex-direction: column;
      gap: 6px;
      font-size: 20px;
    }

    .news-panel-header .title::after {
      content: "";
      width: 42px;
      height: 4px;
      background: var(--yellow);
      border-radius: 999px;
    }

    .news-list {
      background: #d2d8cf;
      border-radius: 16px;
      overflow: hidden;
      height: 594px;
      box-shadow: inset 0 0 0 1px rgba(12, 77, 22, 0.06);
    }

    .news-track {
      display: grid;
      gap: 1px;
      will-change: transform;
      transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .news-item {
      background: #fbfbef;
      display: grid;
      grid-template-columns: 58px 150px 1fr;
      height: 118px;
      color: inherit;
    }

    .news-thumb {
      height: 100%;
      overflow: hidden;
    }

    .news-rank {
      background: var(--yellow);
      color: var(--green-950);
      font-weight: 900;
      font-size: 30px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding-top: 16px;
    }

    .news-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
	  padding:7px;
    }

    .news-body {
      padding: 15px 18px;
      color: var(--text);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }

    .news-body h3 {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
      font-weight: 800;
    }

    .news-meta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .hero-right {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 70% 4%, rgba(255, 255, 255, 0.6), transparent 22%),
        linear-gradient(180deg, #ffe83a 0%, #f8d91f 100%);
      padding: 34px 28px 0;
      color: var(--green-950);
      display: flex;
      flex-direction: column;
      gap: 18px;
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.25);
    }

    .oszkar-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
    }

    .oszkar-mark {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 12px;
      border-radius: 999px;
      background: var(--green-800);
      color: white;
      font-size: 28px;
      line-height: 1;
      font-weight: 900;
    }

    .oszkar-head h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1;
      font-weight: 900;
    }

    .oszkar-head p {
      margin: 8px 0 0;
      font-size: 14px;
      font-weight: 700;
    }

    .profile-row {
      display: grid;
      grid-template-columns: 118px 1fr;
      gap: 18px;
      align-items: center;
    }

    .avatar {
      width: 118px;
      height: 118px;
      border-radius: 50%;
      background: #fff8cc;
      border: 6px solid rgba(255,255,255,0.65);
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0,0,0,0.08);
    }

    .avatar img {
      width: 110%;
      height: 110%;
      max-width: none;
      object-fit: cover;
      object-position: 111% -31%;
    }

    .avatar .challenge-user-avatar {
      width: 100%;
      height: 100%;
      object-position: center;
    }

    .challenge-avatar-initial {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      background: var(--green-800);
      color: #fff;
      font-size: 46px;
      font-weight: 900;
    }

    .challenge-profile-row h3 {
      overflow-wrap: anywhere;
    }

    .profile-row h3 {
      margin: 0;
      font-size: 22px;
      font-weight: 900;
    }

    .profile-row p {
      margin: 6px 0 0;
      font-size: 15px;
      font-weight: 700;
      color: rgba(12,77,22,0.82);
    }

    .points {
      font-size: 26px;
      font-weight: 900;
      margin-top: 16px;
    }

    .points strong {
      font-size: 60px;
      line-height: 0.95;
      letter-spacing: 0;
    }

    .bar {
      height: 10px;
      background: rgba(255,255,255,0.52);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 10px;
    }

    .bar > span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--green-800);
      border-radius: inherit;
    }

    .bar-label {
      text-align: center;
      font-weight: 800;
      font-size: 14px;
      margin-top: 8px;
    }

    .stats4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .stat-card {
      background: rgba(255,255,255,0.26);
      border-radius: 14px;
      padding: 14px 10px;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
    }

    .stat-card .icon {
      font-size: 26px;
      margin-bottom: 8px;
    }

    .stat-card strong {
      display: block;
      font-size: 22px;
      line-height: 1;
      margin-bottom: 6px;
      font-weight: 900;
    }

    .stat-card span {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 800;
      line-height: 1.2;
    }

    .wide-btn {
      display: block;
      width: 100%;
      padding: 18px 18px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 16px;
      text-align: center;
      box-shadow: 0 14px 22px rgba(12, 77, 22, 0.18);
    }

    .rank-link {
      text-align: center;
      font-weight: 900;
      color: var(--green-900);
      text-decoration: underline;
      padding-top: 4px;
    }

    .challenge-games {
      display: grid;
      gap: 9px;
      padding: 12px;
      border: 1px solid rgba(12, 77, 22, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.24);
    }

    .challenge-games-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .challenge-games-head h3 {
      margin: 0;
      color: var(--green-950);
      font-size: 15px;
      font-weight: 900;
    }

    .challenge-games-head a,
    .challenge-games-ranking {
      color: var(--green-900);
      font-size: 12px;
      font-weight: 900;
      text-decoration: underline;
    }

    .challenge-game-current {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 9px;
      padding: 10px;
      border-radius: 8px;
      background: var(--green-800);
      color: #fff;
      transition: transform 0.18s ease, background 0.18s ease;
    }

    .challenge-game-current:hover,
    .challenge-game-current:focus-visible {
      background: var(--green-900);
      transform: translateY(-1px);
    }

    .challenge-game-state {
      padding: 5px 7px;
      border-radius: 999px;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 9px;
      line-height: 1;
      font-weight: 900;
    }

    .challenge-game-current strong {
      min-width: 0;
      font-size: 14px;
      font-weight: 900;
    }

    .challenge-game-current small {
      max-width: 90px;
      font-size: 10px;
      line-height: 1.2;
      text-align: right;
      font-weight: 800;
    }

    .challenge-game-current.is-completed {
      background: rgba(12, 77, 22, 0.8);
    }

    .challenge-game-empty {
      padding: 10px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.36);
      font-size: 12px;
      font-weight: 800;
    }

    .challenge-games-subtitle {
      margin: 2px 0 0;
      color: rgba(12, 77, 22, 0.7);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .challenge-game-upcoming {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .challenge-game-upcoming span {
      display: grid;
      gap: 4px;
      min-height: 46px;
      padding: 8px 9px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.34);
    }

    .challenge-game-upcoming strong {
      color: var(--green-950);
      font-size: 11px;
      line-height: 1.15;
      font-weight: 900;
    }

    .challenge-game-upcoming small {
      color: rgba(12, 77, 22, 0.72);
      font-size: 10px;
      font-weight: 800;
    }

    .challenge-games-ranking {
      justify-self: end;
      margin-top: 1px;
    }

    .challenge-games-invite {
      position: relative;
      display: grid;
      align-content: center;
      gap: 7px;
      min-height: 164px;
      margin-top: 2px;
      padding: 18px 48% 18px 17px;
      overflow: hidden;
      border-radius: 8px;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(4, 35, 23, .97) 0%, rgba(4, 35, 23, .8) 42%, rgba(4, 35, 23, .05) 100%),
        url("/assets/img/gamer-capybara-games.webp") 70% center / cover no-repeat;
      box-shadow: 0 12px 22px rgba(12, 77, 22, .18);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .challenge-games-invite:hover,
    .challenge-games-invite:focus-visible {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 16px 26px rgba(12, 77, 22, .25);
    }

    .challenge-games-invite span {
      color: var(--yellow);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .challenge-games-invite strong {
      font-size: 17px;
      line-height: 1.15;
      font-weight: 900;
    }

    .challenge-games-invite small {
      margin-top: 3px;
      color: #fff;
      font-size: 12px;
      font-weight: 900;
      text-decoration: underline;
    }

    .section {
      padding: 16px 0 0;
    }

    .utility-row {
      display: grid;
      grid-template-columns: 1.2fr 0.9fr;
      gap: 18px;
      margin-top: 16px;
    }

    .finder-card,
    .helper-card,
    .content-card,
    .game-card,
    .banner-card {
      background: var(--card);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .finder-card {
      background: var(--green-950);
      color: white;
      padding: 20px 24px 18px;
    }

    .finder-card h2 {
      margin: 0;
      color: var(--yellow);
      font-weight: 900;
      font-size: 24px;
      text-transform: uppercase;
    }

    .finder-card p {
      margin: 6px 0 14px;
      color: rgba(255,255,255,0.9);
      font-weight: 700;
    }

    .finder-search {
      display: grid;
      grid-template-columns: 1fr 74px;
      gap: 0;
      overflow: hidden;
      border-radius: 12px;
      background: white;
      margin-bottom: 18px;
    }

    .finder-search input {
      border: none;
      background: white;
      padding: 18px 18px;
      outline: none;
      font-size: 20px;
      color: var(--text);
    }

    .finder-search button {
      border: none;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 28px;
      font-weight: 900;
      cursor: pointer;
    }

    .finder-icons {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    }

    .finder-icon {
      text-align: center;
      padding: 10px 4px 6px;
      border-left: 1px solid rgba(255,255,255,0.08);
    }

    .finder-icon:first-child { border-left: none; }

    .finder-icon .bubble {
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 22px;
      font-weight: 900;
      color: white;
    }

    .finder-icon:nth-child(1) .bubble { background: #5ea6ff; }
    .finder-icon:nth-child(2) .bubble { background: #f2d613; color: #17301a; }
    .finder-icon:nth-child(3) .bubble { background: #79c857; }
    .finder-icon:nth-child(4) .bubble { background: #9e9e9e; }
    .finder-icon:nth-child(5) .bubble { background: #2f8f2f; }
    .finder-icon:nth-child(6) .bubble { background: #b37a35; }

    .finder-icon span {
      display: block;
      font-size: 14px;
      font-weight: 800;
      text-transform: uppercase;
      color: rgba(255,255,255,0.94);
    }

    .helper-card {
      background: #dfe7d7;
      display: grid;
      grid-template-columns: 1fr 180px;
      gap: 14px;
      align-items: center;
      padding: 22px 24px;
    }

    .helper-card h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.15;
      font-weight: 900;
      color: #2b492d;
    }

    .helper-card p {
      margin: 0 0 14px;
      font-size: 16px;
      line-height: 1.5;
      color: #49644d;
      font-weight: 700;
      max-width: 320px;
    }

    .helper-link {
      font-weight: 900;
      color: var(--green-900);
      text-decoration: underline;
    }

    .bin-graphic {
      position: relative;
      height: 160px;
    }

    .bin {
      position: absolute;
      right: 12px;
      bottom: 0;
      width: 126px;
      height: 140px;
      background: linear-gradient(180deg, #4ba842, #2c7d2d);
      border-radius: 12px 12px 18px 18px;
      box-shadow: inset 0 -10px 0 rgba(0,0,0,0.08);
    }

    .bin::before {
      content: "";
      position: absolute;
      top: -10px;
      left: -4px;
      right: -4px;
      height: 18px;
      border-radius: 8px;
      background: #3b8f37;
    }

    .bin::after {
      content: "♻";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-size: 54px;
      color: rgba(255,255,255,0.92);
      font-weight: 900;
    }

    .sprout {
      position: absolute;
      left: 20px;
      bottom: 8px;
      font-size: 86px;
      color: #62ab4c;
      opacity: 0.9;
    }

    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 18px;
      margin-top: 18px;
      padding-bottom: 18px;
    }

    .content-card {
      padding: 16px;
      background: #f6f7f3;
      border: 1px solid var(--line);
    }

    .card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 14px;
    }

    .card-head h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
      color: #2c4c2d;
      text-transform: uppercase;
    }

    .card-head a {
      font-size: 13px;
      font-weight: 900;
      color: #49694f;
    }

    .community-card-head h3 {
      min-width: 0;
    }

    .community-all-link {
      flex: 0 0 auto;
      white-space: nowrap;
      font-size: 11px !important;
    }

    .small-news {
      display: grid;
      gap: 0;
      border-top: 1px solid #dde5da;
    }

    .small-news-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid #dde5da;
    }

    .small-news-link {
      color: var(--text);
      transition: color 0.18s ease, transform 0.18s ease;
    }

    .small-news-link:hover {
      color: var(--green-800);
      transform: translateX(2px);
    }

    .small-news-link strong {
      min-width: 0;
      font-size: 15px;
      line-height: 1.25;
      font-weight: 900;
    }

    .small-news-link span {
      white-space: nowrap;
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
    }

    .tiny-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      color: #5a725d;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .read-more {
      font-weight: 900;
      color: var(--green-900);
      text-decoration: underline;
      font-size: 14px;
    }

    .org-list,
    .game-list {
      display: grid;
      gap: 12px;
    }

    .org-item,
    .game-item {
      background: white;
      border-radius: 12px;
      padding: 12px 12px;
      display: grid;
      align-items: center;
      gap: 12px;
      border: 1px solid #e0e8dd;
    }

    .org-item {
      grid-template-columns: 56px 1fr auto;
      color: var(--text);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .org-item:hover {
      border-color: rgba(25,133,42,0.3);
      box-shadow: 0 10px 22px rgba(16,45,22,0.08);
      transform: translateY(-1px);
    }

    .org-icon,
    .game-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 28px;
      font-weight: 900;
      color: white;
    }

    .org-item:nth-child(1) .org-icon { background: #b8e5cf; color: var(--green-900); }
    .org-item:nth-child(2) .org-icon { background: var(--green-900); }
    .org-item:nth-child(3) .org-icon { background: #f29e1f; }
    .org-item:nth-child(4) .org-icon { background: #1674aa; }

    .org-info h4,
    .game-info h4 {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 900;
    }

    .org-info {
      min-width: 0;
    }

    .org-info p,
    .game-info p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      font-size: 14px;
      line-height: 1.4;
    }

    .org-info p {
      overflow-wrap: anywhere;
    }

    .org-info small {
      display: block;
      margin-top: 4px;
      color: var(--green-700);
      font-size: 12px;
      font-weight: 900;
    }

    .pill-score {
      background: var(--yellow);
      color: var(--green-950);
      padding: 10px 12px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
    }

    .join-btn {
      display: block;
      width: 100%;
      margin-top: 12px;
      background: var(--green-800);
      color: white;
      border-radius: 10px;
      padding: 16px;
      font-weight: 900;
      border: none;
      cursor: pointer;
      text-align: center;
    }

    .community-placeholder {
      display: block;
      margin-top: 12px;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid #d6e0d0;
      background: #dad13a;
    }

    .community-placeholder img {
      display: block;
      width: 100%;
      height: auto;
    }

    .game-item {
      grid-template-columns: 88px 1fr 44px;
      background: #eef4e3;
    }

    .game-item:nth-child(2) { background: #f1ecd7; }
    .game-item:nth-child(3) { background: #edf4e7; }

    .game-icon {
      width: 88px;
      height: 72px;
      border-radius: 10px;
      background: linear-gradient(135deg, #dff4d8, #bddd9d);
      color: var(--green-900);
      font-size: 42px;
    }

    .play-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: var(--green-800);
      color: white;
      font-size: 20px;
      font-weight: 900;
      cursor: pointer;
    }

    .game-item:nth-child(2) .play-btn { background: var(--yellow); color: var(--green-950); }

    .banner-card {
      margin: 0 0 22px;
      background: var(--green-900);
      color: white;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 16px;
      padding: 14px 18px;
    }

    .banner-left {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .banner-left .leaf {
      font-size: 32px;
      color: #72d85f;
    }

    .banner-copy {
      font-size: 18px;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .banner-badges {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .banner-badge {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      display: grid;
      place-items: center;
      font-size: 22px;
    }

    .banner-card .btn-outline {
      min-width: 220px;
      padding: 16px 20px;
      border-radius: 12px;
      font-weight: 900;
    }

    .home-mission-section {
      margin-bottom: 22px;
    }

    .home-mission-hub {
      display: grid;
      grid-template-columns: 332px minmax(0, 1fr);
      overflow: hidden;
      border-radius: 8px;
      color: white;
      background: #063f29;
      box-shadow: 0 14px 32px rgba(6, 48, 29, .14);
    }

    .home-mission-intro {
      position: relative;
      min-height: 340px;
      overflow: hidden;
      padding: 25px 23px 138px;
      background: linear-gradient(150deg, #075533, #063d29);
    }

    .home-mission-kicker {
      display: inline-block;
      margin: 0 0 13px;
      padding: 6px 9px;
      border-radius: 5px;
      color: #083c27;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      background: #ffdb1f;
    }

    .home-mission-intro h2 {
      position: relative;
      z-index: 1;
      margin: 0 0 12px;
      color: white;
      font-size: 29px;
      line-height: 1.12;
    }

    .home-mission-intro > p:not(.home-mission-kicker):not(.home-mission-badge-target) {
      position: relative;
      z-index: 1;
      margin: 0;
      color: rgba(255, 255, 255, .84);
      font-size: 14px;
      line-height: 1.48;
    }

    .home-mission-intro > p strong {
      color: white;
    }

    .home-mission-level {
      position: relative;
      z-index: 1;
      height: 8px;
      margin: 17px 0 10px;
      overflow: hidden;
      border-radius: 8px;
      background: rgba(255, 255, 255, .19);
    }

    .home-mission-level span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #ffdb1f;
    }

    .home-mission-badge-target {
      position: relative;
      z-index: 1;
      margin: 0;
      color: #dcebcf;
      font-size: 12px;
      line-height: 1.45;
    }

    .home-mission-badge-target strong {
      color: #ffdb1f;
    }

    .home-mission-register {
      position: relative;
      z-index: 1;
      display: inline-flex;
      margin-top: 18px;
    }

    .home-mission-mascot {
      position: absolute;
      right: -22px;
      bottom: -54px;
      width: 182px;
      max-width: none;
      pointer-events: none;
    }

    .home-mission-board {
      display: grid;
      align-content: space-between;
      gap: 16px;
      padding: 19px;
      color: #123c2c;
      background: #edf3e8;
    }

    .home-mission-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 11px;
    }

    .home-mission-card {
      display: flex;
      flex-direction: column;
      min-height: 206px;
      padding: 15px;
      border: 1px solid #d9e4d4;
      border-radius: 8px;
      color: #113d2a;
      background: white;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .home-mission-card:hover {
      transform: translateY(-2px);
      border-color: #90be8f;
      box-shadow: 0 9px 18px rgba(12, 52, 31, .09);
    }

    .home-mission-card.is-active {
      border-color: #e4c832;
      background: #fff9db;
    }

    .home-mission-card.is-done {
      border-color: #abd6b2;
      background: #f0faed;
    }

    .home-mission-card-status {
      display: inline-flex;
      align-self: flex-start;
      margin-bottom: 13px;
      padding: 5px 8px;
      border-radius: 5px;
      color: #0b6b3b;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      background: #e4f2e1;
    }

    .home-mission-card.is-active .home-mission-card-status {
      color: #624e00;
      background: #ffe467;
    }

    .home-mission-card h3 {
      margin: 0 0 8px;
      color: #083d29;
      font-size: 18px;
      line-height: 1.25;
    }

    .home-mission-card p {
      flex: 1;
      margin: 0 0 14px;
      color: #576a5e;
      font-size: 13px;
      line-height: 1.48;
    }

    .home-mission-card > strong {
      color: #08713f;
      font-size: 13px;
    }

    .home-mission-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 13px 15px;
      border-radius: 8px;
      color: white;
      background: #0a5031;
    }

    .home-mission-prize {
      display: grid;
      gap: 3px;
    }

    .home-mission-prize span {
      color: #ffdb1f;
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .home-mission-prize strong {
      color: white;
      font-size: 14px;
    }

    .home-mission-prize small {
      color: rgba(255, 255, 255, .75);
      font-weight: 700;
    }

    .home-mission-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .home-mission-nav a {
      padding: 9px 12px;
      border: 1px solid rgba(255, 255, 255, .19);
      border-radius: 6px;
      color: white;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .home-mission-nav a:hover {
      border-color: #ffdb1f;
      color: #ffdb1f;
    }

    @media (max-width: 1080px) {
      .home-mission-hub {
        grid-template-columns: 1fr;
      }

      .home-mission-intro {
        min-height: 232px;
        padding-right: 220px;
        padding-bottom: 25px;
      }

      .home-mission-mascot {
        right: 18px;
        bottom: -68px;
        width: 192px;
      }
    }

    @media (max-width: 720px) {
      .home-mission-intro {
        min-height: 335px;
        padding: 20px 18px 150px;
      }

      .home-mission-intro h2 {
        font-size: 26px;
      }

      .home-mission-mascot {
        right: -16px;
        bottom: -52px;
        width: 174px;
      }

      .home-mission-board {
        padding: 12px;
      }

      .home-mission-cards {
        grid-template-columns: 1fr;
      }

      .home-mission-card {
        min-height: 0;
      }

      .home-mission-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .home-mission-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .home-mission-nav a {
        text-align: center;
      }
    }

    .site-footer {
      margin-top: 34px;
      color: #dce8dd;
      background: #053422;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 282px minmax(0, 1fr);
      gap: 46px;
      padding-top: 42px;
      padding-bottom: 38px;
    }

    .footer-brand-link {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      color: white;
    }

    .footer-brand-link img {
      width: 58px;
      height: 58px;
      object-fit: contain;
    }

    .footer-brand-link strong {
      font-size: 26px;
      line-height: 1;
    }

    .footer-brand-link span {
      display: inline-block;
      padding: 4px 6px;
      border-radius: 5px;
      color: #063c26;
      font-size: 18px;
      background: #ffda1f;
    }

    .footer-brand p {
      margin: 18px 0 22px;
      color: #afc5b5;
      font-size: 14px;
      line-height: 1.65;
    }

    .footer-brand-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .footer-brand-actions a,
    .footer-brand-actions button {
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, .19);
      border-radius: 6px;
      color: white;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      background: transparent;
      cursor: pointer;
    }

    .footer-brand-actions a:last-child {
      border-color: #ffda1f;
      color: #073b27;
      background: #ffda1f;
    }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      align-content: start;
      gap: 31px 28px;
    }

    .footer-link-group {
      display: grid;
      align-content: start;
      gap: 11px;
    }

    .footer-link-group h2 {
      margin: 0 0 6px;
      color: #ffda1f;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .footer-link-group a,
    .footer-link-group button {
      justify-self: start;
      border: 0;
      padding: 0;
      color: #d7e5d9;
      font: inherit;
      font-size: 14px;
      line-height: 1.35;
      text-align: left;
      background: transparent;
      cursor: pointer;
      transition: color .16s ease;
    }

    .footer-link-group a:hover,
    .footer-link-group button:hover {
      color: #ffda1f;
    }

    .footer-topic-group {
      grid-column: 1 / -1;
      padding-top: 22px;
      border-top: 1px solid rgba(222, 237, 224, .13);
    }

    .footer-topic-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 15px 23px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-topic-item {
      list-style: none;
    }

    .footer-topic-item > a {
      color: white;
      font-weight: 800;
    }

    .footer-topic-item ul {
      display: grid;
      gap: 8px;
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
    }

    .footer-topic-child > a {
      color: #afc5b5;
      font-size: 13px;
      font-weight: 600;
    }

    .footer-topic-child .footer-topic-child {
      padding-left: 10px;
      border-left: 1px solid rgba(255, 255, 255, .16);
    }

    .footer-bottom {
      border-top: 1px solid rgba(222, 237, 224, .13);
      background: #042d1d;
    }

    .footer-bottom-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding-top: 17px;
      padding-bottom: 17px;
      color: #91ae99;
      font-size: 12px;
    }

    .footer-bottom-inner p {
      margin: 0;
    }

    .footer-bottom-inner div {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .footer-bottom-inner a {
      color: #c7dbcc;
      font-weight: 700;
    }

    .footer-bottom-inner a:hover {
      color: #ffda1f;
    }

    @media (max-width: 1020px) {
      .footer-main {
        grid-template-columns: 1fr;
        gap: 33px;
      }
    }

    @media (max-width: 720px) {
      .site-footer {
        margin-top: 22px;
      }

      .footer-main {
        padding-top: 29px;
        padding-bottom: 27px;
      }

      .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 27px 19px;
      }

      .footer-topic-list {
        grid-template-columns: 1fr;
      }

      .footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 420px) {
      .footer-links {
        grid-template-columns: 1fr;
      }
    }

    .news-empty {
      background: #f0f1ee;
      color: var(--text);
      padding: 18px;
      font-weight: 800;
    }

    .page-section {
      padding: 34px 0 42px;
    }

    .page-heading {
      margin-bottom: 18px;
    }

    .page-heading h1 {
      margin: 0 0 8px;
      font-size: 42px;
      line-height: 1;
      color: var(--green-950);
    }

    .page-heading h2 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.25;
      color: var(--green-800);
      font-weight: 900;
    }

    .page-heading p {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.55;
    }

    .page-heading .archive-count {
      margin-top: 10px;
      display: inline-flex;
      width: auto;
      border: 1px solid rgba(25, 133, 42, 0.18);
      border-radius: 999px;
      padding: 7px 11px;
      background: var(--green-50);
      color: var(--green-900);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .auth-page {
      min-height: calc(100vh - 78px);
      background:
        radial-gradient(circle at 18% 14%, rgba(231,223,21,0.28), transparent 28%),
        linear-gradient(135deg, rgba(12,77,22,0.1), rgba(25,133,42,0.04)),
        #f0f3ed;
    }

    .auth-shell {
      min-height: calc(100vh - 154px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
      gap: 44px;
      align-items: start;
      padding-bottom: 42px;
    }

    .auth-hero {
      max-width: 620px;
    }

    .auth-hero .eyebrow {
      margin: 0 0 10px;
      color: var(--green-800);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .auth-hero h1 {
      margin: 0 0 16px;
      color: var(--green-950);
      font-size: 54px;
      line-height: 0.98;
    }

    .auth-hero p {
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.6;
    }

    .auth-hero-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .auth-hero-list span {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 9px 12px;
      border-radius: 8px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(216,230,213,0.9);
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .auth-register-info {
      margin-top: 22px;
      max-width: 620px;
      border: 1px solid #e7d07e;
      border-radius: 8px;
      background: #fff9e7;
      color: var(--green-950);
      overflow: hidden;
    }

    .auth-info-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      padding: 5px;
      background: #f2e9c4;
    }

    .auth-info-tabs button {
      min-height: 46px;
      border: 0;
      border-radius: 7px;
      padding: 8px 12px;
      background: transparent;
      color: #685000;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      text-align: center;
    }

    .org-empty {
      margin: 0;
      padding: 18px 14px;
      border: 1px dashed #cbd9c6;
      border-radius: 10px;
      background: white;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.45;
    }

    .auth-info-tabs button.active {
      background: white;
      color: var(--green-950);
      box-shadow: 0 5px 15px rgba(30, 38, 9, 0.08);
    }

    .auth-info-panel {
      padding: 16px 18px 18px;
    }

    .auth-info-panel:not(.active) {
      display: none;
    }

    .auth-info-panel h2 {
      margin: 0 0 9px;
      font-size: 22px;
      line-height: 1.2;
    }

    .auth-info-panel p,
    .auth-info-panel ol,
    .auth-info-panel ul {
      margin: 0 0 12px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.55;
    }

    .auth-info-panel ol,
    .auth-info-panel ul {
      padding-left: 20px;
    }

    .auth-info-panel li + li {
      margin-top: 6px;
    }

    .auth-info-panel small {
      display: block;
      border-top: 1px solid rgba(129, 89, 0, 0.16);
      padding-top: 11px;
      color: #685000;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.5;
    }

    .auth-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 24px 48px rgba(10, 40, 15, 0.12);
      padding: 22px;
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 6px;
      margin-bottom: 18px;
      border-radius: 8px;
      background: var(--soft);
      border: 1px solid var(--line);
    }

    .auth-tabs a {
      min-height: 44px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      color: var(--muted);
      font-weight: 900;
      text-align: center;
    }

    .auth-tabs a.active {
      background: white;
      color: var(--green-950);
      box-shadow: 0 8px 18px rgba(10, 40, 15, 0.08);
    }

    .auth-choice {
      display: grid;
      gap: 18px;
    }

    .auth-provider {
      min-height: 74px;
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 14px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      transition: 0.18s ease;
    }

    .auth-provider.google {
      border-color: rgba(66,133,244,0.24);
    }

    .auth-provider:hover {
      border-color: rgba(25,133,42,0.34);
      background: var(--green-50);
      transform: translateY(-1px);
    }

    .auth-provider.disabled {
      opacity: 0.78;
    }

    .auth-provider-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--line);
      color: #4285f4;
      font-size: 22px;
      font-weight: 900;
    }

    .auth-provider strong,
    .auth-provider small {
      display: block;
    }

    .auth-provider strong {
      color: var(--green-950);
      font-size: 16px;
      line-height: 1.25;
    }

    .auth-provider small {
      margin-top: 3px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.35;
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .auth-divider::before,
    .auth-divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--line);
    }

    .login-form {
      display: grid;
      gap: 10px;
    }

    .auth-form {
      padding: 2px 0 0;
    }

    .auth-honeypot {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .login-form label {
      color: var(--green-950);
      font-weight: 900;
    }

    .login-form input {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 13px;
      color: var(--text);
      background: #fff;
      outline: none;
    }

    .login-form input:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .login-form .btn {
      width: 100%;
      margin-top: 4px;
      min-height: 50px;
    }

    .auth-forgot-link,
    .auth-back-link {
      display: block;
      color: var(--green-800);
      font-size: 14px;
      font-weight: 900;
      text-align: center;
    }

    .auth-forgot-link:hover,
    .auth-back-link:hover {
      text-decoration: underline;
    }

    .auth-form-note {
      margin: 0;
      border-radius: 8px;
      padding: 12px 13px;
      background: var(--green-50);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .auth-message {
      margin-bottom: 16px;
      padding: 12px 14px;
      border-radius: 8px;
      font-weight: 800;
      line-height: 1.45;
    }

    .auth-message.success {
      background: var(--green-100);
      color: var(--green-950);
      border: 1px solid rgba(25,133,42,0.18);
    }

    .auth-message.error {
      background: #fff0f0;
      color: #8f1f1f;
      border: 1px solid #f2caca;
    }

    .auth-verify-action {
      display: block;
      margin: -6px 0 16px;
      border: 1px solid rgba(25,133,42,0.2);
      border-radius: 8px;
      padding: 11px 13px;
      background: var(--green-50);
      color: var(--green-800);
      font-size: 14px;
      font-weight: 900;
      text-align: center;
    }

    .auth-verify-action:hover {
      background: var(--green-100);
    }

    .auth-referral-arrival {
      display: grid;
      gap: 4px;
      margin-bottom: 16px;
      border: 1px solid rgba(25,133,42,0.22);
      border-radius: 8px;
      padding: 12px 14px;
      background: #fff7d2;
      color: var(--green-950);
    }

    .auth-referral-arrival strong {
      font-size: 15px;
    }

    .auth-referral-arrival span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .organization-page {
      background: #f0f3ed;
    }

    .organization-heading {
      max-width: 900px;
      margin-bottom: 24px;
    }

    .organization-heading .eyebrow {
      margin: 0 0 8px;
      color: var(--green-700);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .organization-heading h1 {
      margin: 0 0 12px;
      color: var(--green-950);
      font-size: 44px;
      line-height: 1.08;
    }

    .organization-heading > p:not(.eyebrow) {
      margin: 0 0 18px;
      max-width: 720px;
      color: var(--muted);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.6;
    }

    .organization-disclaimer {
      border: 1px solid #ead183;
      border-radius: 8px;
      padding: 14px 16px;
      background: #fff8df;
      color: #685000;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.55;
    }

    .organization-point-guide {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .organization-point-guide div {
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 8px;
      padding: 11px 13px;
      background: var(--green-50);
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .organization-point-guide strong {
      flex: 0 0 auto;
      color: var(--green-900);
      font-size: 20px;
    }

    .organization-layout {
      display: grid;
      grid-template-columns: minmax(390px, 1.06fr) minmax(320px, 0.94fr);
      gap: 22px;
      align-items: start;
    }

    .organization-register-panel,
    .organization-user-panel,
    .organization-public-panel,
    .organization-invitation-panel,
    .organization-setup-notice {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      background: white;
      box-shadow: var(--shadow);
    }

    .organization-invitation-panel {
      margin-bottom: 22px;
      border-color: rgba(25,133,42,0.22);
      background: #f5fbf3;
    }

    .organization-invitation-panel h3 {
      margin: 0 0 8px;
      color: var(--green-950);
      font-size: 21px;
    }

    .organization-invitation-panel > p {
      max-width: 720px;
      margin: 0 0 16px;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.55;
    }

    .organization-claim-form {
      display: grid;
      gap: 14px;
      max-width: 720px;
    }

    .organization-invitation-panel .organization-auth-needed {
      max-width: 720px;
      grid-template-columns: auto auto;
      align-items: center;
      justify-content: start;
    }

    .organization-invitation-panel .organization-auth-needed p {
      grid-column: 1 / -1;
    }

    .organization-side {
      display: grid;
      gap: 18px;
    }

    .organization-panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }

    .organization-panel-head h2,
    .organization-setup-notice h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 24px;
    }

    .organization-panel-head span {
      border-radius: 999px;
      padding: 6px 10px;
      background: var(--green-50);
      color: var(--green-800);
      font-size: 12px;
      font-weight: 900;
    }

    .organization-message {
      margin: 0 0 14px;
      border-radius: 8px;
      padding: 12px;
      font-weight: 800;
      line-height: 1.5;
    }

    .organization-message.success {
      border: 1px solid rgba(25,133,42,0.18);
      background: var(--green-100);
      color: var(--green-950);
    }

    .organization-message.error {
      border: 1px solid #f2caca;
      background: #fff0f0;
      color: #8f1f1f;
    }

    .organization-page-message {
      margin: 0 0 18px;
    }

    .organization-form {
      display: grid;
      gap: 13px;
    }

    .organization-form label {
      display: grid;
      gap: 7px;
      color: var(--green-950);
      font-size: 14px;
      font-weight: 900;
    }

    .organization-form label small {
      color: var(--muted);
      font-weight: 700;
    }

    .organization-form input:not([type="checkbox"]):not([type="radio"]),
    .organization-form select,
    .organization-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
      color: var(--text);
      outline: none;
    }

    .organization-form textarea {
      resize: vertical;
    }

    .organization-form input:focus,
    .organization-form select:focus,
    .organization-form textarea:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .organization-form-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 116px;
      gap: 12px;
    }

    .organization-visibility {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
    }

    .organization-visibility legend {
      padding: 0 6px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .organization-visibility label,
    .organization-accept {
      display: flex;
      grid-template-columns: none;
      flex-direction: row;
      align-items: flex-start;
      gap: 9px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .organization-visibility input,
    .organization-accept input {
      flex: 0 0 auto;
      margin-top: 3px;
    }

    .organization-accept {
      border-radius: 8px;
      padding: 11px 12px;
      background: var(--green-50);
    }

    .organization-auth-needed {
      display: grid;
      gap: 14px;
    }

    .organization-auth-needed p,
    .organization-empty,
    .organization-setup-notice p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.55;
    }

    .organization-user-list,
    .organization-public-list {
      display: grid;
      gap: 10px;
    }

    .organization-user-list article,
    .organization-public-list article {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--green-50);
    }

    .organization-user-list strong,
    .organization-public-list strong {
      display: block;
      color: var(--green-950);
      font-size: 16px;
      line-height: 1.35;
    }

    .organization-user-list p,
    .organization-public-list p {
      margin: 5px 0 9px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .organization-user-list span,
    .organization-public-list span {
      color: var(--green-700);
      font-size: 12px;
      font-weight: 900;
    }

    .organization-user-list small {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .organization-resend-form {
      margin-top: 12px;
    }

    .organization-resend-form .btn {
      min-height: 38px;
      padding: 8px 12px;
      font-size: 13px;
    }

    .organization-status.pending {
      color: #815900;
    }

    .organization-profile-link {
      color: inherit;
      text-decoration: none;
    }

    .organization-profile-link:hover strong {
      color: var(--green-700);
      text-decoration: underline;
    }

    .organization-profile-page {
      background: #f0f3ed;
    }

    .organization-profile-breadcrumb {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .organization-profile-breadcrumb a {
      color: var(--green-700);
      text-decoration: none;
    }

    .organization-profile-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      gap: 22px;
      align-items: center;
      border-radius: 8px;
      padding: 30px;
      margin-bottom: 22px;
      background: var(--green-950);
      color: white;
    }

    .organization-profile-copy .eyebrow {
      margin: 0 0 9px;
      color: #aee366;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .organization-profile-copy h1 {
      margin: 0 0 10px;
      color: white;
      font-size: 42px;
      line-height: 1.1;
    }

    .organization-profile-location {
      margin: 0 0 18px;
      color: #dfebdc;
      font-size: 18px;
      font-weight: 800;
    }

    .organization-profile-verified {
      display: inline-flex;
      border-radius: 999px;
      padding: 8px 13px;
      background: rgba(174, 227, 102, 0.16);
      color: #d7f39d;
      font-size: 13px;
      font-weight: 900;
    }

    .organization-profile-score {
      display: grid;
      gap: 6px;
      border-radius: 8px;
      padding: 22px;
      background: var(--yellow);
      color: var(--green-950);
    }

    .organization-profile-score span {
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .organization-profile-score strong {
      font-size: 44px;
      line-height: 1;
    }

    .organization-profile-score small {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .organization-profile-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 390px;
      gap: 22px;
      align-items: start;
    }

    .organization-profile-main,
    .organization-profile-support,
    .organization-profile-empty {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
      background: white;
      box-shadow: var(--shadow);
    }

    .organization-profile-main h2,
    .organization-profile-support h2,
    .organization-profile-empty h1 {
      margin: 0 0 12px;
      color: var(--green-950);
      font-size: 25px;
    }

    .organization-profile-main > p,
    .organization-profile-support > p,
    .organization-profile-empty p {
      margin: 0 0 19px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.7;
    }

    .organization-website-link {
      display: inline-flex;
      margin-bottom: 22px;
      color: var(--green-700);
      font-weight: 900;
    }

    .organization-profile-disclaimer {
      border-radius: 8px;
      padding: 14px 16px;
      background: #fff8df;
      color: #685000;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.6;
    }

    .organization-profile-side {
      display: grid;
      gap: 16px;
    }

    .organization-profile-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .organization-profile-stat-grid div {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: white;
      box-shadow: var(--shadow);
    }

    .organization-profile-stat-grid strong {
      display: block;
      color: var(--green-950);
      font-size: 29px;
      line-height: 1.15;
    }

    .organization-profile-stat-grid span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .organization-view-reward {
      margin: 0;
      padding: 12px 14px;
      border: 1px solid rgba(25,133,42,0.18);
      border-radius: 8px;
      background: var(--green-100);
      color: var(--green-950);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .profile-page {
      background: #f0f3ed;
    }

    .profile-shell {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    .profile-sidebar,
    .profile-panel {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .profile-sidebar {
      overflow: hidden;
      position: sticky;
      top: 100px;
    }

    .profile-identity {
      padding: 22px;
      background: linear-gradient(135deg, var(--green-950), var(--green-800));
      color: white;
    }

    .profile-identity-avatar {
      width: 68px;
      height: 68px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 30px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .profile-identity h1 {
      margin: 0 0 6px;
      font-size: 24px;
      line-height: 1.15;
    }

    .profile-identity p {
      margin: 0;
      color: rgba(255,255,255,0.78);
      font-size: 14px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .profile-tabs {
      display: grid;
      gap: 4px;
      padding: 10px;
    }

    .profile-tabs a {
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border-radius: 7px;
      color: var(--text);
      font-weight: 900;
    }

    .profile-tabs a::before {
      content: attr(data-profile-nav-icon);
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--green-50);
      color: var(--green-900);
      font-size: 10px;
      font-weight: 950;
    }

    .profile-tabs a:hover,
    .profile-tabs a.active {
      background: var(--green-100);
      color: var(--green-950);
    }

    .profile-tabs a:hover::before,
    .profile-tabs a.active::before {
      background: var(--yellow);
      color: var(--green-950);
    }

    .profile-tabs a.turbo {
      background: #fffbe2;
      color: var(--green-950);
    }

    .profile-content {
      min-width: 0;
    }

    .profile-panel {
      padding: 22px;
    }

    .profile-panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .profile-panel-head h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 30px;
      line-height: 1.1;
    }

    .profile-panel-head span {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 6px 10px;
      border-radius: 8px;
      background: var(--green-100);
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .profile-dashboard {
      display: grid;
      gap: 20px;
    }

    .dashboard-progress {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 22px;
      align-items: center;
      border-radius: 8px;
      padding: 22px;
      background: linear-gradient(130deg, var(--green-950), var(--green-800));
      color: white;
    }

    .dashboard-level-mark {
      position: relative;
      width: 96px;
      height: 96px;
      display: grid;
      place-items: center;
      transform: rotate(45deg);
      border-radius: 22px;
      border: 3px solid rgba(255, 230, 62, 0.9);
      background: rgba(255, 230, 62, 0.12);
      color: var(--yellow);
    }

    .dashboard-level-mark span {
      transform: rotate(-45deg);
      font-size: 46px;
      line-height: 1;
      font-weight: 900;
    }

    .dashboard-eyebrow {
      margin: 0 0 5px;
      color: var(--yellow);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .dashboard-progress-copy h2 {
      margin: 0;
      color: white;
      font-size: 28px;
      line-height: 1.1;
    }

    .dashboard-points {
      margin-top: 8px;
      color: white;
      font-size: 18px;
      font-weight: 800;
    }

    .dashboard-points strong {
      color: var(--yellow);
      font-size: 38px;
      line-height: 1;
    }

    .dashboard-bar {
      height: 9px;
      margin-top: 13px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,0.2);
    }

    .dashboard-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--yellow);
    }

    .dashboard-target {
      margin: 9px 0 0;
      color: rgba(255,255,255,0.86);
      font-size: 13px;
      font-weight: 800;
    }

    .dashboard-metrics {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .dashboard-metrics div {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px 14px;
      background: var(--green-50);
    }

    .dashboard-metrics strong {
      display: block;
      color: var(--green-950);
      font-size: 31px;
      line-height: 1;
      font-weight: 900;
    }

    .dashboard-metrics span {
      display: block;
      margin-top: 9px;
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .dashboard-metrics small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .dashboard-section {
      display: grid;
      gap: 14px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .dashboard-section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 15px;
    }

    .dashboard-section-head h3 {
      margin: 0 0 4px;
      color: var(--green-950);
      font-size: 21px;
    }

    .dashboard-section-head p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .dashboard-section-head a {
      flex: 0 0 auto;
      color: var(--green-800);
      font-size: 13px;
      font-weight: 900;
    }

    .dashboard-missions {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .dashboard-mission {
      display: grid;
      gap: 7px;
      min-height: 106px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px;
      background: white;
      color: var(--green-950);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: 0.18s ease;
    }

    .dashboard-mission:hover {
      border-color: rgba(25,133,42,0.32);
      background: var(--green-50);
      transform: translateY(-1px);
    }

    .dashboard-mission-score {
      justify-self: start;
      border-radius: 999px;
      padding: 4px 9px;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .dashboard-mission strong {
      font-size: 16px;
    }

    .dashboard-mission small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .dashboard-activity-list {
      display: grid;
      gap: 8px;
    }

    .dashboard-activity-list article {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 13px;
      background: var(--green-50);
    }

    .dashboard-activity-list strong {
      display: block;
      color: var(--green-950);
      font-size: 14px;
    }

    .dashboard-activity-list small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .dashboard-activity-list article > span {
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 5px 9px;
      background: white;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .dashboard-activity-list article > span.earned {
      background: var(--green-100);
      color: var(--green-900);
    }

    .profile-referrals {
      display: grid;
      gap: 18px;
    }

    .profile-referrals .profile-panel-head {
      margin-bottom: 0;
    }

    .profile-photos {
      display: grid;
      gap: 18px;
    }

    .profile-photos .profile-panel-head {
      margin-bottom: 0;
    }

    .photo-submit-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 180px;
      gap: 16px;
      align-items: center;
      border: 1px solid rgba(25,133,42,0.18);
      border-radius: 8px;
      padding: 18px;
      background: #eef9ec;
    }

    .photo-submit-intro h3 {
      margin: 0 0 7px;
      color: var(--green-950);
      font-size: 22px;
      line-height: 1.15;
    }

    .photo-submit-intro p:not(.dashboard-eyebrow) {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }

    .photo-submit-rules {
      border-radius: 8px;
      padding: 14px;
      background: white;
      text-align: center;
    }

    .photo-submit-rules strong {
      display: block;
      color: var(--green-950);
      font-size: 34px;
      line-height: 1;
      font-weight: 900;
    }

    .photo-submit-rules span,
    .photo-submit-rules small {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .photo-submit-form {
      display: grid;
      gap: 14px;
    }

    .photo-submit-form label,
    .photo-file-field {
      display: grid;
      gap: 7px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .photo-file-choice {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .photo-file-choice > p {
      grid-column: 1 / -1;
      margin: -2px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    .photo-file-field {
      position: relative;
      place-items: center;
      min-height: 178px;
      border: 2px dashed rgba(25,133,42,0.32);
      border-radius: 8px;
      padding: 22px;
      background: #f7fbf4;
      text-align: center;
      cursor: pointer;
    }

    .photo-file-field:hover {
      border-color: rgba(25,133,42,0.58);
      background: #eef9ec;
    }

    .photo-file-field input[type="file"] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .photo-file-icon {
      position: relative;
      width: 74px;
      height: 56px;
      display: block;
      border: 4px solid var(--green-900);
      border-radius: 12px;
      background: white;
    }

    .photo-file-icon::before {
      content: "";
      position: absolute;
      left: 21px;
      top: 12px;
      width: 24px;
      height: 24px;
      border: 4px solid var(--green-900);
      border-radius: 50%;
      background: var(--yellow);
    }

    .photo-file-icon::after {
      content: "";
      position: absolute;
      left: 8px;
      top: -12px;
      width: 24px;
      height: 12px;
      border-radius: 8px 8px 0 0;
      background: var(--green-900);
    }

    .photo-file-icon-library {
      width: 72px;
      height: 58px;
      border-radius: 8px;
    }

    .photo-file-icon-library::before {
      left: 10px;
      top: 25px;
      width: 48px;
      height: 18px;
      border: 0;
      border-radius: 4px;
      background: linear-gradient(135deg, var(--green-900) 0 48%, var(--yellow) 49% 100%);
    }

    .photo-file-icon-library::after {
      left: 11px;
      top: 9px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--yellow);
    }

    .photo-file-field strong {
      color: var(--green-950);
      font-size: 20px;
      line-height: 1.2;
    }

    .photo-submit-form input[type="text"],
    .photo-submit-form select,
    .photo-submit-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
      color: var(--text);
      font: inherit;
      font-weight: 700;
    }

    .photo-submit-form textarea {
      resize: vertical;
    }

    .photo-submit-form small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    .photo-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .photo-postcode-input {
      min-height: 58px;
      text-align: center;
      font-size: 25px !important;
      font-weight: 950 !important;
      letter-spacing: 0.32em;
      text-indent: 0.32em;
    }

    .photo-postcode-status {
      display: grid;
      gap: 7px;
      min-height: 22px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 800;
    }

    .photo-postcode-status strong,
    .photo-postcode-status span {
      display: block;
    }

    .photo-postcode-status span {
      color: var(--muted);
      font-size: 12px;
    }

    .photo-postcode-select {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: white;
      color: var(--green-950);
      font: inherit;
      font-weight: 800;
    }

    .photo-location-panel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: var(--green-50);
    }

    .photo-location-panel strong {
      display: block;
      color: var(--green-950);
      font-size: 15px;
    }

    .photo-location-panel p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .photo-submission-history {
      display: grid;
      gap: 12px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .photo-submission-list {
      display: grid;
      gap: 10px;
      max-height: 780px;
      overflow-y: auto;
      padding-right: 3px;
    }

    .photo-submission-list article {
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr) auto auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
      background: white;
    }

    .photo-submission-list img {
      width: 72px;
      height: 56px;
      border-radius: 7px;
      object-fit: cover;
      background: var(--green-50);
    }

    .photo-submission-list strong {
      display: block;
      color: var(--green-950);
      font-size: 15px;
    }

    .photo-submission-list p,
    .photo-submission-list small {
      display: block;
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .photo-submission-list article > span,
    .photo-submission-list em {
      border-radius: 999px;
      padding: 5px 9px;
      background: var(--green-100);
      color: var(--green-950);
      font-size: 12px;
      font-style: normal;
      font-weight: 900;
      white-space: nowrap;
    }

    .photo-submission-list em {
      background: #fff2c2;
    }

    .referral-reward-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .referral-reward-grid div {
      border: 1px solid rgba(25,133,42,0.16);
      border-radius: 8px;
      padding: 14px;
      background: var(--green-50);
    }

    .referral-reward-grid strong {
      display: block;
      margin-bottom: 5px;
      color: var(--green-900);
      font-size: 23px;
    }

    .referral-reward-grid span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.4;
    }

    .affiliate-share-panel {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.1fr) 250px;
      align-items: center;
      gap: 16px;
      border: 1px solid rgba(25,133,42,0.2);
      border-radius: 8px;
      padding: 18px;
      background: linear-gradient(100deg, #eef9ec 0%, #fff7d7 100%);
    }

    .affiliate-share-copy .eyebrow {
      margin: 0 0 5px;
      color: var(--green-700);
      font-size: 11px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .affiliate-share-copy h3 {
      margin: 0 0 6px;
      color: var(--green-950);
      font-size: 20px;
    }

    .affiliate-share-copy > p:not(.eyebrow) {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .affiliate-link-control {
      display: grid;
      gap: 7px;
    }

    .affiliate-link-control label {
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
    }

    .affiliate-link-control > div {
      display: flex;
      gap: 7px;
    }

    .affiliate-link-control input {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(25,133,42,0.24);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
      color: var(--green-950);
      font-size: 15px;
      font-weight: 900;
    }

    .affiliate-link-control .btn {
      flex: 0 0 auto;
      padding-inline: 15px;
    }

    .affiliate-link-control small {
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .affiliate-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .affiliate-stats div {
      min-width: 0;
      border-radius: 8px;
      padding: 10px 6px;
      background: white;
      text-align: center;
    }

    .affiliate-stats strong,
    .affiliate-stats span {
      display: block;
    }

    .affiliate-stats strong {
      color: var(--green-900);
      font-size: 21px;
    }

    .affiliate-stats span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .referral-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 290px;
      gap: 14px;
      align-items: start;
    }

    .referral-form-panel,
    .referral-organization-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 18px;
      background: white;
    }

    .referral-form-panel h3,
    .referral-organization-panel h3 {
      margin: 0 0 7px;
      color: var(--green-950);
      font-size: 21px;
    }

    .referral-form-panel > p,
    .referral-organization-panel p {
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }

    .referral-form {
      display: grid;
      gap: 12px;
    }

    .referral-form > label:not(.organization-accept) {
      display: grid;
      gap: 6px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .referral-form label small {
      color: var(--muted);
      font-weight: 700;
    }

    .referral-form input:not([type="checkbox"]),
    .referral-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
      color: var(--text);
      outline: none;
    }

    .referral-form textarea {
      resize: vertical;
    }

    .referral-form input:focus,
    .referral-form textarea:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .referral-templates {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 7px;
    }

    .referral-templates span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .referral-templates button {
      border: 1px solid rgba(25,133,42,0.22);
      border-radius: 999px;
      padding: 6px 10px;
      background: var(--green-50);
      color: var(--green-900);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .referral-templates button:hover {
      background: var(--green-100);
    }

    .referral-organization-panel {
      background: #fff8df;
    }

    .referral-organization-panel strong {
      display: block;
      color: var(--green-900);
      font-size: 30px;
      line-height: 1;
    }

    .referral-organization-panel small {
      display: block;
      margin: 7px 0 16px;
      color: var(--muted);
      font-weight: 800;
      line-height: 1.45;
    }

    .referral-organization-panel .btn {
      display: block;
      text-align: center;
    }

    .referral-history {
      display: grid;
      gap: 13px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .referral-history-list {
      display: grid;
      gap: 8px;
    }

    .referral-history-list article {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 13px;
      background: var(--green-50);
    }

    .referral-history-list strong {
      display: block;
      color: var(--green-950);
      font-size: 14px;
    }

    .referral-history-list small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .referral-history-list article > span {
      flex: 0 0 auto;
      border-radius: 999px;
      padding: 6px 10px;
      color: var(--muted);
      background: white;
      font-size: 12px;
      font-weight: 900;
    }

    .referral-history-list article > span.registered {
      background: var(--green-100);
      color: var(--green-900);
    }

    .referral-history-list article > span.failed {
      background: #fff0f0;
      color: #8f1f1f;
    }

    .notification-center {
      display: grid;
      gap: 18px;
    }

    .notification-center .profile-panel-head {
      margin-bottom: 0;
    }

    .notification-intro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 218px;
      align-items: center;
      gap: 18px;
      border-radius: 8px;
      padding: 19px;
      color: white;
      background: linear-gradient(125deg, var(--green-950), var(--green-800));
    }

    .notification-intro h3 {
      margin: 3px 0 7px;
      color: white;
      font-size: 23px;
    }

    .notification-intro p:not(.dashboard-eyebrow) {
      max-width: 580px;
      margin: 0;
      color: rgba(255,255,255,0.83);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }

    .notification-channel-state {
      display: grid;
      gap: 8px;
    }

    .notification-channel-state span {
      display: grid;
      gap: 3px;
      border-radius: 8px;
      padding: 11px 12px;
      color: rgba(255,255,255,0.76);
      font-size: 12px;
      font-weight: 800;
      background: rgba(255,255,255,0.1);
    }

    .notification-channel-state strong {
      color: white;
      font-size: 15px;
    }

    .notification-channel-state .is-ready strong {
      color: var(--yellow);
    }

    .push-setup {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 20px;
      border: 1px solid #d7e7d5;
      border-radius: 10px;
      padding: 18px 19px;
      background: #f4faf0;
    }

    .push-setup-copy h3 {
      margin: 3px 0 6px;
      color: var(--green-950);
      font-size: 19px;
    }

    .push-setup-copy > p:not(.dashboard-eyebrow):not(.push-status) {
      max-width: 590px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }

    .push-status {
      margin: 10px 0 0;
      color: var(--green-800);
      font-size: 12px;
      font-weight: 900;
    }

    .push-status.is-error {
      color: #8f1f1f;
    }

    .push-actions {
      display: grid;
      gap: 9px;
      min-width: 188px;
    }

    .push-actions .btn {
      justify-content: center;
      min-width: 188px;
    }

    .push-disable {
      border: 0;
      padding: 4px;
      color: var(--muted);
      background: transparent;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .push-disable:hover {
      color: var(--green-950);
    }

    .notification-form {
      display: grid;
      gap: 14px;
    }

    .notification-hour {
      display: grid;
      justify-self: start;
      gap: 6px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .notification-hour select {
      min-width: 210px;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 12px;
      color: var(--green-950);
      background: white;
      font: inherit;
    }

    .notification-hour small {
      color: var(--muted);
      font-weight: 700;
    }

    .notification-table-head,
    .notification-option {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 106px 106px;
      align-items: center;
      gap: 10px;
    }

    .notification-table-head {
      border-bottom: 1px solid var(--line);
      padding: 4px 14px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .notification-table-head span {
      text-align: center;
    }

    .notification-options {
      display: grid;
      gap: 8px;
    }

    .notification-option {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px 14px;
      background: var(--green-50);
    }

    .notification-option small {
      display: block;
      margin-bottom: 4px;
      color: var(--green-700);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .notification-option h3 {
      margin: 0 0 4px;
      color: var(--green-950);
      font-size: 17px;
    }

    .notification-option p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .notification-check {
      display: grid;
      justify-items: center;
      gap: 6px;
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .notification-check input {
      width: 22px;
      height: 22px;
      accent-color: var(--green-700);
    }

    .notification-check.is-disabled {
      color: var(--muted);
      cursor: not-allowed;
    }

    .notification-check.is-disabled input {
      opacity: .42;
    }

    .notification-form-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-top: 1px solid var(--line);
      padding-top: 14px;
    }

    .notification-form-actions p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .notification-form-actions .btn {
      flex: 0 0 auto;
    }

    .notification-history {
      display: grid;
      gap: 13px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .notification-history-list {
      display: grid;
      gap: 8px;
    }

    .notification-history-list article {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      background: var(--green-50);
    }

    .notification-history-list strong {
      color: var(--green-950);
    }

    .notification-history-list p {
      margin: 4px 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .notification-history-list small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .notification-history-list a {
      flex: 0 0 auto;
      color: var(--green-800);
      font-size: 12px;
      font-weight: 900;
    }

    @media (max-width: 720px) {
      .notification-intro {
        grid-template-columns: 1fr;
        padding: 16px;
      }

      .push-setup {
        grid-template-columns: 1fr;
      }

      .push-actions,
      .push-actions .btn {
        width: 100%;
      }

      .notification-table-head {
        display: none;
      }

      .notification-option {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px 8px;
      }

      .notification-option > div {
        grid-column: 1 / -1;
      }

      .notification-check {
        border-radius: 7px;
        padding: 9px;
        background: white;
      }

      .notification-form-actions,
      .notification-history-list article {
        align-items: stretch;
        flex-direction: column;
      }
    }

    .profile-data-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 0;
    }

    .profile-data-grid div,
    .profile-stat-grid div,
    .activity-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--green-50);
    }

    .profile-data-grid div {
      padding: 14px;
    }

    .profile-data-grid dt {
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .profile-data-grid dd {
      margin: 0;
      color: var(--green-950);
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .activity-list {
      display: grid;
      gap: 10px;
    }

    .activity-item {
      padding: 13px 14px;
    }

    .activity-item strong {
      display: block;
      color: var(--green-950);
      font-size: 15px;
    }

    .activity-item span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .activity-item p {
      margin: 8px 0 0;
      color: var(--text);
      font-weight: 700;
      line-height: 1.45;
    }

    .profile-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .profile-point-history {
      margin-top: 18px;
    }

    .activity-table-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 10px;
      margin: 18px 0 10px;
      align-items: end;
    }

    .activity-table-tools label {
      display: grid;
      gap: 6px;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .activity-table-tools input,
    .activity-table-tools select {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 9px 10px;
      color: var(--text);
      background: white;
      outline: none;
    }

    .activity-table-tools input:focus,
    .activity-table-tools select:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .activity-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .activity-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px;
      color: var(--text);
      font-size: 13px;
    }

    .activity-table th,
    .activity-table td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
      line-height: 1.25;
      white-space: nowrap;
    }

    .activity-table th {
      background: var(--green-50);
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .activity-table td:nth-child(3) {
      white-space: normal;
      min-width: 220px;
    }

    .activity-table tbody tr:hover {
      background: var(--green-50);
    }

    .activity-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .activity-table-score {
      color: var(--green-900);
      font-weight: 900;
    }

    .activity-table-empty {
      margin: 0;
      border: 0;
      border-top: 1px solid var(--line);
      border-radius: 0;
    }

    .profile-stat-grid div {
      padding: 18px;
      text-align: center;
    }

    .profile-stat-grid strong {
      display: block;
      color: var(--green-950);
      font-size: 36px;
      line-height: 1;
    }

    .profile-stat-grid span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-weight: 900;
    }

    .profile-empty,
    .turbo-panel p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.6;
    }

    .profile-rewards {
      display: grid;
      gap: 18px;
    }

    .reward-explainer {
      border: 1px solid rgba(231, 223, 21, 0.48);
      border-radius: 8px;
      padding: 18px;
      background: linear-gradient(135deg, #fffbe0, #eef8e8);
    }

    .reward-explainer h3 {
      margin: 4px 0 8px;
      color: var(--green-950);
      font-size: 22px;
      line-height: 1.15;
    }

    .reward-explainer p:last-child {
      margin: 0;
      color: #3f5945;
      line-height: 1.55;
    }

    .profile-reward-list {
      display: grid;
      gap: 14px;
    }

    .profile-reward-card {
      display: grid;
      gap: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
      background: white;
    }

    .profile-reward-card-head,
    .profile-reward-meta,
    .profile-reward-user,
    .profile-reward-leaders li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .profile-reward-card-head small {
      color: #0c7b44;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .profile-reward-card-head h3 {
      margin: 3px 0 0;
      color: var(--green-950);
      font-size: 21px;
      line-height: 1.2;
    }

    .profile-reward-card-head > span,
    .profile-reward-user {
      border-radius: 8px;
      padding: 9px 12px;
      background: var(--yellow);
      color: var(--green-950);
      font-weight: 900;
      white-space: nowrap;
    }

    .profile-reward-card > p {
      margin: 0;
      color: #53655a;
      line-height: 1.55;
    }

    .profile-reward-meta {
      flex-wrap: wrap;
      color: #4c6456;
      font-size: 13px;
      font-weight: 800;
    }

    .profile-reward-user {
      justify-content: flex-start;
      background: var(--green-50);
      border: 1px solid #d8e8d0;
      white-space: normal;
    }

    .profile-reward-user strong {
      color: var(--green-950);
      font-size: 20px;
    }

    .profile-reward-prizes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .profile-reward-prizes div {
      display: grid;
      gap: 3px;
      border-radius: 8px;
      padding: 11px;
      background: #f7faf5;
      border: 1px solid var(--line);
    }

    .profile-reward-prizes strong {
      color: var(--green-950);
    }

    .profile-reward-prizes span,
    .profile-reward-prizes small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .profile-reward-leaders {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .profile-reward-leaders li {
      border-top: 1px solid var(--line);
      padding-top: 8px;
      color: #435a4c;
      font-size: 13px;
      font-weight: 800;
    }

    .profile-reward-leaders strong {
      color: #08703b;
    }

    .profile-organizations {
      display: grid;
      gap: 16px;
    }

    .profile-organizations .profile-panel-head {
      margin-bottom: 0;
    }

    .profile-organization-notice {
      border: 1px solid #ead183;
      border-radius: 8px;
      padding: 13px 14px;
      background: #fff8df;
      color: #685000;
    }

    .profile-organization-notice strong {
      display: block;
      margin-bottom: 5px;
      color: var(--green-950);
    }

    .profile-organization-notice p {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
    }

    .profile-organization-section {
      display: grid;
      gap: 15px;
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

    .profile-organization-section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
    }

    .profile-organization-section-head h3 {
      margin: 0 0 7px;
      color: var(--green-950);
      font-size: 21px;
      line-height: 1.25;
    }

    .profile-organization-section-head p {
      max-width: 570px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.55;
    }

    .profile-organization-section-head .btn {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .profile-organization-points {
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: 8px;
      padding: 12px 14px;
      background: var(--green-50);
      color: var(--green-950);
    }

    .profile-organization-points strong {
      flex: 0 0 auto;
      color: var(--green-900);
      font-size: 24px;
    }

    .profile-organization-points span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .profile-organization-points.compact {
      display: grid;
      gap: 2px;
      min-width: 125px;
      text-align: center;
    }

    .profile-organization-points.compact strong {
      font-size: 20px;
    }

    .profile-organization-owned {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .organization-contributors {
      margin-top: 12px;
      border-top: 1px solid rgba(25,133,42,0.16);
      padding-top: 11px;
    }

    .organization-contributors summary {
      cursor: pointer;
      color: var(--green-800);
      font-size: 13px;
      font-weight: 900;
    }

    .organization-contributors[open] summary {
      margin-bottom: 11px;
    }

    .organization-contributors-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
    }

    .organization-contributors-table {
      min-width: 500px;
      width: 100%;
      border-collapse: collapse;
    }

    .organization-contributors-table th,
    .organization-contributors-table td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .organization-contributors-table th {
      background: #f7faf5;
      color: var(--green-950);
      font-weight: 900;
    }

    .organization-contributors-table tr:last-child td {
      border-bottom: 0;
    }

    .organization-contributors-table td:last-child strong {
      color: var(--green-800);
      font-size: 14px;
    }

    .organization-contributors-empty {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .profile-supported-current {
      margin: 0;
      border-radius: 8px;
      padding: 12px 14px;
      background: var(--green-100);
      color: var(--green-950);
      font-weight: 800;
    }

    .ad-slot {
      position: relative;
      display: grid;
      align-items: center;
      width: 100%;
      border: 1px solid #dce5d8;
      border-radius: 8px;
      padding: 24px 12px 10px;
      overflow: hidden;
      background: #f7f9f5;
    }

    .ad-slot-label {
      position: absolute;
      top: 7px;
      left: 12px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      text-transform: uppercase;
    }

    .ad-slot-placeholder {
      display: grid;
      place-items: center;
      min-height: inherit;
      color: #81947d;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .ad-slot .adsbygoogle {
      display: block;
      width: 100%;
      min-height: inherit;
    }

    .ad-slot-leaderboard {
      min-height: 250px;
    }

    .ad-slot-leaderboard .adsbygoogle {
      min-height: 90px;
    }

    .ad-slot-billboard {
      min-height: 250px;
    }

    .ad-slot-billboard .adsbygoogle {
      min-height: 220px;
    }

    .ad-slot-news-top {
      margin: 0 0 20px;
    }

    .ad-slot-news-inline {
      margin: 22px 0;
    }

    .home-ad-band {
      padding-top: 18px;
    }

    .home-ad-band-last {
      padding-bottom: 22px;
    }

    .ad-slot-home {
      min-height: 250px;
    }

    .ad-slot-grid-wide {
      grid-column: 1 / -1;
      margin: 4px 0;
    }

    .ad-slot-article-feature {
      margin: 0 0 18px;
    }

    .ad-slot-article-end {
      margin: 18px 0 0;
    }

    .ad-slot-profile {
      margin-top: 18px;
    }

    .ad-slot-profile-progress {
      min-height: 116px;
    }

    .organization-select-form {
      display: grid;
      grid-template-columns: minmax(210px, 1fr) auto;
      gap: 9px 12px;
      align-items: end;
    }

    .organization-select-form label {
      grid-column: 1 / -1;
      color: var(--green-950);
      font-size: 13px;
      font-weight: 900;
    }

    .organization-select-form select {
      width: 100%;
      min-height: 48px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      background: white;
      color: var(--text);
    }

    .organization-select-form select:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
      outline: none;
    }

    .turbo-panel .btn {
      display: inline-flex;
      margin-top: 18px;
    }

    .mega-menu {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0 22px;
    }

    .mega-menu-group {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      box-shadow: var(--shadow);
      min-height: 92px;
    }

    .mega-menu-title {
      display: block;
      font-weight: 900;
      color: var(--green-950);
      line-height: 1.25;
      margin-bottom: 10px;
    }

    .mega-menu-title.active,
    .mega-menu-links a.active {
      color: var(--green-800);
      text-decoration: underline;
    }

    .mega-menu-links {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .mega-menu-links a {
      display: inline-flex;
      padding: 6px 8px;
      border-radius: 7px;
      background: var(--green-50);
      color: #38573e;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
    }

    .news-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .news-archive-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 24px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: white;
      box-shadow: var(--shadow);
    }

    .news-archive-pagination > span {
      color: var(--green-950);
      font-weight: 900;
    }

    .news-archive-pagination div {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }

    .news-archive-pagination a,
    .news-archive-pagination strong,
    .news-archive-pagination div span {
      min-width: 36px;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      padding: 0 11px;
      font-size: 13px;
      font-weight: 900;
    }

    .news-archive-pagination a {
      border: 1px solid var(--line);
      color: var(--green-900);
      background: var(--green-50);
    }

    .news-archive-pagination a:hover {
      border-color: var(--green-700);
      background: var(--green-900);
      color: white;
    }

    .news-archive-pagination strong {
      background: var(--yellow);
      color: var(--green-950);
    }

    .news-archive-pagination div span {
      color: var(--muted);
      min-width: auto;
      padding: 0 2px;
    }

    .submenu-boxes {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 12px;
      margin: 18px 0 22px;
    }

    .submenu-box {
      min-height: 112px;
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 12px;
      color: var(--green-950);
    }

    .submenu-box:hover {
      background: var(--green-950);
      color: white;
      transform: translateY(-1px);
    }

    .submenu-box-mark {
      align-self: flex-start;
      background: var(--yellow);
      color: var(--green-950);
      border-radius: 999px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 900;
    }

    .submenu-box strong {
      font-size: 16px;
      line-height: 1.2;
      font-weight: 900;
    }

    @media (max-width: 1320px) {
      .submenu-boxes {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
    }

    @media (max-width: 1160px) {
      .submenu-boxes {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px) {
      .submenu-boxes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 820px) {
      .submenu-boxes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      .submenu-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .news-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .settlement-hero,
    .settlement-heading {
      border: 1px solid rgba(12, 77, 22, .12);
      border-radius: 8px;
      padding: 28px;
      background:
        radial-gradient(circle at 82% 12%, rgba(231, 223, 21, .28), transparent 28%),
        linear-gradient(135deg, #f8fff3, #ffffff);
      box-shadow: var(--shadow);
    }

    .settlement-hero h1,
    .settlement-heading h1 {
      margin: 6px 0 10px;
      color: var(--green-950);
      font-size: clamp(38px, 5vw, 74px);
      line-height: .96;
      letter-spacing: 0;
    }

    .settlement-hero p:not(.eyebrow),
    .settlement-heading p {
      max-width: 720px;
      margin: 0;
      color: var(--muted);
      font-size: 18px;
      font-weight: 800;
      line-height: 1.45;
    }

    .settlement-search-card,
    .settlement-news-block {
      margin-top: 22px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 22px;
      background: white;
      box-shadow: var(--shadow);
    }

    .settlement-search-form {
      display: grid;
      gap: 10px;
    }

    .settlement-search-form label {
      color: var(--green-950);
      font-size: 15px;
      font-weight: 1000;
    }

    .settlement-search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
    }

    .settlement-search-row input {
      min-height: 62px;
      border: 2px solid rgba(12, 77, 22, .18);
      border-radius: 8px;
      padding: 14px 18px;
      color: var(--green-950);
      font-size: 28px;
      font-weight: 1000;
      outline: none;
    }

    .settlement-search-row input:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 4px rgba(25, 133, 42, .12);
    }

    .settlement-search-form p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .settlement-results {
      display: grid;
      gap: 8px;
      margin-top: 18px;
    }

    .settlement-ad-section {
      margin-top: 22px;
    }

    .settlement-ad-section .ad-slot-settlements {
      margin: 0;
    }

    .settlement-popular {
      margin-top: 22px;
      border-radius: 8px;
      padding: 18px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255, 221, 20, .3), transparent 30%),
        linear-gradient(135deg, rgba(18, 85, 60, .06), rgba(255, 255, 255, .95));
      border: 1px solid rgba(12, 77, 22, .1);
    }

    .settlement-popular-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .settlement-popular-head h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 22px;
      line-height: 1.05;
    }

    .settlement-popular-head p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-align: right;
    }

    .settlement-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .settlement-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      border: 1px solid rgba(12, 77, 22, .16);
      border-radius: 999px;
      padding: 8px 14px;
      background: #fffbe4;
      color: var(--green-950);
      font-weight: 1000;
      box-shadow: 0 8px 18px rgba(10, 40, 15, .08);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    .settlement-chip:hover {
      border-color: rgba(25, 133, 42, .45);
      box-shadow: 0 12px 24px rgba(10, 40, 15, .13);
      transform: translateY(-1px);
    }

    .settlement-chip span {
      border-radius: 999px;
      padding: 3px 7px;
      background: var(--green-100);
      color: var(--green-800);
      font-size: 12px;
      line-height: 1;
    }

    .settlement-result-item {
      display: grid;
      grid-template-columns: minmax(92px, .34fr) minmax(180px, 1fr) minmax(140px, .6fr);
      align-items: center;
      gap: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      background: #fbfdf8;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    .settlement-result-item:hover,
    .settlement-result-item.active {
      border-color: rgba(25, 133, 42, .55);
      box-shadow: 0 10px 22px rgba(10, 40, 15, .1);
      transform: translateY(-1px);
    }

    .settlement-result-item strong {
      color: var(--yellow-dark);
      font-size: 32px;
      line-height: 1;
      font-weight: 1000;
    }

    .settlement-result-item span {
      color: var(--green-950);
      font-size: 22px;
      font-weight: 1000;
    }

    .settlement-result-item small,
    .settlement-empty {
      color: var(--muted);
      font-weight: 800;
    }

    .settlement-heading {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
    }

    .settlement-back {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--green-100);
      color: var(--green-950);
      font-weight: 1000;
    }

    .settlement-text-ads {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 22px;
    }

    .settlement-text-ad {
      position: relative;
      overflow: hidden;
      min-height: 210px;
      border-radius: 8px;
      padding: 24px;
      color: #ffffff;
      background:
        radial-gradient(circle at 88% 16%, rgba(255, 225, 30, .36), transparent 28%),
        linear-gradient(135deg, #064529 0%, #0c6b3f 58%, #15964f 100%);
      box-shadow: 0 18px 36px rgba(5, 36, 18, .2);
      transition: transform .16s ease, box-shadow .16s ease;
    }

    .settlement-text-ad:nth-child(2) {
      color: var(--green-950);
      background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .42), transparent 26%),
        linear-gradient(135deg, #ffe23f 0%, #f6d229 56%, #f4b929 100%);
    }

    .settlement-text-ad::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -42px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .13);
      pointer-events: none;
    }

    .settlement-text-ad:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 44px rgba(5, 36, 18, .25);
    }

    .settlement-text-ad span {
      display: inline-flex;
      border-radius: 999px;
      padding: 6px 10px;
      background: rgba(255, 255, 255, .18);
      font-size: 12px;
      font-weight: 1000;
      text-transform: uppercase;
    }

    .settlement-text-ad:nth-child(2) span {
      background: rgba(12, 77, 22, .12);
    }

    .settlement-text-ad strong {
      display: block;
      max-width: 520px;
      margin-top: 16px;
      font-size: clamp(24px, 2.5vw, 38px);
      line-height: 1;
      letter-spacing: 0;
    }

    .settlement-text-ad p {
      max-width: 620px;
      margin: 14px 0 0;
      font-size: 15px;
      font-weight: 850;
      line-height: 1.45;
      opacity: .94;
    }

    .settlement-google-ad-section {
      margin-top: 22px;
    }

    .settlement-google-ad-section .ad-slot-settlement-page {
      margin: 0;
    }

    .news-card-image {
      aspect-ratio: 16 / 10;
      background: var(--green-100);
      overflow: hidden;
    }

    .news-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .news-card-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .news-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .news-card-status span,
    .news-meta span[data-article-stat],
    .tiny-meta span[data-article-stat],
    .article-stat-pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--green-100);
      color: var(--green-950);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }

    .news-card-status span.count-updating,
    .news-meta span.count-updating,
    .tiny-meta span.count-updating,
    .article-stat-pill.count-updating {
      background: #fff7b8;
      box-shadow: 0 8px 18px rgba(10, 40, 15, 0.12);
      transform: translateY(-1px) scale(1.03);
    }

    [data-count-up] {
      display: inline-block;
      transition: transform 0.18s ease, color 0.18s ease;
    }

    [data-count-up].count-updating {
      color: var(--green-950);
      transform: translateY(-1px) scale(1.04);
    }

    .point-bubble {
      position: fixed;
      left: 50%;
      bottom: 22px;
      min-width: 116px;
      display: grid;
      place-items: center;
      padding: 14px 18px;
      border-radius: 999px;
      background: var(--yellow);
      color: var(--green-950);
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 18px 36px rgba(10, 40, 15, 0.22);
      opacity: 0;
      transform: translate(-50%, 24px) scale(0.92);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 120;
    }

    .point-bubble.show {
      opacity: 1;
      animation: pointFloat 2.1s ease forwards;
    }

    .point-bubble.hide {
      opacity: 0;
    }

    .point-bubble.guest {
      width: min(360px, calc(100% - 28px));
      grid-template-columns: 1fr auto;
      gap: 12px;
      place-items: center stretch;
      border-radius: 8px;
      background: white;
      color: var(--green-950);
      border: 1px solid rgba(231,223,21,0.8);
      font-size: 14px;
      line-height: 1.35;
      pointer-events: auto;
    }

    .point-bubble.guest.show {
      animation: pointShake 0.54s ease both;
    }

    .point-bubble.guest strong {
      display: block;
    }

    .point-bubble.guest a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 9px 11px;
      border-radius: 7px;
      background: var(--green-900);
      color: white;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    @keyframes pointFloat {
      0% { transform: translate(-50%, 24px) scale(0.92); opacity: 0; }
      15% { transform: translate(-50%, 0) scale(1.04); opacity: 1; }
      78% { transform: translate(-50%, -72px) scale(1); opacity: 1; }
      100% { transform: translate(-50%, -112px) scale(0.98); opacity: 0; }
    }

    @keyframes pointShake {
      0%, 100% { transform: translate(-50%, 0); }
      18% { transform: translate(calc(-50% - 8px), 0); }
      36% { transform: translate(calc(-50% + 7px), 0); }
      54% { transform: translate(calc(-50% - 5px), 0); }
      72% { transform: translate(calc(-50% + 4px), 0); }
    }

    .news-card h2 {
      margin: 0;
      font-size: 21px;
      line-height: 1.18;
      color: var(--green-950);
    }

    .news-card p {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
      line-height: 1.5;
    }

    .empty-state {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 24px;
      margin-top: 18px;
      box-shadow: var(--shadow);
    }

    .empty-state h1,
    .empty-state h2 {
      margin: 0 0 8px;
      color: var(--green-950);
    }

    .empty-state p {
      color: var(--muted);
      font-weight: 700;
    }

    .article-container {
      max-width: 1280px;
    }

    .back-link {
      display: inline-block;
      margin-bottom: 16px;
      color: var(--green-900);
      font-weight: 900;
      text-decoration: underline;
    }

    .article-detail {
      background: white;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .article-layout {
      display: grid;
      grid-template-columns: minmax(0, 880px) 360px;
      gap: 22px;
      align-items: start;
    }

    .article-header {
      padding: 24px 24px 18px;
    }

    .article-header h1 {
      margin: 10px 0 12px;
      font-size: 42px;
      line-height: 1.05;
      color: var(--green-950);
    }

    .article-header p {
      margin: 0;
      color: var(--muted);
      font-weight: 800;
      line-height: 1.55;
    }

    .article-alert {
      margin: 0 24px 20px;
      border-radius: 8px;
      padding: 15px 16px;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.55;
    }

    .article-alert-warning {
      border: 1px solid #f0d17a;
      background: #fff8df;
      color: #755200;
    }

    .article-alert-legal {
      margin-top: 0;
      margin-bottom: 24px;
      border: 1px solid rgba(25, 133, 42, 0.2);
      background: var(--green-50);
      color: var(--muted);
    }

    .article-hero-image {
      width: 100%;
      max-height: 440px;
      object-fit: cover;
      background: var(--green-100);
    }

    .article-content {
      padding: 24px;
      color: #243b28;
      font-size: 17px;
      line-height: 1.7;
    }

    .article-content p {
      margin-top: 0;
    }

    .article-content img {
      height: auto;
      margin: 18px auto;
      border-radius: 8px;
    }

    .article-comments {
      position: sticky;
      top: 100px;
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: white;
      box-shadow: var(--shadow);
    }

    .article-comments-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .article-comments-head h2 {
      margin: 0;
      color: var(--green-950);
      font-size: 24px;
      line-height: 1.1;
    }

    .article-comments-head span {
      min-width: 34px;
      min-height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--green-950);
      font-weight: 900;
    }

    .article-comment-list {
      display: grid;
      gap: 10px;
    }

    .article-comment {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--green-50);
    }

    .article-comment strong {
      display: block;
      color: var(--green-950);
      font-size: 15px;
      line-height: 1.25;
    }

    .article-comment span {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .article-comment p {
      margin: 8px 0 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      overflow-wrap: anywhere;
    }

    .article-comment-form {
      display: grid;
      gap: 10px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .article-comment-form h3 {
      margin: 0;
      color: var(--green-950);
      font-size: 20px;
    }

    .article-comment-form label {
      display: grid;
      gap: 6px;
      color: var(--green-950);
      font-weight: 900;
    }

    .article-comment-form input,
    .article-comment-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      color: var(--text);
      background: white;
      outline: none;
    }

    .article-comment-form textarea {
      resize: vertical;
    }

    .article-comment-form input:focus,
    .article-comment-form textarea:focus {
      border-color: var(--green-700);
      box-shadow: 0 0 0 3px rgba(25,133,42,0.12);
    }

    .article-comment-form .btn {
      justify-self: start;
    }

    .article-comment-note,
    .article-comment-login-note,
    .article-comment-message {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.45;
    }

    .article-comment-message {
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
    }

    .article-comment-message.success {
      background: var(--green-100);
      color: var(--green-950);
      border-color: rgba(25,133,42,0.2);
    }

    .article-comment-message.error {
      background: #fff0f0;
      color: #8f1f1f;
      border-color: #f2caca;
    }

    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      background: #102d16;
      color: white;
      padding: 14px 16px;
      border-radius: 14px;
      box-shadow: 0 18px 32px rgba(0,0,0,0.22);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: 0.22s ease;
      z-index: 50;
      max-width: 320px;
      font-weight: 700;
      line-height: 1.5;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 1380px) {
      .hero-grid {
        grid-template-columns: minmax(300px, 0.92fr) minmax(390px, 1.08fr) minmax(300px, 0.9fr);
        min-height: 680px;
      }

      .hero-left,
      .hero-center,
      .hero-right {
        min-height: 680px;
      }

      .hero-left {
        padding: 42px 28px 26px;
      }

      .hero-center {
        padding: 24px 10px 22px;
      }

      .hero-mascot {
        left: 68px;
        bottom: 82px;
        width: min(340px, 86%);
      }

      .news-panel {
        min-height: auto;
      }
    }

    @media (max-width: 1180px) {
      .hero-grid,
      .utility-row,
      .content-grid,
      .mega-menu,
      .news-grid,
      .nav-mega-grid {
        grid-template-columns: 1fr;
      }

      .hero-left,
      .hero-center,
      .hero-right {
        min-height: auto;
      }

      .hero-left {
        min-height: 680px;
        padding-bottom: 28px;
      }

      .hero-center {
        padding: 18px 0;
      }

      .hero-mascot {
        left: min(46vw, 420px);
        bottom: 70px;
        width: min(360px, 46vw);
      }

      .news-panel {
        min-height: auto;
      }

      .stats4 { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 1024px) {
      .nav {
        min-height: 68px;
        padding: 10px 0;
      }

      .brand {
        font-size: 18px;
      }

      .brand-mark {
        width: 38px;
        height: 38px;
      }

      .site-nav,
      .auth-nav-btn {
        display: none;
      }

      .nav-actions {
        display: flex;
        margin-left: auto;
        gap: 8px;
      }

      .icon-btn,
      .mobile-auth-btn,
      .mobile-menu-toggle {
        width: 44px;
        height: 44px;
      }

      .mobile-auth-btn {
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        color: var(--yellow);
        border: 1px solid rgba(255,255,255,0.08);
      }

      .profile-trigger {
        min-height: 44px;
        width: 44px;
        padding: 4px;
        justify-content: center;
      }

      .profile-avatar {
        width: 34px;
        height: 34px;
      }

      .profile-trigger-name {
        display: none;
      }

      .profile-dropdown {
        right: -52px;
      }

      .mobile-menu-toggle {
        display: inline-flex;
      }

      .mobile-menu-backdrop,
      .mobile-menu-drawer {
        display: block;
      }

      body.mobile-menu-open {
        overflow: hidden;
      }

      body.mobile-menu-open .mobile-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
      }

      body.mobile-menu-open .mobile-menu-drawer {
        transform: translateX(0);
      }

      body.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      body.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
        opacity: 0;
      }

      body.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      .auth-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 26px;
        padding-bottom: 30px;
      }

      .auth-hero h1 {
        font-size: 36px;
      }

      .auth-hero p {
        font-size: 16px;
      }

      .auth-card {
        padding: 16px;
      }

      .auth-provider {
        grid-template-columns: 38px 1fr;
        padding: 12px;
      }

      .auth-provider-icon {
        width: 38px;
        height: 38px;
      }

      .auth-info-tabs {
        grid-template-columns: 1fr;
      }

      .search-modal {
        width: calc(100% - 18px);
        height: 88vh;
        padding: 16px;
        gap: 14px;
        grid-template-rows: auto auto auto minmax(0, 1fr);
      }

      .search-modal-head h2 {
        font-size: 23px;
      }

      .search-modal-grid,
      .search-results-grid {
        grid-template-columns: 1fr;
      }

      .search-mobile-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        order: 1;
        padding: 6px;
        border-radius: 8px;
        background: var(--soft);
        border: 1px solid var(--line);
      }

      .search-mobile-tabs button {
        min-height: 42px;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: var(--muted);
        font-weight: 900;
        cursor: pointer;
      }

      .search-mobile-tabs button.active {
        background: white;
        color: var(--green-950);
        box-shadow: 0 8px 18px rgba(10, 40, 15, 0.08);
      }

      .search-modal-panel,
      .search-results-grid > div {
        display: none;
      }

      .search-modal-panel.active {
        display: grid;
      }

      .search-results-grid > div.active {
        display: grid;
      }

      .search-modal-grid {
        order: 2;
      }

      .search-results-grid {
        order: 3;
        overflow-y: auto;
        padding-right: 2px;
      }

      .search-results-list {
        overflow-y: visible;
      }

      .site-result {
        grid-template-columns: 76px 1fr;
      }

      .site-result img {
        width: 76px;
        height: 68px;
      }

      .profile-shell {
        grid-template-columns: 1fr;
      }

      .organization-layout,
      .organization-form-row,
      .organization-point-guide,
      .organization-profile-hero,
      .organization-profile-grid {
        grid-template-columns: 1fr;
      }

      .organization-invitation-panel .organization-auth-needed {
        grid-template-columns: 1fr;
      }

      .profile-organization-section-head,
      .profile-organization-points {
        flex-direction: column;
      }

      .profile-organization-owned,
      .organization-select-form {
        grid-template-columns: 1fr;
      }

      .ad-slot-billboard {
        min-height: 180px;
      }

      .ad-slot-billboard .adsbygoogle {
        min-height: 150px;
      }

      .ad-slot-home {
        min-height: 180px;
      }

      .ad-slot-leaderboard {
        min-height: 104px;
      }

      .ad-slot-leaderboard .adsbygoogle {
        min-height: 78px;
      }

      .organization-heading h1 {
        font-size: 34px;
      }

      .organization-profile-copy h1 {
        font-size: 34px;
      }

      .waste-detail-layout,
      .waste-detail-grid,
      .article-layout {
        grid-template-columns: 1fr;
      }

      .article-comments {
        position: static;
      }

      .waste-detail-main h1 {
        font-size: 32px;
      }

      .provider-card {
        grid-template-columns: 1fr;
      }

      .profile-sidebar {
        position: static;
      }

      .profile-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .profile-tabs a {
        min-height: 54px;
        padding: 8px;
        font-size: 12px;
        justify-content: flex-start;
      }

      .profile-tabs a::before {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 11px;
      }

      .profile-data-grid,
      .profile-stat-grid,
      .activity-table-tools {
        grid-template-columns: 1fr;
      }

      .dashboard-progress {
        grid-template-columns: 1fr;
      }

      .dashboard-level-mark {
        margin: 10px auto;
      }

      .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .dashboard-missions {
        grid-template-columns: 1fr;
      }

      .referral-reward-grid,
      .referral-layout,
      .affiliate-share-panel,
      .photo-submit-intro,
      .photo-form-grid {
        grid-template-columns: 1fr;
      }

      .photo-location-panel {
        align-items: stretch;
        flex-direction: column;
        background: white;
      }

      .photo-location-panel .btn {
        width: 100%;
        min-height: 56px;
        color: var(--green-950);
        background: white;
      }

      .photo-file-field {
        min-height: 230px;
        padding: 26px 18px;
      }

      .photo-file-choice {
        grid-template-columns: 1fr;
      }

      .photo-file-field strong {
        max-width: 260px;
        font-size: 24px;
      }

      .photo-file-icon {
        width: 86px;
        height: 66px;
      }

      .photo-file-icon::before {
        left: 25px;
        top: 15px;
        width: 28px;
        height: 28px;
      }

      .photo-postcode-input {
        min-height: 70px;
        border-radius: 14px !important;
        font-size: 30px !important;
      }

      .photo-postcode-status,
      .photo-postcode-select {
        font-size: 15px;
      }

      .profile-photos .organization-accept {
        align-items: flex-start;
        gap: 12px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--green-50);
      }

      .profile-photos .organization-accept input[type="checkbox"] {
        width: 28px;
        height: 28px;
        margin-top: 1px;
      }

      .profile-photos .organization-accept span {
        font-size: 14px;
        line-height: 1.45;
      }

      .profile-photos .notification-form-actions .btn {
        width: 100%;
        min-height: 72px;
        font-size: 18px;
      }

      .photo-submission-list {
        max-height: 720px;
      }

      .photo-submission-list article {
        grid-template-columns: 64px minmax(0, 1fr);
      }

      .photo-submission-list article > span,
      .photo-submission-list em {
        justify-self: start;
      }

      .affiliate-link-control > div {
        flex-direction: column;
      }

      .profile-panel-head {
        display: grid;
      }

      .news-item {
        grid-template-columns: 36px 92px 1fr;
        height: 86px;
      }

      .news-list {
        height: 434px;
      }

      .news-archive-pagination {
        display: grid;
        gap: 12px;
      }

      .news-archive-pagination div {
        justify-content: flex-start;
      }

      .news-body h3 { font-size: 15px; }
      .hero-title { font-size: 56px; }
      .hero-sub { font-size: 22px; }

      .hero-left {
        min-height: 650px;
        padding: 36px 18px 24px;
      }

      .hero-mascot {
        left: 50%;
        bottom: 130px;
        width: min(320px, 78vw);
        transform: translateX(-34%);
      }

      .hero-search-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 340px;
        margin-top: auto;
        margin-left: 0;
      }

      .hero-search-stats button {
        min-height: 64px;
        padding: 10px;
      }

      .hero-search-stats strong {
        font-size: 28px;
      }

      .hero-left .cta {
        max-width: 340px;
        margin-left: 0;
      }

      .news-panel {
        padding: 12px;
      }

      .hero-right {
        padding: 24px 18px 0;
      }

      .avatar {
        width: 98px;
        height: 98px;
      }

      .helper-card,
      .banner-card,
      .profile-row {
        grid-template-columns: 1fr;
      }

      .challenge-games-invite {
        min-height: 150px;
        padding-right: 47%;
        background-position: 67% center;
      }

      .small-news-item {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .page-heading h1,
      .article-header h1 {
        font-size: 32px;
      }

      .finder-icons { grid-template-columns: repeat(3, 1fr); }
      .org-item,
      .game-item { grid-template-columns: 1fr; }
      .org-item { text-align: center; }
      .pill-score { justify-self: center; }
    }

    @media (max-width: 620px) {
      .hero-grid {
        width: min(1500px, calc(100% - 24px));
      }

      .hero-left {
        min-height: 610px;
        padding: 34px 16px 22px;
      }

      .hero-title {
        font-size: clamp(46px, 14vw, 54px);
        max-width: 320px;
      }

      .hero-sub {
        max-width: 238px;
        font-size: 20px;
      }

      .hero-mascot {
        left: 58%;
        bottom: 116px;
        width: min(270px, 72vw);
        transform: translateX(-22%);
      }

      .hero-search-stats,
      .hero-left .cta {
        width: 100%;
        max-width: none;
      }
    }

    @media (max-width: 620px) {
      .profile-reward-card-head,
      .profile-reward-user,
      .profile-reward-leaders li {
        align-items: flex-start;
        flex-direction: column;
      }

      .profile-reward-card-head > span {
        white-space: normal;
      }

      .profile-reward-prizes {
        grid-template-columns: 1fr;
      }

      .dashboard-metrics {
        grid-template-columns: 1fr;
      }

      .dashboard-section-head,
      .dashboard-activity-list article,
      .referral-history-list article {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    .mod-quiz-page,
    .mod-quiz-ranking-page {
      background: #eef3e8;
    }

    .mod-quiz-library {
      min-height: 100vh;
      padding-bottom: 48px;
      color: #fff;
      background: #072c20;
    }

    .mod-quiz-library-feature {
      position: relative;
      display: grid;
      align-content: center;
      min-height: 470px;
      margin-bottom: 32px;
      padding: 45px 44px;
      overflow: hidden;
      border-radius: 8px;
      background:
        linear-gradient(90deg, rgba(4, 34, 23, .98) 0%, rgba(6, 53, 31, .94) 41%, rgba(7, 66, 35, .34) 100%),
        url("/assets/img/hero-bg.png") right center / cover no-repeat;
      box-shadow: 0 16px 35px rgba(0, 17, 9, .2);
    }

    .mod-quiz-library-feature-copy {
      position: relative;
      z-index: 2;
      width: min(100%, 545px);
    }

    .mod-quiz-library-feature h1 {
      margin: 8px 0 13px;
      color: #fff;
      font-size: 58px;
      line-height: 1;
      font-weight: 900;
    }

    .mod-quiz-library-feature-copy > p:not(.mod-quiz-eyebrow) {
      max-width: 470px;
      margin: 0 0 23px;
      color: rgba(255, 255, 255, .87);
      font-size: 18px;
      line-height: 1.5;
      font-weight: 600;
    }

    .mod-quiz-library-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 26px;
    }

    .mod-quiz-library-tags span {
      padding: 7px 11px;
      border: 1px solid rgba(255, 218, 31, .34);
      border-radius: 999px;
      color: #fff3a6;
      font-size: 12px;
      font-weight: 800;
      background: rgba(0, 0, 0, .18);
    }

    .mod-quiz-library-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .mod-quiz-library-actions .btn {
      min-width: 166px;
      text-align: center;
    }

    .mod-quiz-library-secondary {
      border: 1px solid rgba(255, 255, 255, .33);
      color: #fff;
      background: rgba(255, 255, 255, .1);
    }

    .mod-quiz-library-secondary:hover,
    .mod-quiz-library-secondary:focus-visible {
      color: #fff;
      background: rgba(255, 255, 255, .2);
    }

    .mod-quiz-library-user-panel,
    .mod-quiz-library-login-note {
      position: absolute;
      right: 34px;
      bottom: 28px;
      z-index: 2;
      display: flex;
      gap: 8px;
      margin: 0;
      padding: 9px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: rgba(5, 42, 25, .82);
      backdrop-filter: blur(3px);
    }

    .mod-quiz-library-user-panel div {
      min-width: 88px;
      padding: 9px 11px;
      border-radius: 7px;
      text-align: center;
      background: rgba(255, 255, 255, .08);
    }

    .mod-quiz-library-user-panel dt {
      margin-bottom: 5px;
      color: rgba(255, 255, 255, .7);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .mod-quiz-library-user-panel dd {
      margin: 0;
      color: #ffda1f;
      font-size: 20px;
      line-height: 1;
      font-weight: 900;
    }

    .mod-quiz-library-login-note {
      width: min(290px, 100%);
      padding: 14px;
      color: rgba(255, 255, 255, .86);
      font-size: 13px;
      line-height: 1.42;
      font-weight: 700;
    }

    .mod-quiz-library-mascot {
      position: absolute;
      right: 54px;
      bottom: 86px;
      z-index: 1;
      width: 275px;
      height: auto;
      filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .24));
    }

    .mod-quiz-library-shelf {
      margin-bottom: 33px;
    }

    .mod-quiz-library-shelf-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-bottom: 15px;
    }

    .mod-quiz-library-shelf-head h2 {
      margin: 0 0 5px;
      color: #fff;
      font-size: 25px;
      font-weight: 900;
    }

    .mod-quiz-library-shelf-head p {
      margin: 0;
      color: rgba(255, 255, 255, .65);
      font-size: 14px;
    }

    .mod-quiz-library-rail {
      display: flex;
      gap: 15px;
      padding: 3px 1px 8px;
      overflow-x: auto;
      scrollbar-color: rgba(255, 218, 31, .45) rgba(255, 255, 255, .08);
      scrollbar-width: thin;
    }

    .mod-quiz-library-card {
      flex: 0 0 335px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .11);
      border-radius: 8px;
      color: #fff;
      background: #0b3d2a;
      transition: transform .18s ease, border-color .18s ease;
    }

    .mod-quiz-library-card:hover {
      border-color: rgba(255, 218, 31, .36);
      transform: translateY(-2px);
    }

    .mod-quiz-library-cover,
    .mod-quiz-library-placeholder-cover {
      position: relative;
      display: block;
      height: 180px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(4, 42, 25, .95), rgba(9, 76, 38, .35)),
        url("/assets/img/hero-bg.png") center / cover no-repeat;
    }

    .mod-quiz-library-cover img {
      position: absolute;
      right: 20px;
      bottom: -45px;
      width: 158px;
      height: auto;
    }

    .mod-quiz-library-status {
      position: absolute;
      top: 13px;
      left: 13px;
      z-index: 1;
      padding: 7px 9px;
      border-radius: 6px;
      color: #073725;
      font-size: 11px;
      line-height: 1;
      font-weight: 900;
      text-transform: uppercase;
      background: #ffda1f;
    }

    .mod-quiz-library-card.is-completed .mod-quiz-library-status {
      color: #fff;
      background: #118047;
    }

    .mod-quiz-library-card-body {
      display: grid;
      gap: 10px;
      padding: 15px;
    }

    .mod-quiz-library-card-body h3 {
      margin: 0;
      color: #fff;
      font-size: 20px;
      font-weight: 900;
    }

    .mod-quiz-library-card-body p {
      margin: 0;
      color: rgba(255, 255, 255, .73);
      font-size: 13px;
      line-height: 1.4;
    }

    .mod-quiz-library-progress {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
    }

    .mod-quiz-library-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #ffda1f;
    }

    .mod-quiz-library-card-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .mod-quiz-library-card-stats span {
      padding: 8px;
      border-radius: 7px;
      color: rgba(255, 255, 255, .7);
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      background: rgba(255, 255, 255, .06);
    }

    .mod-quiz-library-card-stats strong {
      display: block;
      margin-bottom: 3px;
      color: #ffda1f;
      font-size: 18px;
    }

    .mod-quiz-library-card-teaser {
      padding: 8px 10px;
      border-radius: 7px;
      color: #f9e97c !important;
      background: rgba(255, 218, 31, .09);
    }

    .mod-quiz-library-play {
      display: block;
      color: #ffda1f;
      font-size: 13px;
      font-weight: 900;
    }

    .mod-quiz-library-upcoming .mod-quiz-library-card {
      flex-basis: 285px;
    }

    .mod-quiz-library-placeholder-cover {
      display: flex;
      align-items: end;
      padding: 17px;
    }

    .mod-quiz-library-placeholder-cover strong {
      color: rgba(255, 255, 255, .88);
      font-size: 31px;
      font-weight: 900;
    }

    .mod-quiz-library-placeholder-cover.is-yellow {
      background: linear-gradient(120deg, #b98d08, #efc626);
    }

    .mod-quiz-library-placeholder-cover.is-blue {
      background: linear-gradient(120deg, #08728b, #14a883);
    }

    .mod-quiz-library-placeholder-cover.is-green {
      background: linear-gradient(120deg, #0d5735, #62a93f);
    }

    .mod-quiz-library-awaiting {
      color: #f4cf26;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
    }

    .mod-quiz-hero {
      display: grid;
      grid-template-columns: minmax(280px, 1fr) minmax(300px, 460px);
      align-items: center;
      gap: 32px;
      margin-bottom: 22px;
      padding: 30px 34px;
      border-radius: 8px;
      color: #fff;
      background: linear-gradient(120deg, #063c26 0%, #116035 66%, #238441 100%);
      box-shadow: 0 12px 28px rgba(5, 45, 25, .13);
    }

    .mod-quiz-hero h1,
    .mod-quiz-ranking-hero h1 {
      margin: 5px 0 10px;
      color: #fff;
      font-size: clamp(38px, 4vw, 52px);
      line-height: 1.05;
    }

    .mod-quiz-hero p:not(.mod-quiz-eyebrow),
    .mod-quiz-ranking-hero p:not(.mod-quiz-eyebrow) {
      max-width: 650px;
      margin: 0;
      color: rgba(255, 255, 255, .88);
      font-size: 17px;
      line-height: 1.55;
    }

    .mod-quiz-eyebrow {
      margin: 0;
      color: #f6cf24;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .mod-quiz-rule-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .mod-quiz-rule-grid div {
      min-height: 106px;
      padding: 18px 12px;
      border: 1px solid rgba(255, 216, 34, .28);
      border-radius: 8px;
      text-align: center;
      background: rgba(0, 0, 0, .16);
    }

    .mod-quiz-rule-grid strong {
      display: block;
      margin-bottom: 5px;
      color: #ffd921;
      font-size: 29px;
      line-height: 1;
    }

    .mod-quiz-rule-grid span {
      color: #fff;
      font-size: 12px;
      font-weight: 700;
    }

    .mod-quiz-setup,
    .mod-quiz-login {
      max-width: 700px;
      margin: 34px auto;
      padding: 34px;
      border-radius: 8px;
      text-align: center;
      background: #fff;
      box-shadow: 0 8px 22px rgba(12, 53, 30, .08);
    }

    .mod-quiz-setup h2,
    .mod-quiz-login h2 {
      margin: 0 0 10px;
      color: #083c28;
    }

    .mod-quiz-setup p,
    .mod-quiz-login p {
      margin: 0 0 20px;
      color: #4f6357;
      line-height: 1.55;
    }

    .mod-quiz-login .btn {
      margin: 4px;
    }

    .mod-quiz-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      align-items: start;
      gap: 18px;
    }

    .mod-quiz-main {
      padding: 20px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 7px 22px rgba(12, 53, 30, .07);
    }

    .mod-quiz-today-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-bottom: 17px;
    }

    .mod-quiz-today-head h2 {
      margin: 4px 0 0;
      color: #073d29;
      font-size: 25px;
    }

    .mod-quiz-progress-chip {
      flex: none;
      padding: 10px 15px;
      border-radius: 8px;
      color: #155137;
      font-size: 14px;
      font-weight: 700;
      background: #eef5e6;
    }

    .mod-quiz-progress-chip strong {
      color: #08723b;
      font-size: 20px;
    }

    .mod-quiz-question-list {
      display: grid;
      gap: 14px;
    }

    .mod-quiz-question {
      padding: 18px 19px;
      border: 1px solid #dbe5d5;
      border-radius: 8px;
      background: #fff;
      transition: border-color .18s ease, background-color .18s ease;
    }

    .mod-quiz-question.is-locked {
      border-color: #f0d784;
      background: #fffdf3;
    }

    .mod-quiz-question.is-complete {
      border-color: #a2d2ad;
      background: #f1f9f1;
    }

    .mod-quiz-question.is-submitting {
      opacity: .74;
    }

    .mod-quiz-question-meta {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 10px;
      color: #50665b;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .mod-quiz-number {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      color: #063d28;
      font-size: 17px;
      background: #ffda1f;
    }

    .mod-quiz-difficulty {
      margin-left: auto;
      padding: 5px 8px;
      border-radius: 6px;
      color: #17643a;
      background: #e7f2e5;
    }

    .mod-quiz-question h3 {
      margin: 0 0 10px;
      color: #092f23;
      font-size: 20px;
      line-height: 1.35;
    }

    .mod-quiz-help {
      display: inline-block;
      margin: 0 0 13px;
      color: #08703b;
      font-size: 13px;
      font-weight: 700;
      text-decoration: underline;
    }

    .mod-quiz-question-image {
      display: block;
      width: 100%;
      max-height: 235px;
      margin: 0 0 13px;
      border-radius: 7px;
      object-fit: cover;
    }

    .mod-quiz-answer-form {
      display: grid;
      gap: 8px;
    }

    .mod-quiz-answer-form button {
      display: block;
      width: 100%;
      min-height: 47px;
      padding: 11px 14px;
      border: 1px solid #d7dfd1;
      border-radius: 7px;
      color: #183e2d;
      font: inherit;
      font-size: 15px;
      font-weight: 700;
      text-align: left;
      background: #f6f8f3;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease;
    }

    .mod-quiz-answer-form button:hover:not(:disabled),
    .mod-quiz-answer-form button:focus-visible:not(:disabled) {
      border-color: #118046;
      background: #e7f5e6;
    }

    .mod-quiz-answer-form button:disabled {
      color: #738377;
      cursor: not-allowed;
    }

    .mod-quiz-feedback {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 13px;
      color: #23613e;
      font-size: 14px;
    }

    .mod-quiz-feedback:empty {
      display: none;
    }

    .mod-quiz-feedback strong {
      color: #073d29;
    }

    .mod-quiz-explanation {
      margin: 13px 0 0;
      padding: 12px;
      border-radius: 6px;
      color: #264635;
      font-size: 14px;
      line-height: 1.5;
      background: #e8f1e4;
    }

    .mod-quiz-side {
      display: grid;
      gap: 12px;
    }

    .mod-quiz-side section {
      padding: 17px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 5px 17px rgba(12, 53, 30, .07);
    }

    .mod-quiz-side h3 {
      margin: 0 0 12px;
      color: #083d29;
      font-size: 17px;
    }

    .mod-quiz-score {
      color: #fff;
      background: #075331 !important;
    }

    .mod-quiz-score > strong {
      display: inline-block;
      margin: 7px 3px 15px 0;
      color: #ffda1f;
      font-size: 48px;
      line-height: 1;
    }

    .mod-quiz-score > span {
      font-weight: 700;
    }

    .mod-quiz-score-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .mod-quiz-score-stats div {
      padding: 10px;
      border-radius: 7px;
      text-align: center;
      background: rgba(255, 255, 255, .12);
    }

    .mod-quiz-score-stats strong,
    .mod-quiz-score-stats span {
      display: block;
    }

    .mod-quiz-score-stats strong {
      color: #ffda1f;
      font-size: 22px;
    }

    .mod-quiz-score-stats span {
      font-size: 12px;
    }

    .mod-quiz-streak {
      border: 1px solid #f0d24e;
      background: #fff7ce !important;
    }

    .mod-quiz-flame {
      margin-bottom: 6px;
      color: #095034;
      font-weight: 700;
    }

    .mod-quiz-flame strong {
      margin-right: 5px;
      color: #0b7540;
      font-size: 34px;
    }

    .mod-quiz-streak p {
      margin: 0;
      color: #516655;
      font-size: 13px;
    }

    .mod-quiz-badges > div {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .mod-quiz-badges article {
      min-height: 82px;
      padding: 9px 6px;
      border: 1px solid #e4e8de;
      border-radius: 7px;
      color: #849184;
      text-align: center;
      background: #f7f8f5;
    }

    .mod-quiz-badges article.earned {
      border-color: #c6dca8;
      color: #125137;
      background: #eef7e5;
    }

    .mod-quiz-badges strong,
    .mod-quiz-badges span,
    .mod-quiz-badges small {
      display: block;
    }

    .mod-quiz-badges strong {
      font-size: 21px;
    }

    .mod-quiz-badges span {
      margin: 4px 0;
      font-size: 12px;
      font-weight: 700;
    }

    .mod-quiz-badges small {
      font-size: 11px;
    }

    .mod-quiz-section-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 9px;
    }

    .mod-quiz-section-head h3 {
      margin-bottom: 0;
    }

    .mod-quiz-section-head a {
      color: #08703b;
      font-size: 12px;
      font-weight: 800;
    }

    .mod-quiz-ranking ol {
      margin: 0;
      padding: 0 0 0 23px;
      color: #0c412c;
    }

    .mod-quiz-ranking li {
      padding: 8px 0;
      border-bottom: 1px solid #edf0e9;
      font-size: 13px;
    }

    .mod-quiz-ranking li span {
      display: inline-block;
      width: calc(100% - 54px);
    }

    .mod-quiz-ranking li strong {
      color: #08703b;
    }

    .mod-quiz-ranking p,
    .mod-quiz-rewards p {
      margin: 0;
      color: #56685c;
      font-size: 13px;
    }

    .mod-quiz-rewards article {
      display: grid;
      gap: 4px;
      padding: 10px 0;
      border-bottom: 1px solid #edf0e9;
    }

    .mod-quiz-rewards article strong {
      color: #103f2d;
    }

    .mod-quiz-rewards article span {
      color: #53685b;
      font-size: 12px;
    }

    .mod-quiz-home-widget {
      display: grid;
      align-content: start;
      gap: 12px;
      border: 1px solid #e1d378;
      background: #fffbdf;
    }

    .mod-quiz-home-head {
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 12px;
    }

    .mod-quiz-home-head h3 {
      margin: 3px 0 0;
      color: #063e29;
      font-size: 20px;
    }

    .mod-quiz-home-head a {
      color: #09643b;
      font-size: 12px;
      font-weight: 800;
    }

    .mod-quiz-home-prompt {
      color: #063e29;
      font-size: 18px;
    }

    .mod-quiz-home-progress {
      height: 9px;
      overflow: hidden;
      border-radius: 6px;
      background: #e8e3bb;
    }

    .mod-quiz-home-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #108347;
    }

    .mod-quiz-home-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
    }

    .mod-quiz-home-stats div {
      padding: 8px 5px;
      border-radius: 7px;
      text-align: center;
      background: rgba(255, 255, 255, .68);
    }

    .mod-quiz-home-stats strong,
    .mod-quiz-home-stats span {
      display: block;
    }

    .mod-quiz-home-stats strong {
      color: #08693c;
      font-size: 20px;
    }

    .mod-quiz-home-stats span,
    .mod-quiz-home-empty {
      color: #53685c;
      font-size: 12px;
    }

    .mod-quiz-home-cta {
      width: 100%;
      margin-top: 3px;
      text-align: center;
    }

    .mod-quiz-profile-widget {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      margin: 18px 0;
      padding: 18px 20px;
      border-radius: 8px;
      color: #fff;
      background: #075130;
    }

    .mod-quiz-profile-widget h3 {
      margin: 4px 0 5px;
      color: #fff;
    }

    .mod-quiz-profile-widget p:not(.mod-quiz-eyebrow) {
      margin: 0;
      color: rgba(255,255,255,.84);
    }

    .mod-quiz-profile-stats {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .mod-quiz-profile-stats span {
      padding: 9px 12px;
      border-radius: 7px;
      text-align: center;
      background: rgba(255, 255, 255, .12);
    }

    .mod-quiz-profile-stats strong {
      display: block;
      color: #ffda1f;
      font-size: 22px;
    }

    .mod-quiz-ranking-hero {
      margin-bottom: 22px;
      padding: 32px 35px;
      border-radius: 8px;
      color: #fff;
      background: #075331;
    }

    .mod-quiz-ranking-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 335px;
      align-items: start;
      gap: 17px;
    }

    .mod-quiz-leaderboard,
    .mod-quiz-reward-board {
      padding: 22px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 7px 22px rgba(12, 53, 30, .07);
    }

    .mod-quiz-leaderboard h2,
    .mod-quiz-reward-board h2 {
      margin: 0 0 16px;
      color: #083d29;
      font-size: 23px;
    }

    .mod-quiz-leaderboard ol {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .mod-quiz-leaderboard li {
      display: grid;
      grid-template-columns: 48px minmax(150px, 1fr) auto auto;
      align-items: center;
      gap: 13px;
      padding: 10px 13px;
      border-radius: 7px;
      color: #103c2a;
      background: #f5f8f1;
    }

    .mod-quiz-leaderboard li:first-child {
      border: 1px solid #efcd38;
      background: #fff7ce;
    }

    .mod-quiz-place {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border-radius: 7px;
      color: #063d28;
      background: #ffda1f;
    }

    .mod-quiz-leaderboard li span {
      font-weight: 700;
    }

    .mod-quiz-leaderboard li small {
      color: #596d61;
    }

    .mod-quiz-leaderboard li b {
      color: #08703b;
    }

    .mod-quiz-reward-board {
      display: grid;
      gap: 13px;
    }

    .mod-quiz-reward-board h2 {
      margin-bottom: 2px;
    }

    .mod-quiz-reward-note {
      margin: 0;
      color: #40564a;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.45;
    }

    .mod-quiz-reward-board article {
      padding: 14px;
      border: 1px solid #ecdf9b;
      border-radius: 7px;
      background: #fff9da;
    }

    .mod-quiz-reward-board article strong {
      display: block;
      margin-bottom: 6px;
      color: #103e2b;
    }

    .mod-quiz-reward-board article p {
      margin: 0 0 9px;
      color: #53675b;
      font-size: 14px;
    }

    .mod-quiz-reward-board article span {
      color: #09713e;
      font-size: 12px;
      font-weight: 700;
    }

    .mod-quiz-reward-board article small {
      display: block;
      margin-top: 7px;
      color: #315b43;
      font-size: 12px;
      font-weight: 900;
    }

    .mod-quiz-reward-results {
      margin-top: 22px;
      border-radius: 8px;
      padding: 18px;
      background: white;
      border: 1px solid #dce5d8;
    }

    .mod-quiz-reward-results h2 {
      margin: 0 0 12px;
      color: #083c2a;
      font-size: 22px;
    }

    .mod-quiz-reward-results > div {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .mod-quiz-reward-results article {
      display: grid;
      gap: 5px;
      border-radius: 8px;
      padding: 12px;
      background: #f7faf5;
      border: 1px solid #e3eadf;
    }

    .mod-quiz-reward-results strong {
      color: #083c2a;
    }

    .mod-quiz-reward-results span,
    .mod-quiz-reward-results small {
      color: #567064;
      font-size: 13px;
      font-weight: 800;
    }

    @media (max-width: 1100px) {
      .mod-quiz-library-feature {
        min-height: 540px;
        padding: 34px 30px 142px;
      }

      .mod-quiz-library-mascot {
        right: 24px;
        bottom: 76px;
        width: 238px;
        opacity: .72;
      }

      .mod-quiz-hero,
      .mod-quiz-layout,
      .mod-quiz-ranking-layout {
        grid-template-columns: 1fr;
      }

      .mod-quiz-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 720px) {
      .mod-quiz-library {
        padding-bottom: 28px;
      }

      .mod-quiz-library-feature {
        min-height: 530px;
        margin-bottom: 25px;
        padding: 25px 17px 132px;
      }

      .mod-quiz-library-feature h1 {
        font-size: 42px;
      }

      .mod-quiz-library-feature-copy > p:not(.mod-quiz-eyebrow) {
        font-size: 15px;
      }

      .mod-quiz-library-actions .btn {
        min-width: 0;
        width: 100%;
      }

      .mod-quiz-library-mascot {
        right: -8px;
        bottom: 76px;
        width: 165px;
        opacity: .54;
      }

      .mod-quiz-library-user-panel,
      .mod-quiz-library-login-note {
        right: 14px;
        bottom: 14px;
        left: 14px;
        width: auto;
      }

      .mod-quiz-library-user-panel div {
        min-width: 0;
        flex: 1;
        padding: 8px 5px;
      }

      .mod-quiz-library-shelf-head h2 {
        font-size: 21px;
      }

      .mod-quiz-library-card {
        flex-basis: min(82vw, 315px);
      }

      .mod-quiz-hero,
      .mod-quiz-ranking-hero {
        padding: 22px 17px;
      }

      .mod-quiz-hero h1,
      .mod-quiz-ranking-hero h1 {
        font-size: 36px;
      }

      .mod-quiz-rule-grid {
        gap: 5px;
      }

      .mod-quiz-rule-grid div {
        min-height: 86px;
        padding: 14px 6px;
      }

      .mod-quiz-rule-grid strong {
        font-size: 22px;
      }

      .mod-quiz-main,
      .mod-quiz-setup,
      .mod-quiz-login,
      .mod-quiz-leaderboard,
      .mod-quiz-reward-board {
        padding: 16px;
      }

      .mod-quiz-today-head,
      .mod-quiz-profile-widget {
        align-items: flex-start;
        flex-direction: column;
      }

      .mod-quiz-side {
        grid-template-columns: 1fr;
      }

      .mod-quiz-question {
        padding: 15px 13px;
      }

      .mod-quiz-question h3 {
        font-size: 18px;
      }

      .mod-quiz-answer-form button {
        min-height: 52px;
      }

      .mod-quiz-feedback {
        align-items: flex-start;
        flex-direction: column;
      }

      .mod-quiz-profile-stats {
        width: 100%;
      }

      .mod-quiz-profile-stats span {
        flex: 1;
      }

      .mod-quiz-leaderboard li {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 9px;
      }

      .mod-quiz-leaderboard li small {
        grid-column: 2 / 4;
      }

      .mod-quiz-reward-results > div {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 820px) {
      .notfound-page {
        padding: 28px 0 0;
        background: linear-gradient(180deg, #0b3b24 0%, #145532 52%, #ffe457 52%, #f2cc2a 100%);
      }

      .notfound-layout {
        grid-template-columns: 1fr;
        gap: 6px;
        min-height: auto;
      }

      .notfound-copy {
        max-width: none;
      }

      .notfound-copy h1 {
        font-size: 54px;
      }

      .notfound-copy p:not(.eyebrow) {
        font-size: 17px;
      }

      .notfound-actions {
        gap: 9px;
      }

      .notfound-actions .btn {
        width: 100%;
      }

      .notfound-visual {
        min-height: 420px;
      }

      .notfound-visual img {
        right: 50%;
        bottom: -72px;
        width: min(320px, 112vw);
        transform: translateX(50%);
      }

      .settlement-hero,
      .settlement-heading,
      .settlement-search-card,
      .settlement-news-block {
        padding: 16px;
      }

      .settlement-heading {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .settlement-text-ads {
        grid-template-columns: 1fr;
      }

      .settlement-text-ad {
        min-height: 190px;
        padding: 20px;
      }

      .settlement-search-row {
        grid-template-columns: 1fr;
      }

      .settlement-search-row input {
        min-height: 58px;
        font-size: 22px;
      }

      .settlement-popular {
        padding: 14px;
      }

      .settlement-popular-head {
        display: grid;
        gap: 5px;
      }

      .settlement-popular-head p {
        text-align: left;
      }

      .settlement-chip {
        flex: 1 1 auto;
        justify-content: space-between;
      }

      .settlement-result-item {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 8px 12px;
      }

      .settlement-result-item small {
        grid-column: 2;
      }

      .settlement-result-item strong {
        font-size: 26px;
      }

      .settlement-result-item span {
        font-size: 19px;
      }
    }