:root {
      --ink:#15231d; --green:#176b45; --green-2:#1f8a59; --paper:#f4f7f3;
      --line:#dbe5df; --muted:#66756e; --yellow:#eeb225; --red:#dc4747;
    }
    * { box-sizing:border-box; }
    html,body { margin:0; min-height:100%; }
    body { background:var(--paper); color:var(--ink); font-family:"Avenir Next","Segoe UI",Arial,sans-serif; font-size:16px; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; }
    .topbar { align-items:center; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); display:flex; height:68px; justify-content:space-between; padding:0 24px; position:relative; z-index:1000; }
    .brand { align-items:center; color:#143f2e; display:flex; font-size:1.55rem; font-weight:850; gap:10px; letter-spacing:-.045em; }
    .brand b span { color:var(--green-2); }
    .brand-pin,.map-pin { background:var(--green-2); border:3px solid #dff7e9; border-radius:50% 50% 50% 4px; box-shadow:0 2px 7px rgba(23,107,69,.25); display:grid; height:30px; place-items:center; transform:rotate(-45deg); width:30px; }
    .brand-pin::after,.map-pin::after { background:#fff; border-radius:50%; content:""; height:9px; width:9px; }
    .header-right,.legend,.legend span { align-items:center; display:flex; }
    .header-right { gap:22px; }
    .legend { color:#596961; font-size:.79rem; font-weight:700; gap:15px; }
    .legend span { gap:6px; white-space:nowrap; }
    .dot { border-radius:50%; height:9px; width:9px; }
    .dot.green { background:#1c9a60; } .dot.yellow { background:var(--yellow); } .dot.red { background:var(--red); }
    .post-btn { align-items:center; background:var(--green); border:0; border-radius:999px; box-shadow:0 5px 16px rgba(23,107,69,.2); color:#fff; display:inline-flex; font-size:.88rem; font-weight:800; gap:7px; padding:11px 17px; }
    .toolbar { align-items:center; background:#f9fbfa; border-bottom:1px solid var(--line); display:grid; gap:18px; grid-template-columns:minmax(240px,360px) 1fr auto; min-height:62px; padding:9px 22px; position:relative; z-index:900; }
    .search { position:relative; }
    .search svg { color:#65766e; height:18px; left:13px; position:absolute; top:12px; width:18px; }
    .search input { background:#fff; border:1px solid #d2dfd8; border-radius:999px; height:42px; outline:none; padding:0 15px 0 42px; width:100%; }
    .search input:focus { border-color:#328461; box-shadow:0 0 0 3px rgba(50,132,97,.13); }
    .filters { display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
    .filters::-webkit-scrollbar { display:none; }
    .filters button { background:transparent; border:1px solid transparent; border-radius:999px; color:#5c6c64; font-size:.82rem; font-weight:750; padding:9px 13px; white-space:nowrap; }
    .filters button:hover { background:#eaf1ed; }
    .filters button.active { background:#163e2f; color:#fff; }
    .toolbar-actions { display:flex; gap:8px; }
    .tool-btn { align-items:center; background:#fff; border:1px solid #ccdcd3; border-radius:999px; color:#214f3c; display:flex; font-size:.8rem; font-weight:750; gap:6px; padding:10px 13px; }
    .tool-btn svg { height:15px; width:15px; }
    .browse { display:grid; grid-template-columns:380px minmax(0,1fr); height:calc(100vh - 130px); }
    .side { border-right:1px solid #d6e1da; overflow:auto; padding:18px; }
    .results-head { align-items:end; color:#607168; display:flex; font-size:.76rem; justify-content:space-between; margin:1px 2px 13px; }
    .results-head strong { color:#183d2e; font-size:.95rem; }
    .demo-label { background:#e5ede8; border-radius:999px; padding:4px 8px; }
    .cards { display:grid; gap:13px; }
    .card { background:#fff; border:1px solid #dae5de; border-radius:18px; box-shadow:0 5px 20px rgba(29,58,45,.055); color:inherit; overflow:hidden; padding:0; position:relative; text-align:left; transition:.16s ease; width:100%; }
    .card:hover { border-color:#87b59f; box-shadow:0 8px 24px rgba(29,58,45,.1); transform:translateY(-1px); }
    .card.selected { border-color:var(--green-2); box-shadow:0 0 0 3px rgba(29,133,87,.13); }
    .card-photo { background:linear-gradient(135deg,#e3ebe6,#f2f5f3); display:grid; height:132px; object-fit:cover; place-items:center; width:100%; }
    img.card-photo { display:block; }
    .placeholder svg { color:#9aaba2; height:35px; width:35px; }
    .status { align-items:center; backdrop-filter:blur(8px); background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.8); border-radius:999px; color:#304139; display:flex; font-size:.69rem; font-weight:850; gap:6px; left:10px; padding:6px 9px; position:absolute; top:10px; }
    .status i { border-radius:50%; height:8px; width:8px; }
    .status.active i { background:#159557; } .status.upcoming i { background:var(--yellow); } .status.ended i { background:var(--red); }
    .demo-pill { background:#173e30; border-radius:999px; color:#fff; font-size:.66rem; font-weight:850; padding:5px 8px; position:absolute; right:10px; top:10px; }
    .card-body { padding:14px 15px 15px; }
    .card h2 { color:#163a2c; font-size:1rem; letter-spacing:-.015em; margin:0 0 7px; }
    .line { align-items:flex-start; color:#5b6c64; display:flex; font-size:.77rem; gap:7px; line-height:1.45; margin:4px 0; }
    .line svg { flex:0 0 auto; height:14px; margin-top:1px; width:14px; }
    .meta { border-top:1px solid #e7ede9; display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; padding-top:10px; }
    .meta span { background:#f1f5f2; border-radius:999px; color:#4b6257; font-size:.68rem; font-weight:750; padding:5px 8px; }
    .map-wrap { background:#dfe8e2; min-height:0; position:relative; }
    #map { height:100%; width:100%; }
    .leaflet-control-attribution { font-size:10px !important; }
    .salesup-icon { background:transparent !important; border:0 !important; }
    .map-pin { border-color:#fff; height:34px; width:34px; }
    .map-pin.active { background:#159557; } .map-pin.upcoming { background:var(--yellow); } .map-pin.ended { background:var(--red); }
    .detail { background:rgba(255,255,255,.97); border:1px solid #d1e0d8; border-radius:20px; bottom:24px; box-shadow:0 16px 44px rgba(22,52,39,.22); display:none; grid-template-columns:150px minmax(0,1fr); left:50%; max-width:610px; min-height:180px; overflow:hidden; position:absolute; transform:translateX(-50%); width:calc(100% - 44px); z-index:700; }
    .detail.open { display:grid; }
    .detail > img { height:100%; object-fit:cover; width:150px; }
    .detail-body { padding:20px 48px 18px 20px; }
    .detail-body .status { background:#edf4ef; display:inline-flex; left:auto; position:relative; top:auto; }
    .detail h2 { color:#143c2c; font-size:1.18rem; margin:10px 0 5px; }
    .detail p { color:#5b6e65; font-size:.82rem; line-height:1.45; margin:0 0 10px; }
    .detail strong { color:#324a40; display:block; font-size:.75rem; margin-bottom:12px; }
    .detail a { color:#0e7044; font-size:.81rem; font-weight:850; text-decoration:none; }
    .close-detail { background:#edf2ee; border:0; border-radius:50%; color:#5a6962; font-size:18px; height:30px; position:absolute; right:12px; top:12px; width:30px; }
    .empty { color:#67776f; padding:60px 20px; text-align:center; }
    .empty h2 { color:#2d4e40; font-size:1rem; margin:0 0 6px; }
    .empty p { font-size:.82rem; margin:0; }
    dialog { border:1px solid #d6e3db; border-radius:20px; box-shadow:0 24px 80px rgba(16,47,34,.25); color:var(--ink); max-height:calc(100vh - 24px); max-width:620px; padding:24px; width:calc(100% - 28px); }
    dialog::backdrop { background:rgba(10,30,21,.52); backdrop-filter:blur(3px); }
    .modal-close { background:#edf2ee; border:0; border-radius:50%; color:#5a6962; font-size:20px; height:32px; position:absolute; right:14px; top:14px; width:32px; }
    dialog h2 { color:#153c2d; font-size:1.35rem; letter-spacing:-.025em; margin:0 0 5px; }
    dialog > p { color:#697970; font-size:.84rem; margin:0 0 18px; }
    form { display:grid; gap:15px; grid-template-columns:1fr 1fr; }
    .field { display:flex; flex-direction:column; gap:7px; }
    .wide { grid-column:1/-1; }
    .field > label { color:#294b3c; font-size:.79rem; font-weight:800; }
    .field input,.field select,.field textarea { background:#fbfcfb; border:1px solid #d3dfd8; border-radius:10px; color:var(--ink); outline:none; padding:10px 11px; width:100%; }
    .field input,.field select { height:42px; }
    .field textarea { min-height:78px; resize:vertical; }
    .field input:focus,.field select:focus,.field textarea:focus { border-color:#328461; box-shadow:0 0 0 3px rgba(50,132,97,.12); }
    .use-location { align-items:center; align-self:flex-start; background:transparent; border:0; color:#1a7450; display:flex; font-size:.73rem; font-weight:800; gap:5px; padding:0; }
    .photo-box { align-items:center; background:#f5f8f6; border:1px dashed #adc3b6; border-radius:12px; cursor:pointer; display:grid; gap:11px; grid-template-columns:48px 1fr auto; min-height:74px; padding:10px 14px; }
    .photo-box img { border-radius:9px; height:52px; object-fit:cover; width:52px; }
    .photo-icon { background:#e3eee8; border-radius:10px; color:#287856; display:grid; font-size:22px; height:44px; place-items:center; width:44px; }
    .photo-box b { color:#294b3c; display:block; font-size:.79rem; }
    .photo-box small { color:#78877f; display:block; font-size:.67rem; margin-top:3px; }
    #photo { left:-9999px; position:absolute; }
    .submit { background:var(--green); border:0; border-radius:999px; color:#fff; font-size:.86rem; font-weight:850; height:44px; }
    .toast { background:#153e2e; border-radius:999px; color:#fff; font-size:.8rem; font-weight:750; left:50%; opacity:0; padding:11px 16px; pointer-events:none; position:fixed; top:18px; transform:translate(-50%,-20px); transition:.2s ease; z-index:3000; }
    .toast.show { opacity:1; transform:translate(-50%,0); }
    .mobile-post { display:none; }
    @media (max-width:980px) {
      .legend { display:none; }
      .browse { grid-template-columns:335px minmax(0,1fr); height:calc(100vh - 181px); }
      .toolbar { grid-template-columns:1fr auto; }
      .filters { grid-column:1/-1; grid-row:2; }
    }
    @media (max-width:720px) {
      .topbar { height:62px; padding:0 16px; }
      .brand { font-size:1.35rem; }
      .header-right .post-btn { display:none; }
      .toolbar { gap:8px; min-height:112px; padding:8px 12px; }
      .tool-btn { font-size:0; height:42px; justify-content:center; padding:0; width:42px; }
      .tool-btn.reset { display:none; }
      .filters { margin-right:-12px; padding-right:12px; }
      .filters button { font-size:.77rem; padding:8px 11px; }
      .browse { display:flex; flex-direction:column; height:auto; }
      .map-wrap { height:54vh; min-height:370px; order:1; }
      .side { border:0; order:2; overflow:visible; padding:16px 13px 90px; }
      .cards { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
      .detail { bottom:12px; grid-template-columns:92px minmax(0,1fr); min-height:145px; width:calc(100% - 24px); }
      .detail > img { height:100%; width:92px; }
      .detail-body { padding:14px 38px 14px 13px; }
      .detail h2 { font-size:1rem; margin-top:7px; }
      .detail p { display:none; }
      .detail strong { font-size:.68rem; }
      .mobile-post { background:var(--green); border:0; border-radius:50%; bottom:20px; box-shadow:0 8px 28px rgba(18,71,48,.35); color:#fff; display:grid; font-size:30px; height:56px; place-items:center; position:fixed; right:18px; width:56px; z-index:1500; }
      dialog { padding:22px 18px; }
      form { grid-template-columns:1fr; }
      .wide { grid-column:auto; }
    }
  
.detail.no-photo { grid-template-columns: 1fr; }
#locationMap { height: 200px; border: 1px solid #d3dfd8; border-radius: 12px; z-index: 1; }
#locationStatus { font-size: .85rem; color: #35614c; }
.pick-actions { display: flex; gap: 16px; flex-wrap: wrap; }
[hidden] { display: none !important; }
#formFeedback { background: #edf4ef; border: 1px solid #cadbd0; border-radius: 10px; color: #214f3c; padding: 12px; }
.status { font-size: .8rem; }
.line { font-size: .875rem; }
.meta span { font-size: .8rem; }
.field > label { font-size: .875rem; }
.legend, .tool-btn, .filters button { font-size: .875rem; }
@media (max-width: 720px) { .tool-btn { font-size: 0; } }