:root{
      --ink:#0f172a;       /* text color  */
      --panel:#ffffff;     /* panels bg   */
      --border:#e2e8f0;    /* borders     */
      --accent:#2563eb;    /* links/btns  */
      --muted:#64748b;     /* secondary text */
    }
    html, body{ height:100%; }
    body{
      margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink); background:#f8fafc;
    }
    .app{
      display:grid; grid-template-columns: 320px 1fr; gap:0; height:100vh;
    }
    /* Sidebar */
    .sidebar{
      display:flex; flex-direction:column; border-right:1px solid var(--border); background:var(--panel);
    }
    .sidebar header{ padding:16px 16px 12px; border-bottom:1px solid var(--border); }
    .title{ margin:0; font-size:18px; font-weight:700; }
    .subtitle{ margin:6px 0 0; font-size:12px; color:var(--muted); }

    .controls{ padding:12px 16px; border-bottom:1px solid var(--border); }
    .search{
      width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none;
      font-size:14px; background:#fff;
    }
    .list{ overflow:auto; padding:6px 8px 12px; }
    .item{
      border:1px solid var(--border); border-radius:12px; background:#fff; padding:10px 12px; margin:8px; cursor:pointer;
      transition: box-shadow .15s ease, transform .05s ease;
    }
    .item:hover{ box-shadow:0 4px 10px rgba(2,6,23,.06); }
    .item:active{ transform:scale(.995); }
    .item h4{ margin:0 0 6px; font-size:14px; }
    .item p{ margin:0; color:var(--muted); font-size:12px; }

    /* Map */
    #map{ height:100%; width:100%; }

    /* Header actions */
    .actions{ display:flex; gap:8px; align-items:center; }
    .btn{
      appearance:none; border:1px solid var(--border); background:#fff; padding:8px 10px; border-radius:10px;
      font-size:13px; cursor:pointer; transition: background .15s ease, box-shadow .15s ease;
    }
    .btn:hover{ background:#f1f5f9; box-shadow:0 2px 6px rgba(2,6,23,.06); }

    /* Laptop (>=1024px) */
    @media (min-width: 1024px){
      .app{ grid-template-columns: 320px 1fr; }
      .sidebar{ position:relative; height:100vh; }
      #map{ height:100%; }
    }

    /* Tablet (>=600px and <1024px) */
    @media (min-width: 600px) and (max-width: 1023px){
      .app{ grid-template-columns: 260px 1fr; }
      .sidebar{ position:relative; height:100vh; }
      #map{ height:100%; }
    }

    /* Mobile (<600px) */
    @media (max-width: 599px){
      .app{ grid-template-columns: 1fr; }
      .sidebar{ position:relative; z-index:500; height:50vh; }
      #map{ height:50vh; }
    }