:root {
        /* Light theme palette */
        --bg: #e6bf90;        /* page background */
        --fg: #0b1220;        /* primary text */
        --muted: #5b4630;     /* secondary text on light tan */
        --card: #f7ecd9;      /* panels, cards, list items */
        --accent: #0b1220;    /* primary button / accents (near-black) */
        --line: #b68f5b;      /* borders on light tan */
      }
      
      * { box-sizing: border-box; }
      
      body {
        margin: 0;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
        background: var(--bg);
        color: var(--fg);
      }
      
      /* Header */
      .topbar {
        display: flex; align-items: center;
        padding: 10px 16px;
        background: #d7b07e;               /* slightly darker than page bg */
        border-bottom: 1px solid var(--line);
        position: sticky; top: 0; z-index: 100;
        gap: 16px;
      }
      .topbar .brand { margin-right: 20px; }
      @media (min-width: 1024px){ .topbar .brand { margin-right: 28px; } }
      
      .brand {
        font-weight: 700; letter-spacing: 0.4px;
        text-decoration: none; color: var(--fg);
      }
      .brand:hover { text-decoration: underline; }
      
      .spacer { flex: 1; }
      
      /* Buttons */
      .btn {
        background: var(--accent);
        border: 1px solid var(--accent);
        color: #ffffff;
        padding: 8px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-weight: 600;
      }
      .btn:hover { 
              background: white;
              color:#0b1220;
              filter: brightness(1.05); 
        }
      
      .btn-outline {
        background: transparent;
        color: var(--fg);
        border: 1px solid var(--fg);
      }
      
      .hidden { display: none; }
      
      /* Layout */
      .container { padding: 18px; max-width: 1200px; margin: 0 auto; }
      .hero { margin-bottom: 12px; }
      
      /* Maps & pano containers */
      #map, #sv-map {
        width: 100%; height: 520px;
        border-radius: 12px; border: 1px solid var(--line);
        background: #fff;
      }
      .pano {
        width: 100%; height: 240px; margin-top:10px;
        border-radius: 12px; border: 1px solid var(--line);
        background: #fff;
      }
      
      /* Grid and cards */
      .grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
      @media (min-width: 1000px){ .grid { grid-template-columns: 1fr 1fr; } }
      
      .card {
        background: var(--card);
        padding: 14px; border-radius: 14px; border: 1px solid var(--line);
      }
      
      /* Lists */
      .list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
      .list li {
        cursor: default;
        background: var(--card);
        border: 1px solid var(--line);
        padding: 10px; border-radius: 10px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
      }
      .list li:hover { outline: 1px solid #a67f47; }
      .list li .actions { display: flex; gap: 8px; }
      
      /* Forms */
      label { display:block; margin: 8px 0; }
      textarea, select, input[type="text"] {
        width: 100%;
        padding: 8px; border-radius: 8px;
        border: 1px solid var(--line);
        background: #ffffff; color: var(--fg);
      }
      
      /* Links */
      .link-edit {
        color: #0d5db8;            /* clear blue on tan */
        font-weight: 600;
        text-decoration: none;
      }
      .link-edit:hover { text-decoration: underline; }
      
      .link-strong { font-weight: 700; text-decoration: underline; }
      
      /* Nav */
      .nav-links { display:flex; gap:16px; margin-right:10px; }
      .nav-link, .nav-link:visited {
        color: var(--fg); text-decoration: none; opacity: .95;
      }
      .nav-link:hover, .nav-link:focus { text-decoration: underline; opacity: 1; }
      
      .hamburger {
        display:none; background:none; border:none;
        font-size:20px; color: var(--fg);
      }
      
      @media (max-width: 640px) {
        .nav-links {
          display:none; position:absolute; right:12px; top:48px;
          background: var(--card);
          border:1px solid var(--line);
          padding:8px; border-radius:10px; flex-direction:column;
        }
        .hamburger { display:inline-block; margin-left:8px; }
        .nav-right.open .nav-links { display:flex; }
      }
      
      /* Secondary text */
      .note { color: var(--muted); font-size: 0.92em; }
      
      /* InfoWindow content (Google Maps) */
      .infowin {
        color: #0b1220;
        line-height: 1.35;
        min-width: 190px; max-width: 280px;
        overflow-wrap: anywhere; word-break: break-word;
      }
      .infowin .title {
        font-weight: 700; font-size: 1rem;
        margin-bottom: 6px; color: #0b1220;
      }
      .infowin .meta { margin: 4px 0; color: #334155; }
      .infowin .actions { margin-top: 10px; clear: both; }
      .infowin .btn-primary,
      .infowin .btn-primary:visited {
        display: inline-block;
        background: #0b1220; color: #ffffff;
        border: 1px solid #0b1220;
        padding: 6px 10px; border-radius: 8px;
        text-decoration: none; font-weight: 600;
      }
      .infowin .btn-primary:hover,
      .infowin .btn-primary:focus { filter: brightness(1.08); }
      
      /* Images inside infowin (if any) */
      .infowin img { max-width: 220px; display:block; margin-top:6px; border-radius: 8px; }
      
      /* High-contrast link palette (on light background) */
      :root{
        --link: #0d5db8;
        --link-hover: #0f6fe0;
        --link-visited: #0d5db8; /* avoid purple */
      }
      a:not(.btn), a:not(.btn):visited {
        color: var(--link);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      a:not(.btn):hover, a:not(.btn):focus { color: var(--link-hover); }
      
      /* Inputs in expanders inherit form styles */
      .expander label { display:block; margin: 8px 0; }
      .expander input[type="text"],
      .expander textarea,
      .expander select {
        width: 100%; padding:8px; border-radius:8px;
        border:1px solid var(--line); background:#ffffff; color:var(--fg);
      }
      
      /* Admin banner (kept readable on light bg) */
      .admin-banner {
        background: #cfa86f; color: var(--fg);
        padding: 6px 12px; border-bottom: 1px solid var(--line);
      }
      
      /* Overlay (quota/notice) */
      .overlay {
        position: fixed; inset: 0;
        background: rgba(11,18,32,0.35);      /* dim backdrop */
        display: flex; align-items: center; justify-content: center;
      }
      .overlay .panel {
        background: #fff; color: var(--fg);
        border: 1px solid var(--line);
        border-radius: 12px; padding: 16px; max-width: 440px;
      }
      
      /* Fine-tune borders on light theme */
      hr { border: none; border-top: 1px solid var(--line); }
      
      #user-name {
        margin: 0 3px 0 0;
      }

      /* --- Inline “i” button --- */
.inline-info {
        display:inline-flex;
        align-items:center;
        gap:.4rem;
        font-size:1rem; /* match your surrounding text */
      }
      
      .info-btn {
        width:1.4rem; height:1.4rem;
        border-radius:50%;
        border:1px solid #4b5563;          /* gray-600 */
        background:#fff;
        font:600 0.9rem/1 "Inter", system-ui, sans-serif;
        color:#374151;                      /* gray-700 */
        display:inline-flex; align-items:center; justify-content:center;
        cursor:pointer;
        padding:0;
      }
      .info-btn:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
      .info-wrap {
        position: relative;
        display: inline-block; /* keeps it sized to the phrase */
      }
      
      .info-pop {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: 28rem;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.06);
        padding: 14px 16px 16px;
        z-index: 999;
        display: none; /* hidden until triggered */
      }
      
      .info-pop[data-open="true"] {
        display: block;
      }
            
      .info-close {
        position:absolute; top:8px; right:10px;
        width:1.5rem; height:1.5rem;
        border:none; border-radius:8px;
        background:transparent; color:#4b5563; font-size:1.1rem; font-weight:700;
        cursor:pointer;
      }
      .info-close:hover { background:#f3f4f6; } /* gray-100 */
      .info-close:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
      
      /* Submitted spaces in the "Submit to:" dropdown */
      .opt-submitted {
        color: #22c55e;  /* a soft green */
        font-weight: 500;
      }